/* font, cursor, box sizing (for margins), and selectability */
* {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	cursor: default;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
	-ms-user-select:none;
	-o-user-select:none; }

/* remove margins and set background */
body {
	margin: 0px;
	color: #000;
	background-color: #000;
	cursor: url(el.png),auto;
}

/* link for bottom of page */
a {
	color: black;
	text-decoration: none;
	cursor: url(el.png),auto; }
a:hover {
	color: black;
	cursor: url(el.png),auto; }

/* custom scrollbar */
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5; }
::-webkit-scrollbar {
	width: 10px;
	background-color: #F5F5F5; }
::-webkit-scrollbar-thumb { background-color: #000000; }

/* a container for text that is vertically centered */
.textContainer {
	text-align: center;
	display: table; }

/* the text inside the container */
.text {
	display: table-cell;
	vertical-align: middle;
	color: #3C0007;
	cursor: url(el.png),auto;
}

/* container for title and game */
#container {
	position: absolute;
	top: 0px;
	bottom: 70px;
	right: 0;
	left: 0;
	margin: auto;
	height: 707px;
	width: 1053px;
	background-image: url(zemin1.jpg);
	background-repeat: no-repeat;
}

#containerSide {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 70px;
	height: 610px;
	margin-top: auto;
	margin-bottom: auto;
	background-color: white;
	border: 1px solid #3c0007;
	z-index: 9;
}

#speedText {
	position: absolute;
	width: 100%;
	top: 5px;
	height: 55px;
	font-size: 16px;
	text-align: center; }

.sideButton {
	position: absolute;
	left: 4px;
	width: 44px;
	height: 36px;
    background-image: url(but2-a.png);
	background-repeat: no-repeat;
	font-size: 12px;
	transition: 0.1s;
	
}
.sideButton:hover {background-image: url(but2-o.png);background-repeat: no-repeat;}
.sideButton:active {background-image: url(but2-a.png);background-repeat: no-repeat;}

#speed1 { top: 55px; }
#speed2 { top: 110px; }
#speed3 { top: 165px; }
#speed4 { top: 220px; }
#speed5 { top: 275px; }

#buyText {
	position: absolute;
	width: 100%;
	top: 330px;
	height: 55px;
	font-size: 16px;
	text-align: center; }

#buy1 {
	left: -574px;
	top: 26px;
}
#buy2 {
	left: -520px;
	top: 26px;
}
#buy3 {
	left: -467px;
	top: 26px;
}


#disclaimer {
	position: absolute;
	right: 0;
	left: 0;
	top:735px;
	height: 300px;
	width: 970px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	z-index: 10;
}

#containerTitle {
	position: absolute;
	width: 100%;
	height: 110px;
	top: 10px;
	right: 0;
    left: 0;
	margin: auto;
	text-align: center;
	font-size: 50px;
}

/* main container for game */
#containerGame {
	position: absolute;
	bottom: 0px;
	height: 600px;
	width: 1053px;
}

#containerLeft {
	position: absolute;
	left: 0;
	top: 20;
	height: 100%;
	width: 60%;
}

#containerRight {
	position: absolute;
	right: 30px;
	top: 0;
	height: 100%;
	width: 394px;
}

#investments {
	position: absolute;
	top: 30px;

}
#hiz {
	position: absolute;
	top: 8px;
	left: 0px;
	width: 200px;
}

#money {
	position: absolute;
	top: 37px;
	right: 423px;
	height: 5%;
	width: 351px;
	text-align: right;
	font-size: 25px;
	color: #900;
}

#containerBuildings {
	position: absolute;
	left: 7%;
	top: 13%;
	width: 90%;
	height: 80%;
}

.building {
	position: absolute;
	width: 50%;
	height: 20%; }
#building1 { 
	top: 0%;
	left: 0%; }
#building2 {
	top: 20%;
	left: 0%; }
#building3 {
	top: 40%;
	left: 0%; }
#building4 {
	top: 60%;
	left: 0%; }
#building5 {
	top: 80%;
	left: 0%; }
#building6 {
	top: 0%;
	left: 50%; }
#building7 {
	top: 20%;
	left: 50%; }
#building8 {
	top: 40%;
	left: 50%; }
#building9 {
	top: 60%;
	left: 50%; }
#building10 {
	top: 80%;
	left: 50%; }

.button1 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;z-index:2;
	transition:0.9s;background-image: url(b1-a.jpg);
	cursor: url(kilic.png),auto;background-repeat:no-repeat;}
.button1:hover{background-image:url(b1-o.jpg);background-repeat:no-repeat;transition:0.9s;}
.button1:active {background-image: url(b1-o.jpg);background-repeat:no-repeat;}
.unbutton1 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;background-image: url(b1-p.jpg);background-repeat: no-repeat;z-index: 1;}

.button2 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;z-index:2;
	transition:0.9s;background-image: url(b2-a.jpg);
	cursor: url(kilic.png),auto;background-repeat:no-repeat;}
.button2:hover{background-image:url(b2-o.jpg);background-repeat:no-repeat;transition:0.9s;}
.button2:active {background-image: url(b2-o.jpg);background-repeat:no-repeat;}
.unbutton2 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;background-image: url(b2-p.jpg);background-repeat: no-repeat;z-index: 1;}

.button3 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;z-index:2;
	transition:0.9s;background-image: url(b3-a.jpg);
	cursor: url(kilic.png),auto;background-repeat:no-repeat;}
.button3:hover{background-image:url(b3-o.jpg);background-repeat:no-repeat;transition:0.9s;}
.button3:active {background-image: url(b3-o.jpg);background-repeat:no-repeat;}
.unbutton3 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;background-image: url(b3-p.jpg);background-repeat: no-repeat;z-index: 1;}

.button4 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;z-index:2;
	transition:0.9s;background-image: url(b4-a.jpg);
	cursor: url(kilic.png),auto;background-repeat:no-repeat;}
.button4:hover{background-image:url(b4-o.jpg);background-repeat:no-repeat;transition:0.9s;}
.button4:active {background-image: url(b4-o.jpg);background-repeat:no-repeat;}
.unbutton4 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;background-image: url(b4-p.jpg);background-repeat: no-repeat;z-index: 1;}

.button5 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;z-index:2;
	transition:0.9s;background-image: url(b5-a.jpg);
	cursor: url(kilic.png),auto;background-repeat:no-repeat;}
.button5:hover{background-image:url(b5-o.jpg);background-repeat:no-repeat;transition:0.9s;}
.button5:active {background-image: url(b5-o.jpg);background-repeat:no-repeat;}
.unbutton5 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;background-image: url(b5-p.jpg);background-repeat: no-repeat;z-index: 1;}

.button6 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;z-index:2;
	transition:0.9s;background-image: url(b6-a.jpg);
	cursor: url(kilic.png),auto;background-repeat:no-repeat;}
.button6:hover{background-image:url(b6-o.jpg);background-repeat:no-repeat;transition:0.9s;}
.button6:active {background-image: url(b6-o.jpg);background-repeat:no-repeat;}
.unbutton6 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;background-image: url(b6-p.jpg);background-repeat: no-repeat;z-index: 1;}

.button7 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;z-index:2;
	transition:0.9s;background-image: url(b7-a.jpg);
	cursor: url(kilic.png),auto;background-repeat:no-repeat;}
.button7:hover{background-image:url(b7-o.jpg);background-repeat:no-repeat;transition:0.9s;}
.button7:active {background-image: url(b7-o.jpg);background-repeat:no-repeat;}
.unbutton7 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;background-image: url(b7-p.jpg);background-repeat: no-repeat;z-index: 1;}

.button8 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;z-index:2;
	transition:0.9s;background-image: url(b8-a.jpg);
	cursor: url(kilic.png),auto;background-repeat:no-repeat;}
.button8:hover{background-image:url(b8-o.jpg);background-repeat:no-repeat;transition:0.9s;}
.button8:active {background-image: url(b8-o.jpg);background-repeat:no-repeat;}
.unbutton8 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;background-image: url(b8-p.jpg);background-repeat: no-repeat;z-index: 1;}

.button9 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;z-index:2;
	transition:0.9s;background-image: url(b9-a.jpg);
	cursor: url(kilic.png),auto;background-repeat:no-repeat;}
.button9:hover{background-image:url(b9-o.jpg);background-repeat:no-repeat;transition:0.9s;}
.button9:active {background-image: url(b9-o.jpg);background-repeat:no-repeat;}
.unbutton9 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;background-image: url(b9-p.jpg);background-repeat: no-repeat;z-index: 1;}

.button10 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;z-index:2;
	transition:0.9s;background-image: url(b10-a.jpg);
	cursor: url(kilic.png),auto;background-repeat:no-repeat;}
.button10:hover{background-image:url(b10-o.jpg);background-repeat:no-repeat;transition:0.9s;}
.button10:active {background-image: url(b10-o.jpg);background-repeat:no-repeat;}
.unbutton10 {position: absolute;left:10px;top:10px;bottom:10px;width:72px;background-image: url(b10-p.jpg);background-repeat: no-repeat;z-index: 1;}


.progress {
	position: absolute;
	left: 90px;
	right: 10px;
	bottom: 15px;
	height: 29px;
	background-color: #3c0007;
	cursor: url(el.png),auto;
	
}

.containerBar{
	position: absolute;
	left: 1px;
	right: 1px;
	top: 1px;
	bottom: 1px;
	cursor: url(el.png),auto;
}

.name {
	position: absolute;
	width: 100px;
	height: 10px;
	left: 2px;
	top: 0px;
	font-size: 10px;
	color: white;
	z-index: 2;
	cursor: url(el.png),auto;
}

.inc {
	position: absolute;
	width: 100px;
	height: 10px;
	left: 3px;
	bottom: 4px;
	font-size: 10px;
	color: white;
	z-index: 2;
	cursor: url(el.png),auto;
}

.bar {
	position: absolute;
	width: 10%;
	height: 100%;
	background-color: #9b452c;
	cursor: url(el.png),auto;
}

.owned {
	position: absolute;
	top: 10px;
	left: 90px;
	height: 30px;
	width: 60px;
	font-size: 13px;
	font-weight: bold;
	color: #3C0007;
}

.cost {
	position: absolute;
	top: 10px;
	right: 10px;
	height: 30px;
	width: 150px;
	text-align: right;
	font-size: 13px;
}

.clickme {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #928357;
	z-index: 2;
	transition: 0.1s; }
.clickme:hover {
	background-color: #70664c;
}
.clickme:active { background-color: #3c0007 }

.block {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #3c0007;
	z-index: 3;
}

#containerDisplay {
	position: absolute;
	left: 1%;
	top: 7%;
	width: 373px;
	height: 63%;
/*	background-color: green;
*/}

#containerMenu {
	position: absolute;
	bottom: 42px;
	width: 100%;
	height: 20%;
}

.menu {
	position: absolute;
	width: 165px;
	height: 38px;
	background-image: url(but1-a.png);
	background-repeat: no-repeat;
 }
.menu:hover { 	background-image: url(but1-o.png);
	background-repeat: no-repeat;}

#menu1 {
	top: 10%;
	left: 5%;
}
#menu2 {
	bottom: 10%;
	left: 5%;
}
#menu3 {
	top: 10%;
	right: 5%;
}

#menu4 {
	bottom: 10%;
	right: 5%; 
}








.display {
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
	overflow: auto;
}

#display0 {
	display: initial;
	overflow: hidden;
}

#moneypic {
left:35px;
}

.menuTitle {
	width: 100%;
	height: 60px;
	text-align: center;
	font-size: 30px;
}

.containerBuyAll {
	position: relative;
	width: 100%;
	height: 40px;
}

.buyAll {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 25%;
	height: 75%;
	background-color: #CCCCCC; }
.buyAll:hover { background-color: #999999; }
.buyAll:active { background-color: #777777; }

.upgrade {
	position: relative;
	width: 100%;
	height: 100px;
}

.upgradeButton {
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
	width: 50px;
	z-index: 2;
	transition: 0.1s;
	background-image: url(ferman-h.png);
	background-repeat: no-repeat;
}
.upgradeButton:hover { background-image: url(ferman-o.png);
	background-repeat: no-repeat; }
.upgradeButton:active { background-image: url(ferman-o.png);
	background-repeat: no-repeat; }
.unupbutton {
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
	width: 50px;
	background-image: url(ferman-t.png);
	background-repeat: no-repeat;
	z-index: 1;
}

.bought {
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
	width: 50px;
	z-index: 3;
	background-image: url(ferman-p.png);
	background-repeat: no-repeat;
	display: none;
}

.upgradeName {
	position: absolute;
	top: 10px;
	left: 70px;
	right: 10px;
	height: 20px;
	font-size: 18px;
	color: #3C0007;
}

.upgradeText {
	position: absolute;
	top: 38px;
	left: 70px;
	right: 10px;
	height: 20px;
	font-size: 13px;
	color: #3C0007;
}

.upgradePrice {
	position: absolute;
	bottom: 16px;
	left: 70px;
	right: 10px;
	height: 20px;
	font-size: 20px;
	color: #3C0007;
}


#test1 {
	width: 100%;
	height: 50px;
	background-color: green;
}

#test2 {
	width: 359px;
	height: 50px;
	background-color: blue;
}


.box {
	width: 58px;
	height: 58px;
	float: left;
	position: relative; }
.box2 {
	width: 20px;
	height: 58px;
	float: left;
	position: relative; }

.inside {
	position: absolute;
	left: 5px;
	top: 5px;
	bottom: 5px;
	right: 5px;

}

.show {
	position: absolute;
	top: -50px;
	left: -57px;
	width: 173px;
	height: 61px;
	background-color: #DDDDDD;
	border: 1px solid #3c0007;
	z-index: 1;
	text-align: center;
	display: none;
}

.inside:hover + .show {
	display: initial;
}

.hidden {
	visibility: hidden;
}

.achieveText1 {
	position: absolute;
	top: 5px;
	width: 100%;
	font-size: 12px;
}

.achieveText2 {
	position: absolute;
	top: 22px;
	width: 100%;
	font-size: 10px;
}

.achieveText3 {
	position: absolute;
	top: 37px;
	width: 100%;
	font-size: 10px;
}

.breakLine {
	width: 100%;
	height: 10px;
}

.settingBox {
	width: 100%;
	height: 50px;
	position: relative;
}

.topText {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 15px;
	color: #3C0007;
}

.bottomText {
	position: absolute;
	top: 25px;
	left: 10px;
	font-size: 18px;
	color: #C00;
}

#asdf1 {
	width: 100%;
	height: 35px;
	position: relative;
	font-size: 10px;
	color: #630;
}

#asdf2 {
	position: absolute;
	top: 5px;
	left: 10px;
	font-size: 13px;
}

#softReset, #hardReset {
	position: absolute;
	top: 10px;
	height: 53px;
	width: 137px;
	background-image: url(but3-a.png);
	background-repeat: no-repeat;
	display: table;
	text-align: center; 
	 }
#softReset:hover, #hardReset:hover { 	background-image: url(but3-o.png);
	background-repeat: no-repeat; }
#softReset { left: 30px; }
#hardReset { right: 30px; }

.resetText {
	display: table-cell;
	vertical-align: middle;
	color: #FFF;
	font-weight: bold;
	cursor: url(el.png),auto;
}
