* {
  font-family: Quicksand !important;
}

.no-wrap {
 white-space: nowrap;
}

.ui-hidden-accessible {
  display: none;
}

.bottom-row {
 vertical-align: top;
 border-bottom: 1px solid silver;
 font-weight: normal;
}


h1, h2, h3, h4, h5 {
  color: #000000;
  font-weight: 700;
  margin: 0 0 10px 0;
}

h2 {
  border-left: 2px solid #329131;
  padding-left: 10px;
}
h3 {
 padding-top: 10px;
}

a {
  color: #00a952;
  text-decoration: none;
}

a:hover {
 color: #3778BA;
 text-decoration: underline;
}

.right {
 text-align: right;
}

.center {
  text-align: center;
}

th {
 background-color: #c0c0c0;
 text-align: center;
 padding: 2px 4px; 
}

.bold {
 font-weight: bold;
}

.normal {
 font-weight: normal;
}
.smaller {
 font-size: 90%;
}

.file-count {
  font-weight: normal;
  font-size: 50%;
  opacity: .5;
}

#release_notes {
  padding: 20px 0;
}

#main-loader {
 position: absolute;
 right: 56px;
 top: 6px; 
}

#main-cover {
  opacity: 0.5;
  background: #000000;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: 6;
}

body {
  margin: 0;
  padding: 0;
  overflow-y: scroll;
}

#bottom_padding {
  height: 100px;
}

#header {
  margin: 0px;
}

.help-text {
  padding: 10px 50px;
  color: slategrey;
}


#menu {
  background-color: #00A952 ;
  height: auto;
  position: relative;
  top: 0;
  height: 9em;
  z-index: 3;
}

#menu-cover {
  opacity: 0.5;
  background: #000000;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: 5;
}

#menu-buttons {
  position: absolute;
  top: 0;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  color: white;
  z-index: 4;
}

#menu-hamburger {
  position: absolute;
  top: 10px;
  right: 10px;
  display: block;
  cursor: pointer;
}

#email-icon {
  position: absolute;
  top: 10px;
  right: 35px;
}

.menu_button {
  padding: 0px 5px;
  display: inline-block;
  height: 25px;
  border-top: 4px solid transparent;
  cursor: pointer;
  font-size: 85%;
}

.menu_button_active {
  border-top: 4px solid #d6ebf9;
  background-color: #0b8737;
}

.menu_button:hover {
  background-color: #007d2b;
  border-top: 4px solid #d6ebf9;
  color: #d6ebf9;
}

.menu_button_active {
  border-top: 4px solid #d6ebf9;
}

.file_button {
  display: block;
  padding: 10px;
  margin: 3px;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  background-color: #d36633;
}

.file_button:hover {
  color: #fcf2ee;
  text-decoration: none;
  background-color: #db8239;
}

.file_not_button {
  display: block;
  padding: 10px;
  margin: 3px;
  color: slategrey;
  font-weight: bold;
  border-radius: 5px;
  background-color: #c0c0c0;
}

.file_not_button:hover {
  color: slategrey;
  text-decoration: none;
  background-color: #d2d2d2;
}

.file_type_video {
  background-color: #8DA1D1;
  padding: 1px 10px;
}

.file_type_video:hover {
  background-color: #9FB1DD;
}

.file_type_doc {
  background-color: #90BAA4;
  padding: 1px 10px;
}

.file_type_doc:hover {
  background-color: #A9CDBA;
}

.file_type_data {
  background-color: #B0A7C2;
  padding: 1px 10px;
}

.file_type_data:hover {
  background-color: #B8B1C8;
}

.file_link {
  font-weight: bold;
}

#home-logo {
  width: 75%;
}

#main_content{
  padding: 10px 10px 55px 10px;
  z-index: 1;
  margin: 0 auto;
}

#footer {
  background-color: #014386;
  color: #ffffff;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 3px;
  font-size: 60%;
}

.textContainer {
  padding: 10px 0;
}

label {
  color: #4c4c4c;
  font-weight: 700;
  display: block;
  padding: 10px 0 5px 0;
}
.input-field {
  width: 100%;
  height: 2em;
  padding: 2px  5px;
  border: 1px solid #d2d2d2;
  color: black;
}

.form-button {
  width: 100%;
  height: 2em;
  border: 1px solid slategrey;
  border-radius: 5px;
  margin-top: 10px;
}

.msg-area {
  position: fixed;
  top: -6px;
  right: 40px;
  background: wheat;
  border-radius: 5px;
  border: 2px solid maroon;
  color: maroon;
  z-index: 3;
  font-size: 75%;
  padding: 2px 5px;
}


.system-down {
  padding: 10px; 
  margin-top: 20px; 
  font-size:150%; 
  background: wheat; 
  color: maroon; 
  font-weight:bold;
}

/* 30em * 16 = 480px */
@media (min-width: 25em) {

  #header {
    margin: 0px;
  }
  #menu {
    height: 35px;
    display: block;
  }
  .menu_button {
    padding: 0px 5px;
   line-height: 2em;
   height: 31px;
   font-size: 85%;
  }
  #home-logo {
   width: 75%;
  }
  #menu-hamburger {
    display: none;
  }
  #email-icon {
    right: 10px;
  }
  .msg-area {
    font-size: 85%;
    padding: 2px 10px;
  }
}

/* 36em * 16 = 575px */
@media (min-width: 36em) {

  #header {
    margin: 10px 5px 10px 5px;
  }
  #menu {
    height: 55px;
    display: block;
  }
  .menu_button {
    padding: 0px 15px;
    line-height: 3em;
    height: 51px;
    font-size: 100%;
  }
  #home-logo {
    width: auto;
  }
  #main_content {
   width: 500px;
  }

  .input-field {
    font-size: 110%;
  }
  .form-button {
    font-size: 110%;
  }    
  #footer {
    font-size: 60%;
  }
  .msg-area {
    font-size: 110%;
    padding: 5px 15px;
  }
}

/* 50em * 16 - 800px */
@media (min-width: 50em){

  #header {
    margin: 20px 10px 20px 10px;
  }
  #menu {
    height: 65px;
  }
  .menu_button {
    padding: 0px 30px;
    line-height: 4em;
    height: 61px;
  }
  #main_content {
   width: 600px;
  }
  #footer {
    font-size: 70%;
  }
  .msg-area {
    font-size: 120%;
    padding: 10px 20px;
  }
}

/* 60em * 16 - 960px */
@media (min-width: 60em){
  #main_content {
   width: 700px;
  }
  #footer {
    font-size: 85%;
  }
}

/* 70em * 16 - 1120px */
@media (min-width: 70em){
  #main_content {
   width: 800px;
  }
}

/* 80em * 16 - 1280px */
@media (min-width: 80em){
  #footer {
    font-size: 95%;
  }
}