/* ---  Layout  --- */

menupanel {
  margin: 0;
}

* {
  margin: 0;
  padding: 0;
  z-index: 0;
}

html,
body {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: black;
  background-color: white;
}

body {
  min-width: 810px;   /* Does not work under IE6 */
}

a {
  text-decoration: none;
}

img {
  border: 0;
}

option {
  padding-right: 1em;
}

ul {
  list-style-type: none;
}

th {
  text-align: left;
}

/* Hide elements when using CSS */
hr,
#header h1,
#content h2,
.submenu h3 {
  display: none;
}

/* --- Images --- */

.wellbackground {
  background-color: white; 
  background-position:0px 70px;
  background-repeat:no-repeat; 
  margin:0; 
  background-image:url(images/blue.JPG);
}

.float{
  position:relative;
  color:white; 
  text-align: center;
  font-size:0.8em;
  height:10px;
  width:20px;
  writing-mode: tb-rl;
  z-index:2;
}

.alarm {
  height:15px;
  width:15px;
  margin:0px;
  padding:0px;
}

.bin {
  background-image:url(images/bin.gif);
  height:15px;
  width:15px;
  margin:0px;
  padding:0px;
}

.setpoint_bar {
  position:relative;
  color:white;
  text-align: center;
  background-color:rgb(20,170,80);
  font-size:0.8em;
  width:15px;
  writing-mode: tb-rl;
}

.bar_div {
  margin: 0.1em;
  padding: 0em;
  position:relative;
  float:left; 
  z-index:2;
}

/* --- Header --- */

#header {
  top: 0;
  left: 0;
  width: 100%;
  background: #cccccc;
}

#clear-header {
  height: 50px;
}

#clear-menu {
  height: 160px;
}

/* --- Status --- */

#header #status {
  position: absolute;
  top: 0;
  right: 0;
  height: 5.5em;
  width: 55%;
  line-height: 1em;
  color: white;
}

#status ul {
  font-size: 1.1em;
  white-space: nowrap;
  margin: 0.3em 0 0 2em;
  padding-top: 1px;
}

/* --- Blocking out Page --- */
#navigation {
  float:left;
  width:18%;
  max-width:150px;
  min-height:600px;
  border-style: solid solid none none; 
  border-width: 1px;
}

#container {
  margin-bottom: -25px;   /* Negative of footer height */
  float:left;
  width:75%;
  max-width:1000;
  min-width:300;
  border-style: solid none none none ;
  border-width: 1px;
}

/* --- Navigation --- */

#menugroup {
  min-width: 810px;
}

#mainmenu,
.submenu {
  height: 2em;
  line-height: 2em;
  font-size: 0.8em;
}

#mainmenu a:hover {
  border-style: solid solid none solid ;
  border-width: 1px;
  color: #000000;
}

#mainmenu {
  color: black;
  background-color: #ffffff;
  font-weight: bold;  
  margin-top: 4px;
  padding-left: 1em;
}

#mainmenu .selected {
  border-style: solid solid none solid ;
  border-width: 1px;
  border-color: #000000;
  color: #000000;
  background-color: #b6b5b5;
}

.submenu a:hover {
  color: #000000;
  font-weight: bold;
}

.submenu {
  background-color: #ffffff;
  border-top: light solid transparent;
}

.submenu .selected {
  color: #000000;
  background-color: #b6b5b5; 
  font-weight: bold;
}

#mainmenu li,
.submenu li {
  list-style-type: none;
  white-space: nowrap;
}

#mainmenu li{
  float: left;
  width: 10em;
  text-align: center;
}

#mainmenu li a {
  padding: 0 0.7em 0 0.7em;
  display: block;
  color: black;
  background-color: #ffffff;
    
}

.submenu li {
  color: black;
}

.submenu li a {
  padding: 0 0.6em 0 0.6em;
  display: block;
  color: black;
}

.menuitem {
  border-style: solid none solid none;
  border-width: 1px;
}
.leftmenuitem {
  border-style: solid none solid solid;
  border-width: 1px;
}
.rightmenuitem {
  border-style: solid solid solid none;
  border-width: 1px;
}

.selectedmenuitem {
  border-style: solid none solid none;
  border-width: 1px;
  color: #000000;
  background-color: #b6b5b5;
  font-weight: bold;
}
.selectedleftmenuitem {
  border-style: solid none solid solid;
  border-width: 1px;
  color: #000000;
  background-color: #b6b5b5;
  font-weight: bold;
}
.selectedrightmenuitem {
  border-style: solid solid solid none;
  border-width: 1px;
  color: #000000;
  background-color: #b6b5b5;
  font-weight: bold;
}

.nav_heading {
  height:2em;
  border-style: solid solid solid solid ;
  border-width: 1px;
  padding-top: 0.5em;
  padding-left: 0.3em;
}

/* --- Content --- */

.three_seg_head {
  float:left !important;
  width: 20% !important;
}

#content {
  padding: 0 2% 3em 2%;
}

#content a {
  text-decoration: underline;
}

#content h3 {
  width: 55%;
  font-size: 1.2em;
  font-weight: bold;
  color: #666666;
  padding-bottom: 0.4em;
}

#content h4 {
  float: left;
  font-size: 1.2em;
  font-weight: bold;
  color: #666666;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}

#content .separator {
  clear: both;
  border-top: 1px solid black;
  width: 98%;
  height: 1px;
  padding-bottom: 0.8em;
}

#header .separator {
  clear: both;
  border-top: 1px solid black;
  width: 98%;
  height: 1px;
  padding-bottom: 0.8em;
}

#content .utility-buttons {
  float: right;
  margin-top: 1.5em;
  padding-right: 2%;
  width: 40%;
  text-align: right;
}

#content .utility-buttons input {
  width: 10em;
}

.newline {
  clear:both;
}

/* --- Settings --- */

#content select,
#content input{
  margin-left:0em;
  width:6em;
}

#content .settings-form select,
#content .settings-form input{
  margin-left:0em;
  width:12em;
}

#content .settings {
  margin-left: 4px; /*2%; needed multi and form to start at the same position*/ 
  margin-right: 2px;
  padding-top: 4px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  border-bottom: 1px solid #dddddd;
}

#content .settings-wide {
  float: left;
  width: 60%;
}

#content .settings-label,
#content .settings-label2,
#content .settings-label3 {
  float: left;
  width: 20%;
}

#content .table-label {
  float: left;
  width: 40%;
}

#content .table-form {
  float: left;
  width: 60%;
}

#content .settings-multi {
  float: left;
  width: 14%;
}

#content .settings-multi_h3 {
  float: left;
  width: 14%;
  padding-top:0.6em;
}

.multi3 {
  width:6em;
}

#content .settings-multix2 {
  float: left;
  width: 21%;
}

#content .settings-form {
  float: left;
  width: 42%;
}

.table-form li,
.settings-form li,
.settings-multi li,
.settings-multix2 li {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  list-style-type: none;
  font-size: 0.9em;
}

.settings-multi input {
  width:6em;
}

#content .settings-help {
  float: left;
  width: 38%;
}

#content .settings-help h5 {
  font-size: 0.8em;
  font-weight: bold;
  margin-bottom: 0.2em;
}

#content .settings-help p {
  font-size: 0.7em;
  margin-bottom: 0.5em;
}

#content .settings-help ul {
  font-size: 0.7em;
  list-style-type: disc;
  margin-left: 2em;
}

#content .diags {
  padding-top: 10px;
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid #dddddd;
  font-size: 0.85em;
}

#content .diags tr:hover {
    color: #ffffff;
background-color: #999999;
}


#content .diags td {
    margin-left: 1em;
    margin-right: 1em;
padding-left: 1em;
padding-right: 1em;
}

#content .diagsFirstRow {
    font-weight: bold;
    background-color: #E5E7E9;
}

/* --- Footer --- */

#footer {
    position: relative;
    width: 100%;
    clear: both;
    background: #cccccc;
}

#clear-footer {
    clear: both;
    height: 25px;
}

/* IE 6 and IE7*/
select {
  margin-left: 12px;
}

/* originally from style-cmi.css*/

/* ---  Header  --- */

#header-logo {
    /*position: fixed;*/
    width: 100%; /*895px;*/
    height: 50px; /*104px*/
    top: 0px;
    left: 0px;
    background: url(images/cmi_logo.jpg) no-repeat;
    background-color: #000000; /*image fades to black on right hand side*/
}

#header-white {
    /*position: fixed;*/
    width: 100%; /*895px;*/
    height: 110px; /*59 104px*/
    top: 50px;
    left: 0px;
    background-color: white; /*image fades to black on right hand side*/
}

#header {
    width: 100%;
/*    height: 160px; / *109 104px*/
    background: #000000;
    border-bottom: 2px solid white;
/*    position:fixed;*/
}

/* ---  Footer  --- */

#footer {
    height: 25px;
    z-index: 0;
    line-height: 25px;
    font-size: 0.8em;
    text-align: center;
    color: #ffffff;
}