/* ********************************************
 * General rules
 * ********************************************/
body, div, p {
  border: none;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #2681b8;
}

hr {
  width: 50%;
  border: solid 1px #fec872;
}

/* ********************************************
 * Look and feel
 * ********************************************/
h1.easylet
{ margin: 0px;
  padding: 0.3em 0px 0px 0px;
  border: none;
  color: #1a1e89;
  font-family: Myriad, Arial, Helvetica, sans-serif;
}
span.easylet
{ font-weight: bolder;
}
span.villas
{ font-weight: normal;
}

h2.page-title
{ margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

h3.section-title
{ margin: 0px;
  padding: 0.5em 0em 0em 0.2em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

h4.subsection-title
{ margin: 0px;
  padding: 0.5em 0em 0em 0.2em;
  font-family: Arial, Helvetica, sans-serif;
}

h5.link-above
{ margin: 0px 0px 0px 0px;
  padding: 0.4em 0px 0.4em 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: +0.8em;
}

h5.link-current
{ margin: 0px 0px 0px 0px;
  padding: 0.4em 0px 0.4em 4px;
  vertical-align: middle;
  background: url("images/bar-curve-bottom.jpg") no-repeat bottom right;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: +0.8em;
}

h5.link-below
{ margin: 0px 0px 0px 0px;
  padding: 0.4em 0px 0.4em 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: +0.8em;
}

.body-copy
{ font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: +0.7em;
  margin: 0px;
}
p.body-copy
{ padding: 0.5em 0.5em 0.5em 0.5em;
}
div.body-copy-center
{ text-align: center;
  padding: 0.5em 0.5em 0.5em 0.5em;
}
ul.body-copy
{ text-align: left;
  margin: 0px 0px 0px 4em;
  padding: 0px;
}

p.footer-copy
{ padding: 40px 0px 1em 0px;
  color: #1a1e89;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: +0.7em;
  font-style: italic;
}

p.address
{ padding: 0.5em 0.5em 0.5em 0.5em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: +0.7em;
  font-style: italic;
}

p.note
{ padding: 0.5em 0.5em 0.5em 0.5em;
  color: #666666;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: +0.7em;
  font-style: italic;
}

a.nav-link
{ text-decoration: none;
  font-weight: bold;
}
a.nav-link:link
{ color: #ffffff;
}
a.nav-link:visited
{ color: #ffffff;
}
a.nav-link:hover
{ color: #fec872;
}
a.nav-link:active
{ color: #fec872;
}

a.cur-nav-link
{ text-decoration: none;
  font-weight: bold;
}
a.cur-nav-link:link
{ color: #1a1e89;
}
a.cur-nav-link:visited
{ color: #1a1e89;
}
a.cur-nav-link:hover
{ color: #2681b8;
}
a.cur-nav-link:active
{ color: #2681b8;
}


td.offers,
td.highlight
{ border: solid 5px;
  padding: 0.4em;
  text-align: center;
  vertical-align: top;
}
td.offers
{	border-color: #fec872;
}
td.highlight
{ border-color: #2681b8; 
}


.important
{ font-weight: bold;
  text-transform: uppercase;
}

table#services tr td
{	height: 1.8em;
}

#climate
{ width: 90%;
}
table.data
{ background: #f2faff;
  margin: 0.5em 0px 0.5em 4%;
  border-collapse: collapse;
  border-style: solid;
  border-color: #000000;
  border-width: 2px 2px 2px 2px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.7em;
}
tr.data
{
}
th.data
{ background: #ec7c2c;
  color: #fffaf1;
  border-style: solid;
  border-color: #666666;
  border-width: 1px 1px 1px 1px;
  padding: 0.1em 0.2em 0.1em 0.2em;
  font-family: Arial, Helvetica, sans-serif;
}
td.keydata
{ color: #ec7c2c;
  font-weight: bold;
  border-style: solid;
  border-color: #666666;
  border-width: 1px 1px 1px 1px;
  padding: 0.1em 0.2em 0.1em 0.2em;
}
td.data
{ text-align: center;
  border-style: solid;
  border-color: #666666;
  border-width: 1px 1px 1px 1px;
  padding: 0.1em 0.2em 0.1em 0.2em;
}

table.dates
{ background: #f2faff;
  margin: 0.5em 0px 0.5em 1%;
  border-style: solid;
  border-color: #000000;
  border-width: 2px 2px 2px 2px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.7em;
  text-align: center;
}
th.wkday
{ width: 2em;
  background: #ec7c2c;
  color: #fffaf1;
  font-family: Arial, Helvetica, sans-serif;
}
th.wkend
{ width: 2em;
  color: #ec7c2c;
  font-family: Arial, Helvetica, sans-serif;
}
td.month
{ color: #ec7c2c;
  text-align: left;
  padding: 0.1em 0.2em 0.1em 0.2em;
  font-family: Arial, Helvetica, sans-serif;
}
#datekey
{	width: 80%;
}
#date-a
{ background: #aaffaa;
  border-style: solid;
  border-width: 0.5em 0px 0px 0px;
  padding: 0.1em 0.2em 0.1em 0.2em;
  width: 33%;
}
#date-q
{ background: #ffffaa;
  border-style: solid;
  border-width: 0.5em 0px 0px 0px;
  padding: 0.1em 0.2em 0.1em 0.2em;
  width: 33%;
}
#date-u
{ background: #ffaaaa;
  border-style: solid;
  border-width: 0.5em 0px 0px 0px;
  padding: 0.1em 0.2em 0.1em 0.2em;
  width: 33%;
}

div.feature
{ background: url("images/photos/index/montage.jpg") #1a1e89;
  margin: 0px 3em 0px 3em;
  border-width: 3px;
  border-style: solid;
  border-color: #1a1e89;
  height: 20em;
  text-align: center;
}

img.link-img
{ border: none;
}

/* ********************************************
 * Booking form layout clauses
 * ********************************************/

.form-missing {
	vertical-algn: top;
	color: #ff0000;
	font-weight: bold;
}
.form-oklabel {
	vertical-algn: top;
}

table.booking-form {
	border: 2px solid #1a1e89;
	max-width: 40em;
}
td.form-heading {
	padding: 0.2em 0.5em 0em 1.5em;
}
td.form-text {
	vertical-algn: top;
	text-align: right;
	padding: 0.2em 0.5em 0.2em 1.5em;
	width: 15em;
}
td.form-input {
	vertical-algn: top;
	text-align: left;
	padding: 0.2em 1.5em 0.2em 0.5em;
}

/* ********************************************
 * Non-div layout clauses
 * ********************************************/

.layout
{ border: none;
  padding: none;
  margin: none;
}
table.layout
{ border-collapse: collapse;
}

table.layout td {
	vertical-align: top;
}

/*
 * Logo image
 */
#logo-small
{ padding: 0.3em 0px 0px 0px;
}

/*
 * Floating images
 */
img.bordered {
  padding: 6px;
  background: #1a1e89;
}
img.inline-right-top,
img.inline-right,
img.inline-left-top,
img.inline-left
{ position: relative;
  border-width: 16px 16px 16px 16px;
  border-color: #f2faff;
  border-style: solid;
}

img.inline-right-top,
img.inline-right
{ float: right;
  border-right: 0px;
  margin-left: 0.5em;
}
img.inline-right-top
{ border-top: 0px;
}
img.inline-right
{
}

img.inline-left-top,
img.inline-left
{ float: left;
  border-left: 0px;
  margin-right: 0.5em;
}
img.inline-left-top
{ border-top: 0px;
}
img.inline-left
{
}

/* ********************************************
 * Page layout using divs
 * ********************************************/

/*
 * Layout of main page elements
 */
#main-container
{
}

/*
 * Left column
 */
#left-container
{ width: 10em;
/*  height: 100%; */
  position: absolute;
  left: 0px;
  top: 0px;
}

#left-top
{ background: url("images/bar-curve-top.jpg") no-repeat bottom right;
}
#left-top-inner
{ height: 120px;
  text-align: center;
}
#left-main
{ background: url("images/blueline-horizontal.jpg") repeat-x top left;
  padding-top: 5px; /* This is to avoid the blue line */
}
#left-bottom
{
}

/*
 * Main (content) column
 */
#content-container
{ background: url("images/blueline-vertical.jpg") repeat-y top left #f2faff;
  position: relative;
  left: 10em;
  top: 0px;
  margin-right: 10em;
}

#content-top
{ background: url("images/bar-horizontal.jpg") repeat-x bottom left;
  position: relative;
  top: 0px;
  left: 5px; /* to avoid the blue line */
  margin-right: 5px; /* to offset the positioning */
}
#content-top-inner
{ height: 120px;
  padding: 0px 2em 0px 1em;
}

#content-main
{ background: url("images/blueline-horizontal.jpg") repeat-x top left;
  position: relative;
  top: 0px;
  left: 5px; /* to avoid the blue line */
  margin-right: 5px; /* to offset the positioning */
}
#content-main-inner {
	position: relative;
	top: 2em;
	left: 1em;
	margin-right: 2em; /* to offset the positioning and for layout */
	margin-bottom: 2em; /* to offset the positioning */
	max-width: 40em; /* to set the maximum content width, and with an expression to do the same in IE */
	width: expression(document.body.clientWidth > (840 * (parseInt(document.body.currentStyle.fontSize) / 12)) ?
    	"40em":
    	"auto" );
}

#content-bottom
{ background: url("images/blueness-fade-bottom.jpg") repeat-x bottom;
  padding: 0px 0px 0px 0px;
}
#content-bottom-fader
{ background: url("images/blueline-fade-bottom.jpg") no-repeat bottom left;
}
#content-bottom-inner
{ height: 50px;
  max-width: 40em;
  text-align: right;
}


/*
 * Contained divs layout
 */
#title-bar
{ margin-bottom: 1em;
}

#body
{ background: #f2faff;
  padding: 0px 0px 1em 0px;
}


#links-container
{
}

#links-spacer-top
{ height: 2em;
  background: url("images/bar-vertical.jpg") repeat-y top right;
}

#links
{ padding-bottom: 2em;
  background: url("images/link-blue-fade.jpg") repeat-y top left;
}

#links-above
{ padding-top: 2em;
  background: url("images/bar-vertical.jpg") repeat-y top right;
}

#link-current
{ margin-left: 10px;
  background: url("images/link-current.jpg") repeat;
}

#links-spacer-bottom
{ height: 1em;
}

#photo-main
{ text-align: center;
}
#photo-main img
{ margin: 10px 0px;
}
#photo-thumbs
{
}
img.gallery-thumb {
	cursor: hand;
	cursor: pointer;
}

div.wrapper
{
}

/*
 * Utility div to perform old-style clearing
 * negative margin is to ensure that no browser (ie. IE) displays
 * the div when it shouldn't ( {height: 0px} doesn't work in IE)
 */
div.clear
{ clear: both;
  font-size: xx-small;
  height: 20px;
  margin: -20px 0px 0px 0px;
}