/* ----- Pure CSS tabs start here ----- */

#nav ul {
  display: block;
  list-style: none outside;
  padding: 0;
  margin: 0 0 0 40px;
  font-family: Arial, Verdana, sans-serif;
  font-size: 8.5pt;
  font-weight:bold
}

#nav li {
  padding: 0;
  margin: 5px 1px 0 0;
  border-top: 1px solid #cecbc6;
  border-right: 1px solid #cecbc6;
  border-left: 1px solid #cecbc6;
  background-color: ##336699;
  color: #ffffff;
  font-weight: bold;
  /* the next 4 lines are magic */
  display: block;
  float: left;
  position: relative;
  top: -1.32em;
}

#nav a:link,
#nav a:visited {
  background-color: #336699;
  color: #ffffff;
  text-decoration: none;
  padding-left: 1em;
  padding-right: 1em;
}

#nav a:hover {
  background-color:#8F684C;
  color: #FFFFFF;
}

#navclear {
  display: none;
}
html>body #navclear {
  display: block;
  clear: both;
} 

/* ----- now highlight active tab based on body @class attribute ----- */

body.index #nav li#nav-index a,
body.about #nav li#nav-about a,
body.specials #nav li#nav-specials a,
body.contact #nav li#nav-contact a,
body.destinations #nav li#nav-destinations a,
body.diving #nav li#nav-diving a,
body.search #nav li#nav-search a,
body.maps #nav li#nav-maps a,
body.gbook #nav li#nav-gbook a {
  background-color: #fff;
  color: #000066;
} 


.bodytext {
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: 8.5pt; 
  line-height: 1.5em
}

a {
  color: #003366; 
  text-decoration: none
}

a:hover {
  color: #CC0000; text-decoration: underline
}

.bodymain {
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: 12px
}

.smalltext {
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: 10px; 
  line-height: 14px
}

.infotext {
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 8pt; 
  line-height: 1.5em
}

.tinytext {
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: 8px; 
  line-height: 16px
}

textarea {
  font-family: "MS Sans Serif", Arial, sans-serif; 
  font-size: 9px}
  
body {
	background-image: url(images/sandtile.gif);
  background-repeat:repeat
}

.buttonstyle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #FFFFFF;
	background-color: #1FB1F8;
	border: 1px solid #000000;
}

.headingstyle {
	font-family: "Times New Roman", Times, serif;
	font-size: 18pt;
	font-weight:normal;
	color: #CC0000;
}

.topleft {
	border-top:1px dotted black;
	border-left:1px dotted black;
}

.topright {
	border-top:1px dotted black;
	border-right:1px dotted black;
}

.bottomright {
	border-bottom:1px dotted black;
	border-right:1px dotted black;
}

.bottomleft {
	border-bottom:1px dotted black;
	border-left:1px dotted black;
}

.cnormal {
	border-top:1px dotted black;
	border-left:1px dotted black;
	border-bottom:1px dotted black;	
}

.cmirror {
	border-top:1px dotted black;
	border-right:1px dotted black;
	border-bottom:1px dotted black;	
}

.allaround {
	border-top:1px dotted black;
	border-right:1px dotted black;
	border-bottom:1px dotted black;	
	border-left:1px dotted black;		
}

.topleftright {
	border-top:1px dotted black;
	border-right:1px dotted black;
	border-left:1px dotted black;		
}

.bottomleftright {
	border-right:1px dotted black;
	border-bottom:1px dotted black;	
	border-left:1px dotted black;		
}

.onlyleft {
	border-left:1px dotted black;		
}

.onlyright {
	border-right:1px dotted black;
}

.topandbottom {
	border-top:1px dotted black;
	border-bottom:1px dotted black;	
}

.onlytop {
}

.onlybottom {
	border-bottom:1px dotted black;	
}