@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800|Changa+One:400,400italic);
body {
	background-color:#cfd9dc;
	overflow:hidden;
	margin:0px;
	font-family:Verdana, Geneva, sans-serif;	
}
#test{display:none;color:#000; z-index:10000000; position:absolute; top:0px; left:0px; padding:1em; border:2px solid #f00;}

/*SPLASH*/
#setupwrapper{width:20em;height: 28em;
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	top:0px;
	margin:auto;	
	padding:2em;	
	z-index:200;
	background-color:#FFF; 
	border: none;
	color:0e1117; font-family:'Open Sans'}
#setuprows,#setupcols,#setupmines{width:100%; height:2em; padding-bottom:1em; position:relative;}
h1{text-transform:uppercase; text-align:center;}
h2{padding:0px;font-size:.80em; position:relative; top:.65em;}
.bar {float:right; width:75%; height:2em; background-color:#b3c4c5;position:absolute; top:0px; right:0px; cursor:pointer; overflow:hidden;}
.slider{width:5%; height:100%; background-color:#4ea9a0; position:absolute; left:0px; top:0px; bottom:0px; margin:auto; border-right:solid 5px #FFF; }
#playbtn{width:100%; height:5em;
	background: url(../imgs/playw.svg) #4ea9a0; background-repeat:no-repeat; background-position:center; background-size:contain;
	color:#FFF;
	margin:0px 0px 2em 0px;
	text-align:center;
	cursor:pointer;
	}
#playbtn:hover{background-color:#8DCBC5}
#bottomborder{width:100%; height:10px; position:absolute; bottom:0px; left:0px;}
.bottom{width:12.5%; bottom:0px; float:left; height:100%}
	
/*GAME BOARD*/
#wrapper {
	opacity:0;
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	top:0px;
	margin:auto;
	padding:0px;
	z-index:1;
	font-size:10px;
}


/*HEADER*/
#gameheader {
	background-color:#b3c4c5;
	color:#000; 
	position:relative; 
	top:0px; 
	left:0px;
	cursor:default;
	z-index:4;
}
#timer,#mines,#flags,#reset,#newgame,#modeswitch{
	height:100%;
	position:relative;
	padding:0px;
	margin:auto; 
	font-size:14px;
	text-align:left; 	 	
}
.spacerleft{border-right:1px ridge #cfd9dc; height:100%; float:left; position:relative; top:0px; bottom:0px; margin:auto}
.value{height:50%; position:absolute; top:0px; bottom:0px; right:0px; margin:auto;}
.icon{position:absolute; top:0px; bottom:0px; margin:auto; height:50%; width:100%; background-position:center center !important;background-size:contain !important;background-repeat:no-repeat !important; }
.btn:hover{cursor:pointer;background-color:#EEE !important;}

#timer,#mines,#flags{float:left;}
#timer .icon{background:url(../imgs/clock.svg); background-position:left center !important;}
#mines .icon{background:url(../imgs/mineb.svg); background-position:left center !important;}
#flags .icon{background:url(../imgs/flagb.svg); background-position:left center !important;}

#reset,#newgame,#modeswitch{float:right}
#reset .icon{background:url(../imgs/reset.svg);background-position:center center !important;}
#newgame .icon{background:url(../imgs/power.svg);background-position:center center !important;}
#modeswitch .icon{background-position:right center !important;}
#modeswitch .value{left:0px; text-align:left;}
.flagging{background:url(../imgs/flagb.svg)}
.clearing{background:url(../imgs/shovel.svg)}

#mouse{display:none;width:15px; height:15px; z-index:5; position:absolute; top:0px; left:0px;background-position:center center !important;background-size:contain !important;background-repeat:no-repeat !important; pointer-events:none;}


/*BOARD*/
#gameboard{left:0px; right:0px; bottom:0px; margin:auto; position:absolute; cursor:none;}
.cell{color:#FFF;position:absolute; text-align:center;font-size:13px; font-family:"Courier New", Courier, monospace;}
.unclicked,.clicked	{background-color:#FFF;border-bottom-color:#cfd9dc !important;border-right-color:#cfd9dc !important;}
.unclicked:hover{border-color:#3b3e43 !important}
.num0		{background-color:#cfd9dc; border-color:#b3c4c5 !important; color:#cfd9dc}
.clear		{background-color:#79a52c; border-color:#79a52c !important; color:#FFF}
.num1		{background-color:#538DD5; border-color:#538DD5 !important;}
.num2		{background-color:#7E99A0; border-color:#7E99A0 !important;}
.num3		{background-color:#A9A66B; border-color:#A9A66B !important;}
.num4		{background-color:#D4B336; border-color:#D4B336 !important;}
.num5		{background-color:#FFC000; border-color:#FFC000 !important;}
.num6		{background-color:#F09000; border-color:#F09000 !important;}
.num7		{background-color:#D03000; border-color:#D03000 !important;}
.num8		{background-color:#C00000; border-color:#C00000 !important;}
.flagged	{background:url(../imgs/flagg.svg) #FFFFFF;	background-size:contain;}

	/*LOSS*/
	.mine		{background:url(../imgs/minew.svg) #c21b1c; background-size:contain; border-color:#c21b1c !important; z-index:3;}
	.correct	{background:url(../imgs/checkg.svg) #FFFFFF;	background-size:contain;}
	.incorrect	{background:url(../imgs/x.svg) 	   #FFFFFF;	background-size:contain;}
	.mine.clicked{background-color:#000; z-index:0;}
	
	/*WIN*/
	.minesafe	{background:url(../imgs/minew.svg) #79a52c;	background-size:contain; border-color:#79a52c !important; z-index:3;}