/* css for Busselton Marina bnb */
body {

  font-family: Georgia,"Times New Roman",serif;
  color: #282828;  /* darkish font colour */
  font-size: 95%;
  text-align: left; /* or justify */

}
h1 {
  color:#8f5c43; /* for main page titles */
  font-family: Georgia,"Times New Roman",serif;
  letter-spacing: -0.03em;
  font-weight: normal;
  font-size: 300%;
  line-height: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
}
h2 {
  color: #8f5c43;
  letter-spacing: -0.03em;
  font-size: 220%;
  font-weight: normal;
  line-height: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
}
h3 {
  font-size: 140%;
  color: #cc619e;
  line-height: 100%;
  margin-top: 0px;
  margin-bottom: 10px;
}
h4 {
  font-size: 115%;
  color: #404040;
  line-height: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
}

a, img {          /* this solves a nasty IE8/9 bug (borders round link images) */
  border:none; text-decoration: none;
}

a:hover{          /* This just applies to the link images  */
opacity:0.8;
filter:alpha(opacity=70);
}

#align_right {
  text-align: right;
}
#align_center {
  text-align: center;
}
#slimline {
  line-height: 75%;    /* for gallery spacing */
}

#bg {                            /* background image handling */
      position:fixed;
      top:-50%;
      left:-50%;
      width:200%;
      height:200%;
/*      opacity:1.0;
      filter:alpha(opacity=100); */ /* For IE8 and earlier */
    }
        #bg img {
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
            min-width:50%;
            min-height:50%;
        }

#container {
     position: relative;
     z-index: 2;
     width: 800px;
     margin: 20px auto;
     padding: 10px;   /* inside container border */
     min-height: 650px;  /* This counters the side scrollbar re-centering issue */

 /*    background: #e2e2e2;
     opacity:0.9;         */     /* Child divs cannot have less transparency! */
 /*    filter:alpha(opacity=90); */ /* For IE8 and earlier */

 /* If you set an opacity <1.0 on the background then
    all child elements cannot be more opaque - setting
    the background opacity via rgba works much better
    (on modern browsers, IE9+ & all the others)
    The next line sets the transparency of the container panel  */
     background-color: rgba(228,228,217,0.6);  /* light beige 60% opaque */
     border-radius: 10px 10px 10px 10px;
     -ms-border-radius: 10px 10px 10px 10px;
     -moz-border-radius: 10px 10px 10px 10px;
     -webkit-border-radius: 10px 10px 10px 10px;
     -khtml-border-radius: 10px 10px 10px 10px;
     -moz-box-shadow: 0 0 20px #9a9a88;
     -webkit-box-shadow: 0 0 20px #9a9a88;
     box-shadow: 0 0 20px #9a9a88;
     }

  /* page horiz layout: col widths + padding x2 = container width */
#sidecol1 {
    float: left;
    z-index: 3;
    width: 200px;
    text-align: right;
    padding: 10px;   /* inside border */
  /*  background: cyan; */
}

#sidecol2 {
    float: left;
    z-index: 4;
    width: 150px;
    padding: 0px;   /* inside border */
 /*   background: pink;   */
}

#contentcol {
    float: right;
    z-index: 5;    /* higher no. = on top */
    width: 400px;
    padding: 15px;   /* inside border */
  /*  background: yellow;  */
}

  /* page layout: 3 equal columns */
#equalcol1 {
    float: left;
    z-index: 3;
    width: 255px;
    text-align: center;
    padding: 6px;   /* inside border */
  /*  background: cyan;   */
}

#equalcol2 {
    float: left;
    z-index: 4;
    width: 255px;
    text-align: center;
    padding: 6px;   /* inside border */
  /*  background: pink;    */
}

#equalcol3 {
    float: right;
    z-index: 5;    /* higher no. = on top */
    width: 255px;
    text-align: center;
    padding: 5px;   /* inside border */
  /*  background: yellow;    */
}
#footer {
    clear: both;
 /*   background: lightblue;  */  
}

/* ===== vertical menu ==== */
#vertmenu {
  height:21px;
  font-size:100%;
  font-weight:normal;
  font-family: Georgia,"Times New Roman",serif;
  letter-spacing: 0.2em;
  font-style: italic;
  width: 200px; /* that's the width of the coloured (or not) bars */
  text-align: right;
}
#vertmenu ul {
  margin:0;
  padding:0;
  list-style-type:none;
  list-style-position: outside;
}
#vertmenu ul li {
  display:block;
  /* this determines whether there's a spacer between menu elements */
  margin:0px;
}
#vertmenu ul li a {
  display:block;
  color:#282828;
  text-decoration:none; /* stops underlining */
  /* padding top rt bott left */
  /* bottom spacing helps on phones & tablets  */
  padding: .2em .3em .9em .4em;
  height:18px;
}
#vertmenu ul li a:hover {
  color:#fc5004;
  letter-spacing: 0.25em;
}
#vertmenu ul li a.current {
   color:#8f5c43;
   letter-spacing: 0.25em;
}

/* ==== horiz menu ==== */
#horizmenu ul {
  margin: 0px;
  padding: 1px; /* at left*/
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  display: inline;
}
#horizmenu ul li {
  margin: 5px;
  padding: 7px;  /* between menu items */
  display: inline;
  text-align: center;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 100%;
  font-style: italic;
  letter-spacing: 0.2em;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
}
#horizmenu li a {
  border: 0px outset #000000;
  padding: 2px;
  color: #282828;
  text-decoration: none;
  display: inline;
}
/* this is the hover over state */
#horizmenu li a:hover {
  color:#fc5004;
  letter-spacing: 0.3em;
}
#horizmenu ul li a.current {
   color:#8f5c43;
}