/*	

Main Bryanlademann.com Style Sheet

version: 2.4
author: bryan lademann
email: bryan@bryanlademann.com
website: http://bryanlademann.com
date created: 9/10/09
last updated: 5/25/10
media: screen


                                                            
------------------------------------------------------------

Notes: 
------------------------------------------------------------

COLOR SCHEMA  

text:       #414141 

headings,
nav links:  #5979A4  


This CSS is displayed in full for educational purposes and to 
showcase my css organization.

Always minimize your CSS before deploying:  
http://www.cssdrive.com/index.php/main/csscompressor/



------------------------------------------------------------
 
Table of Contents	
------------------------------------------------------------
	
Use = in Find or Replace (command/cntrl + F) to jump between sections
	
	* @imports
	* Reset
	* Base
	* Typography  
		- Headings
		- Text Elements   
		- Lists 
		- Tables
	* Navigation
		- Slideshow Nav
	* Layout  
		- Container
		- Grid
		- Content
		- Content-featured
		- Footer
	* Page-specific 
		- Home	
			- projects
	* Forms
		- Error
	* Troubleshooting 
	* Fouc Fix 
	


	
/* ------------------------------------------------------------ 
 
= @imports
------------------------------------------------------------ */

/* -- @fontface -- */
@import url(font-face.css) all; 



	
/* ------------------------------------------------------------ 
 
= reset.css	

With thanks to Eric Meyer:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ 
------------------------------------------------------------ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, textarea,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;  
	font-weight: inherit;
	line-height: inherit;    
	text-align: left;
	}

/* Eliminates outline on links in Mozilla browsers. Remove for accessibility compliance */
:focus {outline: 0;}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img, :link img, :visited img { border: none; }


 

/* ------------------------------------------------------------
	
= base.css
------------------------------------------------------------ */

html, body  { height: 100%; }
	
/* Prevents horizontal 'jump' issue in browser when content is 'above the fold' */
html        { overflow-y:scroll; } 

.right      { float:right; }
.left       { float:left; }
.center     { text-align:center; margin: 0 auto; }

.em         { font-style:italic; }

.text-up    { text-transform:uppercase; letter-spacing:0.1em; font-weight:normal; }
.text-down  { text-transform:lowercase; }

.hide       { position:absolute; text-indent:-9999px; display: none; }      

a           { display:inline; text-decoration:underline; }	
a:hover,
a:focus     { text-decoration:none; }

.clear      { clear: both; }       

/* 
The New Clearfix Method                                       
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ 
*/
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
                 
/* Makes all 'clickable' elements respond as links on :hover */
input[type=submit],label,select,.pointer { cursor:pointer; } 




/* ------------------------------------------------------------

= typography.css	
 - default font size is 10px.
 - vertical rythym set to 18px (1.8) line height.
 - 18/(element's font size) = line height                              
------------------------------------------------------------ */     

body    {
	background: #ddd;    
	/* font shorthand reads: font-weight, font-size/line-height font-family */
	font: 500 62.5%/1.8 'Myriad Pro', 'Lucida Grande', 'lucida sans unicode', 'Trebuchet MS', Helvetica, Arial, sans-serif;
	   
	color: #616161;
	}   

a	{ color: #414141; }	   


/*	Headings
------------------------------ */

h1, h2, h3, 
h4, h5, h6 { 
	font-family: "Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;
	word-spacing: .1em; 
	letter-spacing: -.02em;
	}

h1	{ font-size: 5.5em;	line-height:72px; margin: .18em 0 1em; } 
	#lec h1 { letter-spacing: .1em; }  
h2	{      
	color:#5979A4;
	font-size: 3.4em; 
	line-height: 54px;
	margin: 0 0 1em -19px;
	padding-left: 18px;
	text-transform:lowercase; 
	border-left: 1px solid #ddd;
	}                                   
h3	{ font-size: 2.1em; line-height:1.8; } 		
h4	{ font-size: 1.8em; line-height: 1.8; }	   
h5	{ font-size: 1.1em; line-height: 1; margin:0; color:#515151; }   	 
h6	{ font-size: 1em; line-height: 1.8; margin: .9em 0; color:#666; }		
                                                                                                         


/*	Text Elements
------------------------------ */
	
p {
	font-size:13px;
	line-height: 1.4;
	margin: 0 0 1.8em;
	text-align:left;  
	}  

/* enhances user experience by creating visual response when links are clicked */ 
p a          { position: relative; color: #222; white-space: nowrap; }
p a:active   { top: 1px; }      
 
/* Gives ampersands a typographic makeover */
.amp         { font-family: "Hoefler Text", Garamond, Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-weight: normal;font-style: italic; }
              
blockquote   { margin: 1.5em; color: #666; font-style: italic; text-indent: .8em; }
strong       { font-weight: bold; }
em,dfn       { font-style: italic; }
dfn          { font-weight: bold; }
sup, sub     { line-height: 0; }

abbr         { 
	cursor:help; 
	border-bottom: 1px dotted #79804D; 
	letter-spacing:0.18em; 
	font-variant: small-caps; 
	position: relative; 
	top: -1px; 
	margin: 0 .18em;
	}
address      { margin: 0 0 1.5em; font-style: italic; }
del          { color:#666; }

pre          { margin: 1.5em 0; white-space: pre; }
pre,code,tt  { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

	
/*	Lists
------------------------------ */

/* top-level lists */
ul, ol   { margin-bottom: 1.8em; color: #616161; font-size: 1.3em; line-height: 1.4;}

/* nested lists */
li ul, 
li ol    { margin-left: 1.8em; }
  
ul       { list-style-type: disc; }
ol       { list-style-type: decimal; }

dl       { margin: 0 0 1.5em 0; }
	dt   { font-weight: bold; }
	dd   { margin-left: 1.5em;}   
   

/*	Tables
------------------------------ */  

table         { margin-bottom: 1.8em;}
th            { background: #c3d9ff; font-weight: bold; }
th,td,caption { padding: 4px 10px 4px 5px; }
.even td      { background: #e5ecf9; }
tfoot         { font-style: italic; }
caption       { background: #eee; }




/* ------------------------------------------------------------ 
	
= Navigation
------------------------------------------------------------ */


/* Use for horizontal navs/lists */
.horizontal { list-style: none; margin: 0;}
  .horizontal li { float: left; display: inline; } 
		.horizontal a { display: block; text-decoration: none; }
		

/*	Featured Work Nav
------------------------------ */

#content-featured .horizontal { height: 36px; margin: 0 0 1.8em .6em; text-indent: -9999px; color: #606060; }

	#content-featured .horizontal a { 
		margin:0 .9em 0 0;  
		height: 1.8em;
		width: 2.1em;
		background: #F1F2F3; 
		border: 1px solid #C8CBD0;
		border-radius: 4px; 
		-moz-border-radius: 4px; 
		-webkit-border-radius: 4px;
		box-shadow: -1px 1px 3px rgba(0,0,0,0.3);
		-moz-box-shadow: -1px 1px 3px rgba(0,0,0,0.3);
		-webkit-box-shadow: -1px 1px 3px rgba(0,0,0,0.3); 
		background: -moz-linear-gradient(top, #F1F2F3 60%, #C8CCD0 );
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#F1F2F3), color-stop(60%, #F1F2F3), to(#C8CCD0));     
		}
		#content-featured .horizontal a.last {border: none;}
		#content-featured .horizontal a.active { 
			color: #fff; 
			background: #5979A4; 
			background: -moz-linear-gradient(top, #5979A4 5%, #90ADD5 );
			background: -webkit-gradient(linear, 0 0, 0 100%, from(#5979A4), to(#90ADD5));
			border-radius: 4px; 
			-moz-border-radius: 4px; 
			-webkit-border-radius: 4px; 
			box-shadow: -2px 2px 6px #bbb;
			-moz-box-shadow: 0px 0px 0px #bbb;
			-webkit-box-shadow: 0px 0px 0px #bbb;   
			margin: 1px 1em 0 -2px;  
			border-top: 1px solid #4D6280;
			border-right: 1px solid #4D6280; 
			}
			#content-featured .horizontal a:hover,
			#content-featured .horizontal a:focus { 
				text-decoration:none; color: #000; 
				background: -moz-linear-gradient(top, #F1F2F3 50%, #DDDFE2 );
				background: -webkit-gradient(linear, 0 0, 0 100%, from(#F1F2F3), color-stop(50%, #F1F2F3), to(#DDDFE2));    
				}
				#content-featured .horizontal a.active:hover,
				#content-featured .horizontal a.active:focus { 
					background: -moz-linear-gradient(top, #5979A4 5%, #90ADD5 );
					background: -webkit-gradient(linear, 0 0, 0 100%, from(#5979A4), to(#90ADD5)); 
					}  




/* --------------------------------------------------------------

= 	Layout - Grid: 6 colums with 18px gutters
-------------------------------------------------------------- */


#container { margin:0 auto; position: relative; width: 960px; }


.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6 { 
	float: left; 
	display: inline; 
	position: relative; 
	margin-left:18px;
	}
	
.col-1  { width: 139px; } 
.col-2  { width: 296px; }  
.col-3	{ width: 453px; }  
.col-4	{ width: 610px; }
.col-5	{ width: 767px; }
.col-6 	{ width: 924px;}

.push-1  { margin-left: 157px; }
.push-2  { margin-left: 314px; }
.push-3  { margin-left: 471px; }
.push-4  { margin-left: 628px; }
.push-5  { margin-left: 785px; }


#header	{
	position:relative;
	background:  url(../../i/hdr.png);
	height: 126px;     
	border-bottom: 2px solid #fff;   
	top: 0;                                         
	}
	#header .col-6	{
		width: 942px;
		margin: 0 auto;
		float: none;
		display: block;  
		padding-left: 18px;
		}
			
		#logo { margin-top: 3.6em; }
		
		.tagline	{   
			font-family: GentiumBookBasicRegular, serif;        
			clear: left;
			color:#9BAEC8;
			float: left;       
			margin-top: -14px;
			margin-left: 157px;
			padding-bottom: 18px;    
			font-size: 1.4em;           
			text-shadow: 1px 1px 2px #666;
			}
		   
		#flora {
			background: url(../../i/flora.png) no-repeat;
			height: 204px;
			position: absolute;
			width: 305px;
			z-index: 2;
			}	
		
		#twitter {
			background: url(../../i/icon.twitter.standing.png) 90px 82px no-repeat;
			height: 140px;
			position: absolute;
			width: 296px;
			z-index: 1; 
			color:#bbb; 
			
			}
			#twitter p {
				font-style:italic;
				position: relative;
				width: 137px;
				margin-left: 157px;
				font-size: 1.1em;  
				line-height: 1.55;
				top: .9em;  
				text-shadow: 1px 1px 1px #414141;     
				}
				#twitter a {color: #bbb; margin: 1px; 0 1px;} 
					#twitter a:active,
					#tweet p a:active  {top: 1px;} 
			
			#twitter #follow {
				background:  #90ADD5;
				background: -moz-linear-gradient(top, #90ADD5, #5979A4 );
				background: -webkit-gradient(linear, 0 0, 0 100%, from(#90ADD5), to(#5979A4));  
				border-top-left-radius: 0 !important;
				border-top-right-radius: 0 !important;
				-moz-border-radius-topleft: 0 !important; 
				-webkit-border-top-left-radius: 0 !important;
				-moz-border-radius-topright: 0 !important; 
				-webkit-border-top-right-radius: 0 !important;
				position: absolute; 
				top: 124px; 
				left: 157px; 
				padding: 1em 0 .6em;        
				font-size: 1em;
				color: #efefef; 
				text-align: center; 
				font-weight: 700;  
				width: 137px;
				text-decoration: none;
				
				} 
				#twitter #follow:hover,
				#twitter #follow:focus {
					background:  #B5C8E3;
					background: -moz-linear-gradient(top, #B5C8E3, #5979A4 );
					background: -webkit-gradient(linear, 0 0, 0 100%, from(#B5C8E3), to(#5979A4));
					}
					#twitter #follow:active {top: 125px}   
                                       
#content {   
	margin-top:1.8em; 
	position:relative;        
	}    
	
	#content-featured {  
		height: 442px;    
		position: relative;
		left: -18px;
		padding-left: 18px; 
		overflow: hidden;           
		}      
    
#footer	{               
	clear:both;     
	height: 5.4em;
	position: relative;
	margin-top: 1.8em;
	padding-top: 1.8em;           
	border-top: 1px solid #ddd; 
	}                         

	#copyright {
		display: inline;  
		float: right;
		margin-right: 18px;  
		font-size: 1.1em;                   
		}   

	#social-media a	{  
		margin: 0 .4em .8em 18px;
		padding: 2px 4px; 
		font-weight: 700;      
		color: #717171;  
		font-size: .95em;
		position: relative;  
		}
		#social-media a:hover,
		#social-media a:focus { color: #414141; text-decoration: none; } 
		#social-media a:active { top: 1px;}       
                                                               
					
					
					
/*--------------------------------------------------------------
	
= Page-Specific Styles
-------------------------------------------------------------- */					


/*	Home page
------------------------------ */					
														
#bio  {              	
	top:5.4em;   
	position: relative;     
	float: left;
	display: inline;     
	padding-top: 4px;      
	}
	#me { /* my pic */
		float: left;
		display: inline;             
		padding: 6px;     
		margin-top: 5px;      
		background: #000;
		-webkit-border-radius: 6px;
		-webkit-box-shadow: 0px 0px 2px #000;
		-moz-border-radius: 6px;
		box-shadow: -3px 3px 12px #999;
		-moz-box-shadow: -3px 3px 12px #999;
		-webkit-box-shadow: -3px 3px 12px #999;  
	
		}
		/* turns off default img:hover style */
		#me:hover {	border: none; } 
			
	#intro {    
		font-style:italic;                               
		color: #6B532E;
		font-size:2.1em;
		line-height: 1.4; 
		font-style: normal;
		} 
		#bio strong {font-style: italic;} 

		@media screen and (-webkit-min-device-pixel-ratio:0){
		/* Targets Webkit based browsers: Safari, Chrome */
		#intro {  line-height: 1.45; }
		}

		#bio h3 {
			text-transform:lowercase; 
			height: 36px;    
			line-height: 1.8;
			padding-left:36px; 
			margin: 0 0 .5em 0px;
			}                                 
			#bio h3.method {
				background: url(../../i/icon.blueprint.png) no-repeat;
				}
			#bio h3 {
				background: url(../../i/icon.service.png) no-repeat;
			    }
			#bio h3.contact {
				background: url(../../i/icon.iphone.png) -1px 0 no-repeat;
				padding-left:26px; 
				}  
	
	/* -- Projects -- */
	.project {
		position: relative;           	
		height: 442px;        
		border-radius: 4px;
		-moz-border-radius: 4px;   
		-webkit-border-radius: 4px; 
		}   
		
 		.project h3 { margin-bottom: 1.3em;}
		
		.project h4 {    
			clear:both;
			font-size: 1.4em;
			line-height:1.8; 
			font-weight:normal; 
			text-transform: uppercase;      
			}   

		.project p {margin-top: .6em;}     
		
		.project img { 
			background: #000;
			padding: 6px;
			width: 276px;	
			border: .1em solid #000;
			-webkit-border-radius: 6px;
			-webkit-box-shadow: 0px 0px 2px #000;
			-moz-border-radius: 6px;
			box-shadow: -3px 3px 12px #999;
			-moz-box-shadow: -3px 3px 12px #999;
			-webkit-box-shadow: -3px 3px 12px #999;
			}
			.project img:hover,
			.project img:focus { border: .1em solid #fff; }        


                                       

/* -------------------------------------------------------------- 
    
= forms.css   	
-------------------------------------------------------------- */
   
form        { }
form ol     { list-style:none; margin: 0; }
form ol li  { margin-bottom:2em; } 
@media screen and (-webkit-min-device-pixel-ratio:0){
/* Targets Webkit based browsers: Safari, Chrome */
form ol li  { margin-bottom:2.2em; }
}
    
fieldset    {}
legend      {}
label	{               
	font-size: .95em;  
	line-height: 18px;
	display: block;  
	color:#868A75; 
	margin-bottom: .1em;                                        
	}  
	                           

form p { margin:0;padding:0;}   

#contact {     
	top: 6.6em;
 	}                                                
	#contact .message	{
		position: absolute; 
		top: 326px;
		left: 157px;
		line-height:1.8em; 
		font-size:1.1em;
		color: #A32F27;	  
		width: 183px;
		margin-bottom: 1.8em;
		}


 /* Form fields                                  
------------------------------ */
   
input, 
textarea {
	*margin-left: -18px;
	/* creats rounded borders for modern browseres */
	-moz-border-radius:4px; 
	-webkit-border-radius:4px;
	}

input.text	{
    padding: .2em;
	color: #444;
	width: 290px;     
	height: 1.8em;
	background:#F1F2F3;
	border: 1px solid #C8CBD0; 
	}

	input.text:focus,
	textarea:focus {
		background: #f4f4f4;  
		border: 1px solid #B1B6A9; 
		box-shadow:  0px 0px 6px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
		-webkit-box-shadow:  0px 0px 6px rgba(0,0,0,0.3);    
		}  
	
textarea {
	padding: 0.3em;
	color: #444;
	width: 286px;
	font-size: .95em;
	line-height: 1.5; 
	background:#F1F2F3;
	height: 10.1em;    
	 border: 1px solid #C8CBD0; 
	}
	

/* Buttons                                  
------------------------------ */


button { border: none;  }
 
.button, 
button.button {
	display:block;    
	background: #90A14B;   
	background: -moz-linear-gradient(top, #B8CC66, #90A14B); 
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#B8CC66), to(#90A14B));
	color: #eee;
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	border-radius: 5px;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
	width: 137px;
	} 
	.project p a.button {    
		font-weight: normal;  
		padding: 7px 10px 4px;      
		text-align: center; 
		width: 117px;  
		font-size: 12px; 
		}
	   
.button:hover,
.button:focus	{	
	background: #B8CC66; 
	background: -moz-linear-gradient(top, #C7D590, #90A14B); 
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#C7D590), to(#90A14B));
	color: #fff;                         
	}  
	
.button:active, 
button.button:active {	
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
	cursor: wait;  
	top: 1px;
	}                        




/* ------------------------------------------------------------

= Success, notice and error boxes
------------------------------------------------------------ */

.error,
.notice, 
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; } 

.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }

.survey .error,    
.survey .notice,     
.survey .success    { width: 600px; } 


/* = Page-Specific Form Styles
-------------------------------------------------------------- */

.survey label {  
	clear: both;
	display: block;  
	position: relative;
	}
	#survey input {margin:0;}
	#survey label span { margin-left: 10px; color: #919191;}
	#survey #contact label span.required {color: red;} 

.survey #contact ol li   	{ float: left; display: inline; }
.survey #contact ol li label span {display: inline;}

.survey ol label span {display: block; margin: 0; color: #aaa; }
.survey textarea {width: 600px;}
.survey .button {float: left; width: 137px; margin:0;} 

.home form {margin-bottom: 7.2em;}


/* ------------------------------------------------------------

=	Misc classes
------------------------------------------------------------ */ 

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }




/* ------------------------------------------------------------

= Troubleshooting styles                          
------------------------------------------------------------ */
//body  { background: url(../../i/grid/bg-grid.gif) 3px 0;}
//body  { background: url(../../i/grid/grid.6.18.1.8.jpg) -92px 0;}
body  { background: url(../../i/bg.body.jpg);} 




/* ------------------------------------------------------------  

= FOUC(Flash Of Unstyled Content) Fix 
------------------------------------------------------------ */
body { display: block !important; }