body
{
    text-align: center; background-color:white;
    overflow: auto;
}

hr
{
    margin: 2px 0px;
}

a, input
{
	outline: none;
}

a img, :link img, :visited img
{
	border: 0px;
}

div.PageContainer
{
    /*background-color:#FFFFE8;*/
    width:980px;
    margin-right:auto;
    margin-left:auto;
    /*border: 3px green solid;*/
}

#OuterContainer
{
  width: 980px;
  background-color:#FFFFE8;
  /*border: 3px blue solid;*/
}
a:link {color:#006600;text-decoration: none; }
a:visited {color:#006060; }
a:hover { text-decoration:underline; color:#003366;}
a:active {}

a.NavLink:link {color:White; text-decoration: none;}
a.NavLink:visited {color:White; text-decoration: none;}
a.NavLink:hover { text-decoration:underline; color:#003366;}
a:NavLink:active {}

div.NavBarStyle
{
    width: 980px;
    height:26px;
    background-image: url('../images/navbar2.gif');
    background-repeat: repeat-x;
    text-align:left; color:White;
    background-color:#FFFFE8;
    font-size: .9em;}
/*div.NavBarStyle{font-size: 1.25em; width: 985px; height: 23px; background-color: grey; background-repeat: repeat-x; text-align:left; color:White;  border-style: ridge; border-bottom: #24292E 3px solid;   border-right: #24292E 3px solid;}
*/
ul.MainUL
{
    list-style-position: inside;
    color:#006600; /*#006600;B3EFC0*/
    margin-top: 0;
    /*margin-bottom: 0;*/
}

h1.MainH1{font-size: 1.5em;  color: #003366; font-weight:normal; margin-top:0; margin-bottom:2px; }
h2.MainH2
{
    font-size: 1.5em;
    color: #003366;
    font-weight: normal;
    margin-top: 5px;
    margin-bottom: 5px;
}

h3.MainH3
{
    font-size: 1em;
    color: #003366;
    font-weight: normal;
    margin-top: 5px;
    margin-bottom: 5px;
}

/*div.MainContent{background-color:#FFFFE8; float:left; margin-right:1em; margin-left:0px; margin-top:1em; width: 100%; border: 3px coral solid;

}*/
div.MainContent
{
    margin-right:1em;
    margin-left:0px;
    width: 100%;
    /*border: 3px coral solid;*/
}


div.Main2Divs{float:left; margin-right:1em; margin-left:45px; margin-top:1em; width: 250px; }

h2.Main2H2{font-size: 1em; color: Navy; font-weight:normal; margin-top:0; margin-bottom:0; text-align:left;}

p.blurbs{font-size: .75em; color: Navy; margin-top:0; text-align:left }

p.footer {font-size: .75em; color: Navy; margin-top:0; text-align:center }

p.credits {font-size: .75em; color: Navy;  margin-top:0; text-align:center }

span.faq
{
	color:Navy;
	font-size:1.05em;
}


div.support
{
    float:left;
    width:240px;
    margin:0;
    padding:1em;
}
div.contacts
{
    margin-left:280px;
    border-left:1px solid navy;
    padding:1em;
}

textarea
{
    resize: none;
}

/****************/
.slideshow { height: 232px; width: 232px; margin: auto }

.modernBorder
{
    border: solid 1px #A1A1A1;
    margin: 0px;
    padding: 0px;
}

.smallFont2
{
    font-size: .9em;
}

.geoResults
{
    position: relative;
    top: 2px;
}
/*******/
.MainCon
{
	float:left;

	margin-left:123px;
	margin-top:2em;


	}

#POPWarningDiv {
    position: relative;
    display: none;
    width: 370px;
    height: 20px;
    margin: 2px auto;
    z-index: 90;
    text-align: center;
}

#POPWarningBackgroundDiv
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00008B;
    opacity: 0.75;
    filter: alpha(opacity=75);
}

#POPWarningInnerMsgDiv
{
    position: relative;
    float: left;
    color: White;
    font-family: Arial, sans-serif !important;
    font-size: 8.5pt !important;
    font-weight: bold !important;
    text-align: center;
    top: 2px;
    left: 5px;
}

#POPWarningInnerCloseDiv {
    position: relative;
    float: right;
    width: 16px;
    height: 16px;
    color: White;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 8.5pt !important;
    font-weight: bold !important;
    text-align: center;
    border: 1px solid white;
    top: 1px;
    right: 1px;
}

#shapesToolbarContainer {
    position: relative;
    display: none;
    width: 430px;
    height: 45px;
    margin: 0px auto;
    z-index: 90;
}

#shapesToolbarBackground {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 139, .75)
}

#shapesToolbarContent {
    position: relative;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}

.shapes-tool {
    display: inline-block;
    width: 50px;
    margin: 3px;
    overflow: hidden;
}

.shapes-tool span {
    display: block;
}


.shapes-tool > label {
    display: block;
    color: rgba(255, 215, 0, .5);
}

    .shapes-tool > label:hover {
        color: rgba(255, 215, 0, 1);
        cursor: pointer;
    }

    .shapes-tool > label.active {
        color: rgba(255, 215, 0, 1);
    }

#tag_contentDiv {
    background-color: #ECE9D8;
}

#tag_contentDiv h2 {
    font-size: 120%;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #aaa;
    color: #003a6b;
    background-color: transparent;
}

#tagTextContainer {
    width: 98%;
    height: 60%;
    margin: 0 auto .5em auto;
    text-align: center;
}

#tagButtonsContainer {
    width: 98%;
    margin: 0 auto;
    text-align: center;
}

#tagText {
    border: solid 1px #C9C9C9;
    width: 96%;
    height: 100%;
    padding: 0 1.5%;
}

#result_num {
    line-height: 10px;
}

#result_numTD
{
     padding: 0px 5px 5px 0px;
}

div.tabbed
{
    z-index: 90;
    position: relative;
	width: 980px;
}

div.tabbed .tabs
{
    width: 100%;
    height: 16px;
    text-align: left;
    background-color: #006060;
    overflow: hidden;
}

div.tabbed .tab
{
    padding: 0px 20px;
    float: left;
    height: 100%;
    background-color: #006060;
    text-align: center;

    font-family: 'Arial', sans-serif !important;
    font-size: 10pt !important;
    color: 	White;
    cursor: pointer;
}

    div.tabbed .tab:hover {
        background-color: #003366;
        cursor: pointer;
    }

div.tabbed .tab.active
{
    color: #003366;
    border-left: solid 1px #c4c4c4;
    border-right: solid 1px #c4c4c4;
    border-top: solid 1px #c4c4c4;
    background-color: #f7f7f7;
}

div.tabbed .content
{
    display: none;
    border-width: 0px;
}

div.tabbed .view {
    background-color: #f7f7f7;
    padding: 2px 5px;
    border-left: solid 1px #c4c4c4;
    border-right: solid 1px #c4c4c4;
    border-bottom: solid 3px #006060;
    overflow: hidden;
}

#reviewDetailsPane
{
    width: 60%;
    /*height: 140px;*/
    overflow: auto;
    font-family: arial, sans-serif;
    /*display: none;*/
}

#commentsPane
{
    width: 100%;
    height: 60px;
    overflow: auto;
    font-family: arial, sans-serif;
}

/*historical maps section*/
#historical-map-selector {
    width: 150px;
    height: 310px;
    top: 140px;
    left: 0;
    position: absolute;
    z-index: 1000;
    background-color: white;
}

.selected-map {
    font-weight: bold;
    font-style: italic;
}

.hidden {
    display: none;
}

#historical-map-inner {
    overflow-x: auto;
    overflow-y: scroll;
    /* Firefox */
    height: -moz-calc(100% - 39px);
    /* WebKit */
    height: -webkit-calc(100% - 39px);
    /* Opera */
    height: -o-calc(100% - 39px);
    /* Standard */
    height: calc(100% - 39px);
}

.historical-map-object {
    border: 1px solid black;
    margin-top: 2px;
    margin-bottom: 2px;
    border-radius: 5px;
    text-align: center;
}

#historical-map-object-download a {
    color:white;
}

.historical-map-object > #historical-map-object-inner {
    visibility: hidden;
    height: 0;
    transition: visibility 0s, opacity 0.5s linear;
}

.historical-map-object:hover > #historical-map-object-inner {
    visibility: visible;
    height: auto;
}

#additional-map-options {
    z-index: 1001;

    direction: ltr;
}
#slidecontainer {
    width: 97%; /* Width of the outside container */
    height: 15px;
    padding-bottom: 2px;
    padding-top: 2px;
}

.slider {
    -webkit-appearance: none;
    padding: 0px 0px 0px 0px;
    margin-left: 2px;
    margin-right: 2px;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}
.slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    margin-left: 2px;
    margin-right: 2px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}
.slider::-ms-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}
.layer-group-container {
    z-index: 1001;
}
.actuator-caption {
    position: relative;
    top: 2px;
    vertical-align: super;
    margin-left: 1px;
}
.actuator-img {
    margin-left: 1px;
}
.actuator-img:hover {
    cursor: pointer;
}

#country_input {
    width: 300px;
}

#country_matches > span {
    display: block;
    padding-left: 5px;
    padding-right: 5px;
}

#country_matches {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: .833em;
    width: 300px;
    border: 1px solid #A1A1A1;
    border-top: 0;
    position: absolute;
    display: none;
    background-color: white;
    z-index: 9999;
    overflow: hidden;
}

.bath-widget {
    display: none;
}

.dlg-muted {
    color: #365984;
    font-style: italic;
}

/*************************************** EXPANDABLE WORKBENCH AREA ***************************************/

.resize-handle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10px;
    overflow: hidden;
}

.resize-handle {
    width: 24px;
    height: 24px;
    cursor: ns-resize;
}

html.resizing, body.resizing {
    cursor: ns-resize !important;
}

/* Make the tabbed component a flex box. */
div.tabbed {
	display: flex;
	flex-direction: column;
}

/* Make the tabbed component's view area resize on flex. */
div.tabbed .view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Make the workbench content height resize on flex. "display: flex" gets set by the JS when showing/hiding the workbench. */
#workbench_content {
    flex-direction: column;
    flex: 1 1 auto;
}

    /* Make the workbench content table's desired cells resize on flex. */
    #workbench_content > table,
    #workbench_content > table tr.resizing-row,
    #workbench_content > table td.resizing-cell {
        height: 100%;
    }

/* Make desired DOM elements inside .resizing-row resize on flex. */
    #workbench_content textarea {
        height: 100%;
        box-sizing: border-box;
    }

#credentialUpdateP {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

#credentials {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

    #credentials > table,
    #credentials > table tr.resizing-row,
    #credentials > table td.resizing-cell {
        height: 100%;
        padding: 0;
    }

        #credentials > table td.resizing-cell > div {
            height: 100%;
            box-sizing: border-box;
        }

/* Firefox-only height to force flex divs inside tds to scroll. */
@supports (-moz-appearance:none) {

    .ff-only-height-90 {
        height: 90px !important;
    }

    .ff-only-height-75 {
        height: 75px !important;
    }

    .ff-only-height-123 {
        height: 123px !important;
    }
}

#work {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

    #work > table,
    #work > table tr.resizing-row,
    #work > table td.resizing-cell {
        height: 100%;
        padding: 0;
    }

        #work > table td.resizing-cell > div {
            height: 100%;
            box-sizing: border-box;
        }

#results_content {
    flex-direction: column;
    flex: 1 1 auto;
}

#results_wrapper {
    flex: 1 1 auto;
}

#history_content {
    flex-direction: column;
    flex: 1 1 auto;
}

    #history_content > table,
    #history_content > table tr,
    #history_content > table td {
        height: 100%;
        padding: 0;
    }

#historyPanel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#historyRecords {
    flex: 1 1 auto;
    margin-bottom: 1px;
}

#review_content {
    flex-direction: row;
    flex: 1 1 auto;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    align-items: flex-start;
}

#reviewMgtPane {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#reviewDetailsPane {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#commentsPane {
    flex: 1 1 auto;
}

#reviewDetailsContent {
    flex: 1 1 auto;
}