/*  
Theme Name: CookandKaye2015
Theme URI: http://www.cookandkaye.co.uk/
Description: Theme designed by Barry Kaye, CookandKaye.
Version: 2.2
Author: Barry Kaye
Author URI: http://www.CookandKaye.co.uk/

	This theme was designed and built by Barry Kaye,
	whose blog you are looking at (http://www.cookandkaye.com/artblog/)

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

/* Begin Typography & Colors */

body {
	font-family: 'Open Sans', arial, sans-serif; text-align: left;
	font-size: smaller;
	padding: 0px;
	margin: 0px;
	background: #ccc url(./pics/header_bg01.png); color: black; 
}

#page {
	display: block;
	max-width: 800px;
	margin: 20px auto;
	padding: 0;
}

/* =============== breadcrumbs =================== */
#breadcrumbs {
	display: block;
	font-size: 80%; 
	background: #efefef;
	padding: 4px 1px;
}
#breadcrumbs a{
	letter-spacing: 0.2em;
}
#breadcrumbs p{
	padding: 0;
	margin: 0;
	letter-spacing: 0.2em;
}

/* =============== banner flash =================== */
#headers {
	display: block;
	max-width: 800px;
}
#sitetitle{
	font-size: 50px;
	font-weight: 300;
}
#sitetitle a{
	color: #000;
	text-decoration: none;
}
#sitedescription{
	font-size: 20px;
	font-weight: 400;
	color: #666;
}
#sitetitle a:hover{
	text-decoration: none;
	-webkit-animation-name: navFocus; 
	-webkit-animation-duration: 1s;
	animation-name: navFocus; 
	animation-duration: 2s;
}
@-webkit-keyframes navFocus{
	from{ color: #000;}
	25%{ color: #f00;}
	50%{ color: #0f0;}
	75%{ color: #00f;}
	to {color: #000;}
}
@keyframes navFocus{
	from{ color: #000;}
	25%{ color: #f00;}
	50%{ color: #0f0;}
	75%{ color: #00f;}
	to {color: #000;}
}

/* =============== Banner and Menu =============== */
#navigation {
	font-size: 110%;
	display: block;
	width: 24%;
	height: auto;
	float: right;
	margin:0;
}
a.menutoggle{
	text-align: center;
	font-size: 25px;
	text-decoration: none;
}
ul.navbar{
	width: 100%;
	margin-bottom: 20px;
	padding: 0;
	list-style-type: none;
}
ul.sub-menu{
	list-style-type: none;
	margin: 0;
	width: 90%;
	padding-left: 10%;
}
.navbar li{
	margin: 0;
	padding: 0;	
	text-align: left;
	font-weight: normal;
}
li.sub-menu {
	
}
.navbar a {
	display: block;
	overflow: hidden;
	border-bottom:  #666 1px solid;
	color: #666; background-color: transparent; text-decoration: none;
	padding: 5px 0;
	margin: 3px 0;
}
.navbar a:hover {
	color: #000;
	border-bottom:  #000 1px solid;
}
li.current-menu-item a{
	color: #000;
	border-bottom:  #000 1px solid;
}

/* =============== Content =============== */
#content {
	display: block;
	width: 71%; 
	padding: 2%;
	clear: left;
	margin: 0;
	background: #fff; color: black; 
}
#content p, li {
	text-align: justify;
}
.entry a{
	color: #00f;
	text-decoration: underline;
}
.entry a:hover{
	color: #0f3;
	text-decoration: underline;
}
a.action{
	cursor: crosshair;
}

/* =============== footers =============== */
#footer {
	clear: both;
	font-size: 80%; 
	background: transparent; color: #aaaaaa; 
	font-family: trebuchet, sans-serif; text-align: left;
	padding: 4px 1px;
}
#footer a{
	letter-spacing: 0.2em;
}
#footer p{
	letter-spacing: 0.2em;
	padding: 2px 0;
	margin: 0;
}
.alt {
	background-color: #f8f8f8;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
small {
	font-size: 80%;
}

/*headings text*/

h1, h2, h3, h4, h5, h6 {
	color: #666;
	margin: 0;
	padding: 0.2em 0;
	font-weight: 300;
}

h1 {
	font-size: 250%;
}
h2 {
	font-size: 200%;
}
h3 {
	font-size: 150%;
}
h4 {
	font-size: 120%;
	font-weight: 400;
}
h5 {
	text-transform: uppercase;
	font-size: 100%;
	font-weight: 400;
}
h6 {
	font-size: 80%;
}
.subheading {
	font-size: smaller;
	font-weight: lighter;
}
code {
	font-family: 'Courier New', Courier, Fixed;
}

acronym, abbr, span.caps{
	letter-spacing: .07em;
	text-decoration: none;
}
.post {
	clear: left;
	margin: 0 0 40px;
	text-align: justify;
}
.post-title a{
	text-decoration: none;
	color: #66f;
}
p.post-meta {
	font-size: 75%;
	color: #666;
	margin: 0 0 10px 0;
	padding: 0;
	border-bottom: 1px dotted #ccc;
}


.widecolumn .post {
	margin: 0;
	}

.narrowcolumn .postmetadata {
	padding-top: 5px;
	}

.widecolumn .postmetadata {
	margin: 30px 0;
	}


.widecolumn .attachment {
	text-align: center;
	margin: 5px 0px;
}

.postmetadata {
	clear: left;
}

/* Begin Images */
img, svg {
	padding: 0;
	max-width: 100%;
	height: auto !important;
}

object.center, img.center, object.aligncenter, img.aligncenter, svg.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

object.right, img.right,  img.alignright, object.alignright {
	padding: 4px;
	margin: 0 0 2px 10px;
	/*display: inline;*/
}

object.left, img.left , img.alignleft, object.alignleft {
	padding: 4px;
	margin: 0 10px 2px 0;
	/*display: inline;*/
}

.right, .alignright {
	float: right;
	max-width: 50%;
}

.left, .alignleft {
	float: left;
	max-width: 50%;
}
	
.aligncenter {
	margin: 0 auto;
	max-width: 100%;
}	
/* End Images */



/* Begin Lists */


.postmetadata ul, .postmetadata li {
	display: inline;
	list-style-type: none;
	list-style-image: none;
	}

/* End Entry Lists */

/* Begin Form Elements */

#searchform {
	margin: 0px auto;
	padding: 5px 3px; 
	text-align: center;
}
#searchform #s {
	width: 90%;
	margin: 1% 5%;
}
.entry form { /* This is mainly for password protected posts, makes them look better. */
	text-align:center;
}
/* End Form Elements */

/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
	cursor: help;
}
blockquote {
	font-size: 150%;
	font-weight: 300;
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #fcc;
}
a img {
	border: none;
}
.navigation {
	display: block;
	width:100%;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	background: #efefef;
	text-align: center;
	margin: 40px 0 0 0;
	line-height: 2.2em;
	height: 2.2em;
	overflow: hidden;
}
.navleft {
	display: block;
	float: left;
	max-width: 50%;
	overflow: hidden;
	text-align: left;
}
.navright {
	display: block;
	float: right;
	max-width: 50%;
	overflow: hidden;
	text-align: right;
}
.navleft a, .navright a {
	text-decoration: none;
	padding: 0 1em;
}

.postmetadata {
	color: #999; background: transparent;
	border-bottom: 1px #999 dashed;
	padding-bottom: 10px;
}
/* End Various Tags & Classes*/

.arrow {
	background: #fff url(./pics/rtarrow.png) no-repeat 4px 4px;
	text-align: left;
	padding-left: 24px;
}

.ref{
	font-size: 90%;
	color: #999;
	background: transparent;
}

/* ============================= variant styles for devices and screen widths ============================= */

@media screen and (max-width: 800px) {
	#page{
		margin: 0;
	}
	h2#sitetitle, h1#sitedescription{
		margin: 0 2%;
	}
}

@media screen and (min-width: 601px) {
	/* ensures that menus and menu toggles are properly displayed if the screen is re-sized up */
	a.menutoggle{
		display: none !important;
	}
	.navbar{
		display: block !important;
	}
}
@media screen and (max-width: 600px) {
	h2#sitetitle{
		font-size: 40px;
	}
	h1#sitedescription{
		font-size: 15px;
	}
	#navigation{
		width: 96%;
		float: none;
		margin: 0 2%;
	}
	a.menutoggle{
		display: block;
	}
	#hidemenu{
		display: none;
	}
	ul.navbar{
		display: none;
	}
	ul.navbar a{
		line-height: 2em;
	}
	#content{
		width: 96%;
		float: none;
	}
}