/*
http://github.com/davatron5000/foldy960
License: WTFPL
*/
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
	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; }
	ol, ul {
		list-style: none; padding:none;}

/* Responsive Resets
-------------------------------------------------------------- */
@-o-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

html {
  overflow-y: auto;
}

img {
  max-width: 100%;
  height: auto;
  white-space: pre; /*-- alt text --*/
  border:none;
}

/* Grid 
-------------------------------------------------------------- */
.container {
	max-width: 750px;
	width:92%;
	margin:2em auto 0 auto;
	position: relative;
}

.row {
  clear: both;
}

@media screen and (min-width: 480px) {
  .container {
    width: 98%;
  }

  .grid-1,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-half,
  .grid-full,
  .grid-unit {
    float: left;
    width:96.969696969697%;
    margin:0 1.515151515152% 1em;
    
  }

  .gallery .grid-unit,
  .grid-half {
    width:46.969696969697%;
    margin: 0 1.515151515152% 1em;
  }

  .grid-flow-opposite{
    float:right
  }

}

@media screen and (min-width: 640px) {
  .grid-1     { width: 13.636363636364%; }
  .grid-2     { width: 30.30303030303%; }
  .grid-3,
  .grid-half  { width: 46.969696969697%; }
  .grid-4     { width: 63.636363636364%; }
  .grid-5     { width: 80.30303030303%; }
  .grid-6,
  .grid-full  { width: 96.969696969697%; }

  .gallery .grid-unit {
    width: 30.30303030303%;
  }

  .content-pad-right {
    padding-right: 4%;
  }

  .content-pad-left {
    padding-left: 4%;
  }

}

/* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/
For best results, use your favorite clearfix here.
-------------------------------------------------------------- */
.clear {
	clear:both;
	}
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
.cf { zoom:1; } /* For IE 6/7 (trigger hasLayout) */

/* Typography
-------------------------------------------------------------- */
@font-face {
    font-family: 'HVDComicSerifProRegular';
    src: url('../font/HVD_Comic_Serif_Pro-webfont.eot');
    src: url('../font/HVD_Comic_Serif_Pro-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/HVD_Comic_Serif_Pro-webfont.woff') format('woff'),
         url('../font/HVD_Comic_Serif_Pro-webfont.ttf') format('truetype'),
         url('../font/HVD_Comic_Serif_Pro-webfont.svg#HVDComicSerifProRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Layout
-------------------------------------------------------------- */
body {
  font: 400 100%/1.5 Arial, "Helvetica Neue", Helvetica, Geneva, sans-serif;
  color: #444444;
  text-shadow: 1px 1px rgba(255,255,255,1);
  background: #f7f7f7;
  background: -webkit-linear-gradient(top, #eeeeee, #f7f7f7,#eeeeee);
  background: -moz-linear-gradient(top, #eeeeee, #f7f7f7,#eeeeee);
  background: -ms-linear-gradient(top, #eeeeee, #f7f7f7,#eeeeee);
  background: -o-linear-gradient(top, #eeeeee, #f7f7f7,#eeeeee);

}
.footer {
  font-size: .675em;
  color: #bbbbbb;
  padding: 0.5em 0 3em;
}
.footer a {
	color: #bbbbbb;
}
.footer a:hover{
	color: #f7f7f7;
}
hr {
	border: 1px solid #dddddd;
	margin-bottom: 2em;
}

/* Typography
-------------------------------------------------------------- */

h1 {
	color: #B80000;
	text-shadow: 1px 1px rgba(255,255,255,1);
	margin-bottom: .25em;
	font: 3em/1 'HVDComicSerifProRegular', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

h2 {
	font-size: 2.5em;
	line-height:1;
	margin-bottom: .25em;
}
h3 {
	font-size: 2em;
	margin-bottom: .125em;
}
h4 {
	font-size: 1.25em;
}
a {
  color: #B80000;
  text-decoration: none;
}
a:focus,
a:hover {
  color: #555555;
}
/* Misc
-------------------------------------------------------------- */
.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.uppercase {
	text-transform: uppercase;
}

.btn a {
	font-weight:900;
	letter-spacing:.0625em;
	font-size: 1em;
	line-height:1em;
	color: #ffffff;
	text-shadow: 1px 1px 2px #d70000;
	background: #B80000;
	padding: .5em .75em;
	-webkit-box-shadow: 0px 1px 2px 0 rgba(255,255,255,.75);-moz-box-shadow: 0px 1px 2px 0 rgba(255,255,255,.75);box-shadow: 0px 1px 2px 0 rgba(255,255,255,.75);
	-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;
	border: 1px solid #d70000;
	margin: 1.5em auto 3em 0em;
	text-align: center;
}
.btn a:hover {
	color: #f7f7f7;
	text-shadow: 1px 1px 0 rgba(0,0,0,.75);
	background: #1e1e1e;
	-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;
	border: 1px solid #f7f7f7;
}
input {
	color: #ffffff;
	background: #444444;
	padding: .375em .25em;
	box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,.75);
	border: 1px solid #333333;
	border-radius: .5em;-webkit-border-radius: .5em;-moz-border-radius: .5em;
	margin: .125em auto;
	min-width: 220px;
}
.top-spacing {
	margin-top:1.5em;
	}		
.logo {
	margin: 10% auto 10% auto;
}
img.device {
	width:100%;
	max-width:380px;
	height:auto;	
}
.copy {
	text-align:left;	
}
.alternate-bottom {
	display:none;
	}
.alternate-top {
	display:inline-block;
	}
@media screen and (max-width: 639px) {
	.copy {
	text-align:center;	
}
.logo{
	margin: 2em auto;

}
.alternate-bottom {
	display:inline-block;
	}
.alternate-top {
	display:none;
	}
img.device {
	margin-top:2em;
}	
.btn a {margin: 1.5em auto 3em auto;
}
}