/* --Meyerweb */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* --Meyerweb */

html, body {
	height: 100%;
	overflow: hidden;
}

#wrapper {
	display: table;
	width: 300%;
	height: 100%;
	-webkit-box-sizing: border-box;
	margin-bottom: -3em;
}

#wrapper > .cell {
	display: table-cell; 
	height: 100%; 
	width: 25%;
}

#wrapper > .cell > section { 
	position: relative; 
	height: 100%; 
}

.container { 
	position: absolute; 
	top: 4em;
	right: 15px;
	bottom: 4em;
	left: 15px; 
	overflow-y: auto;
	border: 1px solid #000000; 
}

#wrapper > section {
	display: table-cell;
	height: 100%;
	width: 25%;
}

header {
	min-height: 2em;
	font-size: 2em;
	text-align: center;
}


section#splash {
    background: url("../img/blueprint.jpg") repeat;
}

@font-face {
    font-family: "Chalk";
    src: url("../font/SketchiquaB.ttf") format("truetype");
}

section#splash > header {
	font-family: 'Chalk';
	font-size: 200%;
	padding: 1%;
	color: white;
}

section#next {
    background: url("../img/cork.jpg") repeat;
	z-index: 1;
	position: relative;
}

section#next > header {
	top: 20px;
	font-family: 'Londrina Solid', cursive;
	color: rgba(124, 52, 24, 0.92);
	text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.83);
	width: 100%;
	position: relative;
}

section#next > div#frame-top {
	background: url("../img/frame.png") repeat-x;
	background-position: top;
	z-index: 3;
	width: 100%;
	position: absolute;
	top: 0px;
	height: 16px;
}

#frame-top > header {
	font-family: 'Londrina Solid', cursive;
	color: rgba(124, 52, 24, 0.92);
	text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.83);
}

#next > .container {
	bottom: 5em;
}

#frame-bottom {
	background: url("../img/frame.png") repeat-x;
	height: 16px;
	background-position: top;
	z-index: 4;
	position: absolute;
	bottom: 3em;
	width: 100%;
}

#content {
	height: 100%;
	z-index: 2;
	min-height: 100%;
}

section#circuit {
	background: url("../img/circuit-tile-02.png") repeat;
}

#circuit > header {
	text-shadow: 0px 2px 3px #666;
}

.st-scroll {
    top: 0;
    left: 0;
    transition: all 0.6s ease-in-out;

    /* Let's enforce some hardware acceleration */
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
}

nav {
	bottom: 0;
	position: fixed;
	height: 3em;
	width: 100%;
	z-index: 99;
	background-image: linear-gradient(bottom, #333333 10%, #525252 50%, #525252 80%);
	background-image: -o-linear-gradient(bottom, #333333 10%, #525252 50%, #525252 80%);
	background-image: -moz-linear-gradient(bottom, #333333 10%, #525252 50%, #525252 80%);
	background-image: -webkit-linear-gradient(bottom, #333333 10%, #525252 50%, #525252 80%);
	background-image: -ms-linear-gradient(bottom, #333333 10%, #525252 50%, #525252 80%);
	box-shadow: 0px -3px 3px #333333;
	color: #FFF;
}

nav ul {
	width: 80%;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
}

nav ul li{
	width: 20%;
	height: 100%;
	display: inline-block;
		color: #FFF;
	text-align: center;
}

/*nav ul li:hover {
	background: -moz-linear-gradient(top,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); 
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 
	background: -o-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 
	background: -ms-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 
	background: linear-gradient(to bottom,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 ); 

	border-radius: 10px;
}*/

/***Now style the containing div that we gave the id 'polaroid'***/
#polaroid {
	position: relative;
	padding: 20px 10px;
	display: block;
	/*setting a width and adding overflow:hidden will clear the floats we're going to apply to figure*/
	width: 194px;
	overflow: hidden;
	margin: 0 auto !important;
}

/***Position the figures containing the images and captions***/
#polaroid figure {
	/*float: left;*/ /*places the images in a horizontal line*/
	position: relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/
	width: 178px; /*width of the images*/
	/*margin: 0 auto; /*space between the images*/
}

#polaroid figure {
	padding: 6px 8px 10px 8px; /*size of the frame*/
	/*give the frame's background colour a gradient*/
	background: #eee6d8; /*fallback colour for browsers that don't support gradients*/
	background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
	background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
	background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
	background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
	background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
	/*give the Polaroids a small drop shadow*/
	-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
	-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
	box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
}

#polaroid figcaption {
	text-align: center;
	font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */
	font-size:1.3em;
	color: #454f40;
	letter-spacing: 0.09em;
}

figure:before { /*see the support section below to more info on using the :before psuedo element*/
	content: '';
	display: block;
	position: absolute;
	left:5px; /*postion from the left side of the frame (positive value move the tape right, negative moves it left)*/
	top: -15px; /*position from the top of the frame (positive move it above the frame, negative below)*/
	width: 75px; /*width of the tape*/
	height: 25px; /*height of the tape*/
	background-color: rgba(222,220,198,0.7); /*colour of the tape, use rgba to make it slightly transparent*/
	/*rotate the tape 12 degrees anti-clockwise*/
	-webkit-transform: rotate(-12deg);
	-moz-transform: rotate(-12deg);
	-o-transform: rotate(-12deg);
	-ms-transform: rotate(-12deg);
}

/**The tape for the even numbered images needs to be rotated the opposite way, as the images are, and positioned on the other side of the frame, I've also changed the width slightly**/
figure:nth-child(even):before {
	left:150px;
	top: -15px;
	width: 55px;
	height: 25px;
	-webkit-transform: rotate(12deg);
	-moz-transform: rotate(12deg);
	-o-transform: rotate(12deg);
	-ms-transform: rotate(12deg);
}

/*img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}*/