html,body {
    color: #FFF;
    background: #888;
    height: 100%;
    padding: 0;
    margin: 0; }
body { font-family: sans-serif; overflow: hidden }
#boarddiv { text-align: center; margin: 1em; }
#scorediv, #menudiv
    {
    border-top:   1px solid #555;
    border-left:  1px solid #555;
    border-bottom:1px solid #AAA;
    border-right: 1px solid #AAA;
    width: 6em;
    text-align: center;
    color: #305;
    background: #999;
    margin: 1em; }
#scorediv   { float: right; padding: 0; }
#menudiv    { float: left; padding: 0.5em 0.3em; }
#menudiv li { display: inline; white-space: nowrap; }
/* #menudiv div, #menudiv li */
#menudiv *  { margin: 0; padding: 0.3em; }
#scorediv * { margin: 1em 0; padding: 0; }

#levmenucontainer {
    position: absolute;
    display: inline;
    z-index: 2;
    background: #888;
    margin: -0.5em 0 0 5px;
    padding: 0;
    border-top:    1px solid #AAA;
    border-left:   1px solid #AAA;
    border-bottom: 1px solid #666;
    border-right:  1px solid #666;
    text-align: center;
    overflow: visible; }
#levlist, #levlist li {
    list-style: none;
    margin: 0; padding: 0; }
#levlist li { float:left; }

.button, .disbutton {
    /* silly, but portable for UAs that do not allow
      'transparent' foreground elements (fuck IE) */
    border: none; margin: 1px;
    /* (The non-silly version would just be this:)
      border: 1px solid transparent; margin: 0; */
    padding: 0.3em 0.7em;
    text-align: center; }

.button:hover {
    border-style: solid;
    border-width: 1px;
    border-top-color:    #AAA;
    border-left-color:   #AAA;
    border-bottom-color: #444;
    border-right-color:  #444;
    color: #FFF;
    background: #969; }

.disbutton { color: #656; background: transparent; }

.disbutton:hover {
    border-style: solid;
    border-width: 1px;
    border-top-color:    #AAA;
    border-left-color:   #AAA;
    border-bottom-color: #666;
    border-right-color:  #666; }

div#container { min-height: 100%; position: relative; }
div#message {
    position: absolute;
    top: 35%;
    border-top:    4px solid #888;
    border-left:   4px solid #888;
    border-bottom: 4px solid #222;
    border-right:  4px solid #222;
    text-align: center;
    background: #555;
    color: #FFF;
    font-size: 2em;
    z-index: 50;
    width: 8em; }
div#message span { font-weight: bold; }

#aboutbut {
    text-align: center;
    margin: 1em;
    bottom: 1em;
    left: 1em;
    right: 1em;
    position: absolute; }

.spacer { visibility: hidden; padding: 1em; }
#aboutbut a {
    padding: 0.5em;
    color: #666;
    background: #888;
    border-top:    1px solid #777;
    border-left:   1px solid #777;
    border-bottom: 1px solid #999;
    border-right:  1px solid #999; }
#aboutbut a:hover {
    color: #BBB;
    background: #808080;
    border-top-color:    #999;
    border-left-color:   #999;
    border-bottom-color: #555;
    border-right-color:  #555;
    z-index: 0; }
#aboutdiv {
    top: 3em;
    left: 3em;
    right: 3em;
    bottom: 3em;
    position: absolute;
    z-index: 3; }
#aboutdiv a { border-bottom: 1px solid #00C; }
#aboutdiv a.noborder { border:0; float:left; }
#aboutdiv a img { border: 0 }
#aboutdiv a:hover { color: #66C; background: transparent; }
.innerbevel, .outerbevel {
    position: absolute;
    overflow: auto;
    bottom: 0;
    /* height: 100%; */
    color: inherit;
    background: #888; }
.outerbevel {
    margin: 0;
    padding: 0;
    border-top:    2px solid #BBB;
    border-left:   2px solid #BBB;
    border-bottom: 2px solid #555;
    border-right:  2px solid #555; }
.innerbevel {
    margin: 2px;
    padding: 0 1em;
    top: 0;
    left: 0;
    right: 0;
    text-align: justify;
    background: #656;
    border-top:    2px solid #555;
    border-left:   2px solid #555;
    border-bottom: 2px solid #BBB;
    border-right:  2px solid #BBB; }
.hidden { display: none !important; }
table#board { display: inline; z-index: 1; }

a { color: inherit; background: inherit; }
a:link    { text-decoration: none; }
a:active  { text-decoration: none; }
a:visited { text-decoration: none; }

/* Thanks to Eric Meyer for inventing the nifty and famous CSS popups
   http://www.meyerweb.com/eric/css/edge/popups/demo.html */
a.tooltip {
    position: relative;
    display: block;
    z-index: 24;
    width: 2em;
    margin: 0; padding: 0;
    font-weight: bold; }
a.tooltip:hover { z-index: 25; background-color: #969; color: #FFF }
a.tooltip span { display: none; }
a.tooltip:hover span {
    display: block;
    position: absolute;
    top: 2.4em; left: -2em;
    width: 8em;
    border: 1px solid #555;
    background-color: #AAA; color: #000;
    font-weight: normal;
    text-align: center; }