html, body, h1, h2, h3, h4, h5, h6, a, ul, li, p, div, span, blockquote { margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: #E0F8FC url(/images/background.jpg) repeat-x scroll 0 0; font: normal 76%/1.4 Georgia, "Times New Roman", serif; color: #333; }
/* web fonts */
@font-face { font-family: "Mistral"; src: url(/styles/fonts/mistral.ttf); }
@font-face { font-family: "Lucida Handwriting Italic"; src: url(/styles/fonts/lucida.ttf); }
h1 { font-size: 1.5em; margin-bottom: .5em; }
h2 { font-size: 1.3em; margin-bottom: .2em; }
h3 { font-size: 1.1em; margin-bottom: .2em; }
a { color: #333; }
a:hover { color: #C9072A; }
p { margin: 0 0 1em; font-size: 1.1em; }
ul { margin-left: 1.2em; }
/* generic classes */
.link { cursor: pointer; text-decoration: underline; }
.alignright { float:right; }
.alignleft { float:left; }
#main { height: auto; min-height: 100%; min-width: 1016px; position: relative; background: transparent url(/images/header.png) repeat-x center 0; }
#outer { margin: 0 auto; padding-bottom: 160px; position:relative; width: 980px; }
#inner { width: 980px; }
/* header */
#header { margin: 0 auto; position: relative; width: 980px; height: 160px; }
#logo { position:absolute; top:15px; left:20px;}
#header .vcard { text-indent: -9999px; }
#subTitle { text-indent: -9999px; }
#languages { position: absolute; right: -5px; top: 20px; }
#languages li { float: left; list-style-type: none; width: 6em; }
#languages li a { padding-left:10px; }
#languages li#english { background: transparent url(/images/current-triangle.png) no-repeat scroll 0 5px; }
.es #languages li#english { background: none; }
.es #languages li#spanish { background: transparent url(/images/current-triangle.png) no-repeat scroll 0 5px; }
/* navigation */
#navContainer { position:absolute; left:182px; top:-80px; width:68em; }
#nav ul { list-style-type: none; margin: 0; }
#nav li { float: left; }
#nav li a { padding:0 20px; display: inline; height: 25px; font: 1.65em "Lucida Handwriting Italic", serif; color: #333; text-decoration:none; white-space:nowrap; text-transform: lowercase; }
.es #nav li a { font-size: 1.6em; padding:0 17px; }
#nav li a:hover { color: #c9072a; }
.home #nav li.home a,
.apartments #nav li.apartments a,
.rates #nav li.rates a,
.reservation #nav li.reservation a,
.location #nav li.location a,
.contact #nav li.contact a { color: #c9072a; background: transparent url(/images/current-flower.png) no-repeat scroll 6px 6px; }
#nav li.home { margin-top: 0px; }
#nav li.apartments { margin-top: -3px; }
#nav li.rates { margin-top: 6px; }
#nav li.reservation { margin-top: 14px; }
#nav li.location { margin-top: 15px; }
#nav li.contact { margin-top: 4px; }
/* content */
#contentPane { padding: 20px; width: 940px; }
.contentBox { overflow:hidden; width: 900px; /*background: #d6f7fd;*/ background: transparent; border-top: 2px solid #b98c78; padding: 20px; margin-bottom: 2em; }
#TA_rated694, #TA_excellent607 { float: right; }
/* footer */
#footer { background: transparent url(/images/footer.png) repeat-x scroll 0 0; bottom: 0; height: 200px; position: absolute; width: 100%; }
#footerText { margin: 125px auto 0; width:980px; font-size: 0.9em; color: #fff; }
#footer a { color: #fff; text-decoration: none; }
#phoneNrs { display: none; }
#copyright,
#phone,
#credits { float: left; display:inline; width: 32.5%; padding-top: 0.5em; }
#copyright { margin-left: 1%; }
#phone { text-align: center; background: transparent url(/images/phone.png) no-repeat scroll 90px 8px; }
#credits { text-align:right;}
/* Home */
.home #contentPane {width:280px}
#special { background:none repeat scroll 0 0 #EEEEEE; border:2px solid #DDDDDD; left:356px; padding:2px 3px; position:absolute; top:28px; }
#special a { font-size:1.3em; text-decoration:none; vertical-align:super;}
#special:hover { border: 2px solid #C9072A; }
#slideshow { position: absolute; left: 356px; top: 95px; /* put back to top: 60px; when removing the special */ width:600px; height:450px; padding: 6px 7px; background: transparent url(/images/pic-frame-8.png) no-repeat scroll 0 0; }
/* Apartments */
.studio { width:760px; padding:40px 20px 20px 160px; background: transparent url(/images/decoration.png) no-repeat scroll 5px 5px; }
.aptimg { display:inline-block; margin-right: 70px; margin:15px 70px 20px 0; }
a.plan { display:inline-block; text-decoration:none; text-align:center; position: relative; top:-20px; }
a.plan span { text-decoration: underline; }
.aptimg img, a.plan img { border: 2px solid #758ca1; }
.aptimg img:hover, a.plan:hover img { border: 2px solid #C9072A; }
/*.reserve { display:inline-block; background: #f0d4cc; padding:2px 5px; border: 1px outset; text-decoration:none; }
.reserve:hover { background: #e6bdb1; border: 1px inset; }
*/
.reserve { background: #e2cbc4 url(/images/border.gif) no-repeat 0 0; cursor: pointer; display: block; float: left; /*margin: 3px 2px; min-width: 140px;*/ text-align: center; text-decoration: none; }
.reserve:hover { background: #e6bdb1 url(/images/border.gif) no-repeat 0 0; color: black; }
.reserve span { background: url(/images/border.gif) no-repeat right bottom; display: block; left: 1px; top: 1px; padding: 3px 8px 4px; position: relative; text-align: center; text-decoration: none; }
#amenities { float: left; margin-right: 80px; }
#amenities h3 { margin-left: 1em; }
#apttxt { margin-top: 2em; }
/* Rates */
.rates table { float: left; width:410px; background: #ddd; }
.rates table#daily { margin-right: 60px; }
caption { font-size: 1.3em; font-weight: bold; margin-bottom:0.7em; }
.rates .even, .odd { background: #eee; }
.rates td { text-align: center; }
.rates .tablenote td { text-align: left; padding-left: 1em; }
/* Location */
.location iframe { border: 5px solid #B98C78; margin-bottom: 2em; }
.location small { display: none; }
.location iframe, .location small { margin-left:65px; }
/* Reservations */
.reservation fieldset { width: 48em; margin-bottom:15px; border:1px solid silver; padding:10px; }
legend { font-weight: bold; color: #333; }
.reservation label { float: left; width: 14em; }
.confirm dl { width:40em; }
.confirm dt { width:20em; clear:left; float:left; font-weight:bold; }
.confirm dd { margin-left:0; }
.confirm dt, .confirm dd { border-bottom:1px solid #e8a040; margin-bottom:0; min-height:1.5em;}
.confirm #contentPane h3 { margin: 35px 0 -5px; }
.note {font-style: italic; margin: 0.5em 0 0 13em; }
.note.wide { margin:1em 0; }
.radio div { margin-left:9.8em; }
.radio div input { border: none; }
.radio div label { display:inline; float:none; }
.radio span.label { display: inline; float: left; }
.hide { display:none; }
#contentPane .field p.am { margin-top: 10px; margin-bottom: 0; }
.reservation .select-border { border-bottom: 1px dotted; margin-bottom: 5px; }
#expDate { display:block; overflow:hidden; }
#expDate .label { float:left; width:10em; }
#expDate label { width:auto; margin-right:.5em; }
#expDate .field { float:left; width:6em; }
.required-indicator { display:inline; font-size: 1em; color: #B98C78; font-family: "Arial Unicode MS", Helvetica, sans-serif; }
.reservation a.info-indicator { float: left; margin-left: -22px; margin-top: -3px; display: inline; font-size: 1em; color: navy; font-weight: bold; font-family: "Arial Unicode MS", Helvetica, sans-serif; text-decoration: none; }
.reservation a.info-indicator:hover { color:#da8008; }
.reservation textarea { display:block; width:auto;}
.optin label, .conditions label { width: 20em; float: none; }
#fineprint h2 { font-size:.9em; }
.calendarButton { text-indent:-9999px; overflow:hidden; border:none; width: 13px; height: 13px; background: transparent url(/images/p_cal.gif) no-repeat scroll 0 0; margin-right:-12px; left: -20px; position: relative; top: 3px; padding: 0;}
.vlaCalendar { line-height:1; }
.error, .field input.error { border: 1px solid red; }
#special-requests { white-space:pre; margin-left:2em; margin-top:1em; }
input[disabled="disabled"] { background:silver; }
/* contact form */
.contact input, .contact textarea { padding:4px; clear:none; }
label { float: left; width: 12em; }
.field { padding-bottom: 3px; }
.field input, .field textarea { border:1px solid #b98c78; }
legend { font-weight: bold; color: black; }
fieldset { margin: .5em; width: 37em; border:1px solid #ddd; padding:10px; }
textarea { clear: left; font-family: sans-serif;}
.checkbox label { float:none; text-indent:1em; }
.checkbox input { float:none; margin-right:.5em; border:none;}
#submitButton { clear: both; margin: .5em .5em 2em 0; width:auto; }
#errors {color:red;}
.optin label, .conditions label { float: none; width: 20em; }
.address { float:right; background:#EBDAD6; width:304px; padding:10px; border:2px solid #E2CBC4; }
.address img { margin:1em 0; border:1px solid #E2CBC4; }
.address .geo .latitude,
.address .geo .longitude { display: none }
.address .officeHours span.title { font-weight: bold; }
.address .officeHours dl { margin-top: 5px; }
.address .officeHours dt { font-weight: bold; float: left; padding-right: 1em; }
/* facebook link */
#fbJoin { position: relative; top: -61px; left: 730px; display: block; height: 13px; width: 50px; text-indent: -10000px; background: url("/images/facebook/facebook_button.png") no-repeat 0 0 transparent; border: 1px solid #000000; }
/* etc. link */
#externalLink { background:url("/images/button-dive-center.jpg") no-repeat scroll 0 0 transparent; border:1px solid #000000; display:block; height:13px; left:590px; position:relative; text-indent:-10000px; top:-76px; width:85px; }
/* SLIMBOX */
#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url(/images/slimbox/loading.gif) no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: transparent url(/images/slimbox/prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink {
right: 0;
}
#lbNextLink:hover {
background: transparent url(/images/slimbox/nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #fff;
border-top-style: none;
}
#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(/images/slimbox/closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}
/***************/
/* vlaCalendar */
/***************/
/* Picker */
.vlaCalendarPicker {
position: absolute;
z-index: 999;
margin-top: -5px;
margin-left: -2px;
display: none;
}
.vlaCalendarPicker .pickerBackground {
background: transparent url('/images/calendar/calendar_background.png') no-repeat top center;
padding: 16px;
height: 130px;
width: 166px;
overflow: hidden;
}
/* Background for IE6 - code does not validate as it is a hack
*html .vlaCalendarPicker .pickerBackground {
background-image: url('/images/calendar/calendar_background.gif');
}
*/
/* Main calendar */
.vlaCalendar, .vlaCalendar table {
font-family: calibri, arial !important;
color: black;
font-size: 12px !important;
}
.vlaCalendar {
display: block;
width: 164px;
}
.vlaCalendar .container, .vlaCalendar .container div {
width: 164px;
height: 130px;
text-align: left;
position: absolute;
overflow: hidden;
}
.vlaCalendar span.indication {
display: block;
text-align: center;
}
.vlaCalendar table {
margin-top: 8px;
text-align: right;
border-collapse: collapse;
background-color: white; /* <- IE ugly text in transition fix */
}
.vlaCalendar .picker td {
cursor: pointer;
}
/* Label & arrows */
.vlaCalendar .label:hover {
color: #0066cc;
cursor: pointer;
}
.vlaCalendar .noHover:hover {
color: black;
cursor: default;
}
.vlaCalendar .arrowLeft, .vlaCalendar .arrowRight {
background: transparent url('/images/calendar/arrowleft.gif') no-repeat center;
height: 12px;
width: 10px;
cursor: pointer;
}
.vlaCalendar .arrowLeft {
margin-left: 5px;
float: left;
}
.vlaCalendar .arrowLeft:hover {
background-image: url('/images/calendar/arrowleft_hover.gif');
}
.vlaCalendar .arrowRight {
margin-right: 5px;
float: right;
background-image: url('/images/calendar/arrowright.gif');
}
.vlaCalendar .arrowRight:hover {
background-image: url('/images/calendar/arrowright_hover.gif');
}
/* Month */
.vlaCalendar .month th {
text-align: center;
font-weight: normal;
width: 24px;
padding-bottom: 1px;
border-bottom: 1px solid #f5f5f5;
}
.vlaCalendar .month td {
padding-right: 3px;
height: 15px;
}
.vlaCalendar .month tr.firstRow td {
padding-top: 2px;
}
.vlaCalendar .month td:hover {
background: url('/images/calendar/day_hover.gif') bottom no-repeat;
color: #0066cc;
}
.vlaCalendar .month td.selected {
background: url('/images/calendar/day_selected.gif') bottom no-repeat;
color: #0066cc;
}
.vlaCalendar .month td.selected:hover {
background-image: url('/images/calendar/day_selected_hover.gif');
}
.vlaCalendar .month td.outsideDay {
color: #a8a8a8;
}
.vlaCalendar .month td.outsideDay:hover {
color: #b1c5fc;
}
/* Year & decade */
.vlaCalendar .year {
margin-left: 2px;
}
.vlaCalendar .year td {
width: 40px;
height: 35px;
text-align: center;
cursor: pointer;
}
.vlaCalendar .year td:hover {
background: url('/images/calendar/month_hover.gif') center no-repeat;
color: #0066cc;
}
.vlaCalendar .year td.selected {
background: url('/images/calendar/month_selected.gif') center no-repeat;
}
.vlaCalendar .year td.selected:hover {
background-image: url('/images/calendar/month_selected_hover.gif');
}
.vlaCalendar .year td.current {
background: url('/images/calendar/month_current.gif') center no-repeat;
color: #0066cc;
}
.vlaCalendar .year td.current:hover {
background-image: url('/images/calendar/month_current_hover.gif');
}
.vlaCalendar .year td.selectedcurrent {
background: url('/images/calendar/month_selectedcurrent.gif') center no-repeat;
}
.vlaCalendar .year td.selectedcurrent:hover {
background-image: url('/images/calendar/month_selectedcurrent_hover.gif');
}
.vlaCalendar .year td.outsideYear {
color: #a8a8a8;
}
.vlaCalendar .year td.outsideYear:hover {
color: #b1c5fc;
}
/**
Stylesheet: Slideshow.css
CSS for Slideshow.
License:
MIT-style license.
Copyright:
Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
HTML:
Notes:
These next four rules are set by the Slideshow script.
You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/
.slideshow {
display: block;
position: relative;
z-index: 0;
}
.slideshow-images {
display: block;
overflow: hidden;
position: relative;
}
.slideshow-images img {
display: block;
position: absolute;
z-index: 1;
}
.slideshow-thumbnails {
overflow: hidden;
}
/**
HTML:
Notes:
The images div is where the slides are shown.
Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/
.slideshow-images {
height: 400px;
width: 600px;
}
.slideshow-images-visible {
opacity: 1;
}
.slideshow-images-prev {
opacity: 0;
}
.slideshow-images-next {
opacity: 0;
}
.slideshow-images img {
float: left;
left: 0;
top: 0;
}
/**
Notes:
These are examples of user-defined styles.
Customize these classes to your usage of Slideshow.
*/
.slideshow {
height: 400px;
margin: 0 auto;
width: 600px;
}
.slideshow a img {
border: 0;
}
/**
HTML:
...
Notes:
Customize the hidden / visible classes to affect the captions animation.
*/
.slideshow-captions {
background: #000;
bottom: 0;
color: #FFF;
font: normal 12px/22px Arial, sans-serif;
left: 0;
overflow: hidden;
position: absolute;
text-indent: 10px;
width: 100%;
z-index: 10000;
}
.slideshow-captions-hidden {
height: 0;
opacity: 0;
}
.slideshow-captions-visible {
height: 22px;
opacity: .7;
}
/**
HTML:
Notes:
Customize the hidden / visible classes to affect the controller animation.
*/
.slideshow-controller {
background: url(/images/slideshow/controller.png) no-repeat;
height: 42px;
left: 50%;
margin: 150px 0 0 -119px;
overflow: hidden;
position: absolute;
top: 50%;
width: 238px;
z-index: 10000;
}
.slideshow-controller * {
margin: 0;
padding: 0;
}
.slideshow-controller-hidden {
opacity: 0;
}
.slideshow-controller-visible {
opacity: 1;
}
.slideshow-controller a {
cursor: pointer;
display: block;
height: 18px;
overflow: hidden;
position: absolute;
top: 12px;
}
.slideshow-controller a.active {
background-position: 0 18px;
}
.slideshow-controller li {
list-style: none;
}
.slideshow-controller li.first a {
background-image: url(/images/slideshow/controller-first.gif);
left: 33px;
width: 19px;
}
.slideshow-controller li.last a {
background-image: url(/images/slideshow/controller-last.gif);
left: 186px;
width: 19px;
}
.slideshow-controller li.next a {
background-image: url(/images/slideshow/controller-next.gif);
left: 145px;
width: 28px;
}
.slideshow-controller li.pause a {
background-image: url(/images/slideshow/controller-pause.gif);
left: 109px;
width: 20px;
}
.slideshow-controller li.play a {
background-position: 20px 0;
}
.slideshow-controller li.play a.active {
background-position: 20px 18px;
}
.slideshow-controller li.prev a {
background-image: url(/images/slideshow/controller-prev.gif);
left: 65px;
width: 28px;
}
/**
HTML:
Notes:
Customize the hidden / visible classes to affect the loader animation.
*/
.slideshow-loader {
height: 28px;
right: 0;
position: absolute;
top: 0;
width: 28px;
z-index: 10001;
}
.slideshow-loader-hidden {
opacity: 0;
}
.slideshow-loader-visible {
opacity: 1;
}
/**
HTML:
Notes:
Customize the active / inactive classes to affect the thumbnails animation.
Use the !important keyword to override FX without affecting performance.
*/
.slideshow-thumbnails {
bottom: -65px;
height: 65px;
left: 0;
position: absolute;
width: 100%;
}
.slideshow-thumbnails * {
margin: 0;
padding: 0;
}
.slideshow-thumbnails ul {
height: 65px;
left: 0;
position: absolute;
top: 0;
width: 10000px;
}
.slideshow-thumbnails li {
float: left;
list-style: none;
margin: 5px 5px 5px 0;
position: relative;
}
.slideshow-thumbnails a {
display: block;
float: left;
padding: 5px;
position: relative;
}
.slideshow-thumbnails a:hover {
background-color: #FF9 !important;
opacity: 1 !important;
}
.slideshow-thumbnails img {
display: block;
}
.slideshow-thumbnails-active {
background-color: #9FF;
opacity: 1;
}
.slideshow-thumbnails-inactive {
background-color: #FFF;
opacity: .5;
}