/*
File:        ewh-styles.css
Author:      John K Johansen
Description: the primary style sheet for http://www.ernestwoodhouse.com/ 
Requirement: WGU BSIT Software Development - C393 Web Development 6/15/2015
*/

/* ================================================= General Styles   */
html {
    font-family: Verdana, Tahoma, Ariel, Geneva;
	font-size: 	100%;
	margin: 	0;
	padding: 	0;
}

body {
	background: #393007 url("../images/ErnestWoodHouse-curlique.gif") no-repeat center top;	
	margin: 	auto;
	width: 		90%;
	min-width:	450px;
}

header {
	position: 	absolute;
	height:		108px;
	top:		0;
	left:		0;
	margin:		0 5%;
	width:		85%
}

.logo {
	float: 		right;
	height:		120px;
}

img.photo {
	width:		90%;
	margin:		auto;
	border: 	4px solid black;
}

img.smallPhoto {
	width:		40%;
	float:		right;
	border:		4px solid black;
	margin:		1em;
}

img.gallery {
	width:		25%;
	float:		right;
	border:		4px solid black;
	margin:		1em;
}

/* ========================================= Navigation Styles   */
nav {
	position:	absolute;
	top:		78px;
	margin-left: auto;
}

.navActive {
	font-size:	120%;
	font-weight: bold;
	text-decoration: none;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	float:left;
	margin:	0 2px 0 0; 
	background-color: #F3E7B0;
    color: black;

}

.navButton {
	text-decoration: none;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	float:left;
	margin:	0 2px 0 0;
	background-color: #C2A118;
    color: maroon;
}

.navButton:hover {
	color: white;
	background-color: #6d6d6d;
	text-decoration: none;
}

/* =============================================== Main Body Styles   */

main {
	position:	absolute;
	top:		120px;
	padding:	12px;
	width:		90%;
}

article {
	width:		70%;
}

section {
	width:		70%;
}

aside {
	float:		right;
	width:		30%
}


footer {
	position:	relative;
	bottom:		1em;
	clear: 		both;
	width: 		90%;
	padding:	24px 0 12px 0;
	margin:		auto;
}

footer div {
	border:		10px;
	border-color: white;
	border-style: outset;
	border-radius: 18px;
	box-shadow:	5px 10px 5px grey;
	background-color: #6D6D6D;
    color: white;
}

footer div table {
	width:		90%;
	margin:		0 auto;
}

footer * a {
	color:		white;
}

footer div table  tr td{
	text-align: center;
	font-size:	60%;
}

/* =============================================== Text Styles   */

p {
	font-size:	100%;
	padding: 	0 12px;
}

h1 {
	padding: 	0 12px;
	font-size:	170%;
	border-radius: 10px 0 0 10px;
	box-shadow:	5px 10px 5px grey;
}

h2 {
	padding: 	0 12px;
	font-size:	150%;
}

h3 {
	padding: 	0 12px;
	font-size:	130%;
}

h4 {
	padding: 	0 12px;
	font-size:	110%;
}

a {
	text-decoration: none;
}

a:hover {
	font-weight: bold;
}


/* ID selectors */
#plaque {
	border:		20px;
	border-color: white;
	border-style: outset;
	border-radius: 18px;
	box-shadow:	5px 10px 5px grey;
}

#copyright {
	color:		white;
	font-size:	xx-small;
}

#headline {
	top:		0;
	width:		400px;
	color:		white;
	font-size:	10px;
}

/*
Author:      John K Johansen
Description: a collection of color descriptor which can be used by divs to set 
    background colors with complimentary text colors.
Requirement: WGU BSIT Software Development - C393 Web Development 6/15/2015
*/
.colorLight {
    background-color: #F3E7B0;
    color: black;
}

.colorMedLight {
    background-color: #EFDA83;
    color: black;
}

.colorMedium {
    background-color: #C2A118;
    color: maroon;
}

.colorMedDark {
    background-color: #6D6D6D;
    color: white;
}

.colorDark {
    background-color: #393007;
    color: #F3E7B0;
}