body
{
  margin: 0px;
  padding: 0px;
  font-family: "Calibri", Arial, Helvetica, sans-serif;
}

img
{
  border: 0px;
}

/****************************************************************
 ****************************************************************
 ****************************Menus and Banner*******************/

.bannerframe
{
  margin: 0px;
  padding: 0px;
  background-color: #768f95;
}

.bannertext
{
  position:absolute;
  font-family: Arial, Helvetica, sans-serif;
  top: 10px;
  left: 20px;
  color: white;
  font-size: 30pt;
}

.bannertextsmall
{
  position:absolute;
  font-family: Arial, Helvetica, sans-serif;
  top: 50px;
  left: 20px;
  color: white;
  font-size: 15pt;
}

.BasicWebMenuImage 
{ 
  margin: 0px;
  padding: 0px;
  vertical-align: top;
}

.BasicWebMenuDiv
{
  margin: 0px;
  padding: 0px;
  background-image: url('../Images/menubackgroundgradient.png');
  background-repeat:repeat-x;
  background-color: white;
}

.BasicWebSubMenuDiv
{
  background-color: #768f95;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
	padding-right: 0px;
  border-color: black;
  border-left: none;
  border-bottom: solid;
  border-right: none;
  border-top: none;
  border-width: 1px;
  margin: 0px;
}

.userBar
{
  background-color: #dee2e8;
  border-color: #b5b5b5;
  border-bottom: dashed;
  border-left: none;
  border-right: none;
  border-top: none;
  border-top: none;
  border-width: 1px;
  padding: 5px;
  margin: 0px;
  font-size: 10pt;
}

.BasicWebSubMenuSelection
{
  padding-top: 0px;
  padding-bottom: 11px;
  padding-left: 10px;
  padding-right: 10px;
  color: white;
  font-size: 10pt;
}

.contentframe
{
	margin: 0px;
	padding: 10px;
	background-color: white;
}

.textButton
{
  background-color: #768f95;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  padding: 3px;
  margin-left: 1px;
  margin-right: 1px;
  font-size: 12pt;
  font-weight: normal;
  color: white;
}

.tagText
{
  background-color: #a2b7b9;
  border-style: solid;
  border-width: 1px;
  border-color: #768f95;
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 1px;
  padding-bottom: 1px;
  margin-left: 2px;
  margin-right: 2px;
  font-size: 9pt;
  font-weight: normal;
  color: black;
}

.formButton
{
  background-color: gray;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  padding: 1px;
  margin-left: 1px;
  margin-right: 1px;
  font-size: 8pt;
  font-weight: normal;
  color: white;
}

.textButtonMessage
{  
  padding: 6px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 12pt;
  font-weight: normal;
  color: black;
}

.infoButton
{
  background-color: gray;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 3px;
  padding-right: 3px;
  margin-left: 3px;
  margin-right: 3px;
  font-size: 8pt;
  font-weight: bold;
  color: white;
}

.pageTypeBox
{
  background-color: yellow;
  float: right;
  border-style: solid;
  border-width: 2px;
  border-color: black;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 3px;
  padding-right: 3px;
  margin: 0px;
  font-size: 8pt;
  font-weight: bold;
  color: black;
}

/****************************************************************
 ****************************************************************
 **********************Classes related to detail pages**********/

.detailHeader
{
	background-color: #a6c8d9;
	padding: 10px;
}

.detailListItem
{
	border-width: 1px;
	border-color: #e1e1e1;
	border-style: solid;
}

/****************************************************************
 ****************************************************************
 **********************Form Controller Classes*******************/

fieldset
{
  border: none;
}

label
{
  font-size: 10pt;
}

input.basic
{
         margin: 3px;
         padding: 10px;
         border-style: solid;
         border-color: gray;
         border-width: 2px;
         background-color: #e0e0e0;
         font-size: 10pt;
}

select.basic
{
         margin:3px;
         padding: 10px;
         border-style: solid;
         border-color: gray;
         border-width: 2px;
         background-color: #e0e0e0;
         font-size: 10pt;
}

select.inputerror
{
         margin:3px;
         padding: 10px;
         border-style: solid;
         border-color: red;
         border-width: 2px;
         background-color: #ffbbbb;
         font-size: 10pt;
}

input.radiospacing
{
  padding: 5px;
}

input.checkboxstyling
{
  padding: 5px;
  font-size: 10pt;
  color: red;
}

textarea.basic
{
         margin:3px;
         padding: 10px;
         border-style: solid;
         border-color: gray;
         border-width: 2px;
         background-color: #e0e0e0;
         font-size: 10pt;
}

textarea.inputerror 
{
         margin:3px;
         padding: 10px;
         border-style: solid;
        border-color: red;
        background-color: #ffbbbb;
         border-width: 2px;
         font-size: 10pt;
}

/*Used with FormController.js to effect form appearence during error checking*/
input.inputerror {
        margin:3px;
         padding: 10px;
         border-style: solid;
        border-color: red;
        background-color: #ffbbbb;
         border-width: 2px;
         font-size: 10pt;
}

/*Used with FormController.js to effect form appearence during error checking*/
input.inputgood {
         margin:3px;
         padding: 10px;
         border-style: solid;
         border-color: green;
         background-color: #94c496;
         border-width: 2px;
         font-size: 10pt;
}

span.inputerrormessage
{
         color: red;
         font-weight: bold;
	 font-size: 9pt;
}

span.inputgoodmessage
{
         color: green;
         font-weight: bold;
	 font-size: 10pt;
}

span.inputcautionmessage
{
         color: orange;
         font-weight: bold;
}

/***************************END FORM CONTROLLER CLASSES**********
 ****************************************************************
 ****************************************************************/

.errorFont
{
  font-weight: bold;
  color: red;
}

.goodFont
{
  font-weight: bold;
  color: green;
}

.tooltip
{
         background-color: #f1e686;
         font-style: italic;
         border-color: black;
         border-style: solid;
         border-width: 1px;
         font-size: 9pt;
         font-weight: normal;
         padding: 3px;
         color: black;
         position: absolute;
         top: 0px;
         left: 0px;
         visibility: hidden;
         z-index: 7;
}

.questionmark
{
         font-size: 8pt;
         color: black;
         font-weight: bold;
         border-style: solid;
         border-color: black;
         border-width: 1px;
         background-color: #f1e686;
         padding-left: 2px;
         padding-right: 2px;
         
}

/***************FOR CONTAINERS*************************/

.containerShadow
{
  background-color: #115679;
  margin: 0px;
  padding: 0px;
}
.containerDiv
{
  padding: 0px;
  border: solid;
  border-width: 3px;
  background-color: white;
  overflow: hidden;
}
.containerSubDiv
{
  padding: 0px;
  border: solid;
  border-width: 2px;
  background-color: white;
  overflow: hidden;
}

.containerContent
{
  padding: 10px;
  font-size: 12pt;
}

.containerHeader
{
  margin: 0px;
  padding: 5px;
  overflow: auto;
  background-color: #768f95ff;
  /*background-image: url('../Images/menubackgroundgradient.png');
  background-repeat: repeat-x;*/
  font-weight: bold;
  color: white;
}
.containerHeaderLF
{
  margin: 0px;
  padding: 5px;
  overflow: auto;
  background-color: #768f95ff;
  /*background-image: url('../Images/menubackgroundgradient.png');
  background-repeat: repeat-x;*/
  font-weight: bold;
  font-size: 16pt;
  color: white;
}

.containerSubHeader
{
  margin: 0px;
  padding: 5px;
  overflow: auto;
  background-color: rgb(171, 196, 202);
  /*background-image: url('../Images/menubackgroundgradient.png');
  background-repeat: repeat-x;*/
  font-weight: bold;
  font-size: 13pt;
  color: black;
}

.stationdetaildiv
{
  padding: 10px;
  margin: 10px;
  background-color: white;
  border-style: solid;
  border-width: 3px;
  border-color: black;
}

.directoryUser
{
  padding: 10px;
  margin: 10px;
  background-color: white;
  border-style: solid;
  border-width: 2px;
  border-color: black;
}

/************TABLES**********************************/

table
{
	border-collapse: collapse;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	font-size: 12pt;
}
th
{
	background-color: #768f95;
	border-style: solid;
	background-image: url('../Images/menubackgroundgradient.png');
	background-repeat: repeat-x;
	border-width: 1px;
	border-color: black;
	font-size: 12pt;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
}
td
{
	border-style: solid;
	border-width: 1px;
	border-color: gray;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}

table.commentstable
{
	border-collapse: collapse;
	border-style: none;
	width: 95%;
	font-size: 10pt;
}

table.noformat
{
	border-style: none;
}
td.noformat
{
	border-style: none;
}

tr.commentstr
{
	border-bottom: solid;
	border-top: none;
	border-left: none;
	border-right: none;
	border-width: 1px;
	border-color: black;
}

td.commentstd
{
	border-bottom: none;
	border-top: none;
	border-left: none;
	border-right: solid;
	border-width: 1px;
	border-color: black;
	text-align: left;
}

td.commentstdnb
{
	border-bottom: none;
	border-top: none;
	border-left: none;
	border-right: none;
	text-align: left;
}

td.userprofile
{
	text-align: center;
	vertical-align: top;
	width: 200px;
}

/***************FOR EXPANDABLE LISTS*************************/

.listItem {
  border-bottom: solid;
  border-width: 1px;
  border-color: black;
  margin: 0px;
  padding: 5px;
  overflow: auto;
  font-size: 10pt;
}
.listItemHeader {
  font-size: 12pt;
  font-weight: bold;
  margin: 0px;
  padding: 3px;
}
.listItemInfo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 95%;
  margin: 0px;
  padding: 5px;
  visibility: hidden;
  border-top: dotted;
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-width: 1px;
  border-color: gray;
  font-size: 10pt;
}

.listItemForm {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 95%;
  margin: 0px;
  padding: 5px;
  visibility: hidden;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-width: 1px;
  border-color: gray;
  font-size: 10pt;
}

.portraitImageContainer
{
	border-style: solid;
  border-width: 1px;
  border-color: black;
	background-color: white;
}

.portraitImage
{
	border-style: solid;
  border-width: 1px;
  border-color: black;
	padding: 0px;
	margin: 0px;
  max-width: 175px;
}

.portraitImageStation
{
	border-style: solid;
  border-width: 1px;
  border-color: black;
	padding: 0px;
	margin: 0px;
  max-width: 300px;
}

.userOptions
{
	border-style: dashed;
  border-width: 2px;
  border-color: black;
	background-color: #ece7d9;
}

.imageLoadingDiv {
	position: absolute;
  top: 0px;
  left: 0px;
	visibility: hidden;
}

.imageFormDiv {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 300px;
  margin: 0px;
  padding: 5px;
  visibility: hidden;
  border-style: solid;
  border-width: 3px;
  border-color: black;
  font-size: 12pt;
  background-color: white;
}

.imageOptionsDiv {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 120px;
  margin: 0px;
  padding: 5px;
  visibility: hidden;
  font-size: 10pt;
}

.listItemHeaderSmall {
  font-size: 10pt;
  font-weight: bold;
  margin: 0px;
  padding: 3px;
}

/***************PASSWORD TOGGLE BUTTONS*************************/

.passwordToggleContainer {
      position: relative;
      display: inline-block;
    }
    .toggle {
      position: absolute;
      right: 8px;
      top: 50%;
      /*transform: translateY(-20%);*/
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
    }
    .toggle svg {
      width: 20px;
      height: 20px;
      fill: #555;
    }