@charset "utf-8";
/* CSS Document */

/*resets & default*/
body, div, img, p, a, h1, h2, h3, h4, h5, h6 {margin: 0px; padding: 0px; display: block;}
table, td, th, tr, tbody, thead {margin: 0px; padding: 0px; text-align: left;}
html {font-size: 18px; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; color: #23361F;}
a {outline: 0px;}

	.bg1 {background-image: url(../images/background.jpg); background-repeat: repeat;} /*black body*/
	.bg2 {background-image: url(../images/background2.jpg); background-repeat: repeat;}/*gray border texture*/
	.bg3 {background-image: url(../images/background3.jpg); background-repeat: repeat;}/*lt blue sheet bg*/

	h1 {text-align: center;} 
	h2 {text-align: center;}
	h3, h4, h5, h6 {text-align: left;}
	p {font-size: 1rem; text-align: left;}

	.fs1 {font-size: .888rem;}
	.fs2 {font-size: .777rem;}
	.fs3 {font-size: 1.5rem;}
	.fs4 {font-size: .666rem;}

	.ff1 {font-family: Verdana, Geneva, sans-serif;}
	.ff2 {font-family: Arial, Helvetica, sans-serif;}
	.ff3 {font-family: "Trebuchet MS", Helvetica, sans-serif;}
	.ff4 {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}
	.ff5 {font-family: "Courier New", Courier, monospace;}
	.ff6 {font-family: "Lucida Console", Monaco, monospace;}
	.ff7 {font-family: "Times New Roman", Times, serif;}
	.ff8 {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;}
	.ff9 {font-family: Georgia, serif;}
	.ff10 {font-family: Tahoma, Geneva, sans-serif;}
	.ff11 {font-family: "Comic Sans MS", cursive, sans-serif;}
	.ff12 {font-family: Impact, Charcoal, sans-serif;}
	.ff13 {font-family: "Arial Black", Gadget, sans-serif;}

	.red {color: #CC0000;}

img {vertical-align: bottom; border: none; margin: 0px auto;}
img a {border: none;}
th {text-align: center;}

.hide1 {display: none;}
.clr {clear:both;}
.ctr {text-align: center;}
.citation {font-style: italic; font-size: .7rem; text-align: center;}
.lcitation {font-style: italic; font-size: .7rem; text-align: left;}
.figcap {font-size: .777rem; font-style: italic;}

.line {
	text-align: center; 
	width: 50%; 
	vertical-align: bottom; 
	border: none; 
	padding: .5rem 0px;}

/*STANDARD*/

body {background-image: url(../images/background3.jpg); background-repeat: repeat;}

#wrapper { /*smaller*/
	background-image: url(../images/background3.jpg);
	width: 85%; 
	margin: 2em auto;  
	margin-top: 2.4em; 
	text-align: center; 
	max-width: 1160px;}
#wrapper2 {
	width: 95%; 
	margin: 1em auto; 
	background-image: url(../images/background3.jpg); background-repeat: repeat;}


/*HEADER*/
#header h1 {margin-top: 1em;}
#header img {margin: 1em auto 0px auto;}/*width: 70%*/
#header img.line {margin: 0px auto;}
#header p {text-align: center; font-size: .777rem;}
/*SECTION*/
#section {padding: 0px 1em;}
table {margin: 0px auto;}
td, th {margin: 0px auto; padding-left: 2px;}
ul {list-style-type: circle;}
ul li {margin:.5rem 1rem; padding: 0px;}


/*NEW SIDEBAR:*/
#sidebar {
	float: left;
	background-color: #E7E1D8;
	vertical-align: top;
	border: medium double black;
	width: 30%;
	padding: 8px;
	margin: 0px 2rem 0px 0px;
}
#sidebar ul {margin-right: 1rem; list-style-image: url(../images/newanim.gif);}
#sidebar ul li {margin: 0px; padding: 0px;}


/*BLACK FRAMED DIV white text*/
/*left float 50% with right margin*/
.picframe {float: left; background-color: black; vertical-align: top; border: 6px ridge black; width: 50%; margin: 0px auto; margin-right: 1rem;}
.picframe p {color: white; text-align:center;}
.picframe img {width: 98%; margin: 1% auto;}

/*right float 50% with left margin*/
.picframe5 {float: right; background-color: black; vertical-align: top; border: 6px ridge black; width: 50%; margin: 0px auto; margin-right: 1rem;}
.picframe5 p {color: white; text-align:center;}
.picframe5 img {width: 98%; margin: 1% auto;}

/*centered 50% *no float*/
.picframe4 {background-color: black; vertical-align: top; border: 6px ridge black; width: 50%; margin: 0px auto;}
.picframe4 p {color: white; text-align:center;}
.picframe4 img {width: 98%; margin: 1% auto;}

/*right float 30% with left margin*/
.picframe2 {float: right; background-color: black; vertical-align: top; border: 6px ridge black; width: 30%; margin: 0px auto; margin-left: 1rem;}
.picframe2 p {color: white; text-align:center;}
.picframe2 img {width: 98%; margin: 1% auto;}

/*left float 30% with right margin*/
.picframe3 {float: left; background-color: black; vertical-align: top; border: 6px ridge black; width: 30%; margin: 0px auto; margin-right: 1rem;}
.picframe3 p {color: white; text-align:center;}
.picframe3 img {width: 98%; margin: 1% auto;}

/*CLEAR DOUBLE FRAMED DIV*/
/*clear double GRAY border float right 25% black text--for portraits and text boxes*/
.portrait {float:right; width: 25%; margin: 2.5rem 0px 1rem 1rem; border: 5px double #888; padding: .4rem .2rem;}
.portrait img {width: 98%;}

/*FOOTER*/
#footer a {display: inline;}
#footer {text-align: center; font-variant: small-caps; width: 95%; margin: 0px auto; line-height: 190%;}
.copyright {font-family: Arial, Helvetica, sans-serif;font-style: italic; font-size: .777rem; text-align: center; line-height: normal;}

#validations img, #validations a {display: inline;}
#validations p {width: 20%; margin: 0px auto;}


/*COAL HOME PAGE*/
#coalhome a {color: gainsboro;}
#coalhome h2 {text-align: center; color: silver; font-family: Papyrus, "Palatino Linotype", "Book Antiqua", Palatino, serif; }

#coalhome {
	background-image: url(../images/black.gif); 
	background-repeat: repeat;
	color: black;
	background-color: #161616;
	font-family: Rockwell, Georgia, serif;
	padding: 0px;
	margin: 0px;
}
#coalhome #header {
	background-color: #333333;
	width: 80%;
	border: none;
	margin: 0px auto;
}
#coalhome div#header img {width: 261px; margin-left: 7rem; margin-top: 1rem; display: inline;}
#coalhome div#header h1 {
	display: inline-block;
	color: white; 
	font-size: 18pt; 
	font-family: Papyrus, "Palatino Linotype", "Book Antiqua", Palatino, serif; 
	text-align: center; 
	margin-top: 2rem; 
	float: right; 
	margin-right: 4rem;
}

#coalhome #section {
	width: 80%; margin: 0px auto;
}
#coalhome #compiled {background-color: #666666; padding: 3px;}
#coalhome #compiled p {color: white; text-align: center; line-height: 130%; font-size: 107%;}

#coalhome #thecoalmines {
	background-image: url(../images/black3.gif); 
	background-repeat: repeat;
	background-color: #333333;
	padding: 0px 1%;
}
#coalhome #thecoalmines p {color: silver; font-family: Rockwell, Georgia, serif; font-size: 105%; text-align: center;}
#coalhome #menubox {width: 100%; background-color: #333333; background-image: url(../images/black2.gif); padding: 2px 0px;}
#coalhome #menu {width: 70%; margin: 0px auto; }
#coalhome #menu a {font-size: 120%; background-color: #666666; background-image: url(../images/black3.gif); display: inline-block; width: 48%; height: 6rem; text-align: center; padding: 4%; border: 5px ridge black;}
#coalhome #map img {margin: 0px auto; width: 50%; display: block;}
#coalhome #map p {text-align: center; color: white;}
#coalhome #credit p {color: white; text-align: center;}


/*LINK COLORS*/
a:link {color: #006666;}
/*a:visited {color:#996600;}*/
a:hover {color:#330066;} 

	@media only screen and (max-width: 1000px) {
		html {font-size: 17px;}}
	@media only screen and (max-width: 900px) {
		html {font-size: 16px;}}
	@media only screen and (max-width: 700px) {
		html {font-size: 15px;}}
	@media only screen and (max-width: 500px) {
		html {font-size: 14px;}}
	@media only screen and (max-width: 300px) {
		html {font-size: 13px;}}
	@media only screen and (max-width: 200px) {
		html {font-size: 12px;}}

	@media only screen and (max-width: 800px) {}
	@media only screen and (max-width: 400px) {
		#header, #section, #wrapper, #wrapper2, #footer {width: 98%; margin: 0px auto; padding: 0px;}
		#section {padding: 1px;}}
	@media only screen and (max-width: 324px) {
		#header img {width: 90%; height: auto;}}