@import url('/webfiles/css/web-tools.css');
@import url('/webfiles/css/web-colors.css');
@import url('/webfiles/css/web-buttons.css');
@import url('/webfiles/css/web-spacing.css');
@import url('/webfiles/css/ndmc-web-tools.css');
@import url('/webfiles/css/web-content-area.css');
@import url('/webfiles/css/web-tables.css');
@import url('/webfiles/css/web-navigation.css');
@import url('/webfiles/css/web-frames.css');
@import url('/webfiles/css/ndmc-responsive.css');

/*#f6f6f6*/

:root {
    --main-bg-color: #b1aca8;
    --light-bg-color: #cfccc9;
    --dark-bg-color: #928c87;
    --main-text-color: #67625f;
    --menu-bg-color: #e6ddd5;
    --navbar-txt-color: #ffffff;
    --titlebar-color: #ffffff;
    --footer-bot-color: #ffffff;
    --main-link-color: blue;
}

body {color:var(--main-text-color);}

a {color: var(--main-link-color);}
p > a{text-decoration:underline!important;}

#title-bar{color:var(--titlebar-color);background-color:var(--main-text-color);}
#navigationbar{background-color:var(--main-bg-color);}
#navmenu {color:var(--navbar-txt-color);}

/* Root Menu */ 
#navmenu li span {color: var(--navbar-txt-color);}
#navmenu > li > a {color: var(--navbar-txt-color)}
.menu-current{background-color: var(--light-bg-color);color: var(--main-text-color)}
.menu-active{background-color: var(--dark-bg-color);}
li.menu-current > a{color: var(--main-text-color)!important;}
li.menu-active > a{color: white!important;}

/* 2nd Menu */
#navmenu li:hover li a {
    background: var(--menu-bg-color);
    color: var(--main-text-color);
    border-bottom: 1px solid var(--main-text-color);
}
.menu2-active{ background: var(--main-text-color)!important; color: #fff!important; }

/* mobile navigation*/
#mobilenav {
    background-image:url('/images/nav-burger-white.png');
    border:1px solid white;
    border-radius:5px;
    padding:5px;
    cursor:pointer;
}

#navigationbar #mobilenav:hover {
    background-color: var(--dark-bg-color);
    background-image: url('/images/nav-burger-white.png');
    color: var(--navbar-txt-color);
}


h1,h2,h3,h4,h5,h6{color:var(--main-text-color);}

#page-title-inner h1{color:#4C4947}

footer{font-size:18px;}
#footer-top{background-color:var(--menu-bg-color);}
#footer-bottom {background-color: var(--main-bg-color);color: var(--footer-bot-color);}


@media (max-width: 630px) {
    #navmenu li{background:var(--menu-bg-color);border-bottom:1px solid var(--main-text-color);}
    #navmenu > li > a{color:var(--main-text-color);}
    #navmenu > li.menu-active{color: #fff; background-color:var(--main-text-color);}
    #navmenu > li.menu-active a{color:#fff;}
}

.icon-dir { background: url('../images/dir-sprites.png'); background-repeat: no-repeat; display: inline-block; }
.icon-refresh { width: 16px; height: 16px; background-position: -2px -179px; }
.icon-positive { width: 16px; height: 16px; background-position: -23px -146px; }
.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;}

/*Legend Colors*/
.lgd-02{background-color:#720000;}
.lgd-05{background-color:#E60000;}
.lgd-10{background-color:#FFAA00;}
.lgd-20{background-color:#FCD47F;}
.lgd-30{background-color:#FFFF00;}
.lgd-70{background-color:#FFFFFF;}
.lgd-80{background-color:#BCF9FE;}
.lgd-90{background-color:#74D3FF;}
.lgd-95{background-color:#3D88FF;}
.lgd-98{background-color:#181CF9;}
.lgd-100{background-color:#2300D8;}

.lgd-box{width:30px;height:15px;border:1px solid #333333;display:inline-block;}
.lgd-item{display:block;}

.lgd-pct-0{background-color:#ffffff;}
.lgd-pct-1{background-color:#feebe2;}
.lgd-pct-2{background-color:#fbb4b9;}
.lgd-pct-3{background-color:#f768a1;}
.lgd-pct-4{background-color:#c51b8a;}
.lgd-pct-5{background-color:#7a0177;}

.lgd-dsci-0{background-color:#ffffff;}
.lgd-dsci-1{background-color:#ffffb2;}
.lgd-dsci-2{background-color:#fecc5c;}
.lgd-dsci-3{background-color:#fd8d3c;}
.lgd-dsci-4{background-color:#f03b20;}
.lgd-dsci-5{background-color:#bd0026;}


.gray{background-color:#eee;}

.codebox{
    background-color:gainsboro;
    color:black;
    border:1px solid darkgray;
    padding:10px;
    margin-top:10px;
    margin-bottom:10px;
}

.codebox p{margin-bottom:0!important;}