html, body { height: 100%; color: #333; font-family: sans-serif; }

body > header { float: left; width: 18em; height: 100%; overflow: auto; padding: 0 3em; }
body > header a { color: inherit; text-decoration: none; }
body > header a:hover { text-decoration: underline; }
body > header h2 { margin: 2em 0 1em; font-size: 100%; }
body > header h2 a { font-size: 150%; }
body > header h2 a:hover { text-decoration: underline; }
body > header > aside * { font-size: 85%; color: #666; }

nav { margin: 2em 0; }
nav ul, nav ol { ; list-style-position: inside; margin: 1em 0; width: auto; }
nav ul { list-style-type: none !important; }
nav > ul > li { margin-left: 0; }
nav li { margin: 0.3em 0 0.3em 1em; }
nav li.expanded { margin: 1em 0; }
nav li.expanded > ul li.expanded:first-of-type { margin-top: 0.25em; }
nav h2, nav h3, nav h4, nav h5, nav h6 { margin: 1em 0 -0.6em 0; font-size: 100%; }

body > main { border-left: 0.8em solid #38b256; background-color: #fafafa; height: 100%; }
article { border-left: 1px solid #38b256; overflow: auto; background-color: #fff; height: 100%; }
article > div { margin: 2em; line-height: 1.3em; }

aside.alert { border: 1px solid #f66; border-left-width: 1em; background-color: #fee; margin: 1em 0; padding: 0.5em 0.5em; width: 40em; }
aside.alert.success { border-color: #38b256; background-color: #efe; }
aside.alert.note { border-color: #73d3ff; background-color: #fafafa; }
aside.alert.note:before { content: "Note: "; font-style: italic; }
aside.alert.error:before { content: "Error: "; font-style: italic; }
aside.alert.success:before { content: "Confirmation: "; font-style: italic; }
aside.alert.suppress:before { content: none !important; }

aside.alert_ { border: 1px solid #f66; border-left-width: 1em; background-color: #fee; margin: 1em 0; padding: 0.5em 0.5em; width: 40em; }
aside.alert_.error_:before { content: "Error: "; font-style: italic; }

dl.look-behind-you { margin: 0; text-align: center; }
dl.look-behind-you > dt { font-size: 700%; line-height: 100%; color: #333333; font-weight: normal; margin: 0; }
dl.look-behind-you > dd { font-style: italic; text-align: center; margin: 0; }

.hl-success, .hl-warning, .hl-error { border-radius: 1em; padding: 0.3em; }
.hl-success { background-color: #cfc !important; }
.hl-warning { background-color: #ccf !important; }
.hl-error { background-color: #fcc !important; }
input.hl-error { border-radius: 0; }

form > div:not(.unaligned), .aligned > div:not(.unaligned) { display: table; table-layout: fixed; width: 40em; border-collapse: collapse; clear: both; }
form > div:not(.unaligned) > *, .aligned > div:not(.unaligned) > * { line-height: 150%; display: table-cell; }
form > div:not(.unaligned) > :first-child, .aligned > div:not(.unaligned) > :first-child { text-align: right; width: 10em; padding-right: 0.5em; }
form > div.multi:not(.unaligned) > :first-child, .aligned > div.multi:not(.unaligned) > :first-child { vertical-align: top; padding-top: 1em; }
form.full > div:not(.unaligned), .aligned.full > div:not(.unaligned), form > div:not(.unaligned).full, .aligned > div:not(.unaligned).full { width: 100%; }

button.stripe-button-el > span { display: block; min-height: 30px; }
button.bitcoin { min-width: auto; border: 0; margin: 0; padding: 0; background-image: url('/static/images/coinbase/buy_now_large.png');
background-repeat: no-repeat; background-color: transparent; font-size: 0; width: 191px; height: 37px }
button.bitcoin:hover { background-color: transparent; cursor: pointer; }

details.toc { background-color: #fafafa; border: 1px dashed black; padding: 1em; width: 30em; }
details.toc > summary { font-weight: bold; }
details.toc ol { margin: 0; }
details.toc > ol { margin-top: 1em; }
details.toc ol li { margin-left: 2em; }

/* Page specific styles */
.renew_step_done { text-decoration: line-through; }
.installed_software > div.aligned { margin-top: 1em; }
input[type=text].login_server { width: auto; }

ol.tickets { list-style-type: none; margin: 0 0 1em 0; }
ol.tickets > li { margin: 0; }
ol.tickets > li.levels { margin-left: 3em; }
ol.tickets > li > h2 { margin: 0 0 0 9.5em; font-size: 100%; }
ol.tickets > li > div:first-child { float: left; margin-right: 0.5em; width: 9em; text-align: right; }
ol.tickets > li > :nth-child(2) { overflow: hidden; }
ol.tickets > li > :nth-child(2) > div { font-family: monospace; color: #666; }

ul.ticket_admin, ul.ticket_admin ul { list-style-type: none; margin: 0; }
ul.ticket_admin li { margin: 0; }
ul.ticket_admin > li { float: left; }
ul.ticket_admin > li.status { width: 8em; }
ul.ticket_admin > li.levels { width: 12em; margin: 0 1em; }
ul.ticket_admin > li.levels > ol { width: 100%; margin: 0; }
ul.ticket_admin > li.levels > ol > li > input { width: 11em; }
ul.ticket_admin > li.tags { width: 18em; }
ul.ticket_admin > li.tags > ul > li { float: left; padding: 0.5em; }
ul.ticket_admin > li.tags > ul > li > label { font-family: monospace; white-space: pre; }

ol.ticket_view { border: 1px solid #38b256; border-width: 1px 0; margin-left: 0; clear: both; }
ol.ticket_view > li { border: 1px solid #38b256; list-style-type: none; margin: 0; }
ol.ticket_view > li > dl { margin: 0; }
ol.ticket_view > li > dl > dt { margin: 0.5em; padding: 0.5em; background-color: #ecf6e7; font-weight: normal; }
ol.ticket_view > li > dl > dd { margin: 1em; }
.ticket_add #message { height: 25em; }

.qr > img { border: 0; }
input[type=text].crypto { font-size: 100%; width: 22em; }