html {height: 100%; margin-bottom: 1px;}
body {margin: 0; padding: 0; text-align: center; background: #f7f7f8 url(/images/bg_container.gif) repeat-y top center; font: 62.5%/1.5em 'Lucida Grande', 'Trebuchet MS', Arial, Helvetica, sans-serif; color: #000;}
table td, table th {font-size: 1em;}
body, div, h1, h2, h3, h4, h5, h6, table, td, th, p, ol, ul, dl, li, dt, dd, form, input, textarea, select {margin: 0; padding: 0;}
img {border: 0;}

/* container and general structure */
#container {margin: 0 auto; width: 960px; background: #FFF url(/images/bg_container.gif) repeat-y top left;}
#header, #columns, #footer {text-align: left;}

/* header */
#header {margin: 0 6px; height: 165px; position: relative; }
#header h6 {width: 259px; height: 64px; position: absolute; top: 26px; left: 25px;}
#header h6 a {padding-top: 64px; width: 259px; height: 0; display: block; overflow: hidden; background: url(/static/images/new_myopenid_logo_header.png) no-repeat top left;
}

/* columns and personal icon */
#columns {background: transparent url(/images/bg_columns.gif) repeat-y top left;}

/*#personal-icon {height: 85px; position: relative; overflow: visible; */
#personal-icon {
  height: 46px;
  position: absolute;
  overflow: visible;
  background: transparent url(/images/bg_personal-icon.gif) no-repeat top left;
  background-position: 0px -24px;
  width: 954px;
  margin-left: -18px;
}

#personal-icon p {width: 248px; height: 150px; position: absolute; bottom: 5px; right: 8px; border: 1px solid #CCC; overflow: hidden; background-color: #EEE; background-position: 50% 50%; background-repeat: no-repeat; }
#personal-icon #personal-icon-container { margin-bottom: 0.2em; }
#personal-icon.set p {background-color: #FFF;}
#personal-icon a {display: block; width: 248px; height: 15px; padding: 129px 6px 6px; background: none; text-transform: uppercase; color: #666; text-decoration: none; letter-spacing: .1em;}
#personal-icon a:hover {color: #000;}

/* content */
/*#content {padding: 0 18px 1.5em; width: 647px; float: left; font-size: 1.2em; line-height: 1.5em;}*/
#content {padding: 0 18px 1.5em; width: 647px; float: left; font-size: 1.2em; line-height: 1.5em; margin-top: -46px; }
/*#content h1 {margin: 0 -18px 12px -12px; background: url(/images/bg_content_h1_border.gif) repeat-y top left; font-weight: normal; text-transform: uppercase; font-size: 1.6667em; letter-spacing: .1em; line-height: 1em; color: #FFF; border-bottom: 2px solid #4fab0b; width: 683px; }*/
#content h1 { margin: 0 -18px 12px -12px; font-weight: normal; text-transform: uppercase; font-size: 1.6667em; letter-spacing: .1em; line-height: 1em; color: #FFF; border-bottom: 2px solid #4fab0b; width: 677px; }
#content h1 span {margin: 0 0 0 6px; padding: 16px 12px 8px; display: block; }
#content h2 {margin: 2em 0 6px; padding: 0 0 6px; border-bottom: 4px solid #90d536; text-transform: uppercase; letter-spacing: .1em; font-size: 1.3333em; color: #4fab0b; font-weight: normal;}
#content p, #content ul, #content ol, #content dl {margin-bottom: .8em;}
#content ol {margin-left: 2em;}
#content ul {list-style-type: none;}
#content li {padding-left: 1.2em; background: transparent url(/images/bullet.gif) no-repeat .4em .6em;}

#content ul.links li {background: transparent url(/images/bullet_link.gif) no-repeat 0 .4em;}
#content .conjoined {margin-top: -.8em;}

#content dl {margin-left: 1em}
#content dt {font-size: 1.1em; font-weight: bold;}
#content dd {margin: 0 0 .5em 2em;}

#content .box {margin-bottom: 1.5em; padding-left: 23px; background-repeat: no-repeat; background-position: 0 .2em;}
#content .box h2 {margin: 0 0 6px; padding: 0 0 6px; border-bottom: 1px solid #CCC; text-transform: none; letter-spacing: 0; font-size: 1.0833em;} 
#content .box a.dismissLink {font-size: .8333em; float: right;}
#content .about {background-image: url(/images/icon_about.gif);}
#content .about h2 {border-bottom-color: #f4dcb8; color: #d57500;}
#content .error {background-image: url(/images/icon_error.gif);}
#content .error h2 {border-bottom-color: #c62c13; color: #c62c13;}
#content .alert {background-image: url(/images/icon_alert.gif);}
#content .alert h2 {border-bottom-color: #246ca0; color: #246ca0;}

#content span.openid_details {display:block; font-size:1.2em; font-weight:bold; padding:0.5em;}

#content div.settings {margin-bottom: 1.5em;}

#content div.image-space {
         width: 100px;
         height: 100px;
         border: 1px solid black;
         display: table-cell;
         vertical-align: middle;
         text-align: center;
}

#content div.clickable {
         border-style: outset;
}

/* personas */
#content div.chosen_persona {
    padding: 15px;
    border: 2px solid black;
    margin: 15px;
}

#content div.chosen_persona h3 {border-bottom: 1px solid black; margin: 15px;}

#content div.chosen_persona form {border: none;}

#content div.chosen_persona p.actions {
         clear: both;
         margin: 15px;
         border-top:1px solid black; 
         text-align:right;
}

#content div.chosen_persona th {padding: 0.4em;}
#content div.chosen_persona td {padding: 0.4em;}

#content div.chosen_persona div.persona_container {
    position: relative;
    height: 100%;
    min-height: 120px;
}
#content div.chosen_persona #chosen_persona_image {
    position: absolute;
    top: 15px;
    left: 15px;
}
#content div.chosen_persona div.table_container {
    margin-top: 15px;
    margin-left: 120px;
}
#content div.chosen_persona table.persona_data {
    width: 100%;
}

/* 200px is 1/3ish the (fixed) width of #content */
#content table.persona {width: auto}
#content table.persona th {width: 200px; padding: 20px;}
#content table.persona div.image-space {border: 2px solid black;}

a.button {display: table-cell; text-align: center; font-weight: normal; text-decoration: none; color: #000;}
a.button:link {color: #000;}
a.button:visited {color: #000;}
a.button:hover,a.button:active {color: #000; font-weight: bold; text-decoration: none; background: #fff;}


/* forms */
/*#content form {border-top: 2px solid #90d536;}*/
#content form label {font-weight: bold; display: block; text-align: right; font-size: 1em;}
#content form .oneline label {display: inline;}
#content form .full {width: 90%;}
#content form label.left {display:inline; text-align:left;}
#content form table {border-collapse: collapse; width: 100%;}
#content form table td, #content form table th {padding: 6px 6px 6px 0; vertical-align: top;}

#content form table tr.radiochecks td {text-align: right;}
#content form table tr.radiochecks label {font-weight: normal; text-align: left;}


#content form label.radiochecks {display: inline; font-weight: normal; text-align: left;}
#content form div.divider, #content form tr.divider td {border-bottom: 1px solid #90d536;}
#content form div.buttons {margin-top: 6px; padding-top: 6px; text-align: right; border-top: 2px solid #90d536; margin-bottom: 0.8em;}
#content form div.noborder {
    border-top: 0px;
}

#content form .example { color: #777; }
#content form.noline {border-top: 0;}
#content h2 + form {margin-top: -8px;}
#content img {vertical-align: middle;}

#content textarea.large {width: 90%; height: 8em;}

#content table.ledger {
    border-collapse: collapse;
    border-bottom: 1px solid #90d536;
}
#content table.ledger th {
    border-bottom: 1px solid #90d536;
}
#content table.ledger td, #content table.ledger th {
    padding-right: 0.5em;
    padding-left: 0.5em;
}
#content table.ledger tr.odd td {
    background: #D3EEAF;
}

#content table.ledger tr.even td {}

#content table.ledger td.checkbox_column {
    text-align: center;
    width: 10%;
}

#content table.ledger td div.clipping {
    overflow: hidden;
}

#content table.ledger td div.clipping:hover {
    overflow: auto;
}

#content table.full {
    width: 90%;
}

#content table td.legend {
    text-align: center;
}

#content pre.pre_boxed {
    margin: 2em;
    border: 1px solid black;
    background: #eee;
    overflow: auto;
}

#content .pagination {font-size: 1em;}
#content .pagination hr {clear: both;}
#content .pagination .fr {padding: 10px;}
#content .pagination .fl {padding: 10px;}

/* navigation */
#navigation {padding-top: 6px; float: right; width: 277px; background: url(/images/bg_navigation.gif) no-repeat top left; font-size: 1.2em;}
#navigation p#identity-url {margin: 0 6px; padding: 10px 12px; background: #b2d8eb url(/images/bg_identity_url.gif) repeat-y top left; color: #FFF; font-size: .8333em; text-transform: uppercase; letter-spacing: .1em; line-height: 1.2em;}
#navigation p#identity-url a {text-transform: none; letter-spacing: 0; font-size: 1.08em;}
#navigation h2 {margin: 0 6px; padding: 12px 12px 6px; background: #7ebddd url(/images/bg_navigation_h2.gif) repeat-y top left; border-bottom: 2px solid #58a0cc; font-weight: normal; text-transform: uppercase; font-size: 1.3333em; letter-spacing: .1em; line-height: 1.25em; color: #FFF;}
#navigation ul {list-style-type: none; margin-bottom: 2em;}
#navigation li {margin: 0 6px; border-bottom: 1px solid #b2d8eb;}
#navigation li a {padding: 6px 12px; display: block; background: url(/images/bg_navigation_item.gif) repeat-y top left; text-decoration: none;}
#navigation li a:hover {background: #FFF; color: #246c98;}
#navigation li.divider a {border-top: 1px solid #b2d8eb;}
#navigation li.current {margin-top: -1px; margin-left: 0; border-top: 1px solid #FFF; border-color: #b0e071;}
#navigation li.current a {padding-left: 18px; font-weight: bold; background: #FFF; color: #4fab0b;}
#navigation li.current ul {margin: 0; background: #FFF;}
#navigation li.current ul li {margin: 0 0 0 18px; font-size: .9167em; border-bottom: none; border-top: 1px dotted #b0e071;}
#navigation li.current ul li a {padding-left: 21px; font-weight: normal;}
#navigation li.current ul li.current a {font-weight: bold;}

#navigation ul li.current ul li.current.current_parent a { background: #FFF; }
#navigation ul li.current ul li.current.current_parent a:hover { background: #FFF url(/images/icon_subnav_highlight.gif) no-repeat 0 50%; }

#navigation ul li.current ul li.current ul {margin: 0; background: #FFF;}
#navigation ul li.current ul li.current ul li {margin: 0 0 0 18px; font-size: .9167em; border-bottom: none; border-top: 1px dotted #b0e071;}
#navigation ul li.current ul li.current ul li a {padding-left: 21px; font-weight: normal; background: #FFF; }
#navigation ul li.current ul li.current ul li.current a {font-weight: bold;}
#navigation ul li.current ul li.current ul li.current a, #navigation ul li.current ul li.current ul li a:hover {background: #FFF url(/images/icon_subnav_highlight.gif) no-repeat 0 50%;}

#navigation ul li.current ul li.current a, #navigation li.current ul li a:hover {background: #FFF url(/images/icon_subnav_highlight.gif) no-repeat 0 50%;}
#navigation p {margin-left: 18px; margin-right: 18px; line-height: 1.5em;}
#navigation #partner-logo {margin-left: 18px;}

/* for both content and navigation */
p.graphic-button {width: 248px; background: transparent url(/images/bg_graphic-button_green_m.gif) repeat-y top left;}
p.graphic-button a {display: block; background: transparent url(/images/bg_graphic-button_green_t.gif) no-repeat top left; text-decoration: none; font-weight: bold; text-transform: uppercase; text-align: center; letter-spacing: .1em; color: #4f5a64; text-shadow: 0 1px 0 #FFF;}
p.graphic-button a:hover {color: black; background-color: transparent;}
p.graphic-button a span {padding: 4px 12px 5px; display: block; background: transparent url(/images/bg_graphic-button_green_b.gif) no-repeat bottom left;}
#navigation p.graphic-button {margin: 0 0 .5em 15px; background-image: url(/images/bg_graphic-button_blue_m.gif);}
#navigation p.graphic-button a {background-image: url(/images/bg_graphic-button_blue_t.gif);}
#navigation p.graphic-button a span {background-image: url(/images/bg_graphic-button_blue_b.gif);}

/* variations */
#home #content h1 {margin-bottom: 18px;}
#home #content h2 {margin-top: 0; padding-bottom: 0; border: none; font-weight: normal;}
#home #content ul.links {margin-bottom: 1.6em;}
#home #content .two-thirds {width: 55%;}
#home #content .one-third {width: 42%;}
#home #navigation h2 {margin-bottom: 18px;}
#home #navigation p {color: #444;}

/* footer */
#footer {padding: 18px; min-height: 110px; background: url(/images/bg_footer.gif) no-repeat top left; font-size: 1.1em; color: #777;}
#footer p {width: 30%;}
#footer p.fr {width: 65%; text-align: right;}

/* links */
a:link {color: #246c98;}
a:visited {color: #809aab;}
a:hover, a:active, a.current {color: #FFF; background-color: #246c98; text-decoration: none;}

/* tools */
.half {width: 48%;}
.two-thirds {width: 65%;}
.one-third {width: 32%;}

.fl {float: left;}
.fr {float: right;}

img.fl {margin: 0 10px 5px 0;}
img.fr {margin: 0 0 5px 10px;}

.cb {clear: both;}
.cl {clear: left;}
.cr {clear: right;}

.skip {display: none;}

.ca:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.ca {display: inline-table;}
/* Hides from IE-mac \*/
.ca {display: block;}
/* End hide from IE-mac */

.wildcard {
    font-style: italic;
    color: red;
}

form#infocard-form label {
     text-align: left;
     display: inline;
     font-weight: normal;
}
form input#infocard-logo-button {
     vertical-align: bottom;
}

form#password-signin-form {
     border-top: 0;
}

div#auth_spinner {
    float:left;
}

div.errorbox {
    padding: 0.5em;
    background: #ffcccc;
    border: 1px solid red;
    clear: both;
}

div.section_content {
    padding: 0.5em;
}

span.verification_attempt {
    display: block;
    font-style: italic;
    color: #888;
}

table.invite_table {
    border-bottom: 1px solid #eee;
    margin-bottom: 0.5em;
}

table.invite_table td.col_email_address {
    width: 10em;
}

table.invite_table td.col_user_name {
    width: 10em;
}

table.invite_table td.col_number {
    width: 1em;
}

table.invite_table span.example_text {
    font-size: 0.75em;
    color: #888;
    display: block;
}

#content .no_top_margin {
    margin-top: 0;
}

div.attention_box {
    padding: 0.5em;
    border: 1px solid #afa600;
    background: #fff677;
    margin-bottom: 1em;
}

div.attention_box span.attention_box_header {
    display: block;
    font-size: 1.4em;
}

div.attention_box span.attention_box_item {
    display: block;
    margin-left: 1.5em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

div.attention_box a:link, div.attention_box a:visited {
    color: #246c98;
}

div.attention_box a:hover {
    color: white;
}

div.section {
    margin-bottom: 2em;
}

div.section span.header {
    display: block;
    font-size: 1.5em;
    margin-bottom: 0.2em;
}

div.section div.body {
    margin-left: 1.75em;
}

pre.verification_code, pre.dns_cname {
    border: 1px solid #ccc;
    background-color: #eee;
    padding: 0.5em;
    font-size: 1.5em;
}

#your_domain_p {
    margin-top: 1.5em;
}

#new-domain-name {
    width: 14em;
    border: 1px solid #ccc;
}

.input_error {
    border: 2px solid #f00;
}

#new-domain-name.input_error {
    border: 2px solid #f00;
}

#new-domain-tld {
    border: 1px solid #ccc;
}

.domain_style_errors {
    font-weight: bold;
    color: red;
}

#domain-style {
    margin: 1em;
}

#your-domain-subdomain {
    border: 1px solid #ccc;
    width: 8em;
}

span.new_domain_next_step {
    display: block;
    text-align: left;
    margin-top: 0.2em;
}

input.new_domain_next_submit {
    float: right;
}

.aff_img {border:1px solid #ddd;padding:10px;margin:2em 0em 2em 4em;}

.domains-example-left {width:30em;padding-right:10px;border-right:1px solid #eee;vertical-align:top;}
.domains-example-right {padding-left:10px;vertical-align:top;}

div.pre_style {
    font-family: monospace;
    background: #eee;
    border: 1px solid #666;
    padding: 0.5em;
    margin-bottom: 0.75em;
}

span.domain_string {
    font-weight: bold;
}

a.bigger_text {
    font-size: 1.5em;
}

th.section_heading h3 {
    color: #4fab0b;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1.3333em;
    letter-spacing: .1em;
    margin-top: 1.0em;
}

input.wide_input_box {
    /* Specified in px since the page does not have a dynamic width. */
    width: 500px;
}

img.screenshot {
    border: 2px solid #999;
    margin: 1em;
    padding: 0.5em;
}

form.inline_form {
    display: inline;
}


div#email_reminder_box {
    margin:0.5em;
}

div#email_reminder_box h3 {
    margin-left:0.3em;
}


.attention_box th, .attention_box td {
   padding-right: 1ex;
   padding-left: 1ex;
}

.padded_left_paragraph {
   padding-left: 1.5em;
}

a:hover img.nohover {
   background-color: #fff;
}