html {
width: 100%;
height: 100%;
overflow: hidden;
}

body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: sans-serif; 
font-size: 18px;
background-color: #ffffff;
}

#content {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

#renderCanvas {
width: 100%;
height: 100%;
margin: 0px;
border-width: 0px;
outline: none;
touch-action: none;
}

#topUI {
position: absolute;
left: 50%;
top: 0px;
margin-left: -300px;
z-index: 100;
width: 600px;
height: 100px;
padding: 5px;
box-sizing: border-box;
background-image: url("img/ui_top_bg.png");
}
#healthBackground1 {
position: absolute;
left: 30px;
margin-top: 20px;
background-color: #333333;
border: 1px solid #000000;
width: 200px;
height: 24px;
}
#healthBackground2 {
position: absolute;
right: 30px;
margin-top: 20px;
background-color: #333333;
border: 1px solid #000000;
width: 200px;
height: 24px;
}
#health1 {
/* background-color: #00cc00; */
background-image: linear-gradient( to bottom , #00ff00 , #007700 );
width: 100%;
height: 24px;
box-sizing: border-box;
}
#health2 {
/* background-color: #00cc00; */
background-image: linear-gradient( to bottom , #00ff00 , #007700 );
width: 100%;
height: 24px;
box-sizing: border-box;
}

#htmlOverlay {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 100;
width: 500px;
height: 150px;
padding: 5px;
padding-top: 20px;
background-image: url("img/ui_main_bg.png");
text-align: right;
box-sizing: border-box;
}

#buildingButtonHover {
display: none;
position: absolute;
bottom: 160px;
right: 10px;
z-index: 200;
width: 250px;
padding: 0px;
background-color: #eeeeee;
border: 1px solid #dddddd;
text-align: left;
box-sizing: border-box;
}
#buildingHoverTitle {
width: 100%;
padding: 10px;
background-color: #dddddd;
font-weight: bold;
box-sizing: border-box;
}

#gameOver {
display: none;
position: absolute;
left: 50%;
top: 200px;
margin-left: -200px;
z-index: 200;
width: 400px;
height: 250px;
padding: 40px;
background-image: url("img/ui_game_over_bg.png");
text-align: center;
box-sizing: border-box;
color: #ffffff;
font-size: 24px;
}
#gameOver > button {
width: 300px;
height: 50px;
padding: 10px;
font-size: 18px;
}

#intro {
display: block;
position: absolute;
left: 50%;
top: 150px;
margin-left: -400px;
z-index: 200;
width: 800px;
height: 500px;
padding: 40px;
padding-top: 360px;
background-image: url("img/ui_intro.png");
text-align: left;
box-sizing: border-box;
color: #ffffff;
font-size: 24px;
}
#intro > button {
width: 300px;
height: 50px;
padding: 10px;
font-size: 18px;
}

button {
margin: 3px;
width: 80px;
height: 80px;
padding: 5px;
background-color: #D4AF37;
border: 1px solid #000000;
border-radius: 5px;
font-size: 16px;
color: #000000;
outline: none;
box-sizing: border-box;
}
button:hover {
background-color: #DAA520;
}

hr {
border: 0;
height: 1px;
width: 95%;
background-color: #dddddd;
background-image: linear-gradient( to bottom , #eeeeee , #dddddd , #eeeeee );
}

#infoText {
position: absolute;
bottom: 0px;
left: 0px;
z-index: 100;
padding: 5px;
background-color: #000000;
color: #ffffff;
font-size: 14px;
box-sizing: border-box;
}

/* default link */
a:link {
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
a:active {
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #dddddd;
text-decoration: underline;
font-weight: bold;
}

#tutorial {
position: absolute;
bottom: 100px;
right: 350px;
z-index: 100;
padding: 5px;
background-color: #cc0000;
color: #ffffff;
font-size: 16px;
box-sizing: border-box;
}

#buildingWindow {
display: none;
position: absolute;
top: 200px;
left: 10px;
z-index: 200;
width: 250px;
padding: 0px;
background-color: #eeeeee;
border: 1px solid #dddddd;
text-align: left;
box-sizing: border-box;
}
#buildingWindowTitle {
width: 100%;
padding: 10px;
background-color: #dddddd;
font-weight: bold;
box-sizing: border-box;
}
#buildingWindowTitle > button {
width: 20px;
height: 20px;
padding: 0px;
float: right;
}
#buildingWindowContent > button {
width: 220px;
height: 30px;
}