/* ==================
HTML/BODY PAGE MARKUP
===================== */
html {
  /**
   * Description: 62.5% Gives text size of 10px, so in child elements 1.6em = 16px, 1.3 em = 13px etc.
  */
  font-size: 60%;
  font-smooth: always;
  webkit-font-smoothing: antialiased;
}

body {
  background-color: #D5D5D5;
  color: #444;
  font-family: 'HelveticaNeue', Arial, Helvetica, sans-serif;
  font-size: 1.4em;
  line-height: 1.5em;
}

/* ==============
REGULAR HTML TAGS
================= */
b,
  strong {
    font-weight: bold;
}

i {
  font-style: italic;
}

img {
  -ms-interpolation-mode: bicubic;
  max-width: 100%;
}

p {
  margin: 1em 0;
}

p.error {
  background: #f2dede;
  color: #b94a48;
  padding: .5em 1em;
  border: 1px solid #b94a48;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
}

p.success {
  background: #dff0d8;
  color: #468847;
  padding: .5em 1em;
  border: 1px solid #468847;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
}

small {
  font-size: .9em;
}

/* ========
LAYOUT ID'S
=========== */
#mainwrapper {
  background: #f7f7f7 url(../images/bg-notify.png) repeat 0 0;
  margin: 5em auto 0 auto;
  overflow: hidden;
  padding-bottom: 0px;
  position: relative;
  max-width: 768px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

#panel {
}

/* ====
CLASSES
======= */
.clearfix {
  clear: both;
}

.logopanel {
  background-color: #FFEA00;
  height: 50px;
  border-top-left-radius: 3px;
    -moz-border-top-left-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    -khtml-border-top-left-radius: 3px;
  border-top-right-radius: 3px;
    -moz-border-top-right-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -khtml-border-top-right-radius: 3px;
}
.logopanel h1 {
  font-family: 'Roboto', 'HelveticaNeue', Arial, sans-serif;
  font-size: 1.8em;
  line-height: 50px;
  margin-left: 10px;
  /*text-shadow: 1px 1px rgba(0,0,0,0.2);*/
  text-transform: uppercase;
}
.logopanel h1 a {
  color: #333;
  text-decoration: none;
}
.logopanel h1 a span {
  font-size: .5em;
  text-transform: lowercase;
}

.datewidget {
  background: #232323;
  border-right: 1px solid #1e1e1e;
  color: #999999;
  font-size: .8em;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.menuheader {
  border-bottom: 1px solid #bbb;
  height: 44px;
}
.menuheader h2 {
  font-family: 'Roboto', sans-serif;
  color: #aaa;
  font-size: .86em;
  font-weight: bold;
  letter-spacing: 0em;
  line-height: 44px;
  margin: 0 0 0 10px;
  text-transform: uppercase;
}

.leftmenu {
  border-bottom: 1px solid #efefef;
  border-top: 1px solid #f9f9f9;
}

.footer {
  background: #333;
  clear: both;
  color: #999;
  font-size: .8em;
  width: 100%;
}
.footer a {
  color: #bbb;
}
.footer span {
  margin: 0 10px;
}
.footer .footerleft {
  background: #222;
  border-right: 1px solid #3c3c3c;
  float: left;
  height: 5px;
  width: 100%;
}

/* ====
CONTENT
=======*/
#content {
  margin: 10px;
}
#content a,
 #content a:visited {
  color: #3b6998;
  font-size: .9em;
  font-weight: bold;
}
#content a:hover {
  color: #235688;
}
#content table {
  color: #555;
  width: 100%;
}
#content table th,
  #content table td {
    font-size: 1em;
    line-height: 200%;
    padding: 0 .5em;
    width: auto;
}
#content table th {
  font-weight: bold;
  text-align: left;
}
#content table tr.row-normal {
  background-color: #EEEEEE;
}
#content table tr.row-alternative {
  background-color: #F9F9F9;
}
#content table td {
  border-top: 1px solid #DDDDDD;
}
#content table td img {
  vertical-align: middle;
}

/* FORM
======= */
form dl {
  clear: both;
}

form dl span {
  color: #b94a48;
  font-size: .9em;
  font-style: normal;
}

form dl .radio-select span {
  line-height: 2em;
}

form dt {
  float: left;
  font-family: 'HelveticaNeue', Arial, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1em;
  margin: 5px 0 0 0;
  padding: 7px 0 0 0;
  text-align: right;
  width: 40%;
}

form dt label {
  padding-right: 10px;
}

form dd {
  float: left;
  width: 60%;
}

form dd.radio-select {
  margin-top: 5px;
}

form input {
  width: 140px;
}

form select {
  width: 150px;
  margin: 9px 0;
}

form input[type="text"],
  form input[type="number"],
  form input[type="password"],
  form input[type="submit"] {
    background-color: #ffffff;
    border: 1px solid #b9b9b9;
    color: #444;
    font-family: 'HelveticaNeue', Arial, Helvetica, sans-serif;
    font-size: 1em;
    margin: 6px 0;
    padding: 6px 4px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
  }

form input[disabled],
  form input[readonly] {
  background-color: #e5e5e5;
}

form input.button {
  background-color: #FFEA00;
  border: 1px solid #868A08;
  color: #333;
  font-size: .8em;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  width: auto;
}
/**
 * Media queries used for responsiveness
 */
@media screen and (max-width: 768px) {
  #mainwrapper {
    margin-top: 0;
  }
}