@charset "utf-8";
/* CSS Document */


body {
	background:url(../images/background.JPG) top center;
	font-family:'Open Sans',sans-serif; font-size:100%;
	}


#headerCont{height:50px; background-color:#a8c656; box-shadow:0px 2px 4px rgba(0,0,0,.5); }

#header h2 {height:50px; text-align:left; color:#FFF; line-height:50px; z-index:99;}

#info{
	position:absolute;
	display:none;
	width:100%;
	left:0;
	background-color:#FFF;
	text-align:left;
	margin:0 auto;
	padding:4%;
	z-index:9999;
	box-shadow:0px 2px 4px #000;

}



#controls{
	float:right;
	position:absolute;
	right:30px;
	top:5px;}

.controlBtn{
	display:inline-block;
	cursor:pointer;
	background-color:#FFF;
	background-position:top left;
	background-size:25px 25px;
	width:25px;
	height:25px;}


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





.btn {	
	float:left;
	margin-left:4%;
	margin-right:4%;
	margin-top:12px;
	margin-bottom:12px;
	width:25%; 
	height:80px;
	background-color:#e2a853;
	padding:12px auto;
	line-height:80px;
	color:#FFF;
	text-align:center;
	font-weight:bold;
	cursor:pointer;

}

.btn:hover{color:#222; box-shadow:0px 3px 3px #222;}


#footer {
	position:fixed;
	bottom:0; 
	width:100%; 
	background-color:#778691; 
	height:40px;
	color:#FFF; 
	text-align:center; 
	line-height:30px;}


#stage{
	width:100%;
	display:table;
	position:relative;
	 
	}


#popUp  {
	display:none;
	position:absolute;
	width:80%;
	bottom:10%;
	left:10%;
	background-color:#FFF;
	padding:20px;
	border:solid 12px #e2a853;
	
	
	
	}

div[id*="Btn"] {
	cursor:pointer;
}


#timeCount{margin-top:200px;}

.boxCorrect{background-color:#093}
.ui-draggable-dragging {background-color:#F2DAB5;}

.onHover {background-color:#000}




/* Float Shadow */

.float-shadow {

  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.float-shadow:before {
	 
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
}

.float-shadow:hover {
	 
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
  
  -webkit-transform: scale(1.1) rotate(4deg);
  -ms-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);
  /* move the element up by 5px */
}

.float-shadow:hover:before {
	 
  opacity: 1;
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
  -webkit-transform: scale(1) rotate(0deg);
  -ms-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}







/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	

	#timeCount{margin-top:0}
	
	.btn{
	height:80px;
	line-height:80px;
	
	}
	
	
	
/* Styles */
}