html {
    background:                 url("../img/back-light.png") center 0;
    -webkit-box-shadow:         inset 0 0 100px #FFF, inset 0 0 100px #FFF;
       -moz-box-shadow:         inset 0 0 100px #FFF, inset 0 0 100px #FFF;
            box-shadow:         inset 0 0 100px #FFF, inset 0 0 100px #FFF;
}
body {
    padding:                    0;
    margin:                     0;

    color:                      black;

    font:                       105% Exo, sans-serif;
    font-weight:                100;
}
h1, h2, h3, h4 {
    text-shadow:                #FFF 0 -1px 1px, #AAA 0 0 5px;

    font-weight:                600;
}
strong {
    font-weight:                400;
}
h1 .sub {
    font-size:                  0.5em;
}
h1 {
    font-size:                  250%;
}
h2 {
    font-size:                  inherit;
}
p, blockquote, ul {
    text-shadow:                #FFF 0 -1px 1px, #CCC 0 0 3px;
}
p {
    text-align:                 justify;
}
ul {
    font-size:                  90%;
    font-weight:                400;
}
blockquote {
    font-size:                  90%;
    font-weight:                400;
}
a, .link, :link {
    color:                      inherit;
    text-decoration:            underline;
    cursor:                     pointer;
    font-weight:                400;
}
a:hover, .link:hover {
    text-decoration:            none;
}
label {
    display:                    inline-block;
    width:                      15em;
}


/* Classes */
.stripe {
    background:                 rgba(255, 255, 255, 0.3);
    border:                     1px solid rgba(255, 255, 255, 0.7);
    border-width:               1px 0;
    -webkit-box-shadow:         inset 0 0 15px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(200, 200, 200, 0.5);
       -moz-box-shadow:         inset 0 0 15px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(200, 200, 200, 0.5);
            box-shadow:         inset 0 0 15px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(200, 200, 200, 0.5);
}

/* Page */
header {
    position:                   relative;
    background:                 url("../img/back-dark.png") center 0;
    border-bottom:              1px solid #FFF;
    -webkit-box-shadow:         0 0 50px #666;
       -moz-box-shadow:         0 0 50px #666;
            box-shadow:         0 0 50px #666;

    margin:                     0 0 5em;
    padding:                    1em 0;

    text-align:                 center;
}
header h1 {
    margin:                     0;

    color:                      white;
    font-size:                  350%;
}
header .logo {
    height:                     128px;
    vertical-align:middle;
}
header .divider {
    position:                   absolute;
    width:                      100%;
    bottom:                     -90px;
}
footer {
    clear:                      both;
    padding:                    1em 0;

    color:                      #333;
    text-shadow:                #FFF 0 -1px 1px, #999 0 0 5px;

    text-align:                 center;
    font-size:                  80%;
}
section {
    width:                      900px;
    margin:                     0 auto;
}
#content section.current {
    opacity:                    1;
    z-index:                    1;
}
hr {
    background:                 url("../img/Dividers/Simple.png") center center no-repeat;
    border:                     none;
    height:                     5px;
}
blockquote {
    margin-left:                5em;
}
blockquote:before {
    content:                    "❝";
    position:                   absolute;
    margin:                     -0.5ex 0 0 -1em;
    font-size:                  300%;
    font-weight:                100;
}

/* Utilities */
.side {
    float:                      right;
    margin:                     1em -10em 1em 1em;
}
.sidebox {
    background:                 url("../img/Dividers/Divider_H.png") center bottom no-repeat;
    position:                   relative;
    float:                      right;
    margin:                     1em;
    width:                      546px;
    text-align:                 center;
}
.sidebox .clip {
    overflow:                   hidden;
    position:                   relative;
    z-index:                    -1;
}
.frontpage .sidebox {
    margin-right:               -100px;
}
.frontpage .sidebox .clip {
    height:                     416px;
    margin-bottom:              84px;
}
.hoverShow {
    display:                    none;
}
*:hover>.hoverShow {
    display:                    inline-block;
}

section {
    position:                   relative;
    display:                    none;

    -webkit-transition:         all 0.2s ease-in-out;
       -moz-transition:         all 0.2s ease-in-out;
        -ms-transition:         all 0.2s ease-in-out;
         -o-transition:         all 0.2s ease-in-out;
            transition:         all 0.2s ease-in-out;
}
section.active {
    display:                    block;
}
a.previous, a.next {
    display:                    block;
    position:                   absolute;
    margin:                     -2.5em 0 0 0;

    font-size:                  150%;
    font-weight:                400;
    text-decoration:            none;
}
a.previous {
    left: 0;
}
a.previous:before {
    content:                    "< ";
}
a.next {
    right: 0;

    text-align:                 right;
}
a.next:after {
    content:                    " >";
}

#ribbon {
    background:                 url("../img/ribbon-join-beta.png");

    display:                    block;
    position:                   absolute;
    left:                       0;
    margin-top:                 -5em;
    width:                      184px;
    height:                     184px;
}

#frontpage .sidebox {
    margin-top:                 -50px;
}