MasterPassword/Site/2/css/screen.css

html {
    background:                 url("../img/back-dark.png") center 0;
}
body {
    padding:                    0;
    margin:                     0;

    color:                      white;

    font:                       120% Exo, sans-serif;
    font-weight:                100;
}
h1, h2, h3, h4 {
    text-shadow:                #000 0 1px 1px;
    color:                      #999;

    font-weight:                600;
}
strong {
    font-weight:                400;
}
h1 .sub {
    font-size:                  0.5em;
}
h1 {
    font-size:                  250%;
}
h2 {
    color:                      #666;
    font-size:                  inherit;
    font-weight:                400;
}
p, blockquote, ul {
    text-shadow:                #FFF 0 -1px 1px, #CCC 0 0 3px;
}
p {
    text-align:                 justify;
}
ul {
    font-weight:                600;
    font-size:                  90%;
    font-weight:                500;
}
blockquote {
    font-weight:                600;
    font-size:                  90%;
    font-weight:                bold;
}
a, .link, :link {
    color:                      inherit;
    text-decoration:            underline;
    cursor:                     pointer;
    font-weight:                500;
}
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;
    z-index:                    1;
    width:                      900px;
    margin:                     2em auto 0;
}
header h1 {
    display:                    inline-block;
    margin:                     0;

    color:                      inherit;
    font-size:                  150%;
}
header .logo {
    height:                     3em;
    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 {
    background:                 url("../img/back-light.png") center 0;
    -webkit-box-shadow:         2px 2px 2px #000, 0 0 50px #CCC, inset 0 0 50px #FFF;
       -moz-box-shadow:         2px 2px 2px #000, 0 0 50px #AAA, inset 0 0 50px #FFF;
            box-shadow:         1px 1px 4px #000, 0 0 200px #666;
    border-radius:              5px;
    border:                     1px solid white;
    color:                      black;

    width:                      900px;
    margin:                     0 auto;
    padding:                    2em;
}
#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:                200;
    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;
    z-index:                    1;
    float:                      right;
    margin:                     1em;
    width:                      546px;
    text-align:                 center;
}
.sidebox .clip {
    overflow:                   hidden;
    position:                   relative;
    z-index:                    0;
}
.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;
    width:                      100%;
    margin:                     -2.5em 0 0 0;

    font-size:                  150%;
    font-weight:                600;
    text-decoration:            none;
}
a.previous {
    margin-left:                -3em;
}
a.previous:before {
    content:                    "< ";
}
a.next {
    margin-left:                3em;

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

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