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

/* Theme sunset written by Darkelarious */

/*** Global ***/
* { 
  margin: 0; 
  padding: 0; 
  border: 0; 
  outline:0;
  }
body { 
  text-align: center; 
  height: 100%; 
  color: #ccc;
  font-family: 'Verdana';
  font-size: 10pt;
  background: #000 url(/style/sunset.jpg) repeat center top fixed;
  }

p {
  margin-bottom:12pt;
  }
a, a:visited {
  text-decoration: none;
  color: #fa0;
  }
a:hover {
  color: #ff0;
  }

hr {
  height: 0px;
  border: solid #960 0px; 
  border-top-width: 1px;
  margin: 10pt 0 10pt 0;
  }

/*** Container ***/
#body {
  text-align: left; 
  width: 900px; 
  margin: 0 auto; 
  min-height: 100%; 
  padding-top:125px;
  background: url(/style/333bevel.png) no-repeat center 35px fixed;
  }
#footer{
  padding: 90px 0 40px 0;
  text-align:center;
  font-size : x-small;
  clear:both
  }
#footer a{
  text-decoration: underline;
  }


/*** navigation box ***/
div.nav {
  position: fixed; 
  top:0px; 
  display:block; 
  width:100%; 
  background: url(/style/b50.png) repeat center top;
  padding:0; 
  border-bottom: 1px solid #960; 
  }
div.nav ul {
  list-style:none; 
  text-align:center; 
  }
div.nav ul li {
  width:90px; 
  display: inline-block; 
  padding:5px 0;
  font-size:14px;
  }
div.nav ul li ul {
  margin:0; 
  position:absolute; 
  visibility:hidden;
  }
div.nav ul li:hover ul {
  list-style:none; 
  visibility:visible; 
  margin-top:5px;
  background: url(/style/b50.png) repeat center top;
  border:1px solid #960; 
  border-top:0px; 
  }
div.nav ul li:hover ul li {
  display:block; 
  }
div.nav ul li:hover ul li a,
div.nav ul li:hover ul li span{
  padding: 2px 0 2px 5px;
  }
div.nav ul li:hover ul li a:hover,
div.nav ul li:hover ul li span:hover{
  }

/*** common types (box, form, lists, headers) ***/
div.mainbox {
  border: 1px solid #960;
  margin: 21px 0 -10px 0;
  padding: 5px;
  background: url(/style/g50.png) repeat center top;
  box-shadow: 0px 0px 5px #960;
}

.mainbox h1, 
.mainbox h2, 
.mainbox h3, 
.mainbox h4 {
  font-family: Tahoma;
  font-weight: bold;
  font-size: 19px;
  color: #b70;
}
.mainbox h1 {
  margin: -5px 0 15px 0; 
  text-decoration: none;
  }
.mainbox h2 {
  margin: 5px 0 0 5px; 
  font-size: 12pt;
  } 
.mainbox h2.alttitle {
  margin: -17px 0 15px 15px; 
  font-weight: normal; 
  }
.mainbox h3 {
  margin: 5px 0 0 5px; 
  font-size: 11pt;
  }
.mainbox h4 {
  margin: 5px 0 0 5px; 
  font-size: 10pt;
  text-decoration: underline;
  }

.mainbox p {
  margin:5px 8px 10pt 8px;
  text-align:left;
  }
.mainbox ul,
.mainbox ol { 
  margin: 3px 20px 10pt 40px;
  }
.mainbox div.header {
  margin: -5px 2px 10px -5px; 
  padding:10px 0 0 10px; 
  display:block;
  width:100%;
  color: #b70;
  border-bottom:1px solid #960; 
  background: url(/style/b50.png) repeat center top;
  }
.mainbox div.header h2 {
  text-decoration: none;
  margin-bottom:5px;
  }
.mainbox div.header p.alttitle {
  margin-bottom:0px; 
  font-size: 8pt;
  text-align:left;
  padding:0 5px 5px 25px;
  }
.mainbox div.header p.alttitle span.acc {
  color: #ff0;
}

/* form markup */
input.text, 
input.submit, 
select, 
textarea {
  background: url(/style/prim.png) repeat center top;
  color: #aaa;
  border: 1px solid #960;
  margin: 1px;
  padding:1px;
}
form, fieldset {
  border: 0; 
  display: block; 
  }
legend {
  display: none;
  }
optgroup option {
  padding-left: 10px;
  font-style: normal;
  }
input.submit {
  background: url(/style/b50.png) repeat center top;
  border: 1px solid #960;
  padding: 0px;
  }
input.text, select {
  width: 200px;
  }
fieldset.submit {
  width: 100%;
  text-align: center;
  margin: 5px;
  }
fieldset.submit input {
  width: 150px;
  }
fieldset.submit h2 {
  font-size: 11px!important;
  }
fieldset.submit textarea {
  margin: 0 20px 5px 20px;
  }
td.label, td.label label {
  width: 90px;
  }
td.label label {
  display: block;
  }
td.field label {
  margin: 0 5px 0 5px;
  }
table.formtable {
  margin: 0 20px 20px 20px;
  }
table.formtable td {
  padding: 0;
  }
table.formtable tr.newfield td {
  padding-top: 5px;
  }
table.formtable tr.newpart td {
  padding-top: 20px; 
  font-weight: bold;
  }

/*** browsing table/form ***/
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 #960;
  border-bottom: none;
  background: url(/style/g50.png) repeat center top;
}
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 #960;
  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; 
  background: url(/style/g50.png) repeat center top;
  }
ul.maintabs.browsetabs li.left a {
  margin-left: 0; 
  margin-right: 5px
  }

div.mainbox.browse table {
  width:100%;
  table-layout:fixed;
  border-collapse:collapse
  }
div.mainbox.browse table tr td {
  white-space:nowrap;
  overflow:hidden;
  text-align:center;
  padding:0 10px 0 5px;
  font-size:10pt;
  }
div.mainbox.browse table tr.odd {
  background: url(/style/prim.png) repeat center top;
  }
div.mainbox.browse table thead tr td {
  white-space:nowrap;
  overflow:hidden;
  text-align:center;
  border-top:0;
  border-bottom:1px solid #960; 
  color: #b70; 
  padding:3px 10px 3px 5px; 
  background: url(/style/b50.png) repeat center top;
  font-weight:bold
  }
div.mainbox.browse table tr td a{
  color: #ccc;
  }
div.mainbox.browse table tr td a:hover{
  color: #ff0;
  }

/* search box on top */
p.browseopts a {
  padding: 1px 3px;
  border: 1px solid #fa0;
  margin: 0 2px;
  white-space: nowrap;
}
p.browseopts {
   text-align: center; 
   padding: 2px;
   }
p.browseopts a.optselected,
p.browseopts a:hover {
  border: 0; 
  padding: 2px 4px;
  }
div.mainbox.browse {
  padding: 0;
  }
div.mainbox.browse table {
  width: 100%;
  }
table thead td {
  font-weight: bold;
  }
fieldset.search {
  display: block; 
  width: 100%; 
  text-align: center; 
  margin: 0 0 10px 0;
  }
fieldset.search .submit {
  padding: 0 1px;
  }
p#searchtabs {
  height: 12px;
  text-align:center;
  }
p#searchtabs a {
  padding: 2px 6px 2px 6px; 
  margin: 0 2px;
  }
p#searchtabs a:hover, 
p#searchtabs a.sel {
  border: 1px solid #fa0;
  padding: 1px 5px 2px 5px;
}
p#searchtabs a:hover {
  border: 1px solid #ff0;
  }
#q {width: 600px}
#bq {width: 300px}

/*** Server Info details page ***/
div.mainbox.detail {
  padding:0 0 12px 0;
  }
div.mainbox.detail div.header {
  margin:0 0 12pt 0; 
  padding:3px 0 0 0; 
  display:block;
  width:100%;
  }
div.mainbox.detail div.header h1 {
  padding: 15px 5px 0 15px;
  }
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 #552500
  }
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 {
  width:99%;
  padding: 2px 0px 1px 4px;
  border: 1px solid #960;
  font-family:"Lucida Console";
  font-size: 8pt;
  }
div.mainbox.detail table.serverinfo,
div.mainbox.detail table.gameinfo {
  width:63%;
  }
div.mainbox.detail table.teaminfo,
div.mainbox.detail table.limits,
div.mainbox.detail table.mutators,
div.mainbox.detail table.players,
div.mainbox.detail table.useropts,
div.mainbox.detail table.shareopts {
  width:96%;
  }
div.mainbox.detail div.container {
  float:right; 
  margin-right:30px;
  }
div.mainbox.detail div.container div.thumbnail {
  border:1px solid #333; 
  background: url(/style/prim.png) repeat center top;
  display:block;
  margin-bottom:8px
  }
div.mainbox.detail div.container div.thumbnail img {
  height:256px; 
  width:256px;
  border:1px solid #552500;
  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 table.mapinfo {
  width: 280px;
  margin-bottom:0;
  }
div.mainbox.detail div.container table.mapinfo tr td.wc1{
  width: 80px;
  }
div.mainbox.detail table.players tr.odd {
  background: url(/style/prim.png) repeat center top;
  }
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.players tr td.frags,
div.mainbox.detail table.players tr th.frags,
div.mainbox.detail table.players tr td.ping,
div.mainbox.detail table.players tr th.ping {text-align:right;}

div.mainbox.detail table.shareopts.new {
  width:325px;
  display:block;
  margin:auto;
  border-collapse: collapse;
}
div.mainbox.detail table.shareopts.new tr td {
  white-space:nowrap;
  padding:2px;
}
div.mainbox.detail table.shareopts.new tr td input {
  width: 114px;
  margin:0;
}
div.mainbox.detail table.shareopts.new tr td input.submit {
  width:120px;
}
div.mainbox.detail p#newlink {
  text-align:center;
}


/* Warning/Notice Box */
div.warning, div.notice {
  margin: 15px 10%; 
  padding: 15px; 
  color:#fff; 
  background-color: #411; 
  border: 1px solid #c00; 
  }
div.notice {
  background-color: #141;
  border: 1px solid #0c0;
  }
div.warning ul, 
div.notice ul {
  margin-left: 0; 
  }
div.warning li, 
div.notice li {
  margin-left: 20px; 
  }
div.warning h2, 
div.notice h2 {
  font-size: 11px; 
  font-weight: bold; 
  margin: 0; 
  text-decoration: underline; 
  color: #fff;
  }
div.warning a{
  color: #f00;
  }
div.notice a{
  color: #0f0;
  }

/* figures */
.figure{
  text-align:center; 
  margin-bottom: 12pt;
  }
.figure img {
  display:block; 
  margin: 5px auto 10px auto; 
  border:1px solid #960; 
  width:400px;
  box-shadow: 10px 10px 5px #552500;
  }
.figure object{
  display:block; 
  margin: 5px auto 10px auto; 
  border:1px solid #960;
  box-shadow: 10px 10px 5px #552500;
  }
.figure span{
  font-weight:bold;
  }
.figure .imgleft {
  width:250px;
  display:inline-block; 
  margin-right:10px;
  box-shadow: 10px 10px 5px #552500;
  }
.figure .imgright {
  width:250px;
  display:inline-block; 
  margin-left:10px;
  box-shadow: 10px 10px 5px #552500;
  }
  
span.thumbnail a{
    position:relative;
}  
span.thumbnail a img.thumb{
  margin:2px;
  box-shadow: 10px 10px 5px #552500;
  border:1px solid #960;
  height:150px;
}
span.thumbnail img.overlay{
    position: absolute;
    bottom:10px;
    right:10px;
    width: 60px;
    height: 60px;
    box-shadow: 0!important;
}

ol.steplist,
ul.steplist {
  display: block; 
  width: 600px; 
  margin: 0 auto 12pt auto;
  }
ol.steplist li,
ul.steplist li {
  border-bottom:1px dotted #552500;
}
ul.steplist.link {
  width:200px;
}
  
/*** Additional, minor styling details ***/
.r {color:#f33}
.o {color:#c80}
.y {color:#ff3}
.g {color:#3f3}
.b {color:#33f}
.ext {color: #aaa; font-style: italic;}

a.code {
  font-family:"Lucida Console";
  font-size: 8pt;
  text-align:left;
  padding:5px;
  border: 1px solid #960;
  background: url(/style/b50.png) repeat center top;
  box-shadow: 10px 10px 5px #552500;
  }
pre.code,
div.code {
  display:block; 
  margin:12pt auto; 
  width:90%; 
  font-family:"Lucida Console";
  font-size: 8pt;
  text-align:left;
  padding:5px;
  border: 1px solid #960;
  overflow:hidden; 
  background: url(/style/b50.png) repeat center top;
  box-shadow: 10px 10px 5px #552500;
  }
span.code {
  font-family:"Lucida Console";
  font-size: 8pt;
  text-align:left;
  padding:2px;
  background: url(/style/b50.png) repeat center top;
}
.tiny {
  font-size: 8pt;
  text-align:left;
  padding:0 5px 5px 25px;
  color: #b70;
  }
.footnote{
  font-size: 8pt;
  text-align:left;
  padding:5px;
  color: #b70;
  border-top: 1px solid #960;
  }
a.addnew, 
p.addnew {
  float: right; 
  margin: 0
  }
  
.debug *{
  border:1px;
  }
.un {
  text-align:left!important
  }


/* browse table coloring */
tr#tfooter td{
  padding:1px 1px 1px 1px; 
  border-top:1px solid #333;
  }
tr#tfooter td a{
  color: #fa0
  }
tr#tfooter td a:hover {
  color: #ff0
  }

/* Main page */
div.frontleft {
  float:left; width:444px;
  }
div.frontright{
  float:right;width:444px;
  }
div.frontcontainer {
  margin-top: -18px;
  }
div.frontcontainer img {
  width: 442px; 
  margin:0px auto 10pt auto; 
  display:block;
  border-bottom: 1px solid #960;
  }
div.frontcontainer img.partner {
  border: 0;
}
div.frontcontainer div.mainbox {
  padding:0px;
  }
div.frontcontainer div.mainbox h2 {
  margin:0px -18px 5px 8px; 
  text-decoration:none; 
  }
div.frontcontainer div.mainbox div.header{
  margin: 0 0 3px 0; 
  padding-top:3px; 
  display:block;
  width:432px
  }
div.frontcontainer div.mainbox b {
  margin:5px 8px 10pt 8px;
  }

/*** table alignments ***/
div.mainbox.browse.newservers table tr td.tc1,
div.mainbox.browse.serverlist table tr td.tc1,
div.mainbox.browse.frontmasterlist table tr td.tc1 {
  width:10px; 
}

div.mainbox.browse.newservers table tr td.tc1.flag,
div.mainbox.browse.serverlist table tr td.tc1.flag,
div.mainbox.browse.frontmasterlist table tr td.tc1.flag {
  width:10px; 
  background-size: 20px 15px; 
  background-position: 50%; 
  background-repeat: no-repeat;
  }

div.mainbox.browse.newservers table tr td.tc2 {text-align:left}
div.mainbox.browse.newservers table tr td.tc3 {text-align:right; width:260px;}
div.mainbox.browse.newservers table tr td.tc4 {width:100px;}

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

div.mainbox.browse.serverlist table tr td.tc2 {}
div.mainbox.browse.serverlist table tr td.tc3 {width:60px;text-align:right}
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}


div.mainbox.browse.gamelist table tr td.tc1 {text-align:left}
div.mainbox.browse.gamelist table tr td.tc2 {width:100px;}
div.mainbox.browse.gamelist table tr td.tc3 {width:80px;}
div.mainbox.browse.gamelist table tr td.tc4 {width:80px;}

div.mainbox.browse.kfstats table tr td,
div.mainbox.browse.kfstats table thead tr td {padding-left:0; padding-right:0;}
div.mainbox.browse.kfstats table tr td.tc1 {width:30px;}
div.mainbox.browse.kfstats table tr td.tc2 {width:19px;}
div.mainbox.browse.kfstats table tr td.tc3 {width:130px;text-align:left}
div.mainbox.browse.kfstats table tr td.tc5,
div.mainbox.browse.kfstats table tr td.tc7,
div.mainbox.browse.kfstats table tr td.tc12,
div.mainbox.browse.kfstats table tr td.tc13 {width:85px;}

div.mainbox.browse.frontpage table tr td.tc1 {text-align:left}
div.mainbox.browse.frontpage table tr td.tc2 {width:70px;}
div.mainbox.browse.frontpage table tr td.tc3 {width:80px;}

div.mainbox.browse.frontmasterlist table tr td.tc2 {text-align:left}
div.mainbox.browse.frontmasterlist table tr td.tc3 {width:80px;}

/* individual pages */
div.mainbox table.fancytable {
  table-layout:fixed;
  border-collapse:collapse;
  border:1px solid #960;
  margin:20px auto 20px auto;
  width:70%;
  box-shadow: 10px 10px 5px #552500;
  background: url(/style/b50.png) repeat center top;
  }
div.mainbox table.fancytable tr th {
  font-weight:bold;
  color: #b70;
}
div.mainbox table.fancytable tr th,
div.mainbox table.fancytable tr td {
  vertical-align:top;
  text-align:left;
  padding:6px 12px; 
  border:1px solid #960;
  }
div.mainbox table.fancytable.addresses .tc1 {width:160px}
div.mainbox table.fancytable.addresses .tc2 {width:120px;text-align:center;}
div.mainbox table.fancytable.addresses .tc3 {width:120px;text-align:center;}

div.mainbox.contact{
  width:605px;
  }
div.mainbox.contact img {
  float:left;
  height:120px;
  width:105px;
  margin:10px 30px 10px 10px;
  border: 1px solid #960;
  }
div.mainbox.contact table {
  margin: 10px 5px 20pt 20px;
  border-spacing: 0;
  width:450px;
  }
div.mainbox.contact table tr th{
  padding: 2px 20px 0 0;
  border-bottom: 1px solid #552500;
  }
div.mainbox.contact table tr td{
  padding: 2px 20px 0 10px;
  border-bottom: 1px solid #333;
  vertical-align:top
  }
div.mainbox.contact table tr td ul {
  list-style: none;
  margin:0
  }
div.mainbox.contact table tr th.tc1 {width:150px;}
div.mainbox.contact table tr th.tc2 {width:300px}

/* individual images */
.kfstatsimg{
  float:right; 
  margin: -20px 5px 0 15px;
  background: url(/style/b50.png) repeat center top;
  padding: 6px;
  border: 1px solid #333;
  }
.kfstatsimg img{
  border: 1px solid #552500;
  width: 300px;
  }

/* IV main div*/
#ivview {
  position: absolute;
  top: -500px;
  background: url(/style/b50.png) repeat center top;
  border: 1px solid #960;
  padding: 20px;
  text-align: center;
  }
#ivview img {
  cursor: pointer;
  border: 1px solid #960;
  }
#ivclose {
  float: right; 
  padding-left: 10px;
  }
#ivnext {
  padding-left: 5px;
  }
#ivprev {
  padding-right: 5px;
  }
#ivfull {
  float: left; 
  padding-right: 10px;
  }
#ivimgload{
  display:block;
  position:absolute;
  left:-500px;
  top:-50px;
  width:100px;
  padding:3px;
  text-align: center;
  border: 1px solid #960;
  color: #b70;
  background: url(/style/g50.png) repeat center top;
  }