/* General styling */
body {
    margin: 0; background: black;
    font-family: "Hiragino Sans", sans-serif;
}
body * { box-sizing: border-box; }

table { border-collapse: collapse; }
td { padding: 0; }



/* ~ Master div */
@keyframes movingbg {
    from { background-position-y: 0; }
    to { background-position-y: -64px; }
}
#master {   
    position: absolute; width: 100%; height: 100%; z-index: -2;
    min-width: 1009px; min-height: 647px;
    background-color: rgb(0,64,255);/*add background img*/
    background-image: url("Graphics/bg.png");/*animate it*/
    animation: movingbg 5s linear infinite;/*animation won't work in older browsers*/
    color:white;/*temp?*/
    overflow: hidden;
}





/* Content styling*/
/* ~ Shared styling */
#logo, #menu, #online, #about, #dns, #stats, #event, #latest, #credits, #globe {
    position: absolute;
}

#menu, #credits {
    height: 48px; width: 100%;
    background-color: black;
    background-image: linear-gradient(rgb(64,64,64),rgb(0,0,0));/*replace with PNG*/
}

#online, #latest {
    height: 24px; line-height: 24px; font-size: small;
}

@keyframes movingpinstripes {
    from { background-position-y: 0; }
    to { background-position-y: -2px; }
}
#about, #dns, #stats, #event {
    padding: 8px; width: 192px; font-size: small;
    color: black; border: 1px solid rgb(0,128,128);/*temp? or maybe all the boxes should be the same color*/
    back-ground-color: rgb(0,255,255,.5);/*temp, replace with transparent PNG*/
    background-image: linear-gradient(to right,rgb(128,255,255),rgb(128,255,255,.66),rgb(128,255,255,.66),rgb(128,255,255));/*replace with PNG*/
    animation: movingpinstripes 1s linear infinite;/*animation won't work in older browsers*/
    border-radius: 8px;/*won't work in older browsers, maybe replace with a table layout*/
}
#about, #stats { top: 80px; }
#about, #dns { left: 8px; }
#dns, #event { bottom: 80px; }
#stats, #event { right: 8px; }



/* ~ Top */
/* ~~ Logo */
#logo { z-index: 1; }
#logocell {
    padding: 8px; height: 72px; vertical-align: top;
    background-color: black;
    background-image: url("Graphics/logobg.png");
}
#diagcell {
    width: 37px;
    background-image: url("Graphics/logodiag.png");
}

/* ~~ Menu bar */
#menu {
    top: 0; border-top: 8px solid white;
    text-align: center; line-height: 40px; font-size: large;
}
#menu div { display: inline-block; padding: 0 8px; }
#menu-gts { background-color: green;/*temp, also add a bg img, a symbol*/ }
#menu-gl { background-color: purple;/*temp, also add a bg img, a symbol*/ }
#menu-events { background-color: red;/*temp, also add a bg img, a symbol*/ }

/* ~~ Online */
#online { top: 48px; right: 0; }
#online td { padding: 0 8px; background-color: rgb(0,0,128); }
#online #OLdiagcell {
    padding: 0; width: 14px; background-color: transparent;
    background-image: url("Graphics/OLdiag.png");
}



/* ~ Left */
/* ~~ About */
#about {
    font-size: x-small; borde-r-color: rgb(255,0,0);
}

/* ~~ How to connect */
#dns {
    font-size: x-small; borde-r-color: rgb(0,255,255);
}
#dns span { font-size: large; }



/* ~ Right */
/* ~~ Stats */
#stats {
}

/* ~~ Upcoming event */
#event { padding-top: 4px; font-wei-ght: bold; }
#event img {
    display: block; margin-top: 4px;
    border: 1px solid rgb(0,255,255);
}



/* ~ Bottom */
/* ~~ Latest server activity */
#latest {
    bottom: 48px; width: 100%;
    border: 1px solid rgb(0,0,128);
}
#latest td { padding: 0 8px; line-height: 22px; }
#label {
    font-weight: bold; background-color: rgb(0,0,128);/*maybe add a background img that gives a metallic texture?*/
}
#data {
    width: 100%; padding-right: 0;
    background-color: rgb(0,0,64);/*add bg img, pinstripes*/
    color: rgb(255,192,0);
}
#data div { display: inline-block; margin-right: 8px; }

/* ~~ Credits */
#credits { bottom: 0; }



/* ~ Globe */
#globe { width: 100%; height: 100%; z-index: -1 }