@charset "utf-8";
/* CSS Document */
div#header {
	background: #ccccca url(images/headphoto.jpg) top center no-repeat;
	width: auto;
	height: 125px;
	overflow: hidden;
	border-bottom: 3px solid #000;
	z-index: 0;
	}

/*page specific navagation*/
div#topLinks {
	float: right;
	z-index: 4;
	}
	
div#topLinks a {
	margin-left: 10px;
	}

div#topLinks a.home {
    display: block;
    width: 45px;
    height: 37px;
	background: url("images/home.png") 0 0 no-repeat;
	text-decoration: none;
	float: left;
	}
	
div#topLinks a:hover.home {
    background-position: 0 -38px;
	float: left;
	}
	
div#topLinks a.print {
    display: block;
    width: 45px;
    height: 37px;
	background: url("images/print.png") 0 0 no-repeat;
	text-decoration: none;
	float: left;
	}
	
div#topLinks a:hover.print {
    background-position: 0 -36px;
	float: left;
	}
	
div#topLinks a.web {
    display: block;
    width: 45px;
    height: 37px;
	background: url("images/web.png") 0 0 no-repeat;
	text-decoration: none;
	float: left;
	}
	
div#topLinks a:hover.web {
    background-position: 0 -37px;
	float: left;
	}

div#topLinks a.pic {
    display: block;
    width: 45px;
    height: 37px;
	background: url("images/photo.png") 0 -73px no-repeat;
	text-decoration: none;
	float: left;
	}
	
div#topLinks a:hover.pic {
    background-position: 0 -37px;
	float: left;
	}

div#topLinks a.contact {
    display: block;
    width: 45px;
    height: 37px;
	background: url("images/contact.png") 0 0 no-repeat;
	text-decoration: none;
	float: left;
	}
	
div#topLinks a:hover.contact {
    background-position: 0 -37px;
	float: left;
	}
	
/*page specific formatting*/
a#close {
	display: none;
	position: relative;
	top: -100px;
	right: -77px;
	float: right;
	z-index: 11;
	}
	
a.close {
    display: block;
    width: 20px;
    height: 20px;
	background: url("images/close.jpg") -20px 0px no-repeat;
	text-decoration: none;
	float: right;
	}
	
a:hover.close {
    background-position: -40px 0px;
	}
	
.close span {
	display: none;
	}
	
/* slides styling */

/*this defines the photo box size, background and text*/
.photo {width:416px; height:0px; background: none; text-align:left; position:relative; margin: 35px;}

/*this group defines the width of the tabs and formatting for the text content.  it also hides annoying list bullets.*/
.photo ul.topic li {display:block; float:left;}

/*this group hides the images*/
.photo ul.topic li a ul, 
.photo ul.topic li ul 
{display:none;}

/*this defines the size, location, and color of the background box behind the thumbnails. Set width and height to the total thumb box width and height x4 + 16*/
.photo ul.topic li a ul, 
.photo ul.topic li ul 
{display:block; position:absolute; left:0px; top:0px; list-style:none; padding:0; margin:0; height:0px; width:416px;}

/*this defines the outermost line on the thumbnail box.  Set width and height to image box size plus border and margin*/
.photo ul.topic li a ul li, 
.photo ul.topic li ul li 
{display:inline; width:100px; height:68px; float:left;  margin:2px;}

/*this defines the inside thumbnail box size and color.  Set width and height to image size plus border.*/
.photo ul.topic li a ul li a, 
.photo ul.topic li ul li a 
{display:block; width:98px; height:66px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #666;}

/*this defines the thumbnail image size and border.  Set this to smaller than the image size by percentage of choice*/
.photo ul.topic li a ul li a img, 
.photo ul.topic li ul li a img 
{display:block; width:96px; height:64px; border:1px solid #eee;}

/*this hides the large images by making their box size 0*/
.photo ul.topic li a ul li a img.large, 
.photo ul.topic li ul li a img.large 
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}

/*this makes the large hover thumbnail appear above the small thumbnail*/
.photo ul.topic li a ul li a:hover, 
.photo ul.topic li ul li a:hover 
{white-space:normal; position:relative;}

/*this defines the size and location of the large hover thumbnail.  Set width and heigh to thumb size.*/
.photo ul.topic li a ul li a:hover img, 
.photo ul.topic li ul li a:hover img 
{position:absolute; left:-12px; top:-8px; width:120px; height:80px; border-color:#fff;}

/*this hides the large imgage while hovering*/
.photo ul.topic li a ul li a:hover img.large, 
.photo ul.topic li ul li a:hover img.large 
{position:absolute; display:block; width:0px; height:0px; overflow:hidden; border:0; background:#333;}

/*this brings the large picture up in the right place*/
.photo ul.topic li ul li a:focus, 
.photo ul.topic li ul li a:active
{position:static; outline:0;}

/*this makes the active small image hidden*/
.photo ul.topic li ul li a:focus img, 
.photo ul.topic li ul li a:active img
{position:absolute; left:200px; top:170px; width:120px; height:80px; padding:0; background:#000; border:0; z-index:5;}

/*this defines the size and location of the large image.  It also makes it stay when the mouse hovers off the box*/
.photo ul.topic li ul li a:focus img.large, 
.photo ul.topic li ul li a:active img.large
{position:absolute; left:-112px; top:-69px; width:640px; height:426px; padding:0; background:#000; border:4px solid #eee; z-index:10;}

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.

Thanks Stu!
=================================================================== */