html{
height: 100%;
width: 100%;
font-family:Arial,Sans-Serif;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
}
body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
	background-image:url(../images/bg-desert.jpg);
	background-size:100%;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-color:#C67323;
}
#orientation-alert{
	height:100%;
	width:100% !important;
	position:absolute;
	top:0;
	left:0;
	text-align:center;
	z-index:1000000;
	background-color:#FFF;
}
img{
	border:none;
}
#splash-screen,#progress-screen{
	position:absolute;
	z-index:1000;
	top:0px;
	left:0px;
	width:100%;
	max-height:300%;
	height:125%;
	padding-top:5%;
	background-color:#C67323;
	text-align:center;
	color:yellow;
	font-weight:bold;
	font-size:28px;
}
#splash-screen{
	height: 200%;
}
#progress-screen{
	display:none;
	position:relative;
}
#progress-screen-text-container{
	background-color:#A68064;
}
#progress-screen-text{
	padding:20px;
	background-color:light-brown;
	border:1px solid light-brown;
	border-radius:8px;
}
#correct-answers,#incorrect-answers,#score-this-level,
#score-bonus-meter,#badges-earned,#save,
#continue,#main-menu,#rank,#new-title,#score-previous-total{
	display:none;
}
#new-title{
	max-width:400px;
	margin:auto;
	margin-top:10px;
	z-index:10000;
	background-color:yellow;
	color:brown;
	padding:25px;	
	border:3px solid red;
	border-radius:12px;
}
#rank-close-ok,#game-finish-home-button{
	padding:10px;
	background-color:gray;
	color:black;
}
#continue{
	margin-top:20px;
	padding:10px;
	border:1px solid yellow;
	border-radius:10px;
	max-width:200px;
	margin:auto;
}
.splash-screen-text,#play-button,.level-picker,.level,#timer,#game-over,#play-again-button,h1,#progress-screen{
/*	font-family:Unibody8Pro-Regular, pixelmix, V5PRD, sans-serif; */
	font-family: Calibri,Arial,Sans-Serif;
}

.splash-screen-text{
	padding:20px;
	width:600px;
	max-width:90%;
	margin:auto;
	margin-top:20px;

}
#play-button{
	background-color:yellow;
	border:1px solid yellow;
	font-size:38px;
	border-radius:12px;
	color:red;
	max-width:200px;
	margin:auto;
	padding:20px;
	margin-top:40px;	
	font-size:1.5em;
}
.level-picker{
	min-width:200px;
	max-width:400px;
	margin:auto;
	margin-top:40px;	
	font-size:14px;
}
#level-buttons,.level-buttons{
	width:400px;
	max-width:90%;
	margin:auto;
	margin-bottom:8%;
}
.level-buttons{
	min-height:40px;
}
.level{
/*	float:left;	*/
	display:inline;
	max-width: 7%;
	margin-left:10px;
	padding:2%;
	font-weight:bold;
	border-radius:12px;
	font-size:1em;
}
#game-over div .level{
	margin-left:5px !important;
}
#game-over .level-picker{
	max-width:105% !important; // but nothin'
}
#play-again-button,.continue-button{
	background-color:yellow;
	border:1px solid yellow;
	font-size:18px;
	border-radius:8px;
	color:red;
	max-width:30%;
	margin:auto;
	padding:10px;
	text-align:center;
}
#game-over{
	z-index:1;
	position:absolute;
	top:0px;
	left:25%;  
	width:50%;
	height:200% !important;
/*	height:50%; */
/*	max-height:90%; */
	margin:auto;
	margin-top:5%;
	background-color:green;
	color:yellow;
	font-weight:bold;
	font-family:sans-serif;
	padding:80px;
	display:none;
	border: 1px solid green;
	border-radius:12px;
}
#game-container{
position:relative;
max-width: 768px;
margin: auto;
/*border: 1px solid #999;*/
height: 100%;
}
#game-header{
height: 10%;
color: #fff;
/*background-color: maroon;*/
}
#nav-elements{
	max-width:768px;
	margin:auto;
	padding:5px;
	background-color:yellow;
	height:30px;
}
#nav-left-column,#nav-center-column,#nav-right-column{
	width: 33%;
	float:left;
}
#nav-left-column{
	text-align: left;
}
#nav-center-column{
	text-align: center;
	height:1px;
}
#nav-right-column{
	text-align: right;
}
#header-home-button{
	float:left;
	max-width:50px;
}
#header-back-to-playworks{

}
#timer-area{
	width:29%;
	height:98%;
	float:left;
/*	border:1px dotted red;
	border-radius:12px; */
	color:black;
	text-align:center;
	font-size:38px;
}
#timer,#score-area{
	margin-top:5px;
	text-shadow:1px 1px 4px rgba(0,0,0,.3);
}
#score-area{
	float:right;
	margin-right: 20px;
	color:green;
}
.timer-label{
	font-size:14px;
	border:none !important;
}
#logo{
	width:50%;
	margin-left:10%;
	height:100%;
	float:left;
/*	background-color:white; */
}
#game-body{
position:relative;
padding-top:5%;
height:70%;
/*background-color: orange;*/
color: white;
}
#game-play-area{
width: 70%;
height: 100%;
/*background-color: green;*/
float:left;
position:relative;
}

#bonus-area-computer-tablet{
width:8%;
height: 80%;
display: inline;
float: left;
background-color: yellow;
color:yellow;
margin-left:2%;
margin-right:20%;
margin-top:5%;
}
#bonus-area-phone{
	display:none;
	width:8%;
	height: 100%;
	float: left;
	background-color: yellow;
	color:yellow;
}
.thermometer{
	position:relative;
/*	float:left; */
	background-color:yellow;
/*	border:1px solid blue; */
	height:100%;
	background-image:url(../images/mercury.png);
	background-size:100% 10%;
	background-position:0% 100%;
	background-repeat:no-repeat;
}
#mercury{
	position:absolute;
	display:none;
	background-color:red;
	border:1px solid red;
	height:50%;
	width:99%;
	left:-2%;
	bottom:-1px;
}
#buttons-area{
width:80%;
margin: auto;
/*background-color: #cccccc;*/
height: 100%;
position:relative;
}
#correctAlert{
	display:none;
	position:absolute;
	z-index:1;
	width:250px;
	height:100px;
	top:-90px;
	left:0px;
	background-image:url(../images/correct.png);
	background-repeat:no-repeat;
	background-position:center center;
}
#q-column, #a-column{
width: 45%;
height: 100%;
float:left;
/*background-color: #ffffff;*/
color:#cccccc;
}
#a-column{
margin-left:10%;
}
.column-header-p,.column-header-a{
/*
	width:100%;
	padding:5px;
	font-weight:bold;
	background-color:yellow;
*/
}
.column-header-p{
	color:green;
}
.column-header-a{
	color:green;
	text-align:right;
}
.q,.a{
	color:#ffffff;
	width:98%;
	height:17%;
	margin-top:6%;
	background-color:red;
	border:1% solid yellow;
	border-radius:12px;
	text-align:center;
}
.box-table{
	width:100%;
	height:100%;
	font-weight:bold;
	font-size:1.5em;
	font-family:sans-serif;
}
.box-cell{
	text-align:center;
	vertical-align:middle;
}
.bonus-text{
	position:relative;
	top:-60px;
	margin-left:60px;
	float:left;
	font-size:1.5em;
	font-weight:bold;
	text-shadow: 2px 2px 2px red;
	transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
}
.neutral{
	background-color:orange;
	border:3px solid orange;
	color:yellow;
}
.level-neutral{
	color:yellow;
	background-color:red;
	border:3px solid red;	
}
.selected{
	background-color:yellow;
	border:3px dotted orange;
	color:black;
/*	box-shadow:0px 0px 40px orange; */
}
.correct{
	background-color:green;
	border:3px solid yellow;
	color:yellow;
/*	box-shadow:1px 1px 40px yellow; */
}
.incorrect{
	background-color:red;
	border:3px solid red;
	color:yellow;
}
.disabled{
	background-color:#cccccc;
	border:3px solid #cccccc;
	color:#999999;
}