/* @group Reset */

html, body,
object, iframe, canvas, audio, video, img,
section, article, nav, header, footer, aside,
figure, figcaption, details, summary,
mark, time, progress, meter,
h1, h2, h3, h4, h5, h6, hgroup,
div, p, blockquote, ol, ul, dl, li, dt, dd,
a, abbr, address, cite,
em, strong, b, i, small, sub, sup, q,
pre, code, kbd, dfn, ins, del, samp, var,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	color: inherit; 
}
section, article, nav, header, footer, aside,
figure, figcaption, details, summary {
	display: block;
}

/* @end Reset */

/* @group Elements */

body {
	background: white;
	color: black;
	font-family: Calibri, Corbel, 'Lucida Grande', 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.5;
	padding: 1em;
}
a {
	font-weight: bold;
	text-decoration: none;
}
a:link,
a:visited {
	color: #369;
}
a:hover,
a:focus {
	color: #036;
}
a:active {
	color: #69c;
}

img.profile-pic {float: left; margin: 5px 10px 0 0}

h1 {
	font-size: 3em;
	line-height: 1.25;
	margin-bottom: 0.2em;
	font-family:  Futura, 'Century Gothic', 'Gill Sans', Calibri, Corbel, 'Lucida Grande', 'Trebuchet MS', sans-serif;
}
h2,
section h1,article h1, aside h1, nav h1 {
	font-size: 2.25em;
	line-height: 1.3333;
	margin-bottom: 0.25em;
	font-family:  Futura, 'Century Gothic', 'Gill Sans', Calibri, Corbel, 'Lucida Grande', 'Trebuchet MS', sans-serif;
}
h3,
section h2, article h2, aside h2, nav h2,
section section h1, article article h1,
section article h1, article section h1, aside section h1, aside article h1,
section aside h1, article aside h1,
section nav h1, article nav h1, aside nav h1 {
	font-size: 1.5em;
	line-height: 1.5;
	margin-bottom: 0.3333em;
	font-family:  Futura, 'Century Gothic', 'Gill Sans', Calibri, Corbel, 'Lucida Grande', 'Trebuchet MS', sans-serif;
	text-transform: uppercase;
}
h4
section h3, article h3, aside h3, nav h3
section section h2, article article h2, aside aside h2,
section article h2, article section h2,
section aside h2, article aside h2, aside section h2, aside article h2,
section nav h2, article nav h2, aside nav h2,
section section section h1, article article article h1,
section section article h1, article article section h1,
section article article h1, article section section h1,
section article section h1, article section article h1,
section section aside h1, article article aside h1,
aside section section h1, aside article article h1, aside article section h1,
section section aside h1, article article aside h1,
section aside section h1, article aside article h1,
section aside article h1, article aside section h1,
section article aside h1, article section aside h1,
section section nav h1, article article nav h1, section aside nav h1, article aside nav h1,
section articla nav h1, article section nav h1, aside section nav h1, aside article nav h1 {
	font-size: 1.125em;
	line-height: 1.3333;
	margin-bottom: 0.25em;
	font-family:  Futura, 'Century Gothic', 'Gill Sans', Calibri, Corbel, 'Lucida Grande', 'Trebuchet MS', sans-serif;
}

blockquote {
	margin: 1em;
	font-style: italic;
}
section p:last-child {
	margin-bottom: 1.5em;
}
p+p {
	text-indent: 1em;
}
ul ul,
ol ol,
ul ol,
ol ul {
	margin-left: 1em;
}
strong, b {
	font-weight: bold;
}
em, i {
	font-style: italic;
}

/* @end Elements */

/* @group classes */

.countdown {
	line-height: 1;
}
.countdown b {
	font-size: 2em;
	font-family:  Futura, 'Century Gothic', 'Gill Sans', Calibri, Corbel, 'Lucida Grande', 'Trebuchet MS', sans-serif;
}
.checklist li {
	list-style-position: inside;
}
.checklist li a:visited:after {
	content: ' ✔';
}

/* @end classes */

/* @group microformats */

/* @group adr */

ol.adr,
ol.adr li {
	list-style: none;
	margin-bottom: 0;
}
p.adr span:after,
ol.adr li:after {
	content: ',';
}
p.adr span:last-child:after,
ol.adr li:last-child:after {
	content: '.';
}

/* @end adr */

/* @group hAtom */

.hentry footer {
	font-size: 75%;
}


/* @end hAtom*/

/* @group xoxo */

.xoxo li {
	list-style: none;
}
.xoxo,
.xoxo ol {
	margin: 1em 0;
}
.xoxo li li {
	margin-left: 1em;
}

/* @end xoxo */

/* @end microformats */

/* @group Structure */

/* @group nav */

nav ul {
	list-style: none;
	margin: 1em 0;
}
nav ul > li {
	margin-bottom: 1em;
}
nav ul > li  > a {
	display: block;
}
nav ul > li  h2 {
	letter-spacing: 0.125em;
}

/* @end nav */

/* @group ARIA roles */

/* @group banner */

[role="banner"] a hgroup {
	color: black;
}
[role="banner"] hgroup {
	text-align: center;
}
[role="banner"] hgroup h1 {
	margin: 0;
}
[role="banner"] hgroup h1 b {
	text-transform: uppercase;
	letter-spacing: 0.125em;
	display: block;
}
[role="banner"] hgroup h1 img {
	margin: 0 auto;
}

/* @end banner */

/* @group main */

[role="main"] > aside {
	font-size: 0.875em;
	line-height: 1.7143;
}                   
[role="main"] > aside,
[role="main"] > section > article,
[role="main"] > section + section,
[role="main"] > article + article,
[role="main"] > section > section + section,
[role="main"] > section > article + article,
[role="main"] > section > aside + aside {
	margin-top: 2em;
	margin-bottom: 2em;
}

/* @end main */

/* @group contentinfo */

[role="contentinfo"] h2 {
	margin-top: 1em;
}

/* @end contentinfo */

/* @end ARIA roles */

#map {
	width: 100%;
	height: 24em;
	margin-bottom: 2em;
}

/* @end Structure */

@media screen and (color) {

	html {
		background-image: url(http://sciencehackday.s3.amazonaws.com/img/tarantula.jpg);
		margin: 1em;
	}
	body {
		background: rgba(255,244,233,0.9) url(http://sciencehackday.s3.amazonaws.com/img/grid.png) repeat-x top;
		color: rgba(0,0,0,0.75);
		text-shadow: 1px 1px 0 rgba(255,255,255,0.75);
		border: 1em solid rgba(255,255,255,0.5);
		max-width: 80em;
		-webkit-border-radius: 3em;
		-moz-border-radius: 3em;
		border-radius: 3em;
		-webkit-box-shadow: 0 0 1.5em rgba(0,0,0,0.9);
		-moz-box-shadow: 0 0 1.5em rgba(0,0,0,0.9);
		box-shadow: 0 0 1.5em rgba(0,0,0,0.9);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}
	h1,h2,h3,h4,h5,h6 {
		color: rgba(0,0,0,0.75);
		text-shadow: 1px 1px 0 rgba(255,255,255,0.75);
	}
	a:link,
	a:visited {
		color:  #963;
	}
	a:hover,
	a:focus {
		color: #630;
	}
	a:active {
		color: #c96;
	}

	.countdown b {
		text-shadow: none;
		background-color: rgba(0,0,0,0.25);
		color: rgba(255,255,255,0.75);
		padding: 0.2em;
		border: 0.1em solid rgba(0,0,0,0.5);
		-webkit-border-radius: 0.25em;
		-moz-border-radius: 0.25em;
		-o-border-radius: 0.25em;
		border-radius: 0.25em;
	}
	.countdown:hover b {
		background-color: rgba(255,255,255,0.25);
		color: rgba(0,0,0,0.5);
	}

	.checklist {
		background: rgba(255,255,255,0.25);
		border: 0.25em solid rgba(255,255,255,0.5);
		-webkit-border-radius: 1em;
		-moz-border-radius: 1em;
		border-radius: 1em;
		padding: 0 1em;
		-webkit-box-shadow: 0 0 1em rgba(0,0,0,0.15);
		-moz-box-shadow: 0 0 1em rgba(0,0,0,0.15);
		box-shadow: 0 0 1em rgba(0,0,0,0.15);
	}
	.checklist:hover {
		-webkit-box-shadow: 0 0 1em rgba(0,0,0,0.3);
		-moz-box-shadow: 0 0 1em rgba(0,0,0,0.3);
		box-shadow: 0 0 1em rgba(0,0,0,0.3);
	}
	.checklist h1 {
		margin: 0.25em 0;
	}
	.checklist ol {
		margin-left: -1em;
		margin-right: -1em;
	}
	.checklist li { 
		border-top: 0.25em solid rgba(255,255,255,0.5);
		list-style-position: inside;
		padding: 0.25em 0 0.2em 2em;
		text-indent: -1em;
	}
	nav ul > li {
		background: rgba(255,255,255,0.85);
		padding: 0.5em;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		border: 0.5em solid rgba(255,255,255,0.95);
		-webkit-border-radius: 1em;
		-moz-border-radius: 1em;
		border-radius: 1em;
		-webkit-box-shadow: 0 0 1em rgba(0,0,0,0.5);
		-moz-box-shadow: 0 0 1em rgba(0,0,0,0.5);
		box-shadow: 0 0 1em rgba(0,0,0,0.5);
	}
	nav ul > li:hover {    
		-webkit-transform: scale(1.025);
		-moz-transform: scale(1.025);
		-o-transform: scale(1.025);
		transform: scale(1.025);
		-webkit-box-shadow: 0 0 1em rgba(0,0,0,0.75);
		-moz-box-shadow: 0 0 1em rgba(0,0,0,0.75);
		box-shadow: 0 0 1em rgba(0,0,0,0.75);
	}
	nav ul > li h2:before {
		content: '★';
	}
	[role="banner"] hgroup h1 img {
		opacity: 0.5;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		-o-transition: all 0.4s;
		transition: all 0.4s;
	}
	[role="banner"] hgroup:hover h1 img {
		opacity: 0.75;
		-webkit-transform: rotate(270deg);
		-moz-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		transform: rotate(270deg);
	}
	[role="banner"] hgroup:hover h1 img:hover {
		opacity: 0.875;
	}
	[role="banner"] hgroup h2 {
		background-color: rgba(45,30,15,0.5);
		color: rgba(255,255,255,0.95);
		border-top: 0.125em solid rgba(255,255,255,0.9);
		border-bottom: 0.125em solid rgba(255,255,255,0.9);
		margin: 0 -0.4444em 1em;
		padding: 0.2em 0.8888em 0.1em;
		line-height: 1;
		text-shadow: 2px 2px 0 rgba(255,255,255,0.33);
		-webkit-box-shadow: 0 0 1em rgba(0,0,0,0.25);
		-moz-box-shadow: 0 0 1em rgba(0,0,0,0.25);
		box-shadow: 0 0 1em rgba(0,0,0,0.25);
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		-o-transition: all 0.4s;
		transition: all 0.4s;
	}
	[role="main"] > section {
		margin: 0 1em;
	}
	[role="main"] > aside {
		padding: 0 1.25em;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}
	[role="main"] > aside.checklist {
		padding: 0 1em;
	}
	[role="main"] > section > section > h1:before,
	[role="main"] > section > article > h1:before,
	[role="main"] > article > article > h1:before,
	[role="main"] > article > section > h1:before {
		content: '☆';
	}
	[role="main"] a[rel="alternate"] img {
		opacity: 0.7;
	}
	[role="main"] a[rel="alternate"]:hover img {
		opacity: 0.95;
	}
	[role="contentinfo"] {
		margin: 1em;
	}
	[role="contentinfo"] a img {
		opacity: 0.8;
	}
	[role="contentinfo"] a:hover img {
		opacity: 0.95;
	}

	#map {
		border: 0.5em solid rgba(255,255,255,0.95);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-border-radius: 1em;
		-moz-border-radius: 1em;
		border-radius: 1em;
		-webkit-box-shadow: 0 0 1em rgba(0,0,0,0.5);
		-moz-box-shadow: 0 0 1em rgba(0,0,0,0.5);
		box-shadow: 0 0 1em rgba(0,0,0,0.5);
	}
	#map:hover {
		-webkit-box-shadow: 0 0 1em rgba(0,0,0,0.75);
		-moz-box-shadow: 0 0 1em rgba(0,0,0,0.75);
		box-shadow: 0 0 1em rgba(0,0,0,0.75);
	}

/* @group Customisation */
	
	body.schedule {
		background-color: rgba(255,244,244,0.9);
	}
	body.schedule a:link,
	body.schedule a:visited {
		color: #966;
	}
	body.schedule a:hover,
	body.schedule a:focus {
		color: #633;
	}
	body.schedule a:active {
		color: #c99;
	}
	
	body.location {
		background-color: rgba(244,255,255,0.9);
	}
	body.location a:link,
	body.location a:visited {
		color: #699;
	}
	body.location a:hover,
	body.location a:focus {
		color: #366;
	}
	body.location a:active {
		color: #9cc;
	}

	body.questions {
		background-color: rgba(244,244,255,0.9);
	}
	body.questions a:link,
	body.questions a:visited {
		color: #669;
	}
	body.questions a:hover,
	body.questions a:focus {
		color: #336;
	}
	body.questions a:active {
		color: #99c;
	}

/* @end Customisation */
}

@media screen and (min-width: 50em) {

	html {
		margin: 3em;
	}
	body {
		width: 90%;
		margin: 0 auto;
	}

/* @group banner */

	[role="banner"] hgroup {
		text-align: left;
	}
	[role="banner"] hgroup h1 {
		margin: 0.5em 0.3333em;
		line-height: 1;
	}
	[role="banner"] hgroup h1 img {
		display: block;
		float: right;
		margin: -0.6em auto 0;
	}

/* @end  banner */
	
/* @group nav */

	nav ul {
		padding: 1em 1em 2em;
		clear: both;
		overflow: hidden;
	}
	nav ul > li  > a {
		display: block;
		min-height: 8em;
	}  
	nav ul li {
        margin-bottom: 1em;
        width: 32%;
	}
	nav ul li:nth-child(3n+1) {  
        float: left;
        clear: left;
	}
	nav ul li:nth-child(3n+2) {  
        float: left;
        clear: none;
        margin-left: 2%;
	}                
	nav ul li:nth-child(3n+3) {  
        margin-left: 0pt;
        float: right;
        clear: right;
	}


/* @end nav */

/* @group main */
	
	[role="main"] {
		clear: both;
		overflow: hidden;
	}
	[role="main"] > section {
		width: 56%;
		float: left;
	}
	[role="main"] > aside {
		width: 33%;
		float: right;
		margin-top: 0.25em;
	}

/* @end main */
	
/* @group contentinfo */
	
	[role="contentinfo"] {
		clear: both;
	}
	
/* @end contentinfo */
}

@media screen and (min-width: 72em) {

	body {
		width: 85%;
	}
}