/*
Theme Name: dc Knockout
Author URI: http://davidrcole.com
Description: A theme designed by yours truly
Author: David Cole
Version: 1.0
License: 
Tags: 
Copyright: (c) 2011 David Cole
*/


/*******************************************************************/
/*                                                                 */
/*                    Mobile Styles First                          */
/*                                                                 */
/*                                                                 */
/*******************************************************************/



/* 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{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; font-weight: normal}
body{line-height:1;text-align:left;}

blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus {outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
strong { font-weight: bold }

.clear { clear: both }







/* Root Elements ***************************************************************************/

body { background: #fff; font-weight: normal; font-size: 62.5% /* 10px */; color: #333; line-height: 2.4em /* 24px */; font-family: Georgia, 'Times New Roman', 'Times', serif }

.clear { clear: both }

img { max-width: 100% !important; height: auto !important }

pre { max-width: 100%; white-space: normal; background: #e0e0e0; padding: 0.7em }
input { max-width: 100% }
textarea { max-width: 100%; width: 100% }
	input, textarea { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 1em /*13px*/; color: #333; line-height: 1.54em /*20px*/; padding: 0.62em /*8px*/; border: 1px solid #999  }

a { -webkit-tap-highlight-color rgba(68,68,68,0.5) }

h1, h2, h3 { text-rendering: optimizeLegibility }


/* Content Wrapper ***************************************************************************/

.content { width: 95%; max-width: 950px; margin: 0 auto }






/* Header ***************************************************************************/

#header { padding-top: 1em; font-family: 'proxima-nova-1','proxima-nova-2', Arial, Helvetica, sans-serif; font-size: 1.3em /* 13px */; background: url('images/double-border.png') bottom repeat-x; margin-bottom: 1.84em /* 24px */ }
	#header p, #header div { text-align: center }
		p#name a { color: #333; text-decoration: none; font-weight: bold; 
			background: url('images/dc-logo-on-white.png') 0% 45% no-repeat; padding: 1em 0 1em 31px }
		p#name img { vertical-align: bottom }
	#menu { text-transform: uppercase }
		#menu a { text-decoration: none; padding: 1em 0.8em 0.9em 0.8em /* 20px */; color: #333; line-height: 3.2em /* 32px */ }
			#menu a:hover { background: #2e8ba3; color: #fff }



/* Tagline ***************************************************************************/

	#tagline { width: 100%; background: url('images/double-border.png') bottom repeat-x; padding-bottom: 2.4em /*24px*/ }
		#message { background: url('images/tagline-200.png') top center no-repeat; max-width: 100%; height: 130px; margin: 0 auto 0.8em /* 8px */ }			
		#tagline a { float: right; font-family: 'proxima-nova-1','proxima-nova-2', Arial, Helvetica, sans-serif; font-size: 1.6em /* 16px */; color: #666 }




/* Homepage Headlines ***************************************************************************/

.home h1 { 
	font-family: 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2', Arial, Helvetica, sans-serif; 
	font-size: 4.8em /*48px*/; text-transform: uppercase; font-weight: 500; text-shadow: 1px 1px 0 #fff, 2px 2px 0px #aba396;
	display: inline; background: url('images/blue-circle-15x15.png') 0% 50% no-repeat, url('images/blue-circle-15x15.png') 100% 50% no-repeat; padding: 0 27px 0 24px }
		
		.home h1 a { color: #333; text-decoration: none }

.home #design h2, .home #writing h2 { 
	font-family: 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2', Arial, Helvetica, sans-serif; 
	font-size: 2.4em /*24px*/; font-weight: 300;
	padding: 0 8px }

	.home #design h2 a, .home #writing h2 a { color: #1a6578; text-decoration: none }


/* Homepage View and Continue Reading Links **********************************************/

.home a.view { color: #b05c0a; background: url('images/arrow-orange-5x7.png') 100% 50% no-repeat; padding-right: 10px; font-family: 'proxima-nova-1','proxima-nova-2', Arial, Helvetica, sans-serif; 
	font-weight: 500; text-decoration: none; font-size: 1.3em /*13px*/ }



/* Homepage Design Section ***************************************************************************/

.home #design { clear: both; margin: 3.6em 0 /*36px*/; background: url('images/double-border.png') bottom repeat-x; padding-bottom: 2.4em /*24px*/ }
	.home #design .entry { margin-top: 1.6em /*16px*/ }
	.home #design .entry .categories { font-family: 'proxima-nova-1','proxima-nova-2', Arial, Helvetica, sans-serif; text-decoration: none }

	.home #design .entry a.view { display: none }
	
	
	.home #design .entry a.thumb { margin-bottom: 1.2em /*12px*/ }
		.home #design .entry a.thumb img { border: 1px solid #555; -webkit-box-shadow: 1px 1px 0 #fff, 3px 3px 0 #aba396 }
	.home #design .entry .categories { padding-left: 8px }
	.home #design .entry .categories a { color: #666; font-size: 1.3em /*13px*/; text-decoration: none }



/* Homepage Writing Section ***************************************************************************/

.home #writing { clear: both; margin-bottom: 3.6em /*36px*/ }
	.home #writing .entry { margin-top: 2.4em /*24px*/; padding-bottom: 1.6em /*16px*/; border-bottom: 1px solid #d5d1ca }
	.home #writing .entry:nth-child(4) { border-bottom: none }
	.home #writing p { font-size: 1.3em /*13px*/; line-height: 1.54em /*20px*/; padding: 0 8px }
	.home #writing a.view { padding-left: 8px } 
	



/* Pagination Links ***************************************************************************/

.home .more a { 
	font-family: 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2', Arial, Helvetica, sans-serif; 
	font-size: 2.1em /*21px*/; text-transform: uppercase; color: #b05c0a; text-decoration: none; line-height: 46px /* same as more circle img height */; 
	margin-top: 0.76em /*16px*/; margin-left: 8px }
	.home .more img { vertical-align: middle; margin-top: -7px }


#page-nav { padding-bottom: 1.6em /*16px*/; margin-top: 0.8em /*8px*/ }
	#page-nav .previouspostslink { float: left; margin-left: 8px; background: url('images/arrow-grey-left-6x7.png') 0% 45% no-repeat; padding-left: 12px }
	#page-nav .nextpostslink { float: right; margin-right: 8px; background: url('images/arrow-grey-6x7.png') 100% 45% no-repeat; padding-right: 12px }
	
	#page-nav a { font-family: 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2', Arial, Helvetica, sans-serif; 
	font-size: 2.1em /*21px*/; text-transform: uppercase; color: #666; text-decoration: none; line-height: 46px /* same as more circle img height */; font-weight: 300 }



/* Writing & Design Page Sub-Header ********************************************/

#subhead { background: url('images/double-border.png') bottom repeat-x; padding-bottom: 2.4em /*24px*/; margin-bottom: 1.6em /*16px*/ }
	#subhead h1 { text-align: center }
	#subhead #title p { font-family: 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2', Arial, Helvetica, sans-serif; 
		font-size: 2.8em /*28px*/; color: #999; text-transform: uppercase; margin-top: 0.29em /*8px*/; text-align: center }

#subhead #nav { width: 100%; clear: both }
	#subhead #nav ul { list-style: none }




/* Writing Page  ***************************************************************************/

.writing #subhead #nav { display: none }

.writing .entry { padding: 0 8px 1.6em /*16px*/ 8px; border-bottom: 1px solid #d5d1ca; margin-bottom: 1.6em /*16px*/ }
	.writing .entry .date { font-family: 'proxima-nova-1','proxima-nova-2', Arial, Helvetica, sans-serif; font-style: italic; color: #999; line-height: 1.54em /*20px*/ }
	.writing .entry h2 { 
		font-family: 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2', Arial, Helvetica, sans-serif;
		font-size: 2.6em /*26px*/; font-weight: 300; line-height: 1.08em /*28px*/ }
		.writing .entry h2 a { color: #1a6578; text-decoration: none }
	.writing .entry p { font-size: 1.3em /*13px*/; color: #444; line-height: 1.54em /*20px*/ }
	.writing .entry a.continue { font-family: 'proxima-nova-1','proxima-nova-2', Arial, Helvetica, sans-serif; font-size: 1.3em /*13px*/; color: #b05c0a;
		background: url('images/arrow-orange-5x7.png') 100% 50% no-repeat; padding-right: 12px }






/* Design Page  ***************************************************************************/

	.design #subhead #title p { margin-top: 0.8em /*8px*/ }
		.design #subhead #title p strong { color: #333; font-weight: normal }
	.design #subhead #nav { margin-top: 2.4em /*24px*/; text-align: center }
		.design #nav h2 { font-family: 'proxima-nova-1','proxima-nova-2', Arial, Helvetica, sans-serif; 
			font-size: 2.0em /*24px*/; line-height: 1em /*24px*/; text-transform: uppercase; font-weight: bold }


	.design #subhead #nav a { 
			font-family: 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2', Arial, Helvetica, sans-serif;
			font-size: 2.0em /*20px*/; font-weight: 300; line-height: 1.2em; color: #8b4908; text-decoration: none; text-transform: uppercase;
			padding: 0 10px }

.design .entry { margin-bottom: 1.6em /*16px*/; text-align: center }

	.design .entry a { overflow: hidden; width: 247px; height: 247px }
	.design .entry img { border: 1px solid #fff;
		-webkit-box-shadow: 1px 1px 0 #aba396;
		-moz-box-shadow: 1px 1px 0 #aba396;
		-o-box-shadow: 1px 1px 0 #aba396;
		box-shadow: 1px 1px 0 #aba396; }
		
	.design .entry h2 { 
		font-family: 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2', Arial, Helvetica, sans-serif;
		font-size: 2.6em /*26px*/; font-weight: 300; line-height: 1.08em /*28px*/; text-transform: uppercase;
		width: 247px; max-width: 100%; margin: 0 auto }
		
		.design .entry h2 a { color: #333; text-decoration: none }
	
	.design .entry p.categories { font-family: 'proxima-nova-1','proxima-nova-2', Arial, Helvetica, sans-serif; font-size: 1.3em /*13px*/; color: #ccc; font-weight: 300; line-height: 1.23em }
		.design .entry p.categories a { color: #666; text-decoration: none }




/* Single Page  ***************************************************************************/

	/* Article body *********************************/

	.single h1 { 
		font-family: 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2', Arial, Helvetica, sans-serif;
		font-size: 3.6em /*36px*/; line-height: 1.11em /*40px*/; text-transform: uppercase; text-shadow: 1px 1px 0 #fff, 2px 2px 0 #ccc; font-weight: 500;
		background: url('images/double-border.png') bottom repeat-x; padding-bottom: 0.27em /*16px*/;
		margin-bottom: 0.89em /*32px*/ }

	.single .article { font-size: 1.6em /*16px*/; float: left; margin-bottom: 1.6em /*16px*/; padding: 0 8px; max-width: 100% }
	
	.single .article h2 { 
		font-family: 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2', Arial, Helvetica, sans-serif;
		font-size: 2.1em /*21px*/; line-height: 0.95em /*20px*/; text-transform: uppercase; color: #1a6578; font-weight: 400;
		clear: both; margin: 1.52em /*32px*/ 0 0.76em /*16px*/ 0 }
		
		.single .article h2:first-child { margin-top: 0 }

	.single .article h3 { font-family: 'proxima-nova-1','proxima-nova-2', Arial, Helvetica, sans-serif; font-size: 1.12em /*18px*/; font-weight: bold; line-height: 1.11em /*20px*/ }

	.single .article p, .single .article pre { margin-bottom: 1em /*16px*/ }
		.single .article p.wp-caption-text { color: #666; font-style: italic; font-size: 0.81em /*13px*/ }
	
	.single .article a { color: #b05c0a }
	
	.single .article .alignleft { float: left }
	.single .article .alignright { float: right }

	/* Sidebar ***************************************/

	.single .sidebar { display: none }
	


	/* Comments **************************************/
	
	#comments { font-size: 0.81em /*13px*/; line-height: 1.23em /*16px*/; margin-top: 1.85em /*24px*/ }
		#comments ol { list-style: none }

		#comments .comment-meta .fn { font-family: 'proxima-nova-1','proxima-nova-2', Arial, Helvetica, sans-serif; font-weight: bold }
			#comments .comment-meta .fn a { color: #333; text-decoration: none }
			#comments .comment-meta .comment-date { font-style: italic; font-color: #666; font-size: 0.92em /*12px*/ }

		#comments li { padding: 8px; margin-bottom: 0.8em /*8px*/; border-bottom: 1px solid #d7d4ce }
			#comments li ul { margin: 0 24px }
				#comments li ul li { border: none; list-style: none }



/* Footer  ***************************************************************************/

#footer { clear: both; background: #333; width: 100%; margin-top: 3.6em /*36px*/; padding: 2.4em 0; color: #d1d1d1; border-top: 1px solid #adadad;
		-webkit-box-shadow: 0 -1px 0 #333;
		-moz-box-shadow: 0 -1px 0 #333;
		-o-box-shadow: 0 -1px 0 #333;
		box-shadow: 0 -1px 0 #333 }

#footer .content { position: relative }

	/* Headlines ***************************************************************************/
	#footer h2 { font-family: 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2', Arial, Helvetica, sans-serif; color: #fff; font-size: 2.4em /*24px*/; text-transform: uppercase; margin-bottom: 0.667em /*16px*/; font-weight: 300 }

		#footer h2 img { vertical-align: top }
	
	/* Sections *******************************************************************/
	#footer .section { margin-bottom: 2.4em /*24px*/; border-bottom: 1px solid #555555; padding: 0 8px 2.3em /*23px*/ }

	#footer #about p { font-size: 1.3em /*13px*/; line-height: 1.333em /*16px*/ }
		#footer #about p img { float: left; margin: 0 16px 0.667em /*8px*/ 0 }
		#footer #about p a { color: #94e0f3 }
		
	#footer #social a img { margin-right: 10px; vertical-align: middle }

	#footer #search form { background: #f5f5f5; border: 1px solid #999; height: 32px }
		#footer #search input { 
			border: 0; background: none; height: 24px; padding: 0 24px 0 16px; width: 70%; margin-top: 4px;
			font-family: Georgia, 'Times New Roman', Times, serif; font-size: 1.3em /*13px*/; color: #666;
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				-box-shadow: none }
		#footer #search input#searchsubmit { float: right; margin-right: 8px; padding: 0; width: auto }

	#footer #subscribe a img { margin-right: 10px }

	#footer #recent ul { font-size: 1.4em /*14px*/ }
			#footer #recent li { margin-left: 4px; padding-left: 0px }
			#footer #recent li a { color: #d1d1d1; text-decoration: none }
			
	#footer #testimonials dl { font-size: 1.2em /*12px*/; line-height: 1.333em /*16px*/ }
		#footer #testimonials dt { font-style: italic; margin-bottom: 0.667em /*8px*/ }
		#footer #testimonials dd { font-family: 'proxima-nova-1','proxima-nova-2', Arial, Helvetica, sans-serif; margin-bottom: 0.667em /*8px*/ }
			#footer #testimonials dd strong { color: #fff }
		#footer #testimonials a { 
			font-family: 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2', Arial, Helvetica, sans-serif;
			font-size: 1.5em /*18px*/; color: #e2862c;
			background: url('images/arrow-orange-on-black-6x8.png') 100% 50% no-repeat; padding-right: 14px }

	#footer #copyright { font-family: 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2', Arial, Helvetica, sans-serif; font-size: 1.6em /*16px*/ }


/* FB Like Button ***************************************************************************/

.fblike_button, .fblike_button iframe { width: 100% !important; max-width: 450px !important }



/* Wordpress clean up... ***************************************************************************/

div.wp-caption { width: 100% !important; max-width: 100% !important }
div.wp-caption { height: auto !important }








/*******************************************************************/
/*                                                                 */
/*                          Retina Images                          */
/*                                                                 */
/*                                                                 */
/*******************************************************************/


/* 2x size images for iPhone 4 retina displays *******************************/

@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {

	
	/* Background Images ******************************************/
	
	#header, #tagline, .writing #subhead, .single h1
						  { background-image: url('images/2x/double-border@2x.png');
							background-size: 1px 3px }
	
	p#name a {				background-image: url('images/2x/dc-logo-on-white@2x.png');
							background-size: 25px 24px }

	#message {				background-image: url('images/2x/tagline-200@2x.png');
							background-size: 300px 195px;
							height: 195px }

	.home h1 { background-image: url('images/2x/blue-circle-15x15@2x.png'), url('images/2x/blue-circle-15x15@2x.png');
							background-size: 17px 16px }

	.home a.view, .writing .entry a.continue { background-image: url('images/2x/arrow-orange-5x7@2x.png');
							background-size: 5px 7px }

	#page-nav .previouspostslink { 		background-image: url('images/2x/arrow-grey-left-6x7@2x.png');
							background-size: 6px 7px }

	#page-nav .nextpostslink, .design #subhead #nav a { background-image: url('iamges/2x/arrow-grey-6x7@2x.png');
							background-size: 6px 7px }
	
	#footer #testimonials a { background-image: url('images/2x/arrow-orange-on-black-6x8@2x.png');
							background-size: 7px 9px }


}