* {margin:0;padding:0;}
html {-webkit-text-size-adjust: 100%;}
body {
    font-family:'Open Sans',sans-serif;
    background:linear-gradient(0deg, #DDDDDD 0%, #FFFFFF 100%);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    min-height:calc(100vh - 30px);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* COMMON HEADER */
header {text-align:center;margin:30px 0 15px 0;}
header h1 {display:none;}
header img {width:100%;max-width:260px;}

/* HEADINGS */
h2 {color:#002856;font-weight:700;text-align:center;text-transform:uppercase;font-size:22pt;}

/* SECTION BOX */
section {background-color:#FFFFFF;border:1px #FFFFFF solid;border-radius:10px;max-width:min(1000px, 90%);margin:20px auto;filter: drop-shadow(3px 3px 0.85rem #cccccc);padding:10px;position:relative;}

/* FROM ELEMENTS */
input[type="text"] {border:0;font-size:18pt;border-bottom:1px #000000 solid;padding:10px;}
input:focus {outline:none;}
input[type="submit"] {background-color:#a0e311;color:#27214d;border:0;padding: 15px 25px;border-radius:40px;font-size:16pt;font-weight:400;margin:0 15px;cursor:pointer;outline:inherit;}
input[type="submit"]:hover {background-color:#88c10e;}

/* LINK BUTTONS */
div.btn-row {text-align:center;padding:20px;}
a.btn {padding: 10px 18px;border-radius:40px;font-size:14pt;font-weight:400;margin:0 15px;cursor:pointer;text-decoration:none;}
a.btn.green {background-color:#a0e311;color:#27214d;}
a.btn.green:hover {background-color:#88c10e;}
a.btn.blue {background-color:#006aae;color:#ffffff;}
a.btn.blue:hover {background-color:#005a94;}

/* SEARCH FROM */
form.search div {max-width:900px;margin:10px auto;padding:6px;}
form.search input[type="text"] {width:calc(100% - 180px);}
form.search input[type="submit"] {float:right;}
@media screen and (max-width: 500px) {
    form.search div {text-align:center;}
    form.search input[type="text"] {width:calc(100% - 20px);margin:8px 0;}
    form.search input[type="submit"] {width:100%;margin:8px 0;float:none;}
}

/* SELECT FORMS */
section.select div.address-row {max-width:900px;margin:2px auto;padding:20px 0;border-bottom:1px #cccccc solid;display: flex;flex-direction: row;align-items: center;justify-content:space-between}
section.select div:last-child {border-bottom:0;}

/* CLASS CODE */
span.classcode, span.inactive, span.active, span.nbnuse {font-weight:600;display:inline-block;padding:3px 12px;border-radius:30px;color:#FFFFFF;margin-right:1em;}
span.classcode1, span.inactive {background-color:#B81D13;}
span.classcode2 {background-color:#EFB700;}
span.classcode3, span.active {background-color:#00af42;}
span.classdesc {float:right;width:calc(100% - 4em);}
span.nbnuse {background-color:#006aae;}

/* DETAIL PAGE */
div.details {max-width:900px;margin:3px auto;padding:6px;}
div.row-field {display:inline-block;}
div.detail-row, div.pair-row {clear:both;margin:10px 0;}
div.detail-row span.heading {font-weight:700;min-width:250px;display:inline-block;}
div.detail-row span.field {display:inline-block;width:calc(100% - 260px);float:right;}
div.pair-row span.heading {font-weight:700;}
div.pair-row span.field {margin-right:1.5em;}
div.pair-row span.classid {margin-left:8px;z-index:20;}
div.pair-row span.classid span.classdesc {display:none;position:absolute;float:none;background-color:#666666;color:#FFFFFF;max-width:50%;padding:4px 8px;border-radius:5px;font-size:0.8em;}
div.pair-row span.classid:hover span.classdesc {display:block;}

@media screen and (max-width: 500px) {
    div.detail-row span.heading {display:block;min-width:auto;}
    div.detail-row span.field {display:block;float:none;width:auto;}
    div.row-field {display:block;margin:3px 0;}
    span.classcode, span.inactive, span.active, span.nbnuse {padding:3px 10px;margin-right:0.5em;}
    div.pair-row span.classid span.classdesc {max-width:85%;}
}

footer {height:30px;}