/* NHSBT eForms stylesheet
(c) 2015 John Asher / NHS Blood & Transplant. All rights reserved. */

* {
    margin: 0;
    padding: 0;
}

BODY {
    background-color: #333;
    border: 0;
    margin: 0;
    font-family: proxima-nova, verdana, arial, helvetica, sans-serif;
}

.noCSS {
    display: none;
}

#container {
    max-width: 60em;
    border: solid black 2px;
    background-color: #ffffff;
    margin: 0 auto 0 auto;
    padding: 0 0 0.66em 0;
}

#topbar {
    display: block;
    background: #1f92e5;
    background-image: linear-gradient(#1f92e5, #025797);
    width: 100%;
    height: 75px;
}

#main {
    border: none;
    background-color: #ffffff;
    padding: 0.33em 0.33em 0.66em 0.33em;
}

#page_content {
    margin-left: 4em;
}

#footer {
    display: block;
    background-color: #fff;
    padding: 0.66em 0.66em 1.33em 0.66em;
}

/* general styles */

H1, H2, H3 {
    font-weight: bold;
    margin: 0.5em 1.33em 1.33em 1.33em;
}

H1 {
    font-size: 2.0em;
    color: #002;
    text-align: left;
}

H2 {
    font-size: 1.4em;
    color: #000;
    text-align: left;
    margin: 0;
}

H1 SPAN, H2 SPAN {
    font-size: 0.6em;
}

H3 {
    font-size: 1.2em;
    font-weight: bold;
    font-style: italic;
    color: #002;
    text-align: left;
}

.subtitle {
    font-size: 0.6em;
}

/* paragraphs */

P {
    font-size: 1em;
    line-height: 1.35em;
    color: #002;
    text-align: justify;
    text-indent: 0;
    margin: 0.33em 1em 0.33em 1em;
}

P.footer {
    font-size: 0.7em;
    text-align: left;
    text-indent: 0;
    margin: 10px 10px 20px 10px;
    padding: 0 0 5px 0;
}

P.pilot {
    display: block;
    clear: both;
    width: 90%;
    min-height: 50px;
    box-sizing: border-box;
    font-size: 0.8em;
    border: 1px black solid;
    margin: 10px auto 10px auto;
    padding: 10px 20px 10px 20px;
    background-color: #ffffcc;
}

P.pilot::before {
    content: url('/graphics/under_construction32.png');
    display: block;
    float: left;
    margin: 0 10px 0 0;
}

EM, I {
    font-style: italic;
}

STRONG, B {
    font-weight: bold;
}

UL, OL, DL {
    font-size: 0.9em;
    line-height: 1.5em;
    color: #002;
    text-align: left;
    text-indent: 0;
    margin: 20px 20px 20px 45px;
    padding: 0;
}

LI {
    margin: 20px 10px 20px 10px;
}

SPAN.tickbox {
    border: solid black 1px;
    padding: 20px 20px 20px 20px;
}

/* links */

A:link {
    color: #002299;
    text-decoration: none;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #cccccc;
}

A:visited {
    color: #457cb2;
    text-decoration: none;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #cccccc;
}

A:hover, A:focus {
    color: #cc0000;
    text-decoration: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #cc0000;
}

/* menu styles */

NAV {
    display: block;
    float: left;
    margin: 0px 0px 0px 0px;
}

NAV UL LI {
    display: block;
    border: 1px solid #000;
    width: 10em;
    padding: 5px;
    background: #1f92e5;
    background-image: linear-gradient(#1f92e5, #025797);
    color: #ffc;
    font-weight: bold;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
}

NAV UL LI A:link, NAV UL LI A:hover, NAV UL LI A:visited {
    text-decoration: none;
    color: #ffc;
    border: none;
}

UL.menu {
    display: block;
    list-style-type: none;
    margin-top: 45px;
    margin-left: auto;
    margin-right: auto;
    max-width: 40em;
}

UL.menu A {
    display: block;
    margin: 20px 10px 20px 10px;
    padding: 10px;
    border: solid black 1px;
    text-decoration: none;
    font-size: 1.2em;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
}

UL.menu A SPAN {
    font-size: 0.75em;
}

UL.menu A:link, UL.menu A:visited {
    color: #000;
    background-color: #fff;
}

UL.menu A:hover, UL.menu A:focus {
    color: #00b;
    background-color: #ff6;
}

UL.menu SPAN.active {
    font-weight: bold;
    color: #0d8;
}

UL.menu SPAN.inactive {
    font-weight: bold;
    color: #d00;
}

UL.menu SPAN.expires {
    float: right;
    text-align: right;
    color: #f00;
    font-weight: bold;
}

/* table styles */

DIV.table {
    display: block;
    max-width: 55em;
    max-height: 30em;
    margin-left: auto;
    margin-right: auto;
    overflow: scroll;
}

TABLE {
    display: table;
    margin: 1.25em;
}

TABLE TR {
    display: table-row;
    padding: 0.2em;
}

TABLE TH {
    font-size: 1.05em;
    text-align: left;
    padding: 0.15em 0.3em;
    white-space: nowrap;
}

TABLE TR TD {
    text-align: left;
    padding: 0.15em 0.3em;
    white-space: nowrap;
}

TABLE TR:nth-child(even) {
    background-color: #eee;
}



/* form styles */

FORM FIELDSET {
    display: block;
    clear: both;
    width: 95%;
    box-sizing: border-box;
    border: 1px solid black;
    margin: 10px auto 10px auto;
    padding: 10px 20px 10px 20px;
}

FIELDSET LEGEND {
    font-size: 1.4em;
    color: #fff;
    font-weight: bold;
    padding: 10px 10px 10px 30px;
    margin: 0 -21px 0 -21px;
    width: 100%;
    display: block;
    background: #1f92e5;
    background-image: linear-gradient(#1f92e5, #025797);
    border: 1px solid transparent;
}

FIELDSET > DIV, FIELDSET > P {
    display: block;
    clear: both;
}

DIV.twocol-left, DIV.twocol-right {
    display: block;
    float: left;
    margin: 0.6em 1em 0.6em 1em;
}

DIV.twocol-left {
    width: 15em;
}

H4.columnHead, SPAN.columnHead {
    display: block;
    width: 12.5em;
    float: left;
    margin: 0.6em 1em 0.6em 1em;
    font-size: 1em;
    font-weight: bold;
}

SPAN.columnHead {
    width: 15em;
}

LABEL, INPUT, SELECT, TEXTAREA, SPAN.criterion, SPAN.result {
    display: block;
    float: left;
    width: 17.5em;
    margin: 0.6em 1em 0.6em 1em;
}

#kidney_fields INPUT, #kidney_fields SELECT, #kidney_fields SPAN.result {
    width: 12.5em;
}

SPAN.result {
    font-weight: bold;
}

LABEL, SPAN.criterion {
    text-align: right;
    width: 15em;
}

LABEL.secondGen {
    text-indent: 20px;
    color: #007;
}

LABEL.thirdGen {
    text-indent: 40px;
    color: #009;
    font-style: italic;
}

LABEL.organtag {
    width: 10em;
}

FIELDSET.organtag INPUT {
width: 5em;
}

INPUT, TEXTAREA {
    border-radius: 3px;
    border: 1px solid #DDDDDD;
    text-align: left;
    text-indent: 0;
    padding: 3px 0px 3px 3px;
}

INPUT:required, TEXTAREA:required {
    border: 1px #a00 solid;
}

INPUT:focus, TEXTAREA:focus {
    background: #ffa;
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

.kidneySide, .lungSide {
    display: none;
}

.organtag INPUT {
    border: none;
}

DIV.subheader {
    display: block;
    text-align: left;
    font-weight: bold;
    font-style: italic;
    font-size: 1.0em;
    margin: 2em 0 0 3em;
}

DIV.secondGen {
    font-style: italic;
}

#submitform, #smallsubmitform {
    cursor: pointer;
    padding: 5px 25px;
    background: #1f92e5;
    background-image: linear-gradient(#1f92e5, #025797);
    border: 1px solid #33842a;
    border-radius: 10px;
    box-shadow: 0 0 4px rgba(0, 0, 0, .75);
    color: #f3f3f3;
    font-size: 1.0em;
}

#smallsubmitform {
    padding: 0.25em 0.5em;
    font-size: 0.85em;
    width: 2.5em;
}

#submitform:hover, #submitform:focus, #smallsubmitform:hover, #smallsubmitform:focus {
    background-color: #cc0a0a; /*make the background a little darker*/
    box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}

#cancelform {
    cursor: pointer;
    padding: 5px 25px;
    background: #656565;
    background-image: linear-gradient(#656565,#454545);
    border: 1px solid #33842a;
    border-radius: 10px;
    box-shadow: 0 0 4px rgba(0, 0, 0, .75);
    color: #f3f3f3;
    font-size: 1.0em;
}

#cancelform:hover, #cancelform:focus {
    background-color: #cc0a0a; /*make the background a little darker*/
    box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}

.hideonload {
    font-style: italic;
}

#tabs {
    width: 90%;
    margin: 2em auto 2em auto;
}

.bar_chart {
    display: block;
    width:600px;
    height:300px;
    margin: 2em auto 2em auto;
}

/* image styles */

IMG {
    margin: 1.25em;
    border: none;
}

.imgleft {
    display: block;
    margin: 10px 20px 10px 20px;
    float: left;
    clear: left;
}

.imgright {
    display: block;
    margin: 10px 20px 10px 20px;
    float: right;
    clear: right;
}

/* miscellaneous */

SMALL {
    font-size: 0.7em;
}

.inset {
    text-indent: 5px;
}

.clearboth {
    clear: both;
}

FORM TABLE TR {
    display: table-row;
    padding: 0.2em 0 0.2em 0;
}

FORM TABLE TH {
    font-size: 1.05em;
    text-decoration: underline;
    text-align: center;
    padding: 0.2em 0 1.2em 0;
}

FORM TABLE TR TD {
    text-align: center;
}

FORM TABLE TR TD:first-child {
    text-align: right;
}

FORM TABLE TR TD[colspan='3'] {
    text-align: center;
    font-size: 1.05em;
    font-weight: bold;
    background: #f6f6f6;
    padding: 0.5em 0 0.5em 0;
}

FORM TABLE TR TD:nth-child(even) {
    font-weight: bold;
}

FORM TABLE#offers TR TD, FORM TABLE#offers TR TH {
    text-align: left;
    padding-right: 20px;
}

.fl {
    float: left;
}

DIV.pagelinks {
    display: block;
    width: 25%;
    margin: 2em auto 2em auto;
    padding: 0;
}

DIV.pagelinks A {
    display: inline;
    text-align: center;
}

TABLE#matchrun {
    font-size: 0.85em;
}

TABLE#matchrun TH {
    padding: 8px
}

table#matchrun TD {
    padding: 8px;
}

@media screen and (max-width: 768px) {

    #container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
    }

    H4.columnHead, SPAN.columnHead {
        display: none;
    }

    .kidneySide {
        display: inline;
    }

    FIELDSET {
        width: 90%;
        padding: 0;
    }

    FIELDSET DIV {
        display: block;
        clear: both;
        margin: 0;
        padding: 0.5em;
    }

    DIV.table {
        max-width: 95%;
        overflow: scroll;
    }

    FIELDSET DIV.table TABLE {
        max-width: 95%;
    }

    #donor_details FIELDSET DIV {
        display: block;
        clear: both;
        margin: 0;
        padding: 0.5em 0 0.5em 0;
    }

    LABEL, INPUT, SELECT, #kidney_fields INPUT, #kidney_fields SELECT, SPAN.criterion, SPAN.result, SPAN.kidneySide  {
        display: block;
        float: left;
        clear: both;
        text-align: left;
        width: auto;
        margin: 0 0.3em 0 0.3em;
    }

    SPAN.criterion > SPAN {
        display: inline;
        float: none;
        margin: 0;
    }

    SPAN.result {
        margin-bottom: 0.3em;
    }

    SPAN.colleft, SPAN.colright, DIV.twocol-left, DIV.twocol-right {
        display: block;
        clear: both;
    }

    DIV.twocol-left STRONG, DIV.twocol-right STRONG {
        display: block;
        clear: both;
        margin: 0;
        padding: 0;
    }

    .organtag LABEL, .organtag INPUT {
        display: block;
        border: none;
    }

    #submitform, #cancelform {
        margin: 0.3em;
    }

    .bar_chart {
        overflow: scroll;
    }

    NAV {
        display: block;
        float: none;
        clear: both;
        margin: 0px 0px 20px 0px;
    }

    NAV UL LI {
        display: block;
        float: left;
        clear: none;
        margin: 5px;
    }

    NAV UL LI A:link, NAV UL LI A:hover, NAV UL LI A:visited {
        text-decoration: none;
        color: #ffc;
        border: none;
    }

    #page_content {
        margin: 0.3em;
        clear: both;
    }

}