/* * * * * * * * * * * * * * * * * * *\
*  Master Server Web Interface        *
*  A website by Darkelarious          *
*  See COPYING for additional details *
*  on re-use.                         *
\* * * * * * * * * * * * * * * * * * */

/* Theme written by Darkelarious */

/*** Global ***/
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline:0;
    }
    
body { 
    text-align: center;
    height: 100%;
    color: $textcol1$;
    font-family: 'Verdana';
    font-size: 10pt;
    $_bodybg$
    }

p {
    margin-bottom:12pt;
    }
    
a, a:visited {
    text-decoration: none;
    color: $textcol2$;
    }
    
a:hover {
    color: $textcol3$;
    text-decoration: none;
    }

#body {
    text-align: left; 
    width: 900px; 
    margin: 0 auto; 
    min-height: 100%; 
    $_bglogo$
    $_bgpadd$
    background-size: 500px;
    }
    
#footer {
    padding: 90px 0 40px 0;
    text-align:center;
    font-size : x-small;
    clear:both
    }

#footer a {
    text-decoration: underline;
    }


/* mainboxes */
div.mainbox {
    border: 1px solid $textcol2$;
    margin-bottom:21px;
    padding: 5px;
    box-shadow: 2px 2px 5px $shadow$;
    $_boxbg1$
    }

div.mainbox h1, 
div.mainbox h2,
div.mainbox h3 {
    margin: -5px 0 10px 0; 
    text-decoration: none;
    font-family: Tahoma;
    font-weight: normal;
    font-size: 16pt;
    color: $textcol2$;
    }

div.mainbox h2 {
    margin: 5px 0 5px 5px; 
    font-size: 12pt;
    }
div.mainbox h3 {
    margin: 5px 0 5px 10px; 
    font-size: 11pt;
}

div.mainbox p,
div.mainbox ul,
div.mainbox ol {
    margin: 5px 16px 0 8px;
    padding: 0 5px 5px 25px;
    text-align:left;
    font-size: 9pt;
    }
div.mainbox ul,
div.mainbox ol {
    margin-left:20px;
    }


div.mainbox div.header {
    margin: -5px 2px 10px -5px; 
    padding:10px 0 0 10px; 
    display:block;
    width:100%;
    color: $textcol1$;
    border-bottom:1px solid $textcol2$; 
    $_boxbg2$
    }

/* navigation / search box "fieldset.search" */

form input {
    border: 1px solid $textcol2$;
    $_boxbg3$
    color: $textcol1$;
}

form fieldset.search,
form fieldset#advancedsearch {
    display: block; 
    margin:12px 0 12px 0;
    width: 100%; 
    text-align:center;
    height:22px;
    }

form fieldset.search input.text,
form fieldset#advancedsearch input.text {
    width: 300px;
    margin-left:20px;
    padding:1px 1px 1px 5px;
    font-style: italic;
    }
    
form fieldset.search input.submit {
    display:none;
    }

form fieldset.search a {
    padding: 1px 5px;
    border:  1px solid $textcol2$;
    margin: 0 6px;
    }
form fieldset.search a.sel,
form fieldset.search a:hover {
    border: 1px solid $textcol3$;
    color: $textcol3$;
    }

form div.dropdown a {
    display:block;
    width:100%;
    text-align:center;
    font-size: x-small;
}

form fieldset#advancedsearch {
    display:none;
}
form fieldset#advancedsearch input.submit {
    padding: 1px;
    margin: auto 5px;
}
    
/* TODO: advanced search function styling */

    

/* browse table tabs */
ul.maintabs {
    display: inline; 
    margin: 0;
    }
    
ul.maintabs.notfirst {
    display: block; 
    height: 20px
    }
    
ul.maintabs li {
    display: inline; 
    list-style-type: none
    }
    
ul.maintabs li a, 
ul.maintabs li b {
    float: right;
    display: block;
    height: 14px;
    padding: 1px 7px 5px 7px;
    margin: 0 0 0 10px;
    }
    
ul.maintabs li a {
    margin-left: 5px; 
    border: 1px solid $textcol2$;
    border-bottom: none;
    $_boxbg3$
    }
    
ul.maintabs.notfirst li a,
ul.maintabs.notfirst li b {
    margin-top: 20px
    }
    
ul.maintabs.bottom li a,
ul.maintabs.bottom li b {
    margin-top: 10px;
    padding: 1px 7px 5px 7px
    }
    
ul.maintabs.bottom li a {
    border-bottom: 1px solid $textcol2$;
    border-top: none
    }
    
ul.maintabs li.left a,
ul.maintabs li.left b {
    float: left; 
    margin-left: 0; 
    margin-right: 10px
    }
    
ul.maintabs li b {
    margin-left: -2px; 
    margin-right: -7px
    }
    
ul.maintabs li.left b {
    margin-left: -7px; 
    margin-right: -2px
    }
    
ul.maintabs li.tabselected a,
ul.maintabs li a:hover {
    padding-bottom: 6px
    }
    
ul.maintabs.bottom li.tabselected a,
ul.maintabs.bottom li a:hover {
    padding-top: 2px;
    padding-bottom: 5px;
    margin-top: 9px
    }
    
ul.maintabs.browsetabs li a {
    margin-left: 5px; 
    $_boxbg1$;
    }
    
ul.maintabs.browsetabs li.left a {
    margin-left: 0; 
    margin-right: 5px
    }


/* game/server browse tables */
div.mainbox.browse {
    padding: 0;
    }

div.mainbox.browse table {
    width: 100%;
    table-layout:fixed;
    border-collapse:collapse
    }

div.mainbox.browse table thead td {
    font-weight: bold;
    }
   
div.mainbox.browse table thead tr td {
    white-space:nowrap;
    overflow:hidden;
    text-align:center;
    border-top:0;
    border-bottom:1px solid $textcol2$; 
    color: $textcol2$; 
    padding:3px 10px 3px 5px; 
    font-weight:bold;
    $_boxbg1$
    }
    
div.mainbox.browse table tfoot tr td {
    white-space:nowrap;
    overflow:hidden;
    text-align:center;
    border-top:1px solid $textcol2$; 
    color: $textcol1$; 
    padding:3px 10px 3px 5px; 
    }

div.mainbox.browse table tr td {
    white-space:nowrap;
    overflow:hidden;
    text-align:center;
    padding:1px 10px 1px 5px;
    font-size:10pt;
    }
    
div.mainbox.browse table tr.s td a {
    color: $textcol1$;
    }
    
div.mainbox.browse table tr.s td a:hover {
    color: $textcol3$;
    }

div.mainbox.browse table tr.odd {
    $_boxbg3$
    }

/* specific game list table columns */
div.mainbox.browse.gamelist table tr td.tc1 {
    text-align:left;
    padding-left:20px
    }
    
div.mainbox.browse.gamelist table tr td.tc2 {
    width:100px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
    }
    
div.mainbox.browse.gamelist table tr td.tc3 {
    width:200px;
    }
    
/* specific serverlist table columns */
div.mainbox.browse.serverlist table tr td.tc1 {
    width:10px; 
    background-size: 20px 15px; 
    background-position: 50%; 
    background-repeat: no-repeat;
    }

div.mainbox.browse.serverlist table tr td.tc2 {
    text-align:left;
    }

div.mainbox.browse.serverlist table tr td.tc3 {
    width:46px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
    }
div.mainbox.browse.serverlist table tr td.tc3.icon a {
    display:block;
    margin:0 auto;
    height:16px;
    width:16px;
}
    
div.mainbox.browse.serverlist table tr td.tc4 {
    width:90px;text-align:left
    }
    
div.mainbox.browse.serverlist table tr td.tc5 {
    width:70px;
    text-align:center
    }
    
div.mainbox.browse.serverlist table tr td.tc6 {
    width:140px;
    text-align:left
    }


/* serverinfo details */
div.mainbox.detail {
  padding:0 0 12px 0;
  }
div.mainbox.detail div.header {
  margin:0 0 12pt 0; 
  padding: 0;
  display:inline-block;
  width:100%;
  height:48px;
  }
  
div.mainbox.detail div.header h1 {
  font-weight:normal;
  padding: 15px 15px 0 15px;
  white-space: nowrap;
  overflow:hidden;
  display:block;
  }
  
div.mainbox.detail div.header div.serverflags {
    float:right;
    overflow:hidden;
}
div.mainbox.detail div.header div.serverflags div {
    width:48px;
    height:48px;
    display:inline-block;
    border-left:1px solid $textcol2$;
    $_boxbg3$
}

/* server flag icons */
div.mainbox.detail div.header div.serverflags div.direct        {background: #131}
div.mainbox.detail div.header div.serverflags div.manual        {background: #311}
div.mainbox.detail div.header div.serverflags div.authed        {background: #131}
div.mainbox.detail div.header div.serverflags div.noauthed      {background: #311}
div.mainbox.detail div.header div.serverflags div.noblacklist   {background: #131}
div.mainbox.detail div.header div.serverflags div.blacklist     {background: #311}
div.mainbox.detail div.header div.serverflags div.nopasswd      {background: #131}
div.mainbox.detail div.header div.serverflags div.passwd        {background: #311}
  
  
div.mainbox.detail table {
  margin-bottom: 20px; 
  table-layout:fixed;
  border-collapse:collapse;
  text-align:left;
  }
div.mainbox.detail table tr th {
  font-weight:bold; 
  padding: 2px 8px; 
  margin-bottom:12pt; 
  border-bottom: 1px solid $textcol4$;
  color: $textcol1$;
  }
div.mainbox.detail table tr th.wc1 {
  width:170px
  }
div.mainbox.detail table tr td {
  vertical-align:top; 
  padding:6px 5px 4px 15px;
  }
div.mainbox.detail table tr td img.flag {
  margin:-4px 2px -4px 0; 
  height:20px; 
  width:30px;
  }
div.mainbox.detail table tr td input,
div.mainbox.detail table tr td textarea {
  color: #ccc;
  width:99%;
  padding: 3px 1px 2px 5px;
  border: 1px solid #0af;
  font-family:"Lucida Console";
  font-size: 8pt;
  $_boxbg3$
  }
div.mainbox.detail table.serverinfo,
div.mainbox.detail table.gameinfo {
  width:63%;
  }
div.mainbox.detail table {
  width:96%;
  }
div.mainbox.detail div.container {
  float:right; 
  margin: 0 30px 8px 0;
  }
div.mainbox.detail div.container div.thumbnail {
  border:1px solid $textcol4$; 
  display:block;
  box-shadow: 1px 1px 2px $shadow$;
  $_boxbg3$
  }
div.mainbox.detail div.container div.thumbnail img {
  height:256px; 
  width:256px;
  border:1px solid $textcol1$;
  display:block;
  margin:10px 10px 2px 10px
  }
div.mainbox.detail div.container div.thumbnail span {
  text-align: right; 
  font-weight: normal; 
  padding:0 15px 4px 5px;
  display:block; 
  font-size:x-small
  }
div.mainbox.detail div.container div.updatenote {
    padding: 2px 0 7px 0;
    display:block;
    font-style: italic; 
    font-size: x-small; 
    text-align: right;
}

div.mainbox.detail div.container table.mapinfo {
  width: 280px;
  margin-bottom:0;
  }
div.mainbox.detail div.container table.mapinfo tr td.wc1{
  width: 80px;
  }
div.mainbox.detail table.players {text-align:left;}
div.mainbox.detail table.players tr.odd {
  $_boxbg3$
  }
div.mainbox.detail table.players tr td {
  padding:1px 5px 0px 15px; 
  overflow:hidden; 
  white-space: nowrap;
  }
div.mainbox.detail table.players tr th.frags {width:50px}
div.mainbox.detail table.players tr th.mesh  {width:140px}
div.mainbox.detail table.players tr th.skin  {width:140px}
div.mainbox.detail table.players tr th.ping  {width:50px}

div.mainbox.detail table.shareopts tr th a {
    color: $textcol1$;
}
div.mainbox.detail table.shareopts tr td {
    border-right:1px solid $textcol4$;
    border-bottom:1px solid $textcol4$;
    font-family:"Lucida Console";
    font-size: 8pt;
    text-align:left;
    $_boxbg3$
}

/* warning box */
div.mainbox.warning {
    color:#ccc; 
    background-color: #411; 
    border: 1px solid #c00; 
}
div.mainbox.warning div.header {
    border-bottom:1px solid #c00; 
    background: #200;
    color: #ccc;
}

div.mainbox.warning div.header h1{
    color: #ccc;
}

div.mainbox div.description {
    display: block;
    width: 500px;
    margin: 10px auto
    }

span.hilit {
    font-style: italic;
    padding: 1px;
    $_boxbg2$
}

.r {color:#f55}
.o {color:#c80}
.y {color:#ff3}
.g {color:#3f3}
.b {color:#33f}