/* CSS Document */
body {
  font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

#pic {
  width: 640px;
  height: 600px;
  position: relative;
  margin-left:auto;
  margin-right:auto;
}
#pic .link1, #pic .link2, #pic .link3, #pic .link4, #pic .link5, #pic .link6, #pic .link7, #pic .link8, #pic .link9, #pic .link10, #pic .link11, #pic .link12
{
	display:none;
	}

#pic ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.8em;
  display: inline;
}
#pic li	{
	display:inline;
	}

#pic a {
  text-decoration: none;
  color: #039;
}

#pic a .hotspot1, #pic a .hotspot2, #pic a .hotspot3, #pic a .hotspot4, #pic a .hotspot5, #pic a .hotspot6, #pic a .hotspot7, #pic a .hotspot8, #pic a .hotspot9, #pic a .hotspot10, #pic a .hotspot11, .hotspot12 {
  width: 300px;
  height: 270px;
  position: absolute;
}

#pic a:hover .link1   {
  position: absolute;
 top:300px;
 left:225px;
 font-size:0.6em;
 display:inline;
}
#pic a:hover .link2   {
  position: absolute;
 top:300px;
 left:225px;
 font-size:0.6em;
 display:inline;
}
#pic a:hover .link3   {
  position: absolute;
 top:500px;
 left:225px;
 font-size:0.6em;
 display:inline;
}
#pic a:hover .link4   {
  position: absolute;
 top:500px;
 left:225px;
 font-size:0.6em;
 display:inline;
}
#pic a:hover .link5   {
  position: absolute;
 top:500px;
 left:200px;
 font-size:0.6em;
 display:inline;
}
#pic a:hover .link6   {
  position: absolute;
 top:500px;
 left:225px;
 font-size:0.6em;
 display:inline;
}
#pic a:hover .link7   {
  position: absolute;
 top:500px;
 left:225px;
 font-size:0.6em;
 display:inline;
}

#pic a:hover .link8   {
  position: absolute;
 top:500px;
 left:225px;
 font-size:0.6em;
 display:inline;
}
#pic a:hover .link9   {
  position: absolute;
 top:500px;
 left:180px;
 font-size:0.6em;
 display:inline;
}
#pic a:hover .link10   {
  position: absolute;
 top:500px;
 left:105px;
 font-size:0.6em;
 display:inline;
}
#pic a:hover .link11   {
  position: absolute;
 top:500px;
 left:225px;
 font-size:0.6em;
 display:inline;
}
#pic a:hover .link12   {
  position: absolute;
 top:500px;
 left:225px;
 font-size:0.6em;
 display:inline;
}


/* :BUG: This rule on it's own does not work in IE  */
#pic a:hover .hotspot1, {
  border: 2px solid #fff;
  background-image: url(Photos/Eddie.jpg);
 
}
#pic a:hover .hotspot2 {
  border: 1px solid #fff;
  background-image: url(Photos/dragon.jpg);
}
#pic a:hover .hotspot3 {
  border: 1px solid #fff;
  background-image: url(Photos/eiffel.jpg);
}
#pic a:hover .hotspot4 {
  border: 1px solid #fff;
  background-image: url(Photos/Fishing.jpg);
}
#pic a:hover .hotspot5 {
  border: 1px solid #fff;
  background-image: url(Photos/innerwheel.jpg);
}
#pic a:hover .hotspot6 {
  border: 1px solid #fff;
  background-image: url(Photos/notre.jpg);
}
#pic a:hover .hotspot7 {
  border: 1px solid #fff;
  background-image: url(Photos/painter.jpg);
}
#pic a:hover .hotspot8 {
  border: 1px solid #fff;
  background-image: url(Photos/Claudeaward.jpg);
}
#pic a:hover .hotspot9 {
  border: 1px solid #fff;
  background-image: url(Photos/claudeosborn.jpg);
}
#pic a:hover .hotspot10 {
  border: 1px solid #fff;
  background-image: url(Photos/mikeeddie.jpg);
}
#pic a:hover .hotspot11 {
  border: 1px solid #fff;
  background-image: url(Photos/vocational1.jpg);
}
#pic a:hover .hotspot12 {
  border: 1px solid #fff;
  background-image: url(Photos/Lehrte.jpg);
}
/* :BUG: Neither does this rule  */
#pic a:hover .link {
  color: #0066FF;
  
}

/* :debug: However if you add this rule, both the previous rules now work. Weird*/
#pic a:hover {
  border: none; 
}
#pic .eddie a .hotspot1 {
  top: 200px;
  left: 200px;
}

#pic .dragon a .hotspot2 {
  top: 200px;
  left: 200px;
}
#pic .eiffel a .hotspot3 {
  top: 200px;
  left: 200px;
}
#pic .Fishing a .hotspot4 {
  top: 200px;
  left: 200px;
}
#pic .innerwheel a .hotspot5 {
  top: 200px;
  left: 200px;
}
#pic .notre a .hotspot6 {
  top: 200px;
  left: 200px;
}
#pic .painter a .hotspot7 {
  top: 200px;
  left: 200px;
}
#pic .Claudeaward a .hotspot8 {
  top: 200px;
  left: 200px;
}
#pic .Claudeosborn a .hotspot9 {
  top: 200px;
  left: 200px;
}
#pic .MikeEddie a .hotspot10 {
  top: 200px;
  left: 200px;
}
#pic .vocational1 a .hotspot11 {
  top: 200px;
  left: 200px;
}
#pic .lehrte a .hotspot12 {
  top: 200px;
  left: 200px;
  }
  
  #pic a:hover .link1 {
  top: 500px;
  left: 220px;
}

#pic a:hover .link2 {
  top: 500px;
  left: 220px;
}
  
.pictureframe{
	width:297px;
	height:267px;
	border:5px solid #FFFF33;
	position:absolute;
	top:200px;
	left:200px;
	}
#emblem {
		background-image:url(Photos/emblem.gif);
		}
.gf1	{
	border-left:2px;
	}
.righttext	{
	float:right;
	}
.fixed	{
	width:500px;
	
	}
.evening	{
		margin-left:auto;
		margin-right:auto;
		}
#footer	{
	display:inline;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	}
#car	{
		
		margin-left:auto;
		margin-right:auto;
		}
.lehrtephotos {
		text-decoration:none;
		line-height:50%;
		
		}
.lefti {
	margin-right:10px;
	}
.border	{
border:2px navy solid;
	margin:1px;
	}
.rotwheel	{
	
	text-align:center;
	margin:5px;
	clear:both;
	}
	.lehrtediv	{
	clear:left;
	padding-top:1em;
	}
	#centrenav{
	margin-left:auto;
	margin-right:auto;
	border:red 2px solid;
	}
	.voc1{
	margin:3px;
	clear:both;
	}
	.picleft{
	border:2px solid white;
	float:left;
	}
	.centerlargerblue{
	clear:both;
	}
.download{
	border:1px solid navy;
	padding:3px;
	width:auto;
	vertical-align:middle;
	text-decoration:none;
	background-color:#99cccc;
	text-align:center;
	
	}
	.test1 {
		background-image:url(Images/greenfordbanners.gif);
		background-repeat:no-repeat;
		position:relative;
		z-index:10;
	}
	.test2 {
		z-index:0;
		position:relative;
	}