/* ===== GENERAL ===== */
body, html {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	background: #008;
	
	font-family:'Gotham Rounded A', 'Gotham Rounded B', sans-serif;
	font-style:normal;
	font-size: 32px;
	
	color: #fff;
	
	/* disable text selection and div highlighting */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.displaynone {display: none;}

.diffpanel{
	position:relative;
	z-index:1;

	margin-top:16px;
	margin-left: 10%;
	margin-right: 10%;
	padding: 2%;

	background-color: #015965;
	border: 8px #fff solid;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
}

.diffpanelcontent{
	display:inline-block;
	text-align: left;
}

.diffbutton
	{
		display:inline-block;
		height: 48px;
		margin-top:16px;
		-webkit-box-shadow:5px 5px 0 0 rgba(0,0,0,0.15);
		-webkit-transition:.1s;
		background:#03899c;
		
		border-width: 4px;
		border-style: solid;
		border-color: #03899c;
		border-radius:10px;
		
		padding-top:8px;
		padding-bottom:8px;
 
		box-shadow:5px 5px 0 0 rgba(0,0,0,0.15);
		color:#FFF;

		outline:0;
		position:relative;
		transition:.1s;
		white-space:nowrap;

	}
	
	.diffbutton:not(.disabled):hover,.diffbutton:not(.disabled):focus
	{
		-webkit-box-shadow:5px 5px 0 0 rgba(0,0,0,0.1);
		background:#FFF;
		box-shadow:5px 5px 0 0 rgba(0,0,0,0.1);
		color:#03899c;
	}
	
	.diffbutton:not(.disabled):active
	{
		-ms-transform:translate(1px,4px);
		-webkit-box-shadow:0 0 0 0 rgba(0,0,0,0.5);
		-webkit-transform:translate(1px,4px);
		box-shadow:0 0 0 0 rgba(0,0,0,0.5);
		transform:translate(1px,4px);
	}
	
	.diffbutton.disabled
	{
		cursor:auto;
		opacity:0.5;
	}
	
	.diffbutton.disabled:hover,.diffbutton.disabled:focus
	{
		color:#FFF;
	}
	
	.btnnormal
	{
		width: 256px;
	}
	.btnsmall
	{
		width: 48px;
	}


/* ===== MAIN MENU AND HIGHSCORES ===== */
#menuarea {
	width: 100%;
	height: 100%;
	
	background: transparent url(../img/background.jpg) no-repeat 50% 0;
	background-size: cover;
	background-position: center;

	text-align: center;	
}

#logo img{
	display:inline-block;
	height: 200px;
	margin-top:16px;
}

#mainmenu{
	position:relative;
	margin-top:48px;
}

#mainmenuabout{
	position:fixed;
	bottom:16px;
	right:16px;
}

#copyrightnotice{
	position:absolute;
	bottom:0;
	width:100%;
}

#versioninfo{
	text-align: center;
}

#highscores{
	position:relative;
	z-index:1;
	clear:both;
}

/* ===== HIGHSCORE TABLE ===== */

.difftable {
	padding:0px;
	margin-left: 10%;
	margin-right: 10%;
	
	box-shadow: 10px 10px 0 0 rgba(0,0,0,0.1);

	background-color:#fff;
	
}.difftable table{
	border-collapse: collapse;
	border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}

.difftable td{
	vertical-align:middle;

	border:1px solid #000000;
	border-width:1px 1px 1px 1px;
	text-align:left;
	padding:6px;

	color:#000000;
}
.difftablescore td:nth-child(1){
	text-align:center;
	width:10%;
}
.difftablescore td:nth-child(2){
	width:45%;
}
.difftablescore td:nth-child(3){
	text-align:right;
	width:45%;
}

.difftable tr:first-child td{
	background:-o-linear-gradient(bottom, #03899c 5%, #1f6b75 100%);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #03899c), color-stop(1, #1f6b75) );
	background:-moz-linear-gradient( center top, #03899c 5%, #1f6b75 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#03899c", endColorstr="#1f6b75");
	background: -o-linear-gradient(top,#03899c,1f6b75);

	background-color:#03899c;
	text-align:center;
	color:#ffffff;
}

.difftabledebug td:nth-child(1){
	width:80%;
}
.difftabledebug td:nth-child(2){
	text-align:center;
	width:10%;
}
.difftabledebug td:nth-child(3){
	text-align:center;
	width:10%;
}


/* ===== IN-GAME AND GAMEPLAY ===== */
#gamearea {
	width: 100%;
	height: 100%;

	background:-o-linear-gradient(bottom, #a68700 5%, #ffcf00 100%);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a68700), color-stop(1, #ffcf00) );
	background:-moz-linear-gradient( center top, #a68700 5%, #ffcf00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#a68700", endColorstr="#ffcf00");
	background: -o-linear-gradient(top,#a68700,ffcf00);

	/*background-color:#a68700;*/
}

#gamestatus {
	width:100%;
	overflow: hidden;
}

#hintbtn {
	float:left;
	height:100%;
	color: #03899c;
	font-size: 12px;
	text-align: center;
	line-height: 32px;
}

#gamestatus #scorebar {
	float:left;
	width: 128px;
	height:100%;
	font-size: 24px;
	text-align: center;
}

#gamestatus #diffsfound {
	float:left;
	height:100%;
}

#gamestatus #timeleft {
	float:left;
	width: 128px;
	height:100%;
}

#timebar {
	margin-top: 12px;
	background-color: black;
	border-radius: 12px; /* (height of inner div) / 2 + padding */
	padding: 1px;
}
	
#timebar > div {
	width:0%; /* timer bar, change from 0%..100% */ 
	height: 8px;
	border-radius: 4px;
}

#gamestatus #pausebutton {
	float:right;
	height:100%;
}

.diffscoin0, .diffscoin1, .hinticon0, .hinticon1, .hinticon2, .pauseicon0, .pauseicon1, .correcticon, .incorrecticon, .penaltyicon{
	width: 32px;
	height: 32px;
	line-height: height;

	/* css sprite sheet */
	background-image: url(../img/icons.png);
	background-size: 400% 400%;
	background-repeat: no-repeat;
}

.diffscoin0, .diffscoin1, .hinticon0, .hinticon1, .hinticon2, .pauseicon0, .pauseicon1{
	display: block;
	float: left;
}

.correcticon, .incorrecticon, .penaltyicon{
	position: absolute;
	z-index: 50;
}

.diffscoin0   {background-position:       0       0;}
.diffscoin1   {background-position:  33.33%   0;}
.hinticon0    {background-position:  66.66%   0;}
.hinticon1    {background-position:   100%      0;}
.hinticon2    {background-position:  66.66%  33.33%;}
.pauseicon0   {background-position:   0      33.33%;}
.pauseicon1   {background-position:  33.33%  33.33%; float:right;}
.correcticon  {background-position:   100%     33.33%;}
.incorrecticon{background-position:  66.66% 66.66%;}
.penaltyicon  { background-position: 100% 66.66%;}

.bdrlogo{
	width: 64px;
	height: 64px;
	line-height: height;

	/* css sprite sheet */
	background-image: url(../img/icons.png);
	background-size: 200% 200%;
	background-repeat: no-repeat;
	background-position: 0 100%;
}

.levelindicator{
	background-color: #03899c;
	text-align: center;
	position: absolute;
	z-index: 50;
}

.photoarea  {
	margin: 0px;
	padding: 0px;
	/*float:left;*/
	width: 100%;
}

.photocontainer {
	position: relative;
	margin: 0px;
	padding: 0px;
	float:left;
}

.photocanvas {
	padding: 0px;
	/* width: 400px;
	height: 427px; */
	display:block;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
}

.gamemessage{
	position: absolute;
	left: 0;
	top: 33.33%;
	
	padding-bottom: 32px;
	z-index: 100;
	width: 100%;
	text-align: center;
	background: rgba(0,0,0,.5);

	display: none;
}

.gamemessage input {
	/* background-color:#CC00CC; /*Maybe a BG color to match your layout*/
	border:2px solid #03899c; /*And a border for good luck */

	font-style:normal;
	font-size: 32px;
}


.gamepause{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,.9);
	
	display: none;
}