/*START general styles*/
html, body, header, div {margin:0;padding:0;border:0;font-size:100%;line-height:1.5em}
body {text-rendering: optimizeLegibility;font-family: 'Quattrocento Sans',Candara,'Gill Sans',Optima,Helvetica,sans-serif}
p, div {margin-bottom:24px}
h1, h2, h3 {font-weight: 400;font-family: 'Montserrat','Segoe UI','Century Gothic',Verdana,sans-serif;color: #222;margin:0 0 24px 0}
h1 {font-size:36px;line-height:1.5em}
h2 {font-size:21px}

a {color:#0754cc;text-decoration:none}
p a, h2.link-heading a {border-bottom:1px solid #0754cc}
/*END general styles*/

/*START header*/
header {background:#FFF;margin:0;padding:0;}

#error {color:#cc0033;font-weight:700;padding:20px;border:1px solid #222;border-width:1px 0}
#logo {width: 246px; float: left;margin-bottom:0;}
#sitename {
  color: #000;
  font-size: 2.6em;
  display: block;
  float: left;
  padding: 12px 0 0 3rem;
}
#banner {border-bottom: 6px solid #CC0033;min-height: 95px;}
#rul-logo {max-width: 260px;}
/*END header*/

/*START content*/
main {clear: both;}
#content {margin:0 10px;min-height: 30em;}
#barcode-password-login input {font-size:1em;padding:5px;border:1px solid #222}
#barcode-password-login button {background: #36404e;border-color: #1859B7;text-shadow: 0 1px 1px #001B38;color: #FFF;width: 7em;height: 2.5em;position: relative;font-size: 16px;border-radius:5px}
.note {height:11em;}
#helpIcon {width: 50px;margin-right:20px;float:left;}
#helpText {float:left;margin-top:-1em;}
label {font-weight:700;}
/*END content*/

/*START footer*/
footer {background:#28313E}
#footer-content {margin:0 10px 0 10px;padding:5px 0;color:#fff;font-size:0.75em;line-height:1.5em}
#footer-content a {color:#fff;border-bottom:1px solid #fff}
#accessibility-info {vertical-align: top;}
#copyright-notice {margin:0}
#accessibilityIcon {width: 22px;margin-left: 8px;}
/*END footer*/

/* START CSS for Desktops via media query*/
@media only screen and (min-width : 992px) {
  #banner {margin:0 auto 24px auto;height:95px;border-bottom: 6px solid #CC0033;}
  #bannerInner {width:940px;margin: 0 auto 24px auto;}
  #content, .alert, #footer-content {width:940px;margin:0 auto;overflow:auto}
  .login-form {width:400px;margin:0 10px 0 0;float:left}
  .note {margin:2em 0 0 10px;float:left}
  #copyright-notice {float:right}
}
  #contentLocal, #footer-content {width:940px;margin:0 auto;overflow:auto}
/* END CSS for Desktops via media query*/


/* START CSS for tablet via media query*/
@media only screen and (max-width : 992px) {
  #logo {padding-left: 1em;}
  #footer-content {width:100%;padding:0;}
  #footer-content p {padding:0 1em 0 1em;}
}

/* START CSS for phone via media query*/
@media only screen and (max-width:740px) {
  header {background: #fff;min-height:83px;}
  #banner {width: 100%;height: 169px;  margin: 0;border-bottom: 6px solid #CC0033;min-height: 105px;}
  #logo {width: 178px;  padding-top: 15px;float: left;padding-left:20px;margin-bottom: .3rem;}
  #sitename {
    color: #000;
    font-size: 1.5em;
    display: block;
    float: left;
    padding: 0rem 0 0 3rem;
  }
  #mainwrapper {margin-top:1.5em;}
 .topBlock {width:100%;float:left;padding:1em;}
 .block {min-width:48%;float:left;text-align:center;min-height: 12em;padding:1em;}
  h2, .mediaWrapper {padding-left:0em;}
  #footer-content {padding:0 1rem 0 1rem;}
  #helpIcon {width:25%;}
  #helpIcon img {width: 4rem;}
  #helpText {width: 69%;}
  #content, .alert {min-height: 20em;}
  #content p {padding-right: .5em;}
  #footer-content {width:100%;padding:0;}
  #footer-content p {padding:0 1em 0 1em;}
} /* end CSS for phone via media query*/


/*  CSS for alerts */

.alert {
  margin-bottom: 1rem;
}

.alert div {
  display: flex;
  padding: .3rem 1rem .3rem 1rem;
  margin:0;
}

.alert p {margin:initial;padding:0 1rem 0 1rem;font-weight:700;}

.alert.normal {
    --tw-bg-opacity: 1;
    background-color: rgba(235, 182, 0, var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgba(0, 0, 0, var(--tw-text-opacity))
}

.alert.minor {
    --tw-bg-opacity: 1;
    background-color: rgba(95, 106, 114, var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity))
}

.alert.resolved {
    --tw-bg-opacity: 1;
    background-color: rgba(0, 98, 109, var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity))
}

.alert.in-text.bookmark * {
    font-family: PT Serif, serif
}

.alert.in-text.info * {
    font-family: Source Sans Pro, sans-serif;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity))
}


.alert.normal a {
    --tw-text-opacity: 1;
    color: rgba(0, 0, 0, var(--tw-text-opacity));
    border-bottom: 1px solid #000;
}

.alert.minor a {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
    border-bottom: 1px solid #FFF;
}

.alert.resolved a {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
    border-bottom: 1px solid #FFF !important;
}

.alert a {
    -webkit-text-decoration-color: inherit;
            text-decoration-color: inherit
}



.alert.tangential {
    --tw-bg-opacity: 1;
    background-color: #FFF;
    --tw-text-opacity: 1;
    color: #000;
    Border:1px solid #000;
}
.alert.tangential img {height:2rem;padding-top: 5px;margin-left:-2px}
.alert.tangential a {
    --tw-text-opacity: 1;
    color: rgba(0,98,109,var(--tw-text-opacity));
}