/* Cascading Style Sheets (CSS)
 * # is used to name id's 
 * . is used to name classes
 */

.article{
			background-repeat:no-repeat;
			background-position:right;
			background-size:95%;
			height:160px;
			background-color:#E1EDBE;
			border: medium solid #E1EDBE;
			} 

.article:hover{
			background-color:#ADB17F;
			border-color:#ADB17F;
			}


a:link.menuitem		{
	Margin: 10px;
	text-decoration: none;
	font-size: 12pt;
	color: #FFFFFF;
	display: block;
	font-family: 'PT Sans Caption', sans-serif, Arial;
	font-weight: normal;
}
a:visited.menuitem	{
	Margin: 10px;
	text-decoration: none;
	font-size: 12pt;
	color: #C0C0C0;
	display: block;
	font-family: 'PT Sans Caption', sans-serif, Arial;
	font-weight: normal;
}
a:hover.menuitem	{
	Margin: 10px;
	text-decoration: none;
	font-size: 12pt;
	color: #FF0000;
	display: block;
	font-family: 'PT Sans Caption', sans-serif, Arial;
	font-weight: normal;
}
a:active.menuitem	{
	Margin: 10px;
	text-decoration: none;
	font-size: 12pt;
	color: #99CCFF;
	display: block;
	font-family: 'PT Sans Caption', sans-serif, Arial;
	font-weight: normal;
}


body {
	margin:0 auto;					/* TODO: This may be better in the page_panel */
	background-color:#ffffff;
	font-size:100%;					/* All browsers will show same text size and will zoom/resize properly */
}

/* Fonts, Links and Margins (Padding) */
.hd1{
	font-family: 'Pathway Gothic One', sans-serif, Arial;
	color: #21759b;
	font-size: 28pt;
}
.hd2{
	font-family: 'Pathway Gothic One', sans-serif, Arial;
	color: #3C2105;
	font-size: 22pt;
}
.hd3{
	font-family: 'Pathway Gothic One', sans-serif, Arial;
	color: #21759B;
	font-size: 18pt;
}
a{
	color:#21759b;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
a.hd3{
	font-family:'PT Sans Caption', sans-serif, Arial;
}
.content_margin{
	padding:20px 35px;
}
.photo_credit{
	font-family: 'PT Sans Caption', sans-serif, Arial;
	color: #21759b;
	font-size: 9pt;
}

/* Some panels have transparent background color by default. 
 * Some panel's z-order may have to be adjusted to use a background color with the panel.
 * This will require adjusting the position property of the panel.
 */
#page_panel {
	border: thin solid black;			/* For testing - border: border-width border-style border-color */
	width: 100%;
	min-width: 1040px;					/* 800 to 980 pixels are supported by most browsers and monitors */;
	font-family: 'PT Sans Caption', sans-serif, Arial; /* All child tags inherit this */;
	font-size: 14pt;					/* Default size is 16px = 1em */
	color: #3C2105;
}

#header_panel {
	border:thin none black;			/* For testing - border: border-width border-style border-color */
	background-color:#EFF7E0;
	min-width:1040px;
}
#header_contents {
	border:thin none red;			/* For testing - border: border-width border-style border-color */
}
#header_banner {
	border-left:thin solid #afb8b9;border-right:thin solid #afb8b9;
	margin:0 auto;					/* Will center itself, horizontally, in parent container */
	width:1000px;
}
#header_banner_logo {
	border: thin none black;		/* For testing - border: border-width border-style border-color */
	background-image: url(images/cef_type_long.png);
	background-size: contain; /* cover;			/* May not be supported */
	background-repeat: no-repeat;
	background-position: left;
	height: 160px;
}

.center       {
	margin: 5px;
	text-align: center;
	font-family: 'PT Sans Caption', sans-serif, Arial;
	font-size: 12pt;
	line-height: normal;
	color: #000000;
}
               
.left       {
	margin: 5px;
	text-align: left;
	font-family: 'PT Sans Caption', sans-serif, Arial;
	font-size: 12pt;
	line-height: normal;
	color: #000000;
}
               
.right       {
	Margin: 5px;
	text-align: right;
	line-height: normal;
	font-family: 'PT Sans Caption', sans-serif, Arial;
	font-size: 12pt;
	color: #000000;
}
               
.menuitem {
	text-align: center;
	line-height: 100%;
	font-family: 'PT Sans Caption', sans-serif, Arial;
	font-size: 12pt;
	color: #3c2105;
	font-weight: normal;
	text-decoration: none;
}
.menubox  {
	border: 1px solid #EFF7E0;
	margin: 2px;
	font-family: 'PT Sans Caption', sans-serif, Arial;
	font-size: 12pt;
	font-weight: normal;
	text-align: center;
	display: block;
	color: #FFFFFF;
	background-color: #3c2105;
	margin-left: auto;
	margin-right: auto;
	width: auto;
}
.menutext  {
	Margin: 2px;
	font-family: 'PT Sans Caption', sans-serif, Arial;
	font-size: 12pt;
	font-weight: normal;
	text-align: center;
	display: block;
	color: #FFFFFF;
}

/* Navigation Menu 
 * TODO: Add code to adjust to resizing / zooming of text 
 * TODO: Full justification on individual menu items 
 * TODO: Spread main menu items evenly across <nav> 
 */
#nav_panel {
	border:thin none black;			/* For testing - border: border-width border-style border-color */
	background-color:#ffeecc;
/*	background-color:#3c2105;*/
	min-width:1040px;
	position:relative;z-index: 	1	/* Puts the nav menu above the top of the main_contents div box-shadow */
}
.nav_contents {
	border-left:thin solid white;			/* For testing - border: border-width border-style border-color */
	border-right:thin solid white;
	background-color:#3c2105; 
	margin:0px auto; 				/* Will center itself, horizontally, in parent container */
	padding:0px 0px 0px 0px;				/* Push menu to right or left (all li's move right or left) */
	width:1000px;
	height:35px;					/* Adjust the hight of the UL's, LI's, and A's if needed */
	text-align:left;
	color:#eff7e0;
}
.nav_contents ul { 					/* >>>>> TOP NAV MENU <<<<< */
	border-left:thin none white;			/* For testing - border: border-width border-style border-color */
	border-right:thin none white;			/* For testing - border: border-width border-style border-color */
	margin:0px auto;						/* Centers the ul container */
	padding:0px 0px 0px 0px;				/* Push menu to right or left (all li's move right or left) */
	list-style:none;
	position:relative;
	display:inline-table;
	height:30px;
	width:1000px; 					/* Expands the <ul> to the full width of the <nav> */
}
.nav_contents ul li {
	/* >>>>> TOP NAV MENU ITEMS <<<<< */
		border-top: thin none white;
	border-right: thin solid white;
/* For testing - border: border-width border-style border-color */border-bottom: thin none white;
	float: left;
	height: 35px; /* Padding must be manually adjusted, depending on final main menu size */;
	width: 99px; /* To evenly spread the menus across divide ul width by the number of menu items */ /*padding:5px 82px 0px 82px;	/* Use this to justify the main menu across the <nav> */;
	padding: 0px 0px 0px 0px;
/* Use this to justify the main menu across the <nav> */white-space: nowrap; /* This prevents wrapping on most characters, like spaces, hyphens etc. */;
	font-size: 10pt; /* Change this font to adjust to li widths */;
	display: table;
	text-align: center;
}
.nav_contents > ul > li:last-of-type{
		border-right:thin none white; 	/* Hides the right border of the last menu item */
	}
		.nav_contents ul li a {			/* >>>>> LINKS ON MENU ITEMS <<<<< */
			border:thin none white;		/* For testing - border: border-width border-style border-color */
			display:table-cell; 
			margin:0px 0px 0px 0px; 	/* Vertically centers <a> links */
			padding:0px 0px;
			text-decoration:none;
			color:#eff7e0; 				/* Text color is set in <nav>, but not <a> color */
			text-align:center;
			vertical-align:middle;
		}
.nav_contents ul li:hover { 	/* All <li> backgrounds under a <ul> */
			background:#eff7e0;				/* Put this under ul li:hover, if li's are too long, may look better with just the anchor highlighted */
			color:#000000;
		}
			.nav_contents ul li:hover > a { /* The first <a> of <li> */
			/* background:#eff7e0;			     Put this under ul li:hover, if li's are too long, may look better with just the anchor highlighted */
			color:#000000;
			}
			.nav_contents ul li:hover > ul { /* The first <ul> of <li> */
				display:block;
			}
	.nav_contents ul ul { 				/* >>>>> DROP DOWN MENUS UNDER TOP MENU <<<<< */
		border:thin none white;
		display:none;
		padding:0;
		position:absolute;top:100%;
		text-align:center;
		margin-left:-98px;				/* This shift the drop down menu left 1px to compensate for the containing li border */
	}
		.nav_contents ul ul li { 		/* >>>>> DROP DOWN MENU ITEMS <<<<< */
			border:thin solid;			/* By not specifying color, the border is white with black outline on selected item */
			float:none; 
			position:relative;
			background:#217596; 		/* #3c2105; */
			color:#eff7e0;
			padding:0px 0px 0px 0px; 	/* Keeps the Drop Down items tight */
		}
			.nav_contents ul ul li a {	/* >>>>> DROP DOWN MENU ITEM LINKS <<<<< */
				border:thin none black;	/* For testing - border: border-width border-style border-color */
			}	
		.nav_contents ul ul li:hover {
			color:#000000;				/* TODO: May be redundant, see ul li:hover */
		}
		.nav_contents ul ul ul { 		/* >>>>> FLY OUT MENUS <<<<< */
			position:absolute;left:100%;top:0;
		}
	.nav_contents ul:after {
		content:"";clear:both;display:block;
	}

#main_panel {
	border:thin none black;			/* For testing - border: border-width border-style border-color */
	min-width:1040px;
}
#main_contents {
	border:thin none black;			/* For testing - border: border-width border-style border-color */
	box-shadow:0px 0px 10px 3px #888;
	margin:0 auto;					/* Will center itself, horizontally, in parent container */
	width:1000px;
}
#content_panel {
	border:thin none black;			/* For testing - border: border-width border-style border-color */
	background-color:#f4f5ee;
}
#content_contents {
	border:thin none black;			/* For testing - border: border-width border-style border-color */
	background-color:#ffffff;
	width:1000px;
}

#footer_panel {
	border-top:solid thin #3c2105;
	background-color:#B5BB8F; 		/* #eff7e0; */
	min-width:1040px;
	padding:0px 0px 20px 0px;
	position:relative;z-index: 	1	/* Puts the footer menu above the bottom of the main_contents div box-shadow */
}
#footer_contents {
	border:thin none black;			/* For testing - border: border-width border-style border-color */
	border-radius:0px 0px 30px 30px;	
	background-color:#ffffff;
	margin:0 auto;					/* Will center itself, horizontally, in parent container */
	width:1000px;
	padding:0px;
}
#copyright {
	font-size:12pt;
	text-align:center;
}

table {
	margin-right: auto;
	margin-left: auto;
}

.largecircle{
				border:solid thin;border-radius:60px;
				display:table-cell; vertical-align:middle;
				text-align:center;
				width:120px; height:120px; 
				background-color:#196189; color:#ffffff;
				font-family:'Pathway Gothic One', sans-serif; font-size:38px;
			}

.circle:hover, .largecircle:hover, .pill:hover{
				background-color:#0099FF;
			}

.circle{
				border:solid thin;border-radius:50px;
				display:table-cell; vertical-align:middle;
				text-align:center;
				width:100px; height:100px; 
				background-color:#B5BB8F; color:#ffffff;
				font-family:'Pathway Gothic One', sans-serif; font-size:30px;
			}

.spacer{
				width:20px;
			}

.verticalline{
				height:25px; width:0px;
				border: 1px dashed #8BB0C4;
				margin:0 auto;
			}

.horizontalline{
				/* height:0px; width:660px;  /* 4 menus */
				/* height:0px; width:767px; /* 6 menus */
				height:0px; width:798px; /* 8 menus */
				border: 1px dashed #8BB0C4;
				margin:0px auto 0px auto;
			}

.pill{
				border:solid thin;border-radius:15px;
				display:table-cell; vertical-align:middle;
				text-align:center;
				width:100px; height:40px; 
				background-color:#8BB0C4; color:#ffffff;
				font-family:'Pathway Gothic One', sans-serif; font-size:20px;
			}

div.pill a{
				border:thin none black;
				color:#ffffff;
				display:block;			/* helps the anchor fill the div */
				width:100%;height:100%;	/* fills up the div with the anchor boundaries */
				line-height: 40px;		/* set line height to pill height, for centering vertically */
			}
/* CEF 2020-05-04
https://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/
Use of Pseudo-Elements to insert text on the fly
This way you can update one line in the CSS and all pages are updated....
*/
.lastdate:before{
    content: '2020';
}
.lastupdate:after{
    content: 'September 2020';
}