/**
 * Defaults and Resets
 */
html, body {margin: 0; padding: 0; background: #284914;}

body {font-family: Arial, Verdana, Sans-Serif; font-size: 12px; line-height: normal; color: #7b4b29;}

form {margin: 0; padding: 0;}

img {border: 0;}

td {vertical-align: top;}

p {margin: 0 0 20px 0;}

:focus {outline: 0;}

a {color: #c16a0d;}
a:hover {color: #000;}

h1 {margin: 0; font-size: 15px; color: #c16a0d; text-transform: uppercase;}
h2 {margin: 0; font-size: 14px; color: #7b4b29; text-transform: uppercase;}
h2 span {text-transform: none;}
h3 {margin: 0; font-size: 12px; color: #c16a0d;}

/**
 * General
 */
.clearBoth, .clear {clear: both; height: 0px; font-size: 1px; line-height: 0px; display: block;}

/**
 * Lists
 */
ul.inline {margin: 0; padding: 0; list-style-type: none;}
ul.inline li {display: inline;}

ul.list {margin: 0; padding: 0; list-style-type: none;}

/**
 * Layout
 */
#master {width: 960px; margin: auto; background: #d4d9c3;}

#page {position: relative; width: 100%;}

#header {position: relative; height: 200px; background: url(../images/layout/bg-header.gif) no-repeat;}
#header h1 {position: absolute; top: 25px; left: 20px; width: 290px; margin: 0; color: #c16a0d; font-size: 12px; line-height: normal; text-transform: none;}
#header .logo {position: absolute; top: 15px; left: 315px;}
#header .quote {position: absolute; top: 25px; right: 30px; width: 290px; font-style: italic; line-height: normal; text-align: right; color: #3e771c;}

#nav {position: absolute; top: 115px; left: 234px;}
#nav ul {margin: 0px; padding: 0px; list-style-type: none;}
#nav ul li {float: left;}
#nav ul li a {display: block; background-repeat: no-repeat; background-position: left top; text-decoration: none;}
#nav ul li a span {display: block; width: 72px; height: 77px;}
#nav ul li a:hover span {cursor: pointer;}
#nav ul li a span span {visibility: hidden;}

#nav a.tourTheLodge {background-image: url(../images/nav/tour-the-lodge.gif);}
#nav a.tourTheLakeHouse {background-image: url(../images/nav/tour-the-lake-house.gif);}
#nav a.retreats {background-image: url(../images/nav/retreats.gif);}
#nav a.ratesAndPolicies {background-image: url(../images/nav/rates-and-policies.gif);}
#nav a.whidbeyIsland {background-image: url(../images/nav/whidbey-island.gif);}
#nav a.location {background-image: url(../images/nav/location.gif);}
#nav a.contactUs {background-image: url(../images/nav/contact-us.gif);}

#nav a.tourTheLodge:hover span, body.lodge a.tourTheLodge span {background-image: url(../images/nav/tour-the-lodge-over.gif);}
#nav a.tourTheLakeHouse:hover span, body.lakeHouse a.tourTheLakeHouse span {background-image: url(../images/nav/tour-the-lake-house-over.gif);}
#nav a.retreats:hover span, body.retreats a.retreats span {background-image: url(../images/nav/retreats-over.gif);}
#nav a.ratesAndPolicies:hover span, body.rates a.ratesAndPolicies span {background-image: url(../images/nav/rates-and-policies-over.gif);}
#nav a.whidbeyIsland:hover span, body.whidbeyIsland a.whidbeyIsland span {background-image: url(../images/nav/whidbey-island-over.gif);}
#nav a.location:hover span, body.location a.location span {background-image: url(../images/nav/location-over.gif);}
#nav a.contactUs:hover span, body.contact a.contactUs span {background-image: url(../images/nav/contact-us-over.gif);}

#title {position: absolute; top: 135px; left: 20px;}

#floorplan {position: absolute; top: 164px; left: 93px;}

#body {padding: 0 30px 20px 20px; min-height: 500px;}
#body div.sidebar {float: left; width: 302px; padding: 40px 5px 0 0;}
#body div.content {float: left; width: 600px;}
#body div.content ul {margin: 0 0 20px 0; padding: 0 0 0 20px;}

div.photo {background: url(../images/layout/bg-photo.gif) no-repeat left bottom;}
div.photo > div {padding: 0 0 8px 1px; width: 301px; background: url(../images/layout/bg-photo-top.gif) no-repeat;}

div.tour {margin-top: -20px; margin-right: -10px;}
div.tour .thumbs {float: left; width: 302px; padding: 30px 5px 0 0;}
div.tour .thumbs .photo {position: relative;}
div.tour .thumbs .photo div {height: 202px;}
div.tour .thumbs .photo div div {position: absolute; height: 210px;}
div.tour .thumbs .bottom {margin-top: -2px;}
div.tour .thumbs .bottom div {height: 195px;}
div.tour .thumbs .bottom div div {height: 203px;}
div.tour .slides {float: left; width: 606px;}
div.tour .slides .nav ul {margin: 0; padding: 0; list-style-type: none; line-height: 30px;}
div.tour .slides .nav ul li {display: inline; padding: 0 5px 0 0;}
div.tour .slides .slide {position: relative; height: 470px;}
div.tour .slides .slide > div {position: absolute;}
div.tour .slides .slide img {display: block; padding: 0 0 10px 0;}

div.photoGrid {font-size: 10px;}
div.photoGrid .firstColumn {float: left; width: 219px; padding: 0 5px 0 0;}
div.photoGrid .lastColumn {float: left; width: 381px;}
div.photoGrid div div {padding: 0 0 5px 0;}
div.photoGrid img {display: block; padding: 0 0 5px 0;}

/**
 * Home
 */
body.home #body {font-size: 14px; line-height: normal;}
body.home #body h1 {margin: 0; font-size: 12px; text-transform: none; color: #7b4b29;}
body.home #body ul {margin: 0; padding: 0 0 10px 20px; font-size: 12px; line-height: 18px;}
body.home #body div.lodge {float: left;}
body.home #body div.lakeHouse {float: left; margin-right: -20px;}

/**
 * Lake House
 */
body.lakeHouse #floorplan {left: 149px;}

/**
 * Location
 */
body.location #body div.sidebar {width: 316px; margin-left: -20px; padding-top: 0;}
body.location #body div.content {width: 605px; margin-right: -20px;}

/**
 * Forms
 */
form.form .row {padding: 0px 0px 5px 0px;}
form.form .label {float: left; width: 140px; padding-right: 10px;}
form.form .field {float: left; width: 260px;}
form.form .textbox {width: 240px;}
form.form textarea {width: 240px; font-family: Arial, Verdana, Sans-Serif; font-size: 12px;}