html,body{
width:100%;
height:100%;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#DDD;
}

body{
background:#000;
min-width:1300px;
min-height:500px;
}

#titlecontainer{
padding:0.5em 0;
background:rgb(32,32,32);
}

#titlecontainerinner{
padding:0 2em;
}

h1{
font-size:24px;
font-weight:normal;
color:rgb(192,192,192);
margin:0;
padding:0 0 0 12px;
}

#maincontainer{
padding:1em;
}

#selectiontable{
width:1250px;
height:280px;
}

div.table{
display:inline-block;
}

div.table div.headerrow{
height:24px;
font-size:0;
}

div.table div.row{
height:32px;
margin:4px 0;
font-size:0;
}

div.header{
display:inline-block;
width:48px;
height:100%;
margin:0 1px;
background:rgba(255,255,255,0.2);
vertical-align:middle;
font-size:10px;
text-align:center;

-webkit-user-select:none;  
-moz-user-select:none;    
-ms-user-select:none;      
user-select:none;

cursor:default;
}

div.table div.headerrow div.header{
line-height:24px;
}

div.table div.row div.header{
line-height:32px;
}

div.field, div.halffield{
display:inline-block;
height:100%;
margin:0 1px;
background:rgba(255,255,255,0.3);
vertical-align:middle;
font-size:0.75rem;
text-align:center;

-webkit-user-select:none;  
-moz-user-select:none;    
-ms-user-select:none;      
user-select:none;

cursor:pointer;
}

div.field{
width:48px;
}

div.halffield{
width:23px;
}

div.active{
background:rgba(255,0,0,0.2);
}

div.halffield.active{
background:rgb(0,192,0);
box-shadow:0 0 4px 4px rgb(0,192,0);
}