*, *:before, *:after, *::-moz-focus-inner {
    margin: 0;
    padding: 0;
    border: 0 solid transparent;
    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    font-size: 1em;
    font-family: 'Arial', sans;
    text-decoration: none;
    
    color: inherit;
    
    -moz-transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    -moz-transition-property: color, background-color, border-color;
    -webkit-transition-property: color, background-color, border-color;
    transition-property: color, background-color, border-color;
    /*background-color: rgba(255,255,255,.02);*/
    
    vertical-align: middle;
}

a       {color: #6cc;}
a:hover {color: #5ff; text-shadow: 0 0 2px rgba(255,255,255,.2);}


h1, h2, h3, h4, h5, h6, th {
    font-family: 'Courier new', monospace;
    font-size: 1.2em;
    font-weight: bold;
}

.logo {
    font-size: 1.5em;
}

ul li {
    list-style-type: none;
}

input[type="text"],
select {
    margin: .5em 0;
    padding: .33em;
    border-radius: 4px;
    background-color: #333;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,.75);
}

button,
.button,
input[type="submit"] {
    display: inline-block;
    padding: 0 .5em;
    height: 2em;
    margin: 1em 0;
    
    cursor: pointer;
    
    color: #777;
    text-shadow: 1px 1px 0 #e5e5e5;
    
    background: #d8d8d8; /* Old browsers */
    background: -moz-linear-gradient(top,  #d8d8d8 0%, #b8b8b8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(100%,#b8b8b8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d8d8d8 0%,#b8b8b8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d8d8d8 0%,#b8b8b8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d8d8d8 0%,#b8b8b8 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #d8d8d8 0%,#b8b8b8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#b8b8b8',GradientType=0 ); /* IE6-9 */

    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: #bbb #aaa #9d9d9d #bbb;
    box-shadow: 1px 1px 2px rgba(0,0,0,.1),
                0 0 4px rgba(0,0,0,.1);
}
button.inactive,
.button.inactive {
    color: #aaa;
    text-shadow: 1px 1px 0 #ddd;
    cursor: default;
}

html, body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 13px;
    
    text-align: center;
    
    color: #999;
    background: #191919 url('bg-white.png') top left repeat;
}

#header,
#sidebar,
#rsidebar,
#mm-board,
#footer {
    background-color: #eee;
    border-color: #ddd;
}
#header, #footer {
    z-index: 100;
    
    background:#f5f5f5;
    background:-moz-linear-gradient(top,#f5f5f5 0,#e0e0e0 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f5f5f5),color-stop(100%,#e0e0e0));
    background:-webkit-linear-gradient(top,#f5f5f5 0,#e0e0e0 100%);
    background:-o-linear-gradient(top,#f5f5f5 0,#e0e0e0 100%);
    background:-ms-linear-gradient(top,#f5f5f5 0,#e0e0e0 100%);
    background:linear-gradient(to bottom,#f5f5f5 0,#e0e0e0 100%);
    
    box-shadow:0 0 4px rgba(0,0,0,.3);
    text-shadow:1px 1px 0 white;
}
#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
#header h1 {
    font-size: 1.5em;
    line-height: 2.4em;
    letter-spacing: .2em;
}

#footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 2em;
    font-size: .8em;
}

#main {
    position: absolute;
    z-index: 50;
    top: 3.6em;
    left: 0;
    right: 0;
    bottom: 1.6em;
    overflow: auto;
}

#sidebar,
#rsidebar {
    position: absolute;
    z-index: 60;
    top: 3.6em;
    left: 0;
    bottom: 1.6em;
    width: 16em;
    padding: 1em;
    border-width: 0 1px 0 0;
}
#rsidebar {
    left: auto;
    right: 0;
    border-width: 0 0 0 1px;
}


.sidebar label {
    float: left;
    width: 8em;
    text-align: right;
    margin: .5em 0;
}
.sidebar input {
    width: 3em;
    margin: .25em;
    padding: .25em;
    float: left;
    text-align: right;
    background-color: #f9f9f9;
    border-radius: .25em;
    border: 1px solid #ddd;
    box-shadow: inset 1px 1px 2px #ccc;
}

.sidebar h2 {
    margin: 2em 0 .5em;
    padding-bottom: .5em;
    border-bottom: 1px dotted #ccc;
}
#color-list {
    margin: 1em 0 5em;
}

#color-list li {
    display: inline-block;
    margin: .33em;
}
#color-list .color {
    display: inline-block;
    width: 3em;
    height: 3em;
}

#mm-board {
    display: inline-block;
    margin: 2em auto;
    padding: 1em 1.5em;
    
    border: 1px solid #ddd;
    border-radius: .33em;
}

#mm-table {
    /*border-collapse: collapse;*/
    border-spacing: 0;
}
#mm-table tr.active {
    font-size: 1.3em;
}
#mm-tbody th {
    font-size: 1.5em;
    padding-right: .5em;
    color: #ccc;
    text-align: right;
}
#mm-board .token {
    padding: .5em .25em;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #d0d0d0;
}
#mm-board tr:first-child .token { border-top-width: 0; }
#mm-board tr:last-child  .token { border-bottom-width: 0; }

.token .jsAnchor {
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
    border-radius: 10em;
    background-color: rgba(0,0,0,.02);
    border: 2px solid rgba(200,200,200,.5);
    box-shadow: inset .1em .1em .5em rgba(0,0,0,.5),
                -1px -1px 3px white;
}
.token .jsAnchor.filled {
    box-shadow: inset -.15em -.15em .33em rgba(0,0,0,.5),
                inset .2em .2em 1.1em rgba(255,255,255,.75),
                1px 1px 4px rgba(0,0,0,.4);
}

tr.active .token a,
#color-list .token a {
    cursor: pointer;
}
tr.active .token a:hover        { border-color: #bbb }
tr.active .token a.active,
tr.active .token a.active:hover { border-color: #999 }

.feedback {
    padding-left: .5em;
    min-width: 6em;
}

.feedback button,
.feedback .button {
    position: relative;
    top: -2px;
}
.feedback-token {
    display: inline-block;
    margin: .25em;
    width: 1em;
    height: 1em;
    border-radius: 5em;
    box-shadow: inset -.1em -.1em .33em rgba(0,0,0,.5),
                inset .2em .2em .66em rgba(255,255,255,.5),
                1px 1px 2px rgba(0,0,0,.4);
}
.feedback-good    { background-color: white; }
.feedback-perfect { background-color: #555; }