/* basic.css */

/* Block all default margins and padding */
*
	{
	margin: 0;
	padding: 0;	
	}

body
	{
	background-color: #ccc;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	}
	
#wrapper
	{
	width: 64.5em; /* Equals width of screen */
	background-color: #fff;
	margin: 0px auto; /* Centers page in Firefox */
	}
	
#header img
	{
	width: 100%;
	display: block; /* Removes small space below banner pic in IE */
	}
	
#slogan_clock
	{
	background: #fff;
	width: 100%;
	height: 1.6em;
	border-bottom: #000000 1px solid;
	overflow: hidden;
	}
	
#slogan_clock h4
	{
	padding:0 1em;
	float: left;
	font-style: italic;
	line-height: 1.6em;
	}

/* leftcolumn */

	#leftcolumn
		{
		width: 14em; /* Width plus padding equals content left margin */
		float: left;
		padding: 0px 0.25em;
		text-align: center;
		float: left;
		background-color: #006;
		}
		
	#leftcolumn a
		{
		display: block; 
		border: #ffffff 1px solid;  
		color: #ffffff; 
		text-align: left; 
		text-decoration: none; 
		width: 13.5em; /* Width plus padding equals leftcolumn width */
		padding: 2px 0 2px 0.5em;
		margin-bottom: 3px;
		}
		
	#leftcolumn a:hover
		{
		border: #b5b7cc 1px solid; 
		background-color: #3333CC;
		color:#e6e9f6;
		font-weight:bold; 
		}

/* Content */

	#content
		{
		background-color: #fff;
		margin-left: 14.5em; /* Must equal leftcolumn width including its padding */
		margin-top: 0;
		padding-top: 0;
		text-align: center;
		width: 50em;
		padding-bottom: 3em;
		}


/***********************/
/*     photo gallery   */
/***********************/

#gallery {
width: 46em; 
height: 20em; 
padding: 0.75em;  
background:  #fff; 
position: relative; 
}

#gallery b.default {
position: absolute; 
left: 0.75em; 
top: 0.75em; 
width: 20em; 
height: 15em; 
text-align: center;
}

#gallery b.default img {
display: block; 
margin: 0 auto 0.75em auto; 
border: 1px solid #eee; 
border-color: #555 #ddd #eee #333;
}

#gallery ul {
list-style: none; 
padding: 0; 
margin: 0; 
width: 15em; 
position: relative; 
float: right;
}

#gallery ul li {
display: inline; 
width: 4em; 
height: 4em; 
float: left; 
margin: 0 0 0.75em 0.75em;
}

#gallery ul li a {
display: block; 
width: 4em; 
height: 4em; 
text-decoration: none; 
border: 1px solid #000; 
border-color: #eee #555 #333 #ddd;
}

#gallery ul li a img {
display: block; 
width: 4em; 
height: 4em; 
border: 0;
}

#gallery ul li a:hover {
white-space: normal; 
border-color: #555 #ddd #eee #333; 
background: #006;
} 

#gallery ul li a:hover b {
position: absolute; 
left: -31em; 
top: 0; 
width: 20em; 
height: 15em; 
text-align: center; 
background: #fff; 
z-index: 20;
}

#gallery ul li a:hover img {
margin: 0 auto 0.75em auto; 
width: auto; 
height: auto; 
border: 1px solid #eee; 
border-color: #555 #ddd #eee #333;
}

#gallery ul li a:active, #gallery ul li a:focus {
white-space: normal; 
border-color: #555 #ddd #eee #333; 
background: #006;
outline-style:  none;
} 

#gallery ul li a:active b, #gallery ul li a:focus b {
position: absolute; 
left: -31em; 
top: 0; 
width: 20em; 
height: 15em; 
text-align: center; 
background: #006; 
z-index: 10;		
}

#gallery ul li a:active img, #gallery ul li a:focus img{
margin: 0 auto 0.75em auto; 
width: auto; 
height: auto; 
border: 1px solid #eee; 
border-color: #555 #ddd #eee #333;
}

/* Footer */
	#footer
		{
		clear: both;
		text-align: center;
		color: #fff;
		background-color: #006;
		}
		
	#footer a
		{
		background-color: #006;
		font-size: .8em;
		color: #fff;
		}