* {margin:0;padding:0;}
body {font-size: small; font-family: Helvetica, Arial, sans-serif; background: #ccc;}
#outerwrapper {margin: 0 auto 0 auto; width: 1030px; background: white url(backgrounds/shadow.jpg) top center repeat-y;}
#wrapper {width: 1000px; margin: 0 auto 0 auto; background: url(backgrounds/bg.jpg) no-repeat; border: 1px solid #777;}
#sitebranding {width: 1000px; height: 160px;}
#bodycontent {float: left; width: 605px; margin: 0 115px 0 280px; color: #039; line-height: 140%;}
#navigation {float: left; width: 160px; margin: 118px 0 0 -910px;}
#legal {clear: both; color: #039; margin: 20px; padding: 10px 0 10px 0;}
#pics {margin-top: 30px;}

#navigation ul {width: 160px; text-align: right; list-style-type: none; font-size: 100%; font-weight: bold;}
#navigation li {margin: 0 0 0.5em 0;}
#navigation a {display: block; text-decoration: none; padding: 2px;}
.this a {color: yellow; background: red url(backgrounds/linktop.gif) left top no-repeat;}
.nav a:link, .nav a:visited {color: red; background: yellow url(backgrounds/linktopyell.gif) left top no-repeat;}
.nav a:hover, .nav a:active {color: yellow; background: red url(backgrounds/linktop.gif) left top no-repeat;}

h2 {color: #039; text-align: left; margin: 30px 0 15px 0; font-size: 180%; padding-right: 20px; font-weight: bold;}
h3 {font-weight: normal; font-size: 120%; margin-bottom: 10px;}
p {margin-bottom: 10px;}
img.mini {margin: 0 10px 10px 0;}
#bodycontent a {color: red;}
#bodycontent li {margin: 0 0 4px 30px;}
#bodycontent ul {color: #039; margin: 0 0 10px 0;}
.lead {font-size: 110%; color: red; font-weight: bold;}
.small {font-size: 90%}
.contact {font-weight: bold;}
.sunsmart {font-size: 90%; margin-top: 20px; text-align: right; padding-right: 10px;}
.sunsmart img {margin-bottom: -2px; border: none;}
.credit {font-size: 70%; margin-top: -10px;}
.credit a {color: #039;}
#legal img {border: none;}
table {border-collapse: collapse; border: 1px solid #006; margin-bottom:10px;}
td {border: 1px solid #006; text-align: center; padding: 10px 5px 10px 5px;}
th {color: yellow; padding: 10px 5px 10px 5px; border: 1px solid #006; font-weight: bold; background-color: red;}
.acacia {background-color: #bdb76b;}
.arizona {background-color: #deb887;}
.black {background-color: black;}
.champagne {background-color: #fffacd;}
.desert {background-color: #f0e68c;}
.laguna {background-color: #6495cd;}
.mist {background-color: #8fbc8f;}
.forest {background-color: #006400;}
.blue {background-color: blue;}
.red {background-color: red;}
.gold {background-color: #8b4513;}
.silver {background-color: #b0c4de;}
.yellow {background-color: yellow;}
.terracotta {background-color: #ff7f50;}
.turquoise {background-color: #3cb371;}
.white {background-color: white;}

#container {position:relative; width:570px; height:500px; margin-bottom: 10px;}
#container a.pics {float:left; padding: 0 4px 10px 0; display:inline; text-decoration:none; width:53px; height:40px;}
#container a.pics img.thumb {display:block; border:none;}

#container a.pics span {display:none;}
#container a.pics span img {margin:0; border:none;}

#container a.pics:hover img.thumb {border:none;}
#container a.pics:hover span {display:block; position:absolute; left:0px; top:100px; z-index:10; height:396px;}
#container a.pics:hover {white-space:normal;} /* makes hover state work for IE6 */

#container a.pics:active img.thumb {border:none;} 
#container a.pics:active span {display:block; position:absolute; left:0px; top:100px; z-index:5; height:396px;}

#container a.pics:focus img.thumb {border:none;}
#container a.pics:focus span {display:block; position:absolute; left:0px; top:100px; z-index:5; outline:0; height:396px;}
#container a.pics:focus {outline:0;}

#container span.info {float:left; display:block; height:396px; z-index:1;}
#container span.info img {;}

* html #navigation {display: inline;}
* html #bodycontent {display: inline;}
* html #navigation a {height: 1px;}