body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 17px;
    color: #666;
}
body.morning   { background-color: #fff7fd; }
body.day       { background-color: #f0f7ff; }
body.evening   { background-color: #fff9f0; }
body.night     { background-color: #f8f0ff; }   /* f2fff2 */

.hidden {
    display: none !important;
}

#main {
    margin: 19px auto;
    width: 560px;
}
.header {
}
.header h1 {
    padding: 0 0 15px 41px;
    font-size: 26px;
    line-height: 28px;
    font-weight: bold;
    color: #444;
    text-shadow: 2px 2px 3px #ccc;
}
.header h1 b {
    color: #c69;
}
.header h1 i {
    font-style: normal;
    color: #5b9;
}
.header h1 span {
    color: #7ad;
}

.header .links {
    padding: 0 0 3px 41px;
}
.header .links a {
    color: #aaa;
    text-decoration: underline;
}
.header .links a:hover {
    color: #555;
}

h2 {
    padding: 12px 0 2px 0;
    font-size: 14px;
    line-height: 16px;
    color: #888;
}
h2 a {
    display: inline-block;
    padding: 4px 9px 4px 9px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #f7f7f7;
    text-decoration: none;
    color: #888;
    -webkit-box-shadow: 0 0 4px #bbb;
            box-shadow: 0 0 3px #ddd;
}
h2 a.green  { border: 2px solid #bdb; color: #7a8; background-color: #dfd; }
h2 a.orange { border: 2px solid #eb9; color: #a74; background-color: #fc7; }
h2 a.yellow { border: 2px solid #dd9; color: #996; background-color: #ffa; }
h2 a.blue   { border: 2px solid #cde; color: #78a; background-color: #def1ff; }
h2 a.pink   { border: 2px solid #ebb; color: #a77; background-color: #fdd; }
h2 a.red    { border: 2px solid #c88; color: #955; background-color: #f99; }

h2 a:hover        { color: #555; }
h2 a.green:hover  { color: #4b6955; }
h2 a.orange:hover { color: #6a4a2a; }
h2 a.yellow:hover { color: #656542; }
h2 a.blue:hover   { color: #505c73; }
h2 a.pink:hover   { color: #7b5656; }
h2 a.red:hover    { color: #5f3535; }

h2 a:active        { background-color: #ccc; }
h2 a.green:active  { background-color: #bdb; }
h2 a.orange:active { background-color: #eb9; }
h2 a.yellow:active { background-color: #dd9; }
h2 a.blue:active   { background-color: #cde; }
h2 a.pink:active   { background-color: #ebb; }
h2 a.red:active    { background-color: #c88; }


.controlPanel {
    padding-bottom: 18px;
}
.controlPanel .tabBar {
    position: relative;
    left: 0;
    top: 2px;
    padding-left: 9px;
}
.controlPanel .tabBar li {
    float: left;
    width: 80px;
}
.controlPanel .tabBar li a {
    display: block;
    position: relative;
    z-index: 1;
    padding: 7px 15px 6px 15px;
    border: 1px solid #000;
    border-bottom: none !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
    text-decoration: none;
}

.controlPanel .controls {
    position: relative;
    z-index: 2;
}
.controlPanel .controls li {
    display: none;
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
}
.controlPanel .controls li a {
    margin-right: 50px;
    text-decoration: none;
}
.controlPanel .tabBar li a:hover,
.controlPanel .controls li a:hover {
    color: yellow;
}

.controlPanel ul.options {
    display: block;
}
.controlPanel ul.options > li {
    display: none;
}

.controlPanel ul.options form .column {
    float: left;
    width: 130px;
}
.controlPanel ul.options form .column + .column {
    width: 250px;
}

.controlPanel ul.options .genres .wrapper {
    margin-left: 20px;
    padding-top: 2px;
}

.controlPanel ul.options .genres.column-flow .wrapper ul {
    width: 254px;
    height: auto;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 0px;
       -moz-column-gap: 0px;
            column-gap: 0px;
    -webkit-column-fill: balance;
       -moz-column-fill: balance;
            column-fill: balance;
    display: inline-block; /* Webkit */
}

.controlPanel.games  .tabBar .games a,
.controlPanel.tasks  .tabBar .tasks a,
.controlPanel.movies .tabBar .movies a,
.controlPanel.songs  .tabBar .songs a,
.controlPanel.books  .tabBar .books a,
.controlPanel.all    .tabBar .all a {
    z-index: 3;
}

.controlPanel.games  .controls .games,
.controlPanel.tasks  .controls .tasks,
.controlPanel.movies .controls .movies,
.controlPanel.songs  .controls .songs,
.controlPanel.books  .controls .books,
.controlPanel.all    .controls .all {
    display: block;
}

.controlPanel.games  ul.options .games,
.controlPanel.tasks  ul.options .tasks,
.controlPanel.movies ul.options .movies,
.controlPanel.songs  ul.options .songs,
.controlPanel.books  ul.options .books,
.controlPanel.all    ul.options .all {
    display: block;
}



.controlPanel ul.options {
}
.controlPanel ul.options > li {
    display: none;
    position: relative;
    z-index: 1;
    margin: 0 9px;
    padding: 7px 7px 7px 36px;
    border: 2px solid #ccc;
    border-top: none;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: #fafafa;
    -webkit-box-shadow: 0 0 5px #aaa;
            box-shadow: 0 0 5px #aaa;
}
.controlPanel ul.options > li a {
    text-decoration: none;
}
.controlPanel ul.options .close {
    position: absolute;
    right: 30px;
    top: 10px;
}
.controlPanel ul.options,
.controlPanel ul.options a {
    color: #888;
}
.controlPanel ul.options a:hover {
    color: #353535;
}

.controlPanel ul.options .misc {
    position: absolute;
    right: 0;
    bottom: 12px;
    width: 120px;
}
.controlPanel ul.options .all .misc {
    bottom: 18px;
    width: 145px;
}
.controlPanel ul.options li .misc > div {
}

.controlPanel ul.options input[type="checkbox"],
.controlPanel ul.options input[type="radio"] {
    position: relative;
    left: 0;
    top: 2px;
}
.controlPanel ul.options .wrapper label {
    padding-left: 3px;
}
.controlPanel ul.options input:hover {
    -webkit-box-shadow: 0 0 3px #888;
            box-shadow: 0 0 3px #888;
}
.controlPanel ul.options label:hover,
.controlPanel ul.options input:hover + label {
    color: #353535;
}

.controlPanel .tabBar .orange a,
.controlPanel .controls .orange {
    border: 2px solid #ebcb9c;
    background-color: #fcdba8;
}
.controlPanel .tabBar .yellow a,
.controlPanel .controls .yellow {
    border: 2px solid #cfcf8f;
    background-color: #f0f0a6;
}
.controlPanel .tabBar .purple a,
.controlPanel .controls .purple {
    border: 2px solid #ebd;
    background-color: #ffd3f0;
}
.controlPanel .tabBar .blue a,
.controlPanel .controls .blue {
    border: 2px solid #bcd;
    background-color: #d1eaff;
}
.controlPanel .tabBar .green a,
.controlPanel .controls .green {
    border: 2px solid #b3d4b3;
    background-color: #cff5cf;
}
.controlPanel .tabBar .gray a,
.controlPanel .controls .gray {
    border: 2px solid #ccc;
    background-color: #ddd;
}

.zcontrolPanel .tabBar .orange a:hover,
.controlPanel.games .tabBar .games a,
.controlPanel.games .controls .games {
    background-color: #fea;
}
.zcontrolPanel .tabBar .purple a:hover,
.controlPanel.tasks .tabBar .tasks a,
.controlPanel.tasks .controls .tasks {
    background-color: #ffe5fb;
}
.zcontrolPanel .tabBar .blue a:hover,
.controlPanel.movies .tabBar .movies a,
.controlPanel.movies .controls .movies {
    background-color: #def1ff;
}
.zcontrolPanel .tabBar .green a:hover,
.controlPanel.songs .tabBar .songs a,
.controlPanel.songs .controls .songs {
    background-color: #dfd;
}
.zcontrolPanel .tabBar .yellow a:hover,
.controlPanel.books .tabBar .books a,
.controlPanel.books .controls .books {
    background-color: #ffa;
}
.zcontrolPanel .tabBar .gray a:hover,
.controlPanel.all .tabBar .all a,
.controlPanel.all .controls .all {
    background-color: #eee;
}

.controlPanel .tabBar .orange a,
.controlPanel .controls .orange a {
    color: #a68;
}
.controlPanel .tabBar .yellow a,
.controlPanel .controls .yellow a {
    color: #996;
}
.controlPanel .tabBar .purple a,
.controlPanel .controls .purple a {
    color: #a74;
}
.controlPanel .tabBar .blue a,
.controlPanel .controls .blue a {
    color: #679;
}
.controlPanel .tabBar .green a,
.controlPanel .controls .green a {
    color: #697;
}
.controlPanel .tabBar .gray a,
.controlPanel .controls .gray a {
    color: #888;
}

.controlPanel .tabBar li.orange a:hover,
.controlPanel .controls li.orange a:hover {
    color: #663d52;
}
.controlPanel .tabBar li.yellow a:hover,
.controlPanel .controls li.yellow a:hover {
    color: #45452d;
}
.controlPanel .tabBar li.purple a:hover,
.controlPanel .controls li.purple a:hover {
    color: #5f4326;
}
.controlPanel .tabBar li.blue a:hover,
.controlPanel .controls li.blue a:hover {
    color: #353e50;
}
.controlPanel .tabBar li.green a:hover,
.controlPanel .controls li.green a:hover {
    color: #3b5945;
}
.controlPanel .tabBar li.gray a:hover,
.controlPanel .controls li.gray a:hover {
    color: #505050;
}


.building {
    margin: 3px 0 0 0;
    padding: 7px;
    border: 2px solid #ccc;
    border-radius: 15px;
    background-color: #eee;
    -webkit-box-shadow: 0 0 5px #aaa;
            box-shadow: 0 0 5px #aaa;
}
.floorGroup {
    position: relative;
    margin: 0 0 7px 0;
    padding: 9px 0 15px 27px;
    border: 2px solid #ccc;
    border-radius: 10px;
    background-color: #fff;
}
.floorGroup: last-child {
    margin-bottom: 0;
}
.floorGroup .tier-title {
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 16px;    
    letter-spacing: 1px;
    text-align: center;
    color: #d7d7d7;
}

ul.rooms {
    padding: 0 0 15px 0;
}
ul.rooms li.room {
    position: relative;
}

.room input[type="checkbox"] {
    position: relative;
    left: 0;
    top: 2px;
}
.room label {
    padding-left: 3px;
    color: #999;
}
.room input:hover {
    box-shadow: 0 0 3px #888;
}
.room input:hover + label {
    color: #555;
}

.room a.category {
    position: absolute;
    top: 4px;
    padding-left: 15px;
    text-decoration: underline;
}

.room a.tasks  { left: 175px; color: #c69; }
.room a.movies { left: 240px; color: #7ad; }
.room a.songs  { left: 305px; color: #5b9; }
.room a.books  { left: 370px; color: #996; }
.room a.games  { left: 430px; color: #b85; }

.room a.tasks:hover  { color: #5f4326; }
.room a.movies:hover { color: #353e50; }
.room a.songs:hover  { color: #3b5945; }
.room a.books:hover  { color: #45452d; }
.room a.games:hover  { color: #663d52; }

.room ul.category {
    display: none;
    margin: 6px 0 3px 0;
    padding: 0px 0 3px 40px;
}
.room ul.category li {
    padding-bottom: 1px;
    position: relative;
}
.room ul.category li.urgent {
    color: red;
}
.room ul.category li.overdue {
    color: red;
}
.room ul.category li.overdue {
    font-weight: bold;
}
.room ul.games li  { color: #b85; }
.room ul.tasks li  { color: #b58; }
.room ul.movies li { color: #7ad; }
.room ul.songs li  { color: #5b9; }
.room ul.books li  { color: #996; }

.room ul.category li span.weight {
    position: absolute;
    left: -62px;
    top: -1px;
    width: 28px;
    height: 18px;
    font-size: 12px;
    text-align: right;
    opacity: 0.4;
    filter:alpha(opacity=40);
}
.room ul.category li i {
    position: absolute;
    left: -22px;
    top: -1px;
    width: 18px;
    height: 18px;
}
.room ul.category li i.color0    {background-color: #7bd18a;}
.room ul.category li i.color1    {background-color: #65eb5e;}
.room ul.category li i.color2    {background-color: #85eb60;}
.room ul.category li i.color3    {background-color: #a4eb63;}
.room ul.category li i.color4    {background-color: #c2eb65;}
.room ul.category li i.color5    {background-color: #e0eb67;}
.room ul.category li i.color6    {background-color: #ebd96a;}
.room ul.category li i.color7    {background-color: #ebbe6c;}
.room ul.category li i.color8    {background-color: #eba46e;}
.room ul.category li i.color9    {background-color: #eb8b71;}
.room ul.category li i.color10   {background-color: #eb7373;}

.room ul.category li.overdue i   {background-color: red;}
.room ul.category li.fresh i     {background-color: #e5fffd;}
.room ul.category li.headStart i {background-color: #eee;}

.room ul.category li b {
    padding-left: 2px;
    font-weight: bold;
    visibility: hidden;
}
.room ul.category li.overdue b {
    visibility: visible;
}

.controlPanel ul.options .actions .column {
    float: left;
    width: 125px;
}
.controlPanel ul.options .actions .column + .column {
    margin-left: 80px;
    width: 260px;
}

.controlPanel ul.options .genres a.genre,
.controlPanel ul.options .roles a.role,
.controlPanel ul.options .specials a {
    line-height: 20px;
}

.controlPanel ul.options .actions {
    margin: 20px 0 20px 0;
}

.controlPanel ul.options .actions a.action {
    display: block;
    width: 125px;
    height: 24px;
    margin-bottom: 6px;
    padding: 3px;
    line-height: 24px;
    text-align: center;
    border-radius: 10px;
}

.controlPanel ul.options .actions a.action.blue {
    color: #667799;
    background-color: #d1eaff;
    border: 2px solid #BBCCDD;
}
.controlPanel ul.options .actions a.action.blue:hover {
    color: #353e50;
}

.controlPanel ul.options .actions a.action.green {
    color: #669977;
    background-color: #CFF5CF;
    border: 2px solid #B3D4B3;
}
.controlPanel ul.options .actions a.action.green:hover {
    color: #3b5945;
}

.controlPanel ul.options .actions a.action.yellow {
    color: #999966;
    background-color: #F0F0A6;
    border: 2px solid #CFCF8F;
}
.controlPanel ul.options .actions a.action.yellow:hover {
    color: #45452d;
}

.controlPanel ul.options .actions a.action.orange {
    color: #AA6688;
    background-color: #FCDBA8;
    border: 2px solid #EBCB9C;
}
.controlPanel ul.options .actions a.action.orange:hover {
    color: #663d52;
}

.controlPanel ul.options .actions a.action.red {
    color: #AA7744;
    background-color: #FFD3F0;
    border: 2px solid #EEBBDD;
}
.controlPanel ul.options .actions a.action.red:hover {
    color: #5f4326;
}

.controlPanel ul.options .roles .wrapper a,
.controlPanel ul.options .specials .wrapper a,
.controlPanel ul.options .specials .divider {
    margin-left: 20px;
}
.controlPanel ul.options .specials .divider {
    color: #ccc;
}

.controlPanel ul.options .genres a.genre.state2,
.controlPanel ul.options .genres a.genre.state1,
.controlPanel ul.options .roles a.role.state2,
.controlPanel ul.options .roles a.role.state1,
.controlPanel ul.options .specials a.state1,
.controlPanel ul.options .specials a.state2 {
    color: green;
}
.controlPanel ul.options .genres a.genre.state-1,
.controlPanel ul.options .roles a.role.state-1,
.controlPanel ul.options .specials a.state-1 {
    color: red;
}

.controlPanel ul.options .genres a.genre b,
.controlPanel ul.options .roles a.role b,
.controlPanel ul.options .specials a b {
    padding-left: 2px;
    font-weight: bold;
    visibility: hidden;
}
.controlPanel ul.options .genres a.genre.state2 b,
.controlPanel ul.options .roles a.role.state2 b,
.controlPanel ul.options .specials a.state2 b {
    visibility: visible;
}

.controlPanel ul.options .difficulty,
.controlPanel ul.options .roles,
.controlPanel ul.options .media,
.controlPanel ul.options .specials {
    padding: 20px 0 5px 0;
}
.controlPanel ul.options .movies .specials {
    padding-top: 12px;
}