@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(Quicksand.woff) format('woff');
}

body {
	background-color:#eee;
	overflow:hidden;
	font-family:"Quicksand",serif;
}

#dummybox {
	display:none;
}

/* preloader */

#preloader {
	z-index:9999999;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#444;
}
#prebox {
	position:relative;
	width:100%;
	text-align:center;
	color:#fff;
}
#prebox .swarm {
	font-size:45px;
}
#loadfly {
	width:50px;
	height:50px;
	margin:0px auto;
	position:relative;
}
#loadfly img {
	position:absolute;
}
#loadbar {
	margin:0px auto;
	width:450px;
	height:45px;
	border:1px #fff solid;
	position:relative;
	text-align:center;
}
#loadbar2 {
	position:absolute;
	left:0;
	top:0;
	width:0;
	height:100%;
	background:#888;
}
#loadbar span {
	position:relative;
	top:8px;
	font-size:20px;
}

/* index */
#mm .menuimg {
	position:absolute;
	top:260px;
	cursor:pointer;
  -webkit-transition: all 0.3s ease-out; 
     -moz-transition: all 0.3s ease-out; 
       -o-transition: all 0.3s ease-out; 
          transition: all 0.3s ease-out;
}
#mm .start {
	left:75px;
}
#mm .achievements {
	left:250px;
}
#mm .options {
	left:425px;
}
#mm .menuimg:hover {
	opacity:0.5;
	top:270px;
}
#game {
	position:absolute;
	top:0;
	left:0;
	display:none;
	-moz-box-shadow: 5px 5px 5px #007;
	-webkit-box-shadow: 5px 5px 5px #007;
	box-shadow: 5px 5px 5px #007;
}

#cv {
	position:absolute;
	top:0;
	left:0;
}

#game #pause {
	width:300px;
	height:200px;
	background:#eee;
	border:1px solid black;
	position:absolute;
	top:0;
	left:0;
	display:none;
	opacity:0;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

#game #pause .header {
	font-size:50px;
	position:absolute;
	top:10px;
	left:75px;
}

#game #pause input {
	position:absolute;
	width:220px;
	height:30px;
	font-family:"Quicksand",serif;
	font-size:20px;
	background:#ddd;
	border:1px #aaa solid;
}

#game #pause .resume {
	top:80px;
	left:40px;
}
#game #pause .option {
	top:110px;
	left:40px;
}
#game #pause .return {
	top:140px;
	left:40px;
}
#game #pause .qsave {
	top:170px;
	left:40px;
	display:none;
}

/* main menu */

#mm_background {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#eee;
	z-index:-1;
}
#mm {
	position:absolute;
	width:600px;
	height:500px;
	background-color:#000;
	-moz-box-shadow: 5px 5px 5px #007;
	-webkit-box-shadow: 5px 5px 5px #007;
	box-shadow: 5px 5px 5px #007;
	color:#fff;
}
.dropletter {
	position:absolute;
	font-family: monospace;
	color: #eee;
}
.mm_fly {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	font-size: 1;
	background-color: rgb(50,50,255);
	width: 4px;
	height: 4px;
	border: 1px solid #888;
}
#mm #credits {
	position:absolute;
	left:15px;
	bottom:11px;
	font-family:"Quicksand",serif;
	font-size:14px;
}
#mm #credits #rl, #mm #credits #si {
	text-decoration:underline;
	color:#fff;
	cursor:pointer;
}
#mm #credits #rl:hover, #mm #credits #si:hover {
	color:#999;
}
#mm #credits #rl_, #mm #credits #si_ {
	color:#77c;
}

/* selection menu */

#sel {
	position:absolute;
	width:600px;
	height:500px;
	background-color:#000;
	-moz-box-shadow: 5px 5px 5px #007;
	-webkit-box-shadow: 5px 5px 5px #007;
	box-shadow: 5px 5px 5px #007;
	color:#fff;
	display:none;
}
#sel canvas {
	position:absolute;
	top:0;
	left:0;
}
#sel #chal {
	font-family:"Quicksand",serif;
	position:absolute;
	top:50px;
	left:50px;
	width : 500px;
	height : 400px;
	background:#bbb;
	color:#000;
	display:none;
}
#chal h3 {
	padding : 0;
	margin: 0;
	position:absolute;
	top:14;
	left:0;
	width:500px;
	text-align:center;
	font-size:25px;
}
#chal .box {
	position:absolute;
	top:60;
	left:20;
	width:460;
	height:320;
	background:#ccc;
	overflow-y:scroll;
	overflow-x:hidden;
	margin:0;
	padding:0;
}
#chal .box div {
	margin:0;
	padding:5px;
	width:450px;
	text-align:center;
	cursor:pointer;
}
#chal .box div:hover {
	background:#333;
	color:#fff;
}
#chal .x {
	position:absolute;
	top:3px;
	right:3px;
	font-size:15px;
	cursor:pointer;
}

/* options menu */

#options, #options #cover {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#options {
	display:none;
	z-index:10;
}

#options #cover {
	background-color:rgba(0,0,0,0.5);
}

#options canvas {
	position:absolute;
	border:2px solid;
}

/* achievements menu */

#ach, #ach #cover {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#ach {
	display:none;
	z-index:10;
}

#ach #cover {
	background-color:rgba(0,0,0,0.5);
}

#ach canvas {
	position:absolute;
	border:2px solid;
}
.ach {
	font-family:"Quicksand",serif;
	position:absolute;
	width : 500px;
	height : 400px;
	background:#bbb;
	color:#000;
}
.ach h3 {
	padding : 0;
	margin: 0;
	position:absolute;
	top:14;
	left:0;
	width:500px;
	text-align:center;
	font-size:25px;
}
.ach .all, .ach .f, .ach .unf {
	position:absolute;
	top:50px;
	text-align:center;
	width:30px;
	height:16px;
	cursor:pointer;
	border:1px #000 solid;
	padding: 1px;
}
.ach .all {
	left:27;
}
.ach .f {
	left:67;
	font-weight:bold;
	background:#0f0;
}
.ach .unf {
	left:107;
	font-weight:bold;
	background:#f00;
}
.ach .box {
	position:absolute;
	top:80;
	left:20;
	width:460;
	height:300;
	background:#ccc;
	overflow-y:scroll;
	overflow-x:hidden;
	margin:0;
	padding:0;
}
.ach .x {
	position:absolute;
	top:3px;
	right:3px;
	font-size:15px;
	cursor:pointer;
}

/* help menu */

#help {
	width : 300px;
	height : 300px;
	position:absolute;
	left: -302px;
	top : 0px;
	background: #ddd;
	font-family:"Quicksand",serif;
	font-size:14px;
	overflow:visible;
	border:1px solid;
}

#help #content {
	padding: 4px;
	width : 292px;
	height : 292px;
	position:absolute;
	left: 0px;
	top : 0px;
	overflow-y:scroll;
}

#help #bar {
	position:absolute;
	left:300px;
	top:-1px;
	font-size:25px;
	width:20px;
	heiht:30px;
	background: #ddd;
	padding-left:3px;
	border:1px solid;
	cursor:pointer;
}