/*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, #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 {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*/