body { 
	margin:0; 
	padding:0; 
	text-align:center; 
	font-family: Chewy; 
	color:#565f77;
	min-height:100%;
	background:#699dcc url('../img/clouds.jpg') no-repeat;
  	background-repeat: no-repeat;
	background-size: 100%;
	min-width:850px;
}
#header {
	height:75px;	
}
#header h1 {
	color:#fff;
	margin:0 0 0 0;
	padding:10px 0 0 0;
	text-align:left;	
	font-size:50px;
	text-shadow:2px 2px 5px #000;
}
#beta {
	position:absolute;
	margin-top:5px;
	margin-left:290px;
	color:#fff;	
	text-shadow:1px 1px 2px #000;
}
#bodyContainer {
	width:800px;
	margin:0 auto 0 auto;
}

#ctx, .ctx { 
	margin:0;
	width:800px;
	height:500px;

}
@font-face {
  font-family: 'Chewy';
  font-style: normal;
  font-weight: normal;
  src: local('Chewy'), url('../fonts/Chewy.woff') format('woff');
}
.controls {
	padding-bottom:5px;
}
#audio-toggle {
	text-decoration:underline;
	cursor:pointer;
}

#ad {
	width:468px;
	height:60px;
	background-color:#eee;
	box-shadow:1px 1px 5px #000;
	position:absolute;
	margin-top:10px;
	margin-left:340px;	
		
}
#controls, .footer {
	text-align:right;

}
.footer {
	font-size:14px;
	padding:15px 0 20px 0;
	color:#fff;
	text-shadow:1px 1px 2px #1e2a4b;
}

.footer a {
	color:#fff;
	
}
.footer .html5-badge {
width:62px; height:65px; margin-top:-3px; float:right;	
}
#canvasContainer {
	width:800px;
	height:500px;
	background-color:#69a2cf;
	position:relative;
	margin-top:10px;
	border:3px solid #333;
	border-radius:3px;
	box-shadow:2px 2px 10px #1e2a4b;
}
.shareBar {
	float:left; width:400px; text-align:left; background-color:#333; padding:10px 10px 5px 10px; border-radius:5px; box-shadow:1px 1px 4px #1e2a4b;	
}

#overlay {
	color:#fff;
	width:800px;
	height:500px;
	text-align:left; 
	margin:0px;
	
}
::-webkit-scrollbar { height: 12px; width: 12px; background: #111; -webkit-border-radius: 1ex; }
::-webkit-scrollbar-thumb { background: #aac4ff; -webkit-border-radius: 1ex; cursor:pointer; }

.overlayContent {
	padding:30px 50px 20px 50px;	
}
.optionContainer {
	display:block;
	padding:5px;
	background-color:#111;
	border-radius:15px;
	margin-bottom:10px;
}
.optionContainerVertical {
	width:100%;
}
#overlay .intro p, #overlay .intro a {
	color:#69a2cf;
}
#overlay h1 {
	
	font-size:50px;
	margin:0 0 30px 0;
	text-shadow:2px 2px 5px #000;
	height:60px;
	
}

#overlay h2 {
	
	font-size:35px;
	margin:0 0 30px 0;
	text-shadow:2px 2px 5px #000;
	text-align:center; 
	padding-top:55px;
}
#overlay h3 {
	font-size:20px;
	margin:0 0 5px 0;
	text-align:left;
	text-shadow:1px 1px 3px #000;
	color:#d4e0fc;
}
section {
	
	
}
section .contentBox {
	
	background-color:#1d272e; padding:30px; border-radius:10px;
	text-align:left;
	box-shadow:1px 1px 5px #000;
	
}
section.singleCol {
	clear:both;
	
}
section.dualCol {
	width:340px;
	float:left;
}
section.dualCol button.halfFill {
	width:163px;	
}
section.dualCol.thin {
	width:240px;
}

section.dualCol.thin button {

}
section.dualCol.fat {
	width:400px;
}
section.dualCol.right {
	
	float:right;
	
}
button, a.aButton {
	font: 24px Chewy;
	text-shadow:0px 0px 3px #fff;
	color:#294f6a;
	padding:5px 15px;
	border-radius:10px;
	background-color:#e1ebf1;
	border:0px;
	height:50px;
	display:inline-block;
	cursor:pointer;
	text-decoration:none;
	
	background-image: linear-gradient(bottom, rgb(225,235,241) 10%, rgb(255,255,255) 100%);
	background-image: -o-linear-gradient(bottom, rgb(225,235,241) 10%, rgb(255,255,255) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(225,235,241) 10%, rgb(255,255,255) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(225,235,241) 10%, rgb(255,255,255) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(225,235,241) 10%, rgb(255,255,255) 100%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.1, rgb(225,235,241)),
		color-stop(1, rgb(255,255,255))
	);
}
button.disabled {
	background-image: linear-gradient(bottom, rgb(183,190,194) 10%, rgb(224,224,224) 100%);
	background-image: -o-linear-gradient(bottom, rgb(183,190,194) 10%, rgb(224,224,224) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(183,190,194) 10%, rgb(224,224,224) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(183,190,194) 10%, rgb(224,224,224) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(183,190,194) 10%, rgb(224,224,224) 100%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.1, rgb(183,190,194)),
		color-stop(1, rgb(224,224,224))
	);	
	color:#888;
}
.optionContainer button, a.aButton {
	box-shadow:0px 0px 5px #000;
}

/* vertical */
.optionContainerVertical button {
	display:block;
	width:100%;	
	border-radius:0;
	margin-bottom:2px;	
}
.optionContainerVertical button:first-child {
	border-radius:10px 10px 0 0;	
}
.optionContainerVertical button:last-child {
	border-radius:0 0 10px 10px;	
	margin-bottom:0px;
}


/* horozontal */
.optionContainer.optionContainerHorozontal button {
	border-radius:0;	
	margin: 0;
}
.optionContainer.optionContainerHorozontal button:first-child {
	border-radius:10px 0 0 10px;	
}
.optionContainer.optionContainerHorozontal button:last-child {
	border-radius:0 10px 10px 0;	
	margin-right:0;
}


button.small {
	font-size:14px; padding:5px 10px; height:30px; width:75px;	
}

.optionContainer button:focus, button:hover, .tabHeader .tabs button.on, .tabHeader .tabs button:hover, button.small.on, a.aButton:hover {
	color:#111;
	background-image: linear-gradient(bottom, rgb(255,254,166) 10%, rgb(255,255,255) 100%);
	background-image: -o-linear-gradient(bottom, rgb(255,254,166) 10%, rgb(255,255,255) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(255,254,166) 10%, rgb(255,255,255) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(255,254,166) 10%, rgb(255,255,255) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(255,254,166) 10%, rgb(255,255,255) 100%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.1, rgb(255,254,166)),
		color-stop(1, rgb(255,255,255))
	);
}

button span.extra {
	
	color:#aaa;
	font-size:0.8em;
	
}
section.singleCol .optionContainer {
	margin:0 auto 0 auto;
}
table.gameStats, table.leaderBoard, table.gameStatsLight, .darkContainer {
	
	background-color:#333;
	width:100%;
	padding:10px;
	border-radius:10px;
	text-shadow:1px 1px 3px #000;
}
table.gameStatsLight, .lightContainer {
	background-color:#eee;	
	border-radius:10px;
	padding:10px;
	text-shadow:1px 1px 3px #fff;
}
.lightContainer {
	color:#0080ae;
	text-shadow:1px 1px 3px #fff;	
}
.darkContainer { 
	width:auto;	
	color:#c4d7ff;
}
.lightContainer ul {
	margin:5px 10px;	
}

#overlay .lightContainer h3, #overlay .tutorial h3 {
	
	text-shadow:1px 1px 3px #fff;
	color:#333;
	margin-bottom:0;
}
.tutorial {
	text-shadow:0 0 0;
	color:#333;
	text-align:left;width:300px; margin:80x auto 0 20px;
	font-size:1.2em;
	width:400px;
}
#overlay .tutorial h3 { font-size:24px;
	text-shadow:0 0 0;	
	color:#555; }

#tutorial-description {
	margin:5px 0 5px;	
	color:#888;
}
.tutorial .objective {
	color:#0080ae;	
}
.tutorial .keyPress {
	color:#dc6400;	
}
.tutorial .hide {
	display:none;	
}

.gameStats td.label, .leaderBoard td.label {
	color:#999;
	text-align:right;
	
}
table.gameStatsLight td.label {
	color:#777;	
	width:130px;
}
.gameStats td, .leaderBoard td {
	color:#fff;
	padding:3px;
	
}
table.gameStatsLight td {
	color:#0080ae;	
}
.leaderboard th {
	height:210px;
	text-align:center;
	font-size:25px;
	color:#aaa;	
	text-shadow:1px 1px 3px #000;
}
.gameStats td span.extra, .leaderBoard td span.extra {
	color:#666;
	font-size:0.9em;
}

label {
	display:block;
	color:#aaa;
	margin-bottom:3px;
}
input[type=text], input[type=password] {
	
	padding:5px;
	width:330px;
	border:0px;
	border-radius:5px;
	margin-bottom:10px;
	font-size:15px;
	
}