/*------------------ FOR ALL INTERFACE ELEMENTS ------------------*/

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,100);

html *
{
   color: #fff !important;
   font-family: 'Roboto' !important;

}

/* 
body{
	background-image: url('../img/town.jpg');
	background-repeat: no-repeat;
}
 */

html { 
  background: url('../img/wallpaper.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#container {
	width: 1000px;
	height: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top:2%;
	position: relative;
	overflow:hidden;	
	margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.glow {
	border: 1px solid rgba(39,245,176,0.8);
	-moz-box-shadow: 0 0 10px #A9F5F2;
	-webkit-box-shadow: 0 0 10px #A9F5F2;
	box-shadow: 0px 0px 10px #A9F5F2;
}

.text-glow {
	text-shadow:-2px 0 0px rgba(0, 0, 225, 0.4), -1px 0 3px rgba(103, 171, 236, 0.6), 1px 0 4px rgba(69, 112, 204, 0.5)
}

#title {
	z-index:9999;
	position:absolute;
	margin-left:auto;
	margin-right:auto;
	top:200px;
	left:50px;
	color:#fff;
	font-family:'Roboto';
}

#title h1{
	font-weight:800px;
	font-size:50px;
}

#title h3{
	font-weight:700px;
	font-size:14px;
}



body {
    padding-bottom: 20px;
}

.bg {
	z-index:-999;
	position:absolute;

	
}


.bg, .character, .dialogue-box, .nextText span, .nextText, .slide h3, .slide p, .restart-button, .continue-button, .bug, .bone-box, .spine-box, .moving-bone, .audio-box img  {
-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
}

.character {
	z-index:0;
	position:absolute;
}

.dialogue-box {
	z-index:999;
	position:absolute;
	width:1000px;
	height:50px;
	background-color:rgba(0,0,0,0.5);
	bottom:0;
	padding:20px;
}

.dialogue-box .nextText span, .nextText {
	color:#d4f8e3;
	font-family:'Roboto';
	font-size:18px;
	word-wrap:break-word;
}



.nextButton, .skipButton {
	position: absolute;
  	text-align: center;
	color: #96FFDD;
  	cursor: pointer;
  	z-index: 4;
  	font-family:'Roboto';
  	font-size:20px;
  	padding:3px 7px 3px 7px;
	border-radius:4px;
	right:0px
}


.nextButton:hover, .skipButton:hover {
	border:1px solid white;
	color: #04E1C0;
	-webkit-transition:0.2s all ease;
	-o-kit-transition:0.2s all ease;
	-ie-kit-transition:0.2s all ease;
	-moz-kit-transition:0.2s all ease;
}

.nextButton {
  	bottom: 30px;
  	right: 68px;
}
.skipButton {
	top:20px;
	right:22px;
}


.timer {
	width: 300px;
	height:10px;
	-moz-box-shadow: 0 0 5px #fff;
	-webkit-box-shadow: 0 0 5px #fff;
	box-shadow: 0px 0px 5px #fff;
	background-color: white;
	position:absolute;
	padding:3px;
	color:#fff;
	position:absolute;
	z-index:5;
}

.time-container {
	z-index:999;
	position:absolute;
	background-color:rgba(0,0,0,0.2);
	display:block;
	width:306px;
	height:16px;
	margin:10px;
}

.timeLabel {
	color:#ffffff;
	font-weight:400;
	font-size:18px;
	padding-top:5px;
}

.healthbar {
	width:650px;
	height:10px;
	position:absolute;
	z-index:10;
	background-color:#30F779;
	padding:3px;
}

.health-container {
	z-index:5;
	position:absolute;
	background-color:rgba(0,0,0,0.2);
	display:block;
	width:656px;
	height:16px;
	margin:10px;
	left:320px;
}

.healthLabel {
	color:#ffffff;
	font-weight:400;
	font-size:18px;
	padding-top:5px;
	right:0px;
	position:absolute;
}


.score {
	color:#fff;
	position:absolute;
	top:40px;
	left:40px;
	z-index:5;
	font-size:24px;
	font-weight:400;
	z-index:999;
}

.score-container {
	top:60px;
	width:100px;
	height:100px;
	position:absolute;
	border-radius:100px;
	margin:15px;
	z-index:999;
}

.audio-box {
	position:absolute;
	top:180px;
	margin:20px;
	z-index:4;
}

.audio-box-normal {
	position:absolute;
	top:0px;
	margin:20px;
	z-index:4;
}

.slide {
	width:1000px;
	height:600px;
	display:none;
	position:absolute;
	z-index:50;
}

.red-slide {
	background-color:rgba(255,0,0,0.5);
}

.green-slide {
	background-color:rgba(48,247,121,0.5);
}

.slide h3 {
	padding:20px;
	font-weight:300;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	font-size:36px;
	position: relative;
  	top: 40%;
  	transform: translateY(-50%);
}

.slide p {
	font-weight:300;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	font-size:18px;
	position: relative;
  	top: 33%;
  	transform: translateY(-50%);
}

.restart-button, .continue-button {
	position: relative;
	top:32%;
  	text-decoration:none;
  	margin-left:auto;
  	margin-right:auto;
  	font-size:24px;
  	font-weight:300;
  	text-align:center;
  	display:block;
  	cursor:pointer;
}

.restart-button a, .continue-button a {
	text-decoration:none;
}

.3D-iframe {
	position:absolute;
	top:-100px;
}

.patient-frame {
	width:586px;
	height:25px;
	background-color:#24AC7F;
	position:absolute;
	top:20px;
	left:20px;
	padding:7px;
}

.patient-card {
	width:320px;
	height:420px;
	position:absolute;
	right:20px;
	top:20px;
	padding:20px;
	background-color:rgba(0,0,0,0.5);
}

.patient-card h3{
	font-family:'Roboto';
	font-weight:300;
	line-height:0px;
}


.patient-card-container {
	display:none;
}

.dialogue-box#credits {
	background-color:rgba(0,0,0,0.4);
	top:100px;
	width:500px;
	height:200px;
	text-align:center;
	left:25%;
	border-radius:7px;
	display:block;
	word-wrap:break-word;
	-webkit-transition:0.2s all ease;
	-o-kit-transition:0.2s all ease;
	-ie-kit-transition:0.2s all ease;
	-moz-kit-transition:0.2s all ease;
}