body	{
	font-family: verdana, arial, helvetica, sans-serif;
	font-size:1em;
	background-color:#39f;
	margin:0;
	text-align:center;
	}



ul#fam	{
	width:480px;
	height:358px;
	background: url(fam.gif) no-repeat ;
	margin:30px auto;
	padding:0;
	position:relative;
	}


#mess{
	width:480px;
	height:50px;
	margin:0px auto 15px auto;/*
	position:relative;
	*/
	
	}

#email {
	text-align:center;
	margin:0px auto 15px auto;
	padding:12px;
	}

div#email h4 {
	color:#330099;
	margin:20px 10px;
	/*font-style:italic;*/
	}
	
ul#fam	li	{
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	
	}

	
ul#fam	li, ul#fam	a{
	display:block;
	}

	
	
#mom {top:56px;left:67px;width:112px;height:184px;}	
#dad {top:76px;left:276px;width:92px;height:140px;}
#rusty {top:4px;left:173px;width:100px;height:137px;}
#davy {top:196px;left:255px;width:77px;height:183px;}	
	
#mom a{height:184px;}	
#dad a{height:140px;}
#rusty a{height:137px;}
#davy a{height:183px;}	


/*
1st number - horiz offset - is negative the <li>'s left offset 
2nd number - vetical offset -  is negative one half image height (how far it's moved vertically, minus (technically minus) the <li>'s top offset 
*/
#mom a:hover{background: transparent url(fam.gif)  -67px -414px no-repeat;}	
#dad a:hover{background: transparent url(fam.gif) -276px  -434px no-repeat;}	
#rusty a:hover{background: transparent url(fam.gif) -173px -720px no-repeat;}/* from bottom third -(4 + 358 + 358)*/	
#davy  a:hover{background: transparent url(fam.gif) -255px -912px no-repeat;}	/* from bottom third -(196 + 358 + 358)*/	

	
h3	{
	color:#330099;
	margin:20px 10px;
	font-family: "trebuchet ms", trebuchet, monaco, verdana, arial, helvetica, sans-serif;
	padding:2px;	
	/*font-style:italic;*/
	}

div#mainimage {
	background-color:#ccffcc; /* padding color inside border */
	border:1px dashed #333;
	margin:15px auto;
	/* width is +12 iframe width, height is +4 */
	width:500px;
	height:274px;
	padding:6px 0px 4px 0px;
	}	
	
div#mainarea {
	background-color:#ccffcc; /* padding color inside border */
	border:1px dashed #333;
	margin:15px auto;
	/* width is +12 iframe width, height is +4 */
	width:625;
	height:auto;    /*  mozilla  (pixel-defined in css) */
	padding:6 10;
	}	


div#mainarea h3 {
	background-color:#ccff99;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	border-bottom:1px solid #099;
	border-left:1px solid #099;
	}
	
div.exp {
	font-size:.9em;
	margin:10 0;
	text-align:left;
	}

div.centerpicture {
	text-align:center;
	margin:0 auto;
	padding:0;
	}



div.thumbcollection {
	background-color:#dfefff;
	border:1px dashed #333399;
	margin:15px auto;
	margin-top:15px; /* opera #dfefff  #66cc00*/
	width:625px;
	}


div.thumbcollection h3 {
	background-color:#c6e0fd;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	border-bottom:1px solid #39f;
	border-left:1px solid #39f;
	}


div.thumb {
	float:left;
	margin:4px 8px 16px 8px;
	width:80px;
	font-size:.6em;
	font-family: lucida,monaco, verdana, arial, helvetica, sans-serif;
	}
	
div.spacer {
	clear:both;
	font-size:.1em;
	font-family: "small fonts",lucida,monaco, verdana, arial, helvetica, sans-serif;
	}

div#bak {
	margin:15px auto;
	}

div#bak a{
	color:#fff;
	font-weight : bold; 
	}
	
div#bak a:hover{
	color: #f90;
	font-weight : bold; 
	}

.sprintdiv {
	border-top:1px solid #309;
	margin:40 0;
	
	}


a:link, a:visited {
	font-weight : bold; 
	text-decoration : underline;
	color: #309;
	background: transparent; 
	}
a:hover {
	font-weight : bold; 
	text-decoration : none;
	color: #f90;
	background: transparent; 
	}
a:active {
	font-weight : bold; 
	text-decoration : none;
	color: #3300cc;
	background: transparent;  
	}