@charset "utf-8";

/**
 *                        Layout Cascading Style Sheet
 *                        ****************************
 *
 *     This style sheet describes how to elements should be positionned in the
 * user agent window. Some styles have been added for using Javascript.
 */

*, body {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    background: #dedabc;
}

div#nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 13000;
    padding: 0 0 10px 0;
    background: transparent url("../Media/Image/NavBkg.png") 0 100% repeat-x;
}

    div#nav p {
        margin: .1em;
        padding: 0;
    }

    div#nav p a {
        color: #930;
        margin: 0 .5em;
        padding: 0 .5em;
        border: 0;
        background: none;
    }

    div#nav p a:hover,
    div#nav p a:focus {
        color: #000;
    }


div#header {
    vertical-align: baseline;
    overflow: hidden;
    margin: 4em 0 0 0;
    padding: 0; 
    border: 1px #dedabc solid;
    border-width: 1px 0;
    background: #fbf4f8 url("../Media/Image/HeaderBkg.jpg") 100% -4em no-repeat;
}

    div#header a {
        font-family: "Trebuchet MS", "Bitstream Vera Sans";
        text-decoration: none;
        border: 0;
        background: none;
    }

    div#header img {                   /* when image is disabled, we should   */
                                       /* stylized alternative text.          */
        color: #000;
        font: 400% Georgia,
                   "Bitstream Charter", FreeSerif;
        letter-spacing: 4pt;
        margin: .3em;
        border: 0;
    }

div#menu {
    display: inline;
                                       /* vertical-align is not well          */
                                       /* supported so we work with baseline  */
                                       /* and reposition this div             */
    position: relative;
    top: -2em;
    width: 100%;
    padding: 4em 1em 0 1em;
}

    div#menu h1,
    div#menu span {
        display: none;
    }

    div#menu a {
        font-size: 110%;
        margin: 0;
        padding: 150px 2% 1em 2%;
    }

    div#menu a:link,
    div#menu a:visited {
        color: #930;
    }

    div#menu a:hover,
    div#menu a:active {
        color: #000;
        border-bottom: 3px #f6c solid;
        background: transparent
                    url("../Media/Image/MenuBkg.png")
                    0 100%
                    repeat-x;
    }

    div#menu a span {                  /* for Javascript                      */
        display: inline;
        position: relative;
        top: 0;
    }

div#wrapper {
    margin: 0 auto;
    min-height: 100%;
    min-width: 950px;
    max-width: 1500px;
    padding: 0;
    overflow: hidden;
    background: #fff url("../Media/Image/BodyBkg.jpg") 100% 0 no-repeat;
}

div#container {
    min-height: 20em;
    margin: 1em 5% 0 5%;
    padding: 0;
    overflow: hidden;
    height: auto;
}

div#content {
    float: left;
    width: 60%;
    margin: 0 0 1em 1.5%;
    padding: 2em 2.5% 0 0;
    border-right: 1px #aaa dashed;
}

div#sidebar {
    float: right;
    width: 30%;
    margin: 4em 1.5% 1em 0;
    padding: 0 0 0 .5%;
}

div#footer {
    clear: both;
}

    div#footer h1 {
        display: none;
    }

    div#footer p {
        color: #888;
        font-size: 80%;
        text-align: right;
        line-height: 3em;
        margin: 1em;
        padding: 0 2em 0 0;
    }

    div#footer p a.sf {
        text-decoration: none;
        border: 0;
    }

    div#footer p img {
        vertical-align: middle;
    }

div#tracker {
    margin: 0 0 1em 0;
}

ul.navigation {
    margin: 0;
    padding: 0;
    width: 100%;
}

    ul.navigation li {
        width: 45%;
        display: block;
        margin: 0 0 2em 0;
        padding: 0;
    }

    ul.navigation li.prev {
        float: left;
        text-align: left;
    }

        ul.navigation li.prev img {
            clear: both;
        }

    ul.navigation li.next {
        float: right;
        text-align: right;
    }