/* CSS Reset section */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   
    "The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.

	In other words, this is a starting point, not a self-contained black box of no-touchiness"
*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* KC - Un-reset certain things */
em, i {font-style: italic;}
strong, b {font-weight: bold;}

/*** End of CSS Reset ***/

/* flexing of fixed content */
img,
embed,
object,
video {
  max-width: 100%;
}

/* flexing for youtube embeds http://webdesignerwall.com/tutorials/css-elastic-videos */
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	min-width:220px;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* stying for embeds */
.youtube800{
	max-width: 800px; 
	margin-bottom: 40px;
	border: 1px solid #aaa;
}

/* Disable iOS/WinMobile font size changes */
@media screen and (max-width: 600px),
screen and (max-device-width: 480px) {
	html {
		-ms-text-size-adjust: none;
		-webkit-text-size-adjust: none;
	}
}

/* utility selectors */
.left {float: left;}
.right {	float: right;}
.clearboth {clear: both;}
.clearleft {clear: left;}
.clearright {clear: right;}

/* Main page structure */
body {
	background: #E5DED4 url(images/bg-vvlq.jpg) no-repeat center center fixed;
	/* full size background image from http://css-tricks.com/perfect-full-page-background-image/ */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	/* for older browsers: I’d recommend serving background-size in your normal CSS to all browsers, then use Modernizr to detect “.no-backgroundsize”, then offer this ‘polyfill’ method to those less capable browsers. http://elliotjaystocks.com/blog/better-background-images-for-responsive-web-design/ */
}

header img {
	/*margin: 3em auto;
	width: 60%;
	text-align: center;*/
}

#primary {
	width:90%;
	margin: 0 auto;
}

#content {
	background: #F1C28A;
	margin-top: 3em;
	border: 5px solid #222;
	-moz-border-radius: 2em;
	-webkit-border-radius: 2em;
	border-radius: 2em; /* future proofing */
	-khtml-border-radius: 2em; /* for old Konqueror browsers */
}

.box {
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 2em;
}

/* Headers & fonts */

body{
	//font-family: Helvetica,Arial,sans-serif;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 80%;
}

header[role="banner"] h1 {
	font-size: 2em; 
	font-style: normal;
  	font-weight: bold;
  	line-height: 2em;
  	margin-bottom: 0.5em;
	
	/* guidelines */
	//border-bottom: 1px dashed #444;
}

h1 {
	font-size: 2.5em; 
	font-style: normal;
  	font-weight: bold;
  	line-height: 1.5em;
  	margin-bottom: 0.5em;
}

h2 {
	font-size: 2em; 
	font-style: normal;
  	font-weight: bold;
  	line-height: 1.5em;
  	margin-bottom: 0em;
	//color: #8F2E20; 
}

h3 {
	font-size: 1.5em; 
	font-style: normal;
  	font-weight: bold;
  	line-height: 1.5em;
}

p {
	font-size: 1.2em;
	margin: 1.2em 0em;
	line-height: 1.2em;
}

p.slugline {
	margin-top: 0em;
	margin-bottom: 1.5em;
}
 /*
input, textarea, li{
	font-size: 1em;
	padding-bottom: 1em;
	line-height: 1.3em;
}
*/
.entry-utility p , #comment-notes{
	font-size: 1em;
}

a:link {
    color: #DF2226;
    text-decoration: none;
}
a:visited {
    color: #DF2226;
    text-decoration: none;
}
a:link:hover, a:visited:hover {
    color: #FF0000;
    text-decoration: underline;
}

hr {
	background-color: #999;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}
pre {
	font: 11px Monaco, monospace;
	line-height: 1.5;
	margin-bottom: 1.5em;
}
code {
	font: 11px Monaco, monospace;
}

#content blockquote, article blockquote {
font-family: Georgia, serif;
font-size: 1.5em;
font-style: italic;
width: 75%;
margin: 0.5em 1em;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}

#content blockquote:before, article blockquote:before {
display: block;
content: "\201C";
font-size: 4em;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

.newer {float:right;}
.older {float:left;}
.pagenavigation {
	overflow: hidden; /* make container size correctly when only contains floated elements */
	margin-bottom: 1em;
}

img.size-medium, img.size-full, img.size-thumbnail  {
/* width: 100%; */
border: 1px solid #222;
}

.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
	max-width: 100%;
	height: auto;
}

/* Sort out comment style */
.commentlist p {
	font-size: 1em;
}

#comments {
	margin-top: 2em;
	font-size: 1.3em;
}

input {
    padding: 0.5em;
}

@media screen and (min-width: 800px) {
	#primary {
		width:80%;
	}
}

@media screen and (min-width: 900px) {
	#primary {
		width:70%;
	}
}

@media screen and (min-width: 1100px) {
	#primary {
		width:60%;
	}
}