/*
Theme Name: 	THE NATURAL COOK by IVYOWL
Description: 	Tom Hunt 2014 built on Starkers/Bootstrap
Version: 		0.1
Author URI: 	http://ivyowl.co.uk
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }
#content img { max-width: 100%; height: auto;}
.wp-caption { max-width: 100% !important;}
/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

----

6px	0.429em	42.9%	5pt
7px	0.500em	50.0%	5pt
8px	0.571em	57.1%	6pt
9px	0.643em	64.3%	7pt
10px	0.714em	71.4%	8pt
11px	0.786em	78.6%	8pt
12px	0.857em	85.7%	9pt
13px	0.929em	92.9%	10pt
14px	1.000em	100.0%	11pt
15px	1.071em	107.1%	11pt
16px	1.143em	114.3%	12pt
17px	1.214em	121.4%	13pt
18px	1.286em	128.6%	14pt
19px	1.357em	135.7%	14pt
20px	1.429em	142.9%	15pt
21px	1.500em	150.0%	16pt
22px	1.571em	157.1%	17pt
23px	1.643em	164.3%	17pt
24px	1.714em	171.4%	18pt

*/

body,
input,
textarea 			{
	color: #000;
	font-size: 0.875em ;
	font-family: 'Arvo', serif;
	font-weight: 400;
}

a, a:hover { color: #cc3366;}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight: 700;}

h2 { font-weight: 700; font-size: 1.714em; line-height: 1.429em; padding-bottom: 0.5em;}
h2.cat { font-weight: 400; font-size: 1.125em; line-height: 1.429em; padding-bottom: 2em;}
h2 a { color: #000;}
h3 { font-weight: 400; font-size: 1.125em;}

blockquote { 
	font-style: italic; 
	font-size: 0.929em;
	line-height: 1.714em;
}

blockquote p span {
	font-size: 1.714em;
	line-height: 0.714em;
}
	
blockquote cite {
	font-weight: 700;
	line-height: 3.5em;
}

time { margin-top: -0.5em; color: #999; font-size: 0.929em; padding-bottom: 1em; display: block;}

pre, code {
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
white-space: -khtml-pre-wrap; /* Safari, not working --  maybe on Konqueror khtml */
width: 99%;
}

article p, #single-page p { padding-bottom: 1.2em; }

/* ---------------------------------------------------------------------------------------------------------- 
FORMS -------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

#footer #searchsubmit {
		font-size: 0.8em;
        padding: 4px;
        border: solid 1px #000;
        background-color: #666;
		border-radius:5px;
}
#footer #searchsubmit:hover {
        background-color: #999;
}
#footer #s {
		font-size: 0.8em;
        padding: 3px;
        border: solid 1px #666;
        background-color: #000;
		width: 65%;
		margin-right: 10px;
}
#blog-single input[type=submit], #blog-list input[type=submit] { padding: background-color: #444; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:13px; font-weight: bold; height: 28px; line-height: 28px; margin: 0 5px 10px 0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
#blog-single input[type=submit]:hover, #blog-list input[type=submit]:hover {background-color:#222;}
.form-allowed-tags {display: none;}
/* ---------------------------------------------------------------------------------------------------------- 
NAV / LOGO --------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
#header { margin-bottom: 5.5em;}

#primary-container { background: url(img/broad-beans.jpg) top right no-repeat;}

#logo { margin-top: 81px;}

#nav { margin-top: 140px;}
#nav ul{ float: right; font-size: 0.929em;}
#nav ul li { margin-left: 1.3em; background-color: transparent;}
#nav ul > li:first-child { margin-left: 0; }
#nav ul li > ul li:first-child { margin-left: 1.3em; }
#nav ul li:hover { background-color: transparent;}
#nav ul li a { padding: 0; font-weight:bold; color:#000;}
#nav ul li a:hover { color:#50a000; background-color: transparent;}

#nav ul .dropdown-menu { border: 0; border-radius: 0; }
#nav ul .dropdown-menu a { padding: .5em 0;}

/* ---------------------------------------------------------------------------------------------------------- 
SIDEBAR -----------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

#sidebar .blog-archive { margin-bottom: 1.174em; }
#sidebar .blog-archive li a{ font-size: 1.286em; font-weight:700; line-height: 2em; color: #000;}
#sidebar .blog-archive li.seasons a{ font-weight:400; line-height:1em; color: #336600;}
#sidebar .blog-archive li.last a{ line-height: 2.8em; margin-bottom: 2em;}

.social-trio a img {
		-webkit-transition:all 0.2s ease-in-out;
	    -moz-transition:all 0.2s ease-in-out;
	    -o-transition:all 0.2s ease-in-out;
	    transition:all 0.2s ease-in-out;
		padding:0 8px 0 0;
}
.social-trio a img {
    opacity: 0.7;
}
.social-trio a img:hover {
    opacity: 1;
}
.ofm-winner p { font-weight: 700; padding-top: 1em;}

.subscribe-side, .buy-book-side, .hugh-quote, .fb-like-box, .ofm-winner, .social-trio  { margin-bottom: 2.2em;}

/* ---------------------------------------------------------------------------------------------------------- 
FOOTER ------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
#causes { margin-top: 8em; margin-bottom: 4em;}
#causes h3 { padding: 4em 0 2em;}
#causes a img {
		-webkit-transition:all 0.2s ease-in-out;
	    -moz-transition:all 0.2s ease-in-out;
	    -o-transition:all 0.2s ease-in-out;
	    transition:all 0.2s ease-in-out;
}
#causes a img {
    opacity: 0.9;
}
#causes a img:hover {
    opacity: 1;
}
#causes a img {margin-right: 0.6em;}
#causes a:last-of-type img {margin-right: 0em;}
#causes a {text-decoration: none;}
#footer { 
	background-color: #000;
	color: #666;
	padding: 4em 0 6em;
	margin-top: 2em;
}
#footer h4 { font-weight: 400; padding-bottom: 0.9em;}
#footer a { color:#336600; background-color: transparent;}
#footer a:hover { color:#336600; background-color: transparent;}
#footer .social-trio { margin-bottom: 1em;}
.legal { font-size: 0.857em; color: #222; margin-top: 8em;}
#footer #s { color: #999; }

/* ---------------------------------------------------------------------------------------------------------- 
BLOGS LIST / SINGLE / PAGE ----------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

#blog-list img, #blog-single img, #single-page img{
	max-width: 100%;
	height: auto;
}
#blog-list p, #blog-single p, #single-page p { font-size: 1em; line-height: 1.571em; text-align: justify;}
#blog-list h3, #blog-single h3, #single-page h3 { padding-bottom: 1em; line-height: 1.571em; }
#blog-list a.continue { color: #000; font-weight:bold; text-align: right; display: block; font-size: 1.28em;}
#blog-list li { padding-bottom: 6em;}
.archive #blog-list li { padding-bottom: 0em;}
.archive #blog-list article time { float: left; margin: 2px 1em 0 0; }
.attachment-post-thumbnail { width: 100%; height: auto;}
.excerpt, .excerpt:hover { color: #000;}

#blog-single .share-buttons.in-page img {
	padding: 2em 1em 1em 0;
	border: 0;
	box-shadow: 0;
	display: inline;
}
#blog-single .share-buttons a img{
		-webkit-transition:all 0.3s ease-in-out;
	    -moz-transition:all 0.3s ease-in-out;
	    -o-transition:all 0.3s ease-in-out;
	    transition:all 0.3s ease-in-out;
}
#blog-single .share-buttons a img{
	opacity: 0.7;
}
#blog-single .share-buttons a:hover img{
    opacity: 1;
}
.share-button-toggle a{
    font-size: 10px;
}


.alignleft, img.alignleft {
	margin-right: 1.5em;
	display: inline;
	float: left;
	}
.alignright, img.alignright {
	margin-left: 1.5em;
	display: inline;
	float: right;
	}
.aligncenter, img.aligncenter {
	margin-right: auto;
	margin-left: auto;
	display: block;
	clear: both;
	}
	
	.archive #blog-list h3 {
		padding-bottom: 0;
	}
	.archive .attachment-normal {
		width: 100px;
		height: auto;
		float: left;
		margin: 5px 15px 20px 0;
	}
/* ---------------------------------------------------------------------------------------------------------- 
POST IMAGE AND SHARE BUTTON ----------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

.post-thumnail-hold { margin: 1em 0; cursor: pointer;}
.share-buttons-hold, .share-button-toggle {
	position: absolute;
	top: 0;
	bottom:0;
	left: 0;
	right: 0;
	background: rgb(00, 00, 00);  
	background: rgba(00, 00, 00, 0.6); 
	text-align: center;
}
.share-button-toggle { background-color: transparent;}
.share-button-toggle a.share-link{ 
	position: absolute;
	color: #fff;
	top: 0;
	right: 0;
	background: rgb(00, 00, 00);  
	background: rgba(00, 00, 00, 0.8); 
	text-align: center;
	padding: .5em 1em;
	cursor: pointer;
	z-index:2;
}
.share-button-toggle a.blog-image-link{ 
	position: absolute;
	color: #fff;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	text-indent: -9999em;
}
.share-buttons-hold .share-buttons img {
	padding: 10px;
	border: 0;
	box-shadow: 0;
	display: inline;
}
.share-buttons-hold {
	padding-top: 30%;
    display: none;
}
.share-button-toggle {
		-webkit-transition:all 0.3s ease-in-out;
	    -moz-transition:all 0.3s ease-in-out;
	    -o-transition:all 0.3s ease-in-out;
	    transition:all 0.3s ease-in-out;
}
.share-button-toggle {
    opacity: 1;
}
.blog-image-link { position: relative; display: block;}

.gallery .gallery-item { margin: 0 !important;}
.gallery .gallery-item img { border-color: #fff !important;}

.arve-thumb-wrapper.alignleft { margin: 0 0.5em 0.5em 0 !important; }
.video #single-page h3 { }


/* ---------------------------------------------------------------------------------------------------------- 
BOOK BUY ----------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

#buy-book-subscribe img { float: right; padding-left: 1em; padding-top: 4px; display: inline;}
#buy-book-subscribe.left img { float: left; padding-right: 1em; padding-top: 4px; display: inline;}
#buy-book-subscribe h3 { font-weight: 700; font-size: 1.714em; line-height: 1.429em; padding-bottom: 0;}
#buy-book-subscribe p { font-size: 1.175em; padding-bottom: 1.6em;}
#buy-book-subscribe span { font-size: 1.714em; padding-bottom: .2em; display: inline-block;}
#buy-book-subscribe #mc_embed_signup { display: inline-block;}
#buy-book-subscribe #mc_embed_signup input.email { width: 60%; margin-top: 1em;}
#blog-single #buy-book-subscribe { 
	margin-top: 2em;
	padding-top: 2em; 
	border-top: solid #eee 1px; 
}

/* ---------------------------------------------------------------------------------------------------------- 
PAGINATION --------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.pagination { padding-bottom: 6em;}
.pagination-lg>li>a, .pagination-lg>li>span {font-size: 0.8em; color: #999;}
.pagination>.active>a, .pagination>.active>a:hover {background-color: #666; border-color: #666;}
.pagination>li>a:hover {color: #999;}

/* ---------------------------------------------------------------------------------------------------------- 
404 ---------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

h2.brokepage { padding-bottom: 1em; }
h3.brokepage { color: #000; padding-bottom: 2em;}
.brokepage-list h3, .brokepage-search h3 { padding-bottom: 0.8em; font-size: 1.352em;}
.brokepage-list, .brokepage-search { padding-bottom: 2em;}
.brokepage-list li { padding-bottom: 0.6em;}
.brokepage-list li a { font-size: 1.143em;}


/* ---------------------------------------------------------------------------------------------------------- 
CHIMP -------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* MailChimp Form Embed Code - Slim - 08/17/2011 */
#mc_embed_signup form {display:block; position:relative;  padding:0;}
#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
#mc_embed_signup input {border:1px solid #666; -webkit-appearance:none;}
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup input:focus {border-color:#000;}
#mc_embed_signup .button {clear:both; background-color: #444; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:13px; font-weight: bold; height: 28px; line-height: 28px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
#sidebar-signup #mc_embed_signup .button {margin: 10px 0;}
#mc_embed_signup .button:hover {background-color:#222;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}     

#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup input.email {display:inline; padding:6px 0; margin:1.8em 10px 0 0; text-indent:5px; width:100%;}
#mc_embed_signup input.button {display:inline; margin:1em 0 10px 0; width:110px;}
#sidebar-signup #mc_embed_signup input.email {width:220px;}

#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}

/* ---------------------------------------------------------------------------------------------------------- 
Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.container {
	max-width: 970px;
}

/* 400 and up */
@media screen and (min-width:400px) {

					 /* Place your styles here for all widths greater than 400px */ 
					
					#footer .ivyowl { text-align: right; }
					#footer p { float: left; width: 50%; }

}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {

					 /* Place your styles here for all 'Retina' screens */ 

}
@media (max-width:768px){
	.container {
        width: 320px
    }
	#buy-book-subscribe.mob-book img { float:right; width: 36%; margin: 0; padding: 5px  0 0 13px;}
	#buy-book-subscribe.mob-book p { font-size: 1.071em;}
	#buy-book-subscribe.mob-book span { font-size: 1.4em;}
	#buy-book-subscribe.mob-book .button { float: right;}
	#buy-book-subscribe.mob-book input.email { width: 50% !important;}
	.archive .attachment-normal {
		width: 50px;
	}
	.archive #blog-list h3 {
		padding-bottom: 20px;
	}
}
@media (max-width:992px){

	#logo { margin-top: 1.5em;}
	#logo img{ max-width: 100%; height: auto;}
	#header { margin-bottom: 1.5em;}
	#footer h4 { clear: both;}
	#footer p { float: none;}
	#footer .col-md-3 { margin-bottom: 2em; clear: both;}
	#footer .ivyowl { margin: 1em 0 0; text-align: left; clear: both;}
	#footer .legal { margin-top: 1em;}
	#primary-container { background: transparent;}
	body { background: url(img/broad-beans.jpg) top center no-repeat;}
	
	
}
@media (min-width:768px){
	.container {
        width: 620px
    }
}

@media (min-width:992px){
	.container {
	     width: 970px
	}   
	.share-button-toggle a{
	    font-size: 14px;
	}
	.share-button-toggle {
	    opacity: 0;
	}
	.share-button-toggle:hover {
	    opacity: 1;
	}
}

@media (max-width: 1200px) {
	
	#nav-mobile { 
		margin-top: 1em;
	}
	#nav-mobile li a, #nav-mobile .navbar-brand{
		color:#000;
	}
	#nav-mobile .navbar-brand{
			font-size: 14px !important;
		}
	
	.navbar-default { 
		background-color: #fff; 
		background-color: rgba(255,255,255,0.5);}
	    .navbar-header {
	        float: none;
	    }
	    .navbar-left,.navbar-right {
	        float: none !important;
	    }
	    .navbar-toggle {
	        display: block;
	    }
	    .navbar-collapse {
	        border-top: 1px solid transparent;
	        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	    }
	    .navbar-fixed-top {
			top: 0;
			border-width: 0 0 1px;
		}
	    .navbar-collapse.collapse {
	        display: none!important;
	    }
	    .navbar-nav {
	        float: none!important;
			margin-top: 7.5px;
		}
		.navbar-nav>li {
	        float: none;
	    }
	    .navbar-nav>li>a {
	        padding-top: 10px;
	        padding-bottom: 10px;
	    }
	    .collapse.in{
	  		display:block !important;
		}
	}