@font-face {
    font-family: rs;
    src: url('fonts/runescape_chat_font-webfont.eot');
    src: url('fonts/runescape_chat_font-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/runescape_chat_font-webfont.woff2') format('woff2'),
         url('fonts/runescape_chat_font-webfont.woff') format('woff'),
         url('fonts/runescape_chat_font-webfont.ttf') format('truetype'),
         url('fonts/runescape_chat_font-webfont.svg#webfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: rs2;
    src: url('fonts/runescape_uf.woff') format('woff'),
         url('fonts/runescape_uf.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    background:#ddd;
    font-size:16px;
    font-family:rs;
    padding:0;
    margin:0;
    background-image:url(../images/bg.png);
    background-size:contain;
}
body, input, textarea, select {
    font-family:rs;
}
body * {
    padding:0;
    margin:0;
    border:none;
}
a {
    color:#000;
    text-decoration: none;
}

input, textarea, .nopad {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.t2 { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.t3 { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.t4 { -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
.t6 { -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; transition: all 0.6s ease-out; }
.t9 { -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out; -o-transition: all 0.9s ease-out; transition: all 0.9s ease-out; }


::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(170,150,130,0.4);
    background:rgba(170,150,130,0.4);
}
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(90,80,70,0.8);
    background:rgba(90,80,70,0.8);
}
::-webkit-scrollbar-thumb:hover {
    background:rgba(90,80,70,0.6);
}
::-webkit-scrollbar-thumb:active {
    background:rgba(90,80,70,1);
}

main {
    width:100%;
    text-align:center;
}

#container {
    max-width:100%;
    width:1000px;
    display:inline-block;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    margin-bottom:60px;
}


.color1 {
    background:#fed;
    color:#000;
}

.select1 {
    cursor:pointer;
    padding:2px 5px;
    border:1px solid #432;
}


.fover {
    /* fixed overlays */
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    z-index:9999;
    display:none;
}
.fover .x {
    position:absolute;
    z-index:10;
    top:5px;
    right:5px;
    font-size:24px;
    color:#000;
    cursor:pointer;
}
.fover .x:hover { color:#654; }
.fover.active {
    display:block;
}
.table { display:table; width:100%; height:100%; }
.table-cell { display:table-cell; vertical-align:middle; text-align:center; }
.table-cell > .content {
    display:inline-block;
    border-radius:10px;
    background:#fed;
    position:relative;
}
.fover .content .defaultx {
    cursor:pointer;
    color:#000;
    position:absolute;
    top:10px;
    right:10px;
}
.fover .content .defaultx:hover { color:#654; }
.fover .content .defaultx:after {
    content:"[X]";
    font-size:16px;
    font-weight:bold;
}



#container.twocol #content {
    width:calc(100% - 250px);
    float:left;
}
#container.twocol #sidebar {
    width:250px;
    margin-top:10px;
    float:right;
}
#container.twocol #chatfeed {
    height:500px;
}


.badge {
    display:inline-block;
    vertical-align: middle;
    text-align: center;
    background:rgba(220,210,240,0.4);
    background:rgba(20,15,30,0.12);
    cursor:pointer;
    position:relative;
}
.badge.active {
    background:rgba(0,60,0,0.26);
}
.badge .icon {
    display:inline-block;
    position:absolute;
}
.badge.large {
    width:48px;
    height:48px;
    border-radius:5px;
}
.badge.large .icon {
    width:36px;
    height:36px;
    left:6px;
    top:6px;
}
.badge.medium {
    width:24px;
    height:24px;
    border-radius:4px;
}
.badge.medium .icon {
    width:18px;
    height:18px;
    left:3px;
    top:3px;
}
.badge.small {
    width:11px;
    height:11px;
    border-radius:1px;
}
.badge.small .icon {
    width:9px;
    height:9px;
    left:1px;
    top:1px;
}