/* page overall: */

 
body {
    margin: 0.5em 0em 2em 0em;

    font-size: 100%;
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    line-height: 1.1em;
    text-align: center;
    
    background-color: #c7c7c7;
    background-image: url(../images/background.png);
    background-repeat: repeat-x;
}
 
#page {
    width: 790px; 
    text-align: left;  
    margin-left: auto; 
    margin-right: auto;
}

/* Login Page */

body#login {
  background: white;
}

div#loginouter {
  padding: 50px;
}

div#logininner {
  margin: auto;
  width: 300px;
  text-align: center;
}

div#logininner form {
  margin: 0;
}

div#logininner table {
  margin: auto;
}

/* header: */

#header {
    position: relative; 
    width: 100%;
    height: 60px;
    color: #fff;
    vertical-align: middle;
    text-align: left;
    margin-bottom: 7px;
    margin-top: 5px;
}

#headeri {
    width: 75%;
    float: left;
}

#headerm {
    position: relative;
    width: 20%;
    float: right;
    height: 100%;
    text-align: right;
}

#headerm p {
    color: #ee1100;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    right: 0;
    padding-bottom: 0;
    margin-bottom: 0;    
}

#header a:link, #header a:visited {
    color: #FFFFFF;
    text-decoration: none;
    font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
    font-weight: bold;
    font-size: 1.9em;
    letter-spacing: -0.1em !important;
    letter-spacing: -0.2em;
    line-height: 1.2em;
}

div.menuwrap {
    height: 57px;
    width: 767px; 
    margin-left: 12px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-bottom: 0px;
    border-right: 2px solid #4284B5;
}

div.menu {
    width: 754px;
    height: 25px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    background-color: #D0E7F4;
    border-top: 1px solid #7ba5c6;
    border-left: 1px solid #7ba5c6;
    border-right: 2px solid #7BA5C6;
    border-bottom: 0px;
    padding-top: 3px;
}

div.submenu {
    padding-top: 1px;
    padding-left: 10px;
    padding-bottom: 2px;
    width: 755px;
    height: 25px;
    background-color: #7BA5C6;
    border-right: 2px solid #7BA5C6;
}

div.menuitem {
  float: left;
  padding: 3px 3px 3px 3px;
  margin: 2px 4px 0px 4px;
  height: 17px;
  min-width: 60px;
  text-align: center;
  background-color: #d9d9d9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  color: #222222;
}

#selected a {
  background-color: #7BA5C6;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
}

#selectedsub a {
  background-color: #7BA5C6;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
}

#authhdr {
    position: relative;
    width: 767px;
    text-align: right;
    margin-top: 0px;
    margin-bottom: 0;
    margin-left: 12px;
    margin-right: 0px;
    padding: 0px;
    background-color: #fff;
    border-right: 2px solid #4284B5;
}

#authhdr #authint {
    padding-top: 5px;
    border-right: 2px solid #7BA5C6;
}

#authhdr #authint p {
    color: #000000;
    font-size: 10px;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-right: 10px;
}

#middlepopup {
    width: 300px;
    height: auto;
    text-align: center;
    display: none;
    position: absolute;
    top: 40%;
    left: 40%;
    padding: 10px 10px 10px 10px;
    border: 2px solid #4284B5;
    background-color: #d9d9d9;
    font-size: 1.1em;
}

b.redWarning {
  text-align: right;
  font-size: 14px;
  color:red;
  padding: 2px 10px 2px 0px;
}

div.menuitem a:link, div.menuitem a:visited {
    color: #454545;
    text-decoration: none;
}
 
div.menuitem a:hover, div.menuitem a:active {
    color:  #FF6300;
    text-decoration: none;
}

div.submenuitem {
  float: left;
  padding: 3px 3px 3px 3px;
  margin: 1px 3px 0px 3px;
  min-width: 50px;
  text-align: center;
  background-color: #7BA5C6;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  color: #000000;
}

div.submenuitem a:link, div.submenuitem a:visited {
    color: #454545;
    text-decoration: none;
}
 
div.submenuitem a:hover, div.submenuitem a:active {
    color:  #FF6300;
    text-decoration: none;
}

#selected {
   background-color:  #7BA5C6;
   font-weight: bold;
   color: #ffffff;
}

#selectedsub {
   background-color:  #7BA5C6;
   font-weight: bold;
   color: #ffffff;
}

/* left column: */

#left {
    width: 20%; 
    float: left; 
    position: relative; 
    font-size: 0.8em;
}

div.inner_box {
    border-right: 2px solid #7BA5C6;
    border-bottom: 2px solid #7BA5C6; 
    min-height: 445px;
    height: auto !important;
    height: 445px;
}

#m_footer {
    position: relative;
    height: 40px;
}

#baseline {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
}

#baseline p {
    margin-top: 0px;
    margin-bottom: 0px;
    color: #ababab;
}

/* content column: */

#content {
    Width: 767px; 
    margin-left: 12px;
    margin-top: 0px;
    font-size: 0.8em;
    background-color: #fff;
    border-right: 2px solid #4284B5;
    border-bottom: 2px solid #4284B5;
}

#content h1 {
    clear: both;
    margin: 0em 0em 0em 0em;
    padding: 0.5em 0em 0em 0.1em;
    font-size: 1.7em;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #FF6300;
    border-bottom: 0.05em solid #FF9853;
    line-height: 1em;
}

#content p {
    margin: 0em 0em 0.5em 0em;
    padding: 0.35em;
}

#path {
    height: 20px;
    font-family: Verdana, Arial, sans-serif;
    padding: 3px 0em 1px 10px;
    font-size: 0.9em;
    color: #2F5E80;
    background-color: #D0E7F4;
    border-right: 2px solid #7BA5C6;
}      

#content a:link {
    color: #2E668B;
}
    
#content a:visited {
    color: #255270; 
}
 
#content a:hover, #content a:active {
    color: #000;
}

#content acronym {
    border-bottom: 1px dotted #4284B5;
    cursor: help;
    margin: 0;
    padding: 0;
}

#main {
    min-height: 435px;
    height: auto !important;
    height: 435px;
    padding: 5px 10px 5px 7px;
    border-bottom: 2px solid #7BA5C6;
    border-right: 2px solid #7BA5C6;
}

#main table {
    width: 75%;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
}

#main input {
    font-size: 1.1em;
}

#main textarea {
    font-size: 1.5em;
}

#main select {
    font-size: 1.1em;
}

#main p.errbox {
    padding-bottom: 0;
    padding-top: 10px;
    margin-bottom: 0;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
    color: #ff0000;
}

#main table.wide {
    width: 90%;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
}

#main th {
    text-align: center;
    vertical-align:middle;
    padding-left: 5px;
    background-color: #ababab;
    padding-top: 3px;
    padding-bottom: 3px;
}

#main th.mid {
    text-align: center;
    vertical-align:middle;
    padding-left: 5px;
    background-color: #c2c2c2;
    padding-top: 3px;
    padding-bottom: 3px; 
}

#main td {
    background-color: #d9d9d9;
    margin: 0px -1px 0px -1px;
    padding: 0px 0px 0px 0px;
}

#main td.formIndex {
  text-align: center;
  padding: 2px 10px 2px 10px;
}

#main td.formDescp {
  text-align: left;
  padding: 2px 10px 2px 10px;
}

#main td.formHeader {
  text-align: center;
  font-weight: bold;  
  padding: 2px 10px 2px 10px;
}

#main td.formVal {
  text-align: right;
  padding: 0px 5px 0px 5px;
}

#main td.emptyTbl {
  text-align: center;
  padding: 3px 0px 3px 0px;
}

#main td.ioIndex {
  text-align: center;
  padding: 2px 10px 2px 10px;
}

#main td.ioName {
  text-align: left;
  padding: 2px 10px 2px 10px;
}

#main td.ioVal {
  text-align: right;
  padding: 0px 5px 0px 5px;
}

#main td.ioValRed {
  background-color: #ff6666;
}

#main td.ioValOrange {
  background-color: #ff9d00;
}

#main td.ioValGrn {
  background-color: #33cc33;
}

#main td.blank {
  background-color: #ffffff;
}

#main td.formButtons {
  width: 100%;
  background-color: #ababab;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

#main input.frmIcon {
  width:  18px;
  height: 18px;
}

#main div.left {
  text-align:left;
  float:left;
}

#main div.right {
  text-align:right;
  float:right;
}

#main div.formButtonL {
  text-align: left;
  float: left;
  width: 200px;
  padding: 0 0 0 0;
  margin: 0% 0% 0% 15px;
  background-color: #ababab;
}

#main div.formButtonR {
  text-align: right;
  float: right;
  width: 200px;
  margin: 0% 15px 0% 0%;
  background-color: #ababab;
}

#main ul {
    margin: 10px 0px 0px 0px;
    list-style-type: none;
    padding-left: 5px;
    font-weight: bold;
    font-size: 1.2em;
}

#main ul li ul {
    padding-left: 9px;
    font-weight: normal;
    font-size: 1em;
}

#main th.gpiospl {
    text-align: left;
    vertical-align:middle;
    padding-left: 5px;
    background-color:  #D0E7F4;
    padding-top: 3px;
    padding-bottom: 3px;
}

#main td.gpiospl {
    background-color:  #D0E7F4;
    text-align: center;
    width: 25%;
}

iframe.box {
    width: 75%;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    font-size: 8pt;
}

#cybertec-scroll {
    padding: 3px 3px 3px 3px;
    border-style: groove groove groove groove;
    border-color: gray gray gray gray;
    border-width: 4px 4px 4px 4px;
    display: block;
    height: 350px;
    width: 95%;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    font-size: 8pt;
}

#main table.serlstate {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    border-collapse: collapse;
    width: 100%;
}

#main table.serlstate tr {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    word-spacing: 0px;
}

#main table.serlstate td {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    word-spacing: 0px;
    line-height: 1em;
}

#main table.serlstate img {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#main table.subsplit {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

#main table.subsplit td {
    width: 100%;
    text-align: left;
}

div.img_left, div.img_right {
    border-bottom: 0.09em solid #4284B5;
    border-right: 0.1em solid #4284B5;
}

div.img_left {
    float: left; 
    margin: 0.5em 0.8em 0em 0em;
}

div.img_right {
    float: right; 
    margin: 0.5em 0em 0em 0.8em;
}

div.img_left img, div.img_right img {
    display: block;
    border: 0.35em solid #7BA5C6;
    margin: 0;
    padding: 0;
}

/* this clears floating (e.g images) */
br.clear {
    clear: both;
    display: none;
}


/* footer: */

#footer { 
    margin: 0em;
    padding: 0em;
    font-size: 0.9em;
    clear: both;
    color: #027BC1;
    text-align: right;
} 

#footer p {
    margin: 0em;
    padding: 0.1em;
}

#footer td.left {
    text-align: left;
}

#footer td.right {
    text-align: right;
}

#footer a:link, #footer a:visited { 
    color: #027BC1;
} 

#footer a:hover, #footer a:active { 
    color: #000000;
} 


div.popup {
  top: 10px;
  right: 10px;
  left: 10px;
  bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
}

div.popup-content {
  margin-left:12px;
  margin-right:12px;
  margin-top:12px;
  margin-bottom:12px;
  font-size: 0.8em;
  background-color: #fff;
  border-right: 2px solid #4284B5;
  border-bottom: 2px solid #4284B5;
}

div.popup table {
  border-collapse: collapse;
  border: none;
  padding-top: 0px;
  margin-top: 15px;
  margin-left: auto;
  margin-right:auto;
  width: 90%;
  height: auto;
}

div.popup th {
  background-color: #ababab;
  border: 1px solid #ffffff;
  font-size: 0.8em;
}

div.popup td {
  background-color: #d9d9d9; /* #f7efee; */
  border: 1px solid #ffffff;
  padding:1px 5px 1px 5px;
  text-align: center;
  font-size: 0.8em;     
}

.modal-overlay
{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  height:100%;
  width:100%;
  background-color:#cdc9c8; /*a light grey */
  margin:0;
  padding:0;
  opacity:.75;
  z-index:101;
}

.modal-window
{
  position:fixed;
  height:100%;
  width:100%;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:0;
  padding:0;
  z-index:102;
}