* {margin: 0; padding: 0;} /*global reset, sets all paddings and margins to 0 */

body {
  background-color: #8f8c6b;
  background-image: url(images/proteahill-main-bg.gif);
  background-repeat: repeat;
  text-align: center;
  }


  
/* activate current link - format */

body#home a#homenav {
  text-decoration: underline;
  }
  
body#sitemap a#sitemapnav {
  text-decoration: underline;
  }
  
body#privacy a#privacynav {
  text-decoration: underline;
  }
  
body#cottage a#cottagenav {
  background-position: -125px -29px;
  }
  
body#apartment a#apartmentnav {
  background-position: 0 -29px;
  }
  
body#facilities a#facilitiesnav {
  background-position: -251px -29px;
  }
  
body#location a#locationnav {
  background-position: -381px -29px;
  }
  
body#attractions a#attractionsnav {
  background-position: -511px -29px;
  }

body#contact a#contactnav {
  background-position: -641px -29px;
  }

/* ------- top div ---------- */

#top { /* repeat x top background */
  width: 100%;
  background-image: url(images/proteahill-top-bg.gif);
  background-repeat: repeat-x;
  height: 283px;
  }

#top-center { /* center main top with fixed width 772px */
  width: 772px;
  margin: 0 auto;
  background-color: #e5d7b0;
  height: 283px;
  }
  
#address-nav { /* top area, address and secondary navigation height 60px */
  width: 772px;
  height: 60px;
  display: inline;
  }
  
#address { /* address area */
  width: 510px;
  height: 60px;
  float: left;
  }
  
#secondary-nav { /* home, privacy and sitemap navigation area */
  background-color: #52503b;
  width: 262px;
  height: 60px;
  float: left;
  }
  
#main-bar { /* main area at top, logo, testimonials and main house image */
  width: 772px;
  height: 223px;
  position: relative;
  display: inline;
  }
  
#logo-title { /* logo and page title area */
  width: 251px;
  height: 223px;
  float: left;
  display: inline;
  }
  

* html #logo-title {margin-top:-4px} /*IE hack */

#logo { /* logo background*/
  width: 251px;
  height: 148px;
  background-image: url(images/proteahill_03.jpg);
  background-repeat: no-repeat;
  float: left;
  display: inline;
  overflow: hidden;
  }
  
#title { /* page title background */
  width: 251px;
  height: 75px;
  background: url(images/proteahill_06.gif);
  background-repeat: no-repeat;
  float: left;
  display: inline;
  }
  
#testimonial { /* testimonial position, image embedded in html to be changed with each page */
  float: left;
  background-color: #666633;
  width: 259px;
  height: 223px;
  display: inline;
  }
  

* html #testimonial {margin-top: -4px;} /*IE hack */

#house-image { /* main image of the house, top right hand corner, to remain static on all pages */
  float: left;
  background-image: url(images/proteahill_05.jpg);
  background-repeat: no-repeat;
  width: 262px;
  height: 223px;
  display: inline;
  }
  
* html #house-image {margin-top: -4px;} /*IE hack */
  
 
/* ------- position elements in top area such as logo and secondary navigation (home, sitemap and privacy policy */

#logo h1 { /*logo image between h1 tag */
  }
  
#logo img { /* format and position logo */
  margin: 50px auto;
  border: none;
  }
  
#secondary-nav-list { /*navigation at top, home, sitemap and privacy policy */
  border-bottom: solid 1px #fff;
  border-right: solid 1px #fff;
  border-left: solid 1px #fff;
  background: #333;
  padding: 1px 0 3px 0;
  }
  
#secondary-nav-list li { /* format the navigational list */
  list-style-type: none;
  display: inline;
  }

  
/* ------- start main navigational area ------- based on code from http://sam.brown.tc/article/132/single-image-rollover-buttons-using-css to create a css list using image rollovers that displays as a list when the stylesheet is disabled */  

#main-nav { /* position the navigational area and format the background */
  width: 772px;
  height: 28px;
  margin: 0 auto;
  }

* html #main-nav {margin-top: -4px;} /*IE hack */


#btns ul {
  list-style: none;
  }
  
#btns li {
  float: left;
  height: 28px;
  overflow: hidden;
  }

#btn1 {width: 125px;} /* home button */
#btn2 {width: 126px;} /* rooms and tariff button */
#btn3 {width: 130px;} /* facilities button */
#btn4 {width: 130px;} /* location button */
#btn5 {width: 130px;} /* attractions button */
#btn6 {width: 131px;} /* contact us button */

#btns a {
  display: block;
  height: 28px;
  text-indent: -9999px;
}

#btns a {background: url(images/buttons.gif) no-repeat;}
#btns #btn1 a {background-position: 0 0;} /* home button */
#btns #btn2 a {background-position: -125px 0;} /* rooms and tariff button */
#btns #btn3 a {background-position: -251px 0;} /* facilities button */
#btns #btn4 a {background-position: -381px 0;} /* location button */
#btns #btn5 a {background-position: -511px 0;} /* attractions button */
#btns #btn6 a {background-position: -641px 0;} /* contact us button */
#btns #btn1 a:hover {background-position: 0 -29px;} /* home button */
#btns #btn2 a:hover {background-position: -125px -29px;} /* rooms and tariff button */
#btns #btn3 a:hover {background-position: -251px -29px;} /* facilities button */
#btns #btn4 a:hover {background-position: -381px -29px;} /* location button */
#btns #btn5 a:hover {background-position: -511px -29px;} /* attractions button */
#btns #btn6 a:hover {background-position: -641px -29px;} /* contact us button */


/*------- Start main content area -----*/

#main-content { /* wrap the main content area  */
  margin: 0 auto;
  width: 772px;
  background-color: #f0ebcd;
  }
  
#main-content-background { /* repeat background for main area */
  float: left;
  background: url(images/proteahill-repeatbg.jpg);
  background-repeat: repeat-y;
  }
  
  
/*-------- start the footer --------*/

#footer-wide { /* footer 100% width with repeat-x background */
  width: 100%;
  background-image: url(images/proteahill-footer-repeat.gif);
  background-repeat: repeat-x;
  height: 137px;
  }
  
#footer { /* center footer with fixed width 772px */
  width: 772px;
  margin: 0 auto;
  height: 137px;
  background: url(images/proteahill-footer.jpg);
  background-repeat: no-repeat;
  }
  
#footer-left { /* left sidebar footer area */
  width: 231px;
  background: transparent;
  text-align: left;
  float: left;
  font-family: tahoma, verdana, arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 130%;
  padding: 18px 10px 10px 10px;
  height: 71px;
  overflow: hidden;
  color: #fff;
  }
  
#footer-left a {
  color: #fff;
  text-decoration: underline;
  }
  
#footer-left a:hover {
  color: #333;
  }
  
#footer-right { /* right sidebar footer area - contains copyright, address and phone number */
  width: 481px;
  background: transparent;
  text-align: left;
  float: left;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 130%;
  padding: 8px 20px 0 20px;
  height: 71px;
  overflow: hidden;
  }
  
#footer-right p {
  margin: 2px 0;
  }
  
#footer-right img.logo {
  float: left;
  margin: 0 20px 0 0;
  }
  
#footer-end { /* designed and developed by dot com cafe */
  width: 772px;
  color: #4e4c4c;
  font-family: tahoma, verdana, arial, sans-serif;
  font-size: 10px;
  text-align: center;
  margin: -10px 0 0 0;
  float: left;
  }
  
#footer-end a {
  font-weight: normal;
  color: #4e4c4c;
  text-decoration: underline;
  }
  
#footer-end a:hover {
  color: #fff;
  }