/* body { height: auto; width: 99%; font-size: 11px; background: #000000 url(../images/dark-metal.jpg) 50% 50% repeat; } */

@import url("../font/stylesheet.css");
@import url("http://fonts.googleapis.com/css?family=Open+Sans");

body {
	outline: 0 none !important;
	font-family: "Open Sans","Lucida Console","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-family: "Lucida Console","DejaVu Sans","Open Sans",Arial,Helvetica,sans-serif;
}

.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: url("/templates/yoo_drive/images/tools/button_default.png") repeat-x scroll 50% 0 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: #e1e1e1; 
	margin: 0px auto;
	padding: 5px;
	padding-right: 12px;
	white-space: pre-wrap;
	word-break: keep-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.fade.in {
    top: 15%;
}

.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;
}

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

.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);
}

.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;
}