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


/* 
CSS Selectors
Is what you put out that says to the rule this is what you put back in the markup
1- Element Selector - you declare the element name (e.g. body)
2- ID Selector - it controls elements that have an id attribute (e.g. #header)
3- Context Selector: The name of the parent followed by the name for type of the descendant
4- Class selector - controls elements and is reusable (e.g. .red)

CSS Size
Measurements
In HTML <img width="100" height="100"; The value is assumed to be pixels
In CSS the measurement has to be specified with px, in, cm, mm, pt, pi; The common thing about these is that they are fixed
A measurement that is flexible in CSS is percent, em, and ex. 
How do you know how much an em is? It all depends on the size of the font being used.
To measure an em you take the an M and measure it. The size of this is = to 1em
To measure an ex you take an x and measure it's height. The measurement of this is = to 1ex

Position Property:
relative:
top: 5%; this would move down by 5%

absolute:
Parent of the header. The ultimate parent is the body. Absolute is always according to the body.


*/

body{
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: black;
}
/*#content p+p{
	text-indent: .15in;
}
#content td{
	padding: 1em;
	border: thin;
	border-color:#CCC;
}
#content table{
	padding: 1em;
	border: thin;
	border-color:#CCC;
}
#content th{
	padding: 1em;
	border: thin;
	border-color:#CCC;
}
*/
.accordion {
	width: 75%;
	border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
	background: #A89166 url(images/arrow-square.gif) no-repeat right -51px;
	padding: 7px 15px;
	margin: 0;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	
	border-bottom: none;
	cursor: pointer;
}
.accordion h3:hover {
	background-color: #e3e2e2;
}
.accordion h3.active {
	background-position: right 5px;
}
.accordion p {
	background: #A89166;
	margin: 0;
	padding: 10px 15px 20px;
}

#header{
	height: 119px;
	background-color: #DDE3FA;
	background-image:url(/images/logo2.png);
	background-position: 0 10%;
	background-repeat: no-repeat;
	position: relative;
}

#header h1{
	width: 50%;
	top: .75em;
	position: absolute;
	left: 110px;
	
}

#navigation{
	width: 100%;
	background-color: #FFFFC0;
	position: relative;
	height: .25in;
}
#navigation li {
	display: inline; 
}
#navigation ul li a {
	text-decoration:none;  
	padding: 3px 10px 3px 10px; 
	color: blue;
}
#navigation ul li a:hover {
	color: purple;
	background: #FDFD8F;
}
#navigation ul{
	margin-left: 7%;
	margin-top: 0;
}

/* #subnav{
	position: absolute;
	width: 10%;
	background-color:#F93;
	top: 2.5in;
	left: 0;
	padding-bottom: 3em;
}

#content{
	width: 80%;
	top: 2.50in;
	left: 10%;
	position: absolute;
	padding-bottom: 3em;
	background-color:#9F6;
}

#aside{
	width: 10%;
	background-color:#0CF;
	padding-bottom: 3em;
	position: absolute;
	top: 2.5in;
	left: 90%;
	right: 0;
}

#footer{
	background-color: #30F;
 	position: absolute;
 	width: 100%;
	height: 3em;
	bottom: 0;

} */

/* This method uses floats to lay out the page */

#centerbox{
	position: relative;
	overflow: auto;
	background-color: #FFFFC0;
	height: auto;
	min-height: 100%;
}

#subnav{
	width: 10%;
	float: left;
}

#content{
	position: relative;
	width: 80%;
	background-color:#A89166;
	float: left;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	margin-bottom: .5in;
	box-shadow: 3px 3px 30px #666;
	-moz-box-shadow: 3px 3px 30px #666;
	-webkit-box-shadow: 3px 3px 30px #666;
	-o-box-shadow: 3px 3px 30px #666;
}

#content div,
#subnav div,
#aside div{
	padding-left: .5em;
	padding-right: .5em;
	padding-top: 1px;
}
#content p{
	margin-left: .25in;
	text-indent: .5in;
	padding-left: .5in;
	width: 80%;
}
#content h1, h2, h3, pre{
	margin-left: 1in;
}

#content ul{
	margin-left: 1in;
	padding-left: .5in;
}
#picture{
	float: left;
	padding: 10px;  
	margin-left: 10px
}

#aside{
	width: 10%;
	float: left;
}

#aside p{
	text-align: center;
}

#footer{
	background-color: #FFFFC0;
 	width: 100%;
	height: 9em;
	float: left;
	text-align: center;
}