/* -*- css -*-
 * File:	consumer.css
 * Author:	Charlie Root, ericx@vineyard.net
 * Date:	Mon May 24 16:48:12 2004
 * Description:	Styles for customer facing screens. Originally copied from
 *		SF.
 *
 * $Id: consumer.css,v 1.26 2010/06/15 19:25:33 cvs Exp $
 */

.SFSF {
  font-size: 16pt;
  font-weight: bold;
  color: "339900";
  font-family: arial, helvetica, sans-serif;
}

.SFCOM {
  font-size: 16pt;
  font-weight: bold;
  color: "#ffcc33";
  font-family: arial, helvetica, sans-serif;
}

.SITENAME {
  font-size: 20pt;
  font-weight: bold;
  color: "black";
  font-family: arial, helvetica, sans-serif;
}

.AVLINSTR {
  font-size: 9pt;
  font-weight: normal;
  color: "#000000";
  font-family: arial, helvetica, sans-serif;
}

.IDINFO {
  font-size: 10pt;
  font-weight: bold;
  color: "#000000";
  font-family: arial, helvetica, sans-serif;
}

.ERRORMSG {
  font-size: 10pt;
  font-weight: bold;
  color: "#ff6666";
  font-family: arial, helvetica, sans-serif;
}

.FDATA {
  font-size: 9pt;
  font-weight: normal;
  color: "#000000";
  font-family: arial, helvetica, hsans-serif;
}

.RBLABEL {
  font-size: 9pt;
  font-weight: bold;
  color: "#000000";
  font-family: arial, helvetica, hsans-serif;
}

.CM1 {
  font-size: 12pt;
  font-weight: bold;
  color: "#ffcc00";
  font-family: arial, helvetica, sans-serif;
}

.CM2 {
  font-size: 10pt;
  font-weight: bold;
  color: "#000000";
  font-family: arial, helvetica, sans-serif;
}

.AVLH {
  font-size: 10pt;
  font-weight: bold;
  color: "#000000";
  background-color: "#ccccff";
  font-family: arial, helvetica, sans-serif;
}

.NAVHDR {
  font-size: 9pt;
  font-weight: bold;
  color: "#000000";
  background-color: "#999999";
  line-height: 1.5;
  font-family: arial;
}

.TTITLE {
  font-size: 10pt;
  font-weight: bold;
  color: "#000000";
  font-family: arial;
}

.LISTNAV {
  font-size: 9pt;
  font-weight: normal;
  color: "#000000";
  font-family: arial;
}

A.LISTNAV:link,
A.LISTNAV:visited,
A.LISTNAV:active {
  color: blue;
}

.RETURN {
  font-size: 9pt;
  font-weight: bold;
  color: "#000000";
  background-color: "#bbbbbb";
  font-family: arial;
}

A.RETURN:link,
A.RETURN:visited,
A.RETURN:active {
  color: blue;
}

body {
  font-size: 9pt;
  font-weight: normal;
  color: #000;
  font-family: arial, helvetica, sans-serif;

  /* I don't really get the following; but it's the slotfinder
   * clone. The default background is white.  The background image
   * is a solid color. Why not just set the right background color?
   * Printing? */
  background-color: #fff;
  background-image: url(/images/background.jpg);
  background-repeat: repeat;
}

table
{
  border-collapse: collapse;
}

img {
  border-style: none;
}

/* Labels for form inputs and required form inputs */
.flabel
{
  font-size: 9pt;
  font-weight: bold;
  color: #000;
  font-family: arial, helvetica, sans-serif;
}

.special_offer,
.special_offer_label
{
  color: #900;
  /* display: none; */
  /* see #has_special_offer-field below for additional toggle */
}

table
{
  /* Yes, this and much of the following is redundant after the 'body'
     specifier above, but IE is too stupid to apply font info associated
     with 'body'. */
  font-size: 9pt;
  font-weight: normal;
  color: #000;
  font-family: arial, helvetica, sans-serif;
  text-align: left;
}

#search-nav
{
  background-color: #ff9;
  font-size: 9pt;
  font-weight: normal;
  padding: 5px;
  color: #000;
  font-family: arial, helvetica, sans-serif;
}

/* For static tables without form elements */
table.listing-noedit
{
  border: 2px ridge gray;
  margin: 10px;
  border-collapse: collapse;
}

table.listing-noedit td
{
  border: 1px solid gray;
}

table.listing-noedit th
{
  border: 1px solid gray;
  background-color: #ccc;
}

th
{
  font-weight: bold;
}

/*
   * For calendars
   */

span.calmonth
{
  margin: 2px;
  font-size: 10pt;
  font-weight: bold;
}

table.calendar
{
  border: 2px ridge gray;
  width: 200px;
}
table.calendar th { background-color: #999; }
table.calendar th.turnover { background-color: #f99 }

table.cal-legend
{
  border: 1px ridge gray;
  margin: 5px 20px;
}
table.cal-legend th,
table.cal-legend td
{
  border: 1px solid gray;
  padding: 5px;
}

table.cal-container
{
  width: 640px;
}
table.cal-container td.cal-container
{
  padding: 5px;
}
/* calendar colors */
table.cal-legend .available,
table.calendar .available
{
  background-color: #99ff99;
}
table.cal-legend .unavailable,
table.calendar .unavailable
{
  background-color: #ff9999;
}

.pagename
{
  font-size: 12pt;
  font-weight: bold;
  margin-top: 20pt;
}

.explain
{
  font-size: 8pt;
}

.clear-right { clear: right; }
.clear-left { clear: left; }
.clear { clear: both; }
.instruct
{
  font-size: 9pt;
  font-weight: normal;
  color: #000;
  font-family: arial, helvetica, sans-serif;

  /* Sadly, while elegant, IE5 doesn't parse this; so we have to use a table
     * for centering instead. */
  /* margin: 0px auto; */
  /* max-width: 600px; */

  border-left: solid blue;
  border-left-width: 0.75em;

  padding-left: 1em;
}

.message
{
  font-size: 9pt;
  font-weight: normal;
  color: #000;
  font-family: arial, helvetica, sans-serif;

  border-left: solid #6f6;
  border-left-width: 0.75em;
  padding-left: 1em;
}

.displayname
{
  font-size: 9pt;
  font-weight: bold;
  /* color: #000; */
  font-family: arial, helvetica, sans-serif;

  vertical-align: top;
}

.inquirydisplay
{
  font-size: 9pt;
  font-weight: bold;
  color: #000;
  font-family: arial, helvetica, sans-serif;

  vertical-align: top;
  text-align: right;
  padding-right: 1em;
}

/* per Clifford Dorr */
.contactinfo
{
  font-family: arial, helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  color: #495D5C;
  text-align: left;
  float: left;
}

/* the following is to pin the new developers logo at the top of the
   * screen.  This works beautifully in a standards compliant browser,
   * but not at all in IE (no surprise) */
#header
{
  position: fixed;
  top: 0px;
  left: 0px;

  width: 100%;
  height: 150px;

  background-color: #254977;
  text-align: center;
}

/* Error message stylings */
ul.error
{
  border-width: 0px 0px 0px 10px;
  border-style: solid;
  border-color: red;
  margin-left: 10px;
}
ul.error li
{
  list-style-type: none;
  font-size: 10pt;
  font-weight: bold;
  font-family: arial, helvetica, sans-serif;
}

/* The following is a fascinating hack I found on the net to simulate
 * the effect of fixed positioning in IE. I am not nearly smart enough
 * to claim authorship. */
@media screen
{
  body
  {
    margin: 0;
    padding: 130px 0 0 0;
    }
  div#fixedBox
  {
    overflow: auto;

    width: 100%;
    height: 130px;

    position: fixed;
    top: 0;
    left: 0;

    /* background-color: #254977; */
    background-color: #fff;
    background-image: url(/images/background.jpg);
    text-align: center;
    }
  div#content
  {
    padding: 1em;
    }
}


/*** Sandpiper Consumer Design Remix Rules ***/
/*** Colors:
	Dk gn: #83895B
	Lt gn: #9FA577
	Ivory: #F2F9F3
	Aluminum: #A2C8D5
	Slate: #495D5C
***/
body { padding: 0; }
body, #container { background-color: #9FA577; }

#container { padding: 10px 0; }
div#content { width: 960px; border: 10px solid #83895B; border-top: 0; background-color: #F2F9F3; margin: 0 auto; padding: 0 0 10px; position: relative; }
#content #search-nav { background-color: transparent; position: absolute; height: 25px;  left: 0; color: #fff; top: -25px; padding: 0; line-height: 25px; }
#resultstatus a,
#results .ops a,
#content .listing-nav a,
#content #search-nav a { font-weight: bold; color: #EEF; }
#content .listing-nav a.hilite { color: rgb(0, 0, 238); }
#content .box { background-color: #FFFFFF; border: 2px solid #A2C8D5; margin: 10px; padding: 10px; margin-bottom: 2px; }
#searchform { float: right; }
#content #searchform.box { width: 425px; margin-left: 0; }
.results #content #searchform.box { width: 375px; }
#searchform label { font-size: 1.2em; font-weight: bold;   line-height: 1.5em; }
#searchform .element { border-bottom: 1px solid #789880; padding: 10px 5px 5px	; }
#searchform fieldset { border: 0; overflow: hidden; padding: 0; border-bottom: 2px solid #83895B; }
#searchform fieldset .element { border: 0; border-right: 1px solid #789880; float: left; text-align: center; padding: 8px 20px;  }
#searchform #town-field { border-bottom-width: 2px; }
#searchform #num_bedrooms-field label { float: left; margin-right: 2em; }
#searchform #num_bedrooms-field input { margin-right: 2em; }
#searchform #num_nights-field { border: 0; }
#searchform p { margin: 5px; font-size: 8pt; }
#searchform fieldset p { clear: both; }
#searchform fieldset input { margin: 2px 4px; }
#searchform #rental_code-field label { float: left; margin-right: 1.5em; }
#searchform #rental_code-field { border: 0; }
/* toggle special offer on/off again */
/* #searchform #has_special_offer-field { display: none; float: left; border: 0; color: #900; line-height: 50px; } */
#searchform #has_special_offer-field { float: left; border: 0; color: #900; line-height: 50px; }
#searchform #has_special_offer-field label { }
#searchform button { padding: 0; margin: 0; background: transparent; float: right; border: 0; cursor: pointer; }

#container h2 { font-family: "Minion Pro", "Georgia", "Garamond", "Times New Roman", "Times", serif; text-align: center; font-weight: normal; font-size: 28pt; margin: 0; color: #495D5C; }

div#fixedBox { position: static; margin: 0 auto; width: 960px; border: 10px solid #83895B; border-bottom: 0; height: 125px; background: #A2C7D5  url(/images/header-short.jpg) no-repeat top left; overflow: hidden; }
div#fixedBox center { display: none; }
#fixedBox a:active { outline: none; }


#status { height: 30px; line-height: 30px; width: 930px; border: 10px solid #83895B; border-top: 0; border-bottom-width: 25px; margin: 0 auto; background: #EAE5D3 url(/images/status.jpg) repeat-x bottom; padding: 0 15px;  }
#status form { float: left; }
#status a { float: right; }
#status strong { position: relative; height: 30px; }

#status span,
#status a { font-family: "Minion Pro", "Georgia", "Garamond", "Times New Roman", "Times", serif; color: #495D5C; text-decoration: none; font-size: 12pt; }
#status strong label { position: absolute; color: #999; z-index: 10; left: 0; top: 0; line-height: normal; padding: 0 10px; }
#status strong input { position: relative; z-index: 5; left: 0; top: 0; }
#status strong input:focus { z-index: 15; }
#content #featured { float: left; width: 455px; }
#content #scroller { float: left; width: 455px; }
#content #featured.box { padding: 10px 0 0; position: relative; width: 475px; overflow: hidden; max-height: 405px; }
#content #featured.box img { display: block; margin: 10px auto 0; }

#content .box .caption { position: absolute; bottom: 0; left: 0; width: 100%; }
#content .box .caption .basic { position: relative; z-index: 10; }
#content .box .caption .deco { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: .7; filter: alpha(opacity=70); z-index: 5 }

#featured.box .caption { color: #fff; }
#featured.box .caption .body {  padding: 10px; position: relative; z-index: 10; }
#featured.box .caption .deco { background-color: #83895B; opacity: .7; filter: alpha(opacity=70); z-index: 5; }
#featured img { }
.caption p { margin: 0 5px 5px; }
#featured .caption a { color: #eef; font-weight: bold; float: right; margin-bottom: 5px; }
#featured .pcontainer { height: 380px; width: 475px; overflow: hidden; }
#scroller .thumbs { overflow: hidden; padding: 10px; height: 120px; overflow: hidden; padding-top: 20px; position: relative; }
#scroller .thumbs .slider { width: 10000px; position: relative; overflow: hidden; }
#scroller .thumbs .thumb { position: relative; display: block; float: left; margin: 5px 15px; overflow:hidden; height: 100px; width: 115px; text-align: center;  background-color: #ffffff; }

#scroller .caption { top: 60px;  color: #254E4C; font-size: 8pt; font-weight: bold; width: 115px; }
#scroller .caption { text-decoration: none; }
#scroller .thumb a { text-decoration: none; }
#scroller .caption .body { padding: 0 5px 4px; position: relative; z-index: 10; }
#scroller .caption .deco { background-color: #ffffff; z-index: 5; }

#scroller .nav { text-align: center; height: 45px; }
#scroller .nav img { vertical-align: middle; margin: 10px; }
#scroller .highlighter { width: 135px; height: 120px; left: 15px; top: 15px;  position: absolute; z-index: 0; background-color: #F2F9F3; border: 1px dashed #A2C8D5;  }

#scroller .thumbs .description { display: none; }
#content.results { overflow: visible; position: relative; }

#results { width: 490px; float: left; margin-left: 10px;  }
#results .box { width: 145px; float: left; margin: 5px 14px 8px 0; height: 150px;  padding: 0; position: relative;  }
#results .box a.thumb { display: block; width: 100%; height: 100%; overflow: hidden; }
#results .box a.thumb img { }
#results .popup img { float: right; }
#results .box:hover { border-color: #44e; }
#results .caption { list-style: none; text-align: center; font-family: "Minion Pro", "Georgia", "Garamond", "Times New Roman", "Times", serif;  position: relative;}
#results .caption .deco { background-color: #fff; z-index: 2; }
#results .caption .basic {  list-style: none; margin: 0; padding: 0 .5em 0 0; position: relative; z-index: 5; text-align: right; }

#results .box .popup { position: absolute; display: none; bottom: 170px; left: 160px; background-color: #fff; z-index: 100; width: 300px; padding: 0; overflow: hidden; padding: 2px; overflow: visible; font-family: "Minion Pro", "Georgia", "Garamond", "Times New Roman", "Times", serif; }

#results .box .popup dl { list-style: none; padding: 0; margin: 0;}
#results .box .popup dt,
#results .box .popup dd { width: 56%; padding: 0; line-height: 1.2em; float: left; margin: 0 0; }
#results .box .popup dt { clear: left; font-weight: bold; text-align: right; width: 36%; padding: 0 2%; }
#results .box .popup dd { text-align: left; padding: 0 2%; }
#results .box .popup h3 { text-align: center; border-bottom: 1px solid #ddd; font-weight: bold; font-size: 1.2em; margin-top: 0; }

#content .box .popup .deco { position: absolute; z-index: 280; }
#content .box .popup .deco-l { left: -29px; top: -22px; width: 29px; height: 100%; background: url(/images/popup_l.png) no-repeat top left; padding-bottom: 13px; }
#content .box .popup .deco-t { left: 0px; top: -22px; width: 100%; padding-right: 25px; height: 22px; background: url(/images/popup_t.png) no-repeat top right; }
#content .box .popup .deco-r { left: auto; right: -25px; top: 0px; width: 25px; height: 100%; background: url(/images/popup_r.png) no-repeat top right; }
#content .box .popup .deco-b { left: auto; top: auto; bottom: -23px; height: 23px; width: 100%; background: url(/images/popup_b.png) no-repeat top right; right: -25px; padding-left: 14px; }
#content .box .popup .deco-bl { width: 49px; height: 47px; background: url(/images/popup_bl.png) no-repeat top right; left: -38px; bottom: -38px; top: auto; }

#content .pagination { clear: left; margin-left: 2em; font-weight: bold; line-height: 2em; }

#results.thumbs .caption .basic li { display: none; }
#results.thumbs .caption .basic li.rental_code { display: block; }
#results.thumbs .caption .basic li.rental_code small {  float: left; font-size: 11px; color: #444; line-height: 24px; padding-left: .5em; }
#results .caption .rental_code { font-size: 14pt; }
#results .caption a { text-decoration: none; }
#results .popup-active { border-color: #00f; }

#resultstatus { position: absolute; top: -25px; left: 0; height: 25px; line-height: 25px; white-space: nowrap; color: #fff; }
#resultstatus .pagination { display: inline; margin: 0 20px; line-height: 25px; }
#results .ops { color: #fff; text-align: right;  position: absolute; height: 25px; right: 0; top: -25px; line-height: 25px; }

#results .quicklinks { overflow: hidden; line-height: .9em; padding: 2px 5px; position: relative; z-index: 7; }
#results .quicklinks .map { float: left; }
#results .quicklinks .viewavail { float: right; }

#listing{ font-family: "Minion Pro", "Georgia", "Garamond", "Times New Roman", "Times", serif; }

#details { overflow: hidden; }
#details .description p { font-size: 11pt; }
#details .description strong { font-weight: bold; }
.detail-head { float: left; width: 450px;  }
.detail-head h2,
.detail-head h3,
.detail-head h4 { display: block; text-align: center; margin: 0; padding: 0; }

.detail-head h2 { font-size: 24pt; float: right; text-align: left !important; line-height: .9em; }
.detail-head h3 { font-size: 16pt; float: left; color: #00f; text-align: right; margin-top: -.25em; }
.detail-head h3 a { text-decoration: none; }

.detail-head h4 { font-size: 14pt; }

.detail-head small { color: #666;  font-size: 10pt; float: left; clear: left; width: 350px; }

.listing-nav { position: absolute; right: 0; height: 25px; line-height: 25px; top: -25px; color: #fff; }
.listing-nav td { padding: 0; }

#listing { padding: 0 25px;  margin-right: 0; clear: left; overflow: hidden; }
#listing .ops { font-weight: bold; height: 30px; padding: 0 5px; line-height: 30px; font-family: Helvetica, Arial, serif; }
#listing .ops .slideshow { float: left; }
#details { font-family: "Minion Pro", "Georgia", "Garamond", "Times New Roman", "Times", serif; }
#listing .left,
#details .left { width: 440px; padding: 5px 10px ; }
#listing .right,
#details .right { width: 430px; padding: 5px 10px; }
#listing .ops ul { float: right; line-height: inherit; list-style: none; margin: 0; padding: 0; }
#listing .ops ul li { display: inline; }


#listing dl { padding: 5px 10px; overflow: hidden; margin: 15px 0; }
#listing dt { float: left; clear: left; width: 7em; font-weight: bold; }
#listing dd { float: left; }
#listing p { font-size: 14px; }
#listing p strong { font-weight: bold; }

#listing hr { display: block; width: 90%; margin: 0 auto; border: 0; border-bottom: 2px solid #A2C8D5; clear: both; position: static; }
#listing .main { width: 450px; height: 400px; overflow: hidden; vertical-align: middle; }
#listing .thumbs { padding: 6.25px; width: 450px; margin-top: 5px;  overflow: hidden; position: relative; margin-left: -15px; }
#listing .thumbs .scroll { position: relative; height: auto; }
#listing .thumbs a { vertical-align: middle;  float: left; width: 100px; height: 90px; overflow: hidden; margin: 6px 0 10px 12.5px; position: relative; z-index: 50; outline: 2px solid #fff; text-decoration: none; color: #444; text-align: center; font-family: Helvetica, Arial, sans-serif; }
#listing .thumbs a strong { position: absolute; bottom: 0; z-index: 10000; left: 0; width: 100%; background-color: #fff; opacity: .8; filter: alpha(opacity=80); }
#listing .thumbs img { padding: 0; margin: 0; position: relative; z-index: 5000; }

.thumbs .highlight { position: absolute; height: 110px; width: 110px; background: #D6D0B8; border: 1px dotted #A2CBD5; z-index: 25; left: 12px; top: 0px; }

table.misc { margin: 10px; white-space: pre-wrap; }
table.misc label { display: block; text-align: right; font-weight: bold; margin-right: 20px; white-space: nowrap; border-bottom: 1px solid #ccc; }
table.misc td { vertical-align: top; padding-bottom: .5em; }
table.misc td label { }
#content .fgrid { overflow: hidden; font-size: 12px; padding: 10px 0; font-family: Helvetica, Arial, sans-serif; }
#content .fgrid table { width: 100%; }
#content .fgrid td {border: 1px solid #ddd; border-right: 0; border-top: 0;  text-align: center; padding: 5px 2px; }
#content .fgrid a { color: #888; }
#content .fgrid .first { border-left: 0; }
#content .fgrid .lrow td { border-bottom: 0; }
#content .fgrid .first.last { border-right: 1px solid #222; ; }
#content .fgrid a strong { color: #000; }
#content .fgrid small { font-size: .8em; }
#content .fgrid h5 { font-size: 14pt; margin: 0 0 0.5em; padding: 0; }

#availability { position: relative; padding-top: 0 !important; }
#availability h3 { text-align: center; width: 100%; font-size: 14pt; margin: 0 0 -1.5em; line-height: 1.5em; }

#availability .calendars { overflow: hidden; position: relative; }
#availability .calendars .calendar { margin: 0 auto; }
#availability .calendars .rolled-over { left: -936px; }
#availability .calendars .calmonth { display: block; text-align: center; }
#availability .calendars .scroll { position: relative; overflow: hidden; width: 2000px; }
* html #availability .calendars .scroll { width: 100%; }
#availability .calendars .scroll .cal-container { float: left; width: 936px;  }
#availability .choose { padding: 2px 10px; border-bottom: #bbb 2px solid; background-color: #eef; line-height: 1.8em; height: 1.8em; width: 100%; margin-left: -10px; }
#content a.chosen { text-decoration: none; color: #888; cursor: default; }
#availability .calendars .annual { display: none; }
#availability table.cal-legend { margin: 15px auto; }

.left { float: left; }
.right { float: right; }

.viewops { overflow: hidden; padding-left: 5px; margin: 0 15px 0 0px; border-bottom: 2px solid #A2C8D5; height: 2em; line-height: 2em; background-color: #fff; }
.viewops ul li:first-child { border-left: 0; }
.viewops ul li { border-left: 2px solid #bbb; padding: 0 5px;  }

.viewops ul { display: inline; margin: 0; padding: 0 .5em; }
.viewops li { display: inline; }

#results.list .box { overflow: hidden; float: none; width: auto; height: auto; border: 0; border-bottom: 2px solid #A2C8D5;  padding: 5px 0 10px; }
#results.list .box a.thumb { float: left; height: auto; width: 140px; margin: 0 10px; border: 2px solid #A2C8D5;  }
#results.list .box a.thumb img { position: relative; }
#results.list .box .popup { display: block; float: left; position: static; bottom: auto; width: 290px; top: auto; left: auto; right: auto;  }

#results.list .box .popup .address_label,
#results.list .box .popup .address,
#results.list .box .popup .town_label,
#results.list .box .popup .town { display: none; }
#results.list .box .popup .deco { display: none; }
#results.list .box .popup h3 { display: none; }

#content .error { position: absolute; top: -25px; height: 25px; line-height: 25px; text-align: center; color: #fff; padding: 0 15px; background-color: #772200; font-size: 16px;  }
#content > .pagination { margin: 5px 0 -35px; clear: both; background-color: #83895B; color: #fff; padding: 0 20px; }
#content > .pagination a { color: #CCCCFF; }

#content #results.list .box .caption { float: left; position: static; width: 290px; text-align: left; border-bottom: 1px solid #ccc; margin-bottom: 5px;}
#content #results.list .box .caption li { padding: 0 20px; }
#content #results.list .box .caption li.rental_code { float: left; font-size: 2em; line-height: 1.5em; padding: 0 20px 0 5px; }
#content #results.list .box .caption dl dt { clear: none; }
#content #results.list .box .caption .deco { display: none; }
#listing .main { cursor: pointer; position: relative; margin-top: .5em; padding-bottom: 16px; }
#listing .main .imgbox { position: absolute; left: 0; top: 0; background-color: #fff; width: 100%; height: 100%;  }
#listing { position: relative; }
#listing .left small.note { position: absolute; z-index: 2000; bottom: 0; right: 0; font-size: 14px; line-height: 20px; padding: 0 5px; color: #666; font-style: italic; }
#listing .main .img { position: absolute; left: 0; top: 0; max-height: 100% }
#listing .main .img .caption { position: absolute; width: 95%; padding-left: 5%; }
#listing .main .img .caption strong { color: #fff; line-height: 1.5em; font-size: 12pt; position: relative; z-index: 2000; }
#listing .main .img .deco { background-color: #83895B; width: 100%; height: 100%; opacity: .8; filter: alpha(opacity=80); }

#listing #map { display: none; position: absolte; left: 0; top: 0; width: 100%; height: 100%; }
#listing .slideshow { padding-right: 35px; }
#listing .running strong { display: none; }
#listing .running { background: transparent url(/images/ajax-loader.gif) no-repeat right; }

.jScrollPaneContainer {
  position: relative;
  z-index: 1;
}

.side .jScrollPaneDrag { background: #00749A; }
.jScrollPaneTrack {
  position: absolute;
  cursor: pointer;
  right: 10px;
  top: 0;
  height: 100%;
  background: #F2F9F3 url(/images/stripe.gif) repeat-y scroll;
  overflow: visible;
}
.jScrollPaneDrag:hover { background: #A2C8D5; }
.jScrollPaneDrag {
  position: absolute;
  background: #83895B;
  cursor: pointer;
  overflow: hidden;
}
.jScrollPaneDragTop {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.jScrollPaneDragBottom {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
a.jScrollArrowUp {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  right: -2px;
  text-indent: -2000px;
  background: transparent url(images/arrow-up.png) no-repeat;
  width: 15px;
  overflow: hidden;
  height: 9px;
}
a.jScrollArrowUp:hover {
  /*background-color: #f60;*/
}

a.jScrollArrowDown {
  display: block;
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: -2px;
  text-indent: -2000px;
  overflow: hidden;
  background: transparent url(images/arrow-down.png) no-repeat;
  width: 15px;
  height: 9px;
}
a.jScrollArrowDown:hover {
  /*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
  /*background-color: #f00;*/
}

#page-listing #content { padding-top: 1px; }
#page-images table.images { margin: 0 auto; text-align: center; }
#page-images .images td { position: relative; vertical-align: middle; padding: 10px; }
#page-images .images td img { position: relative; }
#page-images .images td div { position: relative; width: 100%;  }

#page-images .images td strong {
  display: block;
  position: absolute;
  bottom: 2px;
  left:0;
  width: 100%;
  text-align: center;
  line-height: 2em;
  font-size: 14pt;
  opacity: .8;
  filter: alpha(opacity=80);
  background-color: #83895B;
  color: #fff;
}

/** IE6 hacks **/
* html #status { width: 960px; }
* html #status form * { line-height: 30px; }
* html #scroller .thumbs { height: auto; padding: 15px 0; }
* html #scroller .nav { clear: both; }
* html #scroller .thumbs .slider { width: auto; top: -4px; left: -4px; }
* html #content .box { margin: 0; padding: 5px 10px; }
* html #searchform.box { width: 400px; }
* html #searchform fieldset .element { padding: 0 8px; text-align: center;  }
* html #searchform fieldset #num_nights-field.element { padding-left: 20px; }
* html #searchform #num_bedrooms-field.element label { margin-right: .5em; }
* html #content #scroller.box { width: 475px; }

* html #featured.box .pcontainer { position: relative; height: 360; }
* html #featured.box .caption { z-index: 200; }
* html #featured.box .caption .deco { height: 1000px; z-index: 0; }
* html #featured.box .caption a { z-index: 100; position: absolute; right: 10px; bottom: 5px;}
* html #featured.box .caption .body { }

* html #content #scroller.box .caption { width: 135px; height: 3em;}
* html #content #scroller.box .caption .deco { width: 122px; }

* html #content #scroller.box .highlighter { display: none; }
* html #content #scroller.box .thumbs a { margin: 10px 7.5px; padding: 7px; border: 1px dashed #fff; }
* html #content #scroller.box .thumbs a.active { background-color: #F2F9F3; border: 1px dashed #A2C8D5; }
* html #content #results { margin-left: 5px; }
* html #content #results .box { z-index: 20; position: relative; }
* html #content #results .popup { z-index: 50; border: 3px outset #A2C8D5; }
* html #content #results .box .caption .basic { background-color: #fff; width: 145px; filter: alpha(opacity=70); }
* html #content #results .box .caption .deco { display: none; }
* html #results .box a.thumb { position: relative; height: 150px; width: 145px; }

* html #content .box .popup .deco { display: none; }

* html #content #listing { margin: 5px; overflow: hidden; float: left; }
* html #content #listing .thumbs { margin: 0; padding: 0; }
* html #content #listing .right { margin: 0; padding: 0; width: 410px; }
* html #content #listing .main .img .caption { width: 100%; height: 2em; }
* html #content #listing .left {  width: 420px; padding: 0;  }
* html #content #listing .thumbs .highlight { left: 6px; top: 0;  }
* html #content #details { margin: 5px; overflow: hidden; float: left; }

* html #content #availability.box { width: 900px; padding: 0; margin: 5px 10px 5px; text-align: center; }
* html #content #availability.box .cal-container  { width: 900px; margin: 0; float: none; }
* html #content #availability.box .calendars .scroll { width: 900px; overflow: visible; }
* html #content #availability .calendars .rolled-over {  left: 0;  }
* html #availability .choose { padding: 0; position: relative; z-index: 1000; margin: 0; }
* html #availability .choose .left {  float: right; }
* html #availability h3 { text-align: left; z-index: 20000; position: relative; }
* html #availability .choose .right { display: none; }

* html #status strong label { top: 8px; }
* html #status strong input { top: 3px; }

* html .detail-head { margin-bottom: 10px; }
* html .detail-head small { color: #666;  font-size: 10pt; float: left; width: 100%; clear: both;   }

/** IE7 hacks **/
*:first-child+html #status strong label { top: 5px; }

/** Format for printing **/
@media print {
  #content { border: 0 !important; width: auto; }
  #status { display: none; }
  #listing .main { width: 100%; }
  .thumbbox { display: none; }
  .listing-nav { display: none; }
  .ops { display: none; }
  .fgrid a small { text-decoration: line-through; font-size: .8em; }
  .available { font-weight: bold; }
  .unavailable { text-decoration: line-through; }
  #listing .thumbs { display: none; }
  .pagination {  display: none;  }
  #resultstatus { display: none;  }
  .viewops {  display: none; }
  #listing .mainbox { padding: 0 1%; width: 98%; }
  #listing #map { margin-left: 460px; z-index: 5000; }
  .detail-head { width: 100%; }
  div#fixedBox { border: 0 !important; }
  .contactinfo { display: none; }
  #availability { page-break-before: always; }
  #availability .choose a { display: none; }
  #availability .choose a.chosen { display: inline; }
  #availability .choose span  { display: none; }
  #listing small.note {  display: none; }
}