/* genneral appearance*/
body {
  background-color: #99CCCC;
  margin: 0em;
  padding: 20px;
  font-style: normal;
}
h1
{
  color: #336699;
  margin: 0;
  margin-bottom: 0em;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 24px;
}
h2
{
  color: #000000;
  margin: 0;
  margin-bottom: 0em;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 18px;
}
div.text
{
  padding-left: 20px;
  padding-right: 20px;
  margin-top:0px;
  color: #000000; 
  font-size: 16px; 
  font-family:Arial, Helvetica, sans-serif; 
  text-align: left;
}
div.textblackcenter
{
  padding-left: 20px;
  padding-right: 20px;
  margin-top:0px;
  color: #000000; 
  font-size: 16px; 
  font-family:"Courier New", Courier, mono; 
  text-align: center;
}
div.textsmall
{
  padding-left: 20px;
  color: #000000; 
  font-size: 12px; 
  font-family: Arial, Helvetica, sans-serif; 
  text-align: left;
}
div.textwhitebig
{
  padding-left: 20px;
  padding-right: 20px;
  margin-top:0px;
  color: #ffffff; 
  font-size: 20px;
  font-weight:bolder; 
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
/* banner at the top of the page*/
div.top
{
  height: 178px;
  width: 800px;
  align: center;
  margin:0 auto;
  background:url("images/topbanner.jpg") left top no-repeat;
}
/* the navigation bar*/
div.bar
{
  padding: 1px;
  background-color: #000000;
  height: 31px;
  width: 798px;
  align: center;
  margin:0 auto;
  text-align: center;
}
div.button
{
  margin: 1px;
  height: 22px;
  width: 112px;
  float: left;
}
div.button button
{
  display: inline;
  margin: 1px;
  text-align: center;
}
a.button
{
  display:block;
  color: #000000; 
  font-size: 12px; 
  font-family: arial; 
  font-weight:bold;
  text-align: center;
  text-decoration: none;
  padding-top: 0px;
  width:112px;
  height:22px;
  background:url("images/1.gif") left top no-repeat;
  padding-top: 7px;
}
a.button:hover
{
  color: #ffffff;
  background:url("images/2.gif") left top no-repeat;
  padding-top: 7px;
}
/* the body of the page*/
div.body
{
  background-image:url('images/bodygradient.gif');
  background-repeat: repeat;
  background-color: #336600;
  padding-bottom: 0px;
  width: 800px; 
  align: center;
  margin:0 auto;
  font-size:50px; 
  position:relative; 
  z-index:1;
  margin-top:0px;
  margin-bottom:30px;
}
div.bodybottom 
{
  align: center;
  margin:0 auto;
  width: 800px;
  height: 20px;
  background:url("images/bodybottom.png") center bottom no-repeat;
}
/* the various containers and their contents */

div.container240
{ 
  top:-20px; 
  left: 540px; 
  width: 240px; 
  height: auto;  
  padding-top:20px;
  padding-bottom:0px;
  position:absolute;
  z-index:9;
}
div.module240
{ 
  width: 240px; 
  height: auto;  
  padding-top:20px;
  padding-bottom:0px;
  position:relative;
  z-index:10;
}
div.whitebox240
{
  width: 240px; 
  height: auto; 
  background-color: #ffffff; 
  font-size: 12px; 
  font-family: arial; 
}
div.whitetop240 
{
  width: 240px;
  height: 15px;
  background:url("images/whitetop240.png") right bottom no-repeat;
}
div.whitebottom240 
{
  width: 240px;
  height: 15px;
  background:url("images/whitebottom240.png") right top no-repeat;
}
div.container500
{ 
  top:20px; 
  left: 20px; 
  width: 500px; 
  height: auto; 
  position:relative; 
  z-index:11;
}
div.module500
{ 
  margin-bottom:20px; 
  width: 500px; 
  height: auto; 
  position:relative; 
  z-index:12;
}
div.whitebox500
{
  width: 500px; 
  height: auto; 
  background-color: #ffffff;
  font-size: 12px; 
  font-family: arial; 
}
div.whitetop500 
{
  width: 500px;
  height: 15px;
  background:url("images/whitetop500.png") right bottom no-repeat;
}
div.whitebottom500 
{
  width: 500px;
  height: 15px;
  background:url("images/whitebottom500.png") right top no-repeat;
}
div.container420
{
  top:20px;
  left:20px;
  width:420px;
  height:auto;
  position:absolute;
  z-index:11;
}
div.module420
{
  padding-bottom:20px;
  left:20px;
  width:420px;
  height:auto;
  position:relative;
  z-index:12;
}
div.blackbox420
{
  align: center;
  margin:0 auto;
  width: 420px; 
  height: auto; 
  background-color: #000000; 
  font-size: 12px; 
  font-family: arial; 
}
div.blacktop420 
{
  width: 420px;
  height: 15px;
  background:url("images/blacktop420.png") right bottom no-repeat;
}
div.blackbottom420 
{
  width: 420px;
  height: 15px;
  background:url("images/blackbottom420.png") right top no-repeat;
}
div.blackbox500
{
  align: center;
  margin:0 auto;
  width: 500px; 
  height: auto; 
  background-color: #000000; 
  font-size: 12px; 
  font-family: arial; 
}
div.blacktop500 
{
  width: 500px;
  height: 15px;
  background:url("images/blacktop500.png") right bottom no-repeat;
}
div.blackbottom500 
{
  width: 500px;
  height: 15px;
  background:url("images/blackbottom500.png") right top no-repeat;
}
div.container760
{
  top:20px;
  left:20px;
  width:760px;
  height:auto;
  position:absolute;
  z-index:11;
}
div.module760 
{
  margin-bottom:20px;
  width: 760px; 
  height: auto;  
  position:absolute; 
  z-index:6;
}
div.whitebox760
{
  width: 760px; 
  height: auto; 
  background-color: #ffffff; 
  font-size: 12px; 
  font-family: arial; 
  padding:0px;
  margin:0px;
}
div.whitetop760 
{
  width: 760px;
  height: 15px;
  background:url("images/whitetop760.png") right bottom no-repeat;
}
div.whitebottom760 
{
  width: 760px;
  height: 15px;
  background:url("images/whitebottom760.png") right top no-repeat;
}
div.nestedcontainer
{
  height:90px; position:relative; z-index:99;
}
div.generalnestedcontainer
{
  width:auto; height:90px; z-index:90; position:relative;
}
div.nested1
{
  top:0px; left:0px; position:absolute; z-index:100;
}
div.nested2
{
  top:0px; left:130px; width:300px; position:absolute; z-index:101;
}
div.nested7
{
  top:-10px; left:0px; width:180px; position:relative; z-index:97; padding:20px; 
}
div.nested8
{
  top:0px; left:190px; width:250px; position:absolute; z-index:98; padding:20px; 
}
div.photocontainer
{
  padding-left:20px;
  padding-top:5px;
  padding-bottom:5px;
  background-color:#ffffff;
  margin:0px;
}
div.photocontainer img 
{
  border:1px; 
  border-thickness: 1px; 
  border-color: #cccccc; 
  border-style: solid;;
  margin: 0px 18px 18px 0px;
  padding-bottom:0px;
  padding-right:0px;
}
a.photocontainer:hover img
{
  border:1px; 
  border-thickness: 1px; 
  border-color:#000000; 
  border-style: solid;;
  margin: 0px 18px 18px 0px;
  padding:0px;
}
a.photocontainer:hover 
{  color: red; border: 0px; /* irrelevant definition to overcome IE bug */}
div.side_box 
{ 
  top:20px; 
  left: 580px; 
  width: 200px; 
  height: 300px; 
  background-color: #669933; 
  position:absolute;
  z-index:3;
}
div.side_box_box
{
  margin:10px;
  width: 180px; 
  height: 280px; 
  background-color: #006666; 
  font-size: 20px; 
  font-family: arial; 
}
div.side_box_box img {margin: 0px 5px 0px 0px}
div.side_box2 
{ 
  top:340px; 
  left: 580px; 
  width: 200px; 
  height: 300px; 
  background-color: #669933; 
  position:absolute;
  z-index:8;
}
div.side_box_box2
{
  margin:10px;
  width: 180px; 
  height: 280px; 
  background-color: #006666; 
  font-size: 12px; 
  font-family: arial; 
}
/* stuff for the changing lyrics on the music page */
div.hidden
{
  margin:0px;
  width: 480px; 
  height: auto; 
  background-color: #ffffff;
  font-size: 12px; 
  font-family: arial; 
}
/* stuff for the photo gallery, does not include thumbnails*/
#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(images/overlay.png); }

* html #overlay{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/overlay.png", sizingMethod="scale");
	}