body {
    margin: 0%;
    font-size: 10pt;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    padding: 5px;
    color: #656565;
    display: block;
}

/*
* Master page styles -
* Change these as little as possible 
* so that users will have a consistent experience between Ecology applications.
*/
.banner {
    border-collapse: collapse;
    border: none;
    background-color: #7194B6;/*#45759A;*/
    height:59px;
    width:100%;
}

.bannerLogoArea {
    border:none;
    margin:0%;
    padding:0%;
    width:257px;
}

    .bannerEcologyLink {
        border: none;
        text-decoration: none;
    }

    .bannerEcologyLogo {
        border: none;
        margin:0%;
        padding:0%;
        width:257px;
        height: 57px;
        display:block;
    }

.bannerTitleArea {
    border: none;
    margin:0%;
    padding:0%;
    white-space: nowrap;
    /*You can replace this image with an image to represent your application. 
    Use an imaged sized to the same height as the banner. 
    Adjust the width of the background height as needed.*/
    background-image:url(../Images/sa_banner_right_a.jpg);
    background-size: 244px 57px;
    background-position:right center;
    background-repeat:no-repeat;
}

    .bannerAppTitle {
        text-align: left;
        font-family: Georgia, serif;
        font-size: 140%;
        color: white;
        white-space: nowrap;
    }

    .bannerAppEnvironment {
        text-align: left;
        font-family:Arial;
        padding-left: 2%;
        color: #ffcc66;
    }


.menu {
    vertical-align: middle;
    background-color: #234f78;
    margin: 0%;
    padding-bottom: 5px;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

    .menu li {
        display: inline;
        font-weight: bold;
        margin: 0px 1%;
        white-space: nowrap;
    }

        .menu li a {
            color: white;
            text-decoration: none;
        }

            .menu li a:hover {
                color: white;
                text-decoration: underline;
            }

.mainContent {
    padding: 10px 2%;
}

.footer {
    text-align: left;
    padding: 10px 1%;
    background-color: transparent;
	color: #999999;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 8pt;
	font-weight: bold;
	text-decoration: none;
}

.version {
    text-align: left;
    padding-left:2%;
    width: 100%;
    white-space: nowrap;
    color: #999;
    font-size: 61%;
}

.copyright a {
    text-align: left;
    width: 100%;
    white-space: nowrap;
    color: #999;
    font-weight: normal;
    padding: 0;
    text-decoration:none;
}
/*master page styles - end*/

/*These styles are used throughout the demo, but are useful for ui elements common to most applications. 
    You can change them, extend them, or replace them to fit your application.*/
h1 {
    font-weight: bold;
    font-size: 120%;
}

h2 {
    color:#d65f37;
    font-weight: bold;
    font-size:12pt;
}

.inputFieldLabel {
    line-height: 1.6;
    font-weight: bold;
    color: #1a3b69;
    vertical-align: top;
}

.inputFieldLabelAbove {
    display:block;
    margin-top:10px;
    line-height: 1.6;
    font-weight: bold;
    color: #1a3b69;
    vertical-align: top;
}
.fieldHint {
    /*Nest the field hint in its related label so that it gets picked up by screen readers*/
    font-weight:normal;
    color:#333;
}

.readOnlyFieldLabel {
    line-height: 1.6;
    font-weight: bold;
    color: #1a3b69;
}

.readOnlyFieldText {
    line-height: 1.6;
}

.imageLink {
    color: #0066cc;
    text-decoration: none;
    display: inline-block;
    padding: 5px 0%;
}

.lesserImageLink {
    color: #0066cc;
    text-decoration: none;
}

.primaryButtonStyle
{
    margin:10px 0%;
    font-weight: bold;
    cursor: pointer;
    color: white;
    background-color:#d65f37;
    border: white 1px solid;
    padding: 5px 2%;
}

.buttonStyle
{
    margin:10px 0%;
    font-weight: bold;
    cursor: pointer;
    color: white;
    background-image: url(Images/ButtonBGDarkBlue.jpg); /*url(~/Content/Images/ButtonBGDarkBlue.jpg);*/ 
    background-repeat: repeat-x;
    border: white 1px solid;
    padding: 5px 2%;
    background-size: 100% 100%;
}

.buttonLinkStyle {
    background: none !important;
    color: #1a3b69;
    border: none;
    padding: 0 !important;
    font: bold;
    /*border is optional
    border-bottom: 1px solid #444;*/
    cursor: pointer;
    display: inline-block; 
    vertical-align:top; 
    margin-top:15px;
}

.errorSummary {
    display: block;
    color: red;
}

.errorFieldMarker {
    vertical-align: top;
    color: Red;
    font-weight: bold;
}

/*table styles - start*/
.table {
    border: 1px solid #828282;
    border-collapse: collapse;
    background: #fff;
    line-height: 1.4;
    width: 90%;
}

    .table tr:nth-child(odd) td,
    .table tr:nth-child(odd) th {
        background-color: #F2F2F2;
    }

    .table td {
        border: none;
        padding: 4px 7px;
    }

    .table th {
        border: none;
        background-color: #eee;
        font-weight: normal;
        text-align: left;
        padding: 9px 7px;
        white-space: nowrap;
    }
.tableDocs {
    border: none;
    border-collapse: collapse;
    background: #fff;
    line-height: 1.4;
    width: 100%;
}

    .tableDocs tr:nth-child(odd) {
        background-color: #fff;
    }

    .tableDocs td {
        border: none;
        padding: 4px 7px;
    }

    .tableDocs th {
        border: none;
        background-color: #fff;
        text-align: left;
        padding: 9px 7px;
        white-space: nowrap;
    }
.sortLink {
    border-style: none;
    color: #333;
    text-decoration: none;
}

.sortLinkSelected {
    font-weight: bold;
    border-style: none;
    color: #333;
    text-decoration: none;
}

.pagingContainer {
    padding: 4px 0%;
    min-width: 300px;
    font-size: 70%;
    line-height: 1.4;
}
/*table styles - end*/

.sectionHeader {
	background-image: url(Images/ButtonBGDarkBlue.jpg);
    background-repeat: repeat-x;
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	padding:5px;
	text-decoration:none;
    width:401px;
    border:0;
}
.sectionHeader:hover {
	font-weight:bold;
}
.sectionHeader:active {
	position:relative;
	top:1px;
}
.sectionInfo {
    width:399px;
    border: 1px solid gray;
    -moz-border-radius: 1em;
    word-wrap:break-word;
    padding: 5px;
    /*float:left;*/
}
.menuWrapper {
    display:inline-block;
    vertical-align:middle;
    margin-top: 0;
    margin-bottom: 0;
}
.linkDocuments{
    color: #0066cc;
    text-decoration: underline;
    padding: 5px;
}
.noLinkDocuments{
    padding: 5px;
    color: #656565;
    display: block;
}
.noLinkDocumentsBold{
    padding: 5px;
    color: #656565;
    font-weight: bold;
}
.documentHeaders{
    color:#d65f37;
    background-color: #fff;
    border: none;
    font-weight: bold;
    font-size: 11pt;
    padding: 2px;
    text-align: left;
}
.divHeaders{
    color: darkblue;/*#d65f37;*/
    font-weight: bold;
    font-size: 12pt;
    padding: 2px;
    background: none;
    border: 0;
    text-align: left;
}
/*Testing Menu*/
.container-fluid {
    display: flow-root;
    background-color: #234f78;
    font-family: Verdana, Arial, sans-serif;
}
    .container-fluid a {
        float: left;
        color: white;
        text-align: center;
        padding: 5px 15px 5px 15px;
        text-decoration: none;
    }
.dropdown {
    float: left;
    position: relative;
}
.dropdown .dropbtn {
    border: none;
    outline: none;
    color:white;
    padding: 5px 15px 5px 15px;
    background-color: #234f78;
}
    .container-fluid a:hover, .dropdown:hover .dropbtn {
        text-decoration: underline;
    }
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #234f78;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: 0;
}
.dropdown-content a {
    float: none;
    color: white;
    padding: 6px 15px 5px 15px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: Verdana, Arial, sans-serif;
}
.dropdown-content a:hover {
    background-color: #7194B6;
    text-decoration: underline;
}
.dropdown:hover .dropdown-content {
    display: block;
}
a.exportToExcel {
    background: url(Images/ExportToExcel.gif) no-repeat top left;
     display: block;
     width: 120px;
     float:right;
}
/*Home Page*/
.validValuesHome {
    font-size: 10pt;
    color: #0066cc;
    text-decoration: underline;
    padding: 5px;
}
.lightGreyMed
{
	color: #A6A6A6;
	font-family: Verdana, Helvetica, Arial, sans-serif;
}
.darkGreyMed
{
	color: #666666;
	font-family: Verdana, Helvetica, Arial, sans-serif;
}
.darkGreyLrg
{
	color: #666666;
	font-size: 12pt;
	font-family: Verdana, Helvetica, Arial, sans-serif;
}
.orangeHdr
{
    color: #CC6836; 
    font-size: 16px; 
    font-family: Trebuchet MS;
    text-decoration: none;
}
.monitoringProgramsBkgrd
{
    background-color: #F2F2F2;
    padding: 10px;
    width:300px;
    height: 250px;
    cursor: pointer;
}
.monitoringProgramsHdr
{
    font-size: 12pt;
    font-weight: bold;
    color: #336699;
    text-decoration: none;
}
.faqAnswer {
    border: none;
    -moz-border-radius: 1em;
    word-wrap:break-word;
    padding: 5px;
    white-space: pre-line;
    /*float:left;*/
}
.faqQuestion {
    line-height: 1.6;
    font-weight: bold;
    color: #1a3b69;
    vertical-align: top;
    padding-left: 5px;
    padding: 2px;
    background: none;
    border: 0;
    text-align:left;
    cursor: pointer;
}

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

.alertBanner {
    background-color: #fdf3ed;
    border-left: 5px solid #CC6836;
    border-top: 1px solid #CC6836;
    border-right: 1px solid #CC6836;
    border-bottom: 1px solid #CC6836;
    color: #7a3a18;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    padding: 12px 15px;
    margin-bottom: 10px;
    display: block;
}