/*
Theme Name: 	Rob Rogers
Theme URI: 		
Description: 	based on Starkers 4.0!
Version: 		1.0
Author: 		Andrew Twigg
Author URI: 	http://andrewtwigg.com
Tags: 			custom
*/

/*
===========================
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; }

/* ---------------------------------------------------------------------------------------------------------- 
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)

*/

body,
input,
textarea 			{ /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }


/* WORDPRESS CORE ALIGNMENT */

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
} 

/* END WORDPRESS CORE ALIGNMENT */

/* ---------------------------------------------------------------------------------------------------------- 
CUSTOM CSS ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */


body {
	background: #848484;
	font-family: 'Lato', Arial, sans-serif;
	font-weight: 400;
}

p {
	margin: 0 0 1em 0;
}

a {
	color: #85aabf;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/*  jquery archive plugin style override (hide arrow symbol) */

li.jaw_years {
	display: inline-block;
	padding-right: 1em;
	vertical-align: top;
}

li.jaw_years.expanded a.jaw_years {
	font-weight: 900;
}

a span.jaw_symbol {
	display: none;
}

li.jaw_months {
	padding-left: 1em;
}


/*  END jquery archive override */

section#wrapper {
	max-width: 93.4;
	padding: 0 3.3%;
	max-width: 960px;
	margin: 0 auto;
	background: #ececec;
	-moz-box-shadow:    0px 0px 15px 0px #000;
  	-webkit-box-shadow: 0px 0px 15px 0px #000;
  	box-shadow:         0px 0px 15px 0px #000;	
	border-bottom: 1px solid #000;
}

header {
	width: 100%;
	height: auto;	
	position: relative;
}

header img.headerbg {
	width: 100%;
	height: auto;
}


header #contact-widget {
	position: absolute;
	top: 20px;
	right: 25px;
	font-size: 8pt;
	text-transform: uppercase;
	letter-spacing: 3px;
	text-align: right;
}

header #contact-widget a {
	color: #fff;
	padding: 0 0 0 10px;
}

header #contact-widget img {
	width: 21px;
	height: auto;
}

header #contact-widget div div iframe {
	width: 170px;
}

header div.menu-main-container {
	text-transform: uppercase;
	font-size: 12pt;
	line-height: 12pt;
	position: absolute;
	bottom: 9px;
	right: 19px;
}

header div.menu-main-container ul li {
	display: inline-block;
	margin: 0 0 0 26px;
	padding: 6px;
}


.wp-post-image, .dropshadow {
	-moz-box-shadow:    0px 0px 15px 0px #666;
  	-webkit-box-shadow: 0px 0px 15px 0px #666;
  	box-shadow:         0px 0px 15px 0px #666;	
}

.clear {
	clear: both;
}

h2, h3 {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1.1em;
	line-height: 1.4em;
	font-weight: 300;
}

h4 {
	font-size: 0.8;
	line-height: 1.2em;
	font-weight: 400;
}

strong {
	font-weight: 700;
}


footer {
	font-size: 0.6em;
	padding: 0 0 50px 0;
}



/* PAGE AND POST CONTENT */

.underline {
	padding-bottom: 1em;
	border-bottom: 1px solid #b6b6b6;
	margin-bottom: 2em;
}


#content {
	width: 100%;
	padding-top: 30px;
}

#content.home section.main .cartoon {
	width: 74%;
	height: auto;
	float: left;
}

#content.home section.main .cartoon .wp-post-image{
	width: 100%;
	height: auto;
	margin-bottom: 1em;
}

#content.home section.main aside {
	width: 23%;
	margin: 0 0 3% 0;
	float: right;
	border-top: 1px solid #000;	
}


#content.home section.main h2 {
	display: inline-block;
	margin-right: 0.6em;
}

#content.home section.main h2 a {
	color: #000;
	font-size: 90%;
}

#content.home section.main h4 {
	font-size: .8em;
	padding: 0.6em 0 0.6em 0;
	display: inline-block;
	
}

#content.home section.main div#news {
	padding-top: 1.4em;
	font-size: .7em;
	line-height: 2.2em;	
}

#content.home section.main div#news h3 {
	color: #85aabf;
	font-size: 1.4em;
	line-height: 1.4em;
	letter-spacing: 3px;
}

div#news h5 {
	color: #000;
	font-size: 1.2em;
	line-height: 1.8em;
	font-weight: 700;
}


#content.home ul.thumbnails {
	
}

#content.home ul.thumbnails li {
	float: left;
	width: 14.4%;
	height: auto;
	margin-right: 1.4%;
	vertical-align: bottom;
}

#content.home ul.thumbnails li:last-child {
	margin-right: 0;
}

#content.home ul.thumbnails li img {
	width: 100%;
	height: auto;
	border: none;
	display: block;
}

#content.home a.morecartoons {
	display: block;
	text-align: right;
	padding: 10px 0 0 0;
}

#content.home #prefooter div.widget {
	width: 22%;
	margin: 0 3% 0 0;
	float: left;
	font-size: 0.8em;
	line-height: 2em;	
}

#content.home #prefooter div.widget h3 {
	font-size: 2.5em;
	color: #85aabf;
	font-weight: 100;
}

#content.home #prefooter div.menu-main-container {
	float: right;
	width: 20%;
	text-align: right;
	text-transform: uppercase;
	line-height: 2em;
	font-weight: 300;
}

#content.home #prefooter div.menu-main-container a {
	color: #555;
}


	
#content.interior section.main div.contents {
	width: 66%;
	padding-right: 3%;
	float: left;	
}

#content.interior section.main div.contents .wp-post-image {
	width: 100%;
	height: auto;
	margin-bottom: 1em;
}

#content.interior section.main div.contents p {
	line-height: 1.8em;
}

#content.interior section.main div.contents h2 {
	font-weight: 400;
	line-height: 2em;
}

#content.interior section.main div.contents img {
	border: 4px solid #fff;
}

#content.interior section.main div.contents img.wp-post-image {
	border: 4px solid #fff;
	width: 100%;
	height: auto;
}


#content.interior section.main div.contents h4 {
	font-weight: 400;
	font-size: 0.8em;
	line-height: 1em;
	padding: 0 0 1em 0;
}

#content.interior section.main div.contents ol.posts li {
	padding: 1em 0 1em 0;
	border-bottom: 1px solid #999;
}

#content.interior section.main div.contents ol.posts li:last-child {
	border: none;	
}

#content.interior section.main div.contents ol.posts {
	
}


body.store div.contents ul {
	padding-bottom: 2em; 
}

body.store div.contents ul li {
	display: inline-block;
	width: 30%;
	padding-right: 2%;
	vertical-align: bottom;
}

body.store div.contents ul li:nth-child(3) {
	padding-right: 0%;
}
	
	
body.store div.contents ul li h3 {
	margin-bottom: 2em !important;
}	

body.store div.contents ul li img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

#content.interior section.main aside {
	width: 28%;
	padding-left: 2%;
	float: left;	
	border-left: 1px solid #b6b6b6;
	font-size: 0.8em;
	line-height: 2em;
}	

#content.interior section.main aside h3, #content.interior section.main aside h2 {
	font-size: 2.5em;
	color: #85aabf;
	font-weight: 100;
}

.post-sidebar {
	padding-bottom: 1em;	
}


#content.interior div.leftblock {
	width: 83%;
	float: left;		
}

#content.interior ul.thumbnails {
}

#content.interior ul.thumbnails li {
	float: left;
	width: 18%;
	height: auto;
	margin-right: 2%;
	vertical-align: bottom;
}

#content.interior ul.thumbnails li:last-child {
	margin-right: 0;
}

#content.interior ul.thumbnails li img {
	width: 100%;
	height: auto;
	border: none;
}

#content.interior a.morecartoons {
	display: block;
	text-transform: uppercase;
	letter-spacing: 3px;
	text-align: left;
	padding: 0 0 10px 0;
}

#content.interior #news {
	font-size: .7em;
	line-height: 2.2em;
}

#content.interior #news h3 {
	font-size: 2em;
	color: #85aabf;
	padding: 10px 0 0 0;
}

#content.interior .news-widget {
	width: 42%;
	padding-right: 7%;
	float: left;	
}


#content.interior #prefooter div.menu-main-container {
	float: right;
	width: 16%;
	text-align: right;
	text-transform: uppercase;
	line-height: 2em;
	font-weight: 300;
}

#content.home #prefooter div.menu-main-container a {
	color: #555;
}


section.main aside img, div#news img {
	width: 100%;
	height: auto;
	display: block;
}

div.universal-widget {
	border-bottom: 1px solid #000 ;
	margin-bottom: 1em;
}

	
form#searchform label {
	display: none;
}

div.FlexoArchives_widget_archives ul {
	display: inline-block;
	margin: 0 10px 10px 0;
	vertical-align: top;	
}

div.FlexoArchives_widget_archives li {
	display: block;	
}

div.FlexoArchives_widget_archives ul ul {
	display: block;	
	margin: 0;
}

div.FlexoArchives_widget_archives li li {
	display: block;	
}

/**
div.FlexoArchives_widget_archives ul ul {
	margin-left: 1em;
}
**/



/* END PAGE AND POST CONTENT */





/* responsive */
@media screen and (max-width:800px) {

	header div.menu-main-container {
		font-size: 11pt;
		bottom: 6px;
		
	}
	
	header div.menu-main-container ul li {
		margin: 0 0 0 16px;
		padding: 3px;
		
	}

}

@media screen and (max-width:700px) {

	header div.menu-main-container {
		font-size: 10pt;
		margin: 0 0 0 6px;
		
	}
	
	header div.menu-main-container ul li {
		padding: 0 2px;
	}
	
	
	
	
	header div.menu-main-container {
		display: block;
		position: static;	
		width: 100%;
		background: #fff;
		font-size: 20pt;
		margin: 0;
		
	}
	
	header div.menu-main-container ul li {
		display: block;
		padding: 0;
		margin: 0;
		width: 49.5%;
		float: left;
	}
	
	header div.menu-main-container ul li a {
		display: block;
		background: #fff;
		padding: 10%;
		margin: 2%;	
	}
	
	
	
	
	
	header #contact-widget {
		position: relative;
		top: 0;
		right: 0;
		font-size: 12pt;
		text-transform: uppercase;
		letter-spacing: 3px;
		background: #777;
		text-align: center;
		padding: 1em 1em 0 1em;
	}
	
	header #contact-widget a {
		color: #fff;
		padding: 0 0 0 10px;
	}
	
	header #contact-widget img {
		width: 40px;
		height: auto;
	}
		
	
	
	
	#content.home section.main .wp-post-image {
		width: 100%;
		height: auto;
		float: none;
	}
	
	#content.home section.main aside {
		width: 100%;
		margin: 0;
		float: none;	
	}
	
	
	
	#content.home section.main h2 {
		padding-top: 1em;
		display: block;
		font-size: 2em;
	}
	
	#content.home section.main h4 {
		font-size: 1.2em;	
	}
	
	#content.home section.main div#news {
		font-size: 1em;
		line-height: 2.2em;	
	}
	
	 #content.home ul.thumbnails li {
		width: 46%;
		margin: 0 2%;
		height: 10em;
	}
	
	#content.home #prefooter div.widget {
		width: 100%;
		float: none;
		font-size: 1em;
		line-height: 2em;	
		padding-bottom: 1em;
	}
	
	#content.home #prefooter div.widget h3 {
		font-size: 2.5em;
		color: #85aabf;
		font-weight: 100;
	}
	
	#prefooter div.menu-main-container {
		display: none;
	}
	
	#content.interior section.main div.contents {
		width: 100%;
		padding: 0;
		float: none;	
	}
	
	#content.interior section.main aside {
		width: 100%;
		padding: 0;
		float: none;
		border-left: none;
		padding-top: 1em;
		border-top: 1px solid #b6b6b6;
	}

	#content.interior div.leftblock {
	width: 100%;
	float: none;	
	}

}

@media screen and (max-width:600px) {

	
	body.store div.contents ul li {
		width: 100%;
		padding-right: 0;
	}


	

}