@charset "UTF-8";
HTML {
  height: 100%;
}
BODY {
  max-width: 1200px;
  margin: 0 auto;
  background: #122847;
  background: -webkit-linear-gradient(top, #122847 0%, #395A84 100%);
  background: linear-gradient(to bottom, #122847 0%, #395A84 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#122847', endColorstr='#395a84', GradientType=0);
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5vw;
}
H1 {
  padding: 0;
  margin: 10px 0;
  color: #E4E4E4;
  letter-spacing: 0.4vw;
  font-size: 200%;
}
H2 {
  padding: 0 0 20px;
  margin: 0;
  color: #000;
  font-size: 150%;
}
H3 {
  padding: 0;
  margin: 0;
  color: #000;
  text-align: center;
  font-size: 120%;
}
H4 {
  padding: 0;
  margin: 0;
  color: #000;
  text-align: center;
  padding: 0 0 20px;
  font-size: 110%;
}
#wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  border: #FFF solid 3px;
  margin: 20px auto;
  width: 96%;
  background: #EDEDED;
}
#header {
  background: #1E5799;
  background: -webkit-linear-gradient(top, #1E5799 0%, #7DB9E8 100%);
  background: linear-gradient(to bottom, #1E5799 0%, #7DB9E8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
  text-align: center;
}
#menu {
  background: #59A6CF;
  color: #FFF;
}
#menu UL {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
#menu LI {
  list-style: none;
  /*padding: 0 10px;*/
}
#menu LI > A {
  text-decoration: none;
  color: #FFF;
  display: block;
  padding: 1vw;
}
#menu LI > A:hover {
  background-color: #C1DDE1;
  color: #333;
}
#content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  /*border-bottom: #2D69A1 1px dotted;*/
  margin-bottom: 10px;
  padding: 15px 0 0;
}
#content LI {
  margin: 0 0 16px;
}
#sidemenu {
  text-align: center;
  padding: 1vw;
  margin: 0 auto;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  /*min-width: 65px;*/
}
#page_text {
  margin: 0 auto;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 10px;
  border-left: #2D69A1 1px dotted;
}
IFRAME {
  max-width: 100%;
}
#footer {
  text-align: center;
  border-top: #2D69A1 1px dotted;
  padding: 10px;
}
#product_spacer {
  border-bottom: 1px dotted #2D69A1;
  padding: 10px;
}
INPUT[type=text] {
  width: 50%;
}
TEXTAREA {
  width: 96%;
  height: 100px;
}
.tooltip {
  border-bottom: 1px dotted #000000;
  color: #000000;
  outline: none;
  cursor: help;
  text-decoration: none;
  position: relative;
}
.tooltip SPAN {
  margin-left: -999em;
  position: absolute;
}
.tooltip:hover SPAN {
  border-radius: 5px 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute;
  left: 1em;
  top: 2em;
  z-index: 99;
  margin-left: 0;
  width: 50vw;
  min-width: 200px;
}
.tooltip:hover IMG {
  border: 0;
  margin: -10px 0 0 -55px;
  float: left;
  position: absolute;
}
.tooltip:hover EM {
  font-family: Candara, Tahoma, Geneva, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  display: block;
  padding: 0.2em 0 0.6em 0;
}
.classic {
  padding: 0.8em 1em;
}
.custom {
  padding: 0.5em 0.8em 0.8em 2em;
}
* HTML A:hover {
  background: transparent;
}
.classic {
  background: #FFFFAA;
  border: 1px solid #FFAD33;
}
.critical {
  background: #FFCCAA;
  border: 1px solid #FF3334;
}
.help {
  background: #9FDAEE;
  border: 1px solid #2BB0D7;
}
.info {
  background: #9FDAEE;
  border: 1px solid #2BB0D7;
}
.warning {
  background: #FFFFAA;
  border: 1px solid #FFAD33;
}
@media all and (min-width: 1200px) {
  BODY {
    font-size: 18px;
  }
}
@media all and (max-width: 640px) {
  BODY {
    font-size: 10px;
  }
}