/* body { height: auto; width: 99%; font-size: 11px; background: #000000 url(../images/dark-metal.jpg) 50% 50% repeat; } */
@import url("../fonts/stylesheet.css");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");

/*
@font-face {
    font-family: MonoChinese;
    src: url('/client/public/fonts/華康中圓體.TTC');
}
*/
body {
    outline: 0 none !important;/*    font-family: "Open Sans", "Lucida Console", "DejaVu Sans Mono", "DejaVu Sans", Arial, Helvetica, sans-serif;*/
    font-size: 12px;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
}

a {
    color: #ffeb9e;
}

a, a:hover {
    text-decoration: none;
}

textarea {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

@media (min-device-width:1025px) {
    a, .menu-dropdown span.subtitle {
        transition: color 200ms ease-in-out 0s;
    }

    form.style input, form.style select, form.style textarea, form.style button:hover, form.style input.button:hover, form.style input[type="button"]:hover, form.style input[type="submit"]:hover, .mobile-switcher {
        transition: color 250ms ease-in-out 0s, background 250ms ease-in-out 0s;
    }

    .menu-dropdown li.level1:hover, .menu-dropdown li.remain, .menu-dropdown li.level2:hover, .menu-sidebar li.level1 .level1:hover, .menu-sidebar li.level1 > .level1:hover:before, .searchbox .results li.result.selected {
        transition: all 300ms ease-in-out 0s;
    }

    .menu-dropdown li.level1:hover .level1, .menu-dropdown li.remain .level1, .menu-dropdown li.level1:hover .level1 span.subtitle, .menu-dropdown li.remain .level1 span.subtitle {
        transition: color 300ms ease-in-out 0s;
    }

    .drive-scale:hover, #system .pagination a:hover {
        animation-duration: 150ms;
        animation-fill-mode: both;
        animation-name: scale;
    }

    @keyframes scale {
        0%, 100% {
            transform: scaleY(1);
        }

        50% {
            transform: scaleY(1.8);
        }

    }

    @keyframes scale {
        0%, 100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.2);
        }

    }

    .drive-flash:hover, #system .item > p.links a:hover, #system .item div.reply a:hover {
        animation-duration: 400ms;
        animation-fill-mode: both;
        animation-name: flash;
    }

    @keyframes flash {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: 0.3;
        }

    }

    @keyframes flash {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: 0.3;
        }

    }

    .drive-transform:hover, .menu-dropdown li.level1 > .level1:hover > span, .menu-dropdown li.level2:hover a.level2, .menu-sidebar li.level1 .level1:hover > span {
        animation-duration: 300ms;
        animation-fill-mode: both;
    }

    .drive-transform:hover {
    }

    .menu-dropdown li.level1 > .level1:hover > span {
        animation-name: fadeInY;
    }

    @keyframes fadeInY {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0px);
        }

    }

    @keyframes fadeInY {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0px);
        }

    }

    .drive-transform:hover, .menu-dropdown li.level2:hover a.level2, .menu-sidebar li.level1 .level1:hover > span {
        animation-name: fadeInX;
    }

    @keyframes fadeInX {
        0% {
            opacity: 0;
            transform: translateX(-10px);
        }

        100% {
            opacity: 1;
            transform: translateX(0px);
        }

    }

    @keyframes fadeInX {
        0% {
            opacity: 0;
            transform: translateX(-10px);
        }

        100% {
            opacity: 1;
            transform: translateX(0px);
        }

    }

    .drive-bounce:hover, .button-default:hover, .button-primary:hover, form.style button:hover, form.style input[type="button"]:hover, form.style input[type="submit"]:hover {
        animation-duration: 300ms;
        animation-fill-mode: both;
        animation-name: bounce;
    }

    @keyframes bounce {
        0%, 100% {
            transform: translateY(0px);
        }

        30% {
            transform: translateY(3px);
        }

        60% {
            transform: translateY(-3px);
        }

    }

    @keyframes bounce {
        0%, 100% {
            transform: translateY(0px);
        }

        30% {
            transform: translateY(3px);
        }

        60% {
            transform: translateY(-3px);
        }

    }

}

h1, h3, a:hover, blockquote, .menu-dropdown li.active .level1, .menu-dropdown li.active .level1 span.subtitle, .menu-dropdown a.level2:hover, .menu-dropdown a.level2:hover span.subtitle, .menu-dropdown a.level3:hover, .menu.menu-sidebar li.level1.active > .level1, .menu.menu-sidebar li.level1.active > .level1:hover > span, .menu-sidebar .level2 a:hover, .mod-box-color .button-default, .mod-box-color form.style button, .mod-box-color form.style input[type="button"], .mod-box-color form.style input[type="submit"], form.style button:hover, form.style input[type="button"]:hover, form.style input[type="submit"]:hover, #system .title a, .searchbox .results li.more-results:hover, .searchbox .results li.result.selected, .wk-slideshow-tabs-drive .nav li.active {
    color: #fff9e5;
    text-shadow: 0 0 2px rgba(255, 144, 0, 0.4);
}

.kbutton:before, form .button:before {
    background-image: url("../../../images/tools/button_default_effect.png") !important;
}

.kbutton:before, form .button:before {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAiCAYAAACp43wlAAACHUlEQVRo3u3Y0W6DMAwFUJv+/ydT74VpEaLJ9bUdso1IqEBoaX2wDVUzkw9DB+t6LJuIvI7XzbGtF9uv47PP89uxf2v2t8d/DxORd7PYaWn3vy/27Rf799Pc3szvp/O189Z8Jxms/wQ3CNLCXG3rYF4u1j+dJ2v0AmUX61fbNpiXapBPEB4QFEMHF0QGhnQCx6AgINb5LiUgAkL03odAaABBnNkhQPB771sKBAFCMSozhEEZZdBUEAED64Xw9A8NZEevvkdhBGzopSDeLEF7hwZL1QjHgFe0bI2yowREwCAyEKuWLA+MOMoVBZKRJbJIdmRniVRkRwUI2ie8t7ozMwSF8TTxMhAW5a+BRDBCIGiWCAEwuqua1dTRuy4hSxScHSxIFkoP5i6Qc7CzMcpAvChoecp+Smee1j1lzP1fVQYIGhwExdsvqh8MPX0lo3GPr34QJAOFad5KZC7y480JhO4LYWSAME3fmxFVf7+zGcM27XQQFiWSEdkYaBDZ4IcwGBBvGUFhotmhzh9uTiQWwoXBgjC1XYPb2T2EDbS3N/ivdhKEbbhKHhcpY0zAMkoRd6UHQJDgaCCLspu7EfOW+FlTQDKCqYUIknxll0Fkg2TVfg2e1yYDpUFUgbB3RzIxSzIDnB68KhAmmCr3Dis6dimQrFJ0Z/CnQMwGWSkTlkO4G2R1oFsDsgLIXVBL/vCVQf7leEAekGc8IL9ofAGA79DMoBtu0AAAAABJRU5ErkJggg==") !important;
}

.kbutton, form .button, .app .button {
    background: url("../../../images/tools/button_default.png") repeat-x scroll 50% 0 transparent !important;
    border: medium none !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    color: #8a8c8c;
    font-family: "OpenSansLight", Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: normal !important;
    padding: 6px 12px !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.kbutton, form .button, .app .button {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAA4CAYAAAD959hAAAAAZElEQVRYw+3SsQ2AQAxD0RS3IjMiIbEUxwTUscIKFL8I4AzwZN95rNu+BHjjmOeFglIGCmYqeicUnTD1w8rdE/LDxn856TdU+2G/oLKH7cpfHDadsKpYMOAzaNCgQYMGDRp8fjeRCVbDjfq8HgAAAABJRU5ErkJggg==") repeat-x scroll 50% 0 transparent !important;
    border: medium none !important;
    border-radius: 2px !important;
    font-family: "OpenSansLight", Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: normal !important;
    padding: 6px 12px !important;
}

.kbutton:hover, form .button:hover {
    animation-duration: 300ms;
    animation-fill-mode: both;
    animation-name: bounce;
    color: #ccc;
}

.btn.active, .btn:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 rgba(255, 255, 255, 0.05);
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    background-color: #4d4d4d;
    color: #fff;
}

.btn.active, .btn:active {
    background-image: none;
    outline: 0 none;
}

.btn {
    border-color: rgba(0, 0, 0, 0.7);
}

.btn {
    background-clip: padding-box;
    background-color: #5c5c5c;
    background-image: linear-gradient(to bottom, #666666, #4d4d4d);
    background-repeat: repeat-x;
}

.btn {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    vertical-align: middle;
}

#main:before, #content {
    background: none !important;
}

.icon {
    height: 16px;
    width: 16px;
    text-align: center
}

.pointer:hover {
    cursor: pointer;
}

button.disabled {
    opacity: 0.35 !important;
    pointer-events: none;
}

.tmp-toolbar .disabled {
    opacity: 0.35 !important;
    pointer-events: inherit;
}

.white {
    color: #ccc
}

.gold {
    color: gold
}

.bottom {
    float: bottom
}

.app {
    padding: 0px;
    margin: 0px auto;
}

.app a:hover {
    cursor: pointer
}

.app #c {
    clear: both
}

.app .out {
    font-size: 18px;
}

.app .out a, .app .freeze a {
    color: inherit;
    text-decoration: underline;
}

.app .nav {
    margin-bottom: 0px
}

.hidden {
    display: none
}

.app .window {
    color: #ffffff;
    position: absolute;
    z-index: auto;
    margin: 0px auto;
    border: 0.5px solid rgba(255, 255, 255, 0.15);
}

.app .handle {
    cursor: move;
    background: rgba(0, 0, 0, 0.8) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    color: #8A8C8C;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 18px;
    position: absolute;
    top: 0px;
    clear: both;
    pointer-events: auto;
    z-index: 1;
}

.app .window .content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 18px;
    left: 0px;
    padding: 0px;
    background-color: black;
    color: #ccc;
    clear: both;
    overflow: hidden;
}

.app .window .tab-content {
    margin: 0px auto;
    padding: 0px;
    height: 100%;
}

.app .window .tab-pane {
    margin: 0px auto;
    padding: 0px;
    overflow: hidden;
}

.app .handle .toolbar {
    margin-right: 4px;
    position: absolute;
    top: 0px;
    right: 0px
}

.app .handle .toolbar i {
    margin-right: 5px
}

.app .window .inbar {
    background-color: rgba(0, 0, 0, 0.5);
}

.app .window .inbar:hover {
    cursor: move
}

.app .window .tab-pane iframe {
    position: relative;
    margin: 0px auto;
    display: inherit;
    top: 8px;
    overflow: hidden;
}

.app .window .tab-items {
    white-space: pre-wrap;
}

.app .window .tab-pane .content {
    top: auto;
}

.app .out, .app .freeze {
    height: 89%;
    width: 97%;
    line-height: auto !important;
    color: #cccccc;
    margin: 0px auto;
    padding: 5px;
    padding-left: 20px;
    padding-right: 12px;
    white-space: pre-wrap;    /* word-break: keep-all; */
    word-break: break-all;
    overflow: scroll;
}

.app .out {
    float: left
}

.app .freeze {
    float: right;
    width: 42%;
    font-size: 10px;
}

.app .mxp-dropdown {
    list-style-type: none;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 2px 2px 2px 2px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 1.0) inset !important;
    margin: 0px;
    padding: 2px;
    z-index: 1060;
}

.app .mxp-dropdown a.mxp {
    text-decoration: none;
    border: none;
}

.app a.mxp {
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px 2px 2px 2px;
}

.app a.mxp:hover {
    box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 255, 255, 0.6) !important;
}

.app [class^="icon-"]:hover, .app li.macro-btn:hover, .app .checkbox:hover {
    cursor: pointer
}

.app .game-link, .app .tab-pane, .app .profile-link, .app .chat-link {
    padding-left: 6px;
}

.app .tmc, .app .game-link {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-y: hidden;
}

.app .game-link {
    width: 170px;
    font-size: 12px;
}

.app .tmc-link {
    width: 170px;
    font-size: 11px;
}

.app .game-link-selected {
    background-color: rgba(255, 255, 255, 0.3);
}

.app .gamepanel .scroll {
    padding-left: 4px;
}

.app .kbutton {
    margin-right: 4px;
}

.app ul.macro-btns {
    width: 100%;
    margin-top: 10px;
}

.app li.macro-btn, .modal li {
    max-width: 60px;
    padding-left: 6px;
    padding-right: 6px;
    margin-left: 6px;
    text-align: center;
    display: inline-block;
}

.modal {
    left: 50%;
    margin-left: -280px;
    outline: 0 none;
    position: fixed;
    top: 15%;
    width: 500px;
    z-index: 1050;
}

.modal, .modal-footer, .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

.modal ul {
    whitespace: nowrap;
}

.modal p {
    margin: 10px 0px;
}

.modal .close {
    color: #ddd;
}

.modal .alert {
    padding: 8px 14px 8px 14px;
}

.modal textarea {
    border-color: rgba(255, 255, 255, 0.2);
}

.modal textarea:focus {
    border-color: rgba(255, 255, 255, 0.4);
}

.modal .nice {
    height: 100%;
    position: relative;
    top: -16px;
}

.modal li.option {
    min-width: 70px;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 10px;
}

.modal .active, .group-member.active {
    background-color: rgba(255, 255, 255, 0.2);
}

.modal-text-content {
    white-space: pre-wrap;
    word-break: keep-all;
    font-family: "Lucida Console", "DejaVu Sans Mono", FreeMono, "Open Sans", Arial, Helvetica, sans-serif;
}

.dropdown-menu {
    z-index: 1000;
}

.tooltip {
    pointer-events: none;
}

.app .ui-icon-gripsmall-diagonal-se {
    opacity: 0.6
}

.ui-dialog .ui-dialog-title {
    margin: 0.1em 16px 0.1em 0;
    position: relative;
    top: -4
}

.hidden {
    display: none
}

.bg {
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
}

.bg-image {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

#toolbar-window {
    padding-top: 2px;
    position: absolute;
    z-index: 1;
    top: 5;
    left: 5;
    cursor: move;
    height: 32
}

#toolbar-window button {
    height: 24px;
    font-size: 10.5px;
    margin: 2px 5px 0px 0px
}

.ui-dialog .ui-dialog-titlebar {
    height: 8px
}

.bare .ui-dialog-titlebar {
    display: none
}

.ui-left {
    float: left
}

.ui-right {
    float: right
}

.ui-icon-wrench {
    margin-top: 6px;
    padding-right: 5px
}

.icon {
    cursor: pointer
}

.ui-press {
    cursor: pointer
}

.ui-move {
    cursor: move
}

#promo {
    position: absolute;
    width: 100%;
    top: 95%
}

.app input:focus, .app .out:focus, .modal .active {

    /* border-color: rgba(233, 193, 72, 0.4) !important;
    box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(233, 193, 72, 0.6) !important; */
    outline: 0 none;
}

.app .send {
    position: relative;
    width: 90%;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    background-position: 0 50%;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
    color: #eee;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    margin-left: 4px;
    padding-left: 4px;
}

.app #scroll-view .input {
    clear: both;
    width: 97%;
    padding-right: 40px;
    padding-top: 6px;
    position: absolute;
    bottom: 6px;
}

input:focus {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 255, 255, 0.5);
    outline: 0 none;
}

.app .send:focus, .app .out:focus, .app .freeze:focus {
    border-color: rgba(1, 200, 212, 0.3);    /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(1, 200, 212, 0.5); */
    outline: 0 none;
}

.app .chat-send {
    width: 490px;
}

.app .multitext {
    width: 98%;
    height: 300px;
}

.modal-body {
    max-height: auto !important;
    max-width: auto !important;
}

p:focus, ul:focus, div:focus {
    outline: 0px none !important;
}

.app .tooltip, .app .ui-tooltip {
    border: 0.5px solid rgba(233, 193, 72, 0.6) !important;
    box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(233, 193, 72, 0.6) !important;
    padding: 3px;
    font-size: 13px;
    font-family: "Open Sans", "Lucida Console", Arial, Helvetica, sans-serif;
    color: "FloralWhite";
}

.app .game-thumb {
    width: 60px;
}

.app .gamelist {
    height: 96%;
}

.minibar-wrapper {
    position: absolute;
    bottom: 3;
    left: 5;
    height: 7;
    width: 96%
}

.minibar-cont {
    float: left;
    width: 33.33%;
    height: 7
}

.minibar {
    width: 0;
    float: left;
    height: 7
}

.mini-hpbar {
    background: #cc3300 url('/bedlam/app/images/group-healthbar.png')
}

.mini-manabar {
    background: #3366cc url('/bedlam/app/images/group-manabar.png')
}

.mini-movebar {
    background: #009933 url('/bedlam/app/images/group-movebar.png')
}

.app .tab-content {
    background-color: black;
    font-size: 13px;
}

.app .nav-tabs {
    padding: 0px;
    padding: 0px;
    margin: 0px;
    border-bottom-color: #444;
}

.app .nav-tab {
    padding-left: 4px;
}

.app .chat-window .time {
    position: relative;
}

.ui-tabs .ui-tabs-nav li a {
    font-size: 9px;
}

.guild-window {
    width: 320px;
    height: 500px;
    position: absolute;
    top: 50px;
    left: 905px
}

.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.grayscale:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

.app .bar-window {
    position: fixed;
    background-color: transparent;
    cursor: move
}

.bar-window .status {
    position: absolute;
    top: 10px;
    left: 0px
}

.bar-window .bars {
    position: absolute;
    top: 8px;
    left: 0px
}

.bar-window .smoke {
    position: absolute;
    top: 10px;
    left: 0px;
    overflow: hidden;
    height 0px;
}

.bar-window .bar-wrapper {
    position: absolute;
    width: 200px;
    left: 127px;
    top: 0px;
}

.bar-window .black {
    background-color: #111;
    float: right;
    clear: both;
    left: -5px;
    top: -6px
}

.bar-window .manabar {
    position: relative;
    width: 200px;
    height: 16px;
    top: 23px
}

.bar-window .movebar {
    position: relative;
    width: 204px;
    height: 16px;
    top: 28px
}

.bar-window .expbar {
    position: relative;
    width: 200px;
    height: 16px;
    top: 50px
}

.bar-window .tarbar {
    position: relative;
    width: 200px;
    height: 16px;
    top: 54px
}

.bar-window .now, .bar-window .label {
    color: white;
    font-size: 15px;
    font-weight: bold;
    height: 20px;
    width: 50%;
    float: left;
    text-align: right;
    padding-right: 3px;
    text-shadow: -1px -1px 0px #000, 1px -1px 0 #000, -1px 1px 0px #000, 1px 1px 0px #000;
    background-color: transparent;
}

.bar-window .label {
    clear: both
}

.bar-window .max {
    color: beige;
    font-size: 13px;
    float: left;
    text-align: left;
    padding-top: 2px
}

.bar-window .hp {
    font-size: 17px
}

.bar-window .maxhp {
    font-size: 15px;
}

.bar-window .hp-label {
    position: absolute;
    top: 64px;
    left: -10px;
    width: 120px
}

.bar-window .mana-label {
    position: absolute;
    top: 22px;
    left: 120px;
    width: 200px
}

.bar-window .moves-label {
    position: absolute;
    top: 42px;
    left: 120px;
    width: 200px
}

.bar-window .exp-label {
    position: absolute;
    top: 80px;
    left: 120px;
    width: 200px
}

.bar-window .tar-label {
    position: absolute;
    top: 100px;
    left: 120px;
    width: 200px
}

.bar-window .single-label {
    text-align: center;
}

.app .no-target {
    opacity: 0.4
}

.app .svg {
    display: block
}

.map-window {
    position: absolute;
    top: 100;
    left: 600;
    width: 600px;
    height: 620px;
    overflow: hidden;
    z-index: 40;
    background-color: rgba(0, 0, 0, 0.7);
}

.map-window iframe {
    zoom: 0.65;
    -moz-transform: scale(0.65);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.65);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.65);
    -webkit-transform-origin: 0 0;
    width: 165%;
    height: 165%;
}

.map {
    scrolling: none;
    overflow: hidden;
    border: none;
    width: 100%;
    height: 96%;
    float: bottom
}

#mapper {
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
}

#mapper #map {
    padding: 0;
    margin: 0 auto;
    position: relative;
    top: 0px;
    left: 0px;
}

#mapper .line {
    stroke-width: 1px;
    opacity: 0.12;
    fill: none;
}

#mapper .arrow {
    opacity: 1;
    stroke-width: 1px;
    stroke: White;
    color: White;
    fill: White;
}

#mapper .room {
    opacity: 0.2;
    fill: #ccc;
    fill-opacity: 0.3;
    stroke-width: 1px;
    stroke-color: #F2C931;
}

#mapper .tag {
    font-size: 11px;
    fill: inherit;
    color: inherit;
    opacity: 0;
    font-family: "Open Sans", "Lucida Console", Arial, Helvetica, sans-serif;
    font-weight: 'bold';
    pointer-events: none;
}

#mapper body {
    background-image: none;
}

#mapper .line.active {
    opacity: 0.5;
}

#mapper .line.road {
    opacity: 0.3;
}

#mapper .room.road {
    opacity: 0.4;
}

#mapper .room.active {
    opacity: 0.9;
}

#mapper .room.seeall {
    opacity: 0.4;
}

#mapper .tag.active {
    opacity: 0.8;
}

#mapper .room:hover {
    cursor: pointer
}

#mapper .room.selected {
    width: 5px;
    stroke-width: 2px;
    stroke-color: White;
}

#mapper .room.active.in {
    opacity: 1;
    fill: #fff !important;
    fill-opacity: 0.8;
    stroke-width: 2px;
}

#mapper .context-top {
    position: absolute;
    top: 16px;
    left: 0px;
    z-index: 2;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

#mapper .context li {
    display: inline-block;
}

#mapper .dir {
    width: 10px;
    height: 10px;
}

#mapper .on {
    color: White;
}

.app .spinner {
    -webkit-animation: rotation 1s infinite linear;
    -moz-animation: rotation 1s infinite linear;
    -o-animation: rotation 1s infinite linear;
    animation: rotation 1s infinite linear;
}

.group-window {
    width: 280px;
    height: 290px;
    padding: 4px;
    position: absolute;
    top: 50;
    left: 610;
    background-color: black;
    font-size: 10.5px;
}

.group-member, .group-member-placeholder {
    height: 82px;
    overflow: hidden;
    position: relative;
    padding: none;
    margin: none;
    border-bottom: 1px solid #444444
}

.group-member-placeholder {
    border: 2px dashed #555;
}

.group-icon {
    position: absolute;
    height: 82px;
    width: 82px
}

.group-name {
    position: absolute;
    left: 92px;
    top: -4px;
    width: 100%
}

.group-desc {
    position: absolute;
    left: 92px;
    top: 8px;
    width: 100%;
    opacity: 0.7;
    font-size: 11px
}

.group-chat {
    position: absolute;
    left: 92px;
    top: 28px;
    width: 100%;
    opacity: 0.7
}

.group-bar {
    height: 12px;
    width: 186px;
    overflow: hidden;
    opacity: 0.8;
    clear: both
}

.group-bars {
    position: absolute;
    left: 90px;
    width: 186px;
    top: 28px;
    line-height: 14px
}

.group-stats {
    position: absolute;
    left: 92px;
    line-height: 14px;
    font-size: 11px;
    top: 26px;
    width: 186px;
    text-align: center;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000
}

.group-stat {
    line-height: 0.9em
}

.group-aff {
    position: absolute;
    right: 0px;
    top: 2px;
    z-index: 2;
    font-size: 10px;
    color: Gold;
}

.group-one-aff {
    clear: both;
    line-height: 10px;
    position: relative;
}

.group-hp {
}

.group-maxhp {
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }

}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(359deg);
    }

}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(359deg);
    }

}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }

}

.typeahead.dropdown-menu, .ui-autocomplete {
    z-index: 1001;
}

#dialog .login, #dialog .create {
    width: 80
}

.build-window {
    position: absolute;
    top: 100;
    left: 600;
    width: 760px;
    height: 600px;
    z-index: 1
}

.build {
    scrolling: none;
    overflow: hidden;
    border: none;
    width: 100%;
    height: 96%;
    float: bottom
}

#world-window {
    position: absolute;
    top: 100;
    left: 600;
    width: 920px;
    height: 640px;
    overflow: hidden;
    z-index: 1
}

.world {
    scrolling: none;
    overflow: hidden;
    border: none;
    width: 100%;
    height: 99%;
    float: bottom;
    position: relative;
    left: -4px;
    top: -8px
}

.char-icon {
    height: 40px;
    width: 40px
}

.select-char {
    width: 100%;
    border-spacing: 0px;
}

.select-char:hover {
    cursor: pointer;
}

.select-char td {
    padding: 0px;
}

/* audio player */
#jp-container-1 {
    position: absolute;
    top: 5;
    right: 5;
    z-index: 1;
}

.jp-gui {
    position: relative;
    padding: 18px;
    width: 200px;
    height: 40px;
}

.jp-gui.jp-no-volume {
    width: 132px;
}

.jp-title {
    position: absolute;
    top: 4;
    width: 98%;
}

.jp-gui ul {
    margin: 0;
    padding: 0;
}

.jp-gui ul li {
    position: relative;
    float: left;
    list-style: none;
    margin: 2px;
    padding: 4px 0;
    cursor: pointer;
}

.jp-gui ul li a {
    margin: 0 4px;
}

.jp-gui li.jp-repeat, .jp-gui li.jp-repeat-off {
    position: absolute;
    top: 22;
    left: 192;
}

.jp-gui li.jp-play, .jp-gui li.jp-pause {
    position: absolute;
    top: 22;
    left: 32;
}

.jp-gui li.jp-stop {
    position: absolute;
    top: 22;
    left: 172;
}

.jp-gui li.jp-mute, .jp-gui li.jp-unmute {
    position: absolute;
    top: 45;
    left: 38;
}

.jp-gui li.jp-volume-max {
    position: absolute;
    top: 45;
    left: 148;
}

li.jp-pause, li.jp-repeat-off, li.jp-unmute, .jp-no-solution {
    display: none;
}

.jp-progress-slider {
    position: absolute;
    top: 32;
    left: 64;
    height: 6px;
    width: 100px;
}

.jp-progress-slider .ui-slider-handle {
    cursor: pointer;
    height: 12px;
}

.jp-volume-slider {
    position: absolute;
    top: 55;
    left: 64;
    width: 80px;
    height: 6px;
}

.jp-volume-slider .ui-slider-handle {
    cursor: pointer;
    height: 12px;
}

.jp-gui.jp-no-volume .jp-volume-slider {
    display: none;
}

.jp-duration {
    display: none;
}

.jp-current-time {
    position: absolute;
    top: 54px;
    left: 180px;
    font-size: 0.8em;
    cursor: default;
}

.jp-gui.jp-no-volume .jp-duration {
    right: 70px;
}

.jp-clearboth {
    clear: both;
}

.jp-title select {
    color: #ccc;
    background-color: black;
    border: none;
    width: 200px;
    font-size: 11px;
    text-align: center;
}

a:focus {
    background-color: none
}

#control-panel, #chat-window, #bar-window {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 100, 0.8);
}

::-webkit-scrollbar-corner, ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(100, 100, 100, 0.4);
}

#tmp-toolbar {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 30px;
    bottom: 0px;
    margin: 0px auto;
    padding: 0px;
}

textarea.me-input {
    width: 96%;
    height: 220px;
}

.game-blurb {
    min-height: 70px;
}

.modal-backdrop, .modal-backdrop.fade.in {
    opacity: 0.7;
}

.top-a-line #top-a::before, .top-b-line #top-b::before, .main-line #main::before, .bottom-a-line #bottom-a::before, .bottom-b-line #bottom-b::before, .footer-line #footer::before {
    background: none !important;
}