body  
	{
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	border: 0;
	background: rgb(60,60,41) url(../img/site/bg.gif);
	}

	/* DON"T PUT FONT VALUES in BODY: they cause havoc in Opera 5 & 6 */

body.cc
	{
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	border: 0;
	background: rgb(234,227,177);
	text-align: center;
	}

#ccbox
	{
	margin: 20px 22px 0 20px;   /*  Added for new currency converter in June 2009  */
	text-align: right;
	}

#ccbox h2
	{
	margin: 0px;   /*  Added for new currency converter in June 2009  */
	padding: 0;
	text-align: left;
	}

#container 
	{
	width: 740px;
	/* Adding height below gives the appearance of a shorter "nav" column. Otherwise, if the height were removed or set to auto, the white background would extend down to the bottom of the main paragraph.  So, inorder to make sure the white background behind the main content extends down far enough when long copy exists, we need to add a background color to the "maincontent" DIV, also making sure that its width is set to match the "maincontent" width less the nav bar   */
	height: 746px;
	margin-top: 33px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 0;
	/* ------------this backgroung: none is an attempt at making IE WIN show a short left nav column.  When set to white, the column background continues all the way down to the maincontent background. */
	background: none;
	border: 0;
	font: 83%/1.3 times, serif;
	}

h1 
	{
	font: 83%/1.3 times, serif;
	font-weight: normal;
	line-height: 1em;
	text-align: left;
	color: rgb(53,53,37);
	border: 0;
	font-size: 24px;
	}
	
h1.homehead
	{
	margin: 0;
	padding: 300px 50px 10px 50px; /* ------------Left & right padding plus width MUST equal 512px ------- */
	width: 412px;
	background-color: rgb(234,227,177);
	}
	
h1.pagehead
	{
	margin: 0;
	padding: 50px 62px 10px 50px;
	width: 400px;
	background-color: rgb(234,227,177);
	}
	
h2 
	{
	font: 14px verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	line-height: 1.5em;
	text-align: left;
	color: rgb(53,53,37);
	border: 0;
	letter-spacing: -0.00em;
	word-spacing: 0.05em;
	margin: 0;
	padding: 0 50px 5px 50px;
	width: 412px;
	background-color: rgb(234,227,177);
	}
	

h2.top 
	{
	padding: 50px 50px 5px 50px;
	width: 412px;
	}
	
h4 
	{
	font: 83%/1.3 verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	line-height: 1.5em;
	text-align: left;
	color: rgb(53,53,37);
	border: 0;
	font-size: 12px;
	letter-spacing: -0.00em;
	word-spacing: 0.05em;
	margin: 0;
	padding: 0 50px 5px 50px;
	width: 412px;
	background-color: rgb(234,227,177);
	}
	
h4.info 
	{
	padding: 10px 50px 3px 50px;  /* --Left & right padding plus width MUST equal 512px -- */
	width: 412px;
	border: none;
	clear: both;  /* ------------This is absolutely critical, or very bad things will happen! (it pushes down the next h4.info headline so it doesn't overlap (and extend it's width) the floated pictures if the text to the left of the picture is too short ------- */
	}

h4.info2 
	{
	padding: 30px 50px 3px 50px;  /* --Left & right padding plus width MUST equal 512px -- */
	width: 412px;
	clear: both;  /* ------------This is absolutely critical, or very bad things will happen! (it pushes down the next h4.info headline so it doesn't overlap (and extend it's width) the floated pictures if the text to the left of the picture is too short ------- */
	}
	
.rule  /* ------------This is not an elegant solution, but it was the only one that worked because of the expanding main content container and no background in margins. ------- */
	{
	height: 1px;
	width: 462px;  /* ---------Left & right padding plus width MUST equal 512px ---- */
	padding: 0 0 0 50px;
	border: none;
	background: rgb(234,227,177);
	}
	
a:link
	{color: rgb(144,28,41); text-decoration: underline;}
	
a:visited
	{color: rgb(144,28,41); text-decoration: underline;}	
	
a:hover
	{color: red; text-decoration: underline;}	
	


ul 	
	{
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	}
	
li
	{
	margin: 0;
	padding: 0;
	border: 0;
	}
	
p
	{
/* --------------------- Since IE4 does not understand "auto"	----------------- */
	padding: 0 90px 0 50px;
	color: rgb(78,79,56);  /* ----------------Put main paragraph color here. NOT IN "maincontent p: or else you can't change paragraph color with class selectors!-------------------- */
	font: 11px verdana, arial, helvetica, sans-serif;
	line-height: 1.8em;
	text-align: left;
	background-color: rgb(234,227,177);
	}  /* adding a margin of zero to a paragraph removes the normal space that a browser inserts before each new paragraph.  BE CARFUL hoe you use them!  */

p.final
	{
	padding: 0 90px 50px 50px;
	}
	
p.underule /* --------------------- WAS: p.contact	----------------- */
	{
	padding: 0 90px 0 50px;  /* padding of zero without adding the margin below will always leave a blank line before the paragraph.  To control that space, add a top margin and adjust with that */
	margin-top: 10px;  /* adding a margin of zero to a paragraph removes the normal space that a browser inserts before each new paragraph.  BE CARFUL hoe you use them!  */
	}
	
p.finalunderule
	{
	padding: 0 90px 50px 50px;
	margin-top: 10px;  /* adding a margin of zero to a paragraph removes the normal space that a browser inserts before each new paragraph.  BE CARFUL hoe you use them!  */
	}
	
p.nospace
	{
	padding: 0 90px 0 50px;
	margin-top: 1px; 	
	}
	
p.finalnospace
	{
	padding: 0 90px 50px 50px;
	margin-top: 1px;
	}	
	
p.thumb
	{
	padding: 0 90px 0 50px;
	margin-top: 10px;
	margin-bottom: 0;
	}
	
p.topspace
	{
	padding: 0 90px 0 50px;
	margin-top: 35px; 	
	}
	
p.indent
	{
	padding: 0 90px 0 70px;
	margin-top: 0;
	font-weight: bold;
	}
	
p.clear
	{
	clear: both;
	}
	
p.cap
	{
	padding: 0 90px 0 50px;
	margin-top: 0px; 
	font-size: 9px;
	}
		
.thumbnail
	{
	padding: 15px 0 0 50px;
	background: rgb(234,227,177);
	}
	
strong
	{
	color:rgb(100,59,47);
	}
	
 ul.roomamen
	{
	list-style-type: square;
	list-style-position: outside;
	color: rgb(78,79,56);
	margin-top: -5px;
	padding: 0 90px 8px 63px;
	background-color: rgb(234,227,177);
	font-size: 11px;
	font-weight: bold;
	font-family: verdana, arial, helvetica, sans-serif;
	line-height: 1.8em;
	}
	
ul.toplist 
	{
	list-style-type: square;
	list-style-position: outside;
	color: rgb(78,79,56);
	margin-top: 0;
	padding: 10px 90px 0 63px;   /* --Left & right padding plus width MUST equal 512px -- */
	background-color: rgb(234,227,177);
	font-size: 11px;
	font-weight: bold;
	font-family: verdana, arial, helvetica, sans-serif;
	line-height: 1.8em;
	}
	
ul.botlist 
	{
	list-style-type: square;
	list-style-position: outside;
	color: rgb(78,79,56);
	margin-top: 0;
	padding: 10px 90px 50px 63px;
	background-color: rgb(234,227,177);
	font-size: 11px;
	font-weight: bold;
	font-family: verdana, arial, helvetica, sans-serif;
	line-height: 1.8em;
	}	
	

#para   /* -----------  THIS IS DONE FOR IE 6 and below on PC, and IE 5 on MAC - in order for floats to work i had to put paragraphs in divs and give the div a background for when the page extends past the maincontent box. Otherwise, getting rid of this div altogether and applying min-hieght: 750px to the #maincontent div below works everywhere else. It's too much trouble getting around those stupid browsers. REMEMBER, main content is more like a set-size canvas so when short content is present the "canvas" stays to it's minimum height.----------- */
	{
	background-color: rgb(234,227,177);
	}

#maincontent     /* This should have been called "maincontentbackground" or "contentcanvas", because that's all it really is. The actual main content resides in the "para" DIV that is found inside it. It's the "para" DIV that expands with the content. This "maincontant" DIV only acts as a set-size color background that goes just below the left-hand main menu, and is absolutly sized for short content... so the "canvas" doesn't roll up and look weird. */
	{
	margin-left: 228px;
	width: 512px;
	height: 750px;
	padding: 0;
	border: 0;
	background-color: rgb(234,227,177);
	}
	
#map
	{
	width: 420px;
	height: 480px;
	font-family: verdana, arial, helvetica, sans-serif;
	margin: 0 0 18px 50px;
	padding: 0;
	border: 6px solid #fff;
	background: url(../img/maps/staticmap.gif); /* added for IE 5.0 and older non-IE browsers who aren't google maps friendly */
	}
	
p.redlink
	{
	padding: 0 90px 0 50px;
	margin-top: 7px;
	margin-bottom: 20px;
	}
		

/* --------------------- TOP NAV BAR BEGIN------------------------------------- */

#topnavbar
	{
	margin-left: 0;
	padding: 0;
	width: 512px;
	height: 39px;
	background: rgb(79,25,31) url(../img/site/topnavbar.jpg) no-repeat;
	}
	
	
#topnav 
	{
	position: absolute;
	margin-top: 21px;
	background: none;
	font-size: 11px;
	font-weight: normal;
	font-family: verdana, arial, helvetica, sans-serif;
	letter-spacing: .01em;
	line-height: 1em;
	width: 490px;
	}
	
	
	
#topnav li 
	{
	float: right;
	display: inline;
	padding: 0 9px 0 0; 
	}
		
#topnav li a 
	{
	display: inline;
	padding: 0 9px 0 0;
	text-transform: lowercase; 
	color: rgb(213,202,138);
	text-decoration: none;  /* -------------This stops the horizontal link list at the top from having an underline--------------- */
	}
	
/*  this is the original menu "ON" navigation (for top-menu) stuff from the HTML version  */
#about #topnav a.navabout, #contact #topnav a.navcontact, #direct #topnav a.navdirect, #maps #topnav a.navmap
	{
	font-weight: bold;
	color: #fff;
	}

#topnav #topmenu_on
	{
	font-weight: bold;
	color: #fff;
	}


	
#topnav li.vertrule 
	{
	border-left: 1px solid rgb(79,25,31);
	padding: 0 0 0 9px;
	}
	
		
#topnav li.novertrule 
	{
	border-left: none;
	padding: 0 0 0 9px;
	}

	
#topnav a:hover
  	{
	color: #fff;
	}
	
/* --------------------- TOP NAV BAR END---------------------------------------- */
	
#shadow
	{
	position: absolute;
	top: 72px;
	z-index: 1;
	width: 39px;
	height: 648px;
	margin: 0 0 0 0;
	border: 0;
	background: rgb(234,227,177) url(../img/site/shad.gif) repeat;
	}	
	
#shadbottom
	{
	position: absolute;
	top: 720px;
	z-index: 2;
	width: 39px;
	height: 48px;
	margin: 0 0 0 0;
	border: 0;
	background: rgb(234,227,177) url(../img/site/bottomshad.gif);
	}	
	
	
/* ---------- in order to position the homepix image over the shadow I had to give it an absolute position/z-index, thereby taking it out of the normal flow.  S000... it becomes necessary to add a large margin to the text beneath it. ----------- */

#homepix
	{
	position: absolute;
	margin: 1px 0 0 0;
	width: 512px;
	height: 267px;
	z-index: 4;
	}
	
#pagepixtop
	{
	margin: 50px 50px 0 50px;
	z-index: 4;
	}
	
#pagepix
	{
	margin: 0 50px 0px 50px;
	border: 6px solid #fff;
	z-index: 4;
	}
	
.roompix
	{
	float: right;
	width: 150px;
	height: 113px;
	margin: 17px 18px 0 20px;
	padding: 6px 19px 21px 6px;  
	border: 0;
	background: url(../img/site/photobckgrnd.gif) no-repeat;
	}
	
.insetpix
	{
	float: right;
	width: 150px;
	height: 113px;
	margin: 7px 18px 0 20px;
	padding: 6px 19px 21px 6px;  
	border: 0;
	background: url(../img/site/photobckgrnd.gif) no-repeat;
	}
	
img.hthumb
	{
	width: 75px;
	height: 56px;
	margin: 0;
	padding: 0 14px 30px 0;
	border: 0;
	background: none;
	}
	
img.vthumb
	{
	width: 56px;
	height: 75px;
	margin: 0;
	padding: 0 14px 11px 0;
	border: 0;
	background: none;
	}

/*  ---------Left Navigation Bar -- it's nearest containing block: "container", (which is normal, or static) so the root level block becomes the container for the absolute positioned DIVs below, provided they're not the child or ancestor of an element that is NOT static, or normal.---------  */

#whtnavbckgrnd
	{
	position: absolute;
	top: 0;
	width: 228px;
	height: 730px;
	border: 0;
	background: #fff;
	}
	
#header
	{
	position: absolute;
	top: 0;
	width: 222px;
	height: 33px;
	margin-top: 0;
	background: rgb(79,25,31) url(../img/site/vtlogoheader.jpg);
	}

#logo
	{
	position: absolute;
	top: 33px;
	width: 222px;
	height: 156px;
	}
	
#nav
	{
	position: absolute;
	top: 195px;
	width: 222px;
	height: 427px;
	margin: 0;
	border: 0;
	background: rgb(190,185,160) url(../img/site/leftnavbckg.jpg) no-repeat;
	}

h3 {font: 50%/2 Georgia, "Times New Roman", times, serif; }

.describe
	{
	width: 220px;
	margin: 10px 0 0 2px; /* ------220 px and 2px is done for kerning to the right--------- */
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0;
	color: #fff;
	font-size: 11px;
	letter-spacing: .3em;    /* ------Change to .2 em for IE version--------- */
	border: 0;
	}
	
#nav ul
	{
	margin: 25px 0 0 0px;
	width: 222px;
	padding: 0;
	text-align: right;
	font-size: 12px;
	border: 0;
	}

#nav ul a
	{
	display: block;
	width: 185px;
	padding: 7px 8px 5px 7px;
	border-bottom: 1px solid #D8D7C5;
	text-decoration: none;
	color: rgb(109,111,79);
	background: url(../img/site/vtarrow.gif) 100% 50% no-repeat;
	}

#nav a:hover { background: #D8D7C5; }


/*  this is the original menu "ON" navigation (for left-menu) stuff from the HTML version  */

#intro #nav .navintro a, #rooms #nav .navroom a, #amen #nav .navamen a, #tour #nav .navtour a, #area #nav .navarea a, #rate #nav .navrate a, #photo #nav .navphoto a
	{
	font-weight: bold;
	color: #000;
	border-bottom: 1px solid rgb(100,59,47);
	}


#nav #mainmenu_on  /*  -----------PHP addition to get this onto the individual page content includes------------  */
	{
	font-weight: bold;
	color: #000;
	border-bottom: 1px solid rgb(100,59,47);
	}




#navpix
	{
	margin: 25px 0 0 27px;
	width: 173px;
	height: 128px;
	border: none;
	}
	
#mailme a
	{
	display: block;
	margin: 15px 0 0 117px;
	width: 83px;
	height: 19px;
	background: transparent url(../img/site/emailsite.gif) no-repeat;
	}
	
#mailme a:hover
	{
	background: url(../img/site/emailsitehov.gif) no-repeat;
	}
	
/*  -----------Footer -- Note: the position of the footer is determined by the bottom padding of the above block ------------  */

#copyright  /* OPERA CHANGE: Don't make this a "#copyright p" rule, instead remove the "<p></p>" inclosure from the copyright line altogether, as Opera inherits the beige background from the original p rule-----*/
	{
	position: absolute;
	top: 735px;
	width: 218px;
	text-align: right;
	margin: 0;
	padding: 0;
	color: rgb(163,163,135);
	background: none;
	border: 0;
	font-size: 9px;
	font-family: verdana, arial, helvetica, sans-serif;
	letter-spacing: 0.00em;
	line-height: 1.3em;
	}
	
#copyright a:link
	{color: rgb(163,163,135); text-decoration: underline;}
	
#copyright a:visited
	{color: rgb(163,163,135); text-decoration: underline;}	
	
#copyright a:hover
	{color: #fff; text-decoration: underline;}	
	
	
.rate
	{
	padding: 10px 0 0 50px;
	background-color: rgb(234,227,177);
	}

.rate-astrsk  /*  -----------NEW on 4-12-2011 to accomodate Asterisk notation about holiday rates ------------  */
	{
	padding: 0 0 0 50px;
	background-color: rgb(234,227,177);
	}

tr.odd
	{
	background: rgb(243,238,197);
	}

th, td
	{
	text-align: left;
	}

th
	{
	padding: 1px 50px 4px 5px;
	font: 11px verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	line-height: 1.5em;
	text-align: left;
	color: rgb(53,53,37);
	border-bottom: 2px solid rgb(152,65,64);
	}

td
	{
	padding: 1px 50px 1px 5px;
	color: rgb(78,79,56);
	font: 11px verdana, arial, helvetica, sans-serif;
	line-height: 1.8em;
	border-bottom: 1px solid rgb(209,204,152);
	}
	
.end
	{
	padding: 1px 10px 1px 5px;
	}