/*
Theme Name: Njideka
Theme URI: http://jamesmuspratt.com
Description: HTML5 and CSS by James Muspratt. April 2012.
Version: 1.0
*/

/* ------------------------
 Reset */
	body, body * 	{margin:0; padding:0; text-indent:0; text-decoration: none; outline:none; font-weight:normal; font-style: normal; font-stretch: normal;}
	body img		{border:0;}

/* ------------------------
	Useful classes */
	.clear 		{clear:both;}
	.cf:after	{content: "."; display: block; height: 0; clear: both; visibility: hidden;}
	.left		{float:left;}
	.right		{float:right;}
	.hide		{display:none;}


/* ---------------  MOBILE FIRST! --------------- */


/* ------------------------
	Main Layout Styles */

body  {
	font-family: "Jigsaw Regular", helvetica, arial, sans-serif;
	font-size:14px;
	line-height:21px; 
	color:#494847; /*dark gray*/
	background-color:#e8e7e1;
	background-color:#f4f3ef;
	}
	
header, footer {width:100%;}

footer {padding-top:100px;}
	
header #header-content, footer #footer-content {
	max-width:1050px;
	margin:0 auto;
	padding:20px 5% 0 5%;
	}

	

	#main			{background-color:#f4f3ef; /*light beige*/ position:relative;}
	#main-content	{max-width: 1050px; margin:0px auto 20px auto; padding:20px 5% 50px 5%;}
	
/* ------------------------
	Home */
	
	.thumbs {list-style:none; width:100%;}
	.thumbs li {float:left; width:220px; margin-right:10px; }
	.thumbs a {border:0;}

/* ------------------------
	Type Styles */

	a 			{color:#494847; /*dark gray*/ border-bottom: 1px solid #d5d4d0; }	
	h1 			{margin:0 0 10px 0; font-size:24px;}
	h2 			{font-size:16px; margin:20px 0 5px 0; color:#3c697c; }
	h3 			{font-size:14px; color:#747370; color:#494847; margin:10px 0 10px 0; font-family: "Jigsaw Medium";}
	h4 			{font-size:14px; margin:0; font-family: "Jigsaw Medium";}
	
/* ------------------------
	Header and Nav */
	
	header 				{background-color:#e8e7e1; top:0;}
	header a 			{color:#747370; border:0;}
	header h1 a 		{font: 22px/24px "Jigsaw Regular"; }
	header nav			{width:100%; padding-bottom:10px;}
	header nav ul 		{list-style:none; margin-left:-8px;}
	header nav li 		{display:inline-block; margin-right:18px; text-align:center;} 
	header nav li:last-child {margin-right:0;}	 
	header nav a		{display:block; padding:8px 8px 4px 8px; font-size:16px; line-height:20px; font-family: "Jigsaw Medium";}
	header nav li.current_page_item a {background-color:#f4f3ef;}


/* ------------------------
	Article (usually the same Wordpress post or page) */

	article	{ margin-bottom:15px; padding:15px 0; clear:both;}
	article.post {border-top:1px solid #d5d4d0;}
	article p, article ul, article ol {margin-bottom:10px;}
	article em 		{font-style:normal; font-family: "Jigsaw Regular Italic";}
	article strong 	{font-style:normal; font-family: "Jigsaw Bold";}
	article ul 			{list-style:circle; margin-left:10px;}
	article ol			{margin-left:10px;}
	article h1 a 		{font-size:18px; line-height:25px; font-family:"Jigsaw Regular"; border:0;}
	article h2 			{font-size:14px; line-height:18px; font-family:"Jigsaw Medium";}
	article blockquote {margin-left:3%; margin-right:3%; color:#555;}
	.tags {margin-top:10px;}
	article.work {padding-top:0;}

/* ------------------------
	Responsive Images */

	#main img, .details img, img.attachment-work-detail {max-width: 100% !important; height: auto !important;}
	img.size-full 			{max-width: 100% !important; width: auto;}

/* ------------------------
	Details */
	#details 		{background:#e1e0da; padding:0 5% 50px 5%;  margin-bottom:0px; overflow:hidden;}
	.detail-content	{max-width:1050px; margin:0 auto; padding:0;}
	.detail-nav p	{margin:10px 0;}

/* ------------------------
	Post Lists (posts, pages) */
	 #search-results #main h3 {margin-top:40px; margin-bottom:0;}

/* ------------------------
	Prev-Next (posts, pages) */
	.prev-next 			{list-style:none; float:left; margin-bottom:20px; padding-bottom:5px; width:100%;}
	.prev-next a		{border:0; display:block;  width:21px; height:25px; display:block; background: url(images/prev-next.png) no-repeat 0 0; text-indent:-9999px;}
	.prev-next .prev	{float:left; }
	.prev-next .next	{float:right;}	
	.prev-next .prev a	{padding-right:3px; }
	.prev-next .next a 	{float:right; background-position:-122px 0; margin-right:5px;}

	.prev-next.news a 		{text-indent:0; width:60px; padding-left:25px; padding-top:5px;}
	.prev-next.news .next a {padding-left:0; padding-right:40px; background-position:-45px 0; text-align:right;}
	
/* ------------------------
	Work caption sidebars */
	
	.work-info {color:#3c697c;}
	.work-info h1, .work-info p, .work-info ul {font-size:14px; line-height:18px; margin:0; padding:0;}
	.work-info h1 	{font-family: "Jigsaw Medium", arial; margin-bottom:0;}
	.work-info h2	{font-family: "Jigsaw Regular", arial; margin:0 0 9px 0;}
	.work-info p.view-details {margin:20px 0 10px 0; }
/*	.work-info p.view-details a {background:transparent url(images/arrow-down.png) no-repeat 0 0; padding-left:23px; padding-top:2px; border:0;}*/
	
	.work-meta {list-style:none; margin:10px 0;}
	
	.work-info-content {margin-bottom:10px; }
	
/* ------------------------
	Post Lists (posts, pages) */
	ul.post-list 		{margin-top:20px; list-style:none;  width:70%; }
	ul.post-list li 	{margin:0; padding:15px 0; clear:both;}
	ul.post-list li span.date 	{width:100px; display:inline-block;}
 	ul.post-list li a {display:inline-block; margin-left:30px; text-align:left;}


/* ------------------------
	News */
	
	a.thumb-link {border:0; float:right; margin-left: 20px;}
	.view-archive {clear:both; padding-top:20px;}

/* ------------------------
	Pages */
	
	#about p {font-family:"Jigsaw Light", arial; font-size:20px; line-height:30px; margin-bottom:10px;}
	#side-image {display:none;}
	#side-image a {border:0;padding:0; display:block;}

/*	cv */
	.page#cv article h3 {float:left; margin-top:0; width:60px; clear:both; margin-bottom:20px; }
	.page#cv article ul {margin-left:60px;  list-style:none; }
	.page#cv article ul li {display:inline-block; margin-bottom:10px;}
	
	
/* ------------------------
	Footer */

	footer {margin-top:100px; padding:10px 0;}
	footer strong {font-family: "Jigsaw Bold", arial;}



	/*------------ WIDER: Add the following rules for 620px wide and up   ------------*/
	@media screen and (min-width: 620px) {
	
		/* for js*/
	    body:after {
	           content: 'wider';
	           display: none;
	       }
	
		/*	wider: header and nav*/
		header					{position:fixed; height:80px; z-index:10;}
		header #header-content	{padding-top:40px; }	
		header h1				{float:left; margin-top:3px; margin-right:30px; width:250px;}
		header nav 				{float:left; width:50%;}
	
		/*	wider: main */
		#main		{position:relative; z-index:9; padding-top:80px; overflow:hidden; }
		
		/*	wider: content */
		#news article.post, #single.news article.post, .page-content {width:65%; float:left; /*max-width:800px;*/}

		/*	wider: .post */
		.post-meta			{width:22%; float:left;}
		.work-info 			{width:17%; margin-top:40px; position:fixed; max-width:245px; z-index:10;}
		.post-content		{width:74%; float:right;}
		
		/*	wider: prev next */
		.prev-next 				{width:55px; border:0; }
		.prev-next.news			{width:200px;}
		
		#single.work .prev-next {position:fixed;}
		
				 
		/*	wider: details */
		#details		{position:relative; z-index:-1;}
/*		.detail-nav 	{position:fixed; bottom:50px; margin-top:150px; z-index:10;}*/
		.detail-nav 	{position:relative; z-index:999;}
		.detail-nav p	{margin-top:20px;}
		.detail-images 	{float:right; width:74%; padding-bottom:50px; }
		
	/*	wider: side image*/
		.page #content	{min-height:780px;} 
		#side-image 	{position:fixed; display:block; right:0px; top:80px;  z-index:11; overflow:hidden;}
		}
	
	/*------------ WIDEST: Add the following rules for 900px wide and up   ------------*/
	@media screen and (min-width: 900px) {
		
		/* for js*/
	    body:after {
	           content: 'widest';
	           display: none;
	       }
	
		/*	widest: content */
		#news article.post, #single.news article.post, .page-content {width:74%;}

		/*	widest: cv */
		#cv .left 	{width:45%;}
		#cv .right 	{width:45%;}

	
	}
	
/*	retina displays */
	@media screen and (-webkit-min-device-pixel-ratio: 2){
		.prev-next a		{background-image: url(images/prev-next-2x.png); background-size:150px auto;}
		}
	
	/* fix iOS and Windows Mobile font-size changes */
	@media screen and (max-device-width: 480px), screen and (max-width: 600px) {
		html {
			-ms-text-size-adjust: none;
			-webkit-text-size-adjust: none;
		}