body{
  background: #9999ff;
  margin: 0 0 0 0;
  text-align: center;

/* Fix to force a vertical scroll bar */

  height: 100%;
  margin: 0 0 1px;
  padding: 0;
  }

/* There are three sorts of pages on the site.
    We have a wrapped class for each to allow
    descendent styles */

.home_page{
  margin: 0 auto;
  padding: 0 3px 0 3px;
  text-align: left;
  width: 956px;
  border: 4px solid #FFFF33;
  background: #FFFFCC;
  color: #000000;
  }

.nav_page{
  margin: 0 auto;
  padding: 0 3px 0 3px;
  text-align: left;
  width: 956px;
  border: 4px solid #FFFF33;
  background: #FFFFCC;
  color: #000000;
  }

.pic_page{
  margin: 0 auto;
  padding: 0 3px 0 3px;
  text-align: left;
  width: 956px;
  border: 4px solid #FFFF33;
  background: #FFFFCC;
  color: #000000;
  }

br.clear_left{
  clear: left;
  }

br.clear_right{
  clear: right;
  }

/* The first major division is just the title */

#page_title{
  width: 100%;
  padding-top: 10px;
  padding-bottom: 0px;
  text-align: center;
  }

#page_title h1{
  margin:0 0 0 0;
  Padding: 0 0 0 0;
  font-family: "Imprint MT Shadow";
  font-size: 250%;
  font-weight: normal;
  font-style: normal;}

/* The navigation bar on the left points to the "nav_page"s */

#nav_bar{
  float: left;
  margin-right: 0px;
  padding-top: 0px;
  text-align: center;
  font-family: Arial,sans-serif;
  font-size: 160%;
  }

ul.nav{
  margin-top: 0px;
  margin-left: 0px;
  padding-top: 0px;
  padding-left: 0px;
  list-style-type: none;
  }

ul.nav li {
  display: inline;
  }

ul.nav li.subhead{
  font-size: 90%;
  }

ul.nav a {
  padding-top: 3px;
  padding-left: 3px;
  padding-bottom: 3px;
  padding-right: 3px;
  display: block;
  text-align: left;
  background: #000099;
  color: #FFFF00;
  border-width: 4px;
  border-style: solid;
  border-top-color: #6666FF;
  border-left-color: #6666FF;
  border-bottom-color: #000033;
  border-right-color: #000033;
  font-weight: bold;
  font-size: 70%;
  text-decoration: none;
  }

ul.nav a.here {
  color: #FFFFFF;
  }

ul.nav a:hover{
  color: #FFFFCC;
  }

ul.nav a:active{
  border-top-color: #000033;
  border-left-color: #000033;
  border-bottom-color: #6666FF;
  border-right-color: #6666FF;
  color: #FFFFCC;
  }

ul.nav a.booking{
  background: #990000;
  border-top-color: #FF6666;
  border-left-color: #FF6666;
  border-bottom-color: #330000;
  border-right-color: #330000;
  }

ul.nav a.booking:active{
  border-top-color: #330000;
  border-left-color: #330000;
  border-bottom-color: #FF6666;
  border-right-color: #FF6666;
  }

ul.nav a.jacketts{
  background-image: url(jacketts_thumb.jpg);
  background-repeat: no-repeat;
  background-position: 2px center;
  text-align: right;
  }

/* The picture bar on the right points to the "pic_page"s */

#picture_bar{
  float: right;
  margin-left: 0px;
  padding-top: 0px;
  text-align: center;
  font-family: Arial,sans-serif;
  font-size: 160%;
  }

ul.pic{
  margin-top: 0px;
  margin-left: 0px;
  padding-top: 0px;
  padding-left: 0px;
  list-style-type: none;
  }

ul.pic li {
  display: inline;
  }

ul.pic a {
  padding-top: 3px;
  padding-left: 3px;
  padding-bottom: 3px;
  padding-right: 3px;
  display: block;
  background: #FFFF00;
  border-width: 4px;
  border-style: solid;
  border-top-color: #6666FF;
  border-left-color: #6666FF;
  border-bottom-color: #000033;
  border-right-color: #000033;
  }

ul.pic a.here {
  background: #FFFFFF;
  }

ul.pic a img{
  border: 0;
  }

ul.pic a:hover{
  background: #FFFFCC;
  }

ul.pic a:active{
  border-top-color: #000033;
  border-left-color: #000033;
  border-bottom-color: #6666FF;
  border-right-color: #6666FF;
  color: #FFFFCC;
  }

ul.pic a.home{
  padding-top: 3px;
  padding-left: 3px;
  padding-bottom: 3px;
  padding-right: 3px;
  display: block;
  text-align: left;
  background: #000099;
  color: #FFFF00;
  border-width: 4px;
  border-style: solid;
  border-top-color: #6666FF;
  border-left-color: #6666FF;
  border-bottom-color: #000033;
  border-right-color: #000033;
  font-weight: bold;
  font-size: 70%;
  text-decoration: none;
  }

.home_page ul.pic a.home{
  color: #FFFFFF;
  }

ul.pic a.home:hover{
  background: #000099;
  color: #FFFFCC;
  }

ul.pic a.home:active{
  border-top-color: #000033;
  border-left-color: #000033;
  border-bottom-color: #6666FF;
  border-right-color: #6666FF;
  background: #000099;
  color: #FFFFCC;
  }

/* The main content.  Set margins in ems so they expand with viewer's choice of text size */

#main_content{
  }

.home_page #main_content{
  margin-left: 12em;
  margin-right: 6em;
 }

.nav_page #main_content{
  margin-left: 12em;
  }

.pic_page #main_content{
  margin-right: 6em;
  }

/* The main content starts with some pictures  */

.picture_strip{
  padding: 10px;
  padding-left: 0px;
  text-align: center;
  font-weight: bold;
  }

.home_page .picture_strip {
  height: 190px;
  }

.nav_page .picture_strip {
  height: 190px;
  }

.pic_page .picture_strip {
  height: 320px;
  }

/* picture strips may be narrow */

.narrow {
  padding-left: 80px;
  padding-right: 80px;
  }

.narrowish {
  padding-left: 60px;
  padding-right: 60px;
  }

img.left {
  float: left;
  margin-left: 10px;
  }

img.right {
  float: right;
  }

img.embedded_right {
  float: right;
  margin-left: 10px;
  }

img.middle {
  margin-top: 15px;
  margin-left: 0px;
  margin-right: 0px;
  }

/* then the text of the page  */

.main_text {
  padding-left: 10px;
  padding-right: 10px;
  }

/* on the home page we have a table containing two uls side by side   */

tr.two_uls{
  vertical-align: top;
  }

ul.bullet{
  padding-left: 15px;
  }

 /* on the thing to do page, there is a table of pictures and desrptions of attractions */

 .attractions td {
   padding: 10px;
   }