/*

Theme Name: John Ferrie | Online Portfolio
Theme URI: http://www.johnferrie.net/wordpress
Description: John Ferrie's wordpress portfolio template
Author: John Ferrie
Version: 1.0

*/

/*	-------------------------------------------------------------
	CSS - John Ferrie | Online Portfolio
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	Filename:	jf_main.css
	Date:			January 29, 2009
	Author:		John Ferrie - http://www.johnferrie.net
	
	
	-------------------------------------------------------------
	TABLE OF CONTENTS
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	
	BODY
	+ Container: 					#container
		+ Header: 					.header
		+ Middle Container	.middleContainer
		    - Main Content: .mainContent
			  - Entry         .entry
		    - Side Bar			.sideBar
		      - About       .about
			  - Contact       .contact
		+ Footer: 					.footer
		
	Site Colors: 
		
		#9d670f - Orange
		#042c50 - Dark Blue
		#0f5a9d - Blue 
		#f0f0f0 - Dark Grey
		#262626 - Grey
	-------------------------------------------------------------	*/





/*	--------------------------------------------------------------------------------------------------------------------------
	container/body/global Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	
	* {
		border:0;
		margin:0px;
		padding:0px;
	}
	.altText {
		height:0;
		display:block;
		overflow:hidden;
	}
	.clearfix:after {
		content:".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height:0;
		height: 0;
	}
	.clearfix {
		display:inline-block;
	}	
	html[xmlns] .clearfix {
		display:block;
	}
	* html .clearfix {
		height:1%;
	}
	#container { 
		margin:0 auto;
		width:760px;
	}





/*	--------------------------------------------------------------------------------------------------------------------------
	STANDARD HTML TAG DEFINITION
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	
	body {
		background:url(images/bg.gif) top repeat-x;
		font:normal 10px Verdana, Arial, Helvetica, sans-serif;
		color:#262626;
	}
	.hr {
		margin:0 0 20px 0;
		width:100%; height:1px;
		background:#f0f0f0;
	}
		.hr hr {
			display:none;
		}




/*	--------------------------------------------------------------------------------------------------------------------------
	header Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

	#header {
		margin:60px 0 50px 0;
		height:168px;
		background:url(images/stripes.gif) top left no-repeat;
		border-bottom:1px solid #f0f0f0;
		border-top:1px solid #f0f0f0;
		position:relative;
	}
		#header h1 {
			margin:130px 0 0 0;
			width:236px; height:36px;
			background:url(images/johnferrie.jpg) top no-repeat;
		}
		#header h2 {
			width:600px;
			position:absolute;
			left:150px; top: 66px;
			font:normal 18px Cambria, serif;
			color:#c3c2c2;
			line-height: 1.4em;
			text-align:right;
		}
		#header strong {
			color:#9d670f;
			font-weight:normal;
		}




	
/*	--------------------------------------------------------------------------------------------------------------------------
	middleContainer Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	
	/* mainContent */
	.middleContainer .mainContent {
		margin:0 0 0 0;
		width:540px;
		float:left;
		display:inline;
	}
	.middleContainer .mainContent h3 {
		margin:0 0 0 0;
		width:64px; height:18px;
		background:url(images/h3_portfolio.jpg) top left no-repeat;
	}
	.middleContainer .mainContent .hr {
		width:520px;
	}
	
		
		.middleContainer .mainContent .entry {
			margin:0 20px 30px 0;
			width:250px;
			float:left;
			display:inline;
			background:white;
		}
		.middleContainer .mainContent .entry h5 {
			margin:0 0 5px 0;
			font:bold 12px Verdana, Arial, Helvetica, sans-serif;
			color:#9d670f;
		}
		.middleContainer .mainContent .entry img {
			border:5px solid #f0f0f0;
		}
		.middleContainer .mainContent .entry p {
			margin:10px 0 0 0;
			line-height:15px;
		}
		.middleContainer .mainContent .entry a {
			margin:10px 0 0 0;
			width:117px; height:25px;
			background:url(images/btn_visitSite.jpg) 0 top no-repeat;
			display:block;
		}
			.middleContainer .mainContent .entry a:hover {
				background-position:bottom;
			}
			
/*	--------------------------------------------------------------------------------------------------------------------------
	sideBar Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	
	.middleContainer .sideBar {
		width:220px;
		float:left;
		display:inline;
	}
	
		/* about */
		.middleContainer .sideBar .about {
			margin:0 0 20px 0;
		}
			.middleContainer .sideBar .about h3 {
				width:87px; height:18px;
				background:url(images/h3_about.jpg) top left no-repeat;
			}
			.middleContainer .sideBar .about p {
				margin:0 0 10px 0;
				line-height:15px;
			}
		
		/* contact */
		.middleContainer .sideBar .contact h3 {
			width:102px; height:18px;
			background:url(images/h3_contact.jpg) top left no-repeat;
		}
		.middleContainer .sideBar .contact .errorList {
			margin:0 0 10px 0;
		}
			.middleContainer .sideBar .contact .errorList ul {
				padding:0 0 0 10px;
				list-style:none;
				color:red;
			}
			.middleContainer .sideBar .contact .form label {
				font-weight:bold;
			}
			.middleContainer .sideBar .contact .form input {
				margin:0 0 10px 0; padding:6px 0 0 3px;
				width:212px; height:17px;
				background:#f0f0f0;
				border:1px solid #262626;
				font:normal 10px Verdana, Arial, Helvetica, sans-serif;
			}
				.middleContainer .sideBar .contact .form input:focus {
					background:#e5e5e5;
				}
			.middleContainer .sideBar .contact .form textarea {
				width:212px; height:80px;
				padding:3px 0 0 3px;
				background:#f0f0f0;
				border:1px solid #262626;
				font:normal 10px Verdana, Arial, Helvetica, sans-serif;
			}
				.middleContainer .sideBar .contact .form textarea:focus {
					background:#e5e5e5;
				}
			.middleContainer .sideBar .contact .contactBtns input {
				margin:10px 0 0 0;
				float:right;
			}
		
		



/*	--------------------------------------------------------------------------------------------------------------------------
	footer Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

	.footer { 
		margin:0 0 30px 0;
		border-top:1px solid #f0f0f0;
	}
		/* leftCol */
		
		.footer .leftCol {
			padding:30px 20px 0 20px;
			width:480px;
			float:left;
			display:inline;
		}
			.footer .leftCol h4 {
				margin:0 0 14px 0;
				width:105px; height:15px;
				background:url(images/h4_webStandards.jpg) top left no-repeat;
			}
			.footer .leftCol p {
				margin:0 0 10px 10px;
				line-height:13px
			}
				.footer .leftCol .copyright {
					text-align:center;
					color:#c3c2c2;
				}
					.footer .leftCol .copyright p {
						margin:0;
						font-size:10px;
						text-transform:uppercase;
					}
					.footer .leftCol .copyright a:link, .footer .leftCol .copyright a:visited, .footer .leftCol .copyright a:active {
						color:#042c50;
						text-decoration:none;
					}
						.footer .leftCol .copyright a:hover {
							text-decoration:underline;
						}
		/* rightCol */
		
		.footer .rightCol {
			padding:10px 0 10px 20px; margin:20px 0 0 0;
			width:179px;
			float:left;
			display:inline;
			border-left:1px solid #f0f0f0;
		}
			.footer .rightCol h4 {
				margin:0 0 14px 0;
				width:94px; height:18px;
				background:url(images/h4_dailyReading.jpg) top left no-repeat;
			}
			.footer .rightCol ul {
				margin:0 0 0 8px;
			}
				.footer .rightCol li {
					display:block; 
					list-style-type:none; 
					padding:0; 
					padding-top:6px;
				}
			.footer .rightCol a:link, .footer .rightCol a:visited, .footer .rightCol a:active {
				padding:2px;
				text-decoration:none; 
				color:#262626;
			}
				.footer .rightCol a:hover {
					text-decoration:none; 
					background:#9d670f; 
					color:#FFF;
				}

/*	--------------------------------------------------------------------------------------------------------------------------
	resume Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	
	.resume {
		width:154px; height:66px;
		position:absolute;
		top:30px; left:0;
	}
	.resume a.btnResume:link, .resume a.btnResume:visited, .resume a.btnResume:active {
		width:154px; height:66px;
		display:block;
		background:url(images/btn_resume.png) 0 top no-repeat;
	}
		.resume a.btnResume:hover {
			background-position:bottom;
		}

/*	--------------------------------------------------------------------------------------------------------------------------
	twitter Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	
	.twitter {
		width:120px; height:74px;
		position:absolute;
		top:30px; right:10px;
	}
	.twitter a.btnTwitter:link, .twitter a.btnTwitter:visited, .twitter a.btnTwitter:active {
		width:120px; height:74px;
		float:right;
		background:url(images/followMe.png) 0 top no-repeat;
	}
		.twitter a.btnTwitter:hover {
			background-position:bottom;
		}