@charset "utf-8";
/*css document*/
body{ color: #333; background-color: #ccc; background-image: url("../media/supernatural-logo-embleme-png-14.jpg"); background-repeat: repeat; font-family: Macondo Swash Caps, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-size: 16px; text-align: left; line-height: 24px; margin: 0; padding: 0; }





h1,h2,h3,h4{color:#2A2A2A;font-family: Grenze Gotisch,  Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";}


h1,h2,h3,h4 {line-height: 35px;}
h1{ font-size: 36px ;}
h2{font-size: 30px ; background-color: #333 ; padding: 10px; color: #fff}
h3{font-size: 26px; background-color: #CCCCCC ; padding: 10px;}
h4{font-size: 24px; background-color: #CCCCCC ; padding: 10px;}
blockquote {font-size:24px; background-color: #CCCCCC ; padding: 30px 10px;}

/*Link Styles*/

a:link {color:#3D0B0B; font-weight: bold; text-decoration: none; }

a:visited {color:#460D0E;}

a:focus {color:#777; text-decoration: underline; }

a:hover {color:#777; text-decoration: underline;}

a:active {color:#3D0B0B;}

/*headder Styles*/

header{ text-align: center;}

/*nav Styles*/

nav{ background-color: #666; padding: 16px; text-align: center; margin-bottom: 20px;}
nav li {display: inline; margin-right: 48px;}
Nav a {text-transform:uppercase;}
nav a:hover, nav a:focus { color: #fff; text-decoration: none;}
nav a:active{ color: #381011;}

/*main Styles*/

main {background-color:#fff; padding: 4px 32px 24px; width: 68%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing: border-box; margin-bottom: 16px; min-height: 480px;}
 
.full-width-main { width: 100%;
	
}
/*aside styles*/

aside{ background-color:#fff; padding: 4px 16px 24px; width: 30%; hieght: 200px; float: right; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing: border-box; margin-bottom: 22px;}

aside h2 { background-color: transparent; color: #333; padding: 0;}

/*footer Styles*/

footer{ clear: both; text-align: center; background-color: #333; padding:16px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing: border-box; hieght:50px; color: #eee;}

/*button styles*/

.button:link,
.button:visited { color:#fff; background-color: #381011; border:#333 solid 4px; text-decoration: none; padding:20px; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing: border-box; display: block; margin-top: 20px; width: 100%; text-align: center;}
.button:focus,
.button:hover{ background-color:#666}
.button:active{background-color:#381011;}


.message-bar {
width: 100%;
margin: 0;
padding: 1em;
color: #fff;
background-color: #ff9900;
text-align: center;
}


/*Table styles*/
table {	width: 100%; font-size:18px;  

}

th{	background-color:#864041; color:#1F0304}

tr{	background-color: #806262;}

tr:nth-child(odd) {	background-color:#AA9292;}

td,tr,th {	border: 3px solid #fff; padding:1em; vertical-align: top; text-align: left;
}

table caption{ color:#411415; font-size: 35px; text-transform: capitalize; }

/*Form styles*/
label {text-align: left; width: 25%; float: left; padding-right: 0.5em;}
.textbox{ width: 70%; padding: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing: border-box;}
.submit{
	margin-left: 30%;
}
/*custom styles*/

.important-section {color:#820000;}
.light-gray-background {backrgound-color: #eee; padding:24px;}
#wrapper {max-width:1000px; margin: 0 auto; }
.medium-gray-background{ background-color: #CCCCCC ; padding: 10px;}

/*image styles*/
.float-left{ float: left; margin-right: 20px; margin-bottom:20px;}

.float-right{ float: right; margin-left: 20px; margin-bottom:20px;}


/*48em (768px and smaller)*/
@media screen and (max-width:48em) { main{ width: 100%; } aside{ width: 100%; padding: 4px 32px 24px; }

}

/*40em (640px and smaller)*/
@media screen and (max-width:40em){
	
.float-left,
	.float-right { width: 100%;} }


/*30em (480px and smaller)*/
@media screen and (max-width:30em) { main{padding: 0.125em 0.5em 0.25em} aside{padding: 0.125em 0.5em 0.25em} blockquote{ margin-left: 0; margin-right: 0; padding-left: 0.5em; padding-right: 0.5em;}}