body {
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    background-image: url('../skillchains/backgrounds/earth.png');
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-attachment: fixed;
    background-color: #FFF;
    margin: 0pt;
    padding: 0pt;
}

#box-column {
    position: absolute;
    width: 144pt;
    left: 5pt;
    top: 5pt;
}

#box-column div {
    margin-top: 0pt;
    margin-bottom: 1em;
}

#latestVersion {
    padding: 4pt;
    border: solid 1px black;
    background-color: #FFC520;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-attachment: fixed;
    text-align: center;
}

#latestVersion form {
    margin: 0pt;
    padding: 0pt;
}

#menu {
    padding: 0pt;
    border-bottom: solid 1px black;
    background-color: #FFC520;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-attachment: fixed;
}

#menu a {
    padding: 4pt;
    border: solid 1px black;
    border-bottom: none;
    /* This doesn't seem to work... :(
    border-collapse: collapse;
    Worked around the common way.
    */
    display: block;
    font-weight: bold;
    color: #000;
    text-decoration: none;
}

#menu a:hover {
    background-color: #FFF;
    text-decoration: none;
}

#content {
    margin-top: 5pt;
    margin-left: 154pt;
    margin-right: 5pt;
    padding: 0pt;
}

.box {
    background-color: #FFF;
    border: solid 1px #000;
    margin-bottom: 1em;
}

.boxHeadline {
    font-weight: bold;
    font-size: 140%;
    padding: 0.5em;
    border-bottom: solid 1px #000;
    background-color: #FFC520;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-attachment: fixed;
}

.boxNewsPosted {
    font-size: 8pt;
    font-weight: normal;
    font-style: italic;
}

.boxBody {
    padding: 0.5em;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-attachment: fixed;
}

.box h1 {
    font-weight: bold;
    font-size: 12pt;
}

input {
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

a {
    background-color: transparent;
    color: #840;
}

p {
    margin-top: 1em;
    margin-bottom: 0em;
}

p:first-child {
    margin-top: 0em;
}

.screenshot {
    text-align: center;
}

.bordered-image {
    border: solid 1px #000;
    padding: 0px;
}

/*
 * These rules "restyle" the page based on what elemental class is
 * assigned to the body.
 *
 * Elemental Colors:
 *  - Thunder: #8E53FF;
 *  - Ice: #2CFFFF;
 *  - Fire: #FF1e13;
 *  - Wind: #37FF37;
 *  - Earth: #FFC520;
 */

body.fire {
    background-image: url('../skillchains/backgrounds/fire.png');
    background-color: #943;
}

.fire .boxBody {
    background-image: url('../skillchains/backgrounds/dull_fire.png');
    background-color: #BBB;
}
.fire .boxHeadline {
    background-image: url('../skillchains/backgrounds/dull_fire.png');
    background-color: #D40;
    color: #000;
}

.fire #menu {
    background-color: #D40;
    color: #000;
}

.fire #latestVersion {
    background-color: #D40;
    color: #000;
}

.fire a {
    color: #800;
}

body.earth {
    background-image: url('../skillchains/backgrounds/earth.png');
    background-color: #640;
}

.earth .boxBody {
    background-image: url('../skillchains/backgrounds/dull_earth.png');
    background-color: #FFE291;
}
.earth .boxHeadline {
    background-image: url('../skillchains/backgrounds/dull_earth.png');
    background-color: #FFC520;
    color: #000;
}

.earth #menu {
    background-color: #FFC520;
    color: #000;
}

.earth #latestVersion {
    background-color: #FFC520;
    color: #000;
}

.earth a {
    color: #840;
}

body.water {
    background-image: url('../skillchains/backgrounds/water.png');
    background-color: #008;
}

.water .boxBody {
    background-image: url('../skillchains/backgrounds/dull_water.png');
    background-color: #CCF;
    color: #000;
}
.water .boxHeadline {
    background-image: url('../skillchains/backgrounds/dull_water.png');
    background-color: #99F;
    color: #000;
}

.water #menu {
    background-color: #99F;
    color: #000;
}

.water #latestVersion {
    background-color: #99F;
    color: #000;
}

.water a {
    color: #00F;
}

body.wind {
    background-image: url('../skillchains/backgrounds/wind.png');
    background-color: #CCC;
}

.wind .boxBody {
    background-image: url('../skillchains/backgrounds/dull_wind.png');
    background-color: #E4E4E4;
}
.wind .boxHeadline {
    background-image: url('../skillchains/backgrounds/dull_wind.png');
    background-color: #8F8;
    color: #000;
}

.wind #menu {
    background-color: #8F8;
    color: #000;
}

.wind #latestVersion {
    background-color: #8F8;
    color: #000;
}

.wind a {
    color: #080;
}

body.ice {
    background-image: url('../skillchains/backgrounds/ice.png');
    background-color: #DFF;
}

.ice .boxBody {
    background-image: url('../skillchains/backgrounds/dull_ice.png');
    background-color: #D8FFFF;
}
.ice .boxHeadline {
    background-image: url('../skillchains/backgrounds/dull_ice.png');
    background-color: #CFF;
    color: #000;
}

.ice #menu {
    background-color: #CFF;
    color: #000;
}

.ice #latestVersion {
    background-color: #CFF;
    color: #000;
}

.ice a {
    color: #00F;
}

body.thunder {
    background-image: url('../skillchains/backgrounds/thunder.png');
    background-color: #678;
}

.thunder .boxBody {
    background-image: url('../skillchains/backgrounds/dull_thunder.png');
    background-color: #BF9EFF;
}

.thunder .boxHeadline {
    background-image: url('../skillchains/backgrounds/dull_thunder.png');
    background-color: #8E53FF;
    color: #000;
}

.thunder #menu {
    background-color: #8E53FF;
    color: #000;
}

.thunder #latestVersion {
    background-color: #8E53FF;
    color: #000;
}

.thunder a {
    color: #553299;
}

body.light {
    background-color: #CCC;
    background-image: url('../skillchains/backgrounds/light.png');
}

.light .boxBody {
    background-color: #DDD;
    background-image: url('../skillchains/backgrounds/dull_light.png');
}

.light .boxHeadline {
    background-image: url('../skillchains/backgrounds/dull_light.png');
    background-color: #FFF;
    color: #000;
}

.light #menu {
    background-color: #DDD;
    color: #000;
}

.light #latestVersion {
    background-color: #DDD;
    color: #000;
}

.light a {
    color: #00F;
}

body.dark {
    background-image: url('../skillchains/backgrounds/dark.png');
    background-color: #808080;
}

.dark .boxBody {
    background-image: url('../skillchains/backgrounds/dull_dark.png');
    background-color: #DDD;
}

.dark .boxHeadline {
    background-image: url('../skillchains/backgrounds/dull_dark.png');
    background-color: #AAA;
}

.dark #menu {
    background-color: #AAA;
    color: #000;
}

.dark #latestVersion {
    background-color: #AAA;
    color: #000;
}

.dark a {
    color: #00F;
}