style.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

body {
  color: #383838;
  background-color: #dee3e6;
  background-image: url('/common/i/grain.png');
  background-image: url("/common/i/grain.png"), -webkit-gradient(linear, left top, left bottom, from(rgba(113, 126, 137, 0)), to(rgba(113, 126, 137, 0.2)));
  background-image: url('/common/i/grain.png'), -webkit-linear-gradient(top, rgba(113, 126, 137, 0), rgba(113, 126, 137, 0.2));
  background-image: url('/common/i/grain.png'),    -moz-linear-gradient(top, rgba(113, 126, 137, 0), rgba(113, 126, 137, 0.2));
  background-image: url('/common/i/grain.png'),     -ms-linear-gradient(top, rgba(113, 126, 137, 0), rgba(113, 126, 137, 0.2));
  background-image: url('/common/i/grain.png'),      -o-linear-gradient(top, rgba(113, 126, 137, 0), rgba(113, 126, 137, 0.2));
  background-image: url('/common/i/grain.png'),         linear-gradient(top, rgba(113, 126, 137, 0), rgba(113, 126, 137, 0.2));
  line-height: 18px;
}

#signIn {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 393px;
    padding-right: 105px;
}

.completing #signIn {
    /**
     * The width is set in helpers.js->animateClose
     */
    -webkit-transition: all 750ms ease;
       -moz-transition: all 750ms ease;
        -ms-transition: all 750ms ease;
         -o-transition: all 750ms ease;
            transition: all 750ms ease;
}



header, footer {
    position: absolute;
    z-index: 2;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.05) inset;
}

header {
    top: 0;
    padding: 10px 20px;
    /* The *padding is a fix for IE6 and IE7 showing scroll bars in the
     * unsupported dialog.  Since IE6 and IE7 do not support box-sizing:
     * border-box, the left and right padding cause these versions of IE to
     * overflow the dialog box.
     */
    *padding: 10px 0;
    border-bottom: 1px solid #c7c6c1;

    /*-ms-filter through zoom: 1 are fixes for IE6 and IE7 so they show the header
     */
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0c000000,endColorstr=#0c000000);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0c000000,endColorstr=#0c000000);
    zoom: 1;
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,.05), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(top, rgba(0,0,0,.05), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(top, rgba(0,0,0,.05), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(top, rgba(0,0,0,.05), rgba(0,0,0,0));
    background-image:         linear-gradient(top, rgba(0,0,0,.05), rgba(0,0,0,0));
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
}


.home {
  width: 161px;
  height: 40px;
  background: url("/dialog/i/persona-logo-transparent.png") 0 0 no-repeat;
  text-indent: -9999px;
  display: inline-block;
  *display: block;
  zoom: 1;
}

footer {
    bottom: 0;
    border-top: 1px solid #c7c6c1;
    /* The *padding is a fix for IE6 and IE7 showing scroll bars in the
     * unsupported dialog.  Since IE6 and IE7 do not support box-sizing:
     * border-box, the left and right padding cause these versions of IE to
     * overflow the dialog box.
     */
    padding: 20px;
    *padding: 20px 0;
    text-align: center;
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.05));
    background-image:    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.05));
    background-image:     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.05));
    background-image:      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.05));
    background-image:         linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.05));
}

label {
    display: block;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

label.selectable {
    cursor: pointer;
}

section {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}

.table {
    display: table;
    width: 100%;
    height: 100%;
}

.table .vertical {
    display: table-cell;
    vertical-align: middle;
}

section > .contents {
    display: table-cell;
    vertical-align: middle;
    height: 250px;
}

.form_section {
    /**
     * Set the width of the container for when the arrow animation happens
     * otherwise the buttons slide right with the arrow
     */
    width: 250px;
    font-size: 13px;
}

.form_section p {
    margin-top: 8px;
}


.contents > strong {
    display: none;
}

#content {
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 61px;
    bottom: 61px;
    /* Fix for IE6 not displaying the unsupported dialog correctly. IE6 by
     * default sets the height and width of the element to 0 meaning nothing
     * shows up on the screen.
     * Note, height is a magic number that depend on the height of the
     * dialog.  The height also depends on the height of the header and footer.
     */
    _width: 100%;
    _height: 250px;
}

#wait, #error, #delay {
    z-index: -1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;

    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-property: all;
    -o-transition-property: all;
    transition-property: all;

    -webkit-transition-duration: 0.25s;
    -moz-transition-duration: 0.25s;
    -ms-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    transition-duration: 0.25s;

    /* Set this to .25s for Android browser, 0.5 seconds makes it so that it
     * does not show */
    -webkit-transition-delay: 0.25s;
    -moz-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
}


.waiting #wait {
    display: block;
    z-index: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
}

.delay #delay {
    display: block;
    z-index: 2;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
}

.error #error, #error.unsupported, #error.cookies_disabled {
    display: block;
    z-index: 3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
}

#error.unsupported {
  padding: 20px 0;
}

.unsupported {
  /*
   * These are fixes for IE6 - IE6 does not support the combination #id.class
   * selector, so we have to use just the class, and then prepend the css
   * attributes with _ so only IE6 renders them.
   */
  _padding: 20px 0;
  _width: 100%;
  _height: 100%;
}

#error.unsupported h2 {
  margin: 0 0 20px;
}

#error img {
    border: none;
}

#error .lighter {
    color: #777;
}

#wait .vertical, #error .vertical, #delay .vertical {
    padding: 0 20px;
}


#signIn .table {
    background-color: #eff0f2;
    padding: 0 20px;
}

.arrowContainer {
    position: absolute;
    width: 105px;
    right:  0;
    top: 0;
    bottom: 0;
}

.arrow {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('/dialog/i/arrow_grey.png');
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}

#favicon {
    position: absolute;
    left: 400px;
    top: 0;
    bottom: 0;
    right: 20px; /* The same as the left padding of the left hand side */
    overflow: hidden;
    z-index: 10;
}

#favicon strong {
    font-size: 18px;
    line-height: 24px;
    text-shadow: 0 1px #fff;
}

#favicon img {
    display: block;
    margin: 0 auto;
    max-height: 100px;
    max-width: 100px;
}

#favicon h2, #favicon h3 {
    line-height: 1.2em;
    margin: 10px 0 0 0;
}

#favicon h2 {
    margin: 10px 0 0 0;
}

#favicon h3 {
    font-size: 16px;
    margin-top: 0;
}

#favicon .vertical {
    display: table-cell;
    text-align: center;
    max-width: 0;
}

div#required_email {
    padding-top: .7em;
    font-size: 1.2em;
    font-weight: bold;
}

#selectEmail {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    width: 250px;
    overflow-y: auto;
}

#selectEmail.vcenter {
    position: static;
    overflow-y: visible;
    /* The below 1px padding is part of a fix for a bug in webkit where there
     * is a ghost padding-right to accommodate the scroll bar that is shown
     * if there are many email addresses. The ghost padding caused the submit
     * button to shift when the user clicked on it, sometimes making the
     * submit button require two clicks.  The other half of the fix is in
     * screen_size_hacks.js, where an adjustment to the width is made.
     * These two in combination force Chrome to re-flow, which fixes its
     * own bug.
     */
    padding-right: 1px;
}

.inputs > li {
  margin-top: 8px;
}

.inputs > li > label {
    overflow: hidden;
    text-overflow: ellipsis;
}

#selectEmail > .inputs > li {
    margin: 0;
}

#selectEmail > .inputs > li > label {
    padding: 3px 1px;
    white-space: nowrap;
}

#selectEmail > .inputs > li > label.preselected {
    font-weight: bold;
}

#selectEmail > .inputs > li:only-child > label.selectable {
    cursor: default;
}

#selectEmail > .inputs > li:only-child input[type=radio] {
    display: none;
}

.submit {
    margin-top: 8px;
    color: #333;
    font-size: 11px;
}

.submit > p {
  margin-top: 8px;
}

.tospp {
  font-size: 11px;
  color: #787878;
}

#rptospp {
  display: none;
  margin: 10px auto;
  max-width: 280px;
}

.rptospp #rptospp {
  display: block;
}

a.emphasize {
  border-bottom: 1px solid #b8babc;
  border-radius: 2px;
  color: #484848;
  font-size: 11px;
  padding: 0 5px;
  display: inline-block;
  line-height: 22px;
  background-color: #e5e9eb;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e5e9eb), to(#d8dbde));
  background-image: -webkit-linear-gradient(top, #e5e9eb, #d8dbde);
  background-image:    -moz-linear-gradient(top, #e5e9eb, #d8dbde);
  background-image:     -ms-linear-gradient(top, #e5e9eb, #d8dbde);
  background-image:      -o-linear-gradient(top, #e5e9eb, #d8dbde);
  background-image:         linear-gradient(top, #e5e9eb, #d8dbde);
}

a.emphasize:hover,
a.emphasize:focus {
  background-color: #d8dbde;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d8dbde), to(#ccc));
  background-image: -webkit-linear-gradient(top, #d8dbde, #ccc);
  background-image:    -moz-linear-gradient(top, #d8dbde, #ccc);
  background-image:     -ms-linear-gradient(top, #d8dbde, #ccc);
  background-image:      -o-linear-gradient(top, #d8dbde, #ccc);
  background-image:         linear-gradient(top, #d8dbde, #ccc);
}

a.emphasize:active {
  box-shadow: 0 0 5px #333 inset;
}


#back {
  color: #000;
  border-bottom: 1px dotted;
  font-weight: normal;
}

.submit > button {
    margin: 0 0 0 5px;
}

.newuser,
.returning {
    display: none;
}

#your_computer_content {
  max-width: 490px;
  margin: auto;
}

#your_computer_content li {
  margin: 15px 0;
  text-align: left;
  line-height: 28px;
}

#your_computer_content button {
  margin: 0 10px 0 0;
  display: inline-block;
  float: none;
}

.unsupported, .cookies_disabled {
  text-align: center;
}