body
{
  margin: 0;
  padding: 0;
  font-size: 75%; /* this reduces the overall font size so we can use 12px = 9pt = .75em */
}

#wrapper 
{
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  background-color: #fff;
  width: 100%;
}

#header
{
  min-width: 800px;
  background-color: #857D6F;
  width: 100%;
  min-height: 110px;
}

#headerleft {
  float: left;
  background-image: url("https://micor.agriculture.gov.au/Style%20Library/MicorFiles/Images/DepartmentLogo.png");
  display: block;
  background-repeat: no-repeat;
  background-position: left center;
  margin: 0px 0px 0px 20px;
  height: 110px;
  width: 343px;
}

#headerright
{
  float:right;
  font-size: 30px;
  color: #ffffff;
  display: table;
  height: 110px;
  padding-right: 20px;
}

#headerright p
{
  margin :0;
  padding:0;
  display: table-cell;
  vertical-align: middle;
}

#dhtmlpointer
{
  position: absolute;
}

#title
{
  clear: both;
  margin: 0 20px 0 20px;
  background-color: #857D6F;
  padding: 8px 0 8px 10px;
  margin-top: 15px;
  color: #fff;
  font-weight: bold;
  font-family: Verdana, Arial;
  font-size: 1.1em;
}

#navigation 
{
  clear: both;
  margin: 0 20px 0 20px;
  background-color: #c0c0c0;
  padding: 5px 0 5px 10px;
  font-family: Verdana, Arial;
  font-size: 1em;
  height: 25px;
}

#content
{
  margin: 0 20px 20px 20px;
  border: 1px solid #d9d9d4;
  padding: 10px;
}

#content h1
{
  font-family: Verdana, Arial;
  font-size: 1.6em;
  font-weight: bold;
  color: #003466;
}

#content h2
{
  font-family: Verdana, Arial;
  font-size: 1.4em;
  font-weight: bold;
  color: #003466;
}

#content h3
{
  font-family: Verdana, Arial;
  font-size: 1.2em;
  font-weight: bold;
  color: #003466;
}

#content p, span, td
{
  font-family: Verdana, Arial;
  font-size: 1em;
  color: #000;
}

#footer
{
  clear: both;
  background-color: #003466;
  text-align: center;
  padding: 10px 0 10px 0;
  color: #fff;
  font-family: Verdana, Arial;
  font-size: 1em; 
}

/*****************************************************************************
 The following styles are for the menu behaviours,
 they can be manipulated as per application requirements
******************************************************************************/
.menuStatic
{
    font-family:Verdana !important;
    color:#003466 !important;
    font-size:small !important;
    background-color:Silver;
    padding:3px !important;
}
.menuHover
{
    font-family:Verdana !important;
    color:White !important;
    background-color:Silver !important;
    font-size:small !important;    
    padding:3px !important;
}

#menu ul.static li > a {
	display : inline-block;
	width: 80px;
}

#menu ul.static li li a {
	display : block;
	width: 210px;
}


/*****************************************************************************
 The following styles are classes for the DAFF framework
******************************************************************************/

.information
{
    width: 100%;
  clear: both;
  vertical-align:bottom;
  margin: 0.25em 0 0.25em 0;
  -moz-box-sizing: border-box; /*we want the width to include the border, not just the content*/
}

.information .fieldLabel
{
  float:left;
  display: inline; /*ie fix http://www.positioniseverything.net/explorer/floatIndent.html*/
  clear: left;
  text-align: left;
  width:12em;
  vertical-align:bottom;
  
}

.information label
{
  white-space: nowrap;
  float:left;
  display: inline; /*ie fix http://www.positioniseverything.net/explorer/floatIndent.html*/
  text-align: left;
}


.data
{
  width: 100%;
  clear:both;
  margin: 0 0 0 0;
}

/* .fieldLabel is the label in the left of a daff field */

.fieldLabel     /* the labels don't play nicely with the input controls - they don't center properly against the text input*/
{
  position: relative;
  text-align:right !important;
  color:#000000 !important;
  width:22em;
  padding:9px;
  white-space: normal;
  float:left;
  display: inline; /*ie fix http://www.positioniseverything.net/explorer/floatIndent.html*/
  vertical-align: middle;
}

/* .field is the data in the right of a daff field */

.field
{
  margin-left: 25em;
  padding-top:5px;
  clear: right;
  vertical-align: middle;
}

/* .fieldDescription is the text to the right of the field */

.fieldDescription
{
  margin-bottom:8px;
  clear: right;
  font-style: italic;
  color: Navy;
  vertical-align: top;
}

/* .fieldTopMargin simply creates a top margin for fields that have dropdownlists or tables etc */

.fieldTopMargin
{
  margin-top: 5px;
}

.twoLineFieldLabel label      /* the labels don't play nicely with the input controls - they don't center properly against the text input*/
{
  top: 0px !important;
}

.fieldLabelMandatory
{
    position: relative;
  font-size: 1em;
  font-weight:bold;
  color: Red;
}

.data[id] .fieldLabel   /*Mozilla doesn't display it properly but ie doesn't support attribute selectors so will ignore this. Fix for Moz*/
{
  position:static;
  top: auto;
  bottom: auto;
  margin:auto;
}

.data label     /* the labels don't play nicely with the input controls - they don't center properly against the text input*/
{
  position: relative;
  top: 5px;
  text-align:left;
  float:left;
}
.data[id] label   /*Mozilla doesn't display it properly but ie doesn't support attribute selectors so will ignore this. Fix for Moz*/
{
  position:static;
  top: auto;
  bottom: auto;
  margin:auto;
}


.details
{
  margin-left: 17em;
}

.details[id]         /*do not apply the workaround to nice browsers*/
{ 
  text-indent: 0;
  margin-left: 17em;
}

.data .field
{
  margin-left: 24em;
  width: auto;
}

.dataFieldLabel
{
  position:relative;
  top:5px;
}

.mandatory .fieldLabel
{
  color: #00A0E0;
}

.section
{
    font-family: Verdana, sans-serif;
  position: relative;
  width: 97%;
  overflow: auto;
  padding: 5px;
  margin-top: 7px;
  margin-right: auto;
  margin-bottom: 7px;
  margin-left: auto;
  border: solid 1px #d9d9d4; 
  background-color: #fdfdfd;
  text-align:left;
}

.messageSection
{
    
    position: relative;
  width: 97%; /*must have a width for ie to position corners correctly*/
  overflow: auto;
  padding: 5px;
  margin-top: 7px;
  margin-right: auto;
  margin-bottom: 7px;
  margin-left: auto;
  border: solid 1px red;
  background-color: #fdfdfd;
}

.messageSectionYellowBorder
{
    
    position: relative;
  width: 97%; /*must have a width for ie to position corners correctly*/
  overflow: auto;
  padding: 5px;
  margin-top: 7px;
  margin-right: auto;
  margin-bottom: 7px;
  margin-left: auto;
  border: solid 1px #fedb2f;
  background-color: #fdfdfd;
}

.messageSection h2
{
  font-size:small;
  font-family: Verdana, sans-serif;
  color: #003366;
  padding: 0;
  margin: 0;
  text-indent: 2px; 
}

.messageDescription
{
    font-size:small;
    font-family: Verdana, sans-serif;
  color: black;
  text-indent: 2px;   
  text-align:left;
}

.ButtonMargin
{
  margin-top: 5px;
  margin-left:5px;
}

.invalid
{
  border: red 1px solid;
  background: #ffcccc;
  padding: 0.125em;
  margin: 1px;
}

.invalidValue
{
  color: red !important;  /*make it important just in case anything else is trying to touch the colors*/
}

/*****************************************************************************
 The following styles are for the gridView behaviours,
 they can be manipulated as per application requirements
******************************************************************************/
.gridRow
{
    background-color:#f9f9f9;
    color:#000000;
    font-size:small;
    text-align:left;    
}
.gridAlternateRow
{
    background-color:#f2f2f2;
    color:#000000;
    font-size:small;   
    text-align:left;        
}
.gridHeader
{
    background-color:#ebebeb;
    color:#000000;
    font-size:small;  
    text-align:left;       
}

.FormDate
{
  width: 115px;
  color: #E60000;
}

.FormTiny
{
  width: 54px;
}

.FormSmall
{
  width: 150px;
}

.FormMedium
{
  width: 280px;
}

.FormLarge
{
  width: 390px;
}

.CheckboxPadding
{
  margin-left: -4px;
}

textarea
{
  font-family: Arial, Verdana;
  font-size: 1.1em;
}

#HomeMenu ul li
{
  list-style-type: square;
  padding-top: 10px;  
}

/* the following hack is to make detailsview align with a gridview when detailsview is 99% and gridview is 100% - for some reason
detailview's seem to get an extra table cell put in at the start making alignment between the two controls impossible */

.DetailsViewAlignmentFix
{
  border-right: 8px #FFFFFF solid;
  border-left: 2px #FFFFFF solid;
}

.FormatGridViewAsTable
{
  border-right: 0;
  border-bottom: 0;
}

.CheckBoxAlign
{
  margin-left: -4px;
}

.LabelNoPadding
{
  padding: 5px;
  margin: 0;
}

.skipnav 
{
     text-align: left;
}

.skipnav a 
{
     position: absolute;
     left: -10000px;
     width: 1px;
     height: 1px; 
     overflow: hidden;
 }
 
 .skipnav a:focus, .skipnav a:active 
 {
     position: static;
     left: 0;
     width: auto;
     height: auto;
     overflow: visible;
     text-decoration: underline;
  } 
  
.btnPnl
{
    border: none;
}

.legendVisibility
{
   visibility: collapse;         
}

label.error {
   float: none;
   margin-left: 5px;
   color: #cc0000;
}

.SiteMapPath
{
    color:#000000;
}

.sortAsc a
{
    display:block; padding: 0 4px 0 15px;
    background-image:url(~/Images/sort_ascend.png) no-repeat;
}

.sortDes a
{
    display: block; padding: 0 4px 0 15px;
    background-image:url(~/Images/sort_descend.png) no-repeat;
}

th a
{
    padding-right: 20px;
}

.sr-only {
  border: 0 none;
  clip: rect(0px, 0px, 0px, 0px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.dateHint
{
    position:absolute;
    left: 150px;
    bottom:60px; 
}

.dateHintExport
{
    position:absolute;
    left: 150px;
    bottom:285px;
    
}
.warningText
{
    color: Red;
}
.phonePosition
{
    position:absolute;
    left:150px;
}