/* Glasgow Transplant main stylesheet
(c) 2017-2019 John Asher /  All rights reserved. */

@import url("https://use.typekit.com/gow7tsw.css");

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* *********************************************************************************************************************
   MAIN STYLESHEET
***********************************************************************************************************************/


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

.noCSS {
    display: none;
}

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

HEADER {
    display: block;
    max-width: 60em;
    background-color: #e6e1ff;
    margin: 0 auto 0 auto;
    padding: 0;
}

HEADER IMG {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: none;
}

NAV#mainMenu {
    display: block;
    max-width: 60em;
    margin: 0 auto 0 auto;
    padding: 0;
    background-color: #000;
    clear: both;
}

NAV#mainMenu UL {
    display: inline-block;
    list-style-type: none;
    margin: 0 2em;
    padding: 0;
}

NAV#mainMenu LI {
    display: inline-block;
    float: left;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    padding: 0.2em 0.5em;
}

NAV#mainMenu A {
    color: #fff;
    text-decoration: none;
    border-bottom: none;
}

NAV#main_nav A:hover {
    color: #ffff00;
}

MAIN {
    display: block;
    clear: both;
    max-width: 60em;
    border: solid black 2px;
    background-color: #ffffff;
    margin: 0 auto 0 auto;
    padding: 0 0 0.66em 0;
}

NAV.pagelinks {
    display: block;
    font-size: 0.8em;
    font-style: italic;
    margin: 1.33em auto 1.33em auto;
    text-align: center;
    clear: both;
}

FOOTER {
    display: block;
    clear: both;
    max-width: 60em;
    color: #fff;
    margin: 0 auto 0 auto;
    padding: 0 0 0.66em 0;
}

FOOTER P {
    font-size: 0.8em;
    color: #fff;
}

#form_container {
    margin-bottom: 20px;
}

/* general styles */

H1, H2, H3 {
    font-family: "lemonde-sans", georgia, garamond, "times new roman", serif;
    font-weight: bold;
    margin: 0.75em 1em;
}

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

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

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

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

.subtitle {
    font-size: 0.6em;
}

/* paragraphs */

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

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

P.sources {
    font-size: 0.8em;
    text-align: right;
    margin-top: 1.5em;
    margin-left: 30em;
}

/*BLOCKQUOTE {
    margin-left: 2em;
    margin-right: 1em;
    padding: 0.33em 0;
    border-left: 2px solid #0a001f;
    background-color: #ffc;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    overflow: hidden;
}*/

BLOCKQUOTE {
    margin-left: 2em;
    margin-right: 1em;
    background-color: #ffd;
    background: url(/graphics/parchment.jpg) top left repeat;
    padding: 0.13em 0.31em 0.13em 0.31em;
    border: none;
    border-radius: 0 7px;
    quotes: none;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    overflow: hidden;
}

P.example {
    margin-left: 3em;
    margin-right: 3em;
    padding: 1em;
    background-color: #efe;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    border: none;
    border-radius: 0 7px;
}

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;
}

#opnote P {
    margin: 1.2em;
}

EM, I {
    font-style: italic;
}

STRONG, B {
    font-weight: bold;
}

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

LI {
    list-style-type: disc;
    margin: 1.35em 2.7em;
}

#main_nav LI {
    margin: 5px;
}

#opnote LI {
    font-size: 1em;
    margin: 0;
    list-style-type: none;
}

#opnote LI:before {
    content: "- ";
}

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;
}

SPAN.linkdata {
    font-size: 0.75em;
    font-style: italic;
}

/* menu styles */


UL.menu {
    display: block;
    list-style: 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 LI {
    list-style-type: none;
}

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;
}

UL.menu SPAN.testing {
    font-size: 0.8em;
    color: #777;
}


/* table styles */

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

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

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

TABLE TH {
    font-size: 1.05em;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
    padding: 0.5em;
    white-space: nowrap;
}

TABLE TR TD {
    text-align: left;
    vertical-align: middle;
    padding: 0.5em;
    white-space: nowrap;
}

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

TABLE IMG {
    margin: 0;
}

DIV.calc_results {
    display: block;
    max-width: 55em;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
}

DIV.calc_results TABLE {
    margin: 1em auto 1em auto;
    width: 90%;
}

DIV.calc_results TH {
    color: #fff;
    font-weight: bold;
    text-align: left;
    line-height: 1.6em;
    padding: 10px;
    background: #1f92e5;
    background-image: linear-gradient(#1f92e5, #025797);
}

DIV.calc_results TH SPAN.unit {
    font-size: 0.8em;
}

DIV.calc_results TD {
    padding: 10px;
}


/* 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: #cc0000;*/
    /*background-image: linear-gradient(#cc3300, #800000);*/
    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: 18em;
    margin: 0.6em 1em 0.6em 1em;
    font-family: inherit;
}

SPAN.result {
    font-weight: bold;
}

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

DIV.two_units {
    margin-left: 17.5em;
}

DIV.two_units INPUT {
    margin: 0.6em 0em;
}

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

SECTION.output DIV, SECTION.output P {
    display: block;
    clear: both;
}

LABEL {
    float: left;
    margin: 0.6em 0.5em;
    text-align: right;
}

LABEL.subsidiary {
    display: none;
}

LABEL.subunit {
    float: left;
    width: 3.5em;
    margin: 0.6em 0.3em;
    text-align: left;
}

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: #ffffd0;
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

INPUT.medium, SELECT.medium {
    width: 12em;
}

INPUT.short, SELECT.short {
    width: 6em;
}

SELECT.long {
    width: 25em;
}

SPAN.post_label {
    display: block;
    float: left;
    margin: 0.6em 0em;
}

SPAN.para_title {
    font-weight: bold;
}

#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;
}

.null {
    display: none;
}

/* image styles */

FIGURE {
    display: block;
    max-width: 80%;
    margin: 1.75em auto 1.75em auto;
}

FIGURE IMG {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

FIGCAPTION {
    font-size: 0.8em;
    font-style: italic;
    text-align: center;
}

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

IMG.photo {
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.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 */

SPAN.formula {
    display: block;
    margin: 1em auto 1em auto;
    text-align: center;
    font-style: italic;
    font-size: 0.85em;
}

SPAN.reference {
    display: block;
    margin: 1em 1.33em;
    text-align: left;
    font-size: 0.85em;
}

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 TH {
    padding: 8px
}

table#matchrun TD {
    padding: 8px;
}

SUP, SUB {
    font-size: 0.6em;
}

@media screen and (min-width: 801px) {
    .slicknav_menu {
        display:none;
    }
}


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

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

    NAV#mainMenu {
        display: none;
    }

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

    P.sources {
        margin-left: 6em;
    }

    IMG {
        max-width: 95%;
        height: auto;
    }

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

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

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

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

    SELECT.short {
        clear: none;
    }

    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;
    }

    DIV.two_units {
        margin-left: 2em;
    }

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

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

    .bar_chart {
        overflow: scroll;
    }

    .slicknav_btn {
        position: absolute;
        display: block;
        vertical-align: middle;
        float: right;
        right: 0;
        padding: 0.2em 0.625em 0.2em 0.625em;
        border: none;
        line-height: 1.125em;
        cursor: pointer;
        z-index: 1000;}

    .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
        margin-top: 0.188em; }

    .slicknav_menu {
        display: block;
    }

    .slicknav_menu .slicknav_menutxt {
        display: block;
        line-height: 1.188em;
        float: left; }

    .slicknav_menu .slicknav_icon {
        float: left;
        margin: 0.188em 0 0 0.438em; }

    .slicknav_menu .slicknav_no-text {
        margin: 0; }

    .slicknav_menu .slicknav_icon-bar {
        display: block;
        width: 1.125em;
        height: 0.125em;
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
        -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }

    .slicknav_menu:before {
        content: " ";
        display: table; }

    .slicknav_menu:after {
        content: " ";
        display: table;
        clear: both; }

    .slicknav_nav {
        clear: both;
    }

    .slicknav_nav ul {
        display: block;
        background-color: #11115c;
    }

    .slicknav_nav li {
        display: block; }

    .slicknav_nav .slicknav_arrow {
        font-size: 0.8em;
        margin: 0 0 0 0.4em; }

    .slicknav_nav .slicknav_item {
        cursor: pointer; }

    .slicknav_nav .slicknav_item a {
        display: inline; }

    .slicknav_nav .slicknav_row {
        display: block; }

    .slicknav_nav a {
        display: block;
        background-color: #11115c;
        border-bottom: none;
        z-index: 1000;}

    .slicknav_nav .slicknav_parent-link a {
        display: inline; }

    .slicknav_brand {
        float: left; }

    .slicknav_menu {
        font-size: 16px;
        box-sizing: border-box;
        background-color: #11115c;
        padding: 0 5px; }

    .slicknav_menu * {
        box-sizing: border-box; }

    .slicknav_menu .slicknav_menutxt {
        color: #fff;
        font-weight: bold;
        text-shadow: 0 1px 3px #000; }

    .slicknav_menu .slicknav_icon-bar {
        background-color: #fff; }

    .slicknav_btn {
        margin: 5px;
        text-decoration: none;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        background-image: linear-gradient(#00003c,#00004c); }

    .slicknav_nav {
        color: #fff;
        margin: 0;
        padding: 0;
        font-size: 0.875em;
        list-style: none;
        overflow: hidden; }

    .slicknav_nav ul {
        list-style: none;
        overflow: hidden;
        background-color: #11115c;
        padding: 0;
        margin: 0 0 0 20px; }

    .slicknav_nav .slicknav_row {
        background-color: #11115c;
        padding: 5px 10px;
        margin: 2px 5px; }

    .slicknav_nav .slicknav_row:hover {
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        background: #fec;
        color: #fff; }

    .slicknav_nav a {
        padding: 5px 10px;
        margin: 2px 5px;
        text-decoration: none;
        color: #fff; }

    .slicknav_nav a:hover {
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        background: #fec;
        color: #222; }

    .slicknav_nav .slicknav_txtnode {
        margin-left: 15px; }

    .slicknav_nav .slicknav_item a {
        padding: 0;
        margin: 0; }

    .slicknav_nav .slicknav_parent-link a {
        padding: 0;
        margin: 0; }

    .slicknav_brand {
        color: #fff;
        font-size: 16px;
        line-height: 30px;
        padding: 7px 12px;
        height: 44px; }

}

@media screen and (max-width: 500px) {
    IMG.imgright, IMG.imgleft {
        display: block;
        float: none;
        clear: both;
        margin-left: auto;
        margin-right: auto;
    }
}