/*** The following styles are for displaying help links. ***/
   @media screen {
      .HelpLink {
      }
   }

   @media print {
      .HelpLink {
         text-decoration : none;
         color : black; 
      }
    }

/*** The following styles are for displaying help links. ***/
   @media screen {
      a.HelpIcon {
      }
      img.HelpIcon {
         margin-left:2px;
      }
   }

   @media print {
      .HelpIcon {
         display:none; 
      }
    }


/*** The following styles should be used to build FORM pages unless the
     module has specific requirements not met by this general format. ***/
   
   table.FormTable {
   }

   /* Standard background colors for forms. */ 
   .FormGreen {
      background-color:#DDFFDD;
   }
   .FormBlue {
      background-color:#DFFFFF;
   }
   .FormLavendar {
      background-color:#EEEEFF;
   }
   .FormYellow {
      background-color:#FFFFCC;
   }
   .FormPink {
      background-color:#FFDDDD;
   }
   .FormGray {
      background-color:#CCCCCC;
   }
   .FormWhite {
      background-color:#FFFFFF;
   }


   /* The styles named FormSection* are used to define a single cell row. */
   td.FormSectionHeader, 
   td.FormSectionHeaderButton,
   td.FormSectionHeaderInfo,
   td.FormSectionHeaderMinimal,
   td.FormSectionHeaderWarning, 
   td.FormSectionFooter,
   td.FormSectionFooterButton,
   td.FormSectionFooterMinimal,
   td.FormSectionFooterNote,
   td.FormSectionInfo,
   td.FormSectionText,
   td.FormSectionWarning,
   td.FormSectionRow {
      border-left:solid gray 2px;
      border-right:solid gray 2px;
      padding-left:10px;
      padding-right:10px;
   }

   td.FormSectionHeader {
      padding-top:10px;
      padding-bottom:0px;
      border-top:solid gray 2px;
      font-weight:bold;
      font-size:large;
   }

   td.FormSectionHeaderButton {
      padding-top:10px;
      padding-bottom:0px;
      border-top:solid gray 2px;
   }

   td.FormSectionHeaderInfo {
      padding-top:10px;
      padding-bottom:0px;
      border-top:solid gray 2px;
      font-weight:bold;
   }

   td.FormSectionHeaderMinimal {
      font-size:0%;
      padding-top:10px;
      padding-bottom:0px;
      border-top:solid gray 2px;
   }

   td.FormSectionHeaderWarning {
      color:red;
      padding-top:10px;
      padding-bottom:0px;
      border-top:solid gray 2px;
      font-weight:bold;
      font-size:large;
   }

   td.FormSectionFooter {
      font-size:0%;
      padding-bottom:0px;
      border-bottom:solid gray 2px;
   }

   td.FormSectionFooterMinimal {
      font-size:0%;
      padding-bottom:10px;
      border-bottom:solid gray 2px;
   }

   td.FormSectionFooterButton {
      padding-top:10px;
      padding-bottom:10px;
      border-bottom:solid gray 2px;
   }

   td.FormSectionFooterNote {
      font-size:small;
      font-style:italic;
      padding-top:10px;
      padding-bottom:10px;
      border-bottom:solid gray 2px;
   }

   td.FormSectionInfo {
      font-size:small;
      padding-top:10px;
      padding-bottom:0px;
      width:30em;
   }

   td.FormSectionText {
      padding-top:10px;
      padding-bottom:0px;
      width:35em;
   }

   td.FormSectionWarning {
      color:red;
      padding-top:10px;
      padding-bottom:0px;
      width:35em;
   }

   td.FormSectionRow {
      padding-bottom:0px;
   }

   /* Defines an empty divider row between sections. */
   td.FormSectionDivider {
      padding-top:15px;
      font-size:0%;
   }

   /* Defines an empty divider row between fields. */
   td.FormFieldDivider {
      border-bottom:solid black 1px;
      border-left:solid gray 2px;
      border-right:solid gray 2px;
      padding-top:5px;
      font-size:0%;
   }

   /* Used to define rows with content either above, between, or after a section. */
   td.FormPlainRow {
      padding:10px 0px 10px 0px;
   }

   /* The styles named FormLabel* are used for the left cell in a 2 cell row. */
   td.FormLabelInfo,
   td.FormLabelField,
   td.FormLabelFieldLarge,
   td.FormLabelBlank {
      padding-left:10px;
      padding-right:10px;
      padding-bottom:0px;
      border-left:solid gray 2px;
      text-align:right;
      font-weight:bold;
   }

   td.FormLabelInfo, td.FormLabelFieldLarge {
      vertical-align:top;
   }

   td.FormLabelField {
      vertical-align:bottom;
   }

   td.FormLabelBlank {
      font-size:0%;
   }

   /* The styles named FormField* are used for the right cell in a 2 cell row. */
   td.FormField, td.FormFieldHelp, td.FormFieldHelpSection, td.FormFieldInfo, td.FormFieldText, td.FormFieldButton, td.FormFieldWarning {
      border-right:solid gray 2px;
      padding-left:0px;
      padding-right:10px;
      padding-bottom:0px;
   }

   td.FormField, td.FormFieldHelp {
      vertical-align:bottom;
   }

   td.FormFieldText, td.FormFieldButton, td.FormFieldInfo, td.FormFieldWarning {
      vertical-align:top;
   }

   td.FormField, td.FormFieldInfo, td.FormFieldText,
   td.FormLabelField, td.FormLabelInfo, td.FormLabelFieldLarge,
   td.FormSectionRow, td.FormSectionFooter {
      padding-top:20px;
   }

   td.FormFieldWarning {
      color:red;
   }
    
   td.FormFieldHelp {
      font-size:small;
      width:30em;
   }

   td.FormFieldHelpSection {
      padding-top:20px;
      font-size:small;
      width:30em;
   }

   /* The styles named FormSub* are used to define cells in a sub-table in 
      the right cell in a two cell row. */
   td.FormSubField, td.FormSubLabel {
      padding-right:5px;
   }

   td.FormSubField {
      vertical-align:top;
   }

   td.FormSubLabel {
      font-size:small;
      font-style:italic;
      vertical-align:bottom;
   }

   td.FormSubMinimal {
      font-size:0%;
      padding-bottom:5px;
   }

   /* The styles named FormLinkedList are used to defined cells in a sub-table
      in the right cell in a two cell row when that table contains a group of
      linked drop down lists. */
   td.FormListLinked, td.FormListLinkedLabel, td.FormListLinkedHelp {
      vertical-align:top;
      padding-bottom:5px;
   }

   td.FormListLinkedLabel {
      text-align:right;
      padding-right:10px;
   }

   td.FormListLinkedHelp {
      font-size:small;
   }

   /* The styles named FormCheck* are used to define cells in a sub-table in 
      the right cell in a two cell row when that table contains a check box
      and labels. */
   td.FormCheck, td.FormCheckName, 
   td.FormCheckDefinition, td.FormCheckInfo {
      vertical-align:top;
      padding-bottom:5px;
   }

   /* Style for the checkbox control (not the cell it is in). */
   input.FormCheck {
      position:relative;
      left:-4px;
   }

   td.FormCheckName {
      padding-right:10px;
   }

   td.FormCheckDefinition {
      font-size:small;
      width:25em;
   }

   td.FormCheckInfo {
      padding-right:10px;
      font-size:small;
   }

   input.FormListButton {
      text-align:left;
      padding-left: .5em;
      width: 15em;
      display: block;
   }


/*** The following styles (Sum*) should be used to present tabular data.
     (For example, see the Fire Reporting Summaries.) ***/

   table.SumTable {
      border-top:2px solid gray;
   }

   @media print {
      a.SumDetail {
         color: #000;
         text-decoration: none;
      }
   }

   table.SumTable td, table.SumTable th {
      border-right:2px solid gray;
      border-bottom:2px solid gray;
      padding:5px;
      vertical-align:middle;
      font-weight:normal;  
   }

   table.SumTable th {
      border-left:2px solid gray;
   }

   .SumTitle {
      text-align:center;
      font-weight:bold !important;
      font-size:x-large !important;
      padding-top:1em !important;
      padding-bottom:.4em !important;
      border-right-style:none !important;
      border-left-style:none !important;
   }

   .SumCol, .SumColSub, .SumColSubTotal, .SumColTotal, .SumColTotalTotal, .SumColGrand, .SumColGrandTotal {
      text-align:center;
      font-weight:bold !important; 
   }
   .SumRow, .SumRowSub, .SumRowSubTotal, .SumRowTotal, .SumRowTotalTotal, .SumRowGrand, .SumRowGrandTotal {
      text-align:left;
      font-weight:bold !important; 
   }
   .SumNumHighlight, .SumNumSub, .SumNumSubTotal, .SumNumTotal, .SumNumTotalTotal, .SumNumGrand, .SumNumGrandTotal {
      text-align:right;
      font-weight:bold !important; 
   }
   .SumCenterHighlight, .SumCenterSub, .SumCenterSubTotal, .SumCenterTotal, .SumCenterTotalTotal, .SumCenterGrand, .SumCenterGrandTotal {
      text-align:center;
      font-weight:bold !important; 
   }
   .SumTextHighlight, .SumTextSub, .SumTextSubTotal, .SumTextTotal, .SumTextTotalTotal, .SumTextGrand, .SumTextGrandTotal {
      text-align:left;
      font-weight:bold !important; 
   }
   .SumNum {
      text-align:right;
   }
   .SumText {
      text-align:left;
   }
   .SumCenter {
      text-align:center;
   }
   .SumNav {
      text-align:center;
   }
   .SumNeg {
      color:red;
   }

   .SumHeader {
      border-right-style:none !important;
      border-left-style:none !important;
      padding-top:1em !important; 
      text-align:left;
      font-size:large;
      font-weight:bold !important; 
   }

   .SumInfo {
      border-right-style:none !important;
      border-left-style:none !important;
      padding-top:.2em !important; 
      text-align:left;
      font-weight:bold !important; 
   }

   .SumNote {
      border-right-style:none !important;
      border-left-style:none !important;
      border-bottom:none !important;
      padding-top:.2em !important; 
      text-align:left;
      font-size:small !important;
   }

   .SumSpacer {
      height:5px;
      border-right-style:none !important;
      border-left-style:none !important;
      padding:0px !important; 
      text-align:center;
   }

   .SumSpacerLarge {
      height:20px;
      border-right-style:none !important;
      border-left-style:none !important;
      padding:0px !important; 
      text-align:center;
   }

   @media screen {
      .SumNa {
         background-color:#F5F5F5;  /* light gray */
      }
      .SumColSub, .SumRowSub, .SumNumSub, .SumCenterSub, .SumTextSub {
         background-color:#EEEEFF;  /* light lavendar */
      }
      .SumColSubTotal, .SumRowSubTotal, .SumNumSubTotal, .SumCenterSubTotal, .SumTextSubTotal {
         background-color:#DDDDFF; /* lavendar */
      }
      .SumColTotal, .SumRowTotal, .SumNumTotal, .SumCenterTotal, .SumTextTotal {
         background-color:#DFFFFF;  /* light blue */
      }
      .SumColTotalTotal, .SumRowTotalTotal, .SumNumTotalTotal, .SumCenterTotalTotal, .SumTextTotalTotal {
         background-color:#BFFFFF;  /* blue */   
      }
      .SumColGrand, .SumRowGrand, .SumNumGrand, .SumCenterGrand, .SumTextGrand {
         background-color:#DDFFDD; /* light green */ 
      }
      .SumColGrandTotal, .SumRowGrandTotal, .SumNumGrandTotal, .SumCenterGrandTotal, .SumTextGrandTotal {
         background-color:#BBFFBB; /* green */ 
      }
   }

   @media print {
      .SumColSub, .SumRowSub, .SumNumSub, .SumCenterSub, .SumTextSub {
         color: #B000B0; /* light purple (magenta) */
      }
      .SumColSubTotal, .SumRowSubTotal, .SumNumSubTotal, .SumCenterSubTotal, .SumTextSubTotal {
         color: #500050; /* purple */ 
      }
      .SumColTotal, .SumRowTotal, .SumNumTotal, .SumCenterTotal, .SumTextTotal {
         color: #0000FF;  /* blue */
      }
      .SumColTotalTotal, .SumRowTotalTotal, .SumNumTotalTotal, .SumCenterTotalTotal, .SumTextTotalTotal {
         color: #000080; /* dark blue */
      }
      .SumColGrand, .SumRowGrand, .SumNumGrand, .SumCenterGrand, .SumTextGrand {
         color: #00FF00; /* green */
      }
      .SumColGrandTotal, .SumRowGrandTotal, .SumNumGrandTotal, .SumCenterGrandTotal, .SumTextGrandTotal {
         color: #008000; /* dark green */
      }
      .SumNav {
         display:none;
      }
    }

/*** Used to color the items in System Status and Weather Module Status displays. ***/ 
   .StatusWarning {
      background-color:#FFFF80;   /* yellow */
      color:red;                  /* red font */
   }
   .StatusGood {
      background-color:#80FF80;   /* green */
   }


/*** Used to present a page with a scrolling selection list.
     (For examples, see the Select User Account and Select Station
     pages, both of which have a Search Criteria section at the top
     and a Search Results section at the bottom which contains the
     scrolling list.) ***/

   table.ScrollingList {
      background-color:#DDFFDD;
      width:35em;
      border:solid gray 2px;
   }

   td.ScrollSectionHeader,
   td.ScrollSectionBody {
      padding-left:10px; 
      padding-right:10px; 
      padding-top:10px;
      padding-bottom:10px;
   }

   td.ScrollSectionHeader {
      border-bottom:solid gray 2px;
   }

   input.ScrollSectionHeaderButton {
      margin-top:.5em;
      float:right; 
      position:relative; 
      top:-10px;
   }

   ul.BulletList {
      margin-top:0em;
      margin-left:1.5em;       
      margin-bottom:0em
   }

   input.ScrollSectionBodyButtonRight {
      float:right; 
   }

   input.ScrollSectionBodyButtonCenter {
      float:right;
      margin-right:2px; 
   }

   /* Used to present a scrolling selection list with column headers.
   (For examples, see Select User Account and Select Fire Report.) */

   td.Header, td.HeaderSelected, td.DataLeft, td.DL, td.DataRight, td.DR {
      border-bottom:1px solid LightGrey; 
      border-right:1px solid LightGrey; 
      padding-left:5px; 
      padding-right:5px; 
      padding-top:5px;
   }

   td.Header, td.HeaderSelected {
      background-color:white; 
      text-align:left;
      font-weight:bold; 
   }          

   td.HeadCustom {
      background-color:#BBFFBB;   /* darker green (for 1st row; column headers) */
   }

   td.HeaderSelected {
      border:1px solid black; 
   }

   td.DataLeft, td.DL {
      text-align:left;
   }

   td.DataRight, td.DR {
      text-align:right;
   }

   input.ListButton, input.LB {
      text-align:left;
      padding-left: .5em;
      width: 20em;
      display: block;
   }

   /* Scroll table data with fixed headers. */

   @media screen {
      tr.HeaderFixed {
         position:relative;
         top:expression(this.parentElement.parentElement.parentElement.scrollTop);
      }

      div.ScrollingList {
         white-space:nowrap;
         overflow:auto;
         height:20em;
         border:.2em double gray;
      }
   }

   @media print {
      tr.HeaderFixed {
      }

      div.ScrollingList {
         white-space:nowrap;
         overflow:auto;
         border:.2em double gray;
      }
   }


/*** The header in the help screens. ***/
   div.HelpHeader {
      font-weight:bold;
      font-size:125%;
   }


/*** Navigation links and buttons at the top and bottom of the page. ***/

   @media screen {
      .navigation {
      }
   }

   @media print {
      .navigation {
          display:none;
      }
   }


/*** Logon and Banner messages. ***/

   table.MessageBanner {
      border:solid medium red; 
      color:red; 
      padding:1em; 
      margin-top:.5em; 
      margin-bottom:.5em
   }

   div.MessageLogon, div.MessageBanner, div.MessageHomePage {
      border:solid medium red; 
      color:red; 
      padding:1em; 
      margin-top:.5em; 
      margin-bottom:.5em
   }

   div.MessageHomePage {
      margin-left: auto;
      margin-right: auto;
      width:35em;
   }

   div.MessageLogon {
      width:35em;
   }

   p.MessagePosted {
      position:relative;
      left:-1em;
      top:-1em;
      margin-bottom:0em;
      font-size:70%;
   }

   @media print {
      div.MessageBanner {
         display:none;
      }
   }


/*** Superscripts ***/
   sup {
      font-size:70%;
      padding-left:.2em;
      padding-right:.2em;
      line-height: 0;
   }


/*** For use on the home pages. ***/
   a.HomeMenuChoice {
      display: block;
   }

   td.HomeMenuLeft {
      padding-left:.5em;
      padding-top:.5em;
      padding-bottom:.5em;
      padding-right:1em;
      text-align:left;
      vertical-align:top;
   }

   td.HomeMenuRight {
      border-left:solid gray 3px;
      padding-left:.5em;
      padding-top:.5em;
      padding-bottom:.5em;
      padding-right:1em;
      text-align:left;
      vertical-align:top;
   }