/* body */
div.body {font-family: arial, helvetica, sans-serif;}
/* mast */
div.mast {border: 1px solid #800000;
width: 100%; height: 110px; background-color: #ffffff;}
/* mugshot top left */
#mastleft {float: left; top: 0; left: 0;
background-image: url("../images/FFFmugMKH.jpg"); height: 110px; width: 115px;
background-repeat: no-repeat; background-color: #800000;
border: 10px; border-color: #800000;}
/* mast title */
#masttitle { height: 110px; margin: 0 120px;
padding-left: 0.5em; background-color: #ffffff; border-bottom: 5px #c00000; }

/* mast image right */
#mastright {float: right; margin: 0;
background-image: url("../images/VCV21.jpg"); height: 110px; width: 100px;}

/* clear floats */
div.clear_left {clear: left;}
div.clear_right {clear: right;}
div.clear_both {clear: both;}

/* box */
div.box {border: 2px solid #800000;
width: 750px; height: 110px; background-color: #ffffff;}

/* photoframe */
div.frame1 
	{
	width: 700px;
	height: 500px;
	border: 25px inset #808080;
	
	background-color: #002008;
	}

/* photomounts */
div.mount1 
	{
	margin: 60px 100px 20px 100px;
	
	background-color: #ffffff;
	}

div.mount2 
	{
	margin: 60px 80px 20px 80px;
	
	background-color: #ffffff;
	}

div.mount3
	{
	margin: 60px 80px 20px 80px;
	
	background-color: #c0c0c0;
	}

/* content */
div.content 
	{
	
	background-color: #ffffff; 
	margin: 0 0.1em 0.2em 0.1em;
	border-left: 1px solid #800000;

	}

/* Thumbnail and description */
div.thumbnail 
	{
	border-top: 1px solid #800000;
	border-left: 1px solid #800000;
	margin: 0.2em 0.5em 0.5em 0.5em;
	height: 100px;
	background-color: #ffffff;
	}



/* footer */
#footer {background-color: #ffffff; border-top: 1px solid #800000;
margin: 0.2em 0.5em; width: 100%;}

/* text formatting */
h1 {font-size: 24px; font-family: arial, sans-serif; color: #800000; 
letter-spacing: 0.5em; padding-left: 0.2em; text-align: left; margin: 0.3em 16px 0.5em 16px;}

h2 {font-size: 14px; font-family: arial, sans-serif; color: #000000; 
padding-left: 0.2em; text-align: left; margin: 0 20px 0.4em 20px;}

p {font-size: 12px; font-family: arial, sans-serif; color: #000000;  
padding-left: 0.2em; text-align: left; margin: 0 22px 0.4em 22px;}

/* nav buttons . Defines the space that the menu will occupy, and provides a context for the menu 
so that we can define the way the list and links will behave inside the DIV. */
#button {
	
	float: left;
	border-top: 1em solid #800000;
	border-bottom: 1em solid #800000;

	width: 8.5em;
	
	
	padding: 0.5em 0.2em 1em 0.2em;
	margin-bottom: 1em;
	margin-right: 2px;
	margin-left: 0;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background-color: #800000;
	
	}

#button ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	}
		
#button li {
	border-bottom: 2px solid #90bade;
	margin: 0;
	}

#button li a {
	display: block;
	padding: none;
	border-left: 10px solid #508fc4;
	border-right: 10px solid #1958b7;
	background-color: #2175bc;
	color: #fff;
	text-decoration: none;
	width: 100%;
	}

/* To make the links active for the full width of the DIV, I made them display: block;. 
This works for everything but IE/Windows. If you give the block an explicit width of 100%, 
then IE/Windows plays along. But doing this creates problems with IE5/Mac and 
Netscape/Mozilla. So I used the child selector“>” to redefine the width to auto. Since 
IE/Windows doesn’t understand child selectors, it ignores the rule. IE5/Mac, Opera and 
Netscape/Mozilla follow the rule, and everyone is happy. */


html>body #button li a {
	width: auto;
	}

#button li a:hover {
	border-left: 10px solid #5ba3e0;
	border-right: 10px solid #1c64d1;
	background-color: #2586d7;
	color: #fff;
	}

#rightcolumn {
	float: right;
	
	width: 122px;
	border-right: 1px solid #800000;
	border-left: 1px solid #800000;
	padding: 1em 0 1em 0;
	margin-bottom: 1em;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background-color: #ffffff;
	
	}


#spacer {
	position: absolute; 
	top: 300; 
	left: 200; 
	width: 200; 
	height: 300; 
	background-color: teal;
	}

.author {
	font-family: 'Times New Roman', serif;
	font-size: 0.8em;
	font-style: italic;
	}

img.left {
	float: left;
	border: 13px inset #808080;
	margin: 0 0.8em 0 0;
	}

img.right {
	float: right;
	border: 13px solid #808080;
	margin: 0 0 0 0.8em;
	}



img.center {
	
	margin: 12px 12px 8px 12px;
	
	}

div.caption {
	border: 5px ridge;
	padding-bottom: 2px;
	width: 20em;
	height: 1.5em;
	margin-left: 14em;
	margin-bottom: 30px;
	text-align: center;
	font-color: #ffffff;
	font-size: 1.0 em;
	font-family: arial, sans-serif;
	font-weight: bold; 
	background-color: #808080;
	}