.section:after,
ul.nav:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}

/**** ERIC MEYER CSS RESET ****/
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
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,font,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 { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; }
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }

/**** Begin Styling ****/
body {
	font: 110%/1.7em 'Droid Sans', Georgia, sans-serif; 
	-moz-text-shadow: 0 1px 0 rgba(52, 29, 20, 0.8);
	-webkit-text-shadow: 0 1px 0 rgba(52, 29, 20, 0.8);
	text-shadow: 0 1px 0 rgba(52, 29, 20, 0.8);
	webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;}
a {
	color: #fff;
	text-decoration: none;
	-moz-transition: 0.2s color linear;
	-webkit-transition: 0.2s color linear;
	transition: 0.2s color linear;}
a:hover {color: #adedff;}
.page {
	padding: .5em 0;
	clear:both;}
.inner {
	margin: 0 auto;
	width: 93.75%;		/* 960px / 1024px */}
img {max-width: 100%;}
ul.dot {
	list-style-type:disc;
	color:#fff;
	margin: 0 0 0 25px;}
ul.dot a {text-decoration:underline;}

/**** BACKGROUNDS ****/
#one {background:url(../images/assets/bg_one.png) repeat;}
#two {background:url(../images/assets/bg_two.png) repeat;}
#three {background:url(../images/assets/bg_three.png) repeat;}
#four {background:url(../images/assets/bg_four.png) repeat;}

/**** SIDEBAR/HEADER ****/
.card {
	float: left;
	width: 26.04%;		/* 250px / 960px */ 
	position:fixed;
	top:0;}
 h1 {
	text-indent:-20000px;
	overflow:hidden;
	letter-spacing:-20000px;
	padding:0;
	margin: 0 auto;}
h1 a {
	background: url("../images/assets/HM_logo.png") no-repeat 50% 0;
	display: block;
	min-height:130px;
	width: 96%;			/* 240px / 250px */ 
	display: block;
	margin:20px 2% 15px; 		/* 5px / 250px */
	padding:0;}
	
.card h2 {
	font: bold 2em 'Spinmaker', sans-serif;
	line-height:1em;
	text-transform: uppercase;
	text-align: center;
	margin: .2em auto 10px;
	width: 90%;
	color: #fff2d8;
    text-shadow: 1px 1px 0px #2a2b4a, 3px 3px 0px #5c5f72;}	

/**** NAVIGATION ****/
 nav {
	display: block;
	margin: 0 auto;
	text-align: center;
	width:80%;}
nav select {
  display: none;}
nav ul li {}
nav ul a {
	font: 80%/1.5em 'Spinmaker', sans-serif;
	display: block;
	text-align: center;
	color: #fff2d8;
	letter-spacing: 0.1em;
	padding: 1em 0.5em;
	text-transform: uppercase;
	border-bottom: 1px solid #fff2d8;}
nav ul a:hover {background-position: 50% 100%;}
li.first a {border-top: 1px solid #fff2d8;}

/**** INTRO ****/
.intro,
.main,
.footer {
	float: right;
	width:68.75% /* 660px / 960px */
	/*width: 65.9375%;	/* 633px / 960px */}
.intro {margin: 60px 0 30px 0;}
.intro h2 {
	font: bold 3em 'Spinmaker', sans-serif;
	text-transform: uppercase;
	color:#fff;
	text-align: center;
	margin-bottom: 0.25em;
	text-shadow: 4px 4px 10px #2d1d18, -2px -2px #553723;}
.intro h3 {
	font: bold 2em 'Spinmaker', sans-serif;
	text-transform: uppercase;
	color:#fff;
	text-align: center;
	margin-bottom: 0.25em;}
.intro p {
	color:#fff;
	font-weight:normal}	

/**** POSTER STYLING ****/
ol.three li, ol.four li {
	float: left;
	letter-spacing: 0.05em;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;}
ol.three li {
	font: 1.4em 'Spinmaker', sans-serif;
	font-weight:700;
	margin: 0 4.545454% 1.5em 0;		/* 30px / 660px */
	width:30.303030%;		/* 200px / 660px */}
ol.four li {
	font: 1.2em 'Spinmaker', sans-serif;
	margin: 0 3.030303% 2em 0;		/* 20px / 660px */
	width:22.727272%;		/* 150px / 660px */}
ol li img {
	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	display: block;
	margin: 0 auto .6em;
	border:5px solid #fff2d8;}
ol.three li:nth-child(3n) {/*clears float problem when a poster title is long*/
	margin-right: 0;} 
ol.three li:nth-child(3n+1) {/*clears float problem when a poster title is long*/
	clear:left;} 	
ol.four li:nth-child(4n) {/*clears float problem when a poster title is long*/
	margin-right: 0;} 
ol.four li:nth-child(4n+1) {/*clears float problem when a poster title is long*/
	clear:left;} 	
li#themes_allies {margin-left: 12.878787%; /* 85px / 660px */ }
ol.three li, ol.four li, .intro h3, .main h3 {
	text-shadow: 3px 3px 10px #4d332a, -1px -1px #553723;}
	
/**** SECONDARY POSTER STYLING ****/
ol.poster-sm li {
	float: left;
	font: .8em 'Spinmaker', sans-serif;
	letter-spacing: 0.05em;
	line-height: 1.1;
	margin: 0 3.03% 1.5em 0;		    /* 20px / 660px */
	text-align: center;
	text-transform: uppercase;
	width: 13.636363%;				/* 90px / 660px */}
ol.poster-sm img {
	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	display: block;
	border:2px solid #fff2d8;}
ol.poster-sm .title {display:none;}
ol.poster-sm li:nth-child(6n+1) {clear:left;} 	

/**** LARGE POSTER STYLING ****/
.main img.poster_large{
	float: left;
	margin: 0 3.0303% 1.5em 0;		    /* 20px / 660px */
	width: 60.606060%;				/* 400px / 660px */
	border:10px solid #fff2d8;
	-webkit-box-shadow:0 0 25px #222; 
	-moz-box-shadow: 0 0 25px #222; 
	box-shadow:0 0 25px #222; }
#poster-detail {
	float:left;
	margin:0 0 10px 0;
	width: 30.3030%;				/* 200px / 660px */}	
.main h3 {
	font: bold 1.6em 'Spinmaker', sans-serif;
	text-transform: uppercase;
	color:#fff;
	text-align:center;
	padding-bottom:0.2em;
	margin-bottom: 0.5em;
	border-bottom:1px solid #fff;}
.main h4 {
	color:#fff2d8;
	font-size:1.4em;
	line-height:1.4em;
	padding:2% 0 1% 0;
	text-shadow: 3px 3px 5px #4d332a;
	margin:10px 0 0 0;
	filter: dropshadow(color=#4d332a, offx=1, offy=1); }
.main p {color:#fff; font-size:1.1em; line-height:1.3em;  font-weight:normal;}
.main p span.birth {font-size:.8em;}
.main p.description {
	padding:2% 0 4%;
	clear:both;}
.buttons {margin: 0 0 0 10%;}
.mainbtn {
	-moz-box-shadow:inset 1px 0px 0px 0px #f5e8d2;
	-webkit-box-shadow:inset 1px 0px 0px 0px #f5e8d2;
	box-shadow:inset 1px 0px 0px 0px #f5e8d2;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f0e2cc), color-stop(1, #d1b892) );
	background:-moz-linear-gradient( center top, #f0e2cc 5%, #d1b892 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0e2cc', endColorstr='#d1b892');
	background-color:#f0e2cc;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #b39562;
	display:inline-block;
	font: 80%/1.2em 'Spinmaker', sans-serif;
	color: #302F4E;
	letter-spacing: 0.1em;
	padding:6px 24px;
	text-align:center;
	text-decoration:none;
	text-shadow:1px 1px 0px #829ab2;
	width:35%;
	margin:0 auto;}
.mainbtn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1b892), color-stop(1, #f0e2cc) );
	background:-moz-linear-gradient( center top, #d1b892 5%, #f0e2cc 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1b892', endColorstr='#f0e2cc');
	background-color:#d1b892;}
.mainbtn:active {
	position:relative;
	top:1px;}

/**** FOOTER ****/
.footer {
	font-size: 12px;
	line-height:14px;
	text-align: center;
	padding: 2% 0 4%;
	margin: 1% 0 0 0;
	clear:both;
	border-top:1px solid #fff;}
.footer p {
	margin-bottom: 0.5em;
	color:#fff;}

.center {text-align:center;}
.clear {clear:both;}

/* #Media Queries
================================================== */
	/*adjusted for iPad landscape height */
	@media only screen and (min-width: 1024px) and (max-height: 900px) {
	.card h2 {font-size: 1.6em; line-height:1em;}
	nav ul a {font: 70%/1.4em 'Spinmaker', sans-serif; padding: .8em 0.5em;}
	}
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
	h1 a {background: url("../images/assets/HM_logo_sq.png") no-repeat 50% 0;}
	.card h2 {font-size: 1.6em; line-height:1em;}	
	nav ul a {font: 80%/1em 'Spinmaker', sans-serif;}
	.intro h2 {font-size: 2.6em; line-height:1em; letter-spacing: 2px;}
	.intro p {font-size:.9em; line-height: 1.5em;}
	.main h4 {font-size:1.2em; line-height:1.2em;}
	.main p {font-size:.9em;}
	.main p.description {font-size:1em;}
	ol.three li {font-size: 1.1em; }
	ol.four li {font-size: 1em;}
	ol.poster-sm li {
	float: left;
	font: .7em 'Spinmaker', sans-serif;
	letter-spacing: 0.05em;
	line-height: 1.1;
	margin: 0 3.030303% 1.5em 0;		/* 20px / 660px */
	width: 22.727272%;				/* 150px / 660px */}
	ol.poster-sm li:nth-child(6n+1) {clear:none;}
	ol.poster-sm li:nth-child(4n+1) {clear:left;}  
	ol.poster-sm li:nth-child(4n) {margin-right: 0;} 
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	.inner {position: relative;}
	.card,
	.intro,
	.main,
	.footer {
		float: none;
		width: 100%;}
	.page {padding: .2em 0;}	
	.card {width:100%; margin:0 auto; position:relative; top:inherit;}

	h1 {
		float:left;
		padding:0;
		margin: 0;
		width:50%;		/* 300px / 600px */ }
	h1 a {
		background: url("../images/assets/HM_logo_wide.png") no-repeat 50% 0;
		min-height:45px; 
		width:210px;
		display:inherit;
		margin:5px 2% 10px; padding:0;}
		
	.card h2 {display:none;}	
	nav {display:inherit;
		float:right;
		margin: 10px 0 20px 0;
		width:45%;}		
  	nav ul     {display: none; }
  	nav select {display:inline;
 				background: #f6f3ef;
				width: 100%;		/* 240px / 600px */ 
   				padding: 5px;
				margin:0;
   				font-size: .9em;
   				border: 1px solid #d0b17b;
   				height: 34px;}
	.intro {clear:both; margin:10px 0 25px;}
	.intro h2 {font-size: 2em;}
	.intro p {font-size:1.2em;}	
	.poster {font: 1em 'Spinmaker', sans-serif;}
	.intro h2 {font: bold 2.2em 'Spinmaker', sans-serif; margin-bottom: 0.25em;}
	.intro p {font-size:.9em; line-height: 1.4em;}	
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	.page {padding: .1em 0;}
	h1 {width:20%;		/* 60px / 400px */ }
	h1 a {
		background: url("../images/assets/HM_logo_smsq.png") no-repeat 50% 0;
		min-height:45px;
		width:60px;
		display:inherit;
		margin:5px 0 20px 0; padding:0;}
	nav {width:70%;}		
  	nav select {display:inline;
 				background: #f6f3ef;
				width: 100%;		/* 240px / 600px */ 
   				padding: 5px;
   				font-size: .9em;
   				border: 1px solid #d0b17b;
   				height: 34px;}
				
	.intro {margin: 10px 0 10px 0;}
	.intro h2 {font-size: 1.3em;}
	.intro h3 {font-size: 1.1em; margin-bottom: 0.15em;}
	.intro p {font-size:.8em;}	
	
	ol.three li, ol.four li {font: .7em 'Spinmaker', sans-serif;}
	ol li img {border:2px solid #fff2d8;}
	
	.poster-sm {font-size: .6em;}
	.main h3 {font-size: 1em;}
	.main h4 {font-size:1.1em; line-height:1.1em; padding:2% 5%;}
	.main p {font-size:.8em; font-weight:normal; padding:0 5%;}
	.main p.description {font-size:.9em; line-height:1.2em; padding:4% 0 2% 5%} 
	.main img.poster_large{
		float:none;
		margin:0 5% 5%;
		width: 90%;
		border:5px solid #fff;}
	#poster-detail {width: 90%; float:none;}		
	.buttons {margin: 0 0 0 5%;}
	.mainbtn {
	width:30%;
	float:left;
	height:50px;
	margin:0 auto;}	
	}

	@media (max-width: 240px) {
	h1 {width:20%;		/* 60px / 400px */ }
	h1 a {
		background: url("../images/assets/HM_logo_tinysq.png") no-repeat 50% 0;
		width:40px;}
	.intro h2 {font-size: 1.2em;}
	.poster {font: .6em 'Spinmaker', sans-serif;}		
	}