/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	BASICS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



body {
	
	background-color: #1A1A1A;
}	
	

#ALLES {
	
	background-color: #1A1A1A;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	B U I L D I N G S
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.BUILDING, .PAUSE, .PLAY, .STATS {
		
	background-color: #333333;
}


.PAUSE .control div, .PLAY .control div, .STATS .control div {
	
/*
	background-color: #606060;
	color: #606060;
*/
	
	background-color: #b2b0b0;
	color: #b2b0b0;
}


@media (hover: hover) {
   
	.PAUSE:hover .control div, .PLAY:hover .control div {
	
/* 		background-color: #9d9d9d; */
		background-color: white;
	}   
}


.STATS .control div {
	
	background-color: transparent;
}


@media (hover: hover) {
   
	.STATS:hover .control div {
	
/* 		color: #9d9d9d; */
		color: white;
	}   
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	3D MODE AT NIGHT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.BUILDING .roof, .BUILDING .tower_roof, .PAUSE .roof, .PLAY .roof, .STATS .roof {

	background-color: #333333;
	
	border-left: 1px solid #3B3B3B;
	border-top: 1px solid #3B3B3B;	
	border-right: 1px solid #2F2F2F;
	
}


.BUILDING .wall, .BUILDING .tower_wall, .PAUSE .wall, .PLAY .wall, .STATS .wall {
	
	background-color: #1F1F1F;
	
	border-left: 1px solid #282828;
	border-right: 1px solid #1D1D1D;
	
	border-bottom-color: #1F1F1F;
}

.BUILDING .shadow, .BUILDING .tower_shadow, .PAUSE .shadow, .PLAY .shadow, .STATS .shadow, .TREE .shadow, .CAR .shadow {
	
	background-color: rgba(0,0,0,.4);
}


.BUILDING .wall, .BUILDING .tower_wall, .PAUSE .wall, .PLAY .wall, .STATS .wall {
	
	background-image: url(../images/night_windows.png);
}


.BUILDING .wall {
	
	background-image: url(../images/night_windows_B.png);
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	R O A D S
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.ROAD, .ROAD_plan {
		
	background-color: #2B2B2B;
}

.ROAD .line_horizontal {
	
	background-image: linear-gradient(to right, rgba(255,255,255,.1) 50%, transparent 0%);
}

.ROAD .line_vertical {
	
	background-image: linear-gradient(to bottom, rgba(255,255,255,.1) 50%, transparent 0%);
}


.ROAD_plan {
	
	border: 1px dashed rgba(255,255,255,.3);
	
	opacity: .5;
}


.ROAD_plan_invalid {
	
	opacity: .4;
	
	border: none;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	P A R K R O A D S
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.ROAD .PARK {

	background-color: #001903;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	T R E E S
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.TREE, .TREE .trunk {
	
	background-color: #002A03;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	S K Y W A L K S
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.SKYWALK {
		
	background-color: #33454a; 	
/* 	background-color: #7595a0; */
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	W A T E R
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.WATER {
		
	background-color: #0b2e41; 
		
	box-shadow: inset 1px 10px 0px #0b2737;
	
	border: none;
}


.FLOOD {
	
	background-color: #0b2e41;
}

.flood_altitude {

	background-color: #0b2e41;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	M O U N T A I N S
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.MOUNTAIN {
	
	filter: brightness(35%);
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	C A R
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.CAR .lightbeam, .CAR .lightbeam_frontview {
	
	display: block;	
}	





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MENU
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#MENU {
	
	filter: invert(1);
	
	background-color: rgba(255,255,255,.5);
}


#MENUABDUNKLER {

	background-color: rgba(255,255,255,.05);
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ID CARD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#ID_CARD {
	
	filter: invert(1);
	
	background-color: rgba(255,255,255,.8);
}




#ID_CARD #BUILDING_COPY, #ID_CARD .ROAD, #ID_CARD .SKYWALK, #ID_CARD .CAR, #ID_CARD .HUMAN, .TOWER_HEIGHT_SLIDER .slider, #ID_CARD #ACHIEVEMENT img, #ID_CARD #FLAG_BUTTONS {
	
	filter: invert(1);
}