body {
    line-height: 1.5em;
}

ul {
    margin-bottom: 0;
}

.panel-body {
    padding: 2em;
}

.footer {
    background-color: #ffffff;
    /*bottom: 0;*/
    font-size: 16px;
    height: 32px;
    line-height: 29px;
    margin-top: 2em;
    overflow: hidden;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.table-recent-results > tbody > tr > td.grade {
    width: 2em;
}

.table-recent-results > tbody > tr > td.hostname > a {
    color: #436ece;
}

.alert-hidden {
    display: none;
}

/* wordmark and nav stuff */
#navbar-container {
    margin: 6px auto 8px auto;
}

#observatory-wordmark {
    height: 2.2em;
}

@media only screen and (min-width: 768px) {
    #observatory-wordmark {
        height: 2.5em;
    }

    .equal, .equal > div[class*='col-'] {
        display: -webkit-flex;
        display: flex;
        flex: 1 auto;
    }

    /* There needs to be some margin so that the tables do not show a scrolbar */
    .table {
        margin-bottom: 1px;
    }

    /* fix large gap between sections */
    #recommended-change {
        min-width: 360px;
    }

    #scan-summary {
        width: 95%;
    }

}

#results-container {
    margin-bottom: 1em;
}

/* home page stuff */
#scan-input-hostname {
    margin-bottom: .5em;
}

#scantron-form div.checkbox:last-child {
    margin-bottom: -.25em;
}

#whatami {
    margin-top: .8em;
}

.navbar {
    border: 0;
}

.nav-tabs > li > a {
    background-color: #f6f6f6;
    border-width: 2px 2px 0 2px;
    border-color: #dddddd;
    border-radius: 4px 4px 0 0;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    background-color: #4582ec;
    border-color: #4582ec;
    border-width: 3px 3px 0 3px;
    color: white;
    font-weight: 600;
}

.tab-content {
    margin-top: 1.2em;
}

/* grades */
.grade-container {
    border-radius: 12px;
    color: #ffffff;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 88px;
    height: 128px;
    line-height: 116px; /* height - total border */
    padding-right: 4px;
    width: 128px;
}
.grade-container sup {
    float: right;
    font-size: 52px;
    position: relative;
    top: 32px;
}

.grade-a {
    background: rgb(45, 136, 45);
    border: solid 6px rgb(17, 102, 17);
}

.grade-b {
    background: rgb(170, 170, 57);
    border: solid 6px rgb(128, 128, 21);
}

.grade-c {
    background: rgb(170, 112, 57);
    border: solid 6px rgb(128, 73, 21);
}

.grade-d, .grade-e {
    background: rgb(101, 39, 112);
    border: solid 6px rgb(74, 16, 84);
}

.grade-f {
    background: rgb(170, 57, 57);
    border: solid 6px rgb(128, 21, 21);
}

.grade-i {  /* intermediate is a weird font that needs to be bigger */
    font-size: 102px;
}

/* that is, A+ or A- */
.grade-with-modifier {
    padding-right: 4px;
}

.grade-with-modifier-narrow {
    right: 10px;
}

.grade-with-modifier-wide {
    right: -2px;
}

.hostname {
    border: none;
    max-width: 13.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.large-progress-bar {
    height: 44px;
    margin: 22px 0;
}

.large-progress-bar-condensed {
    margin: 0;
}

.large-progress-bar-text {
    font-size: 24px;
    font-weight: 800;
    line-height: 44px;
    text-transform: uppercase;
    width: 100%;
}

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

/* expandible panel buttons, such as raw server headers */
.expandy-panel-button {
    font-weight: 600;
    padding: 4px 8px;
    white-space: normal;
}

.m-b-0 {
    margin-bottom: 0;
}

.m-t-1 {
    margin-top: 1em;
}

.p-l-3 {
    padding-left: 3em !important;
}

.p-l-2 {
    padding-left: 2em !important;
}

.p-r-1 {
    padding-right: 1em !important;
}

.p-l-0 {
    padding-left: 0 !important;
}

.width-100 {
    width: 100%;
}

#server-headers {
    margin-bottom: 5em;
}

.text-right {
    text-align: right;
}

/* hide all results while the progress bar is in the DOM before it */
div.large-progress-bar-condensed + div.row {
    display: none;
}

/* bootstrap is so dumb here */
.force-rescan+div.popover {
    color: black;
}

.summary tr td:nth-child(1) {
    font-weight: 600;
    padding-right: 1.5em;
    white-space: nowrap;
}

.summary tr td:nth-child(2) {
    white-space: pre-wrap;
    width: 100%;
}

.summary-condensed tr td:nth-child(1) {
    padding-right: 1em;
}

#test-scores .glyphicon, #csp-analysis tr td:nth-child(2), #tlsobservatory-ciphers-table .glyphicon {
    display: table-cell;  /* override inline-block */
}

/* test name */
#test-scores tr td:nth-child(1),
#server-headers-table tr td:nth-child(1),
#tlsobservatory-certificate-table tr td:nth-child(1),
#tlsobservatory-misc-table tr td:nth-child(1),
#sshobservatory-misc-table tr td:nth-child(1),
#sshobservatory-version-table tr td:nth-child(1) {
    font-weight: 600;
    padding-right: 1em;
    white-space: nowrap;
}

/* pass fail */
#test-scores tr td:nth-child(2),
#csp-analysis tr td:nth-child(2),
#csp-analysis tr td:nth-child(3) {
    margin-right: 3em;
    text-align: center;
    white-space: nowrap;
}

/* line up vertically with glyphicons */
#csp-analysis tr td:nth-child(3) span {
    line-height: 1.42857143;
}

/* explanations */
#test-scores tr td:nth-child(4) {
    width: 100%;
}

#test-scores tr td {
    vertical-align: middle;
}

/* change how code looks inside the test scores */
#test-scores code, #csp-analysis code {
    color: #811833;
    font-size: 80%;
}

.glyphicon-ok {
    color: #2d882d;
}

.glyphicon-remove {
    color: #aa3939;
}

.glyphicon-minus, .deemphasize {
    color: #888888;
}

/* score modifier */
#test-scores tr td:nth-child(3) {
    padding-right: 1.5em;
    text-align: right;
    white-space: nowrap;
}

/* site history */
#host-history-table tbody tr td:nth-child(2), #host-history-table thead tr th:nth-child(2) {
    text-align: center;
}

#host-history-table tbody tr td:nth-child(3) {
    padding-left: 1.5em;
}

/* server header values, protocols */
#server-headers tr td:last-child, #tlsobservatory-certificate-table tr td:last-child, #tlsobservatory-ciphers-table tr td:last-child {
    hyphens: auto;
    white-space: pre-wrap;
    width: 100%;
    word-break: break-all;
}

/* tls observatory protocols table is a big crowded */
.bold-no-wrap, #tlsobservatory-ciphers-table tr td:nth-of-type(1) {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* code point */
#tlsobservatory-ciphers-table tr td:nth-of-type(3) {
    color: #666;  /* the most evil color */
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: .85em;
    padding: .15em 1em 0 1em;
    vertical-align: inherit;
    white-space: nowrap;
}

#tlsobservatory-ciphers-table tr th:nth-of-type(3) {
    text-align: center;
}

#tlsobservatory-ciphers-table tr td:nth-of-type(2) {
    border-right: solid 1px #dddddd;
    padding-right: 1em;
    white-space: nowrap;
}

/* key size, AEAD, and PFS */
#tlsobservatory-ciphers-table tbody tr td:nth-child(n+4):nth-child(-n+6) {
    text-align: center;
    white-space: nowrap;
}

#tlsobservatory-suggestions #tlsobservatory-suggestions-disclaimer {
    padding: 0 .75em;
}

#tlsobservatory-suggestions #tlsobservatory-suggestions-disclaimer p:last-child {
    margin-bottom: 0;
}

/* qualys third party test */
#qualys-logo {
    margin: 1.5em .75em -1em 0;
    width: 300px;
}

/* htbridge third party result */
#htbridge-logo {
    margin: 1.5em .75em -1em 0;
    width: 220px;
}

#htbridge-url {
    display: inline-block;
    max-width: 30em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

/* provide some order to the third party tests */
#third-party-tests h3 {
    margin-bottom: .5em;
    margin-top: 1.5em;
}

/* faq and terms and statistics pages */
#faq, #terms {
    max-width: 53em;
    padding: 0 1em;
}

#faq .question, #statistics > div {
    margin-bottom: 2em;
}

#faq .question p{
    padding: 0 1em;
}

#faq pre {
    margin-left: 5%;
    margin-top: 1.25em;
}

#statistics canvas {
    margin-top: 1em;
}

.page-header-half-margin-top {
    margin-top: 1.5em;
}

/* redirection and next steps banners */
#redirect-banner, #survey-banner {
    font-weight: bold;
}

.alert-danger a, #redirect-banner a, #survey-banner a {
    color: white;
    font-weight: bold;
}

#next-steps a, #test-scores a, #sshobservatory-summary a {
    border-bottom: 1px dotted #4582ec;
    text-decoration: none;
}

#redirect-banner a, #survey-banner a {
    border-bottom: 2px dotted #ffffff;
    text-decoration: none;
}

/* chart sizes */
canvas {
    height: 400px;
}