MasterPassword/Site/2012-07/css/screen.css

html {
    background:                 url("../img/back2-light.png") center 0;
    height:                     100%;
}
body {
    padding:                    0;
    margin:                     0;

    color:                      black;

    font:                       105% "Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;
    font-weight:                100;

    height:                     100%;
}
h1, h2, h3, h4 {
    text-shadow:                #FFF 0 -1px 1px, #AAA 0 0 5px;

    font-weight:                600;
}
h1 {
    font-family:                "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Liberation Sans", sans-serif;

    font-weight:                100;
}
strong {
    font-weight:                600;
}
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;
}
ul.clean {
    list-style:                 none;
}
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;
}
img {
    border:                     none;
}


/* Classes */
.button {
    display:                    inline-block;
    background:                 rgba(255, 255, 255, 0.7);
    border:                     1px solid rgba(255, 255, 255, 1);
    border-radius:              5px;
    -webkit-box-shadow:         1px 1px 6px rgba(200, 200, 200, 0.5);
       -moz-box-shadow:         1px 1px 6px rgba(200, 200, 200, 0.5);
            box-shadow:         1px 1px 6px rgba(200, 200, 200, 0.5);
    padding:                    1em;

    text-decoration:            none;
}
.button:hover {
    background:                 rgba(240, 240, 240, 0.5);
    border-color:               white;
}

/* Page */
header {
    position:                   relative;
    z-index:                    99;
    background:                 url("../img/back2-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;

    -webkit-box-sizing:         border-box;
       -moz-box-sizing:         border-box;
            box-sizing:         border-box;
    top:                        0;
    left:                       0;
    width:                      100%;
    height:                     150px;
    margin:                     0;
    padding:                    1em 0 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;
}
#fixedheader {
    position:                   fixed;
    z-index:                    98;
    background:                 url("../img/back2-dark.png") center 0;
    border-bottom:              1px solid #FFF;
    -webkit-box-shadow:         0 0 10px #000;
       -moz-box-shadow:         0 0 10px #000;
            box-shadow:         0 0 10px #000;

    -webkit-box-sizing:         border-box;
       -moz-box-sizing:         border-box;
            box-sizing:         border-box;
    top:                        0;
    left:                       0;
    width:                      100%;
    height:                     50px;
    padding:                    10px 0 0;

    text-align:                 center;
}
#fixedheader h2 {
    margin:                     0;

    color:                      white;
    font-size:                  20px;
}
header a, header .link, header :link,
#fixedheader a, #fixedheader .link, #fixedheader :link {
    font-family:                Exo;
    font-weight:                600;
    text-decoration:            none;
}
header a:hover, header .link:hover,
#fixedheader a:hover, #fixedheader .link:hover {
    text-decoration:            underline;
}
footer {
    clear:                      both;
    padding:                    10em 0 1em;

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

    text-align:                 center;
    font-size:                  80%;
}
section {
    position:                   relative;
    width:                      950px;
    margin:                     0 auto 2em;
    padding:                    1em 0 0;
}
section.heading {
    background:                 rgba(200, 200, 200, 0.3);
    border:                     1px solid rgba(200, 200, 200, 0.5);
    border-width:               0 0 1px;
    -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);

    width:                      100%;
    padding:                    0;
}
section.heading>div {
    width:                      950px;
    margin:                     0 auto;
    padding:                    1em 0;
}
hr {
    background:                 url("../img/Dividers/Simple.png") center center no-repeat;
    border:                     none;
    height:                     4em;
    clear:                      both;
}
blockquote {
    margin-left:                5em;
}
blockquote:before {
    content:                    "❝";
    position:                   absolute;
    margin:                     -0.5ex 0 0 -1em;
    font-size:                  300%;
    font-weight:                100;
}
#sendtophone input[type=text] {
    border:                     1px solid #666;
    border-radius:              5px;
    width:                      15em;

    -webkit-box-shadow:         0 0 5px #AAA;
       -moz-box-shadow:         0 0 5px #AAA;
            box-shadow:         0 0 5px #AAA;
}

/* 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:                    2;
    float:                      right;
    margin:                     1em;
    width:                      546px;
    text-align:                 center;
}
.sidebox .clip {
    overflow:                   hidden;
    position:                   relative;
    z-index:                    1;
}
.badge.appstore {
    position:                   fixed;
    display:                    none;
    z-index:                    100;

    /* appstore-bubble.png *
    top:                        8px;
    right:                      5px;
    */
    /* appstore.png */
    top:                        25px;
    right:                      25px;
    width:                      200px;

    text-align:                 center;
}
.badge.appstore img {
    width:                      200px;
    border-radius:              5px;
    -webkit-box-shadow:         0 0 30px #AAA;
       -moz-box-shadow:         0 0 30px #AAA;
            box-shadow:         0 0 30px #AAA;
}
.badge.appstore:hover img {
    -webkit-box-shadow:         0 0 30px #FFF;
       -moz-box-shadow:         0 0 30px #FFF;
            box-shadow:         0 0 30px #FFF;
}
header .badge.appstore {
    position:                   absolute;
    display:                    block;

    top:                        auto;
    /* appstore-bubble.png *
    bottom:                     -73px;
    */
    /* appstore.png
    bottom:                     -25px;
    */
    top:                        125px;
}
.tip {
    background:                 url("../img/tip-above.png") no-repeat;
    color:                      white;

    position:                   absolute;
    display:                    block;
    right:                      65px;
    width:                      410px;
    height:                     60px;
    padding:                    12px 20px;
    margin-top:                 -60px;

    -webkit-box-sizing:         border-box;
       -moz-box-sizing:         border-box;
            box-sizing:         border-box;

    font:                       14px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Liberation Sans", sans-serif;
}
.tip.phone {
    background:                 url("../img/tip-below.png") no-repeat;
    padding:                    23px 20px;
    margin-top:                 0px;
}
.badge {
    position:                   absolute;
    right:                      20px;
    top:                        20px;
}
.footnote {
    color:                      #444;

    position:                   absolute;
    width:                      inherit;
    bottom:                     2px;

    text-align:                 center;
    font-size:                  14px;
}
.footnote a:hover {
    color:                      #666;
}
*>.nothover {
    display:                    inline-block;
}
*:hover>.nothover {
    display:                    none;
}
*>.hover {
    display:                    none;
}
*:hover>.hover {
    display:                    inline-block;
}
.columns {
    position:                   relative;
    clear:                      both;
    text-align:                 center;
}
.columns>div {
    float:                      left;
    width:                      25%;
    height:                     22em;
    margin:                     0 4%;
    padding:                    3em 0 1em;
    text-align:                 justify;
    font-size:                  smaller;
}
.columns h2 {
    font-size:                  120%;
}
.columns .columnhead {
}
.box {
    display:                    inline-block;
    position:                   relative;
    font-size:                  0;
}
.box img {
    border:                     1px solid white;
}
.hoverShow {
    display:                    none;
}
.center {
    text-align:                 center;
}
.clear {
    clear:                      both;
}
*:hover>.hoverShow {
    display:                    inline-block;
}

a.previous, a.next {
    display:                    block;

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

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

    display:                    block;
    position:                   absolute;
    left:                       0;
    margin-top:                 -1em;
    width:                      184px;
    height:                     184px;
}
#frontpage .heading {
    height:                     100% !important;
    padding-top:                100px;
}
#frontpage #about {
    padding-top:                 4em;
}
#frontpage .sidebox {
    background-position:        center 397px;
    margin-right:               -100px;
}
#frontpage .sidebox .clip {
    height:                     416px;
    margin-bottom:              2em;
}