body:not(.embed) html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

@font-face{
	font-family: ChunkFive;
	src:url(../../fonts/chunkfive.otf),
	url(../../fonts/chunkfive.woff) format('woff')
}

@font-face{
	font-family: BariolRegular;
	src:url(../../fonts/bariol_regular.otf),
	url(../../fonts/bariol_regular.woff) format('woff')
}

@font-face{
	font-family: BariolBold;
	src:url(../../fonts/bariol_bold.otf),
	url(../../fonts/bariol_bold.woff) format('woff')
}

body{
	font-family:BariolRegular;
	margin:0;
}

body:not(.embed){
	background-color:#191919;
}

#game_container button{outline:none;}

strong{
	font-family:BariolBold;
	font-weight:normal;
}

/* this one is just a temporary thing */
body:not(.embed) #content_container{
	margin-top:0px;
	margin-left:200px;
	margin-right:200px;
	padding:20px;
	background-color:#373737;
}

#game_container{
	background-image:url(../images/bg.png);
	width:100%;
	height:70%;
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-color:grey;
	position:relative;
	overflow:hidden;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

#game_stage{
	/*background-color:rgba(0,0,0,.2);*/
	/*border:10px dashed red;*/
	position:absolute;
}

.character{
	position:absolute;
	/*border:2px dashed white;*/
	background-repeat:no-repeat;
	background-size:100% 100%;
	display:none;
	opacity:1;
}

.character.opaque{
	opacity:0.2;
}

.character div.icon{
	position:absolute;
	top:0%;
	right:0%;
	width:40%;
	height:20%;
	background-size:100%;
	background-repeat:no-repeat;
	display:none;
	animation:pulse_heart 2500ms infinite;
}

.character div.icon_immune{background-image:url(../images/icon_immune.png);}
.character div.icon_symptoms{background-image:url(../images/icon_symptoms.gif);background-size:90%;}

.character.symptoms:not(.opaque).opacity_pulse{
	animation:opacity_pulse 1000ms infinite;
	opacity:0.8; /*  fix thi bit - not working */
}

@keyframes opacity_pulse{
	0%{opacity:1;}
	25%{opacity:1;}
	50%{opacity:0.25;}
	75%{opacity:1;}
	100%{opacity:1;}
}

@keyframes pulse_heart{
	0%{padding:0%;}
	40%{padding:0%;}
	50%{padding:2%;}
	60%{padding:2%;}
	100%{padding:0%;}
}

#game_instructions,
#game_question,
#game_over{
	background-color:rgba(0,0,0,0.75);
	position:absolute;
	top:5%;
	width:100%;
	text-align:center;
	color:#FFFFFF;
	padding:5% 0;
	display:none;
}

#game_instructions h1,
#game_question h1,
#game_over h1,
#game_instructions p,
#game_question p,
#game_over p{
	padding:0 5%;
	margin:0 0 1% 0;
}

#game_instructions h1,
#game_over h1{
	font-family:ChunkFive;
	font-size:4vw;
}

#game_question h1{
	font-size:3vw;
}

#game_instructions p,
#game_question p,
#game_over p{
	font-size:100%;
	font-size:1.8vw;
	margin-bottom:2%;
}

#game_instructions button,
#game_question button,
#game_over button{
	font-size:1.8vw;
	background-color:rgba(255,255,255,0.1);
	color:#FFFFFF;
	border:0;
	font-family:ChunkFive;
	border:2px solid #FFFFFF;
	padding:1% 2%;
	border-radius:1000px; /* max px, % is bad */
	cursor:pointer;
	/*transition: all .3s ease-in;*/
}

#game_question button,
#game_over button{
	font-size:2.2vw;
	margin-right:2%;
	margin-top:1%;
	transition: all .1s ease-in;
}

#game_instructions button:hover,
#game_question button:not(.answered):hover,
#game_over button:hover,
#game_over button.clicked{
	background:transparent;
	background-color:rgba(255,255,255,0.9);
	color:#333333;
}

#game_question button:not(.answered):hover{
	box-shadow:0 0 30px #FFFFFF;
}

#game_question button.clicked{box-shadow:0 0 30px #FFFFFF;}
#game_question button.answered.correct{background-color:#1acd02;}
#game_question button.answered.incorrect{/*background-color:#df0606;*/}

#game_instructions button:not(:hover).glow,
#game_over button:not(:hover).glow{
 	animation:glow_on_off 2500ms infinite;
}

#game_question .answer_feedback{
	display:none;
	margin-top:2%;
	font-size:2vw;
	padding:1%;
	position:relative;
}

#game_question .answer_feedback .background{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition-timing-function: linear;
}

#game_question .answer_feedback#correct .background{background-color:#1acd02;}
#game_question .answer_feedback#incorrect .background{background-color:#df0606;}

#game_question .answer_feedback .message{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:transparent;
	padding:1%;
}

@keyframes glow_on_off{
	0%{
		box-shadow:0 0 -10px #FFFFFF;
	}
	50%{
		box-shadow:0 0 30px #FFFFFF;
		background-color:rgba(255,255,255,0.3);
	}
	100%{
		box-shadow:0 0 -10px #FFFFFF;
	}
}

/*.visible{
	opacity:1 !important;
	-webkit-filter: blur(0px) !important;
}*/

#needle_cursor{
	background-image:url(../images/bottle.png);
	background-size:70% 100%;
	position:relative;
	z-index:100;
	overflow:hidden;
	background-repeat:no-repeat;
	display:none;
}

#needle_cursor.down{
	background-image:url(../images/bottle_pour.png);
}

#needle_click{
	background-color:#47ea6c;
	opacity:0.8;
	border-radius:100px;
	animation: needle_click_animation 500ms 1;
	position:absolute;
	z-index:99;
}

@keyframes needle_click_animation{
	0%{
		width:0px;
		height:0px;
	}
	50%{
		width:100px;
		height:100px;
		margin-left:-50px;
		margin-top:-50px;
	}
	100%{
		width:0px;
		height:0px;
	}
}

.cow{
	display:none;
	position:absolute;
	background-image:url("../images/grave.gif");
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.death {
    background-image: url("../images/death.png");
    background-repeat:no-repeat;
    position:absolute;
    background-size:100% 100%;
    height: 120%;
    width: 42%;
    top: 93%;
    left: 30%;
    z-index: 20;
}

#game_timer{
	position:absolute;
	top:0px;
	right:0px;
	color:#FFFFFF;
	margin-top:2%;
	margin-right:5%;
	font-size:300%;
	font-family:ChunkFive;
	background-color:#1acd02;
	font-size:3vw;
	width:12%;
	text-align:center;
	padding:1% 0%;
	border:4px solid rgba(255,255,255,0.5);
	box-shadow:0 0 15px #FFFFFF;
	border-radius:1000px;
	z-index:100;
	transition: all 1s ease-in;
}

#game_container.state_pre_start #game_timer{
	transition:none;
	display:none;
}

/* minimise */
#game_container.state_paused #game_timer{
	margin-top:2%;
	margin-right:3%;
	font-size:2vw;
	width:9%;
	transition:none;
}

#game_timer.amber{background-color:#ea9b03;}

#game_timer.red{
	background-color:#df0606;
}

#game_timer.opacity_pulse{
	animation:opacity_pulse 1000ms infinite;
}

#game_score{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	color:#242424;
	margin-top:3%;
	margin-left:5%;
	font-size:300%;
	font-family:ChunkFive;
	font-size:2.5vw;
	text-shadow:0 0 5px #FFFFFF;
	width:50%;
}

#game_score.pulse{
	animation: score_pulse 1000ms 1;
	font-size:2.5vw;
}

@keyframes score_pulse{
	0%{font-size:2.5vw;}
	20%{font-size:4vw;}
	100%{font-size:2.5vw;}
}

#game_score #game_score_increment{
	font-size:1vw;
	margin-left:1%;
	display:none;
	color:white;
	text-align:right;
	background-color:#1acd02;
	text-shadow:none;
	border-radius:1000px;
	padding:1%;
	border:2px solid rgba(255,255,255,0.5);
	box-shadow:0 0 15px #FFFFFF;
	display:none;
}

#game_container.state_game_over #game_score{
	z-index:100;
}

#game_sound,
#game_fullscreen{
	position:absolute;
	bottom:0px;
	margin:1% 2%;
	width:5%;
	height:7%;
	background-image:url(../images/icon_sound_off.png);
	background-size:100% 100%;
	background-repeat:no-repeat;
	opacity:0.7;
	z-index:100;
	cursor:pointer;
}

#game_sound{
	left:0px;
	background-image:url(../images/icon_sound_off.png);
}

#game_fullscreen{
	right:0px;
	background-image:url(../images/icon_fullscreen_enable.png);
}

#game_fullscreen.fullscreen_disable{
	background-image:url(../images/icon_fullscreen_disable.png);
}

#game_sound:hover,
#game_fullscreen:hover{
	opacity:1;
}

#game_sound.sound_is_on,
#game_sound.sound_is_off:hover{
	background-image:url(../images/icon_sound_off.png);
}

#game_sound.sound_is_off,
#game_sound.sound_is_on:hover{
	background-image:url(../images/icon_sound_on.png);
}

#high_scores{
	display:none;
	text-align:center;
}


#high_scores table{
	width:100%;
	margin-top:2%;
	font-size:1.5vw;
}

#high_scores table tr td:nth-child(1){width:10%;}
#high_scores table tr td:nth-child(2){width:20%;}
#high_scores table tr td:nth-child(3){width:50%;}
#high_scores table tr td:nth-child(4){width:20%;}

#high_scores table tr:nth-child(odd){background-color:rgba(255,255,255,0.2);}
#high_scores table tr:nth-child(even){background-color:rgba(0,0,0,0.2);}

#high_scores table tr:nth-child(1),
#high_scores table tr:nth-child(2),
#high_scores table tr:nth-child(3){
	font-weight:bold;
}

#high_scores table tr:nth-child(1){font-size:2vw;}
#high_scores table tr:nth-child(2){font-size:1.75vw;}
#high_scores table tr:nth-child(3){font-size:1.625vw;}

#high_scores table tr.highlight{background-color:#1acd02;}

#high_score_input{
	display:none;
}


#high_score_input input[type="text"]{
	font-size:1.8vw;
	background-color:rgba(255,255,255,0.5);
	color:rgba(0,0,0,0.9);
	font-family:ChunkFive;
	border:2px solid #FFFFFF;
	padding:1% 2%;
	border-radius:1000px; /* max px, % is bad */
	margin-right:1%;
}

#high_score_input input[type="text"]:hover,
#high_score_input input[type="text"]:focus{
	background-color:rgba(255,255,255,0.75);
}

#credits{
	text-align:center;
	padding:10px;
}

#credits,
#credits a{
	color:#666666;
}

@media (max-width: 1300px){
	
	body:not(.embed) #content_container{
		margin-top:0px;
		margin-left:0px;
		margin-right:0px;
		padding:20px;
		background-color:#373737;
	}
	
}