@import url('jquery.jcarousel.css');
@import url('skin.css');
@import url('jquery.tweet.css');
@import url('tipTip.css');
@import url('../fancybox/jquery.fancybox-1.3.1.css');


/* --------------------------- reset --------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin:0; padding:0;} 
table {border-collapse:collapse; border-spacing:0;} 
fieldset, img { border:0; } 
address, caption, cite, code, dfn, th, var {font-style:normal; font-weight:normal;} 
ol, ul { list-style:none;}
body{ 
font-family:arial, helvetica, sans-serif; 
background: #0e6fad url(slices/main_bg.png) repeat-x;}
a {color: #ffffff; text-decoration:underline; outline:none;}
a:hover {text-decoration:underline;}

#center{
width:960px;
margin-left:auto;
margin-right:auto;
}

#wrapper {width:999px; margin:0 auto;}
#panel {
	height:400px;
	background-color:#000;
	color:#fff;
	display:none;
}

/*------------------------------ navigation top --------------------------*/
#nav {
width:941px; 
background:url(slices/bg_nav.png) no-repeat; 
height:88px; 
padding:0 0 0 0px; 
margin: 25px 0 0 0;
}
#nav p{
float:left;
color:#fff;
margin: 29px 0 0 23px;
}
#nav a.logo{
display:block;
background: url('slices/logo.png') no-repeat scroll 0 0 transparent;
height: 28px;
width: 181px;
text-indent: -9999px;
}
body#home a#homenav{
color: #0099cc;
background: url(slices/bg_nav_over.png) repeat-x;
height: 55px;
}
body#home a#homenavLast{
color: #0099cc;
background: url(slices/bg_nav_over.png) repeat-x;
height: 55px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}

#nav li {
float:right; 
list-style:none; 
font-size:15px; 
background:url(slices/bg_divider.png) left top no-repeat; 
padding:0 0 0 2px;
}
#nav li a {
padding:34px 15px 0 15px; 
height: 55px;
color:#fff; 
text-decoration:none; 
display:inline-block; 
font-weight:bold;
}
#nav li a:hover{

background: url(slices/bg_nav_over.png) repeat-x;
height: 55px;
}  
#nav li a.last:hover{
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
}      

/*-----------------------------------------------------------*/
#headwrapper{
width: 960px;
margin:0 auto!important;
}

/*----------------MASTHEAD-----------------------------------*/
#masthead{
width: 1019px;
height: 505px;
background: url('slices/masthead_main.png') no-repeat;
}
#servicesmasthead{
width: 1019px;
height: 505px;
background: url('slices/masthead_services.png') no-repeat;
}
#aboutmasthead{
width: 1019px;
height: 505px;
background: url('slices/masthead_about.png') no-repeat;
}
#contactmasthead{
width: 1019px;
height: 550px;
margin-bottom: 15px;
background: url('slices/masthead_contact.png') no-repeat;
}
#errormasthead{
width: 1019px;
height: 550px;
margin-bottom: 15px;
background: url('slices/masthead_404.png') no-repeat;
}

/*--------------------- About section ---------------- */

#about{
float:left;
margin: 0 0 20px 0;
padding: 0;
width: auto;
}

#about textarea{
border: 1px solid #2f9eec;
background: transparent;
margin: 10px 0 0 40px;
padding: 5px;
font-family: verdana, arial, sans-serif;
color: #fff;
font-size: 0.8em;
height: 150px;
width: 490px;
}
#about input{
border: 1px solid #2f9eec;
background: transparent;
margin: 10px 0 0 40px;
padding: 5px;
font-family: verdana, arial, sans-serif;
color: #fff;
font-size: 0.8em;
height: 20px;
width:490px;
}
#about input:focus{
border: 1px solid #fff;
}
#about textarea.mainarea{
height: 150px;
width: 400px;
}
#about textarea:focus{
border: 1px solid #fff;
}
#about textarea.emailaddress{
height: 20px;
width: 400px;
}
#about h1.about{
display:block;
background: url('slices/about-me-h1.png') no-repeat scroll 0 0 transparent;
height: 34px;
width: 191px;
text-indent: -9999px;
margin: 60px 0 0 40px;
}
#about h1.services{
display:block;
background: url('slices/services-h1.png') no-repeat scroll 0 0 transparent;
height: 34px;
width: 260px;
text-indent: -9999px;
margin: 60px 0 0 40px;
}
p.portfolio{
display:block;
background: url('slices/portfolio-h1.png') no-repeat scroll 0 0 transparent;
height: 34px;
width: 260px;
text-indent: -9999px;
margin: 60px 0 0 5px;
float:left;
}
#about h1.error{
display:block;
background: url('slices/error-h1.png') no-repeat scroll 0 0 transparent;
height: 34px;
width: 260px;
text-indent: -9999px;
margin: 60px 0 0 40px;
}
#about h1.contact{
display:block;
background: url('slices/contact-h1.png') no-repeat scroll 0 0 transparent;
height: 34px;
width: 260px;
text-indent: -9999px;
margin: 60px 0 0 40px;
}
#about p.contactme{
width: 530px;
}
#about p.contactdetails{
margin: 20px 0 0 40px;
}
#about span.required{
color: #FFD400;
}
#about span.bold{
font-weight:bold;
}

#about p{
width: 300px;
font-family: verdana, arial, sans-serif;
color: #ffffff;
font-size: 0.8em;
margin: 30px 0 0 40px;
}

/*----------------------- right hand section ---------------------------- */

#contactRight{
float:right;
width:310px;
}

#contactRight h2.contact{
display:block;
background: url('slices/contactRight-h2.png') no-repeat scroll 0 0 transparent;
height: 34px;
width: 260px;
text-indent: -9999px;
margin: 60px 0px 0 0px;
}
#contactRight p{
width: 320px;
font-family: verdana, arial, sans-serif;
color: #ffffff;
font-size: 0.8em;
margin: 30px 0 0 0px;
}

#portfoliomasthead{
width: 1019px;
height: 505px;
background: url('slices/masthead_portfolio.png') no-repeat;
}
#mastheadWrapper{
width: 1019px;
margin: 0 auto;
}


/*----------------------Main blurb -------------------------- */
#mainblurb{
}
#mainblurb p{
line-height: 250%;
width: 400px;
color: #ffffff;
font-size: 1em;
width:400px;
position:absolute;
right:200px;
margin: 215px 0 0 0;
}
/*--------------------Main Wrapper---------------------------*/

#mainWrapper{
width: 960px;
}

/* column container */
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
		padding-top: 15px;
		padding-bottom: 30px;
		
		
	}
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
		width:100%;			/* width of page */
		position:relative;
	}
	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
						only padding top and bottom is included here, make it whatever value you need */
		overflow:hidden;
	}
	/* 3 Column settings */
	.threecol 
	{
	  
				/* right column background colour */
	}
	.threecol .colmid {
		right:33%;			/* width of the right column */
				/* center column background colour */
	}
	.threecol .colleft {
		right:33%;			/* width of the middle column */
			/* left column background colour */
	}
	.threecol .col1 {
		width:30%;			/* width of center column content (column width minus padding on either side) */
		left:66%;			/* 100% plus left padding of center column */
	}
	.threecol .col2 {
		width:30%;			/* Width of left column content (column width minus padding on either side) */
		left:70.5%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
	}
	.threecol .col3 {
		width:30%;			/* Width of right column content (column width minus padding on either side) */
		left:75%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
	}
	


	/*---------------------------------col fonts ----------------------*/
	
.col1 h2{
margin-top:10px;
margin-bottom:10px;
height: 26px;
width: 300px;
background: url('slices/info3.png') no-repeat;
text-indent: -999999px;
}
.col1 h2.graphicsflash{
margin-top:10px;
margin-bottom:10px;
height: 26px;
width: 300px;
background: url('slices/graphicsflash.png') no-repeat;
text-indent: -999999px;
}
.col1 h2.employment{
margin-top:10px;
margin-bottom:10px;
height: 26px;
width: 300px;
background: url('slices/employment.png') no-repeat;
text-indent: -999999px;
}
.col2 h2{
margin-top:10px;
margin-bottom:10px;
height: 26px;
width: 300px;
background: url('slices/info1.png') no-repeat;
text-indent: -999999px;
}
.col2 h2.xhtmlcss{
margin-top:10px;
margin-bottom:10px;
height: 26px;
width: 300px;
background: url('slices/xhtmlcss.png') no-repeat;
text-indent: -999999px;
}

.col2 h2.education{
margin-top:10px;
margin-bottom:10px;
height: 26px;
width: 300px;
background: url('slices/education.png') no-repeat;
text-indent: -999999px;
}
.col3 h2{
margin-top:10px;
margin-bottom:10px;
height: 26px;
width: 300px;
background: url('slices/info2.png') no-repeat;
text-indent: -999999px;
}
.col3 h2.adverts{
margin-top:10px;
margin-bottom:10px;
height: 26px;
width: 300px;
background: url('slices/adverts.png') no-repeat;
text-indent: -999999px;
}
.col3 h2.sparetime{
margin-top:10px;
margin-bottom:10px;
height: 26px;
width: 300px;
background: url('slices/sparetime.png') no-repeat;
text-indent: -999999px;
}
.col1 p{
color:#fff;
font-size: 0.75em;
font-family: verdana, geneva, sans-serif;
line-height: 150%;
width: 290px;
}
.col2 p{
color:#fff;
font-size: 0.75em;
font-family: verdana, geneva, sans-serif;
line-height: 150%;
width: 290px;
}
.col3 p{
color:#fff;
font-size: 0.75em;
font-family: verdana, geneva, sans-serif;
line-height: 150%;
width: 270px;
}

/*---------------------Footer ----------------------------------*/
#footerWrap{
background: #000 url(slices/footer_bg.png) repeat-x;
height: auto;
}
#footer{
margin: 0 auto;
width: 960px;
color: #fff;
font-size: 0.75em;
font-family: verdana, geneva, sans-serif;
line-height: 150%;
}
#footer ul li a{
color:#fff;
}
#footer ul li{
margin-bottom:5px;
}

/* Start of Column CSS */
#container4 {
	clear:left;
	float:left;
	width:100%;
	overflow:hidden;
	
}
#container3 {
	clear:left;
	float:left;
	width:100%;
	position:relative;
	right:25%;
	
}
#container2 {
	clear:left;
	float:left;
	width:100%;
	position:relative;
	right:25%;
	
}
#container1 {
	float:left;
	width:100%;
	position:relative;
	right:25%;
	
}
#col1 {
	float:left;
	width:21%;
	position:relative;
	left:77%;
	overflow:hidden;
}

#col2 {
	float:left;
	width:21%;
	position:relative;
	left:81%;
	overflow:hidden;
}
#col3 {
	float:left;
	width:21%;
	position:relative;
	left:81%;
	overflow:hidden;
}
#col4 {
	float:left;
	width:29%;
	position:relative;
	left:81.2%;
	overflow:hidden;
}

#col1 h2{
margin-top: 30px;
margin-bottom: 20px;
height: 17px;
width: 191px;
background: url('slices/resources.png') no-repeat;
text-indent: -999999px;
}
#col2 h2{
margin-top: 30px;
margin-bottom: 20px;
height: 17px;
width: 191px;
background: url('slices/sitemap.png') no-repeat;
text-indent: -999999px;
}
#col3 h2{
margin-top: 30px;
margin-bottom: 20px;
height: 17px;
width: 191px;
background: url('slices/socialmedia.png') no-repeat;
text-indent: -999999px;
}
#col4 h2{
margin-top: 30px;
margin-bottom: 25px;
height: 17px;
width: 191px;
background: url('slices/flickr.png') no-repeat;
text-indent: -999999px;
}
 #col4 input{
 width: 300px;
 height: 20px;
 }
#col4 ul li a.newsletter{
margin-top: 30px;
display: block;
background: #fff;
height: 26px;
width: 126px;
text-indent: -999999px;
}

#subfooter{
margin: 20px 0 0 0;
text-align: center;
background: #000 url('slices/subfooter.png') no-repeat;
height: 106px;
width: 960px;
}
#subfooter p{
margin: 30px 0 0 40px;
float:left;
padding-left:25px;
}

a.viewmore-button{
background: url('slices/viewmore.png') no-repeat scroll 0 0 transparent;
display:block;
margin-top: 40px;
height: 28px;
width: 150px;
text-indent: -9999px;
}
a.viewmore-button:hover{
background: url('slices/viewmore.png') no-repeat scroll 0 -28px transparent;
}

a.send-button{
background: url('slices/send.png') no-repeat scroll 0 0 transparent;
display:block;
margin-top: 20px;
margin-bottom: 25px;
height: 28px;
width: 150px;
text-indent: -9999px;
}
a.send-button:hover{
background: url('slices/send.png') no-repeat scroll 0 -28px transparent;
}

.colmask img{
margin-bottom: 20px;
}

a.girlblue{
background: url('slices/girlblue.jpg') no-repeat scroll 0 0 transparent;
display:block;
height: 170px;
width: 278px;
text-indent: -9999px;
}
a.girlblue:hover{
background: url('slices/girlblue.jpg') no-repeat scroll 0 -170px transparent;
}
a.jjfj{
background: url('slices/jjfj.jpg') no-repeat scroll 0 0 transparent;
display:block;
height: 170px;
width: 278px;
text-indent: -9999px;
}
a.jjfj:hover{
background: url('slices/jjfj.jpg') no-repeat scroll 0 -170px transparent;
}

a.dnm{
background: url('slices/dnm.jpg') no-repeat scroll 0 0 transparent;
display:block;
height: 170px;
width: 278px;
text-indent: -9999px;
}
a.dnm:hover{
background: url('slices/dnm.jpg') no-repeat scroll 0 -170px transparent;
}

a.cubic{
background: url('slices/jiveme.jpg') no-repeat scroll 0 0 transparent;
display:block;
height: 170px;
width: 278px;
text-indent: -9999px;
}
a.cubic:hover{
background: url('slices/jiveme.jpg') no-repeat scroll 0 -170px transparent;
}

a.magpi{
background: url('slices/magpi.jpg') no-repeat scroll 0 0 transparent;
display:block;
height: 170px;
width: 278px;
text-indent: -9999px;
}
a.magpi:hover{
background: url('slices/magpi.jpg') no-repeat scroll 0 -170px transparent;
}

a.eggs{
background: url('slices/eggs.jpg') no-repeat scroll 0 0 transparent;
display:block;
height: 170px;
width: 278px;
text-indent: -9999px;
}
a.eggs:hover{
background: url('slices/eggs.jpg') no-repeat scroll 0 -170px transparent;
}

a.honor{
background: url('slices/honor.jpg') no-repeat scroll 0 0 transparent;
display:block;
height: 170px;
width: 278px;
text-indent: -9999px;
}
a.honor:hover{
background: url('slices/honor.jpg') no-repeat scroll 0 -170px transparent;
}

a.town-shoes{
background: url('slices/town-shoes.jpg') no-repeat scroll 0 0 transparent;
display:block;
height: 170px;
width: 278px;
text-indent: -9999px;
}
a.town-shoes:hover{
background: url('slices/town-shoes.jpg') no-repeat scroll 0 -170px transparent;
}

a.willowbrook{
background: url('slices/willowbrook.jpg') no-repeat scroll 0 0 transparent;
display:block;
height: 170px;
width: 278px;
text-indent: -9999px;
}
a.willowbrook:hover{
background: url('slices/willowbrook.jpg') no-repeat scroll 0 -170px transparent;
}



a.sea{
background: url('slices/elephant-small.jpg') no-repeat scroll 0 0 transparent;
display:block;
height: 170px;
width: 278px;
text-indent: -9999px;
}
a.sea:hover{
background: url('slices/elephant-small.jpg') no-repeat scroll 0 -170px transparent;
}

a.hippy{
background: url('slices/hippy.jpg') no-repeat scroll 0 0 transparent;
display:block;
height: 170px;
width: 278px;
text-indent: -9999px;
}
a.hippy:hover{
background: url('slices/hippy.jpg') no-repeat scroll 0 -170px transparent;
}


/*--------------------------contact form -----------------------------------*/
#contact_form_holder { 
    
    
    width:400px;
}
#contact_form_holder input, #contact_form_holder textarea { 
    width:100%; /* make all the inputs and the textarea same size (100% of the div they are into) */ 
    font-family:inherit; /* we must set this, because it doesn't inherits it */ 
    padding:5px;
}
#contact_form_holder textarea { 
    height:100px; /* i never liked small textareas, so make it 100px in height */ 
}
#send_message { 
   
    background: transparent url(slices/send.png) no-repeat !important;
    border:none !important; /* remove the default border and put a normal black one */
    cursor:pointer;
	text-indent: -9999px;
	height: 28px !important;
	width: 150px !important;
}


.error { margin: 10px 0 0 40px; width: 482px; display: none; padding:10px; color: #D8000C; font-size:12px;background-color: #FFBABA;}
.success { margin: 10px 0 0 40px; width: 482px; display: none; padding:10px; color: #044406; font-size:12px;background-color: #B7FBB9;}

#contact_logo { vertical-align: middle; }
.error img { vertical-align:top; }

.like{
margin-top:30px;
background: #fff url('slices/like-bg.png') no-repeat;
height: 62px;
width: 215px;
}
.like-mini{
margin-top:15px;
}

#award-banner{
border: 0;
position: absolute;
right: 0;
top: 0;
z-index:10;
}
#awards{

}
#awards p {
margin-left:5px;
margin-bottom:10px;
}
.featuredHeader{
margin-left:10px;
color:#336699;
font-weight:bold;
}






/* project page */

#projects-block 
{
 float:left;   
}

#projects-block .left-col { width:582px; float:left; margin-right:20px; }

#projects-block .right-col { width:307px; float:left; }


#projects-block .right-col h2 { font-family:Arial, Helvetica, sans-serif; font-size:21px; font-weight:bold; color:#fbee0d; text-transform:uppercase; margin-bottom:5px; letter-spacing:.3px; background:url(images/home-line-bg.png) repeat-x bottom left; padding-bottom:10px; }

#projects-block .left-col .project-screens { margin-bottom:15px; }
#projects-block .left-col .project-screens ul { list-style-type:none; }
#projects-block .left-col .project-screens ul li { display:block; }
#projects-block .left-col .project-screens ul li img {}

#projects-block .left-col .project-screens .controls 
{
     background:url(slices/controls-bg.png) no-repeat; 
     width:546px; 
     height:106px; 
     margin-left:18px; 
     margin-top:-125px; 
     position:absolute; 
     z-index:100; 
     zoom:1;
  }
#projects-block .left-col .project-screens .controls .left-side { margin-left:10px; margin-top:25px; float:left; }
#projects-block .left-col .project-screens .controls .left-side a { background:url(slices/slide-arrows.png) 0 0 no-repeat; width:59px; height:59px; display:block; text-indent:-9999px; }
#projects-block .left-col .project-screens .controls .left-side a:hover { background:url(slices/slide-arrows.png) 0 -61px no-repeat; }
#projects-block .left-col .project-screens .controls .middle 
{
    margin-top:38px; 
    float:left; 
    margin-left: 110px; 
    
 }
 
 .developmentMargin
 {
  margin-left: 86px!important; 
  color: #fff!important;
  font-size:1.8em!important;   
 }
 
#projects-block .left-col .project-screens .controls .middle a {text-decoration:none;display:block; font-size:1.8em;}
#projects-block .left-col .project-screens .controls .right-side{ margin-right:10px; margin-top:25px; float:right; }
#projects-block .left-col .project-screens .controls .right-side a { background:url(slices/slide-arrows.png) 0 -122px no-repeat; width:59px; height:59px; display:block; text-indent:-9999px; }
#projects-block .left-col .project-screens .controls .right-side a:hover { background:url(slices/slide-arrows.png) 0 -183px no-repeat; }

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0; }

* html .clearfix { zoom: 1; } /* IE6 */

*:first-child+html .clearfix { zoom: 1; } /* IE7 */



/* New portfolio section */

#portfolio-masthead
{
    width:941px;
    
}
h1.portfolio-study{
display:block;
background: url('slices/portfolio-study-h1.png') no-repeat scroll 0 0 transparent;
height: 34px;
width: 663px;
text-indent: -9999px;
margin: 60px 0 0 5px;
}

h2.misc{
display:block;
background: url('slices/misc-h2.png') no-repeat scroll 0 0 transparent;
height: 23px;
width: 200px;
text-indent: -9999px;
margin: 0;
}

h2.maxroam{
display:block;
background: url('slices/maxroam-h2.png') no-repeat scroll 0 0 transparent;
height: 23px;
width: 200px;
text-indent: -9999px;
margin: 0;
}

h2.cubic{
display:block;
background: url('slices/cubic-h2.png') no-repeat scroll 0 0 transparent;
height: 23px;
width: 200px;
text-indent: -9999px;
margin: 0;
}

h2.sean{
display:block;
background: url('slices/sean-h2.png') no-repeat scroll 0 0 transparent;
height: 23px;
width: 200px;
text-indent: -9999px;
margin: 0;
}

h2.girl{
display:block;
background: url('slices/girl-h2.png') no-repeat scroll 0 0 transparent;
height: 23px;
width: 200px;
text-indent: -9999px;
margin: 0;
}
h2.band{
display:block;
background: url('slices/band-h2.png') no-repeat scroll 0 0 transparent;
height: 26px;
width: 200px;
text-indent: -9999px;
margin: 0;
}

.divider
{
    background: url('slices/divider.png') repeat-x;
    width:auto;
    padding: 0 0 20px 0;
    margin-top:15px;
    zoom:1;
}

.divider-right
{
    background: url('slices/divider.png') repeat-x;
    width:338px;
    padding: 0 0 15px 0;
    margin-top:10px;
}

#projects-right
{
    float:left;
    width:320px;
}

#projects-right h2
{
    color:#fff;
}

#projects-right h3
{
    color:#82dcfd;
}


#projects-right p
{
    color:#fff;
    font-size:0.8em;
    line-height:150%;
    margin: 10px 0 20px 0;
}


#projects-right ul
{
    margin:0;
    
}

#projects-right ul li
{
    color:#fff;
    font-size:0.8em;
    line-height:150%;
    background-image: url('slices/list-item-bg.png');
    background-repeat:no-repeat;
    background-position: left 0.5em;
    padding: 0 0 0 25px;
}

#portfolio-masthead h2
{
    color:#fff;
    font-size:1.2em;
}

.browseMore
{
    margin-top:35px;
    color: #fff;
    font-size:1.2em;
    float:left;
}

.noPadBtm
{
    padding-bottom:0!important;
}
.cufon-text{}

ul.work-nav
{
    margin:35px 0 0 0;
}

.addtoNav
{
    margin-top:75px!important;
    float:left!important;
    position:relative!important;
    left:531px!important;
}

ul.work-nav li
{   
    
    display:inline;
    color:#fff;
    font-size:1em;
    float:right;
    background-image: url('slices/list-item-work.png');
    background-repeat:no-repeat;
    background-position: left 0.3em;
    padding: 0 20px 0 20px;
    margin:0;
}


ul.work-nav li a
{
    text-decoration:none;
}

.NoPaddingLeft
{
    margin-right:0px!important;
}

.NoPaddingRight
{
    padding-right:0px!important;
}

.largerFont
{
    font-size:1.6em!important;
}