@primary:   white;
@secondary: #333;
@highlight: lightgreen;

body
{
    background-color:  #000;
    background-image:  url('../images/background.gif');
    background-repeat: repeat-x;
    
    font-family:    "Josefin Sans", "Arial";
    font-size:      18px;
    font-weight:    normal;
    color:          @primary;
    text-align:     center;
    letter-spacing: 1px;
}

a
{
    color: @highlight;

    cursor: pointer;
}

section#wrapper
{
    width:        85%;
    margin-left:  auto;
    margin-right: auto;
    margin-top:   250px;
}

header#logo
{
    float:       left;
    margin-left: -5px;

    font-size:      120px;
    font-weight:    bold;
    text-transform: uppercase;
    line-height:    38px;

    cursor: default;

    .sub { font-size: 28px; }
}

nav#main
{
    float:       left;
    margin-top:  5px;

    text-transform: uppercase;

    ul
    {
        list-style: none;

        li
        {
            float: left;
            width: 100px;

            list-style: none;

            .rotated;

            a
            {
                padding: 25px;

                font-size:       24px;
                font-weight:     bold;
                text-decoration: none;
                color:           @primary;

                background-color: @secondary;

                &:hover { color: @highlight; }
            }
        }
    }
}

section#content
{
    float:      left;
    clear:      both;
    margin-top: 50px;

    text-align: justify;

    article
    {
        vertical-align: top;

        margin-right: -5%;

        h1, h2
        {
            float:         left;
            width:         100%;
            margin-top:    80px;
            margin-bottom: 25px;
            padding:       0px;

            font-size:      48px;
            font-weight:    bold;
            text-transform: uppercase;
            color:          @highlight;

            cursor: default;
        }

        h2 { font-size: 28px;  }
        h3 { font-size: 20px; text-transform: uppercase; color: @highlight; }

        article
        {
            float: left;
            clear: none;

            width:        30%;
            margin-right: 3%;

            span.highlight
            {
                color: @highlight;
            }

            p  { margin-top:    0px; }
            li { margin-bottom: 5px; }
            section { border: 5px solid @secondary; padding:15px; }
            td, th { vertical-align: top }         

        }.double { width: 63%; }.triple { width: 97%; }
    }
}

hr
{
    float:         left;
    width:         100%;
    margin-top:    25px;
    margin-bottom: 25px;
    float:         left;
    clear:         both;

    border: none;
}

footer
{
    float:         left;
    clear:         both;
    width:         100%;
    margin-top:    50px;
    margin-bottom: 50px;
    padding:       5px;

    text-align: right;
    color: @secondary;
}

table
{
    border-collapse: collapse;

    text-align: left;    

    td, th { margin: 0px; padding: 8px 4px 8px 4px; }
    tr:nth-child(odd) { td { background-color: #101010; } }
}

aside#promo
{
    position: absolute;
    right:    0px;
    top:      0px;
    overflow: hidden;

    cursor: default;

    article#circle
    {
        width:        250px;
        height:       250px;
        margin-top:   -50px;
        margin-right: -50px;

        text-align: center;

        background-color: @highlight;

        .round(150px);
        .rotated(-10deg);

        &:hover
        {
            background-color: white;

            time { text-shadow: -1px -1px 0px green; }
        }

        time
        {
            position: relative;
            top:      85px;
            right:    10px;

            font-size:   32px;
            font-weight: bold;
            color:       #white;
            text-shadow: -1px -1px 0px green;
            line-height: 36px;

            .day   { font-size: 64px; }
            .month { font-size: 26px; }
            .year  { font-size: 46px; }
        }
    }
}

.rotated(@rotation: -30deg)
{
    -webkit-transform: rotate(@rotation); 
    -moz-transform:    rotate(@rotation);	
}

.round(@radius: 5px)
{
    border-radius:         @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius:    @radius;
}

.google.map
{
    border: 5px solid @secondary;
}