/*body positiong*/
body
{
	width:700px;
	height:auto;
	background-color:#CCCCCC;
	margin:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:30px;
}

p:first-letter
{
	color:#000099;
	font-size:larger;
	font-weight:bolder;
}

/*remove the behaviour of links.   img is here to remove the border it gets when a link*/
img, a:link, a:visited, a:active
{
	background-color: inherit; 
	text-decoration: none; 
	border:none;
	color:#000000;
}

/*change colors when hovering over a link*/
a:hover
{
	background-color:#FFFFFF;
	color:#0000CC;
}

/*grouped them all together to inherit border=style:solid*/
#main, #header, #date, #footer, #copyright, #menu
{
	border-style:solid;
	border-color:#000099;
}

/*change those border properties we want to be different from parent*/
#header, #date, #copyright, #menu, #menu a:hover
{
	border-width:2px;
	border-color:#666666;
	background-color:#E6E6E6;
}

/*main area inside the body*/
#main
{
	width:100%;
	height:auto%;
	top:30px;
	position:relative;
	background-color:#FFFFCC;
	border-width:medium;
}

/*this is the inner part to the above id #main.  Used to position data so that it doesn't interfere with the 
z-index boxes floating around the edges*/
#inner_main
{
	padding-top:50px;
	padding-left:100px;
	padding-bottom:20px;
	padding-right:20px;
	background-color:inherit;
}

#inner_main a
{
	color:#0000CC;
}

/*The header is a floating box at the top left*/
#header
{
	z-index:1;
	position:absolute;
	top:-20px;
	left:-30px;
	width:75%;
	height:60px;
	padding:3px;
	font-size:xx-large;
}

/*remove list styles so there aren't any bullets etc*/
#menu ul
{
	list-style:none;
}

/*set properties of li inside #menu so they will fit*/
#menu li
{
	width:100px;
	padding-bottom:10px;
	height:16px;
	vertical-align:middle;
	position:relative;
}

/*groupd ids to use inheritance of property values.
z-index makes them floating boxes*/
#date, #copyright, #menu
{
	z-index:1;
	position:absolute;
	top:-10px;
	right:-20px;
	width:auto;
	height:auto;
	padding:3px;
}

/*override any parent values we want to change.
Position the menu to the left*/
#menu
{
	height:70%;
	width:100px;
	left:-30px;
	top:100px;
	font-size:125%;
	vertical-align:middle;
	padding-right:5px;
	position:absolute;

}

/*this aligns the text for the menu to the left a little bit*/
#menu ul li a
{
	left:-20px;
	position:relative;
}

/*menu_icon is inside the menu. Made as a class since it gets referenced more than once
Float left so the menu text can follow after it*/
.menu_icon, .menu_icon_faded
{
	float:left;
	left:-40px;
	position:relative;
	visibility:hidden;
}

/*allows icons to be faded when the user is on that page*/
.menu_icon_faded
{
	opacity:.5;
	filter:alpha(opacity=50);
	visibility:visible;
}

/*positioned bottom right*/
#copyright
{
	top:98%;
	right:+40px;
}

/*grouped to set equivalent values such as height to the same thing*/
#main #vert_bar_thin, #vert_bar_thick
{
	right:+75px;
	position:absolute;
	height: 100%;
	width:5px;
	background-color:#8486CE;
	top:0px;
}

/*fade the bars a bit.  OPACITY for FF, FILER:ALPHA for IE*/
#vert_bar_thick, #vert_bar_thin
{
	z-index:0;
	opacity:.3;
	filter:alpha(opacity=30);
}

#vert_bar_thick
{
	right:+110px;
	width:20px;
}

#hImgScroll, #bigImg
{
	border:thin #999999 solid;
}

#hImgScroll
{
	height:170px;
	overflow:auto;
	white-space:nowrap;
}

#bigImg
{
	z-index:1;
	position:relative;
	display:none;
	width:inherit;
	left:-4px;
	margin-top:10px;
	margin-bottom:30px;
	border-width:medium;
}