/*

This style sheet uses these colors:

         dark: #8b8878 (cornsilk1)
  medium dark: #cdc8b1 (cornsilk2)
 medium light: #eee8cd (cornsilk3)
        light: #fff8dc (cornsilk4)
  contrasting: #000080 (navy)

               black
               white
               red
               green
               yellow
               orange

*/


body {
  position: relative;
  padding-left: 223px; /* This is the width of the logo plus 12 */ 
  font-family: sans-serif;
  color: black;
  background-color: white;
}
h2 {
  padding-left: 1em;
  font-family: sans-serif;
  background-color: #cdc8b1;
  border: 2px solid #8b8878;
}

/* Layout tables should be invisible. They are used to position things on the page */
table.layout { border: none; margin: 0; }
table.layout td { border: none; padding-right: 2em; vertical-align: top; }

/* Display tables should be visible (and pretty). That are used to display data. */
table.display {
  background-color: white;
  border-collapse: collapse;
  border: 3px solid #8b8878;
}
table.display td {
  border: 2px solid gray;
  /* The backround of the GPS link overflows the cell in FF with a small
     horizontal window size if the L/R padding is less than 0.5em */
  padding: 0.1em 0.5em;
}
table.display th {
  color: black;
  background-color: #cdc8b1;
  border: 3px solid #8b8878;
}

/* This is the style for cells on the status page: */
td.status {
  text-align: center;
}

/* This is used for GPS cells that contain latitude and longitude */
td.latlong {
  font: 75% sans-serif;
  white-space: nowrap;
}

/* This is used for Unit "Alert Time" cells that use the default from the owner */
td.alert_default {
  color: black;
}
/* This is used for Unit "Alert Time" cells that override the default */
td.alert_override {
  color: green;
}
/* This is used for Unit "Alert Time" cells that have alerts disabled */
td.alert_none {
  color: orange;
}

/* Action links are things like "Edit" and "Delete" buttons */
a.action {
  text-align: center;
  font: bold 100% sans-serif; 
  padding: 2px 0.5em;
  color: #fff8dc;
  background-color: #000080;
}
a.action:hover {
  color: #000080;
  background-color: #eee8cd;
  text-decoration: none;
}

a.current_page {
  text-decoration: none;
  text-align: center;
  font: bold 100% sans-serif; 
  padding: 2px 0.25em;
  color: #000080;
}
a.other_page {
  text-decoration: none;
  text-align: center;
  font: bold 100% sans-serif; 
  padding: 2px 0.25em;
  color: #fff8dc;
  margin: 0;
  background-color: #000080;
}
a.other_page:hover {
  color: #000080;
  background-color: #eee8cd;
  text-decoration: none;
}

a.sort_column {
  color: #000080;
  text-decoration: none;
}
a.sort_column:hover {
  color: #000080;
  background-color: #eee8cd;
  text-decoration: none;
}

/* This makes the submit button look the same as an "action" link. The only
difference is there is no hover behavior. This is only used if
JavaScript is turned off (otherwise an actual "action" link is used
with JavaScript to submit the form. */

input.submit_button {
  margin: 0;
  padding: 0;
  border: 0;
  cursor: hand;
  text-decoration: underline;

  text-align: center;
  font: bold 1em sans-serif; 
  padding: 2px 0.5em;
  color: #fff8dc;
  background-color: #000080;
}


/* These define the style of the text for each state of the unit: */
span.net_up { color: black; }
span.net_down { color: red; }
span.net_inactive { color: orange; }
tr.net_error { color: red; }
tr.net_up { color: black; }
tr.net_down { color: red; }
tr.net_inactive { color: orange; }
td.change_pending { text-align: center; background-color: yellow; }

/* The style of the RSSI cell on the status screen is set according to the RSSI state: */
td.rssi_error {
  background-color: red;
  color: black;
}
td.rssi_pending {
  background-color: yellow;
  color: black;
}
td.rssi_na {
  background-color: white;
}

/* These set the background for all input elements: */
input { background-color: #fff8dc; }
select { background-color: #fff8dc; }	
input.text { background-color: #fff8dc; }

/* This is the style of the error messages. The main place such
messages show up is on the Add and Edit screens when there is a
problem with the user input */

div#error_msg {
  color: red;
}

/* There are three main areas of the screen: The logo, the navigation
bar, and the content. The styles below lay out those areas on the
page. */

overflow: auto;

div#content {
  font-family: sans-serif;
  padding: 10px;
  margin: 5px;
  overflow: hidden;
}

div#logo {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0px;
}

/* The navigation links appear on every page except the Login screen */
div#links {
  position: absolute;
  /* the logo is 211x57 */
  top: 70px;
  width: 215px;
  left: 0;
}
div#links a {
  display: block;
  text-align: center;
  font: bold 1em sans-serif; 
  padding: 10px 20px;
  margin: 4px;
  border-width: 0; 
  text-decoration: none;
  color: #fff8dc;
  background-color: #000080;
}
div#links a:hover {
  color: #000080;
  background-color: #eee8cd;
}

/* Sublinks vary depending on the page */
div#sublinks {
  position: relative;
  top: 1em;
  margin-left: 2em;
}

div#sublinks a {
  background-color: #000080;
}

div#splash_summary {
  font-family: fixed;
  margin-left: 2em;
}

div#config_info {
  font-family: fixed;
}