/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
	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.5;
	}
	
	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;
	}	
	
	/* end reset*/

	/* Main Styles */

	body {
		background-color:rgba(88,117,127,1);
		font-family: 'Exo 2', sans-serif;
		color:rgba(176,234,255,1);
	}

	header {
		width:100%;
		text-align:center;
		background-color:rgba(44,59,64,1);
		padding-bottom:20px;
	}

	#wrapper {
		width:100%;
	}

	h1 {
		font-size:2em;
	}

	h2 {
		font-size:1.5em;
		display: none;
	}

	em {
		font-style:italic;
	}

	nav {
		margin-top:15px;
		text-align:center;
	}

	nav li {
		display:inline-block;
		width:20%;
	}

	#indexHead {
		font-size:2.2em;
		border: 0px solid red;
	}

	#indexSubHead {
		display: none;
		font-size:1.3em;
		width: 30%;
	}

	#introbox {
		width:50%;
		margin-top:50px;
		margin-bottom:50px;
		margin-left:20%;
		padding:10px 5%;
		border-top:5px solid rgba(44,59,64,1);
		border-bottom:5px solid rgba(44,59,64,1);
		font-size:1.5em;
		text-align:left;
	}

	#exposition {
		text-align:center;
	}

	#face1 {
		float:left;
		width:15%;
		max-width:150px;
		margin-left:5%;
	}

	#face2 {
		float:right;
		width:15%;
		max-width:150px;
		margin-right:5%;
	}

	#mainNav {
		width:50%;
		margin-left:25%;
		margin-top:20px;
		font-size:1.75em;
		text-align:center;
	}

	#mainNav li {
		margin-top:20px;
	}

	#buttonBlock {
		margin-top:20px;
		margin-right:35%;
		float:left;
		width:30%;
		max-width:600px;
	}

	#ui {
		margin-top:40px;
		display:inline-block;
		float:left;
		width:30%;
	}

	#instructions {
		text-align:justify;
	}

	#codebox {
		min-height:50px;
		padding:5%;
		margin-top:20px;
		border:2px solid rgba(44,59,64,1);
		text-align:left;
	}

	#objectbox {
		min-height:50px;
		width:80%;
		margin-left:10%;
		margin-top:20px;
		border-left:3px solid rgba(44,59,64,1);
		border-right:3px solid rgba(44,59,64,1);
		border-radius:10px;
		text-align:left;
	}

	#objectText {
		margin-left:10%;
	}

	#tab {
		margin-left:25px;
	}

	button {
		margin-left:15%;
		margin-top:20px;
		height:50px;
		width:50%;
		background-color:rgba(44,59,64,1);
		color:rgba(176,234,255,1);
		border:2px solid rgba(132,176,191,1);
		border-radius:5px;
	}

	button:active {
		background-color:rgba(176,234,255,1);
		color:rgba(44,59,64,1);
	}

	.random {
	}

	#antbutton {
		top:50px;
	}

	#eyesbutton {
		top:125px;
	}

	#glassesbutton {
		top:200px;
	}

	#mustachebutton {
		top:275px;
	}

	#shirtbutton {
		top:350px;
	}

	#pantsbutton {
		top:425px;
	}

	#allRandom {
		top:50px;
	}

	#eyesRandom {
		top:125px;
	}

	#glassesRandom {
		top:200px;
	}

	#mustacheRandom {
		top:275px;
	}

	#shirtRandom {
		top:350px;
	}

	#pantsRandom {
		top:425px;
	}

	.alien {
		position:absolute;
	}

	.aInc {
		margin-top:200px;
		margin-left:42%;
	}

	.aRand {
		margin-top:200px;
		margin-left:42%;
	}

	#body {
		top:200px;
		left:100px;
		z-index:2;
	}

	#head {
		top:40px;
		left:95px;
		z-index:4;
	}

	#eyes {
		top:125px;
		left:117px;
		z-index:5;
	}

	#ant {
		top:20px;
		left:160px;
		z-index:5;
	}

	#glasses {
		top:138px;
		left:99px;
		z-index:6;
	}

	#mustache {
		top:185px;
		left:120px;
		z-index:4;
	}

	#shirt {
		top:220px;
		left:108px;
		z-index:3;
	}

	#pants {
		top:355px;
		left:135px;
		z-index:5;
	}

	a:link, a:visited {
		color:rgba(132,176,191,1);
		text-decoration:none;
	}

	a:hover, a:active {
		color:rgba(158,211,229,1);
		text-shadow: 0 0 1px rgba(158,211,229,2);
		text-decoration:none;
	}

	#activePage {
		color:rgba(158,211,229,1);
	}

	/*Filter Page*/
	
	#filterbuttonBlock {
		margin-top:20px;
		margin-right:50%;
		float:left;
		width:30%;
		max-width:600px;
	}

	#filterui {
		margin-top:40px;
		display:inline-block;
		float:left;
		width:20%;
	}

	.filter {
		top:0px;
		left:50px;
		z-index:15;
	}

	#instructions {
		text-align:center;
		font-size:1.1em;
		line-height:2em;
	}

	.a1 {
		margin-top:200px;
		margin-left:20%;
	}

	.a2 {
		position:absolute;
		margin-top:200px;
		margin-left:40%;
	}

	.a3 {
		margin-top:200px;
		margin-left:60%;
	}

	.a4 {
		margin-top:800px;
		margin-left:20%;
	}

	.a5 {
		margin-top:800px;
		margin-left:40%;
	}

	.a6 {
		margin-top:800px;
		margin-left:60%;
	}

	.a7 {
		margin-top:1400px;
		margin-left:30%;
	}

	.a8 {
		margin-top:1400px;
		margin-left:50%;
	}

	#eyesFilter {
		top:0;
		left:475px;
	}

	#glassesFilter {
		top:0;
		left:600px;
	}

	#mustacheFilter {
		top:0;
		left:725px;
	}

	#shirtFilter {
		top:0;
		left:850px;
	}

	#pantsFilter {
		top:0;
		left:975px;
	}

	/* Media Query */

	@media only screen and (min-width: 0px) and (max-width:600px) {

		#filterbuttonBlock {
			margin-right:45%;
		}

		.aInc {
			margin-left:15%;
		}

		.aRand {
			margin-left:15%;
		}

		.a1 {
			margin-top:200px;
			margin-left:20%;
		}

		.a2 {
			margin-top:800px;
			margin-left:20%;
		}

		.a3 {
			margin-top:1400px;
			margin-left:20%;
		}

		.a4 {
			margin-top:2000px;
			margin-left:20%;
		}

		.a5 {
			margin-top:2600px;
			margin-left:20%;
		}

		.a6 {
			margin-top:3200px;
			margin-left:20%;
		}

		.a7 {
			margin-top:3800px;
			margin-left:20%;
		}

		.a8 {
			margin-top:4400px;
			margin-left:20%;
		}

	}


@media only screen and (min-width: 601px) and (max-width:1000px) {

		#filterbuttonBlock {
			margin-right:45%;
		}

		.aInc {
			margin-left:22%;
		}

		.aRand {
			margin-left:22%;
		}

		.a1 {
			margin-top:200px;
			margin-left:20%;
		}

		.a2 {
			margin-top:800px;
			margin-left:20%;
		}

		.a3 {
			margin-top:1400px;
			margin-left:20%;
		}

		.a4 {
			margin-top:2000px;
			margin-left:20%;
		}

		.a5 {
			margin-top:2600px;
			margin-left:20%;
		}

		.a6 {
			margin-top:3200px;
			margin-left:20%;
		}

		.a7 {
			margin-top:3800px;
			margin-left:20%;
		}

		.a8 {
			margin-top:4400px;
			margin-left:20%;
		}

	}

	@media only screen and (min-width: 1001px) and (max-width:1200px) {
		/*Filter Page*/

		#filterbuttonBlock {
			margin-right:47%;
		}

		.aInc {
			margin-left:27%;
		}

		.aRand {
			margin-left:27%;
		}

		.a1 {
			margin-top:200px;
			margin-left:20%;
		}

		.a2 {
			margin-top:200px;
			margin-left:45%;
		}

		.a3 {
			margin-top:800px;
			margin-left:20%;
		}

		.a4 {
			margin-top:800px;
			margin-left:45%;
		}

		.a5 {
			margin-top:1400px;
			margin-left:20%;
		}

		.a6 {
			margin-top:1400px;
			margin-left:45%;
		}

		.a7 {
			margin-top:2000px;
			margin-left:20%;
		}

		.a8 {
			margin-top:2000px;
			margin-left:45%;
		}
	}

	@media only screen and (min-width: 1201px) and (max-width:1800px) {
		/*Filter Page*/

		#filterbuttonBlock {
			margin-right:45%;
		}

		.a1 {
			margin-top:200px;
			margin-left:20%;
		}

		.a2 {
			margin-top:200px;
			margin-left:45%;
		}

		.a3 {
			margin-top:800px;
			margin-left:20%;
		}

		.a4 {
			margin-top:800px;
			margin-left:45%;
		}

		.a5 {
			margin-top:1400px;
			margin-left:20%;
		}

		.a6 {
			margin-top:1400px;
			margin-left:45%;
		}

		.a7 {
			margin-top:2000px;
			margin-left:20%;
		}

		.a8 {
			margin-top:2000px;
			margin-left:45%;
		}
	}

	@media only screen and (min-width: 1801px) and (max-width:2000px) {
		/*Filter Page*/

		#filterbuttonBlock {
			margin-right:48%;
		}

	}