/* 
TABLE OF CONTENTS

  HTML Elements
  Page Structure
  Navigation
  Headings
  Content Area
  Forms
  Clear
  Footer

Notes:
- Padding: top right bottom left
- * character means matches anything
- # character - # is used to specify an ID element. It says "when this ID is found in a tag, use this format". 
- em size - See http://www.bigbaer.com/css_tutorials/css_font_size.htm. 1 em renders at the default size for the browser agent. .8 em is approx 11 px.
- Differences between ID and CLASS ? 
	The . is used in place of the # 
	class is used in place of id 
	ID is for single instances or tags. 
	CLASS is used for multiple instances or tags. 

/* ---------- @ HTML Elements -----------*/

* { margin: 0; padding: 0; }
body, html { color:#6b5943; background: #004000; min-height:101%; }
body, select, textarea, input { font-family: Georgia, "Times New Roman", Times, serif; font-size: 100%; }
p { margin: 15px 0; }
a:link, a:visited {	text-decoration:none; font-weight: bold; color: #386739; }
a:hover, a:active { color:#829e83; }
*:focus { outline: none; }

/* ---------- @ Page Structure -----------*/
#wrapper {
	background: #ffffff;
	margin: 0 auto;
	font-size: 0.8em;
	width: 790px;
	border: 1px solid #423e3d;
	border-top: none;
	border-bottom: none;
   }

#content-wrapper {
	line-height: 150%;
	font-size: 1.2em;
	background: url(/images/bg_sidebar.png) 550px repeat-y;
	/* border: 1px solid Red; */
}

html>body #content-wrapper {
	margin-top: 22px;
	/* border: 1px solid red; */
}

/* Below seems to be a hack they did to get the sidebar color to not bleed through */
/* But onto something here with why the lower bar colors are funny. Play
with this in Firefox and watch how the background color for the sidebar 
misbehaves against the nav bar I made... */
#masthead {
	background: url(/images/bg_masthead.png);
	/* Orig height: 132px; */
	height: 100px;
	/* border: 1px solid red;  */
}

.left { 
	float:left;
}

.right { 
	float:right
}

img.left { 
	margin: 0 10px 10px 0;
	border: 2px solid #305a2f;
	padding: 1px;
}

img.right { 
	margin: 0 0 10px 10px;
	border: 2px solid #305a2f;
	padding: 1px;
}


/* ---------- @ Navigation -----------*/

#nav {
	/* Below is the bar I made  */
	/* background: url(/images/bg_nav2.jpg) repeat-x; */
	/* background-color: #006633;  */
	/* height: 38px; */
	height: 30px;
	clear: both;
	border: 1px solid #305a2f;
}

#nav li {
	list-style:none;
	float: left;
	/* height: 36px; */
	height: 36px;
	padding-top: 5px;
	padding-right: 12px;
	margin-left: 12px;
	/* background: url(/images/nav_pipe.gif) right 2px no-repeat; */
}

/* Need to take this route for the lower nav bar, lest I end up with duplicate ID calls in the php/html */
#nav1, #nav2 {
	/* Below is the bar I made  */
	/* background: url(/images/bg_nav2.jpg) repeat-x; */
	background-color: #006633;
	/* height: 38px; */
	height: 30px;
	clear: both;
	/* border: 1px solid Chartreuse; */
}

#nav1 li , #nav2 li {
	list-style:none;
	float: left;
	/* height: 36px; */
	padding-top: 5px;
	padding-right: 12px;
	margin-left: 12px;
	/* background: url(/images/nav_pipe.gif) right 2px no-repeat; */
	/* border: 1px solid green; */
}

a#n1a, a#n1b, a#n1c, a#n1d, a#n1e, a#n1f {
	color: #FFFFCC;
	font-size: 12pt;
}

a#n1a:hover, a#n1b:hover, a#n1c:hover, a#n1d:hover, a#n1e:hover, a#n1f:hover { 
	/* color: #829e83; */
	color: #009933;
	font-size: 12pt;
}

a#n2a, a#n2b, a#n2c, a#n2d, a#n2e, a#n2f {
	color: #FFFFCC;
	font-size: 12pt;
}

a#n2a:hover, a#n2b:hover, a#n2c:hover, a#n2d:hover, a#n2e:hover, a#n2f:hover {
	color: #009933;
	font-size: 12pt;
}

#nav li.first {
	margin-left: 5px;
}

#nav li.last {
	background: none;
	padding-right: 0;
}

#nav a {
	display:block;
	height: 25px;
	/* ORIG text-indent: -9000px; Puts text completely off the window?? */
}

a#cottages {
	/* background:url(/images/nav_cottages.gif); */
	/* width: 124px; */
	color: #FFFFCC;
	font-size: 12pt;
}

a#cottages:hover, body.cottages a#cottages {
	/* background:url(/images/nav_cottages_on.gif); */
	color: #829e83;
	font-size: 12pt;
}

a#deluxe {
	/* 	background:url(/images/nav_deluxe.gif); */
	/* 	width: 97px; */
	color: #FFFFCC;
	font-size: 12pt;
}

a#deluxe:hover, body.deluxe a#deluxe {
	/* background:url(/images/nav_deluxe_on.gif); */
	color: #829e83;
	font-size: 12pt;
}

a#quality {
	/* background:url(/images/nav_quality.gif); */
	/* width: 106px; */
	color: #FFFFCC;
	font-size: 12pt;
}

a#quality:hover, body.quality a#quality {
	/* background:url(/images/nav_quality_on.gif); */
	color: #829e83;
	font-size: 12pt;
}

a#houses {
	/* background:url(/images/nav_houses.gif); */
	/* width: 181px; */
	color: #FFFFCC;
	font-size: 12pt;
}

a#houses:hover, body.houses a#houses {
	/* background:url(/images/nav_houses_on.gif); */
	color: #829e83;
	font-size: 12pt;
}

/* Note: Originally used 'guestrooms' here but that cause probs. Weird. */
a#guestrooms {
	/* background:url(/images/nav_guestrms.gif); */
	color: #FFFFCC;
	font-size: 12pt;
}

a#guestrooms:hover, body.guestrooms a#guestrooms {
	/* background:url(/images/nav_guestrms _on.gif);  */
	color: #829e83;
	font-size: 12pt;
}

a#reservations {
	/* background:url(/images/nav_reservations.gif); */
	/* width: 169px; */
	color: #FFFFCC;
	font-size: 12pt;
}

a#reservations:hover, body.reservations a#reservations {
	/* background:url(/images/nav_reservations_on.gif); */
	color: #829e83;
	font-size: 12pt;
}


/* Top Nav */
/* The below surrounds all of the Call Now, Home, About Us etc on the top right */
/* Enable the border to see it... */
#masthead-content {
	float: right;
	width: 300px;
	padding-right: 5px;
	/* border: 1px solid #305a2f; */
	margin-top: 10px;
	margin-bottom: 5px;
	padding-top: 5px;
}

#masthead p#call-now {
	margin: 20px 5px 0px 0px;
	float: right;
	padding-left: 20px;
	font-size: 1.2em;
	font-weight: bold;
	/* Took below out to get the image & some alt text on the main pages */
	/* background: url(/images/icon_phone.gif) left 2px no-repeat; */
}

#top-nav {
	margin: 15px 0 0 0;
	clear: both;
	width: 300px;
	/* border: 1px solid #305a2f; */
}

#top-nav li {
	list-style:none;
	float: left;
}

#top-nav li a {
	font-weight: normal;
	color: #6b5943;
	background-repeat: no-repeat;
}

a#home-nav {
	background-image: url(/images/icon_home.gif);
	padding-left: 19px;
	margin-right: 12px;
}
a#home-nav2 {
	/* background-image: url(/images/icon_home.gif); */
	/* icon_home.gif size 16 x 15 */
	padding-left: 0px;
	padding-right: 10px;
	padding-bottom: 2px;
	margin-right: 2px;
	font-size: 1.0em;
	/* border: 1px solid #305a2f; */
}

/* Do this to bump text over a bit... */
.navtext {
	padding-left: 2px;
}

a#about {
	background-image: url(/images/icon_about.gif);
	padding-left: 16px;
	margin-right: 12px;
}
a#about2 {
	/* background-image: url(/images/icon_about.gif); */
	/* icon_about.gif size: 14 x 14 */
	padding-left: 0px;
	padding-right: 10px;
	padding-bottom: 2px;
	margin-right: 2px;
	font-size: 1.0em;
	/* border: 1px solid #305a2f; */
}

a#contact {
	background-image: url(/images/icon_contact.gif);
	background-position: left 2px;
	padding-left: 20px;
	margin-right: 12px;
}
a#contact2 {
	/* background-image: url(/images/icon_contact.gif); */
	/* icon_contact size: 16 x 11 */
	/* background-position: left 2px; */
	padding-left: 0px;
	padding-right: 10px;
	padding-bottom: 2px;
	margin-right: 2px;
	font-size: 1.0em;
	/* border: 1px solid #305a2f; */
}

a#links {
	background-image: url(/images/icon_links.gif);
	background-position: left 4px;
	padding-left: 18px;
}
a#links2 {
	/* background-image: url(/images/icon_links.gif); */
	/* icon_links.gif size: 14 x 7 */
	padding-left: 0px;
	padding-right: 10px;
	padding-bottom: 2px;
	margin-right: 2px;
	font-size: 1.0em;
	/* border: 1px solid #305a2f; */
}

#home a#home-nav, body.about a#about, body.contact a#contact, body.links a#links {
	font-weight: bold;
	margin-right: 10px;
}

body.links a#links {
	margin-right: 0;
}

body.links #top-nav {
	margin-right: 6px;
}
	
		
/* ---------- @ Headings -----------*/
		   
h1, a#logo {
	display: block;
	width: 485px;
	background: url(/images/logo.png) bottom right no-repeat;
	height: 92px;
	text-indent:-9000px; 
	font-size: 1.8em;
	margin-bottom: 15px;
}

/* Below is what I did to put an actual img scr in the main page...  */
#logo2 {
	display: block;
	/* background: url(/images/logo.png) bottom right no-repeat;  */
	/* logo.png is 462 * 67 px */
	width: 462px;
	height: 67px;
	/* text-indent:-9000px; */
	font-size: .8em;
	margin-top: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
	padding-top: 5px;
	/* border: 1px solid #305a2f; */
}

h2 {	
	font-size: 1.6em;
	font-weight: normal;
	margin-bottom: 20px;
	}
	
h3 {
	font-size: 1.25em;
	font-weight: normal;
	margin: 20px 0 -10px 0;
}
	
#sidebar h3 {	
	font-size: 1.5em;
	margin: 0 0 .5em 0;
	border-bottom: 1px solid #587943;
	padding-bottom: .1em;
	color: #587943;
}
	
h4 {	
	font-size: 1.1em;
	font-weight: normal;
	margin-bottom: .75em;
	}

#sidebar h4 {
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 .5em 0;
	border-bottom: 1px solid #587943;
	padding-bottom: .1em;
	color: #587943;
}


/* ---------- @ Content Area -----------*/

#content-wrapper li {
	margin: 10px 0 10px 15px;
}

#content {
	width: 485px;
	padding: 25px 0 15px 25px;
}

#sidebar {
	width: 200px;
	padding: 20px 25px 15px 15px;
	font-size: .75em;
	line-height: 140%;
	/* border: 1px solid blue;  */
}

a#request {
	text-indent: -9000px;
	display: block;
	width: 385px;
	height: 50px;
	background: url(/images/button_request.gif) no-repeat;
	margin: 40px 0 0 30px;
}

a#reserve {
	text-indent: -9000px;
	display: block;
	width: 264px;
	height: 50px;
	background: url(/images/button_reservation.gif) no-repeat;
	margin: 40px 0 0 110px;
}


/*Home*/

#home #content-wrapper {
	background: none;
}

#home #content p {
	margin-right: 20px;
}

#tagline {
	text-indent: -9000px;
	border-bottom: 1px solid #587943;
	width: 465px;
	height: 30px;
	background: url(/images/header_accomodations.png) no-repeat;
}

.affiliation img {
	margin-bottom: 0;
	border: none;
}

.affiliation p {
	margin: 0;
	padding: 7px 35px 0 0;
}

#home a#request {
	margin-top: 20px;
}

#home #sidebar {
	width: 225px;
	padding: 20px 25px 15px 0;
}

#home #sidebar a img {
	margin-bottom: 20px;
}


/*Interior*/
.bullets {
	padding:0 0 30px 0;
	margin: 0;
	}

.bullets li {	
	font: .95em Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	padding: 0 0 2px 0;
	margin: 0 0 5px 0;
	}
	
.lines {
	padding:0 0 30px 0;
	margin-left: -13px;
}

.lines li {
	margin: 0;
	padding: 0 0 5px 0;
	list-style: none;
	border-bottom: 1px dotted #ebe3d8;
}

.accommodation-listing {
	width: 240px;
	height: 190px;
	float: left;
}

.accommodation-listing img {
	border: 2px solid #305a2f;
	padding: 1px;
	width: 175px;
	height: 120px;
}
	
.gallery img {
	border: 2px solid #305a2f;
	width: 135px;
	height: 100px;
	margin-right: 10px;
}

img.photo {
	border: 2px solid #305a2f;
	padding: 1px;
}

dl {
	margin-bottom: 15px;
}

dt {
	float: left;
	width: 130px;
	margin-right: 5px;
	display: block;
	font: .95em Verdana, Arial, Helvetica, sans-serif;
	margin-bottom: 1em;
	color: #827e79;
}

dd {
	width: 65px;
	display: block;
	float: left;
	font: .95em Verdana, Arial, Helvetica, sans-serif;
	margin-bottom: 1em;
}

.read-more {
	background: #e7e4e0 url(/images/icon_expand.gif) no-repeat 4px 6px;
	border-bottom: 1px solid #b0a991;
	padding: 3px 0 2px 24px;
	display: block;
	margin: 20px 0 10px;
	color: #6B5943 !important;
}

.read-more-active {
	background-image: url(/images/icon_close.gif);
}

#read-comments blockquote {
	margin: 15px 0;
	font: italic 1em Georgia, "Times New Roman", Times, serif;
}

#read-comments blockquote cite {
	font-style: normal;
	font-size: .9em;
}

	
/* ---------- @ Forms -----------*/
.button {	
	background: #e3e5dd ! important;
	border:#e3e5dd 1px solid;
	margin: 0 0 1px 3px;
	font-size:0.9em;
}

.button:focus {	
	background: #e3e5dd ! important;
}
		
.button:hover {	
	background: #b2b5a9 ! important;
}	


/*Clear*/
.clearfloat:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}

.clearfloat {
	display: inline-block;
	}

/* Hides from IE-mac \*/
* html .clearfloat {
	height:1%;
	}

*+html .clearfloat {
	height:1%;
	}

.clearfloat {
	display:block;
	}
/* End hide from IE-mac */

/* ---------- @ Footer -----------*/
#footer {
	background: #144f21 url(/images/bg_footer.png) repeat-x;
	/* Use this to change size of Cat4 info at bottom */
	/* padding: 35px 20px 0 20px; */
	padding: 10px 20px 0 20px;
	color:#829e83;
	/* height: 75px; */
	height: 60px;
	font-size: .85em;
	line-height: 160%;
	/* border: 1px solid orange; */
}

#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {	
	color:#829e83;
}

a#cat4 {
	display:block;
	width:35px;
	height:24px;
	float:right;
	background: url(/images/cat4.gif) no-repeat;
	text-indent:-9000px;
	margin: 8px 0 0 0;
}