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};