html {width:100%;margin:0;padding:0;font-family:verdana;font-size:12px;color:#555555;word-wrap:break-word;overflow:hidden;}
noscript {display:block;margin-bottom:0 !important;}
img{border:none;}
a{text-decoration:none;color:#333333;outline:none;}
a:hover{text-decoration:underline;cursor:pointer;}
input, textarea {display:block;box-sizing:border-box;width:100%;margin:0;padding:10px;background:#FFFFFF;border:1px solid #CCCCCC;font-family:verdana;font-size:12px;}
img.emoticon {vertical-align:-3px;width:18px;height:18px;}
h1 {margin:0;padding-bottom:10px;}
iframe {border:none;}

#interface {position:absolute;top:0;left:0;right:0;bottom:0;background:#F3F3F3;overflow:hidden;}

#header {position:absolute;top:0;left:0;right:0;display:flex;background:#333333 linear-gradient(#444444,#222222);box-shadow:0 0 10px #000000;z-index:8;}
#module {position:absolute;top:56px;left:0;right:0;bottom:44px;overflow-x:hidden;overflow-y:auto;}
#modal {position:fixed;top:50%;left:50%;min-width:320px;max-height:100%;transform:translate(-50%, -50%);box-shadow:0 0 50px #000000;background:#FFFFFF;word-wrap:break-word;z-index:10;}
#overlay {position:fixed;top:0;bottom:0;left:0;right:0;background:url('/static/img/loading.svg') center / 100px no-repeat #000000;opacity:0.5;}
#overlay[rel=module] {z-index:5;}
#overlay[rel=modal] {z-index:10;cursor:pointer;}
#overlay[rel=intro] {z-index:100;background:#444444;opacity:1;}

#player {display:none;position:fixed;bottom:0;left:0;width:284px;box-shadow:0 0 10px #000000;z-index:9;}
#playlist {display:none;position:fixed;bottom:0;right:0;width:284px;box-shadow:0 0 10px #000000;z-index:9;}

#footer {position:fixed;bottom:0;left:0;right:0;background:#000000;box-shadow:0 0 10px #000000;color:#FFFFFF;z-index:8;}

.logo {display:block;width:182px;height:20px;padding:18px;background:url('/static/img/logo.png') center no-repeat;}

.menu .icon {display:block;width:20px;height:20px;padding:18px;filter:invert(100%);cursor:pointer;}
.menu .holder {position:fixed;top:56px;bottom:44px;width:284px;background:#111111 linear-gradient(#222222,#000000);box-shadow:0 0 20px #222222;display:none;overflow:auto;z-index:7;}
.menu .holder .links a {display:block;padding:20px;font-weight:bold;color:#FFFFFF;text-decoration:none;}
.menu .holder .links a:hover {filter:drop-shadow(0 0 10px #FFFFFF);}
.menu .holder .links a img {vertical-align:middle;width:24px;height:24px;margin-right:20px;filter:invert(100%);}
.menu .holder .links .sub {display:block;font-size:10px;font-weight:normal;color:#DDDDDD;}

.tabs {margin-bottom:5px;background:#333333 linear-gradient(#444444,#222222);box-shadow:0 0 5px #000000;overflow:hidden;}
.tabs a {display:inline-block;padding:15px;font-weight:bold;color:#FFFFFF;}
.tabs a.sub {float:right;margin:11px;padding:5px 10px;background:#FFFFFF;border-radius:10px;font-size:10px;font-weight:bold;color:#000000;}
.tabs a.icon {float:right;width:24px;height:24px;padding:10px;cursor:pointer;}
.tabs a.icon img {width:24px;height:24px;filter:invert(100%);}

.items {margin-bottom:10px;overflow:hidden;}
.items .item {min-height:64px;padding:10px 10px 10px 80px;background: 10px / 64px 64px no-repeat;border-bottom:1px solid #DDDDDD;}
.items .item a {font-weight:bold;}
.items .item .pre {float:right;font-size:10px;}
.items .item .pri {padding:5px;font-size:18px;}
.items .item .sec {padding:5px;}
.items .item .pre a {display:inline-block;width:32px;height:32px;margin-left:10px;}
.items .item .pre img {display:inline-block;width:32px;height:32px;}
.items .item:hover {background-color:#E6E6E6;}
.items .item:last-child {border:none;}

.tiles {width:100%;height:170px;text-align:center;overflow:hidden;}
.tiles .item {display:inline-block;position:relative;width:150px;height:150px;margin:8px;box-shadow:0 0 5px #000000;overflow:hidden;}
.tiles .item span {display:block;position:absolute;bottom:0;padding:2px 5px;background:#333333 linear-gradient(#444444, #222222);box-shadow:0 0 5px #000000;font-weight:bold;color:#FFFFFF;text-decoration:none;}
.tiles .item img {display:block;width:100%;height:100%;}

.bubble {display:inline-block;margin:10px;padding-left:75px;background:no-repeat;background-size:50px 50px;overflow:hidden;}
.bubble .text {position:relative;min-height:20px;padding:10px;background:#FFFFFF;border:5px solid #CCCCCC;font-size:18px;}
.bubble .info {padding:0 15px;font-size:10px;}
.bubble .text:first-child:after {position:absolute;top:2px;right:100%;content:"";border:18px solid transparent;border-right-color:#CCCCCC;}

.table {table-layout:fixed;width:100%;text-align:center;}
.table tr td {margin:5px;padding:10px;background:#555555;color:#FFFFFF;}
.table tr td:first-child {width:100px;background:#333333;font-weight:bold;}
.table tr td:not(:first-child):hover {background:#444444;}
.table tr:first-child td {background:#333333;font-weight:bold;font-size:14px;}
.table tr:first-child td:first-child {background:none;}
.table tr:first-child a {color:#FFFFFF;}

.shorten {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
.loading {min-height:50px;background:url('/static/img/loading.svg') no-repeat center #666666 !important;}
.taglink {display:inline-block;margin:5px;padding:10px 10px 10px 36px;background:url('/static/img/icons/tag.svg') 5px / 25px no-repeat #CCCCCC;border-radius:20px;font-weight:bold;color:#000000;text-decoration:none !important;filter:invert(100%);}
.preview {display:inline-block;width:18px;height:18px;vertical-align:-2px;background:url('/static/img/icons2/sound.svg') no-repeat center;background-size:18px 18px;filter:invert(50%);cursor:progress !important;}
.morebtn {display:block;width:100px;margin:10px auto;padding:20px 50px;background:#FFFFFF;border:1px solid #CCCCCC;border-radius:10px;box-shadow:0 0 5px #000000;font-weight:bold;text-align:center;}

.pillbox {display:flex;margin-bottom:10px;background:#333333 linear-gradient(#444444,#222222);text-align:center;}
.pillbox .item {flex:1;padding:10px 0;border-right:1px solid #CCCCCC;font-weight:bold;color:#000000;text-align:center;filter:invert(100%);}
.pillbox .item:last-child {border:none;}
.pillbox .item img {width:32px;height:32px;}

.subbtn {display:inline-block;float:right;padding:5px 20px;border:1px solid #555555;font-weight:bold;text-decoration:none !important;}
.subbtn:hover {background-color:#DDDDDD;}

.tooltip {position:absolute;max-width:300px;padding:10px;background:#000000;box-shadow:0 0 10px #000000;font-size:10px;font-weight:bold;color:#FFFFFF;text-align:center;z-index:999;}
.tooltip:after {position:absolute;bottom:-10px;left:50%;content:"";margin-left:-5px;border:5px solid transparent;border-top-color:#000000;}
.tooltip img {display:block;width:150px;height:150px;}

.clearbreak {display:block;clear:both;height:2px;margin:10px 0;background:#555555;}
.clearfix {clear:both;}

.msgbox {display:block;margin-bottom:10px;padding:10px;background:#CCCCCC;font-weight:bold;text-align:center;}
.msgbox[rel=info] {background:#94C9FF;}
.msgbox[rel=issue] {background:#FFFF7A;}
.msgbox[rel=error] {background:#F4A9A9;}
.msgbox[rel=success] {background:#94FF94;}
.msgbox:empty {display:none;}

.alert {float:right;padding:2px 5px;background:red;font-weight:bold;color:#FFFFFF;cursor:default;}
.alert:empty {display:none;}
.pulse {-webkit-animation:pulsate 1s;-webkit-animation-iteration-count:infinite;}
@-webkit-keyframes pulsate {50% {-webkit-transform:scale(1.5,1.5);opacity:0.5;}}

@media all and (max-width:800px) {
#presence .links {width:100% !important;}
#interface .logo {width:25px;background:url('/static/img/icon.png') center no-repeat;}

#interface .tiles {height:115px;}
#interface .tiles .item {width:100px;height:100px;margin:5px;}

#module {left:0 !important;right:0 !important;}
#modal {width:95%;}

#player {width:100% !important;max-height:100% !important}
.tooltip {display:none !important;}
.remmob {display:none !important;}
}

@media all and (min-width:801px) {
#module, .feedback {left:284px;}
#modal {max-width:80%;}
.menu.main .holder {display:block;}
.highlighter {opacity:0.9;transition:opacity .2s, transform .2s;}
.highlighter:hover {opacity:1;transform:scale(1.1);}
.rembig {display:none !important;}
}