/* Layout */

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

#container {
	background-image: url(../images/bg.jpg);
	width: 770px;
	margin: 0 auto;
}

#header {
	background-image: url(../images/header.jpg);
	height: 230px;
}

/* this was 100. I changed it so i could see the top normally in dreamweaver - Doug */
#hcontents {
	padding-top: 170px;
}

#footer {
	background-image: url(../images/footer.jpg);
	height: 40px;
}

#fcontent {
text-align: center;
padding-top:10px;
}

/* Changed padding to 15px instead of 5px, if you look at the bio page the text was too close to the edges */
#content {
	background-color: #eaeaea;
	border: 1px solid #999;
	margin-left: 180px;
	margin-right: 25px;
	padding:15px;
}

#content textarea {
	width: 90%;
}

.utext {
text-align: right;
}

#sidebar {
	float: left;
	width:150px;
	padding-left:25px;
	text-align: left;
}

/* Changed the padding-left from 15px to 0 because now that the bullets are gone, there is too much space on the left */
#sidebar ul {
	margin-left: 0;
	padding-left: 0;
}

/* Added this style because the menu list doesn't need bullets */
#sidebar li {
	list-style: none;
}

/* I changed text-decoration from none to underline and put font-weight:bold because it wasn't very noticable just being white */
#sidebar li a.selected {
	color: #ffffff;
	text-decoration: underline;
	font-weight:bold;
}

/* Added this style because you should be able to click not just on the text */
#sidebar li a {
	display: block;
}

/* Style */

body {
font-family: "Lucida Grande", Verdana, Halvetica, sans-serif;
}

a:link {
color: #666;
}

a:visited {
color: #666; 
}
a:hover {
color: #999; 
} 

#header .h1 {
font-family: "Trebuchet MS", Verdana, Halvetica, sans-serif;
font-size: 52px;
color: #fff;
text-align: center;
}

#header a {
	color: #fff;
	text-decoration: none;
}

#header .h2 {
font-family: "Trebuchet MS", Verdana, Halvetica, sans-serif;
font-size: 22px;
color: #fff;
text-align: center;
}

#content h2 {
font-family: "Trebuchet MS", Verdana, Halvetica, sans-serif;
font-size: 18px;
color: #666;
}

#content h2 a{
text-decoration: none;
}

#content p {
text-align: justify;
font-size: 12px;
}

#sidebar {
font-family: "Trebuchet MS", Verdana, Halvetica, sans-serif;
font-size: 12px;
color: #333;
}

/* Added text-decortion:none so default link underline is removed, 
and replaced with border-bottom because you have more control 
over the appearance of border-bottom EDIT - I made the px to 0 instead of 1 -Doug*/
a:link {
	color: #333;
	text-decoration: none;
	border-bottom: 0px solid #CCCCCC;
}

/* Applied same style changes to a:visited as I did with a:link EDIT - I made the px to 0 instead of 1 - Doug */
a:visited {
	color: #333;
	text-decoration: none;
	border-bottom: 0px solid #CCCCCC;
}

/* Added text-decoration-none, changed text color to match the background blue, slightly changed border-bottom color to differ from a:link  - this is the code that makes the image smove when rolled over.. So, I edited all of the px sizes to 0 instead of 1 -Doug */
a:hover {
	color: #326696;
	text-decoration: none;
	border-bottom: 0px solid #666666;
	border-left: 0px solid #666666;
	border-right: 0px solid #666666;
	background-color: #CCCCCC;
} 

/* Added this style for the menu, so that the menu links differ from the normal links and have the box effect */
#sidebar a:hover {
	border-top: 1px solid #666666;
	margin-top: -1px;
}

.utext {
font-family: "Trebuchet MS", Verdana, Halvetica, sans-serif;
font-size: 10px;
color: #999;
line-height: 1px;
}

.utext  a:link {
color: #999;
}

.utext a:visited {
color: #999; 
}

.utext a:hover {
color: #666; 
}

#fcontent {
font-family: "Trebuchet MS", Verdana, Halvetica, sans-serif;
font-size: 12px;
color: #666;
}

#fcontent  a {
color: #666;
}