/* CSS author: Erik Wallace for ErikWallace.com */ 
/* June 4, 2009 */ 

html {
	background-color: #555;
	overflow-y: scroll;
	}

body { 
	margin: 0 auto;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: small;
	background-color: #555;
	}

p {
	margin-bottom: 13px;
	font-size: 120%;
	line-height: 21px;
	color: #555;
	}

ul {
	font-size: 110%;
	line-height: 24px;
	color: #555;
	}

ol {
	margin: 0 30px;
	color: #555;
	list-style-type: decimal;
	font-size: 120%;
	line-height: 18px;
	font-style: italic;
	}
	
	ol li {
		margin-bottom: 13px;
		}

h1 {
	margin-bottom: 5px;
	font-size: 180%;
	line-height: 28px;
	color: #2d211e;
	font-weight: normal;
	}

h2 {
	margin-bottom: 5px;
	font-size: 140%;
	line-height: 24px;
	color: #15848c;
	font-weight: normal;
	font-style: italic;
	}

#home h2 {
	margin-bottom: 5px;
	font-size: 140%;
	line-height: 24px;
	color: #15848c;
	font-weight: normal;
	}

h3 {
	font-size: 150%;
	line-height: 24px;
	color: #fff;
	font-weight: normal;
	}

#container {
	margin: 20px auto;
	width: 960px;
	background-color: #fff;
	border: 3px solid #444;
	}
a {
	color: #d3400a;
	text-decoration: none;
	}
img a {
	border: 0px;
	}		
a:hover, .selected {
	color: #2d211e;
	border-bottom: 1px solid #2d211e;
	}	
img a:hover {
	border: 0px;
	}
#header {
	margin: 0;
	width: 960px;
	background: url(/_media/backgroundHeader.gif) repeat-x top left;
	background-color: #fff;
	min-height: 135px;
	height:auto !important; /* FIX for IE */
	height:135px; /* FIX for IE */
	}
	
	#header #branding {
		float: left;	
		}
		#header #branding a:hover {
			float: left;
			border: 0px;	
			}		
		#branding img {
			margin: 75px 0 0 30px;
			}
		#nav ul {
			float: right;
			margin: 80px 40px 0 0;
			font-size: 125%;
			}			
			#nav li {
				margin-right: 20px;
				list-style-type: none;
				display: inline;
				}			
			#nav li:last-child {
				margin-right: 0;
				}

#featured {
	margin-left: 10px;
	width: 960px;
	height: 223px;
	background: url(/_media/backgroundFeaturedProject.gif) no-repeat top left;
	}	
	#featured #projectImage {
		float: left;
		margin: 18px 0 0 17px;
		width: 612px;
		}
		#featured #projectImage a:hover {
			border: 0px;
			}	
	#featured #details {
		float: right;
		margin: 35px 35px 0 0;
		width: 270px;
		}	
	#featured #details a {
		color: #fff;
		font-weight: bold;
		}
	#featured #details a:hover {
		border-bottom: 1px solid #fff;
		}	
	#featured #details p {
		color: #333;
		}

#home, #portfolio, #blog, #capabilities, #about, #contact {
	margin-top: 13px;
	width: 960px;
	}	
	#home #welcome {
		float: left;
		margin: 10px 0 20px 40px;
		width: 600px;
		}		
		#home #welcome p {
			margin-right: 20px;
			}		
	#home #news {
		float: right;
		margin: 10px 25px 20px 0;
		width: 280px;
		}		
		#home #news li {
			font-size: 100%;
			line-height: 18px;
			padding: 10px 0;
			border-bottom: 1px solid #acacac;
			}
		#home #news p {
			margin-top: 8px;
			font-weight: bold;
			}
	#portfolio #folioIndex {
		margin-left: 30px;	
		}
		/* portfolio styles */
		#portfolio #folioIndex .folioThumbs {
			width: 300px;
			float: left;
			/*border:1px solid black;*/
			}
			#portfolio #folioIndex .folioThumbs a {
				display: block;
				border: 0;
				}
			#portfolio #folioIndex .folioThumbs a:hover {
				display: block;
				border: 0;
				}
		#portfolio #folioIndex ul img {
			float: left;
			margin: 0 11px 25px 0;	
			padding: 4px;
			border: 1px solid #ccc;
			background-color: #fff;
			}
			#portfolio #folioIndex ul a:hover img {
				background-color: #ccc;
				}
		#portfolio #folioIndex .folioThumbs li {
			clear: both;
			}
		#portfolio #folioIndex .folioThumbs .projectName {
			margin-bottom: 3px;
			font-family: Helvetica, Verdana, Arial, sans-serif;
			font-size: 115%;
			line-height: 18px;
			color: #888;
			font-weight: bold;
			position: relative; top: 10px;
			}
			#portfolio #folioIndex .folioThumbs a .projectName {
				color: #666;
				}
			#portfolio #folioIndex .folioThumbs a:hover .projectName {
				color: #2d211e;
				}
		#portfolio #folioIndex .folioThumbs .projectDesc {
			margin-right: 40px;
			font-size: 110%;
			font-style: italic;
			line-height: 18px;
			color: #666;
			position: relative; top: 10px;
			}
			#portfolio #folioIndex .folioThumbs a .projectDesc {
				color: #d3400a;
				}
			#portfolio #folioIndex .folioThumbs a:hover .projectDesc {
				color: #2d211e;
				}
		#portfolio h1 {
			float: left;
			}
		#portfolio #folioNavigation {
			float: right;
			font-size: 125%;
			margin: 8px 40px 0 0;
			clear: 
			}
			#portfolio #folioNavigation .divider {
				margin: 0 20px;
				}
		#portfolio #projectBrief {
			float: left;
			width: 355px;
			margin: 0 0 30px 30px;
			}		
		#portfolio #slider {
			float: right;
			margin: 0 40px 70px 0;
			width: 500px;
			height: 329px;			
			border: 1px solid #ccc;
			}
			#slider ul, #slider li {				
				width: 500px;
				height: 329px;
				margin: 0;
				padding: 0;
				list-style: none;
				}
			#slider li { 
				overflow: hidden;
				}		
			 /* slider nav buttons */
			 #prevBtn, #nextBtn{ 
				float: right;
				}
			#nextBtn{ 
				float: right;
				position: relative;
				padding-left: 5px;
				top: 335px;
				left: 267px;
				}
			#prevBtn{ 
				float: left;
				position: relative;
				top: 335px;
				left: 267px;
				}	
			 #nextBtn a {
			    background: url(/_media/btnFolioNav.gif) -15px 0px no-repeat;
				width: 14px; height: 25px; display: block;
			    }
			 #nextBtn a:hover {
			    background: url(/_media/btnFolioNav.gif) -15px -26px no-repeat;
				width: 14px; height: 25px; display: block;
				border: 0px;
			    }
			 #prevBtn a {
			    background: url(/_media/btnFolioNav.gif) 0px 0px no-repeat;
				width: 14px; height: 25px; display: block;
			    }
			 #prevBtn a:hover {
			    background: url(/_media/btnFolioNav.gif) 0px -26px no-repeat;
				width: 14px; height: 25px; display: block;
				border: 0px;
			    }
/* basic interior pages */
#mainContent {
	margin: 0 30px 50px 30px;
	float: left;
	width: 600px;	
	}
	#about h1, #skills h1, #contact h1, #portfolio h1, #sitemap h1, #error h1 {
		margin: 0 0 5px 30px;
		}
	#mainContent ul {
		margin: 0 30px;
		list-style-type: disc;
		font-size: 120%;
		line-height: 21px;
		}
	/*#mainContent ol {
		margin: 0 30px;
		color: #555;
		list-style-type: decimal;
		font-size: 120%;
		line-height: 14px;
		font-style: italic;
		}
	#mainContent li {
		margin-bottom: 12px;
		}*/
#secondaryContent {
	float: right;
	width: 275px;
	margin: 0 25px 30px 0;
	}
	.caption {
		font-size: 85%;
		line-height: 16px;
		color: #888;
		font-style: italic;
		margin-bottom: 15px;
		}
	#secondaryContent .rule250 {
		background: url(/_media/rule250.gif);
		width: 250px;
		height: 1px;
		margin: 20px 0 20px -25px;
		}
#secondaryContent .portrait {
	margin-bottom: 5px;
	padding: 4px;
	border: 1px solid #ccc;
	background-color: #fff;
	}
#secondaryContent ul {
	margin-left: 15px;
	}
		
		
.rule960 {
	background: url(/_media/rule960.gif);
	width: 960px;
	height: 1px;
	margin-bottom: 15px;
	}
#footer {
	margin: 0;
	width: 960px;
	min-height: 125px;
	height:auto !important; /* FIX for IE */
	height:125px; /* FIX for IE */
	background: url(/_media/backgroundFooter.gif) repeat-x bottom left;
	color: #888;
	font-size: 85%;
	line-height: 20px;
	}	
	#footer #copyright {
		float: left;
		width: 560px;
		margin: 0 0 0 40px;
		}	
	#footer #copyright p {	
		margin: 0;
		}		
			#footer #copyright li {
				list-style-type: none;
				display: inline;
				}			
			#footer #copyright li:last-child {
				margin-right: 0;
				}
				#footer #copyright .pipes {
					margin: 0 8px;
					}	
	#footer #social {
		float: right;
		margin: 0;
		width: 300px;
		}			
			#footer #social li {
				list-style-type: none;
				margin-right: 18px;
				float: left; /* makes CSS sprites display inline */
				}			
			#footer #social li:last-child {
				margin-right: 0;
				}
						
			/* CSS sprites */
			 #social #linkedIn a {
			    background: url(/_media/logosSocial.gif) -1px -1px no-repeat;
				width: 87px; height: 23px; display: block;
			    }
			 #social #linkedIn a:hover {
				background: transparent url(/_media/logosSocial.gif) -1px -27px no-repeat;
				width: 87px; height: 23px; display: block; border: 0px;
				}
			 #social #twitter a {
			    background: url(/_media/logosSocial.gif) -91px -1px no-repeat;
				width: 84px; height: 23px; display: block;
			    }
			 #social #twitter a:hover {
				background: transparent url(/_media/logosSocial.gif) -91px -27px no-repeat;
				width: 84px; height: 23px; display: block; border: 0px;
				}
			 #social #flickr a {
			    background: url(/_media/logosSocial.gif) -178px -1px no-repeat;
				width: 71px; height: 23px; display: block;
			    }
			 #social #flickr a:hover {
				background: transparent url(/_media/logosSocial.gif) -178px -27px no-repeat;
				width: 71px; height: 23px; display: block; border: 0px;
				}
			  				
		
/* misc. styles */
.cleaner {
	clear: both;
	height: 0;
	}

/* for portfolio detail pages */
noscript {
	margin-bottom: 13px;
	font-size: 120%;
	line-height: 21px;
	color: #f00;
	font-style: italic;
	}

/* used on about page right rail */
#twoColumn {
	width: 275px;
	}
#twoColumn #leftCol {
	float: left;
	width: 16px;
	margin: 6px 0;
	}
#twoColumn #rightCol {
	float: right;
	width: 220px;
	margin: 4px 30px 10px 0;
	}

/* used for the contact form */
.required {
	color: #066;
	font-weight: bold;
	}
.row {
	clear: both;
	margin-bottom: 10px;
	width: 100%;
	}
	.row label {
		width: 85px;
		margin-bottom: 16px;
		display: block;
		text-align: right;
		float: left;
		font-size: 120%;
		line-height: 18px;
		color: #555;
		}
	.row .textField {
		width: 245px;
		display: block;
		float: right;
		margin-right: 235px;
		}
	.row select {
		width: 252px;
		display: block;
		float: right;
		margin-right: 234px;
		}
	.row .textBox {
		width: 245px;
		margin-bottom: 16px; /* for anti-spam */
		height: 100px;
		display: block;
		float: right;
		margin-right: 238px;
		}
	.row .btn {
		margin: 0 0 30px 30px;
		}
/* address styles for contact */
.adr {
	}
.adrLine {
	margin-bottom: 4px;
	font-size: 120%;
	line-height: 18px;
	color: #555;
	}
.address {
	margin-bottom: 30px;
	}
.adrLast {
	margin-bottom: 16px;
	}
/* adds space on the skills page in the secondaryColumn */
.last {
	margin-bottom: 10px;
	}
hr {
	width: 275px;
	color: #ccc;
	background-color: #ccc;
	height: 1px;
	}