html{
height:100%;
}
body{
overflow: hidden;
height:100%;
min-width: 400px;
margin:0;
background: rgb(220,220,220);
}
canvas{
outline: thin solid rgb(220,220,220);
}
.footer{
position: absolute;
overflow: hidden;
min-width: 600px;
left: 0; right: 0; bottom: 0;
height: 2em;
padding: 0.5em;
background: rgb(42,46,50);
vertical-align: middle;
z-index: 1;
cursor: default;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: none;
user-select: none;
}
.btn{
display: inline-block;
position: relative;
margin: 0 auto;
height: 2em;
cursor: pointer;
color: white;
text-align: center;
font: 600 1em 'Open Sans', sans-serif;
line-height: 2em;
}
.btn-selected{ outline: 0.25em solid rgb(64,160,192); }
.btn-inactive{ cursor: default; }
.btn-med{
width: 8em;
}
.btn-sm{
width: 6em;
}
.btn-sq{
width: 2em;
}
.btn-blue{
border: thin solid rgb(80,172,204);
background: rgb(64,160,192);
}
.btn-blue:hover{
border: thin solid rgb(96,188,220);
background: rgb(80,176,208);
}
.btn-blue:active{
color: rgb(240,240,240);
border: thin solid rgb(72,164,196);
background: rgb(56,152,184);
}
.btn-blue.btn-select{
cursor: default;
color: rgb(255,255,255);
border: thin solid rgb(40,82,100);
background: rgb(36,76,92);
}
.btn-grey{
border: thin solid rgb(176,176,176);
background: rgb(168,168,168);
}
.btn-grey:hover{
border: thin solid rgb(192,192,192);
background: rgb(184,184,184);
}
.btn-grey:active{
color: rgb(240,240,240);
border: thin solid rgb(168,168,168);
background: rgb(160,160,160);
}
.btn-grey.btn-inactive{
color: rgb(128,128,128);
border: thin solid rgb(88,88,88);
background: rgb(80,80,80);
}
.spacer-1,.spacer-2,.spacer-3,.spacer-4,.spacer-12{ cursor: default; }
.spacer-1{ width: 0.5em; }
.spacer-2{ width: 1em; }
.spacer-3{ width: 1.5em; }
.spacer-4{ width: 2em; }
.spacer-6{ width: 3em; }
.spacer-8{ width: 4em; }
.right{float:right};