/*   
Theme Name: iamsimonbostock
Theme URI: http://www.iamsimonbostock.com
Description: Wordpress Theme for iamsimonbostock.com
Author: Simon Bostock
Author URI: http://www.iamsimonbostock.com
Version: 1.0
.
General comments/License Statement if any.
.
*/

html {-webkit-font-smoothing: antialiased;}


body{
	margin:0;
	padding:0;
	overflow-x:hidden;
	background:url(img/headerbackground.jpg);
	background-position:top;
	background-repeat:repeat-x;
	font-family:Arial, Helvetica, sans-serif;
	width:100%;
}

#content{
	margin-left:72px;
	width:890px;
	position:relative;
}

#leftcolumn{
	width:440px;
	min-height:320px;
}
#rightcolumn{
	padding:22px;
	position:absolute;
	background:url(img/heroborder.jpg);
	top:0;
	right:0;
}

#footer{
	margin-top:50px;
	width:100%;
	background:url(images/footerBg.jpg);
	background-repeat:repeat-x;
	background-position:top;
	height:245px;
}
#footer-twitterColumn{
	position:absolute;
	margin-top:62px;
	width:395px;
	margin-left:65px;

}
#footer-twitterColumn .twitterBirdy{
	z-index:+2;
	position:absolute;
	margin-top:50px;
	left:0px;
}
#footer-connectColumn{
	position:absolute;
	margin-top:62px;
	margin-left:450px;
	width:275px;
}
#footer-getintouchColumn{
	position:absolute;
	margin-left:725px;
	margin-top:62px;
}
#footer-twitterTextContainer{
	position:absolute;
	overflow:hidden;
	margin-left:70px;
	width:307px;
	height:101px;
	background:url(images/twitterBubble.jpg);
}
#footer-twitterText{
	position:absolute;
	width:307px;
	height:101px;
	background:url(images/twitterBubbleBottom.jpg);
	background-position:top;
	background-repeat:no-repeat;
}
#footer-twitterTextContainer #tweet li{
	font-family:Arial;
	font-size:15px;
	width:262px;
	color:#b8b8b8;
	margin-left:28px;
	margin-top:10px;
}

#footer-twitterTextContainer #tweet li a{
	font-family:Arial;
	font-size:15px;
	color:#b8b8b8;
	text-decoration:underline;
}
#footer-twitterTextContainer #tweet li .timeStamp{
	font-size:10px;
	color:#777777;
	margin-left:10px;
}
#footer-getintouchColumn p{
	font-family:Arial;
	width:325px;
	font-size:15px;
	color:#b8b8b8;
	margin-left:20px;
	margin-top:5px;
}
.download{
	background-color: #262626;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 5px;
}


/* ------ social buttons code --------- */
a.rollover {
	display: inline-block;
	width: 43px;
	height: 43px;
	text-decoration: none;
	
	}
	
a.delicious{
	background: url(images/icon_delicious_btn.jpg);
}
a.tumblr{
	background: url(images/icon_tumblr_btn.jpg);
}
a.facebook{
	background: url(images/icon_facebook_btn.jpg);
}
a.flickr{
	background: url(images/icon_flickr_btn.jpg);
}
a.hypem{
	background: url(images/icon_hypem_btn.jpg);
}
a.linkedin{
	background: url(images/icon_linkedin_btn.jpg);
}
a.lastfm{
	background: url(images/icon_lastfm_btn.jpg);
}
a.scrnshots{
	background: url(images/icon_scrnshots_btn.jpg);
}
a.twitter{
	background: url(images/icon_twitter_btn.jpg);
}

a.rollover:hover {
	background-position: -45px 0;
	}

.displace {
	position: absolute;
	left: -5000px;
	}
	
	
/* ------ view project rollover code --------- */

a.viewproject{
	display: inline-block;
	width: 158px;
	height: 18px;
	text-decoration: none;
	background: url(img/viewproject_btn.jpg);
}

a.viewproject:hover {
	background-position: 0px -18px;
	}


/* ------ view example rollover code --------- */

a.viewexample{
	display: inline-block;
	width: 272px;
	height: 42px;
	text-decoration: none;
	background: url(img/viewexample_btn.jpg);
}

a.viewexample:hover {
	background-position: 0px -42px;
	}


/*------- general stuff --------------------*/
h1{
	font:Arial, Helvetica, sans-serif;
	font-size:87px;
	margin-top:20px;
	margin-left:5px;
	letter-spacing:-5px;
	padding-left:20px;
	padding-right:20px;
	padding-top:5px;
	color:#ff2462;
	font-weight:bold;
	line-height:78px;
	background:url(img/dottedbg.jpg);
	display:inline;
}


h2{
	letter-spacing:7px;
	background-color:#ff2462;
	color:#FFF;
	margin-bottom:0;
	font-size:16px;
	
}
strong.search-excerpt { 
	background: yellow; 
}


.recentwork{
	margin:7px 0 12px 0;
	font-family:Arial, Verdana;
	font-size:23px;
	font-weight:bold;
	letter-spacing:-1px;
	padding:3px 8px 3px 8px;
	color:#454545;
	display:inline-block;
	background:url(img/dottedbg.jpg);
	z-index:10;
	border-bottom:#454545 solid 2px;
}

.description{
	margin-top:25px;
	font:Arial;
	font-size:23px;
	letter-spacing:-1px;
	line-height:34px;
	font-weight:bold;
	color:#454545;
	width:410px;
	margin-bottom:10px;
	margin-left:5px;
}
.aboutMeCopy{
	font:Arial;
	font-size:20px;
	letter-spacing:-1px;
	line-height:30px;
	font-weight:bold;
	color:#323232;
	background-color:#ececec;
	display:inline;
	width:385px;
	margin-bottom:10px;
}
.brief{
	background:url(img/dottedbg.jpg);
	border-bottom:#454545 solid 2px;
	padding-left:3px;
	padding-right:3px;
}
#aboutMe{
	background:url(img/aboutmegraphic.jpg);
	background-position:top left;
	background-repeat:no-repeat;
	width:1110px;
	height:425px;
}

#aboutMe a{
	background-color:#ff316b;
	color:#ffffff;
	text-decoration:none;
	padding-left:3px;
	padding-right:3px;
	padding-top:2px;
	padding-bottom:2px;
}
#aboutMe a:hover{
	background-color:#ffffff;
	color:#ff316b;
	text-decoration:none;
	padding:3px;
}

#aboutMeLeftColumn{
	width:405px;
}

#meta{
	height:200px;
}

#meta-spacer{
	height:95px;
}

.tags{
	margin-bottom:10px;
	padding:5px;
	font-size:11px;
	color:#454545;
	font-weight:bold;
}
.categories{
	background-color:#E5E5E5;
	margin-bottom:5px;
	padding-left:6px; padding-top:4px; padding-right:2px; padding-bottom:4px;
	font-size:11px;
	color:#454545;
}
.date{
	background-color:#E5E5E5;
	margin-bottom:5px;
	padding-left:6px; padding-top:4px; padding-right:2px; padding-bottom:4px;
	padding:4px;
	font-size:11px;
	color:#454545;
}
#intro{
	
	margin-left:72px;
	/*height:150px;*/
	width:920px;
}
#header{
	height:160px;
	position:relative;
	padding:0;
	margin:0;
	top:0;
	left:0;
}


/*------ scroller stuff -----------------*/


#screen{
	
}
#sections{
	overflow:hidden;
	background-color:white;
	width:90%;
	height:585px;
	clear:left;
	margin-left:64px;
}
#screen{
	position:relative;
	height:585px;
	width:100%;
	/*margin-top:60px;*/
}
	#screen .next, #screen .prev{
		position:absolute;
		top:0px;
		z-index:+10;
	}
	#screen .prev{
		left:0px;
	}
	#screen .next{
		right:0px;
	}
	#navigation{
		width:600px;
		text-align:center;
		margin-left:62px;
	}
		#navigation ul{
			margin-left:55px !important;
			margin-left:35px;
		}
			#navigation li{
				float:left;
				margin:0 20px;
				padding:10px 20px;
				background-color:#EEE;
			}
				#navigation a{
					color:#933;
					font-weight:bolder;
					text-decoration:none;
				}
	
p{
	font-family:Arial, Helvetica, sans-serif;
	width:152px;
}

a{
	text-decoration:none;
}

ul, li, h4, h3, h1, p{
	padding:0;
	margin:0;
	list-style:none;
}
#sections ul{
		width:3660px;
	}
	
		#sections li{
			float:left;
			width:160px;
			padding:6px 6px;
		}
			#sections li.fallen{
				margin-top:369px;
			}
			
			#sections p{
				width:152px;
			
			}
			
			
			#sections a{
				color:#777;
				font-weight:bolder;
				text-decoration:none;
			}
			#sections a:hover{
				font-weight:bolder;
				text-decoration:underline;
			}
			
			
/*--------------------------------------------------------------*/
/*------ box caption stuff -------------------------------------*/

h3{ margin: 5px 5px 0 10px; color:#FFF; font:12pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }

h3 a:hover{
	text-decoration:underline;
}
			
			.boxgrid{ 
				width: 150px; 
				height: 110px; 
				margin-bottom:2px; 
				float:left; 
				background:#161613; 
				border: solid 5px #ff2462; 
				overflow: hidden; 
				position: relative; 
			}
				.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0; 
				}
				.boxgrid p{ 
					padding: 0 10px; 
					color:#afafaf; 
					font-weight:bold; 
					font:8pt "Lucida Grande", Arial, sans-serif; 
				}
				
			.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #ff2462; 
				height: 150px; 
				width: 100%; 
				opacity: .9; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
 			}
 				.captionfull .boxcaption {
 					top: 200px;
 					left: 0;
 				}


/*--------------------------------------------------------------*/
/*------ thumbscrollerstuff -------------------------------------*/

#thumbScroller{
	margin-left:72px;
}

#thumbnailsection{
	overflow:hidden;
	width:740px;
	height:115px;
	clear:left;
	margin-left:62px;
	position:relative;

}
#smallScreen{
	position:relative;
	width:865px;
	margin-top:0;
}
	#smallScreen .next, #smallScreen .prev{
		
		position:absolute;
		z-index:+4;
	}
	#smallScreen .prev{
		left:0px;
		float:left;
	}
	#smallScreen .next{
		right:0px;
		float:right;
	}
	

#thumbScroller p.recentwork{
	font-family:Arial, Verdana;
	font-size:23px;
	font-weight:bold;
	margin-top:20px;
	letter-spacing:-1px;
	padding:3px 8px 3px 8px;
	color:#454545;
	display:inline-block;
	background:url(img/dottedbg.jpg);
	z-index:10;
	border-bottom:#454545 solid 2px;
	width:845px;
}



#thumbnailsection ul{
		width:1500px;
		list-style:none;
	}
	
		#thumbnailsection li{
			float:left;
			padding:5px;
			margin-top:2px;
		}
			
			
			
			
			#thumbnailsection h2{
				color:#993333;
				margin:20px 0pt;
			}
			#thumbnailsection a{
				color:#777;
				font-weight:bolder;
				text-decoration:none;
			}
			
			/*--------------------------------------------------------------*/
			/*------ small box caption stuff -------------------------------------*/

			

						.smallboxgrid{ 
							width: 127px; 
							height: 93px; 
							margin-bottom:2px; 
							float:left; 
							background:#161613; 
							border: solid 5px #CCCCCC; 
							overflow: hidden; 
							position: relative; 
						}
							.smallboxgrid img{ 
								position: absolute; 
								top: 0; 
								left: 0; 
								border: 0; 
							}
							.smallboxgrid p{ 
								padding: 0 10px; 
								color:#afafaf; 
								font-weight:bold; 
								font:8pt "Lucida Grande", Arial, sans-serif; 
							}

						.smallboxcaption{ 
							float: left; 
							position: absolute; 
							background: #CCCCCC; 
							height: 127px; 
							width: 100%; 
							opacity: .9; 
							/* For IE 5-7 */
							filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
							/* For IE 8 */
							-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
			 			}
			 				.smallcaptionfull .smallboxcaption {
			 					top: 100px;
			 					left: 0;
			 				}