/* * * * * * * * * * * * * * * * * * *\
 * 333networks                       *
 * See COPYING for details on re-use *
\* * * * * * * * * * * * * * * * * * */

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline:0px;
}
html {
  overflow-y: scroll;
}
body { 
    text-align: center; 
    height: 100%; 
    color: #ccc;
    font-family: 'Verdana';
    font-size: 11pt;
    background: #000 url("/style/runic/runic3.jpg") repeat center top fixed;
}

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

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

#body {
    text-align: left; 
    width: 900px; 
    margin: 0 auto; 
    min-height: 100%; 
    padding-top:130px;
    background: url("/style/runic/333networks-do.png") no-repeat center 45px fixed;
    background-size: 500px;
}
#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: #111;
    border-bottom: 1px solid #0af; 
    font-size:12pt;
}
div.nav a,
div.nav span{
    display: block;
    width: 140px;
    padding: 5px 0;
    border: 0;
    color: #0af;
}
div.nav a:hover,
div.nav span:hover {
    background: #555;
    color: #0af;
}
div.nav ul {
    list-style:none; 
    text-align:center;
}
div.nav ul li {
    display: inline-block; 
    margin-bottom:0;
}
div.nav ul li:hover {  
    border-bottom: 0;
}
div.nav ul li.sel span, 
div.nav ul li.sel a {
    padding-bottom: 3px;
    border-bottom: 2px solid #0af;
}
div.nav ul li.sel:hover span, 
div.nav ul li.sel:hover a {
    padding:5px 0;
    border:0;
}
div.nav ul li ul {
    position:absolute; 
    visibility:hidden;
    font-size:11pt;
}
div.nav ul li:hover ul {
    visibility:visible;
    background: #111;
    border:1px solid #0af; 
    border-top:0px; 
}
div.nav ul li:hover ul li {
    display:block; 
}

/* front page tiles */
div.frontcontainer {
    margin: -18px 0 20px 0;
}
div.frontleft {
    float:left; 
    width:444px;
}
div.frontright{
    float:right;
    width:444px;
}

div.tile,
a.tile {
    display: block;
    border: 1px solid #0af;
    margin: 21px 0 -10px 0;
    color: #ccc;
    background: #333;
    overflow:hidden;
    height:140px;
}

a.tile:hover {
    background: #555;
}

div.tile h1,
a.tile h1 {
    display:block;
    padding: 3px 15px;
    width:412px; 
    background: #111;
    border-bottom:1px solid #0af;
    font-size: 16pt;    
    font-family: Tahoma;
    color: #0af;
}

a.tile div.content {
    padding: 2px 7px;
}
a.tile div.content span.textlink {
    color: #0af;
}

a.tile img.icon {
    display:block;
    float: left;
    width: 100px;
    height: 108px;
    margin-right: 7px;
    border-right:1px solid #0af;
}

div.tile span {
    display:block;
    width:100%;
}
div.tile span.odd {
    background: #444;
}

div.tile.popular span a {
    display:block;
    width:100%;
    height:18px!important;
    background-repeat: no-repeat;
    background-position: 10px 0;
    background-size: 20px 20px;
    padding: 1px 0 1px 40px;
    color: #ccc;
}
div.tile.popular span:hover {
    background: #555;
}
div.tile.popular span a:hover {
    color: #ff0;
}

div.tile.popular {
    height:293px;
}

div.tile.masterstatus a {
    display:block;
    color: #ccc;
}
div.tile.masterstatus a.odd {
    background: #444;
}
div.tile.masterstatus a:hover {
    background: #555;
}

div.tile.masterstatus a span.master,
div.tile.masterstatus a span.status {
    display:inline-block;
    width: 324px;
    padding: 1px 7px 1px 7px;
    height:19px!important;
}
div.tile.masterstatus a span.status {
    width: 80px;
}

div.tile.announcements {
    height:140px;
}
div.tile.announcements ul {
    list-style-position: inside;
    list-style-type: square;
}
div.tile.announcements ul li {
    padding: 1px 7px 1px 7px;
    height:19px!important;
    overflow: hidden;
    white-space: nowrap;
}
div.tile.announcements ul li.odd {
    background: #444;
}
div.tile.announcements ul li:hover {
    background: #555;
}
div.tile.announcements ul li a {
    color: #ccc;
}
div.tile.announcements ul li a:hover {
    color: #ff0;
}

a.tile.contact img.icon.left {
    margin: 0 8px;
    width: 93px;
    border-right: 0;
}

/* documentation boxes */
.mainbox {
    display: block;
    border: 1px solid #0af;
    margin: 16px 0 10px 0;
    padding: 5px 5px;
    color: #ccc;
    background: #333;
    overflow:hidden;
    font-size: 10pt;
}

.mainbox div.header {
    margin: -5px 2px 10px -5px; 
    padding:7px 5px; 
    display:block;
    width:100%;
    color: #ccc;
    border-bottom:1px solid #0af; 
    background: #222;
}

/* deprecated masterserver.pm page
.mainbox img.right {
    display:block;
    float: right;
    margin: auto;
    width: 300px;
    margin: -10px -5px -5px 10px;
    border-left: 1px solid #0af;
}

.mainbox img.left {
    display:block;
    float: left;
    margin: auto;
    width: 300px;
    margin: -10px 10px -5px -5px;
    border-right: 1px solid #0af;
}
*/
.mainbox h1, 
.mainbox h2, 
.mainbox h3 {
    font-family: Tahoma;
    font-weight: bold;
    font-size: 14pt;
    color: #0af;
    margin-bottom:5px;
    padding: 10px 8px 0px 8px;
}

.mainbox h2,
.mainbox h3 {
    border-bottom: 1px dotted #0af;
}

.mainbox h3 {
    font-weight: normal;
    font-size:13pt;
}

.mainbox .header h2 {
    border-bottom: 0;
}

.mainbox p {
    margin: 5px 28px 10pt 28px;
    text-align:left;
}

.mainbox ul,
.mainbox ol { 
    text-align:left;
    margin: 3px 28px 10pt 48px;
}


div.mainbox div.figure {
    text-align:center; 
    margin-bottom: 14pt;
}
div.mainbox div.figure a {
    display: inline-block;
}

div.mainbox div.figure img {
    display:block; 
    margin: 5px auto 10px auto; 
    border:1px solid #0af; 
    width:400px;
    box-shadow: 2px 2px 5px #111;
}
div.mainbox div.figure.wide img {
    width:800px;
    border: 0;
    box-shadow: none;
}

div.mainbox div.figure span {
    font-style: italic;
    color: #ff9;
}

div.mainbox table {
    table-layout:fixed;
    border-collapse:collapse;
    margin:0 auto 12pt auto;
    width:90%;
    box-shadow: 3px 3px 2px #222;
    background: #222;
    border:1px solid #666;
    }

div.mainbox table tr th,
div.mainbox table tr td {
    vertical-align:top;
    text-align:left;
    padding:3px 6px; 
    border:1px solid #666;
    border-left:0;
    border-right:0;
    font-size:9pt
}

div.mainbox ul.codelist li {
    margin-bottom:2px;
}

div.mainbox .codeblock,
div.mainbox .codeinline {
    font-family:"Lucida Console";
    font-size: 9pt;
    text-align:left;
    padding:2px;
    background: #222;
    border:1px solid #555;
    white-space: nowrap;
}
div.mainbox .codeblock {
    display:block; 
    margin:12pt auto; 
    width:90%; 
    padding: 7px;
    overflow-x:auto; 
    box-shadow: 3px 3px 2px #222;
}

div.mainbox .innerbox {
    display:block; 
    margin: 5px auto 10px auto;
    padding: 12px 0;
    width:80%;
    background: #313131;
    border:1px solid #555;
    box-shadow: 2px 2px 5px #111;
}
div.mainbox .innerbox.green {
    background: #213121;
    border:1px solid #090;
    box-shadow: 2px 2px 5px #121;
}
div.mainbox .innerbox.red {
    background: #312121;
    border:1px solid #900;
    box-shadow: 2px 2px 5px #211;
}


.indent {
        padding-left:10px; 
        padding-bottom:2px;
        border-left: 3px solid #999;
        margin-left:37px!important;
    }
.r {color:#f55}
.o {color:#c80}
.y {color:#ff3}
.g {color:#3f3}
.b {color:#33f}
.ext {
    color: #fff; 
    padding: 0 1px;
    border-bottom: 1px dotted #fff;
}
.u {text-decoration: underline}

.footnote {
    font-size: 9pt;
    text-align:left;
    padding:5px;
    color: #ccc;
    border-top: 1px solid #ccc;
}
.footnote2 {
    font-size: 9pt;
    text-align:left;
    margin-top: -10px!important;
    padding:0 15px;
    color: #999;
}



/* unique per-page elements: frontpage, masterserver, contact */

div.mainbox.frontpage {
    font-size: 11pt;
}
div.mainbox.frontpage p {
    margin: 5px 8px 10pt 8px;
}

a.mainbox p.textlink {
    color: #0af;
}
a.mainbox:hover {
    color: #ccc;
    background: #444;
}
a.mainbox:hover div.header {
    background: #333;
}

a.tile img.icon.left#contact,
a.contact.item img#contact,
a.contact.item img#mail {
    filter: invert(51%) sepia(20%) saturate(6062%) hue-rotate(171deg) brightness(101%) contrast(106%); /* #0af blue */
}

div.mainbox table.apidoc .tc1 {width:100px;text-align:left}
div.mainbox table.apidoc .tc2 {width:70px;text-align:center;}


div.mainbox table.octets {
    width: auto;
}
div.mainbox table.octets tr td {
    font-family:"Lucida Console";
    font-size: 9pt;
    text-align:center;
    vertical-align:middle;
    padding:4px 6px;
    border: 1px solid #555;
}

div.mainbox table.octets td#doublecell {
    width: 16px;
}

/* game index on instructions page */
div.mainbox div.instructions {
    display:block;
    margin-left: 36px;
}
div.mainbox div.instructions a.instr {
    display: inline-block;
    width: 256px;
    height:64px;
    margin: 5px 7px;
    border: 1px solid #0af;
    box-shadow: 2px 2px 5px #111;
    overflow:hidden;
    white-space: nowrap;
}
div.mainbox div.instructions  a.instr:hover {
    background: #555;
}

div.mainbox div.instructions  a.instr img {
    width: 64px;
    height:64px;
}
div.mainbox div.instructions  a.instr span {
    color: #ccc;
    padding:19px 7px 0 7px;
    font-size: 13pt;
    vertical-align:top;
    display:inline-block;
}


/* tabs on the instructions pages */
div.mainbox ul.instructiontabs {
    display: block;
    margin: 20px -5px 10px -5px;
    list-style-type: none;
    padding-left: 20px;
    border-bottom: 1px solid #0af;
}
div.mainbox ul.instructiontabs li {
    display: inline-block;
}
div.mainbox ul.instructiontabs li a {
    display: block;
    border: 1px solid #0af;
    margin: 0 3px -1px 3px;
    padding: 4px 12px;
    font-weight: bold;
    border-top-left-radius:8px 8px;
    background:#444;
    white-space: nowrap;
}
div.mainbox ul.instructiontabs li.sel a {
    background:#333;
    border-bottom: 1px solid #333;
    padding-top: 8px;
}



div.mainbox div.answer.preview {
    background: -webkit-linear-gradient(#ccc, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ccc;
    height:35px;
    overflow:hidden;
}
div.mainbox div.answer.foldout {
    display:none;
}

div.mainbox div.answer.foldout p.share {
    font-style: italic;
    margin-top:40px;
}
div.mainbox div.answer.foldout p.share a{
    color: #ccc;
}
div.mainbox div.answer.foldout p.share a:hover{
    color: #ff0;
}


/* contact page */
a.contact.item {
    display: block;
    border: 1px solid #0af;
    margin: 16px 10px;
    padding: 5px 5px;
    height:100px;
    color: #ccc;
    background: #444;
    overflow:hidden;
}
a.contact.item:hover {
    background: #555;
}

a.contact.item img {
    display:block;
    float: left;
    margin: auto;
    width: 100px;
}
a.contact.item p {
    vertical-align:middle;
    padding: 32px 0;
    font-size:16pt;
    color: #0af;
    margin-left: 110px;
}

ul.info li {
    margin-bottom:10pt;
}


div.mainbox.warning {
    border: 1px solid #c00;
    background: #300;
    width: 80%;
    margin: 16px auto 10px auto;
}

div.mainbox.warning div.description,
div.mainbox.warning div.code {
    display:block;
    width: 90%;
}

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