@charset "utf-8";
/* CSS Document */
   
/*TOC FOR CSS DOCUMENT

1. Structural Elements
	(ie. body, containers, navigation buttons)
2. Typography
	(ie. p, h1, h2, h3, a)
3. General
	(ie. clear, emDiv, tooltip, inline POC, hr-top)
4. Images
	(img, imgCaption)
5. Icons
	(aside icons, print and fav icons, social media icons)
6. Table Formatting
7. List Formatting
8. Wave
9. Main Navigation
10. Breadcrumb
11. Aside (Left-side Column)
12. Accordion
13. Aside Accordion
14. Content Accordion
15. Portals (Buttons)
16. Site Directory Formatting
17. News and Stories
18. Regional Map
19. Regional Map (Index page Only)
20. Regional Map (Larger map on map.shtm)
21. Coal Facts
22. Employee Directory

/*
   

/* 
============================================================================================================================================
----- 1. STRUCTURAL ELEMENTS -----
============================================================================================================================================
 */
/* BRANDING Header and Footer are located in separate CSS file within the folder, 'OSM Branding' */
body {
	margin:0;
	padding:0;
	background: transparent url(/images/reclamation_bg.png) no-repeat center 160px;
	font: .9em Verdana, Geneva, sans-serif;
}
/* Targets Main Pages */
#bodyMain{}
/* Targets Sub Pages */
#bodySub{}
/*Highlights Current Navigational Button*/
.home{}
.about{}
.programs{}
.topPriorities{}
.resources{}
.contacts{}
.howdoi{}
.generalNav{}
/* Wraps all content from below the BRANDING header, into a 1000px wide div */
#container-all {
	position:relative;
	width:1000px;
	margin:0 auto 20px auto;
	padding:0;
}
/* Wraps all content from main NAV to the FOOTER .*/
#container-mainAll {
	position:relative;
	width:1000px;
	margin:0;
	padding:0;
	background-color:#fff;
	box-shadow:2px 1px 5px #999, -2px -1px 5px #999;
	-moz-box-shadow:2px 1px 5px #999, -2px -1px 5px #999;
	-webkit-box-shadow:2px 1px 5px #999,-2px -1px 5px #999;
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color='gray', Positive='true');
}
/* Wraps all content from below the BREADCRUMB to above the BRANDING footer, just above the page last modified */
#container-mainInner {
	position:relative;
	width:800px;
	margin:0;
	padding:0 0 0 200px; /*left padding is same width as the aside. Because aside is absolutely positioned, it overlaps this padding*/
	background-color:#e6f0f2;
}
/* Wraps the MAIN page content, excluding the ASIDE */
#content {
    position:relative;
	margin:0;
	background-color:#fff;
	float: right;
	border-left: 1px solid #fff;
}
#bodyMain #content {width:769px; padding:20px 15px 20px 15px; }
#bodySub #content {width:759px; padding:20px 15px 20px 25px;}



/*
============================================================================================================================================
 ----- 2. TYPOGRAPHY -----
 ============================================================================================================================================
  */
p{font-family: Verdana, Geneva, sans-serif;}
h1{
	padding: 4px 0 10px 0;
	color:#004e60;
	font: normal 170% "Century Gothic", Verdana, Geneva, sans-serif;
}
h2{
	padding: 5px 0 10px 0;
	color:#015E73;
	font: 200 130% Verdana, Geneva, sans-serif;
	text-transform:uppercase;
}
h3{
	padding:0 0 5px 0;
	color:#015E73;
	font: 600 105% Verdana, Geneva, sans-serif;
}
h4{
	padding:0 0 5px 0;
	color:#015E73;
	font: 500 .9em Verdana, Geneva, sans-serif;
}
#bodyMain h1{margin:0}
#bodyMain h2{margin:0}
#bodyMain h3{margin:0}
#bodyMain h4{margin:0}
#bodySub h1{margin:0 0 10px -15px;}
#bodySub h2{margin:0 0 0 -15px;}
#bodySub h3{margin:0 0 0 -15px;}
#bodySub h4{margin:0 0 0 -15px;}
.accordion h2{margin-left:15px;}
/* Main Link Color */
a:link, a:visited, a:active{color:#b96619;text-decoration:none;}
a:hover{color:#015E73;}
/* Link Color for Dark Backgrounds */
a.linkDark:link, a.linkDark:visited, a.linkDark:active{color:#eeb379;text-decoration:none;}
a.linkDark:hover{color:#7ae9dd;}
/* Class to make text bold */
.bold{font-weight:bolder;}
/* Class to make text italic */
.italics{font-style:italic;}
/* Class to make text into Block Quote */
.pullQuote{
	text-align: justify;
	font-style: italic;
	width: 35%;
	display: block;
	float: left;
	margin: 15px;
	padding: 10px 0;
	border-top: 1px dotted #666;
	border-bottom: 1px dotted #666;
}
/* Class to make text into block Quote */
.blockQuote{
	text-align: justify;
	font-style: italic;
	width: 100%;
	display: block;
	margin: 15px 15px 15px -10px;
	padding: 10px 0;
	border-top: 1px dotted #666;
	border-bottom: 1px dotted #666;
}
/* Class to align text to the right */
.textRight{
	margin:0;
	padding:0px 0px 5px 0px;
	text-align:right;
}
/* Class for text that will be italicized, small, and blue within the body of the page (i.e. source for OSM Facts, dates) */
.factSource{
	color:#015e73;
	font: italic 90%;
	line-height:24px;
}
/*Class to format text as a quote*/
.quote{
	width:80%;
	margin:0 10%;
	display:block;
	color:#015e73;
	font-style: italic;
}
/* Class to make READ MORE links bold. */
.readmore{font-weight:bolder;}



/*
============================================================================================================================================
----- 3. GENERAL ----- 
============================================================================================================================================
*/
.clear {clear:both;}
/* Used when isolating information within a lot of text - renders a light blue box */
.emDiv {
	margin: 10px 15px 10px 0; 
	padding: 10px; 
	background-color: #f3f8f9; 
	border: 1px solid #c1dadd;
}
/* Styling for ToolTips used on links to external non-government sites */
#tooltip{
    position:absolute;
    z-index:100;
    padding:10px;
	border-radius:5px;
	border-bottom:solid 3px #eebe79;
	background:#fff2d5;
	color:#000;
	font: 85% Verdana, Geneva, sans-serif;
	text-align:center;
	line-height:16px;
}
/*ToolTip Triangle Decoration*/
#tooltip:after{
    position:absolute;
    left:50%;
    bottom:-10px;
    width:0;
    height:0;
    margin-left:-10px;
    border-right:solid 10px transparent;
	border-left:solid 10px transparent;
    border-top:solid 10px #eebe79;
    content:'';
}
#tooltip.top:after{
	top:-20px;
    bottom:auto;
	border-top-color:transparent;
    border-bottom:solid 10px #eebe79;
}
#tooltip.left:after{left:5px; margin:0;}
#tooltip.right:after{right:5px; left:auto; margin:0;}
/* For identifying a POC inline */
.inlinePOC {
	margin: 5px auto;
	text-align: center;
	padding: 5px 10px 15px;
	border: #ddd 1px solid;
	border-radius: 10px;
}
/* For identifying special/key items on page */
.inlineFeature{
	width: 95%;
	margin: 5px auto;
	padding: 10px 10px 2px;
	border: #ddd 3px solid;
	border-radius: 10px;
}
.inlineFeature img{
	width: 165px !important;
	margin: -15px auto;
	padding:0 5px;
}
.inlineFeature h2, .inlineFeature h3 {margin:0 !important; padding:0 !important;}
.inlineFeature .factsArrow{color: #ccc;}
.inlineFeature hr {
	padding: 0;
	border: none;
	border-top: medium double #ccc;
	color: #ccc;
	text-align: center;
}
.inlineFeature hr:after {
	content: "//";
	display: inline-block;
	position: relative; 
	top: -0.7em;  
	font-size: -0.5em;
	padding: 0 0.25em;
	background: white;
}
.disclaimer {
	width: 60%; 
	margin: 20px auto; 
	padding: 10px; 
	font-size: 0.8em;
	font-style: italic;
	background-color: #eaeaea; 
	border-radius: 4px;
	moz-border-radius: 4px;
	webkit-border-radius: 4px;
}

/* Style for ODocs solicitation on pages */
.solicitation {
	width: 80%; 
	margin: 10px auto 30px auto; 
	padding: 15px 25px 5px 25px; 
	font-size: 0.9em;
	background-color:#f3f8f9;
	border:2px solid #c1dadd;
	border-radius: 8px;
	moz-border-radius: 8px;
	webkit-border-radius: 8px;
}
.solicitation h3 {color: #333;}


/*
============================================================================================================================================
----- 4. IMAGE FORMATTING -----
============================================================================================================================================
*/

img {border:none;}
img.left, img.right, img.center {width:300px;}
img.left{float:left; margin:15px 15px 10px 0;}
img.right{float:right; margin:15px 0 10px 15px;}
img.center{display: block; margin: 0 auto;}
/* Class to add caption to image. */
.imgCaptionLeft img, .imgCaptionRight img, .imgCaptionCenter img{margin-top:0;}
.imgCaptionLeft, .imgCaptionRight, .imgCaptionCenter{width:300px; height: auto;}
.imgCaptionLeft {float:left; margin-right:15px;}
.imgCaptionRight {float:right; margin-left:15px;}
.imgCaptionCenter {display: block;	margin:0 auto;}
.imgCaptionLeft p, .imgCaptionRight p, .imgCaptionCenter p, .imgBanner p{
	margin:0;
	padding:0 10px 10px 10px;
    color:#222;
	font-size: 80%;
	font-style:italic;
	text-align: center;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	border-left: 2px solid #ccc;
}
.threeRowImages{width: 100%; height: auto; display: block;}
.threeRowCaption img{width: 238px; height: auto; margin: 0;}
.threeRowImages .threeRowCaption{
	width: 238px;
	margin: 3px 3px 0 3px;
	float: left;
}
.threeRowImages .threeRowCaption p{	
	margin:-4px 0 0 -1px;
	padding:10px;
    color:#222;
	font-size: .8em;
	font-style:italic;
	text-align: center;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	border-left: 2px solid #ccc;
}

.home .imgCaptionLeft{width:200px !important;}
.home .left{width:200px !important;}


/*
============================================================================================================================================
----- 5. ICONS ----- 
============================================================================================================================================
*/
/* Aside Icons */
.Icons{background: url(http://www.osmre.gov/images/Icons.png) no-repeat; width: 23px; height: 20px; float: left;}
.IconInformationFor{background-position: 0 0;}
.IconMostRequested{background-position: 0 -45px;}
.IconRelatedItems{background-position: 0 -90px;}
.IconAboutOSM{background-position: 0 -135px;}
.IconPrograms{background-position: 0 -180px;}
.IconTopPriorities{background-position: 0 -225px;}
.IconResources{background-position: 0 -270px;}
.IconContacts{background-position: 0 -315px;}
.IconHowDoI{background-position: 0 -360px;}
.IconOSM{background-position: 0 -505px;}
.IconStatesTribes {background-position: 0 -550px;}
/* Social Media Icons */
#topSM{
	position:absolute;
	right:-32px;
	width:30px;
	height:auto;
	padding:2px 0 2px 0;
	border-top:inset 2px #fff;
	border-bottom:inset 2px #ccc;
	border-right:inset 2px #ccc;
	background-color:#F0F0F0;
}
#bodyMain #topSM{top:395px;}
#bodySub #topSM{top:245px;}
#topSM .fb, #topSM .tw, #topSM .fl, #topSM .yt, #topSM .at{margin:4px 2px 4px 3px;}
.fb, .tw, .fl, .yt, .at{width:25px; height:25px;}
.fb:hover, .tw:hover, .fl:hover, .yt:hover, .at:hover{curser:pointer;}
.fb, .tw, .fl, .yt{background:url(/images/SocialMedia.png) no-repeat;}
/* Facebook Icon */
.fb{background-position:-.5px -1px;}
.fb:hover{background-position:-.5px -52px;}
/* Twitter Icon */
.tw{background-position:-.5px -103px;}
.tw:hover{background-position:-.5px -154px;}
/* Flickr Icon */
.fl{background-position:-.5px -205px;}
.fl:hover{background-position:-.5px -256px;}
/* Youtube Icon */
.yt{background-position:-.5px -307px;}
.yt:hover{background-position:-.5px -358px;}
/* AddThis Icon */
.at{
	/*Filter for producing grey version of addthis icon*/
	filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter:gray; /* IE6-9 */
    -webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.at:hover{
	/*Filter for producing color version of addthis icon*/
	filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter:grayscale(0%);
}
/* Icons in top-right corner of content section on Sub Pages */
#contentIcons{float:right; width:150px;}
#contentIcons img{margin-top:5px;}
.smallA, .mediumA, .largeA{
	float:left;
	width:25px;
	margin:0;
	color:#999;
	font-family:"Century Gothic", Verdana, Geneva, sans-serif;
	text-align:center;
	text-decoration:none;
	cursor:pointer;
}
/* Small Font-size:14px */
.smallA{padding:13px 0 0 0; font-size:14px;}
/* Medium Font-Size:20px */
.mediumA{padding:9px 0 0 0;	font-size:20px;}
/* Large Font-Size:26px  */
.largeA{padding:1px 2px 0 2px;font-size:26px;}
/*Link styling for AAA Icons */
.smallA:hover, .mediumA:hover, .largeA:hover{color:#b58d2e;	text-decoration:none;}
/* Div that controls what text changes when clicking the AAA ICONS */
#fontToChange{}
/* Favorite and Print Page Icon */
.fav, .pri{float:left; margin:3px 1px 0 2px; cursor:pointer;}
.fav, .pri{width:25px; height:25px;}
.fav:hover, .pri:hover{curser:pointer;}
.fav, .pri{background:url(/images/SubIconsTopRight.png) no-repeat;}
/* Facebook Icon */
.fav{background-position:-.5px -1px;}
.fav:hover{background-position:-.5px -52px;}
/* Print Icon */
.pri{background-position:-.5px -103px;}
.pri:hover{background-position:-.5px -154px;}



/*
============================================================================================================================================
----- 6. TABLE FORMATTING -----
============================================================================================================================================
*/
table {border-collapse: collapse; border:1px solid #bbd9de;}
th {
    padding:5px 10px 5px 10px;
    background-color:#C4DDE1;
	border:1px solid #bbd9de;
    color:#015E73;
	font: bold Verdana, Geneva, sans-serif;
	text-align:center;
}
td {
	padding:5px 10px;
	border:1px solid #ccc;
	font-size:.9em;
	text-align:left;
}
.tableH2{
	padding:5px 10px;
    background-color:#ddd;
    color:#015E73;
	font-weight:normal;
	text-align: center;
}
.tableNav{background-color: #FFFFFF;}


/*
============================================================================================================================================
----- 7. LIST FORMATTING -----
============================================================================================================================================
*/
ul, ol  { 
	margin: 0 0 20px 0;
	font: normal Verdana, Geneva, sans-serif;
	text-indent:-1px;
	line-height:130%;
}
#content ul{list-style-type:none;}
#content ul li:before{
	content:"\2219"; 
	font-weight: bold;
	font-size:16px;
	color: #999;
	margin-left: -10px;
	padding-right: 5px;
}
/*If you want a list with no bullets, class it's parent UL with '.noBullet'*/
#content ul.noBullet li:before{
	content:""; 
	margin-left: 0;
	padding-right: 0;
}


/*
============================================================================================================================================
----- 8. WAVE -----
============================================================================================================================================
*/
/* Contains elements on z-index 1-6 */
#WVcontainer{position: relative; width: 1000px; height: 325px;} 
#bodySub #WVcontainer{position: relative; height: 185px;} 
.WVgraphic{position:absolute; z-index:1; margin:3px 0 5px 495px;}
#WVcont{position:absolute; z-index:4; overflow:hidden;	width:1000px;}
#WVbg{position:absolute; z-index:3;	margin-top: 25px;}
#bodyMain #WVcont{height:330px;}
#bodySub #WVcont{height:180px;}
#WhatWeDo{
	position:absolute;
	z-index:6;
	width:360px;
	height:180px;
	margin:140px 0 0 615px;
	padding:0 8px;
	color:#fff;
	text-align:left;
}
#WhatWeDo p{margin-bottom:0;}
span.wWDHeader{
	margin:5px 0;
	display:block;
	color:#e0e0e0;
	font: 145% "Century Gothic", Verdana, Geneva, sans-serif;
}
span.wWDmore{margin:-1px 5px 0 0; display:block; text-align:right;}
/* WAVE (Photo Refresh Slideshow) */
#PhotoBanner{
	position: absolute;
	top: 38px;
	left:5px;
	width: 600px; 
}
img.slideshow{width: 600px;}
#bodySub #PhotoBanner{
	width:990px;
	height:auto;
	top: 38px;
	left: 5px;
}
#bodySub #PhotoBanner img.slideshow{width:990px;}
.caption{
	background-color: #333;
	filter: alpha(opacity=90);
	background-color: rgba(20, 20, 20, .8);
	width: 590px;
	height: 50px;
	position: absolute;
	bottom: 2px;
	left: 0;
	font-size: 12px;
	color:#fff;
	margin:0;
	padding:5px;
}
#bodySub .caption{width: 990px;	height:30px;}



/*
============================================================================================================================================
----- 9. MAIN NAVIGATION -----
============================================================================================================================================
*/
nav {
	position:relative;
	width:1000px;
	margin:0;
	padding:0;
	box-shadow:0px 2px 3px #999;
	-moz-box-shadow:0px 2px 3px #999;
	-webkit-box-shadow:0px 2px 3px #999;
	background: #015e73 url(/images/furley_bg.png) repeat;
}
nav ul{margin:0; padding:0;	list-style-type:none;}
nav ul li{display:inline;}
nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:active{
	float:left;
	display:block;
	padding: 6px 0;
	width: 14%;
	text-align: center;
	background:#015e73 url(/images/furley_bg.png) repeat;
	color:#fff;
	font: normal Verdana, Geneva, sans-serif;
	text-decoration:none;
	text-shadow:0px 2px 3px #004e60;
}
nav ul li a:hover{background-color:#208fa8;}
/* Targets Main Nav link that page is under and highlights it as if it is being hovered over */
body.home nav li a.home, body.about nav li a.about, body.programs nav li a.programs, body.topPriorities nav li a.topPriorities, body.resources nav li a.resources, body.lawsregs nav li a.lawsregs, body.contacts nav li a.contacts, body.howdoi nav li a.howdoi, nav li a:hover, nav li a:active {
	background:#208fa8 url(/images/furley_bg.png) repeat;
	color:#fff;
	text-shadow:0px 2px 3px #004e60;
}
/* Makes Laws and Regs nav item slightly wider, which makes up the difference for 8 not dividing into 100 (percent) evenly. So all nav items are 12% wide (7*12=84), leaving 16% for lawsregs */
nav ul li a.lawsregs, nav ul li a:link.lawsregs, nav ul li a:visited.lawsregs, nav ul li a:active.lawsregs{width: 16%;}



/* 
============================================================================================================================================
----- 10. BREADCRUMB ----- 
============================================================================================================================================
*/
#breadcrumb {
	width:980px;
	padding:2px 10px;
	background:#a9cdd5 url(/images/furley_bg.png) repeat;
	text-align:left;
}
#breadcrumb span {color:#555; font: normal .9em Verdana, Geneva, sans-serif;}
#breadcrumb span.nonLinks, #breadcrumb a, #breadcrumb a:hover, #breadcrumb a:active{color:#015e73; font: normal 90% Verdana, Geneva, sans-serif;}
#breadcrumb a {text-decoration:none;}
#breadcrumb a:hover{text-decoration:underline;}



/* 
============================================================================================================================================
----- 11. ASIDE (Left-side column) -----
============================================================================================================================================
*/ 
aside {
	position:absolute;
	top:0;
	left:0;
	width:195px;
	margin:0;
	padding:20px 0 0 0;
	background: #e6f0f2 url(/images/aside_shadow.png) no-repeat center right;
	background-size:auto 100%;
}
aside img{margin-left:8px;}
aside .lineBreak{
	width:95%;
	height:2px;
	margin:5px auto;
	background-color:#ccc;
}
/*Aside Header Font*/
.asideHeader, .asideHeader a, .asideHeader2line, .asideHeader2line a  {
	color:#015e73;
	font: 110% "Century Gothic", Verdana, Geneva, sans-serif;
	text-decoration: none;
}
.asideHeader, .asideHeader a{margin-left:4px;}
.asideHeader2line, .asideHeader2line a {margin-left:30px;}
.asideHeader a:hover, .asideHeader2line a:hover {color:#b96619;}
aside ul li a, aside ul li a:link, aside ul li a:active, aside ul li a:visited {margin: 1px 0 1px 0; padding:5px 0 5px 5px; display:block; color:#333;}
aside ul li ul li a, aside ul li ul li a:link, aside ul li ul li a:active, aside ul li ul li a:visited {padding:2px 0 2px 2px;}
.hangIndent{
	margin-left:30px;
	display:inline-block;
	color:#015e73;
	font: 115% "Century Gothic", Verdana, Geneva, sans-serif;
}
#aside-bottom {
	position:absolute;
	bottom:0;
	left:0;
	width:200px; 
	margin:0;
	padding:30px 0 5px 0;
	text-align:center;
}
#bottom_sidebar_cont {
	position:relative;
	clear:both;
	width:990px;
	display:block;
}
#bodyMain #aside-bottom{height:auto; background:#fff url(../images/aside-bottom_indexpage_wave.jpg) no-repeat top;}
#bodySub #aside-bottom{background:#fff url(../images/aside-bottom_subpage_wave.jpg) no-repeat top;}
#aside-bottom p{margin:5px 0 0 0; padding:0;}
#aside-bottom .asideHeader{
	margin:0;
	padding:0;
	color:#AAA;
	font-size:100%;
}
/* Only used on the Index page */
#twitter {
	width:200px;
	height:560px;
	border-top:30px solid #9abfc7;
	border-bottom:30px solid #9abfc7;
}	



/*
============================================================================================================================================
----- 12. ACCORDION -----
============================================================================================================================================
*/
/*INSTRUCTIONS:
The aside employs an expandable/collapsible list called an "Accordion" via jQuery. The following is the CSS and 'accordion.js' is the coinciding script.

FUNCTION:
The script looks for a nested <ul> inside of an unordered list item <ul> that has the class 'accordion', which the user defines when building the list. Upon finding <ul class="accordion">, the script inserts a div, within the li, right before whatever that li currently contains (a link, item, etc.) which contains the background-image of the arrow. Then the script toggles the arrow image between the down arrow image (open) and the right facing arrow (closed), when the div is clicked.

HOW TO USE:
1. Build the <ul> as normal. Give it the class 'accordion'. example: <ul class="accordion">
2. Nest a ul inside of a li
	<li>Text that you want to always appear (toggle div will appear before this text)
		<ul>
			<li>Hidden List Item 1</li>
			<li>Hidden List Item 2</li>
		</ul>
	</li>
	
If you want a hidden list to open on page load, give the parent li a specific class name and then insert the following code at the beginning of that page: 
<script>
	$(document).ready(function () {
		$(".replaceClassName ul").show();
        $(".replaceClassName div").addClass('nodeOpen');
	});
</script>
Replace "replaceClassName" with your unique class name. 
	
If you have a nested li that you do not want to act as an accordion, but instead always be displayed, class the parent li with "openNone"*/

/*Arrows are built as a spry image. */
.accordion div.node{
	float:left;
	background:url(/images/tree_arrows_spry.png) no-repeat 0 0; 
	width: 12px;
	height: 12px;
	margin:8px 5px 0 -10px;
	padding-bottom: 5px;
	cursor: pointer;
}
.accordion h3{margin:0 !important;}
.accordion div.node:hover {background-position: 0 -17px;}
.accordion div.nodeOpen {background-position: 0 -32px;}
.accordion div.nodeOpen:hover {background-position: 0 -46px;}
/* Accordion Slider Switch - Show all/Hide all */
.switch-wrapper {
    position: relative;
    width: 95px;
    height: 35px;
	margin: 10px 0 10px -15px;
    border: 2px solid #efefef; 
    border-radius: 4px;
    background: #e6f0f2 URL('http://www.osmre.gov/images/icon_list-show-hide_bg.png') no-repeat;
    -moz-box-shadow:    inset 0 0 10px #999;
    -webkit-box-shadow: inset 0 0 10px #999;
    box-shadow:         inset 0 0 10px #999;   
}
.switch-accordion {
    width: 55px;
	height: 19px;
    background: #015e73 URL('http://www.osmre.gov/images/furley_bg.png');
	padding: 8px 2px;
	text-align: center;
	cursor: pointer;
	border-radius: 2px;
    transition: all 0.5s ease-in-out;
    -moz-box-shadow:    2px 0 5px #999;
    -webkit-box-shadow: 2px 0 5px #999;
    box-shadow:         2px 0 5px #999;
}
.switch-accordion:hover {background-color: #208fa8; transition: all 0.2s ease-in-out;}
.show {	 
	float: right;
    -moz-box-shadow:    -2px 0 5px #999;
    -webkit-box-shadow: -2px 0 5px #999;
    box-shadow:         -2px 0 5px #999;    
    transition: all 0.5s ease-in-out;
}
.switch-accordion span, .switch-accordion-show span {
    color:#fff;
	font: normal 85% Verdana, Geneva, sans-serif;
	text-shadow:0px 2px 3px #004e60;
	text-align: center;
}



/*
============================================================================================================================================
----- 13. ASIDE ACCORDION -----
============================================================================================================================================
*/
aside ul{margin:0 0 10px 15px; padding:0; list-style-type:none; counter-reset: foo;}
aside li {width: 100%; margin: 0; padding:0; list-style: none; counter-increment: foo;}
aside li:hover{background-color:#9fd1e9;}
aside .accordion li:hover{background-color: transparent;}
aside li:before {
    content: foo ".";
    display: table-cell;
    text-align: left;
	margin: 0;
	padding:0 .3em 0 0;
}
aside ul{width: 180px;}
aside ul.accordion li ul{margin: 0 0 0 10px; padding:0; width:170px;}
aside ul.accordion li ul li{display: table-row;}
aside ul li ul li{margin: 0; padding:0;}
aside ul li ul li:hover{background-color:#9fd1e9;}
aside ul li ul li:before {
    content: "•";
    color: #ccc;
	width:5px;
}
aside .accordion li a:hover{background-color:#9fd1e9;}


/*
============================================================================================================================================
----- 14. CONTENT ACCORDION -----
============================================================================================================================================
*/
#content .accordion div.node{margin:3px 5px 0 -10px;}
#content .accordion, #content ul.accordion > li > ul{list-style-type:none; margin:0; padding:0;}
#content ul.accordion > li > ul{margin-bottom: 30px;}
#content .accordion > li{padding-left: 2px; margin: 10px 0;}
#content .accordion > li:before, #content .accordion > li > ul > li:before {content: ""; padding-right:0; margin-left:0;}
#content .accordion > li > ul{margin: 10px 0 20px; border:#ddd 1px solid; border-radius:10px;}
#content .accordion > li > ul > li{padding: 7px;}
#content .accordion > li > h2{padding:0;}
#content .accordion > li > h3{margin:0 0 0 -5px;}



/*
============================================================================================================================================
----- 15. SITE DIRECTORY FORMATTING (located in footer)-----
============================================================================================================================================
*/
#siteDirectory{
	width:1000px;
	height:auto;
	margin:0 auto 0 auto;
	padding:0 0 10px 0;
	border:none;
	display:none;
	background-color:#333;
}
#siteDirectoryClick{
	clear:right;
	width:185px;
	height:25px;
	margin:0 auto 0 auto;
	padding:0 407.5px;
	background:#333 url(/images/subtle_dots-333grey.jpg) repeat;
	border:none;
	color:#fff;
	font:115% "Century Gothic", Verdana, Geneva, sans-serif;
	text-align:center;
	cursor:pointer;
}
#siteDirectoryClick a, #siteDirectoryClick a:visited, #siteDirectoryClick a:hover, #siteDirectoryClick a:active{color: #fff; text-decoration:none;}
#siteDirectoryClick .OSMarrowDown{margin:10px 2px 0px 2px;}
#siteDirectoryClick .OSMarrowDown:hover{border-top:7px solid #ffffff;}
.columnSpan{width:960px; margin-left:auto;}
.column{
	float:left;
	width:180px;
	margin-right:10px;
	padding:0;
	color:#fff;
	font-size:85%;
}
.column a:link, .column a:visited, .column a:active{color:#fff;	font-weight:normal;	text-decoration:none;}
.column a:hover{color:#91edf4; font-weight:normal;}
.column ul li.head{margin-top:10px;}
.column ul li.head a{color:#4EC4CD;}
.column ul li.sub a{color:#eeb379;}
.column ul{margin:0; padding:0;	list-style-type:none;}
#bottomSM{
	clear:left;
	width:180px;
	height:35px;
	margin:0 auto 0 auto;
	padding:0;
}
/* Formats Social Media in footer */
#bottomSM .fb, #bottomSM .tw, #bottomSM .fl, #bottomSM .yt, #bottomSM .at{
	float:left;
	margin:4px 3px 2px 3px;
	border:1px solid #1F1F1F;
	border-radius:2px;	
	background-color:#1F1F1F;
}



/*
============================================================================================================================================
----- 16. PORTALS (Index page only) -----
============================================================================================================================================
*/
.portal-btn{display:inline-block; cursor:pointer; margin: 5px;}
.portal-btn div {display:inline-block;}
/* Transitions and float*/
.btn-txt, .btn-icon, .btn-arrow{
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -kthtml-transition: all .5s ease;
    transition: all .5s ease;
    float:left;
}
.btn-txt{
    text-align: center;
    font: 97% Verdana, Geneva, sans-serif;
    height: 18px;
    padding: 11px;
    color: #045f74;
    background:#fff URL('http://www.osmre.gov/images/furley_bg.png') repeat;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    box-shadow: inset 0 0 15px #bbb;
    border: 2px solid #bbb;
}
.btn-icon{
    width: 40px;
    height: 44px;
    background: #045f74 URL('http://www.osmre.gov/images/portal_btn.png')  no-repeat;
}
.btn-arrow{
    width: 0;
	height: 0;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	border-left: 10px solid #045f74;
}
.portal-btn:hover .btn-txt{
    color: #fff;
    border: 2px solid #dd9249; 
    background-color: #cd7724;
    box-shadow: inset 0 0 15px #cd7724;
}
.portal-btn:hover .btn-icon{background-color:#23798d;}
.portal-btn:hover .btn-arrow{border-left: 10px solid #23798d;}
div.portal-map .btn-icon{background-position: 0 0;}
div.portal-odocs .btn-icon{background-position: 0 -44px;}
div.portal-library .btn-icon{background-position: 0 -88px;}
div.portal-directory .btn-icon{background-position: 0 -131px;}
div.portal-state-contacts-AR .btn-icon, div.portal-state-contacts-MCR .btn-icon, div.portal-state-contacts-WR .btn-icon{background-position: 0 -177px;}
div.portal-tips .btn-icon{background-position: 0 -219px;}
div.portal-tt .btn-icon{background-position: 0 -263px;}
div.portal-arri .btn-icon{background-position: 0 -308px;}
div.portal-nmmr .btn-icon{background-position: 0 -351px;}
div.portal-amd-treat .btn-icon{background-position: 0 -397px;}
div.portal-e-amlis .btn-icon{background-position: 0 -485px;}
div.portal-avs .btn-icon{background-position: 0 -439px;}
/* Targets OSM Map button on home page */
div#container-mapInfo div.portal-btn {margin: 5px 0;}


/*
============================================================================================================================================
----- 17. NEWS AND STORIES (Index page only) -----
============================================================================================================================================
*/
.hr-dotted-white {
	height: 1px;
	width: 100%;
	margin: 20px 0 5px 0;
	border-bottom: 1px dotted #fff;
}
#news{width:385px; float: left; margin:0 0 30px 0; padding: 0;}
#newsmore{width:355px; float: right; margin:0 0 30px 0; padding: 50px 0 0 0;}
#news h1{margin-bottom: 15px;}
.newsStory{display: none;}
.newsStory p{margin:0;}
.newsStory .textRight{font-weight: bold; margin-top: 10px;}
.newsroomPic{max-width:385px;}
#newsmore ul{margin: 0; padding:0;}
#newsmore li{border-bottom: dotted 1px #CCC; margin: 8px 0; padding: 0 0 8px; text-indent: 5px;}
#newsmore li:before{content: "" !important;}
#newsmore li:last-child{border-bottom: none;}
.newsroomIndicator{
	color: #ddd;
	float: left;
	margin: -4px 10px 10px -23px;
	border-radius: 4px;
	cursor: pointer;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.newsroomIndicator:hover{color: #b96619 ;}
.active{color: #b96619 ;}


/*
============================================================================================================================================
----- 18. REGIONAL MAP -----
============================================================================================================================================
*/
#mapSection {
	position:relative; 
	width:770; 
	height:auto;
	margin:0 0 25px 0; 
	padding:0;
}
#map {padding:0;}
#container-mapInfo{background-color:#ccc; text-align:center;}
#mapInfo{
	position:relative;
	background:#fafafa url(/images/bottom-shadow-2.png) no-repeat center top;
	background-size: 100%;
	font-family: Verdana, Geneva, sans-serif;
	text-align:left;
}
#defaultMapInfo {margin: 0;	padding: 0;}
#mapInfoTable {
	margin: 0;
	padding: 0;
	display: none;
	width: 100%;
	border-collapse: collapse;
	border: none;
}
#mapInfoTable th {
	background-color: #cde5e8;
	font-weight: bold;
	padding: 3px 5px;
	text-align: center;
	border: 1px solid #bbd9de;
}
#mapInfoTable td {text-align: center; vertical-align: top;}
#mapInfoTable th, #mapInfoTable td{color: #015E73;}
/*Sub text for use beneath a header in the map Details box. Currently used beneath 'Title IV' and 'Title V' to define what those programs are.*/
.mapSubText {font-weight: normal; font-size: 80%;	text-transform: capitalize;}
.mapSubHead {
	background: #f0f8f9 url(/images/furley_bg.png) repeat;
	font-weight: bold;
	padding: 5px 10px;
	text-align: center;
	border-bottom: 1px solid #bbd9de;
	border-left: 1px solid #bbd9de;
}
.defaultMap {color:#ccc; font-family: Verdana, Geneva, sans-serif;}
#legend{position: relative;	padding:10px; font-size:11px;}
#legend ul {margin:0 0 0 -50px; list-style-type:none;}
#legend ul li {margin-left:15px;}
#legend ul li:before {content:"";}
.shadow {
	box-shadow:2px 1px 5px #999;
	-moz-box-shadow:2px 1px 5px #999;
	-webkit-box-shadow:2px 1px 5px #999;
	/* For IE 8 */
	-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, color='#CCCCCC')";
	/* For IE 5.5 - 7 */
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC');
}
.shadowDown {
	-moz-box-shadow:0 3px -2px #CCC;
	-webkit-box-shadow:0 3px -2px #CCC;
	box-shadow:0 3px -2px #CCC;
	/* For IE 8 */
	-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=270, color='#CCCCCC')";
	/* For IE 5.5 - 7 */
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=270, Color='#CCCCCC');
}
.whiteSubHead {color: #FFF;	font-weight: bold;}



/*
============================================================================================================================================
----- 19. REGIONAL MAP (Index page only) -----
============================================================================================================================================
*/
body.home #map {
	float: left;
	width:520px;
	height:330px;
	margin:0;
}
body.home #container-mapInfo {
	float:left;
	width:230px;
	margin: 0;
	padding: 0 5px 5px 5px;
    -moz-border-radius:0px 13px 13px 0px;  
    -webkit-border-radius:0px 13px 13px 0px;  
    border-radius:0px 13px 13px 0px;  
}	
body.home #mapInfo {
	width:220px;
	padding: 5px;
	-moz-border-radius:0px 10px 0px 0px;  
    -webkit-border-radius:0px 10px 0px 0px;  
    border-radius:0px 10px 0px 0px;
}
body.home #mapInfoTable td {
	padding: 5px 5px;
	border: none;
	border-bottom: 1px solid #ddd;
}
body.home #mapInfoTable th{width: 30%;}
body.home #mapInfoTable td {width: 70%;}
body.home #legend {
	text-align: left; 
	background-color:#fafafa;
	border-top: 1px dotted #ccc;
	-moz-border-radius:0px 0px 10px 0px;  
    -webkit-border-radius:0px 0px 10px 0px;  
    border-radius:0px 0px 10px 0px;
}
.hr-dotted-white {
	height: 1px;
	width: 100%;
	margin: 20px 0 5px 0;
	border-bottom: 1px dotted #fff;
}



/*
============================================================================================================================================
----- 20. REGIONAL MAP (Larger Map on map.shtm) -----
============================================================================================================================================
*/
body.contacts #map a {word-break: break-all;}
body.contacts #map {
	position:relative;
	width:660px;
	height:430px;
	margin:10px auto 0 auto;
}
body.contacts #container-mapInfo {
	position: relative;
	padding: 500px 0 0 0;
	width: 650px;
	margin: 0 auto;
	padding: 0 5px 5px 5px;
	background-color: #ccc;
	text-align: center;
	-moz-border-radius: 0px 0px 13px 13px;
	-webkit-border-radius: 0px 0px 13px 13px;
	border-radius: 0px 0px 13px 13px;
}
body.contacts #mapInfo {
	position:relative;
	width:620px;
	padding: 15px;
	-moz-border-radius:0px 0px 10px 10px;  
    -webkit-border-radius:0px 0px 10px 10px;  
    border-radius:0px 0px 10px 10px;
}
body.contacts #mapInfoTable td {padding: 8px 10px; border: none;}
body.contacts #mapInfoTable td, body.contacts #mapInfoTable th{width: 50%;}
/*Adds a divider on the left side of all cells except the first. In the 2 column layout, it functions as a center divider. :first-child selector is support all the way back to CSS2, whereas :last-child is CSS3. Therefore this method has more backwards compatibility.*/
body.contacts #mapInfoTable td:first-child, body.contacts #mapInfoTable th:first-child {border-right: 1px solid #bbd9de;}
body.contacts #legend ul li {float:left; display:inline;}
#mapHoverState{
	color: #ccc;
	font-size: 150%;
	position: absolute;
	bottom: 0;
	right: 0;
}
#mapHoverState a, #mapHoverState a:active, #mapHoverState a:visited{color: #ccc;}



/*
============================================================================================================================================
----- 21. COAL FACTS (Index page only) -----
============================================================================================================================================
*/
/*.home .inlineFeature{
	width: 740px !important;
	border: #aaa 1px solid;
	height: 185px;
	background: #eee url(/images/furley_bg.png) repeat;
}
.home .inlineFeature h2{
	padding: 4px 0 10px 0;
	color:#004e60;
	font: normal 170% "Century Gothic", Verdana, Geneva, sans-serif;
	text-transform: none !important;
	text-align: left;
}*/
#facts{
	padding:10px 10px 25px 10px;
	width:750px;
	margin:0;
	border:1px solid #CCC;
	border-bottom:1px solid #777;
	border-right:1px solid #AAA;
	background:#f5fcfd url(/images/Facts/coalGraphic.png) no-repeat bottom;
}
#facts img{
	float:left;
	width:83px;
	height:100px;
	margin:10px 20px 20px 0;
}
lineBreak{
	width:95%;
	height:2px;
	margin: 5px auto;
	background-color:#ccc;
}



/*
============================================================================================================================================
----- 22. EMPLOYEE DIRECTORY -----
============================================================================================================================================
*/
.emplyDirNav {
	-webkit-box-shadow: 0px 2px 5px 0px #aaa;
	-moz-box-shadow: 0px 2px 5px 0px #aaa;
	-o-box-shadow: 0px 2px 5px 0px #aaa;
	box-shadow: 0px 2px 5px 0px #aaa;
	background-color: #D7D7D7;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	border-radius:30px;
	border:none;
	color:#666;
	font: bold 85% Verdana, Geneva, sans-serif;
	height:35px;
	width:35px;
	text-align:center;
	margin: 10px 5px 0 5px;
}
.emplyDirNav:hover {background-color: #C4DDE1; cursor: pointer;}
.emplyDirNav:active {position:relative; top:1px;}
#officeCheckboxes{width: 745px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px;}
#officeCheckboxes ul{list-style-type: none; padding:0; margin:0; border-bottom: #222}
#officeCheckboxes ul li{
	width: 184px;
	background-color: #ddd;
	color:#444;
	text-align:center;
	margin:0;
	padding: 6px 0;
	float: left;
	cursor: pointer;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
#officeCheckboxes ul li:hover{background-color: #eee;}
#officeCheckboxes ul li:first-child{border-top-left-radius: 5px 5px;}
#officeCheckboxes ul li:last-child{width: 185px; border-right:none; border-top-right-radius: 5px 5px;}
radio{margin: 0 5px;}
#officeCheckboxes .Headquarters, #officeCheckboxes .Appalachian, #officeCheckboxes .Western, #officeCheckboxes .MidContinent,#officeCheckboxes .noSelection{
	width: 745px;
	height:auto;
	background-color: #eee;
	display: none;
	padding: 0 0 5px 0;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom-left-radius:5px 5px;
	border-bottom-right-radius:5px 5px;
}
#officeCheckboxes .noSelection{height:50px; display:block;}
#officeCheckboxes .noSelection p{font-style: italic; text-align:center; margin: 0; padding: 20px;}
.selected{ background-color:#eee !important; border-top: 1px solid #ccc !important; border-left: 1px solid #ccc !important; border-right: 1px solid #ccc !important;}
input[type=radio] {margin: 0 5px;}
#officeCheckboxes .Headquarters form ul, #officeCheckboxes .Appalachian form ul, #officeCheckboxes .MidContinent form ul, #officeCheckboxes .Western form ul{
	background-color: #eee;
	float: left;
	margin: 0 2px;
	padding:10px 5px 0;
}
#officeCheckboxes .Headquarters form ul{width: 234px; }
#officeCheckboxes .Appalachian form ul, #officeCheckboxes .MidContinent form ul, #officeCheckboxes .Western form ul{width: 358px;}
#officeCheckboxes .Headquarters form ul li, #officeCheckboxes .Appalachian form ul li, #officeCheckboxes .MidContinent form ul li, #officeCheckboxes .Western form ul li{
	background-color: #eee;
	float: none; 
	color:#444;
	text-align: left;
	padding:2px 0 2px 22px;
	border: none;
	text-indent: -22px;
}
#officeCheckboxes .Appalachian form ul li{width: 344px;}
#officeCheckboxes .MidContinent form ul li{width: 344px;}
#officeCheckboxes .Western form ul li{width: 344px;}
#officeCheckboxes .Headquarters form ul li:hover. #officeCheckboxes .Appalachian form ul li:hover, #officeCheckboxes .MidContinent form ul li:hover, #officeCheckboxes .Western form ul li:hover{background-color: #555; cursor:auto;}
#officeCheckboxes .Headquarters form ul li:first-child, #officeCheckboxes .Appalachian form ul li:first-child, #officeCheckboxes .MidContinent form ul li:first-child, #officeCheckboxes .Western form ul li:first-child{border-top-left-radius:0 0;}
#officeCheckboxes .Headquarters form ul li:last-child, #officeCheckboxes .Appalachian form ul li:last-child, #officeCheckboxes .MidContinent form ul li:last-child, #officeCheckboxes .Western form ul li:last-child{border-right:none; border-top-right-radius:0 0;}
#filterFnameTF{width: 200px; margin-right: 20px; padding: 2px;}
#filterLnameTF{width: 200px; padding: 2px;}
.sortBy{width: 745px; margin:0; padding:0;}
.sortBy ul{height: 20px; list-style-type:none; margin:0; padding:0;}
.sortBy ul li{float: left; margin: 0 3%;}
.sortBy ul li:first-child{float: left; margin: 0 3% 0 0;}
.sortBy ul li:last-child{float: left; margin: 0 0 0 3%;}

/*=======================================================
Special Notices under branding. 
Comment code out when not in use. Added 12/26/18 by TE.
=========================================================*/   
   body{background: transparent url(/images/reclamation_bg.png) no-repeat center 220px !important;}