<style type = "text/css">
<!-- Indoor pools -->
#pix1 a img {position: absolute; top: 274px; left: 170px; border-style: solid; border-color: #d9EEFF; 
			width: 100px; height: 20px}<!-- size of wording -->
<!-- mouseout state -->
#pix1 a img.hid{
	width: 290px; height: 210px;<!-- size of image -->
	position: absolute; top: 280px; left: 350px;
	visibility: hidden; border-style: outset; border-color: #0f91ff; border-width: 6px}
<!-- mouseover state -->
#pix1 a:hover { background: #d9EEFF}
#pix1 a:hover img.hid {visibility: visible}

<!-- Outdoor pool -->
#pix6 a img {position: absolute; top: 274px; left: 737px; border-style: solid; border-color: #d9EEFF; 
			width: 100px; height: 20px}<!-- size of wording -->
<!-- mouseout state -->
#pix6 a img.hid{
	width: 290px; height: 210px;<!-- size of image -->
	position: absolute; top: 280px; left: 350px;
	visibility: hidden; border-style: outset; border-color: #0f91ff; border-width: 6px}
<!-- mouseover state -->
#pix6 a:hover { background: #d9EEFF}
#pix6 a:hover img.hid {visibility: visible}

<!-- Tennis -->
#pix7 a img {position: absolute; top: 318px; left: 737px; border-style: solid; border-color: #d9EEFF; 
			width: 100px; height: 20px}<!-- size of wording -->
<!-- mouseout state -->
#pix7 a img.hid{
	width: 290px; height: 210px;<!-- size of image -->
	position: absolute; top: 280px; left: 350px;
	visibility: hidden; border-style: outset; border-color: #0f91ff; border-width: 6px}
<!-- mouseover state -->
#pix7 a:hover { background: #d9EEFF}
#pix7 a:hover img.hid {visibility: visible}

<!-- Golf -->
#pix8 a img {position: absolute; top: 362px; left: 737px; border-style: solid; border-color: #d9EEFF; 
			width: 100px; height: 20px}<!-- size of wording -->
<!-- mouseout state -->
#pix8 a img.hid{
	width: 290px; height: 210px;<!-- size of image -->
	position: absolute; top: 280px; left: 350px;
	visibility: hidden; border-style: outset; border-color: #0f91ff; border-width: 6px}
<!-- mouseover state -->
#pix8 a:hover { background: #d9EEFF}
#pix8 a:hover img.hid {visibility: visible}

<!-- Boule -->
#pix9 a img {position: absolute; top: 406px; left: 737px; border-style: solid; border-color: #d9EEFF; 
			width: 100px; height: 20px}<!-- size of wording -->
<!-- mouseout state -->
#pix9 a img.hid{
	width: 290px; height: 210px;<!-- size of image -->
	position: absolute; top: 280px; left: 350px;
	visibility: hidden; border-style: outset; border-color: #0f91ff; border-width: 6px}
<!-- mouseover state -->
#pix9 a:hover { background: #d9EEFF}
#pix9 a:hover img.hid {visibility: visible}

<!-- Boule -->
#pix10 a img {position: absolute; top: 450px; left: 737px; border-style: solid; border-color: #d9EEFF; 
			width: 100px; height: 20px}<!-- size of wording -->
<!-- mouseout state -->
#pix10 a img.hid{
	width: 290px; height: 210px;<!-- size of image -->
	position: absolute; top: 280px; left: 350px;
	visibility: hidden; border-style: outset; border-color: #0f91ff; border-width: 6px}
<!-- mouseover state -->
#pix10 a:hover { background: #d9EEFF}
#pix10 a:hover img.hid {visibility: visible}

<!-- setting the background image -->
#div-1 { width: 400px; height: 600px; margin: 5px; position: absolute; top: 220px; left:100px; background-repeat: no-repeat; background-color: none}

<!-- indoors -->
#div-2 { width: 100px; height: 30px; position: absolute; top: 235px; left: 170px}

<!-- outdoors -->
#div-3 { width: 100px; height: 30px; position: absolute; top: 235px; left: 737px}

<!-- content box -->
p {width: 500px; height: 50px; background: #d9EEFF; position: absolute; top: 635px; left: 270px;}
p.pad {padding: 5px}
.norm {font-weight: normal; font-size: 12pt; color: #0000FF}
.bold {font-weight: bold; font-size: 12pt; color: #0000FF}

</style>