*{ margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body { background: #e8e6dc url('../images/background.jpg') no-repeat; font: 12px/18px 'Open Sans', Arial, Helvetica, sans-serif;}
body.hawaii{background: #e8e6dc url('../images/Hawaii1.png') no-repeat;}

a {color: #5e8846;}
a:hover {color: #5e8846;}

/*Custom Font Styles */
p {
    color: #666666;
    margin-bottom: 1em;
    font-size: 14px;
}

h2,h3 {
  color: #67625f;
  font-weight: 600;
  font-size: 21px;
  margin-bottom: 10px;
  line-height:normal;
}

/*
        .lnktxt { color: #0000ff; text-decoration: none; border-bottom: 1px solid #d4ccb0; cursor: pointer; }
        .lnktxt:hover { text-decoration: none; border-bottom: 1px solid #5e8846; }
*/

.bttn:hover{cursor:pointer;}

#pg-container {max-width:1024px; margin: 15px auto 100px auto; }
#pg-cont {height:768px;}

/* page specific css */
#pg-sub-container { padding: 10px; max-width: 984px; margin: 0 auto; font-size: 1.1em; }
#pg-sub-container > h1 { font-size: 30px; color: #67625f; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 2.2em; font-weight: 600; margin: 18px 0 15px 0;line-height:normal; }
#pg-sub-container > h2 { font-size: 21px; color: #67625f; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 1.8em; font-weight: 600; margin: 15px 0 15px 0; }
#pg-sub-container > h3 { font-size: 21px; color: #67625f; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 1.4em; font-weight: 600; margin: 15px 0 15px 0; }
#pg-sub-container > h4 { font-size: 21px; color: #67625f; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 1.2em; font-weight: 600; margin: 15px 0 15px 0; }
#pg-sub-container > p { font-size: 14px; color: #666666; margin-bottom: 1em; }
#pg-sub-container > .txt-indent { margin: 10px 50px; }

.dir-usr-frm > h1 { color: #666666; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 2.4em; font-weight: 600; margin: 15px 0 15px 0; }

#title-bar {height: 30px;padding: 5px 15px 5px 20px; float: right; margin-top: 25px;font: normal 18px/20px 'Open Sans', Arial, Helvetica, sans-serif, "Microsoft Sans Serif";background-color: #5e8846;border-radius:10px 0 0 0;box-shadow:3px 0 0 0 rgba(55,35,20,0.2) }
#title-bar-hi {height: 30px;padding: 5px 15px 5px 20px; float: right; margin-top: 25px;font: normal 18px/20px 'Open Sans', Arial, Helvetica, sans-serif, "Microsoft Sans Serif"; background-color: #2f4a22;border-radius:10px 0 0 0;box-shadow:10px 0 0 0 rgba(55,35,20,0.2)  }
#title-rt-endcap { float: right; height: 40px; width: 3px;  background: transparent url('../images/pg-sd-shdw.png') repeat-y; }
#title-rt-endcap-hi { float: right; height: 40px; width: 3px;  background: transparent url('../images/pg-sd-shdw.png') repeat-y; }
#title-lt-endcap { float: right; height: 40px; width: 20px; background: transparent url('../images/title-lftcap.png') repeat-x; }
#title-lt-endcap-hi { float: right; height: 40px; width: 20px; background: transparent url('../images/title-lftcap-hi.png') repeat-x; }
#title-txt { float: right; background-color: #5e8846; padding: 10px 15px 0 0; color: #ffffff; letter-spacing: -1px; }
#title-txt-hi { float: right; background-color: #2f4a22; padding: 10px 15px 0 0; color: #ffffff; letter-spacing: -1px; }
#title-txt a, #title-txt-hi a { font-weight:bold; font-size: 12px; line-height: 20px; float: left; padding-right: 20px; text-decoration: none; color:#ffffff; letter-spacing: 0; }


#content { background: #fff;box-shadow:3px 0 0 0 rgba(55,35,20,0.2); }
#footer{ color: #fff;  background: #2f4a22; min-height:40px; clear:both; padding: 10px 24px 25px 24px;box-shadow:3px 0 0 0 rgba(55,35,20,0.2);border-radius:0 0 8px 8px;border-top:3px solid #5e8846; }
#footer a {color:#FFFFFF;text-decoration: underline;}

.icon-dir { background: url('../images/dir-sprites.png'); background-repeat: no-repeat; display: inline-block; }
.icon-cat-01 { width: 16px; height: 16px; background-position: -2px 0; }
.icon-cat-02 { width: 16px; height: 16px; background-position: -2px -18px; }
.icon-cat-03 { width: 16px; height: 16px; background-position: -2px -36px; }
.icon-cat-04 { width: 16px; height: 16px; background-position: -2px -54px; }
.icon-cat-05 { width: 16px; height: 16px; background-position: -2px -72px; }
.icon-cat-06 { width: 16px; height: 16px; background-position: -2px -90px; }
.icon-cat-07 { width: 16px; height: 16px; background-position: -2px -108px; }
.icon-cat-08 { width: 16px; height: 16px; background-position: -2px -126px; }
.icon-cat-09 { width: 16px; height: 16px; background-position: -2px -144px; }
.icon-cat-10 { width: 16px; height: 16px; background-position: -2px -162px; }
.icon-cat-11 { width: 16px; height: 16px; background-position: -2px -213px; }
.icon-cat-12 { width: 16px; height: 16px; background-position: -2px -231px; }
.icon-cat-13 { width: 16px; height: 16px; background-position: -22px -214px; }
.icon-cat-14 { width: 16px; height: 16px; background-position: -22px -232px; }
.icon-cat-15 { width: 16px; height: 16px; background-position: -22px -196px; }
.icon-rpt-01 { width: 20px; height: 16px; background-position: -22px -1px; }
.icon-rpt-02 { width: 16px; height: 16px; background-position: -22px -20px; }
.icon-rpt-03 { width: 16px; height: 15px; background-position: -22px -39px; }
.icon-rpt-04 { width: 16px; height: 16px; background-position: -22px -56px; }
.icon-rpt-05 { width: 16px; height: 16px; background-position: -22px -74px; }
.icon-rpt-06 { width: 16px; height: 16px; background-position: -22px -92px; }
.icon-rpt-07 { width: 16px; height: 15px; background-position: -2px -196px; }
.icon-rpt-08 { width: 16px; height: 16px; background-position: -22px -110px; }
.icon-rpt--1 { width: 16px; height: 16px; background-position: -22px -128px; }
.icon-refresh { width: 16px; height: 16px; background-position: -2px -179px; }
.icon-positive { width: 16px; height: 16px; background-position: -23px -146px; }
.icon-state { width: 30px; height: 10px; background-position: -22px -164px; }
.icon-photo { width: 16px; height: 16px; background-position: -23px -176px; }

.noaa-logo {background: url('../images/NOAA_logo_web.png');background-image: url('../images/NOAA_logo.svg'), none;}


/* horizontal navigation */
#navigationbar{ height: 35px; background:#2f4a22; font-family: 'Open Sans', Arial, Helvetica, sans-serif, "Microsoft Sans Serif"; clear:both;border-top:3px solid #5e8846;box-shadow:3px 0 0 0 rgba(55,35,20,0.2);}
#navigationbar-hi{ height: 35px; background: #5e8846; font-family: 'Open Sans', Arial, Helvetica, sans-serif, "Microsoft Sans Serif"; clear:both;border-top:3px solid #2f4a22;box-shadow:3px 0 0 0 rgba(55,35,20,0.2);}
#nav-endcap{ float:right; width: 4px; height: 42px; background: transparent url('../images/nav-endcap.png') repeat-x left top; }
#nav-endcap-hi{ float:right; width: 4px; height: 42px; background: transparent url('../images/nav-endcap-hi.png') repeat-x left top; }
#navmenu { list-style:none; font-size:12px; color:#fff; padding-top: 0; text-align:center; }
#navmenu li { float: left; list-style: none; z-index: 1002; }
#navmenu ul { width: 140px; list-style: none; display: none; position: absolute; top: 115px; filter:alpha(opacity=95); -moz-opacity:.95; opacity:.95; padding: 3px 0; z-index: 1002;}
#navmenu ul:after { clear: both; display: block; height: 0; visibility: hidden; z-index: 1002;}
#navmenu li:hover ul, #navmenu ul li:hover ul, #navmenu ul ul li:hover ul { display: block; }

/* Root Menu */
#navmenu li span { cursor: default; padding: 11px 0 6px 0; float: none !important; float: left; display: block; color: #fff; text-decoration: none; height: auto !important; z-index:10; text-align: center; width: 125px; font-weight:bold;  border-right: 1px solid #efece3;}
#navmenu a { padding: 11px 0 6px 0; float: none !important; float: left; display: block; color: #fff; text-decoration: none; height: auto !important; z-index:10; text-align: center; width: 125px; font-weight:bold;  border-right: 1px solid #efece3;}
#navmenu a:hover { color: #2f4a22; background-color: #efece3; }

/* 2nd Menu */
#navmenu li:hover li a { float: left; background: #5e8846; color: #ffffff; width: 140px; padding:6px 10px; text-align:left; z-index:20; border-bottom:1px solid  #2f4a22; font-weight:bold; }
#navmenu li:hover li a:hover{ background: #efece3; color: #2f4a22; }

/* mobile navigation*/
#mobilenav {
    display: none;
    background-image:url('/images/nav-burger-white.png');
    background-position:center;
    background-repeat:no-repeat;
    width:18px;
    height:17px;
    margin-left:10px;
    margin-top:5px;
    font: Verdana;
    border:1px solid white;
    border-radius:3px;
    padding:3px;
    cursor:pointer;
}

    #navigationbar #mobilenav:hover {
        background-color:white;
        background-image:url('/images/nav-burger-green.png');
    background-position:center;
    background-repeat:no-repeat;
        color:#2f4a22;
    }

    #navigationbar-hi #mobilenav:hover {
        background-color:white;
        background-image:url('/images/nav-burger-lgreen.png');
    background-position:center;
    background-repeat:no-repeat;
        color:#5e8846;
    }

/* expandable columns */
.thirds {width: 31%;float:left;margin-top:10px;}
.two-thirds {width: 62%;float:left;}
.indent.half {width:44%;float:left;}
.half{width:49%;float:left;}

.clear{clear:both;}

input, select {font-size:1em!important}
td{font-size:10pt;}

#ctl00_ContentPlaceHolderContent_btnSubmit{font-size:1.1em!important;}

#left_side_map_summary {
    width: 67%;
    height: 768px;
}

#right_side_ctrls {
        width: 32%;
    }

#tabsCtrls {

}

#tblLegendImpacts, #tblLegendReports,#tblLegendDecl, #tblLegendUSDM {
    font-size:12px;
}

#tblLegendImpacts td, #tblLegendReports td,#tblLegendDecl td, #tblLegendUSDM td{
    padding:2px;
}

#tblHLCaseListImpacts td, #tblHLCaseListReports td, #tblHLCountsReports table td,  #tblHLCountsImpacts table td {
    font-size:12px;
}

#tblHLCaseListImpacts td a strong, #tblHLCaseListReports td a strong, #tblHLCountsReports legend h3, #tblHLCountsImpacts legend h3{
    font-size:14px;
}

#tblHLCaseListImpacts td h3, #tblHLCaseListReports td h3 {
    font-size:12px;
}

@media (max-width: 980px) {
    .thirds {width: 30%;}
    .two-thirds{width: 60%;}
}

@media (max-width: 900px) {
    .cat-list td{font-size:0.7em;}
    input, select{font-size:0.8em!important;}
    textarea.dir-txt-block, input.dir-txt-block, input.dir-txt-inline, textarea.dir-txt-inline {font-size: 10pt!important;}

}

@media (max-width: 875px) {
    .thirds {width: 100%;}
    .two-thirds {width: 100%;}
    .indent.half, .half {width:100%;}
    #left_side_map_summary,#right_side_ctrls {
        width: 100%;
        height: 100%;
    }
    #tabsCtrls {

    }

    #pg-cont {height:auto;}
}

@media (max-width: 630px) {
    #navmenu {display: none;margin-top:5px;}
    #navmenu li{width:100%!important;background:#5e8846; filter:alpha(opacity=95); -moz-opacity:.95; opacity:.95;border-bottom:1px solid #2f4a22;}
    #navmenu li:last-of-type{margin-bottom:10px;}
    #navmenu a{width:100%;border-right:none;text-align:left;padding-left:20px;padding-right:-20px;height:40px;}
    #navmenu ul {display:none;}

    #mobilenav {display:inline-block;}
    #navmenu li:hover ul, #navmenu ul li:hover ul, #navmenu ul ul li:hover ul { display: none; }


    .dir-clm .lft{width:100%!important;}
    .dir-clm .rgt{width:100%!important;border-left:none!important;margin-top:10px;}

    .dir-lbl-inline{font-size:0.8em;}

    .originalDisplayInfo {font-size:0.8em;}
}

.not-shown{display:none;}
.shown{display:block!important;}
.overtop{float:left;}

/*replacement for blink tag*/
.blink {
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    81% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWELVE  */
.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
  	width: 91.58%;
}
.span_10_of_12 {
  	width: 83.16%;
}

.span_9_of_12 {
  	width: 74.75%;
}

.span_8_of_12 {
  	width: 66.33%;
}

.span_7_of_12 {
  	width: 57.91%;
}

.span_6_of_12 {
  	width: 49.5%;
}

.span_5_of_12 {
  	width: 41.08%;
}

.span_4_of_12 {
  	width: 32.66%;
}

.span_3_of_12 {
  	width: 24.25%;
}

.span_2_of_12 {
  	width: 15.83%;
}

.span_1_of_12 {
  	width: 7.416%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }

    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
	width: 100%;
	}
}