@import "http://www.josephfarran.com/css/reset.css";

/* Clear Fix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/* Custom Font */
@font-face {font-family: franklin; src: url('http://www.josephfarran.com/css/franklin.ttf');}

/* Default HTML 5 Fix */
header, nav, section, article, figure, aside, footer {display: block;}

/* Created by Joseph Farran, inspired by David Perkins */

/* Main */
body {margin: 0; height:100%; font-family: franklin, helvetica, arial, sans-serif; background: url("http://www.josephfarran.com/images/stripe.gif");}
.header_wrapper {position:relative; height:120px; min-width:800px; margin: 0; background: url("http://www.josephfarran.com/images/header.gif");}
.align_right {float: right; margin: 0px 0px 0px 5px; }
.align_left {float: left; margin: 0px 5px 0px 0px; }

#container {width: 800px;clear:both;position: relative;margin:0 auto;}
#wrapper {position: relative; clear:both; margin:0 auto; width: 800px; height: 275px;}
	#wrapper h1 {margin: 20px 0px 20px 0px; padding: 0px; float: left; width: 800px; height: 116px; 
	background: url("../images/phrase.png") no-repeat 0px 0px; text-indent: -9999px;}
	#wrapper h4 {margin: 20px 0px 20px 46px; padding: 0px; float: left; width: 800px; height: 310px; 
	background: url("http://www.josephfarran.com/images/big404.png") no-repeat 0px 0px; text-indent: -9999px;}
#footer_wrapper {position: relative; clear:both; margin: 0 auto; min-width: 800px; height: 285px; background-color: #000000;}
#subfooter_wrapper {position: relative; clear:both; margin: 0 auto; min-width: 800px; height: 40px; background-color: #000000;}

/* Text Styling */
p {color: #000000; line-height: 16px; font-size: 14px; margin: 0px 0px 5px 0px;}
a {color:#6db33f; text-decoration: none;}
a.color:link, a.color:active, a.color:visited, .color {color: #6db33f;}
a.color:hover {color: #000000;}
strong { font-weight:bold; }
br.clear { clear: both; }

/* Header */
header {float:left; position:absolute; height:120px; width:800px; top:-120px; padding-bottom:-120px;}
	header h1 {margin: 20px 0px 0px 0px; padding: 0px; float: left; width: 174px; height: 59px; background: url("http://www.josephfarran.com/images/logo.png") no-repeat 0px 0px; 
	text-indent: -9999px;}

/* Navigation */
nav {margin: 55px 0px 0px 0px; padding: 0px; float: right; width: 600px; height: 35px;}
	nav ul {padding: 0px; margin: 0px; float: right;}
		nav ul li {margin: 0px; padding: 10px 0px 10px 0px; list-style-type: none; display: inline;}
			nav ul li a {margin: 0px 0px 0px 40px; text-align: left; font-size: 25px; font-weight: normal; text-decoration: none; list-style-type: none; 
			display: inline; padding: 0px; float: left; color: #fff;}
				nav ul li a:hover {color: #6db33f;}

/* Slideshow */
.slideshow {display: inline; width: 800px; height: 275px; overflow: hidden; margin: 0px 0px 20px 0px; padding: 0px; float: right; position: relative;}
	.slideshow IMG {position:absolute; top:0; left:0; z-index:8;}
	.slideshow IMG.active {z-index:10;}
	.slideshow IMG.last-active {z-index:9;}

/* Blog Post */
#post {min-height: 160px; padding: 0px; margin: 20px 0 0px 0px; width: 800px; height: 180px;}
	.blogpost {padding: 0px 5px 5px 0px; margin: 0px 20px 0px 0px; min-height: 160px; width: 240px; float: left;}
		.blogpost h3 {font-family: franklin, helvetica, arial, sans-serif; font-size: 20px; font-weight: normal; 
		margin: 0px 0px 5px 0px;}
			.blogpost p, .blogpost a {font-weight: normal; font-family: helvetica, arial, sans-serif; margin: 0px; font-size: 12px;}
			
/* About Page */
#about #wrapper section {min-height:596px;padding:0px;margin:0px;height:auto;display:inline;}
	section#about {float:left;width:450px;margin-top:20px;min-height:596px;}
		#about h3 {font-weight:normal;display:inline;word-spacing:1px;padding:0px;line-height:26px;font-size:20px;}
		#about p {font-weight: normal;font-family:helvetica,arial,sans-serif;margin:0;font-size:14px;line-height:18px;margin-top:25px;}
			#about p a {color:#6db33f;}
				#about p a:hover {color:#000000;text-decoration:underline;}
	section#picture {float:right;width:325px;margin-top:20px;}
		#picture img {margin:5px 0px 10px 0px;float:right;}
	
/* Work Page */
body#workpage #container {width:800px;clear:both;position:relative;margin:0px auto;height:950px;}

#work #wrapper section {padding:0px;margin:0px;height:auto;display:inline;}
	section#work {width:800px;height:auto;padding:20px 0px 20px 0px;}
		#work h3 {font-weight:normal;display:inline;word-spacing:1px;padding:0px;line-height:26px;font-size:20px;}
	section#portfolio {width:800px;height:auto;}

.port_item {height:250px;width:800px;margin:0px 0px 20px 0px;padding:0px 0px 20px 0px;}
	
	.port_item #s1, .port_item #s2, .port_item #s3, .port_item #s4, .port_item #s5, .port_item #s6, .port_item #s7 {overflow: hidden; height: 240px; width: 550px; float: left; display: inline;}
	
	.port_item .img_nav {float:left; display:inline; clear:none; width:15px; height:25px; margin: 190px 0px 0px 5px;}	
		.port_item .img_nav a { margin:0px; padding:0px; font-size:20px; text-decoration: none;}
		.port_item .img_nav a:hover {font-weight: bold; text-decoration: none;}
		
	aside.description {float:left; display:inline; width:200px; height:250px; padding-right:15px;}
	.port_item h2 {float: left; display: inline; font-size: 20px; font-family: Helvetica, Arial, sans-serif; margin: 0px; padding: 0px; line-height: 25px; }
		.port_item p {margin-top: 12px; float: left; display: block; clear: left; font-size: 11px; line-height: 19px; color: #a1a1a1; }
			.port_item p.what {font-size: 12px; margin: 0px; padding: 0px; }
			.port_item a:hover {text-decoration: underline; }
			
/* Contact Page */
#contact #wrapper section {min-height: 460px; padding: 0px; margin: 0px; height: auto; display: inline;}
	section#contact {float: left; width: 500px; margin-top: 20px; min-height: 460px;}
		#contact h3 {font-weight: normal; display: inline; word-spacing: 1px; padding: 0px; line-height: 26px; font-size: 20px;}
	section#social {float: right; width: 250px; margin-top: 20px; }
		#social h3 {font-weight: normal; display: inline; word-spacing: 1px; padding: 0px; font-size: 20px;}
		#social p {font-weight: normal; font-family: helvetica, arial, sans-serif; margin: 0; font-size: 14px; line-height:18px; margin-top: 5px;}
		#social a {font-weight: normal; font-family: helvetica, arial, sans-serif; margin: 0; font-size: 16px; font-weight: bold;}
			#social a:hover {color: #000000;}
				#social li {list-style: none; margin: 0 15px 5px 0;}
				#social li a {display: block; height: 25px; padding: 0 0 0 35px;}
					#social li a.twitter { background: url(../images/social_icons.png) 0 0 no-repeat; }
					#social li a.facebook { background: url(../images/social_icons.png) 0 -25px no-repeat; }
					#social li a.linkedin { background: url(../images/social_icons.png) 0 -50px no-repeat; }
					#social li a.youtube { background: url(../images/social_icons.png) 0 -75px no-repeat; }
					
/* 404 Error Page */
#missing #wrapper section {min-height: 246px; padding: 0px; margin: 0px; height: auto; display: inline;}
	section#missing {float: left; width: 800px; margin-top: 20px; min-height: 246px;}
		#missing h3 {font-weight: normal; display: inline; word-spacing: 1px; padding: 0px; line-height: 26px; font-size: 20px;}
			
/* Footer */
#subfooter {position: relative; clear:both; margin: 0 auto; padding: 10px 0px 0px 0px; width: 700px; height: 240px;}
	#subfooter a {color: #6db33f;}
		#subfooter a:hover {color: #000000;}
		
	/* Twitter */
	#twitter {padding: 0; margin: 20px 0px 10px 0px; float: left; font-family: helvetica, arial, sans-serif; font-size: 14px; height: 167px; 
	width: 296px; background: url("../images/twitter.gif") no-repeat;}
		#twitter ul {list-style: none; padding: 0;}
		#twitter p {font-family: franklin, helvetica, arial, sans-serif; font-size: 35px; margin-top: 22px; color: #ffffff;}
			#twitter p a {float: none; color: #ffffff;}
			#twitter p a:hover {color: #6db33f;}
		#latest_tweet {width: 256px; margin:60px 0 0 20px; height: 100px;}
	
	/* Email */
	#email {float: right; padding: 0; margin: 20px 0px 10px 0px; height: 163px; width: 236px; font-family: arial, helvetica, sans-serif; font-size: 14px;}
		#email p {color:#ffffff; margin-top: 10px;}
		#email a {float: none; color: #ffffff;}
			#email a:hover {color: #6db33f;}

	/* Legal*/
	footer {position: relative; clear:both; margin: 0 auto; padding-top: 10px; width: 700px; height: 20px;}
		footer p {color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: 10px; width: auto;}
			footer a {float: none; color: #ffffff;}
				footer a:hover {color: #6db33f;}