html, body {
margin: 			0px;
padding: 			0px;
height: 			100%;
border: 			none;
}

body {
background-color: #000;
}

a:link          	{color: #36f;}
a:visited       	{color: #36f;}
a:hover         	{color: #69f;}

.logo {
display: 			inline-block;
float: 				left;
margin:				0px 15px;
}

@font-face {
font-family: monocraft;
src: url('Monocraft.otf');
}

h1.title {
display: 			inline-block;
font-weight: 		normal;
margin: 			0 0 0 24px;
text-transform: 	uppercase;
}

.text {
font-family: Monocraft, san serif;
font-size: 18px;
line-height: 20px;
color: #fff;
text-shadow: 2px 2px #000;
}

.arial {
font-family: Arial, san serif;
font-size: 22px;
letter-spacing: 1px;
}

#sound {
cursor: pointer;
background: #000;
position: absolute;
z-index: 20;
margin-left: 1px;
}

#mainMenu, #endScreen {
display: none;
margin: 150px auto 0 auto;
height: 300px;
width: 500px;
background: #000;
border-collapse: collapse;
border: 2px solid white;
}

.button {
cursor: pointer;
}

.menuButton {
cursor: pointer;
width: 200px;
background-color: #000;
color: #fff;
border: 2px solid white;
text-align: center;
height: 30px;
line-height: 30px;
margin: 12px;
}

.menuButton:hover {
background-color: #222;
}

#font, #mode {
line-height: 36px;
}

#haze {
position: absolute;
margin-left: 1px;
z-index: 10;
}

#meteor {
position: 			absolute;
display: 			none;
}

#explosion {
position: 			absolute;
display: 			none;
}

#projectile {
display: 			none;
position:  			absolute; 
}

@keyframes shake {
	from {transform: translateX(0px); }
	to {transform: translateX(5px); }
}

@keyframes flyby {
	from {left: -200px;}
	to {left: +800px;}
}

#cannon {
position: 			absolute;
top: 				+505px;
left: 				+338px;
z-index: 			5;
}

#scoreBar {
position:  			relative;
padding: 			0px;
z-index: 			1;
}

#h1, #h2, #h3, #h4, #h5 {
margin: 			2px 2px -1px 2px;
}

#p1, #p2, #p3, #p4, #p5 {
margin: 			2px 1px -1px 1px;
}

#score {
display: 			inline-block;
margin: 			0 12px 0 0;
color: 				#ff0;
}

#prompt {
display: 			block;
width: 				780px;
padding: 			12px 0px;
text-align: 		left;
white-space: 		nowrap;
overflow: 			hidden;
text-overflow: 		ellipsis;
}

#entry {
width: 				680px;
height: 			40px;
background-color: 	#222;
border: 			2px solid #0f3;
padding: 			4px 16px;
margin: 			0 10px 10px 0;
}

.num {
margin-bottom: 4px;
}

.answer {
display: 			inline-block;
width: 				335px;
background-color: 	#222;
border: 			1px solid #fff;
margin-left: 		8px;
padding: 			4px 4px 4px 8px;
cursor: 			pointer;
text-align: 		left;
white-space: 		nowrap;
overflow: 			hidden;
text-overflow: 		ellipsis;
}

.correctAns {
color: 				#000 !important;
background-color: 	#0f3 !important;
border-color: 		#000;
text-shadow: 		none;
animation: blink .5s step-end 1s infinite alternate;
}

@keyframes blink {
	0%   { border-color: 	#000; }
	50%  { border-color: 	#0f3; }
	}

.share {
font-family:		Arial, Helvetica, sans-serif;
font-size:			14px;
margin:				10px;
}

.share:link         {color: #999;}
.share:visited      {color: #999;}
.share:hover        {color: #bbb;}

.shareOptions {
margin:				18px 0px;
}

.shareOptions td {
padding:			0px 10px;
}

.linkBox {
width: 				450px;
font-size: 			14px;
background-color: 	#eee;
border: 			1px solid #ccc;
padding: 			4px;
margin: 			8px 0px 0px 0px;
}

.copyright {
font-size:			11px;
color:				#999;
margin:				10px;
text-shadow: 		1px 1px #000;
}

#instructions {
font-family:		Arial, Helvetica, sans-serif;
font-size:			14px;
line-height:		100%;
height: 			26px;
background-color: 	#fffdd4;
}

@media (hover) {
	.answer:hover {
		border-color: 		#0f3;
		color: 				#0f3;
		background-color: 	#111;
		}
	}