::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }

.smalltext { font-size: 11px; }

.successmessage,.errormessage { 
    display: block;
    margin: 0 auto;
    text-align: center; 
    font-size: 160%;
}
.successmessage {color: #66ff66;}
.errormessage {color: #ff6666;}

p.error, p.formerror {
    border: 2px solid #cc0000;
    background-color: #ffcccc;
}

.inlineMessageBox {
    margin: 5px 2px;
    border: 1px solid #ccc;
}

.inlineMessageBox .inner {
    min-height: 60px;
    background-color: transparent;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: top left;
    padding: 15px 15px 15px 85px;
}

.inlineMessageBox.error {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QxMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjE0Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(209,0,0,0.14) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209,0,0,0.14)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top, rgba(209,0,0,0.14) 0%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, rgba(209,0,0,0.14) 0%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, rgba(209,0,0,0.14) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(209,0,0,0.14) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#24d10000', endColorstr='#00ffffff',GradientType=0 );
}

.inlineMessageBox.error .inner { background-image: url("../img/inlineMessageBox_error.png"); }
.inlineMessageBox.error  { color: #e8e8ff; border-color: #9d0000; }
.inlineMessageBox.error strong { color: #f2f2ff; }
.inlineMessageBox.success {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwZDExNCIgc3RvcC1vcGFjaXR5PSIwLjE0Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(0,209,20,0.14) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,209,20,0.14)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top, rgba(0,209,20,0.14) 0%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, rgba(0,209,20,0.14) 0%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, rgba(0,209,20,0.14) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(0,209,20,0.14) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2400d114', endColorstr='#00ffffff',GradientType=0 );
}
.inlineMessageBox.success .inner { background-image: url("../img/inlineMessageBox_success.png"); }
.inlineMessageBox.success  { color: #e8e8e8; border-color: #084b00;}
.inlineMessageBox.success strong { color: #fff; }

.inlineMessageBox .message { font-size: 13px; font-weight: bold; }
.inlineMessageBox .messagebody {font-size: 12px; font-weight: normal; }


div.section {
    margin: 20px 0;
    border: 2px solid #000044;
    padding: 10px;
}

table.stattable { border-collapse: collapse; }
table.stattable td { 
    border: 1px solid #ccc; 
    padding: 3px 5px;
}


html, body { min-height: 100%; 
    font-family: Verdana, Arial, sans-serif !important; /*WTF*/
}

body {
    background: #010111 url('/img/bg.jpg') repeat-x top center fixed;
    font: 13px/20px normal Verdana, sans-serif;
    color: #fff;
    padding: 0;
    border: 0;
    margin: auto;
    text-align: center;         /* to center align grid boxes */
}

body.quake {
    background: #0c0100 url('/img/quake-bg.jpg') repeat-x top center fixed;
}

body { padding-top: 79px; }
body a { color: #eee;}
body a:hover { color: #fff; }

.grid-block {
    letter-spacing: normal;
    word-spacing: normal;
    text-align: left;
    display: inline-block;      /* styling all grid-wrapper as inline blocks */
    vertical-align: top;        /* aligning those boxes at the top */
    *display: inline;           /* IE hack to mimic inline-block */
    zoom: 1;                    /* part of the above hack for IE */
    width: 100%;                /* boxes would shrink-wrap */
}


#header {
    position: fixed;
    top:0; left: 0;
    width: 100%;
    
    background: #010111 url('/img/headerbg.png') repeat-x bottom left scroll;
    color: #fff;
    height: 69px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow:    0px 4px 14px 0px rgba(0, 0, 0, 0.75);
    box-shadow:         0px 4px 14px 0px rgba(0, 0, 0, 0.75);    
}

.quake #header {
    background: #010111 url('/img/headerbg-quake.png') repeat-x bottom left scroll;
}


#header-inner {
    position: relative;
}

#header-inner nav {
    position: absolute;
    top: 10px;
    height: 68px;
}

#header-inner nav a { }


#header-inner nav.nav-left {
    left: 15px; 
    width: 280px;
}

#header-inner nav.nav-right {
    right: 20px; 
    width: 268px;
}
#header-inner nav.nav-right a { float: right; }


#logo { 
    display: block;
    margin: 0 auto;
    padding-top: 14px;
}

#twologos {
    width: 270px;
    display: block;
    margin: 0 auto;
    padding-top: 14px;
}
#twologos #logo1 {
    display: block; 
    float: left;
    margin-top: 8px;
    font-size: 42px;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
}
#twologos #logo2 {
    float: right;
    margin-top: 10px;
}



#serverselectwrapper { 
    margin: 10px 0;
}

#loginlink  { float: right; margin-right: 27px; }
#loginlink  a { color: #555; }

#serverselectwrapper select { 
    background-color: #b8b8c8;
}


#serverselectwrapper label { 
    padding-right: 12px;
    /* display: block; text-align: center; */
}
#serverselectwrapper input {margin-left: 10px; }


#appwrapper {
}

#containerWrapper {
    padding: 0 10px;
}

.wrapper {
    width: 830px;
    margin: 0 auto;
    padding-left: 20px; /* lazy */
}

#footer {
    color: #b6bab6;
}

.pagination { 
    min-height: 2em; 
}

.pagination a.current {
    font-weight: bold;
    background-color: #ccc;
    color: #000;
}

.pagination a:hover {
    background-color: #666;
    color: #000;
}

.pagination a { 

    display: block;
    float: left;
    clear: none;
    text-align: center;
    line-height: 2em;
    padding: 2px 5px;
    margin: 0 3px;
    min-width: 15px;
    text-decoration: none;
    background-color: #222;
    color: #fff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}






/* gamebox: */
.box {
    background: transparent url('/img/boxbg.png') repeat-x top left scroll;
    min-height: 100px;
    border-top: 1px solid #41425d;
    border-right: 1px solid #282957;
    border-bottom: 1px solid #282957;
    border-left: 1px solid #41425d;
    color: #fff;
    -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.48);
    -moz-box-shadow:    5px 5px 10px 0px rgba(0, 0, 0, 0.48);
    box-shadow:         5px 5px 10px 0px rgba(0, 0, 0, 0.48);
    -webkit-border-bottom-right-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

.quake .box {
    background: transparent url('/img/boxbg-quake.png') repeat-x top left scroll;
}

.box.league {
    background-image: url('/img/boxbg-league.png');
}

.box h1, .box h2, .box h3, .box h4, .box .heading {
    background:  #0d0c24 url('/img/boxheading.png') repeat-x bottom left scroll;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
    font-size: 12px;
    font-weight: bold;
    margin: 0 !important;
    padding: 5px 5px 0 5px;
    line-height: normal;
    min-height: 19px;
    color: #f5f5f5;
}

.quake .box h1, .quake .box h2, .quake .box h3, .quake .box h4, .quake .box .heading {
    /* background: #250200 url('/img/boxheading-quake.png') repeat-x bottom left scroll; */
}

.box.league h1, .box.league h2, .box.league h3, .box.league h4, .box.league .heading {
    background-image: url('/img/league-boxheading.png');
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}




.box h1 a, .box h2 a, .box h3 a, .box h4 a, .box .heading a {
    color: #fff;
    text-decoration: none;
}

.box a.button {
    display: block;
    border-top: 1px solid #5e5e70;
    border-left: 1px solid #5e5e70;
    background: #202032 url('/img/buttonbg.png') repeat-x bottom left scroll;
    min-height: 15px;
    min-width: 30px;
    margin: 5px;
    padding: 5px;
    text-align: center;
    color: #bebebe;
    text-decoration: none;
    font-weight: bold;
}

.box a.button:hover {
    color: #fff;
}

a.dcreclink {
    display: block;
    margin: 15px 0 0 0 !important;
}

a.dcreclink span.dlcount {
    font-weight: normal;
    font-size: 11px;
    opacity: .2;
}


#search-loadmore {
    float: left;
    width: 100%;
    margin: 20px auto;
    min-height: 10px;
    height: auto;
    clear: both;
    text-align: center;
}

.iconbutton div.icon {
    float: left;
    display: block;
    height: 48px;
    width: 38px;
    overflow: hidden;
    background-color: transparent;
    background-image: url('/img/buttons.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.iconbutton div.title { 
    float: left; 
    line-height: 48px; 
    font-size: 14px;
    color: #bebebe;
    padding: 0 5px;
}

.iconbutton:hover div.title {color: #fff;}

.iconbutton.logout div.icon {  }
.iconbutton.logout div.title { padding-left: 25px; margin-left: 25px; border-left: 1px solid #444; background-image: none; }
/* .iconbutton.logout:hover div.icon , .iconbutton.people.current div.icon { background-position: -38px 0px; } */

.iconbutton.people div.icon { background-position: 0px 0px; }
.iconbutton.people:hover div.icon , .iconbutton.people.current div.icon { background-position: -38px 0px; }

.iconbutton.info div.icon { background-position: 0px -48px; }
.iconbutton.info:hover div.icon , .iconbutton.info.current div.icon { background-position: -38px -48px; }

.iconbutton.comms div.icon { background-position: 0px -96px; }
.iconbutton.comms:hover div.icon , .iconbutton.comms.current div.icon { background-position: -38px -96px; }

.iconbutton.halp div.icon { background-position: 0px -144px; }
.iconbutton.halp:hover div.icon , .iconbutton.halp.current div.icon { background-position: -38px -144px; }



.gameList {
    clear: both;
}

.gameList ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.gameList ul li:nth-child(3n+4) {
    clear: left;
    /* border-bottom: 1px solid #fff !important; */
}

.gameList ul li {
    display: block;
    float: left;
    margin: 20px 24px 0 0px;
    padding: 0;
}


.gameListItem {
    width: 250px; /* a css noob adjusts this manually so that 3 boxes fit in a .wrapper :) */
    min-height: 230px;
}


.gameListItem a {}

.gameListItemInner {
    padding: 10px;
}

.gameListItem table {
    margin-top: 10px;
    width: 100%;
    border-collapse: collapse;
}

.gameListItem table th {
    font-weight: normal;
    font-size: 11px;
    color: #bebebe;
}
.gameListItem table td {
    border: 1px solid #333;
    padding: 3px;
    font-size: 12px;
}

a.gamelink { float: right; color: #ccc !important; font-weight: normal; font-size: 10px; text-shadow: none;}
a.gamelink:hover { text-decoration: underline !important; }

.not-ranked {color: #888; font-size: 11px; opacity: .4; }
.allclientsnote  {color: #888; font-size: 12px; text-align: center;}

.fainttxt  { color: #696e8a; }
.gameListItem p.gametime,
.gameListItem p.gamedate { margin: 0; font-size: 11px; color: #696e8a; }
.gameListItem p.gametime { text-align: center; }
.gameListItem p.gametime .game-start-time { display: block; float: left; }
.gameListItem p.gametime .game-end-time { display: block; float: right; }
.gameListItem span.game-duration { display: block; float: right; }



.gameListItem .playername { 
    font-size: 10px; 
    color: #d5d5d5; 
    line-height: normal;
    border-bottom: 1px dotted rgba(255,255,255,.3);
}
.gameListItem .playername.last {
    border-bottom: none;
}


.gameListItem .playername.last { font-size: 12px; color: #fff; }

.gameListItem_adminControls { padding: 0 10px; }
.gameListItem_adminControls a.button {
    margin: 5px 3px;
    padding: 1px;
    color: #bebebe;
    font-weight: normal;
    font-size: 11px;
}
.redlink {color: #dd0000 !important; font-weight: bold;}
.redlink:hover {color: #ff0000 !important; text-decoration: underline; }

select.flagselect.flag-client {
    border-width: 1px;
    background-color: #b8b8c8;
    max-width: 35px;
    font-size: 9px;
}

.flag-game label {
    color: #bbb;
    font-size: 11px;
}

.flag-game button {
    font-size: 11px;
}

.flag-game select.flagselect {
    font-size: 11px;
}

.gameListItem .fb-like {margin-top: 13px;  opacity: .5;}
.gameListItem .fb-like .pluginButtonContainer{margin-top: 13px;}

table.keyinfo,
table.ipinfo { display: none; border-collapse: collapse; }
table.ipinfo td { border: 1px solid #888; }
td { vertical-align: top; }


td.alliance-0 { border-left: 3px solid red !important; }
td.alliance-1 { border-left: 3px solid green !important; }
td.alliance-2 { border-left: 3px solid blue !important; }
td.alliance-3 { border-left: 3px solid yellow !important; }
td.alliance-4 { border-left: 3px solid orange !important; }
td.alliance-5 { border-left: 3px solid Turquoise !important; }

.alliance-select { display: none; }
.gameListItem.allianceselects .alliance-select { display: block; }