/*
 * Theme Name: NC Drought Management Advisory Council
 * Description: updated NC DMAC theme
 * Theme URI: https://www.ncdrought.org/
 * Author: Richard Ebersohl
 * Author URI: https://www.ncwater.org/
 * Version: 1.0.0
 */


/* ============================================================================
 *		BASICS
 * ============================================================================ */

/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,menu,nav,output,ruby,section,summary,time,mark,audio,video {padding:0;margin:0;font-size:100%;vertical-align:baseline;border:0}
article,aside,details,figcaption,figure,footer,header,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}a:focus{outline:0}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:''}
table{border-collapse:collapse;border-spacing:0}
img,object,embed,video{max-width:100%}
object,embed,video{width:100%}img{height:auto;vertical-align:middle;border:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}

/* layout */
html { height: 100%; overflow-y:scroll;}
body { width: 100%; min-width: 280px; background: #fff;
	font-size: 16px/1.4;
	/*font: 16px/1.4 'Open Sans', Tahoma, Verdana, Segoe, sans-serif;
	font-family: 'Cardo', serif;*/
	font-family: 'Roboto', serif;
	color: #222; word-wrap: break-word;
	/*background-image: url('img/wood2.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center; */
}

/* inline html tags */
a { color: #222; }
a:hover { color: rgb(5,80,160); }

p { padding: 0.25em 0 0.75em 0; line-height:1.3}
p:last-child { padding-bottom: 0; }

h1, h2 {
	text-align: center;
}
h1, h2, h3, h4, h5, h6 { 
	margin: 0;
	line-height: 1.1;
	/*font-family: 'PT Serif', TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;*/
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
}
h2, h3, h4, h5, h6 {
	padding: 0.5em 0 0.25em ;
}
h1 { font-size: 32px; padding: 0; }
h2 { font-size: 28px; margin-bottom:50px; padding-bottom: 15px;position: relative;}
h2:after {content:""; position: absolute; margin: auto; right: 0; bottom: 0; left: 0; width: 25%; height: 1px; background-color: #aaa;}
h3 { font-size: 22px; }
h4, h5, h6 { font-size: 18px; }
@media screen and (min-width: 768px){
	h1 { font-size: 36px; padding: 0; }
	h2 { font-size: 30px; }
	h3 { font-size: 24px; }
	h4 { font-size: 20px; }
	h5, h6 { font-size: 18px; }
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; }

blockquote, q { 
	position: relative;
	padding: 30px 30px 30px 80px;
	margin: 10px 0 20px 30px;
	color: #444;
	font: normal 1em/1.2 'PT Serif', TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
	background: #EFEFEF;
	border-left: 3px solid rgb(5,80,160);
	border-radius: 3px;
	display: block;
}
blockquote:after {
	content: '”';
	position: absolute;
	top: 10px;
	left: 20px;
	font-size: 4em;
	line-height: 1;
}

table th { background: #ddd; border-right: 1px solid #fff; padding: 10px 20px; }
table tr th:last-child { border-right: 1px solid #ddd; }
table td { padding: 8px 9px; border: 1px solid #ddd; vertical-align: middle;}
table {
	margin: 0 auto 10px;
	font-size: 90%;
	width: 98%;
}

pre { background: #f5f5f5; border: 1px solid #ddd; padding: 10px; text-shadow: 1px 1px rgba(255, 255, 255, 0.4); font-size: 12px; line-height: 1.25; margin: 0 0 1em 0; overflow:auto }
sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline }
sup { bottom: 1ex }
sub { top: .5ex }
small { font-size: 75% }
big { font-size: 125% }

/* forms */
input, textarea, select, button {
	padding: 10px 10px 10px 0;
	border-color: #ddd;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font: 300 16px/1.25 'Open Sans', Tahoma, Verdana, Segoe, sans-serif;
	color: #222;
}
textarea { 
	min-height: 90px; 
	max-width: 100%; 
	box-sizing: border-box;
}
textarea,
select,
input[type=text], 
input[type=password], 
input[type=email], 
input[type=url], 
input[type=tel], 
input[type=date], 
input[type=datetime], 
input[type=datetime-local], 
input[type=time],
input[type=month], 
input[type=week], 
input[type=number], 
input[type=search] { 
	padding: 9px 10px;
	border-width: 1px; 
	border-style: solid;
	min-height: 20px;
	/*height: 20px; */
}
input[type=search] { 
	height: 40px;
}
input[type=color] { 
	padding: 0; 
	border: 0; 
	background: #fff;
}
input:focus, textarea:focus, select:focus {
	outline: none; 
	border-color: rgb(5,80,160); 
	-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.08); 
	box-shadow: inset 0 0 8px rgba(0,0,0,0.08); 
}
input[type=submit], 
input[type=button],
button, .submit, .button {
	padding: 10px 20px;
	min-height: 20px;
	/*height: 40px;*/
	line-height: 20px;
	border: 0;
	background-color: rgb(5,80,160);
	color: #fff;
	cursor: pointer;
}
input[type=submit]:hover, 
input[type=button]:hover,
button:hover,
.submit:hover,
.button:hover {
	opacity: 0.9;
}
figcaption {
	color: #aaa;
	font: 10px/0.75 'Open Sans', Tahoma, Verdana, Segoe, sans-serif;
	padding: 4px 3px;
}
dl {
	overflow: hidden;
}
dt, dd {
	float: left;
}
dt {
	clear: both;
}

/* misc */
.clear:before, .clear:after {
	display:table;
	line-height:0;
	content:"";
}
.clear:after{clear:both}
.fl{float:left}
.fr{float:right}
.b{font-weight:bold}
.i{font-style:italic}
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.pn{padding:0}
.mn{margin:0}
.hide{display:none}
.cols:after {
	content: "";
	display: table;
	clear: both;
	margin: 0 auto;
}
.cols-two div {
	float: left;
	width: 49%;
}

/* wrapper */
#wrapper {
	background: #fff;
	margin: 15px auto 0;
	/*max-width: 1160px;*/
	max-width: 960px;
}

/* adaptive */
@media screen and (min-width: 1024px) {
	#wrapper { width: 100%; }
}
/* ============================================================================ */


/*-------------------------------------
material icon customization
-------------------------------------*/
.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 16px;  /* default icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	padding: 0 2px;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	-webkit-font-feature-settings: 'liga' 1;
	
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: 'liga' 1;

	/* Support for IE. */
	font-feature-settings: 'liga' 1;

	/* transitions */
	-webkit-transition: 0.3s;
	transition: 0.3s;
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
}
li:hover .rotate90 {
	transform: rotate(90deg);
}



/* ============================================================================
 *		HEADER
 * ============================================================================ */

/* logo */
#logo {
	float: left;
	width: 150px;
	height: 180px;
	position: relative;
}
#logo img {
	position: absolute;
}
.logo-calc-width {	/* use in conjunction with margin-left: auto; margin-right: 0; */
    width: -webkit-calc(100% - 75px);
    width:    -moz-calc(100% - 75px);
	width:         calc(100% - 75px);
}

/* mobile navigation button */
#mobile-menu { display: block; padding: 15px 0; text-decoration: none; text-transform: uppercase; color: #fff;
	text-align: center; font-weight: 500; cursor: pointer; background: rgb(5,80,160);/*#eee;*/ z-index: 999; position: relative; }
#mobile-menu:hover { opacity: 0.8; }

/* top navigation */
header nav {position: relative; text-align: center; margin: 0 0 0 auto;}
#top-menu {
	background: rgb(5,80,160);
	position: relative; z-index: 1000;}
#top-menu li { padding: 0; display: block; }
#top-menu li a {
	display: block; padding: 15px 20px; color: #fff; line-height: 50px;
	font-weight: 500; text-decoration: none; position: relative; cursor: pointer;
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
	font-weight: 300;
}
#top-menu li:hover  {
	background-color: rgba(255,255,255,0.2);
}
#top-menu .current-page > a {
	background-color: rgba(0, 0, 0, 0.22)
}
#top-menu .sub-menu { margin: 0;}
#top-menu .sub-menu li a {line-height:25px;}

/* site title */
#page-title {
	background-color: rgb(230,230,230);
	color: rgb(75,75,75);
	text-align: center; margin: 0 auto;
	padding-bottom: 25px;
}
.underline {
	border-bottom: 2px solid currentColor;
	display: inline-block;
	line-height: 0.85;
	text-shadow:
	  2px 2px white,
	  2px -2px white,
	  -2px 2px white,
	  -2px -2px white;
}

/* adaptive */
@media screen and (min-width: 1024px) {
	
}

@media screen and (max-width: 1023px) {
	#top-menu { margin-top: 1px; box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.25); }
	#top-menu .sub-menu li a { padding: 10px 20px; }
	#top-menu .sub-menu { margin: 0 0 0 20px; font-size: 14px; }
	#top-menu li.has-child { position: relative; }
	#top-menu a { border-bottom: 1px solid #ffffff1a; }
}
/* ============================================================================ */



/* ============================================================================
 *		CONTENT
 * ============================================================================ */

 /* main */
main { padding: 0 15px 30px; margin: 0 auto; position: relative;}

/* metaslider (front page) */
div[id^="metaslider"], div[id*="metaslider"] {
    position: relative; top: -45px; margin: 0 0 -104px; padding: 0;
}

/* metaslider overrides */
.metaslider .nivo-caption {	/* metaslider-nivo-slider-css */
	left: auto;
	right: 0px;
	bottom: 50px;
	background-color: rgba(0,0,0,0.9);
	width:33%;
	padding: 20px;
}

/* iframes */
.iframe-container {
	position: relative;
	overflow: hidden;
	padding-top: 56.25%; /* aspect ratio of the content (in case of 16:9 it is 9/16= 0.5625) */
}
.iframe-container iframe {
	position: absolute;
	border: 0;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

/* content */
main ul,
main ol { margin: 0.5em 0 1em 50px; }
main ul { list-style: outside url("img/li.svg"); }
main ol { list-style: decimal; }
main ul ul,
main ul ol,
main ol ol,
main ol ul { margin-top: 0; margin-bottom: 0; }
main li { padding-top: 5px; }
main ul li { padding-left: 5px; position: relative; }

div.body-block {
	display: flex;
	background-color: rgba(75, 165, 255, 1);
	border: 1px solid #f2f2f2;
	margin: 0 0 25px;
	padding: 0;
}
.mh175 {
	min-height: 175px;
}
div.body-block h3 {
	color: white;
	text-align: right;
	padding: 10px 20px 10px 10px;
	flex: 0 0 15%;
}
div.body-block h3.bg {
	color: rgba(0, 0, 0, 0.8);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
div.body-block:target {
	background-color: rgba(5, 80, 160, 0.8);
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
}
div.block-content {
	background-color: white;
	padding: 15px 15px 15px 25px;
	width: 100%;
}
div.contact {
	min-height: 128px;
	margin: 0 0 50px 0;
	width: 100%;
}
div.contact img {
	border: none;
	margin: 0 20px 0 0;
	padding: 0;
	height: 128px;
	width: 128px;
	float: left;
}

/* for maps display on "current conditions" page */
#logo-bar {
	display: inline-block;
	margin: 15px 0 -2%;
	float: right;
	padding-right: 75px;
}
#logo-bar h4 {
	font-size: 18px;
	float: left;
	text-align: right;
}
#logo-bar h4 span {
	font-size: 160%;
	letter-spacing: 2px;
}
#logo-bar div {
	margin: 8px 0 0 200px;
}
#logo-bar div img {
	height: 50px;
	float: left;
	margin: 0 10px;
	opacity: 0.75;
}
#logo-bar div img:hover {
	opacity: 1;
}
.usdm-map {
    background-position: center;
    background-size: cover;
	display: flex;
	min-width: 517px;
	min-height: 275px;
	padding: 0 0 4%;
}
.usdm-map > span {
	display: none;
	font-size: 14px;
    align-self: flex-end;
	padding: 0 0 5% 20%;
	text-align: center;
	color: #aaa;
}
.usdm-map span > span {
	font-size: smaller;
}

.legend {
	display: inline-block;
	font-size: 13px;
	margin: -10.5% 0 0 16%;
}
.legend h4 {
	font-family: 'Roboto', serif;
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 10px;
}
.legend dt {
	min-height: 13px;
	border: 1px solid #ddd;
	min-height: 13px;
	width: 13px;
	margin: 0 5px 5px 0;
}
.D0 {
	background-color: rgb(255,255,0);
}
h4.D0:after {
	content: " - Abnormally Dry";
}
.D1 {
	background-color: rgb(252,211,127);
}
h4.D1:after {
	content: " - Moderate Drought";
}
.D2 {
	background-color: rgb(255,170,0);
}
h4.D2:after {
	content: " - Severe Drought";
}
.D3 {
	background-color: rgb(230,0,0);
}
h4.D3:after {
	content: " - Extreme Drought";
}
.D4 {
	background-color: rgb(115,0,0);
	color: white;
}
h4.D4:after {
	content: " - Exceptional Drought";
}
#legend-sl {
	float: right;
	width: 55%;
	font-size: 70%;
	margin-top: 3%;
}

.countylist {
	font-size: 12px;
	margin-left: 25px;
	min-width: 180px;
}
.countylist div {
	border: 1px solid #efefef;
	margin: 5px 0 15px;
}
.countylist h4 {
	border-bottom: 1px solid #efefef;
	font-family: 'Roboto', serif;
	font-size: 110%;
	padding: 5px 10px 6px;
	text-align: center;
	font-weight: bold;
}
.countylist ul {
	list-style-type: none;
	margin: 5px 0 10px;
	padding-left: 5px;
}
.countylist p {
	border-top: 1px solid #efefef;
	background-color: #f2f2f2;
	padding: 6px 0 4px 10px;
}

#advisory {clear:both;margin-top:30px;}
#advisory div {margin: 25px 20px;}
#advisory h4 {
	border: 1px solid #efefef;
	padding: 7px 0 7px 10px;
}

#assessment {
	border:2px solid rgb(230,0,0);
	background-color:#eee;
	font-size:85%;
	clear:both;
	margin:25px 25px -10px;
	padding:10px 8px 9px;
	text-align:center;
}

/* adaptive */
@media screen and (min-width: 1024px) {
	main {margin: 0 25px 0 125px;}
	div.fp > main {
		margin: 0; padding: 0 0 0 75px;
		text-align: center;
	}
}
/* ============================================================================ */


/* ============================================================================
 *		FOOTER
 * ============================================================================ */
 
footer {padding: 15px 0; margin: 10px 0 0 auto; background: rgb(5,80,160); color: #fff; font-size: 14px; line-height: 1.25; text-decoration: none; position:relative; border-top: 2px solid rgb(40,80,100);}
footer a {color: #fff; transition: opacity 0.3s;}
footer a:hover { color: #ddd; text-decoration: underline; }

.footer-menu { border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 30px; }
.footmenu { padding: 0 0 20px 0; margin: 0; text-align: center; }
.footer-menu li { display: inline-block; padding: 5px 10px; }
footer .footer-menu a:hover { color: #fff; opacity: 0.7; }

#logo-foot {
	margin: 0 auto 20px;
	padding: 0;
	text-align: center;
}
#logo-foot h4, #logo-foot div {
	display: inline-block;
}
#logo-foot h4 {
	font-size: 14px;
	text-align: right;
	margin-right: 15px;
}
#logo-foot h4 span {
	font-size: 135%;
	letter-spacing: 1px;
}
#logo-foot div {
	margin: 0;
}
#logo-foot div img {
	height: 38px;
	float: left;
	margin: 0 10px;
	opacity: 0.9;
}
#logo-foot div img:hover {
	opacity: 1;
}

#site-copy { text-align: center; /*font-size: 12px;*/ opacity:0.5; font-size:80%;}
#toTop { position: fixed; z-index: 1000; bottom: 20px; right: 20px; margin: 0; padding: 14px 12px; display: none; cursor: pointer;
	background: #222; color: #fff !important; border-radius: 3px; transform: rotate(-90deg); font-size: 24px; text-align: center; }
#toTop:hover { background: #999; text-decoration: none !important; border-radius: 3px; }
/* ============================================================================ */



/* ============================================================================
 *		ADAPTIVE
 * ============================================================================ */

/* ___ Laptop/Tablet (> 768px )  --------------------------------------------- */
@media only screen and (min-width: 768px)  {
	#page-title {background-color: rgb(230,230,230);
		background-image: url(../img/bg_drought.jpg);
		background-position: 100% 100%;
		background-repeat: no-repeat;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;}
	header .searchform { display: block; float: right; margin: 35px 0 0; }
	#copy {text-align: left; padding-bottom: 0;}
	#designedby {text-align: right;}
}

/* ___ Desktop (> 1024px ) ------------------------------------------------ */
@media only screen and (min-width: 1024px) {
	
	#mobile-menu { display: none; }
	#top-menu {text-align: center;}
	#top-menu li { display: inline-block; position: relative; }
	#top-menu > li {margin: 0 10px;}
	#top-menu li a { border-bottom: 0; color: #fff; -webkit-transition: background 0.3s; transition: background 0.3s; text-transform: uppercase; font-weight: bold;}
	#top-menu > li:hover > a { background: rgba(255,255,255,0.3);  }
	#top-menu .sub-menu { display: none; margin: 0; position: absolute; top: 100%; left: 0; background: rgb(50,125,175); width: 300px; z-index: 1000;  box-shadow: 3px 3px 0 rgba(0,0,0,0.1); }
	#top-menu .sub-menu li { display: block; text-align: left;}
	#top-menu .sub-menu li a { color: #fff; border-top: 1px solid rgba(255,255,255,0.2); font-weight: normal; padding-left:35px;}
	#top-menu li:hover > .sub-menu { display: block; }
	#top-menu .sub-menu .sub-menu { display: none; top: 0; left: 100%; padding: 0; border-top: 0; border-left: 3px solid #fff; }
	#top-menu .sub-menu li:hover > .sub-menu { display: block; }
	/*#top-menu .has-child > a:after {
		content: "\E3BA";
		position: absolute; right: 20px; margin: 1px 0 0 15px;
	}*/
	#top-menu .has-child > a {
		padding-right: 10px;
	}
	#top-menu .sub-menu {
		top: 85%;
	}
	#top-menu .sub-menu li a {font-size: 16px; line-height:16px;}

}

/* ___ Desktop (> 1200px ) ------------------------------------------------ */
@media only screen and (min-width: 1280px) {
	
}
/* ============================================================================ */