/* These directives set up the default font info as well as the base background color. I think the height stuff is to try to make sure it extends all the way to the bottom of the page content...*/
html, body { height: 100%; }

body {
	/* Base backround color - For some bandwidth burning reason I can't quite fathom, this is both set as a color value and a repeating image. They're the same bloody color.*/
	background: #90a49b url(./images/back.jpg) 0 50%;
	/* Base text color */
	color: #21352C;
	text-align: center;
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 12px;
	padding:0;
}

/* 	This means exactly what it looks like - no padding or margins for 
 *		any elements unless overridden by a more specifc rule. In CSS, the 
 *		most specifc selector (the bit before the { character) is what 
 *		gets applied to a particular element. You could probably pull the 
 *		padding declaration out of the body rule above, but I suspect it's 
 *		there to cover a misbehaving microsoft browser.
 * 
 */
* {
	padding:0;
	margin:0;
}

/*Default list styling*/
ul, 
ol {

margin: 5px 0 20px 0px;
list-style-type: none;

}
li {
	margin-left: 7px;
	list-style-type: none;

}

/* General Settings*/

/*		This rule clevery turns the <hr> tag into a spacer gif, while degrading 
 * 	nice for screereaders. Doesn't matter at all to you, 'cept it's a 
 * 	spiffy trick.*/
hr#clear {
	clear: both;
	height: 65px;
	visibility: hidden;
}
/*Default heading coloring*/
h1, 
h2, 
h3,
h4,
h5,
h6 {
	color: #708D9D;
	font-weight: bold;
}
/*Heading sizes*/
h1 {
	font-size: 16px
}
h2 {
	font-size: 15px;
}
h3 {
	font-size: 14px;
}
h4 {
	font-size: 13px;
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 11px;
}

/*Default paragraph margins*/
p{
	margin: 10px 0;
}
/* Default link default/visted/on hover colors.*/
a:link {
color: #973625;
text-decoration: none;
}

a:visited {
	color: #9db1a8;
	text-decoration: none;

}
a:hover, a:active {
	color: #1e3229;
	text-decoration: none;
}



/* =====HEADER STUFF===== */

/*		This rule is what makes the visual part of the header/column/sidebar 
 *		effect work. It's where the repeating column background image 
 *		is used. It also makes sure that the content column extends 
 *		the whole length of the page. It's based on the well known 
 *		faux column technique. Google knows more about it.	
 */
#container {
	background: #FFF url(./images/repeat.jpg) repeat; /* The only reason you see a color here (#FFF) is as a placeholder.*/
	min-height: 100%;
	_height: 100%;
	width: 1024px;
	margin: 0 auto;
	text-align: left;
	position: relative;

}

/*		This rule is what swaps an your header image in for the text 
 *		link. It does it by positioning the text way the hell outside
 *		of the window. My personal taste would go more toward just 
 *		making the text hidden. To each thier own though. The height
 *		value should match your header image
 */
h1#header {
	margin: 0;
	height: 300px;
	background: url(./images/head.jpg) 0 no-repeat;
	text-indent: -1234em;
}

/*		This rule finishes the header image by resizing and positioning
 *		the anchor to cover the whole image. At least, I think it's 
 *		supposed to. It doesn't really seem to work in practice. You
 *		could just get rid of the whole rule and take the link out of the 
 *		header in the HTML file if you don't want it to work that way.
 */
#header a {
	position: absolute;
	right: 7px;
	top: 2px;
	height: 26px;
	width: 23px;
	text-decoration: none;
}

/* =====MAIN CONTENT AREA STUFF===== */

#wrapper {
	width: 690px; /*needs to match up with background image in the container rule above*/
	float: right;
	position: relative;
	margin-top: -125px;

}
#content {
	padding: 0 100px 10px 0;

}
p#content{
	font-size: 13px;
}
/*Heading text font/color - Applies to Lorem Text header bit on the page*/
h2#content {
	margin: 0 0 2px 0;
	background: url(../dnistone/images/headingborder.gif) 0 100% no-repeat; /* This is a spacer gif - I'm not sure if it's really needed, but it might be here for badly-behaved browsers.*/
}


/* =====SIDEBAR STUFF===== */

/* 	Sidebar Positioning - The color bit is setting the default 
 * 	text color for things in the sidebar.
 */
#sidebar {
	color: #6F4219; /*default text color for sidebar*/
	margin: -125px 5px 5px 80px;
	width: 245px;
}

/* Sidebar link default/visted/on hover colors.*/
#sidebar a {
	color: #1e3229;
	text-decoration: none;
}

#sidebar a:visited {
	color: #9db1a8;
	text-decoration: none;

}

#sidebar a:hover {
	color: #1e3229;
}