@charset "UTF-8";

/*
Theme Name: Steven Sloan's theme
Theme URI: http://stevenosloan.com
Description: Theme for Steven Sloan's personal webpage.
Version: 3.2
Author: Steven Sloan
Author URI: http://stevenosloan.com/


	This theme was designed and built by Steven Sloan,
	whose info you will find at http://stevenosloan.com/

	Feel free to take any tricks or techniques from the CSS and HTML.
	The design and assets are copyrighted and not for reuse. 
	Copyright 2010 Steven Sloan

*/




/**** resets ****/
	*{
		padding:0;
		margin:0;
		border:none;
		
		/*outline:1px solid #c09;*/
		}
		
	html{
		height:100%;
		}
	
	body{
		width:100%;
		height:100%;
		position:relative;
		background: #ccc url('http://stevenosloan.com/assets/wood-background.jpg') fixed;
		}
		
	
	img{
		outline:0;
		border:none;
		}
	
	a{
		text-decoration:none;
		outline:none;
		}
		
	ul{
		list-style:none;
		}
		
	article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    	display:block;
		}
		
	.clear{
		position:relative;
		clear:both;
		}
/**** end resets ****/


html, body, #siteWrapper{
	height:100%;
	}
	
body > #siteWrapper{ height: auto; min-height: 100%;  }

#siteWrapper{
	width:832px;
	margin: 0 auto;
	height:auto;
	min-height:100%;
	position:relative;
	}
	
	#staticStuff{
		position:fixed;
		top:32px;
		}
		
		/* add a @media query 
		
			position:absolute;
			etc.
		*/
		
		header{
			width:832px;
			position:relative;
			height:136px;
			}
		
		#siteNavigation{
			width:176px;
			height:104px;
			background-color:#fc0;
			position:absolute;
			z-index:100;
			top:24px;
			left:0;
			}
			
			.grey#siteNavigation{
				background-color:#ccc !important;
				}
			
			#siteNavigation ul{
				display:block;
				position:absolute;
				right:16px;
				top:16px;
				width:128px;
				text-align:right;
				}
				
		.prevNext a{
			display:block;
			width: 160px;
			height:32px;
			display:block;
			background-color:#A6B9FC;
			text-align:left;
			line-height: 32px;
			padding-left:16px;
			margin-top:24px;
			}
			
			.prevNext ~ .prevNext a{
				margin-top:8px;
				}
				
		#workDescription{
			width:320px;
			float:left;
			}
			
			#workDescription .doubleColumn{
				margin:0;
				background-color:#fff;
				padding: 16px;
				float:left;
				}
				
		a.flag{
			display:block;
			float:left;
			width:304px;
			height:32px;
			margin-top:8px;
			background-color:#a6b9fc;
			text-align:left;
			line-height:32px;
			padding-left:16px;
			}
		
		
	#contentWrapper{
		min-height:100%;
		width:auto;
		position:relative;
		padding-bottom:48px;
		z-index:10;
		margin-top:16px;
		}
		
		
		/******************** POST CONTENT *********************/
		.post{
			width:496px;
			margin: 16px 0 48px 224px;
			}
			
			.post.video{
				width:532px;
				margin: 16px 0 48px 205px;
				}
			
			.whiteGroup{
				width:462px;
				background-color:#fff;
				padding:16px 16px 32px 16px;
				}
				
				.video .whiteGroup{
					width:500px;
					}
			
			a.permaLink{
				display:block;
				width:32px;
				height:24px;
				padding:0 8px;
				margin: 0 16px 0 0;
				background-color:#fc0;
				text-align:center;
				float:right;
				position:relative;
				bottom:8px;
				}
				
			cite{
				visibility:hidden;
				}
				
			cite a{
				visibility:visible;
				display:block;
				max-width:288px;
				height:24px;
				padding:0px 16px;
				margin: 0 16px 0 0;
				background-color:#a6b9fc;
				float:right;
				position:relative;
				bottom:8px;
				}
				
				.whiteGroup h3{
					padding: 0;
					float:none;
					background-color:transparent;
					margin: 8px 0 0 0;
					bottom:0;
					}
				
			.post img{
				width:462px;
				}
				
		/********************* End Post Content ************************/
		
		
		#workNavigation, #contactContent{
			background-color:#fff;
			height:120px;
			position:absolute;
			top:16px;
			left:160px;
			}
			
			#workNavigation{ width:672px; }
			#contactContent{ width:512px; }
			
			#workNavigation ul, #contactContent ul{
				display:block;
				float:left;
				margin:24px 0 0 32px;
				width:128px;
				text-align:right;
				}
				
		#aboutContent{
			position:absolute;
			top:16px;
			right:0;
			width:672px;
			padding-bottom:24px;
			}
			
			#aboutContent .whiteBox{
				background-color:#fff;
				position:relative;
				width: 672px;
				padding-bottom:24px;
				margin-bottom:24px;
				}
				
		#workImages{
			width:496px;
			float:left;
			margin: 0px 0 0 16px;
			}
			
			#workImages figure{
				margin-bottom:24px;
				}
			
				#workImages img{
					width:464px;
					padding: 16px;
					background-color:#fff;
					margin:0;
					}
					
					#workImages img ~ img{
						margin:16px 0 0 0;
						}	
				
				#workImages figcaption{
					display:block;
					width:288px;
					background-color:#a6b9fc;
					padding: 8px 16px 6px 16px;
					margin: 0px 0 0px 160px;
					position:relative;
					bottom:10px;
					}
						
		
		.singleColumn{
			}
		
		.doubleColumn{
			width:288px;
			float:left;
			margin: 0 0 0 32px;
			}
			
		#footer{
			width:832px;
			height:16px;
			margin: -48px auto 0 auto;
			text-align:right;
			position:relative;
			clear:both;
			padding-top:16px;
			}
				
		
		
/* text styling */


body{
	color:#333;
	font-size:12px;
	line-height:15px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	}
	
a{
	color:#333;
	text-decoration:none;
	}
	
header{
	font-size:11px;
	line-height:14px;
	}
	
h1, h2, h3{
	font-size:11px;
	text-transform:uppercase;
	margin-top: 24px;
	-webkit-font-smoothing: antialiased;
	}
	
hgroup{
	margin-top: 0px;
	margin-bottom:16px;
	}
	
	hgroup h1{
		font-size:13px;
		}
		
		hgroup h2{
			font-size:11px;
			line-height:11px;
			}
	
	hgroup h1, hgroup h2{
		margin-top:0;
		}
		
		hgroup h2{
			text-transform:none;
			font-weight:normal;
			}
	
p, figcaption{
	margin-top:8px;
	}
	
	p a, figcaption a{
		color:#000;
		text-decoration:underline;
		}
		
		a:visited{
			text-decoration:none;
			}
	
		p a:hover{
			text-decoration:underline;
			}
	

ul h1, ul h2, ul h3{
	display:block;
	border-bottom:2px solid #222;
	text-transform:uppercase;
	letter-spacing:0;
	padding: 0 2px 1px 0;
	margin: 0 0 4px 0;
	}
	
.prevNext a, a.flag{
	text-transform:uppercase;
	font-weight:bold;
	line-height:32px;
	}
	
	.cufon-active .prevNext a, .cufon-active a.flag{
		line-height:27px;
		}
		
blockquote{
	margin-top:8px;
	padding: 0 0 0 8px;
	border-left: 2px solid #ccc;
	font-family: courier new, courier, monospace;
	}
	
a.permaLink{
	line-height:24px;
	font-style:italic;
	}
	
	a.permaLink:hover{
		text-decoration:underline;
		}

#siteNavigation ul li a{
	padding-right:2px;
	line-height:11px;
	}
	
	ul li a:hover:before, li.current_page_item a:before, li.current_page_ancestor a:before{
		content: '- ';
		}