/*
** CSS for Coqui's Hideaway website
** August 2007
** Ray Bentz
** @(#)style.css	1.3
*/

HTML
{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

BODY
{
  margin: 0 0 20px 0;
  padding: 10px 0 30px 0;
  border: 0px;
  font-size: 62.5%; /* sets 1em = 10pt */ /* should be 62.8% ??? */
  background-color: #d4eff4; /* must match color outside of "frame" on header/page/footer bg images */
  text-align: center;
  font-family: 'Trebuchet MS', 'Lucida Grande', Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
  font-size: 0.9em;
  font-weight: normal;
}


/***************************************************
** main structural layout elements
***************************************************/

#page
{
	background: white url('images/page-bg.jpg') repeat-y top center;
	width: 780px;
	margin: 0px auto;
	position: relative;
}

#header
{
	background: white url('images/header-bg.jpg') no-repeat bottom center;
	width: 780px;
	height: 245px; /* 380px; */
	text-align: left;
	position: relative;
}

#topmenu
{
  width: 780px;
  height: 25px;
  position: absolute;
  top: 18px;
  left: 0px;
  text-align: center;
  font-size: 14px;
}

#header #logo
{ 
	position: absolute;
	top: 58px;
	left: 40px; /* 70px */
	height: 140px; 
	width: 232px;
}

#header #pic1
{
  position: absolute;
  top: 64px;
  left: 346px;
  height: 130px;
  width: 175px;
}

#header #pic2
{
  position: absolute;
  top: 64px;
  left: 528px;
  height: 130px;
  width: 215px;
}

#header #pic
{
	position: absolute;
	top: 65px;
	left: 286px;
	height: 130px;
	width: 450px;
}


/*********** NOT USED
#header #nw-pic
{
  position: absolute;
  top: 64px; 
  left: 386px;
  height: 130px;
  width: 175px;
}

#header #ne-pic
{
  position: absolute;
  top: 64px; 
  left: 568px;
  height: 130px;
  width: 175px;
}

#header #se-pic
{
  position: absolute;
  top: 204px;
  left: 568px;
  height: 130px;
  width: 175px;
}

#header #sw-pic
{
  position: absolute;
  top: 204px;
  left: 31px;
  height: 130px;
  width: 530px;
}
**************/

#midmenu
{
  width: 750px;
  height: 20px;
  top: 212px; /* 352px; */
  left: 15px;
  font-size: 13px;
  text-align: left;
  position: relative; /* so we can use absolute positioning on sitesearch */
}

#topmenu, #midmenu
{
	color: #666666;
	font-weight: normal;
}

#topmenu a, #midmenu a
{
	color: #222222;
	text-decoration: none;
}

#topmenu a:hover, #midmenu a:hover
{
	color: blue;
	text-decoration: underline;
}


#topmenu .menucurrent, #midmenu .menucurrent
{
	color: black;
	font-weight: bold;
}

#sitesearch
{
	position: absolute; /* will be positioned relative to midmenu */
	top: -2px;
	left: 562px; /*552px;*/
}

#searchlabel
{
	font-size: 11px;
	color: #000000;
}

#searchinput
{
	width: 127px; /*137px;*/
	height: 15px;
	border: solid #444444 1px;
	background-color: #fde98f;
	margin: 0px;
	color: #000000;
	font-size: 11px;
	padding-left: 0.5em;
	margin-right: 2pt;
}

#announcement
{
	background: white url('images/announcement-bg.jpg') no-repeat top center;
	width: 750px; /* size of BG is 780 */
	height: 80px; /* size of BG is 85 */
	padding: 5px 15px 0 15px;
	font-size: 0.8em;
}

#content
{
	background-color: white;
	width: 700px;
	margin: auto;
	text-align: justify;
}


#footer
{
	background: white url('images/footer-bg.jpg') no-repeat top center;
	width: 780px;
	height: 105px;
	font-size: 11px;
	color: #666666;
	padding-top: 20px;
	position: relative;
}

#footer-copyright
{
	position: absolute;
	top: 76px;
	left: 0px;
	color: #222222;
	width: 780px;
}

#footer-copyright A
{
	font-weight: bold;
	text-decoration: none;
	color: #222222;
}

#footer-copyright A:hover
{
	text-decoration: underline;
	color: blue;
}

/**********************************************
** floated text columns
************************************************/

.halfwidth /* a half-width element */
{
  margin: 0 30px 25px 0;
  width: 310px;
  float: left;
}

#contactnotes
{
	border: 2px #efefff solid;
	padding: 8px;
}

/***********************************************
** callouts and floated images
************************************************/

img.alignright, img.alignleft, .calloutright, embed.alignright, embed.alignleft, object.alignright, object.alignleft
{
	margin: 8px;
	display: inline;
	border-width: 0px;
}

.alignright, .calloutright
{
	float: right;
}

.alignleft
{
	float: left;
}

img.centered
{
	display: block;
	margin-right: auto;
	margin-left: auto;
}

img#poolcallout
{
	padding-top: 15px;
}

.clearfloat
{
	clear: both;
}

/* NOT USED RIGHT NOW BUT WORTH KEEPING

.calloutright
{
	background-color: white;
	text-align: center;
}

#poolcallout
{
  background: red url('images/pool-callout.png') no-repeat top center;
  height: 202px;
  width: 202px;
  padding: 20px 4px 4px 4px;
  font-weight: bold;
}

#poolcallout P
{
	margin-top: 0;
}

****/


/*************************************************
** fonts, colors, and other non-structural things
**************************************************/

H1 /* main headings on each page */
{
	font-size: 1.3em;
	text-align: center;
}

H1.bigger /* on HOME page */
{
	font-size: 1.4em;
	margin-bottom: 0;
	padding-bottom: 0;
}

H2
{
	font-size: 1.3em;
	margin-top: 0;
	padding-top: 0;
	font-weight: bold;
	text-align: center;
}


H3 /* used as section heading on FAQ, LINK, CONTACT and RATES pages */
{
  background-color: #efefff;
  font-size: 1.0em;
  font-weight: bold;
  margin-right: 8px;
}

H3 A:link, H3 A:visited /* used for link to FOOTNOTE */
{
  text-decoration: none;
  color: #999999;
}

H3 A:hover /* used as link to FOOTNOTE */
{
  color: blue;
  text-decoration: underline;
}

H3.index /* H3's on the first page */
{
	background-color: #fff;
	border-bottom: 1px solid #888;
}

OL LI, UL LI
{
  margin-bottom: 10px;
}

.jsdisabled
{
  border: 1px solid #ff0000;
  margin: 20px 30px 20px 30px;
  text-align: center;
  padding: 4px;
}

.jsdisabled H1
{
	margin: 0;
	font-size: 1.0em;
	background-color: red;
	color: white;
}

#jswarning
{
	margin-left: 250px;
}

#footnote /* a full-width used on the SPECIALS & FRUIT pages */
{
  margin: 20px 8px 15px 0;
  clear: both;
  font-size: 0.8em;
}
/***********************************************
** availability calendar
***********************************************/
.cal-key
{
  font-family: 'Trebuchet MS', 'Lucida Grande', Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
  font-size: 13px;
  border-width: 0px;
  padding: 0px; /* cellpadding */
  border-spacing: 5px; /* cellspacing */
}

.cal-container
{
  padding: 0px;  /* cellpadding */
  border: 0px solid #efefff;
}

.cal-month
{
  font-family: 'Trebuchet MS', 'Lucida Grande', Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
  font-size: 13px;
  border: 0px solid #efefff;
  padding: 0px; /* cellpadding */
  border-spacing: 1px; /* cellspacing */
}

.avail, .holiday, .special
{
  background-color: #99ff99;
}

.holiday
{
	border: 2px solid green;
}

.unavail
{
  background-color: #84a5ce;
  text-decoration: line-through;
}

.booked
{
  background-color: #ff9c94;
  text-decoration: line-through;
}

.special
{
  	border: 2px solid yellow;
}

.tentative
{
	background-color: #FAFAD2;
	text-decoration: line-through;
}

.family
{
  border: 2px dotted #ff6060;
}

/******************************************
** rates
********************************************/

.rates
{
  font-family: 'Trebuchet MS', 'Lucida Grande', Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
  font-size: 1.0em;
  text-align: center;
  /* margin-left: 40px; */ /* centers the table in the whitespace */
  margin-left: 0px; /* centers the table in the whitespace */
}

.oldrate
{
  text-decoration: line-through;
}

.newrate
{
  color: red;
}

/****************************************
** faq
****************************************/

.faqbox
{
  margin: 0 8px 15px 0;
  padding: 10px 10px 10px 10px;
}

.faq
{
	/* font-size: 0.9em; */
}

.faq DT
{
  padding-bottom: 6px;
  font-weight: bold;
}

.faq DD
{
  padding-bottom: 10px;
}

.faq LI
{
  padding-top: 5px;
  padding-bottom: 5px;
}

.top
{
  text-align: left;
  font-size: 0.8em;
}


/******************************************************
** general FORM things common to PAYMENT, CONTACT, RESERVATION, LINKS
*****************************************************/

.submitbutton
{
  font-family: 'Trebuchet MS', 'Lucida Grande', Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
  font-size: 13px;
}

.formcontainer
{
  background-color: #efefff;
	padding: 20px;
	clear: both; /* mainly to clear .halfwidth floats on CONTACT page */
}

#formlabel /* actually not being used because setting CLASS in PAYMENT form */
{
	font-size: 13px;
	color: #000000;
}

#forminput /* actually not being used because setting CLASS in PAYMENT form */
{
	width: 137px;
	height: 15px;
	border: solid #222222 1px;
	margin: 0px;
	color: #000000;
	font-size: 13px;
	padding-left: 0.5em;
}

.agreementradio
{
	padding-top: 15px;
}

/***************************************************
** FRUIT and FLOWERS tables
*******************************************/

table.fruittable
{
  font-family: 'Trebuchet MS', 'Lucida Grande', Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
  font-size: 11px;
  font-weight: normal;
  margin-bottom: 40px;
}

.fruittable TH
{
  font-weight: normal;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #efefff;
}

.plant
{
  font-size: 13px;
  padding-right: 8px;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #efefff;
  width: 350px;
}

.ripe
{
  background-color: #81bb81;
  width: 40px;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #efefff;
}

.notripe
{
  background-color: white;
  width: 40px;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #efefff;
}

/******************
** GUESTBOOK
*******************/


.guestcomment
{
  margin: 0 8px 25px 0;
  clear: both;
  border-width: 1px 0px 0px 0px;
  border-style: solid;
  border-color: #efefff;
  padding: 10px;
}

.ownercomment
{
	margin: 0 90px 25px 90px;
	font-size: 0.8em;
	font-style: italic;
}

.withheld
{
  font-size: 0.8em;
  font-style: italic;
}

.personalinfo
{
  font-size: 0.8em;
  margin-left: 90px;
}

blockquote
{
  background: transparent url(images/quote-left.png) left top no-repeat;
}

blockquote div
{
  padding: 0 48px;
  background: transparent url(images/quote-right.png) right bottom no-repeat;
}

.offsitereview
{
  margin: 20px 70px 0 55px;
  padding: 0 0 0 35px;
  background: transparent url(images/comments.png) top left no-repeat;
}

div#flipkey
{
	margin: 20px;
	padding: 10px;
	border: 1px solid #efefff;
}

div#flipkey img
{
	margin: 0 10px 0 0;
	border-width: 0;
	float: left;
}

div#flipkey P
{
	margin-top: 10px;
	margin-bottom: 5px;
}

/****************
** GUESTBOOK SCANS
*****************/

img.guestbookscan
{
	margin-left: 105px;
}

/**********************
** LINKS page
*********************/

.linksample
{
	font-size: 0.9em;
	margin: 15px;
	border: 1px #efefff solid;
	padding: 10px;
}

/***********************************
** tags for photo Gallery
************************************/

.thumbnailsection
{
  clear: left;
  background-color: #efefff;
  margin-right: 40px;
  font-size: 1.0em;
  font-weight: bold;
  margin-top: 20px;
}

.thumbnailsectiondescription
{
	margin: 5px 40px 5px 0;
}

.thumbnailwrapper
{
  padding: 0px;
  width: 250px;
  height: auto; /*235px;*/
  margin: 20px 30px 20px 40px;
  float: left;
}

.thumbnailwrapper p
{
  border: 2px solid #efefff;
  padding: 10px;
  text-align: center;
  margin: 0px;
  font-size: 13px;
}

.thumbnailwrapper p img
{
  border: 1px solid #efefff;
  padding: 2px;
  margin-bottom: 20px;
}

.floatclear /* for use at the end */
{
	clear: both;
}

/***********************************
** HOUSE TOUR
*************************************/

.imgborder
{
  padding: 2px;
  border: 2px solid #efefff;
}

.roomimg
{
 /* padding: 4px;
  border: 2px solid #efefff; */
  width: 340px;
  height: 255px;
  margin-left: 0px;
  margin-right: 5px;
}

#mainbathroomimg
{
	height: 453px;
}

#aptfloorplan
{
  width: 340px; /* must match imagemap size */
  height: 249px;
}


/*************************************
** guest comments on first page
*************************************/

div.commentblurb
{
	clear: both;
	display: block;
	background-color: #ffffcc;
	padding: 10px;
	margin: 30px auto 10px auto;
}

div.commentblurb p.blurbhead
{
  font-family: 'Trebuchet MS', 'Lucida Grande', Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
  font-size: 0.9em;
  font-style: normal;
  text-align: left;
  font-weight: bold;
  margin: 0 auto 0 0;
  color: #AAA;
}

div.commentblurb p
{
	font-size: 1em;
	font-family: Georgia,'Times New Roman',Times,Serif;
	font-style: italic;
	margin: 0 auto 0 20px;
	color: #000077;
}

img#postit
{
	position: absolute;
	top:238px;
	right:15px;
	border: 0;
}

/***************************************
** discounts page
****************************************/
img.discount-bubble
{
	position: absolute;
	top: 234px;
	left: 16px;
	z-index: 10;
	border-width: 0;
}

H3.excursion
{
	margin-top: 35px;
	background-color: #fff;
	border-bottom: 1px solid #888;
	clear: both;
}

img.excursion-photo
{
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

p.excursion-discount
{
	font-weight: bold;
}

p.excursion-descrip
{
}

p.excursion-operator
{
	font-size: 11px;
}

div.discount-small-print
{
	clear: both;
	display: block;
	background-color: #ffffdd;
	padding: 10px;
	margin: 30px auto 10px auto;
}

div.discount-small-print H3
{
	background-color: #ffffdd;
	font-size: 10px;
}

div.discount-small-print p
{
	font-size: 10px;
}