/*****************************************************************************/
/* johntayloronline.co.uk // main.css (screen)
   Created: 27.03.09 
   Author: J Taylor
   Copyright 2009 John Taylor. All Rights Reserved. */
/*****************************************************************************/


/* 
	CONTENTS ------
	
	1. GLOBAL
	2. LAYOUT
	3. NAVIGATION
	4. HEADINGS (h1-h6)
	5. BUTTONS
	6. FOOTER
	7. FORMS
	8. HOME
	9. OTHER
	
	---------------

*/


/* 1. GLOBAL
----------------------------------------------------------------------*/

body {
	font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
	color: #4a3f42;
	background-color: #fff;
}

h1, h2, h3, h4, h5 {
	font-weight: normal;
	color: #390908;
}

h1 {
	font-size: 2.4em;
}

h2 {
	font-size: 2.0em;
}

h3 {
	font-size: 1.6em;
}

h4 {
	font-size: 1.2em;
}

h5 {
	font-size: 1.2em;
	margin-top: .5em;
}

p {
	font-size: 1.1em;
	margin: 1em 0;
	padding: 0 10px;
}

#branding {
	position: relative;
	height: 60px;
	border-bottom: 2px solid #f76f1f;
	margin: 50px 0 0 0;
	padding: 0;
}

#branding h1 {
	background: #fff url(../img/logo.gif) no-repeat 0 0;
	height: 60px;
	text-indent: -9999px;
	margin: 0;
	padding: 0;
}

#secondary_content {
	list-style: none;
}

#secondary_content p {
	padding: 0 10px 0 0;
}

/* 1.1 links ----------------------- */
a:link, a:visited { color: #791618; text-decoration: none; }
a:hover, a:focus, a:active { color: #F76F1F; }

/* class for the 'Back' link */
a.back { 
	background: url(../img/icon_back.gif) no-repeat left center;
	display: block;
	width: 50px; 
	height: 8px; 
	line-height: 7px;
	text-indent: 10px;
	text-decoration: none;
}

a:hover.back { 
	background-position: right center; 
}

/*** Firefox only styles to align the arrow head with the 'Back' text ***/
a.back, x:-moz-any-link { line-height: 9px; } /* styles for Firefox 2.0 */
/*a.back, x:-moz-any-link, x:default { line-height: 11px; } /* restore styles for Firefox 3.0 and newer */




/* 2. LAYOUT
----------------------------------------------------------------------*/

body {
	text-align: center; 
	min-width: 760px;
}

#wrapper {
	width: 960px; 
	margin: 0 auto; 
	text-align: left;
	background-color: #fff; 
}

#content_home,
#content_portfolio,
#content_wide { 
	width: 960px;
	float: left;
	padding-bottom: 20px;
}

#content { 
	width: 570px;
	float: left;
	padding-bottom: 20px; 
}

#secondary_content { 
	width: 310px; 
	float: right; 
} 

#footer { clear: both; } 


/* 3. NAVIGATION
----------------------------------------------------------------------*/

ul#nav_main {
	position: absolute;
	background-image: url(../img/nav_bar.gif);
	top: 28px;
	left: 640px;
}
	
ul#nav_main li { float: left; list-style-type: none; }
ul#nav_main li a { height: 20px; display: block; position: absolute; top: 0; text-indent: -9999px; outline: none; }

li#nav_home a,
li#nav_portfolio a,
li#nav_about a,
li#nav_contact a,
li#nav_inspiration a {
	background: url(../img/nav_bar.gif);
}

/* 3.1 nav rollover effects (positioning) ----------------------- */
li#nav_home a 							{ background-position: 0 0; width: 50px; left: 0; }
li#nav_home a:hover						{ background-position: 0 -20px; }
body#home li#nav_home a 				{ background-position: 0 0; cursor: default; }

li#nav_portfolio a 						{ background-position: -50px 0; width: 70px; left: 50px; }
li#nav_portfolio a:hover				{ background-position: -50px -20px; }
body#portfolio li#nav_portfolio a 		{ background-position: -50px -20px; cursor: default; }

li#nav_about a 							{ background-position: -120px 0; width: 60px; left: 120px; }
li#nav_about a:hover					{ background-position: -120px -20px; }
body#about li#nav_about a 				{ background-position: -120px -20px; cursor: default; }

li#nav_contact a 						{ background-position: -180px 0; width: 60px; left: 180px; }
li#nav_contact a:hover					{ background-position: -180px -20px; }
body#contact li#nav_contact a 			{ background-position: -180px -20px; cursor: default; }

li#nav_inspiration a					{ background-position: -240px 0; width: 80px; left: 240px; }
li#nav_inspiration a:hover				{ background-position: -240px -20px; }
body#inspiration li#nav_inspiration a	{ background-position: -240px -20px; cursor: default; }
/* END =nav rollover effects (positioning) */


/* 4. HEADINGS (h1-h6)
----------------------------------------------------------------------*/

#header_about,
#header_contact {
	text-indent: -9999px;
	height: 40px;
	margin-top: 30px;
	padding-bottom: 5px;
}

#header_about {
	background: url(../img/h_about.gif) no-repeat 0 0;
}

#header_contact {
	background: url(../img/h_contact.gif) no-repeat 0 0;
}

#header_inspiration {
	background: url(../img/h_inspiration.gif) no-repeat 0 0;
	text-indent: -9999px;
	height: 40px;
	margin-top: 30px;
}

#content_portfolio #secondary_content h3 {
	padding-top: 20px;
}

#content_portfolio #secondary_content h4 {
	padding-top: .5em;
}


/* 5. BUTTONS
----------------------------------------------------------------------*/


/* 6. FOOTER
----------------------------------------------------------------------*/

#footer {
	position: relative;
	width: 960px;
	height: 25px;
	border-top: 1px solid #f76f1f;
	margin: 20px 0;
	clear: both;
}

div#footer p {
	color: #999;
	font-size: 0.9em;
}


/* 7. FORMS
----------------------------------------------------------------------*/

#contact_form input {
	float: left;
	padding: 2px;
}

#contact_form label {
	float: left;
	width: 100%;
	text-align: left;
	font-size: 1em;
	display: block;
	padding: 0 0 .25em 0;
}

#contact_form textarea {
	font: 1em "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}

#contact_form fieldset p input#email {
	margin-bottom: 10px;
}

#contact_form fieldset p {
	margin-bottom: 0;
}

#contact_form #email,
#contact_form #subject,
#contact_form #message {
	border: 1px solid #f76f1f;
	width: 95%;
	padding: 2px;
}

#contact_form .btnspace {
	padding: 0 0 80px 0;
}


/* 8. HOME
----------------------------------------------------------------------*/

#home_flash {
	padding: 20px 10px 0 10px;
}

#content_home #hello {
	float: left;
	width: 560px;
	padding-top: 20px;
}

#content_home #latest {
	float: right;
	width: 320px;
	padding-top: 20px;
}

#content_home #hello h2, #content_home #latest h2 {
	text-indent: -9999px;
	height: 40px;
}

#content_home #hello h2 {
	background: url(../img/h_hello.gif) no-repeat 0 0;
}

#content_home #latest h2 {
	background: url(../img/h_latest.gif) no-repeat 0 0;
}

#content_home #latest h2.sidebar-title {
	background: none;
}

#content_home #hello h3 {
	font-size: 1.1em;
	color: #4a3f42;
	margin: 1em 0;
	padding: 0 10px;
}

/* 8.1 latest news ----------------------- */
/*
.date {
	font-size: 85%;
	font-weight: bold;
	color: #999;
	padding-left: 5px;
}

.posted {
	display: block;
	color: #4a3f42;
	line-height: 140%;
	margin: 0 5px 5px 0;
	padding: 0 0 8px 0;
}

#news {
	padding: 1em 10px 5px 10px;
}

#latest h4 {
	display: inline;
	font-size: 1.1em;
	font-weight: bold;
	color: #4a3f42;
}
*/

/* 8.2 Twitter feed ----------------------- */
#twitter_div {
	font-size: 1.1em;
	padding: 1em 10px 5px 10px;
}
/*
#twitter_div h3.sidebar-title {
	font-size: 1em;
	font-weight: bold;
	color: #999;
	margin: 0;
	padding: 0;
}
*/
#twitter_div #twitter_update_list span {
	margin: 0;
	padding: 0;
}

#twitter_div #twitter_update_list li {
	margin: 0 0 .8em 0;
	padding-bottom: 1em;
	border-bottom: 1px solid #ccc;
}

#twitter_div #twitter_update_list li a {
	/*display: block;*/
}

#twitter_div a#twitter-link {
	background: url(../img/icon_twitter.jpg) no-repeat 0 0;
	text-indent: -9999px;
	float: right;
	width: 19px;
	height: 20px;
	margin-top: 10px;
}


/* 9. OTHER
----------------------------------------------------------------------*/

li.col1 {
	float: left;
	width: 280px;
	padding: 0 10px 20px 10px;
}

li.col2, li.col3 {
	float: left;
	width: 280px;
	padding: 0 10px 20px 40px;
}

body#about #secondary_content img {
	padding-top: 10px;
}

/* 9.1 Portfolio page ----------------------- */
#content_portfolio #header_web {
	background: url(../img/h_portfolio_web.gif) no-repeat 0 0;
	text-indent: -9999px;
	height: 40px;
	margin-top: 30px;
}

#content_portfolio #header_print {
	background: url(../img/h_portfolio_print.gif) no-repeat 0 0;
	text-indent: -9999px;
	height: 40px;
	margin-top: 30px;
	clear: left;
}

ul#portfolio_web h3,
ul#portfolio_print h3,
ul#inspiration_list h3 {
	font-size: 1.2em;
	font-weight: normal;
	margin: .4em 0 .1em 0;
}

ul#portfolio_web li p,
ul#portfolio_print li p,
ul#inspiration_list li p {
	/*font-size: 1em;*/
	margin: 0;
	padding: 0;
}

ul#portfolio_web,
ul#portfolio_print,
ul#inspiration_list {
	margin: 0;
	padding: 20px 0 0 0;
}

.portfolio_image {
	padding : 20px 0 0 10px;
}


/* 9.2 Contact page ----------------------- */
ul#contact_links {
	font-size: 1.1em;
	margin-left: 10px;
	padding-top: 10px;
}

ul#contact_links li {
	float: left;
}

ul#contact_links a {
	height: 20px;
	padding: 2px 0 0 25px;
}

ul#contact_links .twitter a {
	background: url(../img/icon_twitter.jpg) no-repeat left center;
}

ul#contact_links .facebook a {
	background: url(../img/icon_facebook.jpg) no-repeat left center;
	margin-left: 30px;
}

ul#contact_links .posterous a {
	background: url(../img/icon_posterous.gif) no-repeat left center;
	margin-left: 30px;
}