/* css.michaelschrauzer.com */

/* RESET */

html, body{
	width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-family: nexa_slab_regularregular, Helvetica, Arial, sans-serif;
		}

body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, dialog,
footer, header, hgroup, menu, nav, section
  {display:block;}

/* set focus style for accessibility */
:focus { outline: 0;
	background:rgba(0,0,0,.2);}

/* BEGIN CUSTOM STYLES */
body {
  background: #334;
  line-height: 1.5;
	}

/* general text styles */
b, strong {
	font-family:nexa_slabheavy, 'Helvetica Bold', 'Arial Bold', sans-serif;
	font-weight:normal;
	}
i, em {
	font-family:nexa_slabregular_oblique, 'Helvetica Italic', 'Arial Italic', sans-serif;
	font-style:normal;
	}
i b, b i, strong i, i strong, em b, b em, em strong, strong em {
	font-family:nexa_slabbold_oblique, 'Helvetica Bold Italic', 'Arial Bold Italic', sans-serif;
	font-weight:normal;
	font-style:normal;
	}

/* ANCHOR STYLES */
/* general link style */
a {
	text-decoration:none;
	color:#F95;
	}
a:link {color: inherit;}
a:visited {color: inherit;}
a:hover {color: #FD5;}
a:active {color: #444;background-color:none !important;}

/* MAIN HEADER */
#header {
	position:relative;
	z-index:10;
	font-family:antonio, 'Arial Bold', 'Helvetica Bold', sans-serif;
	font-weight:normal;
	font-size:4em;
	}
#header a {
	background-color:#292929;
	padding:24px 12px;
	text-decoration:none;
	text-align:center;
	letter-spacing:1pt;
	color:#CCC;
	display:block;
	text-shadow: 0 -1px 1px black;
	line-height:1;
	}
#header a:hover {
	background-color:#444;
	color:#FFF;
	}
#header span:first-of-type { color:#F95; }
#header span:last-of-type {
	color:#FD5;
 font-size:.86em;
 text-transform:uppercase;
  }

/* CONTENT */
#content {
	max-width: 960px;
	margin:auto;
	padding:12px 6px;
	background:#666A55;
 color:white;
	}

/* demo styles */
#demo-wrapper {
 margin-left:6px;
 margin-right:6px;
 display:block;
 overflow:hidden;
 }
#demo-header {
	padding:6px;
	background:#333;
 text-align:center;
	text-transform:uppercase;
	font-family:'antoniobold', "Arial Narrow", sans-serif;
	font-size:16pt;
	letter-spacing:2pt;
	color:#FF9955;
	}
#demo {
 display:block;
	position:relative;
	background:#AAA;
	}
#demo header {
	margin:0 0 20px;
	padding:4px 0;
	background:#999;
	font-weight:bold;
	}

/* DEMO CAPTION */
#demo-caption {
 margin:0 6px 12px;
	padding:20px;
	display:block;
	border:0;
	background:#333;
	}
#demo-caption-header { font-size:18px; }
#demo-caption p {
  margin-top:8px;
  margin-bottom:8px;
  text-align:left;
  font-size:14px;
  position:relative;
  z-index:1;
  text-align:justify;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  }
#demo-caption p:first-of-type {margin-top:0px !important;}
#demo-caption p:last-of-type {margin-bottom:0px !important;}
#content > p a, #content > div a, #demo-caption a, #footer a {
  font-family:nexa_slabheavy, 'Helvetica Bold', 'Arial Bold', sans-serif;
  color:#F95;}
#content > p a:hover, #content > div a:hover, #demo-caption a:hover, #footer a:hover {color:#FD3;}
.dropcap {
  width:75px;
  height:75px;
  margin:5px 12px 0 0;
  display:block;
  background:#F95;
  float:left;
  color:#333;
  text-align:center;
  	font-family:antonio, 'Arial Bold', 'Helvetica Bold', sans-serif;
  font-size:4.5em;
  font-weight:bold;
  line-height:1.2;
  vertical-align:middle;
  }
.date {
  font-size:86%;
  text-transform:uppercase;
  color:#AAA;
}
/* COLUMNS */
.column-2 {
	-webkit-column-count:2;
	-moz-column-count:2;
	column-count:2;
	-webkit-column-gap:20px;
	-moz-column-gap:20px;
	column-gap:20px;
	}
.column-3 {
	-webkit-column-count:3;
	-moz-column-count:3;
	column-count:3;
	-webkit-column-gap:20px;
	-moz-column-gap:20px;
	column-gap:20px;
	}
.column-4 {
	-webkit-column-count:4;
	-moz-column-count:4;
	column-count:4;
	-webkit-column-gap:20px;
	-moz-column-gap:20px;
	column-gap:20px;
	}


/* DEMO TEXT STYLES */
.title {
	margin: 0;
	display: block;
	text-transform: uppercase;
	font-weight: bold;
	color: rgb(255,153,0) !important;
	}
/* code style */
span.code, code {font-family:monospace;}
code {
	margin:14px 0;
	padding:12px 14px 10px;
	display:block;
	background:#ABA;
	color:#333;
	white-space:pre-wrap;
	text-align:left;
	-o-tab-size:2;
	-moz-tab-size:2;
	tab-size:2;
	border-collapse:separate;
	}
.indent {padding-left:10%;padding-right:10%;}
.left p, .left span, .left {text-align:left;}
.center p, .center span, .center {text-align:center;}
.justify p, .justify span, .justify {text-align:justify;}
.spaced p, .spaced code {padding-bottom:1em;}

/* FOOTER */
#footer {
 position:relative;
 margin:0 -6px -12px;
 padding-top:1em;
	display:block;
	background:#444;
	padding-bottom:1em;
	}
#footer p {
	margin:0;
	padding:0 12px;
	text-align:center;
	font-size:80%;
	color:#DDD;
	text-transform:uppercase;
	letter-spacing:1pt;
	}
/* loader */
#loader {
	width:100%;
	height100%;
	top:0;
	bottom:0;
	position:relative;
	display:block;
	background-color:rgba(64,64,64,.6);
	position:fixed;
	z-index:9999;
	color:#BBB;
	text-align:center;
	line-height:1.4;
	border:solid;
	}
#loader div {
	width:100%;
	height:50px;
	position:absolute;
	top:50%;
	margin-top:-40px;
	}

/* CLEARFIX */

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}


/* @MEDIA STYLES */
@media screen and (max-width: 980px) {

	}

@media screen and (max-width: 800px) {
#content {width:auto; min-width:280px;}
#content article { width:auto; display:block; float:none; max-width:none;}
#content article#demo-wrapper {margin-bottom:0;}
#content article#demo-caption {margin-top:0;}
.column-2, column-3 {
	-webkit-column-count:1;
	-moz-column-count:1;
	column-count:1;
  }
	}

@media screen and (max-width: 468px) {
#demo-header {margin-left:0 !important;}
#content article {min-height:0;}
#content article a { position:relative; }
#content article header, #content article p {margin-left:12px;}
#content article p {padding-bottom:12px;}
#content article img {display:none;}
#content article .link-overlay {
  margin-left:0;
  position:relative;
  }
#content article .link-overlay a { margin:0 12px; }
#content article .link-overlay a:last-of-type { margin:0 12px 12px; }
#content > p .dropcap { width:70px; height:70px; font-size:4.5em; line-height:1.2; }
#header {
 font-size:3em;
  }


	}