body {
   background-color: #000;
   color: #FFF;
   text-align: center;
   font-family: "Verdana", Times, serif;
}

canvas {
   vertical-align: bottom;
}

.hidden {
   display: none;
}

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
}

.selectable {
   -moz-user-select: -moz-all;
   -khtml-user-select: all;
   -webkit-user-select: all;
   -o-user-select: all;
   user-select: all;
}

#header {
   padding: 10px;
   background-color: #222;
   height: 50px;
   text-align: center;
   font-size: 36px;
}

#game_wrapper {
   width: 1000px;
   height: 600px;
   display: inline-block;
}

#center_panel {
   width: 600px;
   height: 600px;
   float: left;
   /*background-color: rgba(0,0,0, 0.0);*/
}

.side_panel {
   width: 200px;
   height: 600px;
   float: left;
   background-color: #65e;
}

#fps_counter {
   height: 20px;
   font-size: 16px;
   text-align: center;
   padding: 5px;
   white-space: pre;
   background-color: #b9a;
   overflow: hidden;
}

#game_log {
   height: 160px;
   font-size: 12px;
   color: #248;
   text-align: left;
   padding: 5px;
   white-space: pre;
   background-color: #b86;
   overflow: auto;
}

#society_controls {
   height: 190px;
   font-size: 14px;
   text-align: left;
   padding: 5px;
   white-space: pre;
   background-color: #789;
   overflow: auto;
}

#unit_actions {
   height: 190px;
   font-size: 14px;
   text-align: left;
   padding: 5px;
   white-space: pre;
   background-color: #68e;
   overflow-y: auto;
}

#unit_actions > button {
   float: left;
   display: block;
   clear: left;
   font-size: 14px;
   padding: 3px;
   margin-top: 2px;
   width: 100%;
   /*margin: 2px;*/
}

#unit_stats {
   height: 190px;
   font-size: 14px;
   text-align: left;
   padding: 5px;
   white-space: pre;
   background-color: #895;
   overflow: auto;
}

#terrain_stats {
   height: 190px;
   font-size: 14px;
   text-align: left;
   padding: 5px;
   white-space: pre;
   background-color: #687;
   overflow: auto;
}

#city_dialog {
   position: absolute;
   left: 50%;
   /*top: 50%;*/
   top: 100px;
   transform:translateX(-50%);
   -webkit-transform:translateX(-50%);
   -ms-transform:translateX(-50%);
/*   transform:translateY(-50%);
   -webkit-transform:translateY(-50%);
   -ms-transform:translateY(-50%);*/

   background-color: rgba(50,70,200,0.75);
   text-align: left;
   width: 500px;
   height: 400px;
   white-space: pre;

   border-style: groove;
   border-width: 5px;
   padding: 10px;
}

* {
   margin: 0px;
   padding: 0px;
}
body {color: white; background: black;}
div {text-align: left; }
#SPOILERS { display: none; width:600px; margin:auto;}