/* CSS Document */
@font-face {
    font-family:'amatic';
    src: url('../../js/games/evolution/assets/font/AmaticSC-Regular.ttf');
}
@font-face {
    font-family:'amatic-bold';
    src: url('../../js/games/evolution/assets/font/Amatic-Bold.ttf');
}
@font-face {
    font-family:'crimes';
    src: url('../../js/games/evolution/assets/font/crimes.ttf');
}

#UIContainer{
	position:absolute;
	background-size:cover;
	background-repeat:repeat-x;
	color:#000;
	margin-left:0px;
	margin-top:0px;
	z-index:3;
	overflow:hidden;
}

#UIMapContainer{
	position:absolute;
	background-size:cover;
	background-repeat:repeat-x;
	color:#000;
	margin-left:0px;
	margin-top:0px;
	z-index:2;
	overflow:hidden;
}

.brown{
	color:#3c3113;
}

#mainMap{
	position:absolute;
	margin-left:0px;
	margin-top:0px;
	z-index:0;
}

#overMap{
	position:absolute;
	margin-left:0px;
	margin-top:0px;
	z-index:1;
}

#loadingContainer{
	position:absolute;
	margin-left:0px;
	margin-top:0px;
	z-index:100;
}

#UIAdsContainer{
	position:absolute;
	margin-left:0px;
	margin-top:0px;
	z-index:999;
}
#content, #adContainer {
  position: absolute;
  top: 0px;
  left: 0px;
}

.popupShadow{
   -webkit-filter: drop-shadow(2em 2em 1em rgba(0,0,0,0.5));
   filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='20' dy='20' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.5)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
   -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
   filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

.popupButton{
	box-sizing:border-box;
	border-right:solid 0.08em rgba(200,200,200,0.4);
	border-bottom:solid 0.08em rgba(200,200,200,0.4);
	border-top:solid 0.1em rgba(50,50,20,0.4);
	border-left:solid 0.1em rgba(50,50,20,0.4);
	background-color:rgba(200,200,100,0.5);
	padding-top:0.5em;
	padding-bottom:0.15em;
	cursor:pointer;
}

.popupBox{
	position:absolute;
	box-sizing:border-box;
	border-right:solid 0.1em rgba(250,250,200,0.2);
	border-bottom:solid 0.1em rgba(250,250,200,0.2);
	border-top:solid 0.13em rgba(50,50,20,0.4);
	border-left:solid 0.13em rgba(50,50,20,0.4);
	background-color:rgba(220,250,220,0.2);
	width:92%;
	height:55%;
	left:4%;
	top:12%;
}

.popupBoxHalf{
	position:absolute;
	box-sizing:border-box;
	border-right:solid 0.1em rgba(250,250,200,0.2);
	border-bottom:solid 0.1em rgba(250,250,200,0.2);
	border-top:solid 0.13em rgba(50,50,20,0.4);
	border-left:solid 0.13em rgba(50,50,20,0.4);
	background-color:rgba(220,250,220,0.2);
	width:47%;
	height:85%;
	left:2%;
	top:11%;
	overflow:hidden;
}

.popupBoxHS{
	position:absolute;
	box-sizing:border-box;
	border-right:solid 0.1em rgba(250,250,200,0.2);
	border-bottom:solid 0.1em rgba(250,250,200,0.2);
/*	border-top:solid 0.13em rgba(50,50,20,0.4);*/
	border-top:none;
	border-left:solid 0.13em rgba(50,50,20,0.4);
	background-color:rgba(220,250,220,0.2);
	width:96%;
	height:74%;
	left:2%;
	top:22.5%;
	overflow:hidden;
}
.popupBoxHS .scrollArea{
	width:200%;
	height:100%;
	overflow:auto;
}

.HSTabs{
	position:absolute;
	width:96%;
	height:10%;
	left:2%;
	top:14%;
	letter-spacing:0.05em;
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
	overflow:hidden;
}
.left,.right{
    height: 0px; 
	width: 0px;
	position: relative; 
	float:left;
	cursor:default;
}
.center{
	height:1.36em;
	position: relative; 
	float:left;
	cursor:pointer;
}
.HSTabOffFirst .center,.HSTabOff .center{
	background-color:#865f32;
}

.HSTabOnFirst{
	float:left;
	color:#3c3113;
}
.HSTabOnFirst .left{
	width:1.3em;
	height:1.4em;
    border-top: 0.08em solid rgba(50,50,20,0.4); 
    border-left: 0.08em solid rgba(50,50,20,0.4); 
	background-color:rgba(220,250,220,0.2);
}
.HSTabOnFirst .center{
	border-top: 0.08em solid rgba(50,50,20,0.4); 
	background-color:rgba(220,250,220,0.2);
}
.HSTabOnFirst .right{
	width:1.4em;
	height:1.4em;
	background:url('../../js/games/evolution/assets/images/ui/tabRight.png');
	background-size:cover;
}
.HSTabOffFirst{
	float:left;
	color:#fff;	
}
.HSTabOffFirst .left{
    border-top: 0.7em solid #865f32; 
    border-left: 0.7em solid #865f32; 
    border-right: 0.7em solid #865f32; 
    border-bottom: 0.7em solid #865f32;
}
.HSTabOffFirst .right{
    border-top: 0.7em solid transparent; 
    border-left: 0.7em solid #865f32; 
    border-right: 0.7em solid transparent; 
    border-bottom: 0.7em solid #865f32;
}
.HSTabOn{
	float:left;
	color:#3c3113;
	margin-left:-1.3em;
}
.HSTabOff{
	float:left;
	color:#fff;
    position: relative;
	margin-left:-1.3em;
}
.HSTabOff .left{
    border-top: 0.7em solid #865f32; 
    border-left: 0.7em solid transparent; 
    border-right: 0.7em solid #865f32; 
    border-bottom: 0.7em solid transparent;
}
.HSTabOff .right{
    border-top: 0.7em solid transparent; 
    border-left: 0.7em solid #865f32; 
    border-right: 0.7em solid transparent; 
    border-bottom: 0.7em solid #865f32;
}
.HSTabOn .center{
	border-top: 0.08em solid rgba(50,50,20,0.4); 
	background-color:rgba(220,250,220,0.2);
}
.HSTabOn .left{
	width:1.4em;
	height:1.3em;
	background:url('../../js/games/evolution/assets/images/ui/tabLeft.png');
	background-size:cover;
	border-top: 0.08em solid rgba(50,50,20,0.4); 
}
.HSTabOn .right{
	width:1.4em;
	height:1.4em;
	background:url('../../js/games/evolution/assets/images/ui/tabRight.png');
	background-size:cover;
}
.HSTabsRight{
	float:left;
	border-bottom: 0.08em solid rgba(50,50,20,0.4); 
	width:50%;
	height:1.31em;
	margin-left:-0.05em;
}

.whitePuff{
  background: -webkit-radial-gradient(rgba(255,255,255,255),rgba(255,255,255,150),rgba(255,255,255,0),rgba(255,255,255,0));
/*  background: -o-radial-gradient(rgba(255,255,255,255),rgba(255,255,255,0));
  background: -moz-radial-gradient(rgba(255,255,255,255),rgba(255,255,255,0));
  background: radial-gradient(rgba(255,255,255,255),rgba(255,255,255,0));*/
}

.yellowSinkedButtonText{
	font-family:amatic-bold;
	color:#f3cf0d;
	text-shadow:-0.05em 0.0em 0.05em #7d5d1c,0.0em -0.03em 0.05em #7d5d1c,-0.05em -0.03em 0.05em #7d5d1c;
}

.mustardButton{
	background-color:#f3e8bd;
	color:#702317;
	border:solid 0.2em #702317;
	border-radius:1em;
	padding-left:1em;
	padding-right:1em;
	padding-top:0.2em;
	padding-bottom:0.2em;
	font-family:crimes;
	cursor:pointer;
}

.spinning_2s{
 -webkit-animation-name: spin;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	
    -moz-animation-name: spin;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
	
    -ms-animation-name: spin;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.demoTextClass{
}