@charset "UTF-8";

.msg {
    display:block;
    box-sizing: border-box;
    width:320px;
    margin:0 auto;
    margin-top:48px;
    padding:2em;
    padding-top:1em;
    text-align:center;
    color:#000;
    background:linear-gradient(to top,#ccc,#eee);
    border:2px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-radius:8px;
    box-shadow:-3px 6px 8px rgba(0,0,0,.5);
    cursor:default;
}
.msg.err {
    color:#f00;
}

#dtMain {
    display:block;
    box-sizing: border-box;
    margin:0 auto;
    margin-top:48px;
    width:720px;
    height:480px;
    background:linear-gradient(to top,#ccc,#eee);
    border:2px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-radius:8px;
    border-top-left-radius:24px;
    box-shadow:-3px 6px 8px rgba(0,0,0,.5);
    cursor:default;
}
#dtMain a {
    color:#fff;
    text-decoration:none;
    cursor:default;
}
#dtMain hr {
    width:90%;
    margin:0 auto;
    margin-top:.5em;
    margin-bottom:.5em;
    padding:0;
    border:0 none;
    border-top:1px #666 dotted;
    outline:0 none;
}
#dtMain footer { }
#dtMain footer a:link, #dtMain footer a:visited {
    color:#000;
}
#dtMain footer a:hover, #dtMain footer a:active {
    color:#08f;
    cursor:pointer;
}
#dtTitle {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    width:480px;
    height:32px;
    margin-left:88px;
    margin-top:-16px;
    padding-top:3px;
    text-align:center;
    text-transform:uppercase;
    font-family:'forque';
    letter-spacing:1px;
    font-size:22px;
    font-weight:bold;
    color:#fff;
    background:linear-gradient(to top,#222,#444,#444,#888);
    border:2px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-radius:16px;
    box-shadow:-2px 4px 6px rgba(0,0,0,.25);
}
#dtTxt {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    float:left;
    width:560px;
    height:116px;
    margin-left:8px;
    margin-top:8px;
    padding:8px;
    padding-right:12px;
    text-align:justify;
    font-size:13px;
    font-style:italic;
    color:#444;
    background:linear-gradient(to top,#ccc,#fff);
    border:2px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-radius:8px;
    box-shadow:-2px 4px 6px rgba(0,0,0,.25);
}
#dtPic, #dtStats {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    float:left;
    width:560px;
    height:320px;
    margin-left:8px;
    color:#fff;
    background:linear-gradient(to top,#333,#555,#777);
    border:2px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-radius:4px;
    box-shadow:-2px 4px 6px rgba(0,0,0,.25);
}
#dtPic {
    margin-top:8px;
}
#dtStats {
    margin-top:-444px;
}
#dtStats header {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    width:100%;
    height:24px;
    padding-left:1.5em;
    padding-top:3px;
    text-align:left;
    text-transform:uppercase;
    font-size:14px;
    font-weight:bold;
    color:#fff;
    background:linear-gradient(to top,#222,#444,#444,#888);
    border:0 none;
    border-bottom:2px solid #000;
    box-shadow:0 4px 6px rgba(0,0,0,.25);
}
#dtStats img {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    float:left;
    width:128px;
    height:128px;
    margin:8px;
    background:#000;
    border:2px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-radius:4px;
    box-shadow:-2px 4px 6px rgba(0,0,0,.25);
}
#dtStats section {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    float:left;
    width:180px;
    margin:8px;
    padding-bottom:8px;
    font-size:14px;
    color:#fff;
    background:#444;
    border:2px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-radius:4px;
    box-shadow:-2px 4px 6px rgba(0,0,0,.25);
}
#dtStats table {
    width:90%;
    margin:0 auto;
    spacing:0;
}
#dtStats table td {
    width:50%;
    padding:8px;
    padding-top:0;
    border-bottom:1px dotted #fff;
}
#dtStats table td.stat {
    text-align:right;
    font-weight:bold;
    border-right:1px dotted #fff;
}
#dtStats table tr.last td {
    padding-bottom:0;
    border-bottom:0 none;
}
#dtStats p {
    clear:both;
    margin:8px;
    margin-bottom:0;
    text-align:justify;
}
#dtStats span.damaged {
    color:#f00;
}
#dtStats span.symbol.damaged {
    cursor:help;
}
#stats {
    opacity:0;
    transition:opacity 1250ms;
}
#stats:target {
    opacity:1;
    transition:opacity 2500ms;
}
.dtPlayer {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    float:left;
    width:36px;
    height:32px;
    margin-left:32px;
    margin-top:-16px;
    text-align:center;
    font-size:16px;
    font-weight:bold;
    color:#fff;
    background:linear-gradient(to top,#111,#222,#333);
    border:2px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-radius:16px;
    box-shadow:-2px 4px 6px rgba(0,0,0,.25);
    cursor:pointer;
}
#dtMap {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    float:right;
    width:153px;
    height:153px;
    margin-right:-12px;
    margin-top:-356px;
    background:linear-gradient(to top,#888,#ccc);
    border:2px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-radius:4px;
    box-shadow:-2px 4px 6px rgba(0,0,0,.25);
}
#dtPic img, #dtMap img {
    width:100%;
    height:100%;
}
#dtNav {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    float:right;
    width:133px;
    height:133px;
    margin-right:8px;
    margin-top:-196px;
    background:linear-gradient(to top,#888,#ccc);
    border:2px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-radius:67px;
    box-shadow:-2px 4px 6px rgba(0,0,0,.25);
}
#dtNav input[type=button] {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    width:36px;
    height:36px;
    margin-bottom:8px;
    font-size:14px;
    font-weight:bold;
    color:#fff;
    background:linear-gradient(to top,#111,#222,#333);
    border:2px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-radius:18px;
    box-shadow:-2px 4px 6px rgba(0,0,0,.25);
    cursor:pointer;
}
#dtNav input[type=button].N, #dtNav input[type=button].S {
    clear:both;
    margin:0 auto;
    margin-bottom:8px;
}
#dtNav input[type=button].N {
    margin-top:3px;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
}
#dtNav input[type=button].S {
    border-top-left-radius:4px;
    border-top-right-radius:4px;
}
#dtNav input[type=button].W {
    float:left;
    margin-left:3px;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
}
#dtNav input[type=button].E {
    float:right;
    margin-right:3px;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
}
#dtNav input[type=button]:disabled {
    opacity:0.25;
    cursor:default;
}
#dtOpt {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    float:right;
    width:160px;
    height:160px;
    margin-right:-20px;
    margin-top:-56px;
}
#dtOpt input[type=button] {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    width:100%;
    height:45px;
    margin-bottom:8px;
    padding-right:8px;
    font-size:14px;
    font-weight:bold;
    color:#fff;
    background:linear-gradient(to top,#111,#222,#333);
    border:2px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-radius:24px;
    border-top-left-radius:8px;
    border-bottom-left-radius:8px;
    box-shadow:-2px 4px 6px rgba(0,0,0,.25);
    cursor:pointer;
}
#dtOpt input[type=button]:disabled {
    opacity:0;
    cursor:default;
}
#dtSong {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    margin:0 auto;
    margin-top:8px;
    color:#fff;
    background:linear-gradient(to top,#111,#222,#333);
    border:2px solid #000;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-radius:24px;
    box-shadow:-2px 4px 6px rgba(0,0,0,.25);
    opacity:.5;
    transition:opacity 1000ms;
}
#dtSong:hover {
    opacity:1;
    transition:opacity 500ms;
}
#dtCopying {
    display:block;
    box-sizing: border-box;
    overflow:hidden;
    float:right;
    width:133px;
    height:20px;
    margin-right:8px;
    margin-top:-22px;
    text-align:center;
    font-size:9px;
    color:#444;
    text-shadow:1px -1px 0 #ccc;
}