/*
Theme Name: Chris Taylor Design
Theme URI: www.christaylordesign.com
Description: 
Version: 3
Author: Chris Taylor
Author URI: www.christaylordesign.com
*/

/*==========RESET==========*/
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, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	color: #111;
	font-size: 100%;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	font-style: normal;
	font-variant: normal;}

/*ol, ul {list-style: none;} removed as feel it causes probs over browsers*/
blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}

del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}


/*==========HTML TAGS==========*/
/*#e4e4e4 url(style/images/v3-grid.gif) repeat-y scroll top center*/

body {background: #ddd url(style/images/background-halftone.gif) repeat top left; /*url(style/images/v3-grid.gif) repeat-y scroll top center;*/ color: #111;font: 14px arial, sans-serif; line-height: 1;}

	body#home {background: #ddd url(style/images/halftone-fade.png) repeat-x top left; color: #111;font: 14px arial, sans-serif; line-height: 1;}

/*body#home {background: #ddd url(style/images/bg-tex2.jpg) repeat-x top left ; color: #111;font: 14px arial, sans-serif; line-height: 1;}*/

h1, h2, h3, h4, h5, h6 {color: #6B6B6B; font-family: Georgia, times, serif; font-weight: normal; letter-spacing: -0.03em; }

	h1 {font-size: 32px; line-height: 1.125em; margin-bottom: 0.563em;}

	h2 {font-size:32px; line-height:1.125em; margin-bottom:0.643em; margin-bottom: 0.563em;}

	h3 {font-size: 26px; line-height: 1.385em; margin-bottom: 0.75em;}

	h4 {font-size: 22px; line-height: 1.636em; margin-bottom: 0.818em;}

	h5 {font-size: 20px; line-height: 1.8em; margin-bottom: 0.9em; }

	h6 {font-size: 18px; line-height: 1em; margin-bottom: 1em;}

p {font-size: 14px; line-height: 1.5em; margin-bottom: 1.286em;}

li {font-size: 14px; line-height: 1.286em;}

small {font-size: 10px; line-height: 1.8em;}

p, ul, ol {margin-bottom: 1.286em;}

em {font-style: italic;}

ol, ul, li {list-style-position: outside;}

a {border-bottom: 1px dotted #577B27; color: #577B27; font-weight: normal; text-decoration: none; word-wrap: break-word;}
a:link {}
a:visited {}
a:hover {background-color: #577B27; border-bottom: 1px solid #577B27; color: #fff;}
a:active {background-color: #000; color: #fff;}

abbr {border-bottom: 1px #000 dotted;}

dl dt {font-weight: bold; margin-bottom: 1.5em;}

dl dd {margin-bottom: 1.5em;}

table {border-collapse:collapse; margin-bottom: 1.5em; text-align:left; width:100%;}
	table caption {font-weight: bold; margin-bottom: 1.5em; text-align: left;}
	table th {background:#D0DAFD  none repeat scroll 0 0;	border-bottom:1px solid #FFFFFF; border-top:4px solid #B4BDDB;font-weight: bold; padding: 0.58em 0.755em;}
	table tr:hover td {background-color: #E3E3E3;}
	table td {background:#EFEFEF none repeat scroll 0 0; border-bottom:1px solid #FFFFFF; border-top: 1px solid transparent; padding: 0.67em 0.75em 0.75em 0.75em;}

blockquote {color: #6B6B6B; background: #A8E2FF url(style/images/quotes.png) no-repeat left top; color: #737373; font-style:italic; font-family: Georgia, times, serif;}
	blockquote p {background:transparent url(style/images/quotes.png) no-repeat scroll right bottom; color:#6B6B6B; font-size:16px; font-style:italic; line-height:1.125em; margin-bottom:0; padding:15px 32px 18px;}
	
cite, cite a{font-style: italic;}

/*==========HEADER==========*/
#header-wrap {background: transparent url(style/images/light-grunge.png) repeat-x left top; width:100%;}

#header { margin: 0 auto; padding: 2em 0; width: 920px;}
	#header h1 {float: left;}
		#header h1 a {background: transparent url(style/images/logo.png) top left no-repeat; border: none; display: block; height: 106px; text-indent: -9000em; width: 527px;}
			#header h1 a:hover {background-position: 0 -107px; border: none;}

#nav {float: right; list-style: none; }
	#nav li {float: left; margin-right: 10px;}
		#nav li, #nav li a {font-size: 18px;}
		
		.nav-blog a, .nav-work a, .nav-contact a {background: transparent url(style/images/nav.png) top left no-repeat; border-bottom: transparent 5px solid; display:block; height:80px; padding-bottom: 10px; text-indent: -9000em;}
		
		li.nav-blog a {background-position:0 -85px; width:66px;}
			li.nav-blog a:hover {background-position:0 0; border-bottom: transparent 5px solid;}
			
			#blog li.nav-blog a, #blog-single li.nav-blog a {border-bottom: #97BC64 5px solid;}
			
		li.nav-work a {background-position:-75px -85px; width:70px;}
			li.nav-work a:hover {background-position:-75px 0; border-bottom: transparent 5px solid;}
			
			#work li.nav-work a, #work-single li.nav-work a {border-bottom: #97BC64 5px solid;}
			
		li.nav-contact a {background-position:-156px -85px; width:95px;}
			li.nav-contact a:hover {background-position:-156px 0; border-bottom: transparent 5px solid;}

/*MAIN*/
#content {clear: both; margin: 0 auto; width: 920px;}

#content-main {position: relative; margin-bottom: 2em;}

.intro {margin-bottom: 36px;}
	.intro h2 {margin-bottom: 0;}

.intro h2 span {color: #111; font-style: italic; font-weight: normal;}

	/*Home page*/
		/*parralax effect*/
			#home .intro {background: url(style/images/intro-bg.jpg) left top repeat-x; position: relative; width: 100%;}
				#home .intro h2 {display:block; font-size: 30px; position:absolute;  top: 33px; width:920px;}
				.intro .websites, .intro .illustration, .intro .branding {background: transparent url(style/images/intro-transparent-text.png) repeat-x left top;}
					#home .intro .intro-content {margin: 0 auto; width: 920px;}
						#home .intro .websites {background-position:60% 0; height:72px;}
						#home .intro .illustration {background-position: 103% -80px; height:58px;}
						#home .intro .branding {background-position:-264% -152px; height:51px;}
		/*end parralax effect*/
	
	#home .subscribe {background-color:#FFFFFF; padding:5px; position:absolute; right:20px; top:20px; z-index: 100;}
	
	#home #content-main h3  {text-transform: uppercase; position: absolute; z-index: 3;}
		#home #content-main h3 span {font-style: italic; font-weight: normal; text-transform: lowercase;}
	
	#services h3, #about h3 {background-color: #6198b7; color: #fff; padding: 10px; left: -10px; top: 10px;}
	#featured-work h3 a, #featured-blog h3 a  {background-color:#6198B7; border-bottom:medium none; color:#FFFFFF; display:block; left:-10px; padding:10px; position:absolute; text-align:center; top:10px; width:130px;}
		#featured-work h3 a:hover, #featured-blog h3 a:hover {background-color: #5789a5; border-bottom: none;}
	
	#featured-work, #featured-blog, #services, #about {position: relative; margin-bottom: 1.286em;}	
	#featured-work, #featured-blog {height: 400px; width: 920px;}	
	#featured-work .img, #featured-blog .img {position: absolute; overflow: hidden; z-index: 0;}
	#featured-work .excerpt, #featured-blog .excerpt {bottom: 20px; padding: 2em; position: absolute; width: 244px; z-index: 3;}	
			
	#featured-work .excerpt {background: rgba(255, 255, 255, .9); right: 20px;}
	
	#featured-blog .meta {color: #DFDFDF;} 	
	#featured-blog .excerpt {background: rgba(17, 17, 17, .75); left: 20px;}
		#featured-blog .excerpt p {color: #fff;}
		
	#services {background: #FFFFFF url(style/images/white-bg-tex.jpg) repeat-x top left; float:left; margin-right:20px; padding:5em 28px 2em; width:544px;}
	
	#about {background: #000 url(style/images/about-bg.jpg) -38px top no-repeat; float: left; padding-top: 30em; width: 300px;}
		#about:hover {background-color: #7D7D7D; background-position: -379px top;}
		.about-content {background: rgba(17, 17, 17, .85); padding: 2em;}
			.about-content p {color: #fff;}
	
	/*Blog-main*/	
	#blog .subscribe {background-color:#FFFFFF; padding:5px; position:absolute; right:0; top:0; z-index: 100;}
	
	ul.blog  {float: left; list-style: none; margin-bottom: 0;}
	
	ul.blog li {float: left; margin-left:20px; width: 280px;}
		ul.blog li .img {background-color: #f1f1f1; height: 180px;width: 280px;}
	
	#blog div.feature {height:400px; margin-bottom:2em; margin-left:0; overflow:hidden; position:relative; width:920px;}
		#blog div.feature .img {position: absolute; z-index: 0;}
		#blog div.feature .excerpt {background: rgba(255, 255, 255, .75); bottom: 20px; left: 20px; padding: 2em; position: absolute; width: 244px; z-index: 1;}

	ul.row1, ul.row2 {border-top: 2px solid #CBCBCB; padding: 2em 0; width: 920px;}
	ul.row1 {background: transparent url(style/images/vertical-divider.gif) repeat-y scroll 308px top; margin-bottom: 0;}
	ul.row2 {background: transparent url(style/images/vertical-divider.gif) repeat-y scroll 608px top; }

	li.twitter, li.recentcomment {color: #6B6B6B; font-family: Georgia, times, serif;}
	 li.twitter p, li.recentcomment p {color:#6F6F6F; font-size:18px; font-style:italic; line-height:1.3em; min-height:9em; text-align:left; word-wrap:break-word;}
	
	li.twitter {text-align: right;}
	li.twitter p {background:#FFFFFF url(style/images/twitter.png) no-repeat scroll left bottom; padding:2em 2em 4em;}
	li.twitter div {background:transparent url(style/images/balloon-tail.png) no-repeat scroll 234px bottom; padding-bottom:9px;}
	
	li.recentcomment p {background-color: #fff; padding:2em;}
	li.recentcomment div {background:transparent url(style/images/balloon-tail.png) no-repeat scroll -553px bottom; padding-bottom:9px;}
	
	#blog .aside {background: transparent url(style/images/vertical-divider.gif) repeat-y scroll 308px top; border-top: 2px solid #CBCBCB; float: left; padding-top: 2em; width: 920px;}
		#blog .aside .categories {float:left; margin-right:20px; width:290px;}
			.aside .categories ul  {list-style-type: none;}
				.aside .categories li a {display:block; padding:0.5em; width:280px;}
		
		#blog .aside .about {float: left; width: 580px;}
			#blog .aside .about h3, #blog .aside .about p {margin-left: 10px;}
	
	/*Blog-Single*/
	#blog-single #content-main {background: #FFFFFF url(style/images/white-bg-tex.jpg) repeat-x top left; float: right; padding: 2em; width: 620px;}
	
	#blog-single .meta {float:right; margin-bottom: 3em; text-align: right; width:270px;}
		#blog-single .meta p {color:#5789A5; margin-bottom:0;}
		
		#blog-single h2 {color: #5789A5; clear: both;}
		
		#blog-single .post-entry {border-bottom: 9px solid #A8E2FF; margin-bottom: 1em;}
		
		.post .post-entry img, .post .post-entry a img {margin-bottom: 1em;}
		
		.post .post-entry p:first-child:first-line {color: #5789A5; font-family: georgia, times New Roman, times, serif; text-transform: uppercase; }		 
		.post .post-entry blockquote p:first-child:first-line {color: #6B6B6B; font-style:italic; font-family: Georgia, times, serif; text-transform: none;}
				
			.post-footer .about, .post-footer .share {border-bottom: 3px solid #A8E2FF; margin-bottom: 2em;}
			
			.post-footer .about {background: transparent url(style/images/me-sketch.jpg) no-repeat right bottom; position: relative;}
				.post-footer .about p {background-color:#F1F1F1; bottom:12px; left:25px; margin-bottom: 0; padding:18px; position:relative; width:380px;}
				.post-footer .sociable {}
				.post-footer .share ul {float: left; list-style-type: none;}
					.post-footer .share li {float: left; margin-right: 10px;}
						.post-footer .share li a {border: none;}
							.post-footer .share li a:hover {background-color: transparent; border: none;}
								
		/*Comment list*/
		#comment-area {clear: both;}			
			#comment-area ul li {list-style: none;}
				#comment-area ul.commentlist {float: left; margin-bottom: 3em;}
				#comment-area ul.commentlist li {border-top:1px solid #E1E1E1; float: left; margin-bottom: 0; padding: 1.5em 0;}
					#comment-area ul.commentlist li.authcomment {background-color: #DCF3FF;}
					
					#comment-area ul.commentlist li .comment-meta {color:#737373; float:left;font-family: Georgia, times, serif; font-style: italic; margin-right:20px; text-align:right; width:130px;}
					#comment-area ul.commentlist li .comment-meta span.author-name a {font-weight: bold;}
					#comment-area ul.commentlist li img.avatar {float: left; width: 55px; margin-right: 20px;}
					#comment-area ul.commentlist li .comment-text {color:#4F4F4F; float: left; width: 390px;}
						#comment-area ul li .comment-text p:last-child {margin-bottom: 0;}
		
		/*Comment Form*/
		#commentform ul li {list-style-type: none; margin-bottom: 0.3em; width: 224px}
					#commentform ul li label {font-weight: bold;}
					#commentform ul li input {background: #fff url(style/images/bg-gradient-fade.gif) scroll repeat-x top left; border:2px solid #ABABAB; color: #4F4F4F; display:block; height:1.5em; padding:5px 3px 3px; width:214px;}
					#commentform ul li textarea {background: #fff url(style/images/bg-gradient-fade.gif) scroll repeat-x top left; border:2px solid #ABABAB; color: #4F4F4F; display:block; height: 155px; padding:3px; width: 366px;}
					#commentform ul li#comment-name {width:224px;}
					#commentform ul li#comment-email { margin-right:20px; width:224px;}
					#commentform ul li#comment-website {float:left; margin-right:20px; width:224px;}					
					#commentform ul li#comment-textarea {float:left; margin-top:-138px; width:355px;}
					#commentform ul li .reqtxt {color: #C17B42; font-style: italic; text-align: right;}
						#commentform ul li input:hover, #commentform ul li input:focus, #commentform ul li textarea:hover, #commentform ul li textarea:focus {border:2px solid #8CC73F;}
					
					#commentform p.submit {float: right;}

	/*Work-Main*/	
	#work #featured-work h3 {background-color:#6198B7; color:#FFFFFF; display:block; left:-10px; padding:10px; position:absolute; text-align:center; text-transform:uppercase; top:10px; width:240px; z-index:3;}
	
	#work .work-type {clear: both; float: left; margin: 2em 0;}
		#work .work-type h3 {float: left; margin-right: 20px; width: 300px;}
		#work .work-type p {font-family: Georgia, times, serif; font-size: 16px; float: left; color: #6198B7; font-style: italic; width:600px;}
	
	ul.work {clear: both; float: left; list-style: none;}
		ul.work li {background: #FFFFFF url(style/images/white-bg-tex.jpg) repeat-x top left; float: left; margin: 0 0 2em 20px; opacity:0.75; padding: 28px; position: relative; width: 230px;}
			ul.work li:hover {opacity:1;}
		ul.work li .img {background-color: #f1f1f1; height: 180px; outline: 1px solid #ddd; overflow: hidden; width: 230px;}
		ul.work li h4 {font-size:18px; left:-10px; margin-bottom:0; opacity: 1; position:absolute; top:1em;}
			ul.work li h4 a {background: rgba(87,137,165,0.7); border-bottom: 0; color: #fff; padding:0.5em;}
				ul.work li:hover h4 a, ul.work li h4 a:hover {background: rgba(87,137,165,1);}
	
	#work .top-link {float: right; margin-bottom: 1em;}

	/*Work-Single*/
	#work-single #content-main {background: #fff url(style/images/white-bg-tex.jpg) repeat-x top left; float: right; padding: 2em; width: 850px;}
	
	#work-single h2 {color: #5789A5; margin-bottom: 1em;}
		
	#work-single .portfolio-img {float: right; margin-left: 20px; width: 580px;}
		#work-single .portfolio-img img {margin-bottom: 2em; outline: 1px solid #ddd;}
		
	/*Sidebar*/
	#content-aside {float:left; margin-top:14em; width:224px;}
		#content-aside h4 {color:#49748B; font-family:arial,sans-serif; font-weight:bold; letter-spacing:0.08em; margin-bottom:0; padding:0 0 0 27px; text-transform:uppercase;}
		#content-aside div {border-top:18px solid #5789A5; margin-bottom:2em; padding-top:1em;}
	 	#content-aside p,  #content-aside ul, #content-aside span {color: #5789A5; padding:0 28px;}
	 		#content-aside ul li.cat-item {list-style-type: none; margin-bottom: 1em;}
				#content-aside ul li.cat-item a {display:block; padding:0.5em; width:152px;}		
			
			#content-aside .twitter p {font-style: italic;}	
			#content-aside .twitter span, #content-aside .twitter span a {font-weight: bold;}								
	
	/*Category-page*/
	#category ul h3 {font-size: 20px; line-height: 1.8em; margin-bottom: 0.9em; }
		
		#category ul.blog li {margin-bottom: 2em; min-height: 470px}
		
	/*404*/
	#error #content-main {background: #fff url(style/images/white-bg-tex.jpg) repeat-x top left; float: right; padding: 2em; width: 850px;}		
		#error #content-main img {margin-bottom: 1em;}
		
		#error #content-main span {display: block; font-style: italic; margin-bottom: 1em;}
			#error #content-main span a {font-style: italic;}
	
	/*Pagenavi*/		
		.wp-pagenavi {padding: 1em 0; border-top: 2px solid #CBCBCB; border-bottom: 2px solid #CBCBCB;}

		ul.wp-pagenavi li {list-style-type: none; list-style-position: outside; float: left; text-align: center;}
			ul.wp-pagenavi li a {display: block;height: 1.5em; width: 1.5em;}

		.wp-pagenavi a, .wp-pagenavi a:link {background-color: #8CC63F; border:1px dotted #81B73A ; color:#FFFFFF; display: inline-table;  margin-right:0.75em; padding:5px;}

		.wp-pagenavi a:hover {background: #81B73A; border: 1px solid #81B73A;}
		.wp-pagenavi span.pages {margin-right: 0.75em;}
		.wp-pagenavi span.current, .wp-pagenavi span.extend {background-color: #EBEBEB; border: 1px solid #CBCBCB; color: #575757; font-weight: bold; margin-right: 0.75em; padding:5px;}
								
/*==========FOOTER==========*/
#footer-wrap {background: #C3C3C3 url(style/images/light-grunge.png) repeat-x top left; clear: both; padding-top: 3em;}
	#footer {margin: 0 auto; width: 920px;}	
	
	#footer .content {border-right: 2px solid #AFAFAF; float:left; margin-right:18px; width:280px;}	
		.subscribe-links, .vcard, .copyright {padding-left: 1.286em;}
		
		.subscribe-links {border-bottom: 2px solid #AFAFAF;}
		.vcard {line-height: 1.286em; padding-top: 1.286em; }
			.vcard .fn {font-weight: bold;}			
		.copyright {margin-top: 1.286em; }
	
	#footer #contact-form {float: left; position: relative; width: 620px;}
	#footer #contact-form form fieldset.cf-fs1 legend {font-size: 1.167em; /* 14px */		line-height: 1.286em; /* 18px */	margin-bottom: 1.286em; /* 18px */}
	#footer #contact-form .reqtxt, #footer #contact-form .emailreqtxt {color: #C17B42; font-style: italic; text-align: right;}
				
	#footer #contact-form form ol {list-style: none;}
	
		.failure, .success {color: #C17B42; font-weight: bold; margin-bottom: 1.286em;}
		
		#footer #contact-form ol li label {font-weight: bold;}
		#footer #contact-form ol li input {background: #fff url(style/images/bg-gradient-fade.gif) scroll repeat-x top left; border:2px solid #ABABAB; color: #4F4F4F; display:block; height:1.5em; padding:5px 3px 3px; width:214px;}
			#footer #contact-form ol li input:hover, #footer #contact-form ol li input:focus, #footer #contact-form ol li#li--4 textarea:hover, #footer #contact-form ol li#li--4 textarea:focus {border:2px solid #8CC73F;}
					
		#footer #contact-form ol li#li--2 {width:224px;}
		#footer #contact-form ol li#li--3 {float:left; margin-right:20px; width:224px;}
		#footer #contact-form ol li#li--4 {float:left; margin-top:-66px; width:355px;}
		
			#footer #contact-form ol li#li--4 textarea {background: #fff url(style/images/bg-gradient-fade.gif) scroll repeat-x top left; border:2px solid #ABABAB; color: #4F4F4F; display:block; padding:3px; width: 367px;}
		#footer #contact-form fieldset.cf_hidden, #footer #contact-form fieldset.cf_hidden legend {height: 0;}				
		#footer #contact-form form p {float: right; /*margin-top: -25px;*/}
		/*#footer #contact-form form p.cf-sb input#sendbutton {position:relative; right:-557px; top:-20px;}*/
		#footer #contact-form .linklove {display: none;}				
				
 /*==========Reusable==========*/

input#sendbutton {background-color:#8CC63F; border-color:#B1FB50 #577B27 #577B27 #B1FB50; border-style:solid; border-width:1px; clear:both; color:#FFFFFF; font-weight:bold; padding:0.75em; text-transform:uppercase;}
	input#sendbutton:hover {background-color: #81B73A; cursor: pointer;}
		
.meta {border-bottom:1px solid #fff; color: #6B6B6B; font-family: Georgia, sans-serif; padding-bottom: 0.5em; margin-bottom:0.5em; text-transform:uppercase; }

.strong {font-weight: bold;}

.img-link, .img-link a, .img-link a:hover {background: none; border: none;}

.clear {clear: both;}

.float-l {float: left;}

.float-r {float: right;}