@charset "utf-8";
/* CSS Document */

/*@import url("/fonts/stylesheet.css");
@import url("/css/form.css");
@import url("/css/nav.css");
@import url("/css/datatable.css");
@import url("/css/calendar.css");
@import url("/css/gallery.css");*/



@font-face {
    font-family: 'ChaletParisNineteenSixty';
    src: url('../fonts/chalet-parisnineteensixty-webfont.eot');
    src: url('../fonts/chalet-parisnineteensixty-webfont.eot?iefix') format('eot'),
         url('../fonts/chalet-parisnineteensixty-webfont.woff') format('woff'),
         url('../fonts/chalet-parisnineteensixty-webfont.ttf') format('truetype');
         /*url('/fonts/chalet-parisnineteensixty-webfont.svg#webfont05VxYvxi') format('svg');*/
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ChaletLondonNineteenSixty';
    src: url('../fonts/chalet-londonnineteensixty-webfont.eot');
    src: url('../fonts/chalet-londonnineteensixty-webfont.eot?iefix') format('eot'),
         url('../fonts/chalet-londonnineteensixty-webfont.woff') format('woff'),
         url('../fonts/chalet-londonnineteensixty-webfont.ttf') format('truetype');
         /*url('/fonts/chalet-londonnineteensixty-webfont.svg#webfontz7XilZvW') format('svg');*/
    font-weight: normal;
    font-style: normal;

}


body {
  font-family:"ChaletLondonNineteenSixty", Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#848689;
  background:#FFFFFF url(../images/bg.png) top repeat-x;
  margin:0px;
}

.trans {
  -webkit-transition: background-color 150ms ease-out; /* Saf3.2+, Chrome */
  -moz-transition: background-color 150ms ease-out; /* FF3.7+ */
  -o-transition: background-color 150ms ease-out; /* Opera 10.5+ */
  transition: background-color 150ms ease-out; /* futureproofing */
}
.left {
  float:left;
}
.right {
  float:right;
  text-align:right;
}
.hr {
  clear:both;
  margin-bottom:20px;
  border-bottom:#CCCCCC solid 1px;
}

/*** CONTAINERS ***/

#body_container {
  clear:both;
  margin:0px auto;
  min-height:960px;
  background:url(../images/shad.png) top center no-repeat;
}

#header_container {
  clear:both;
  margin:0px auto;
  max-width:1030px;
  height:auto;
}
#nav_container {
  clear:both;
  margin:0px auto;
  max-width:1030px;
  height:auto;
  background:#FFFFFF;
}
#content_container {
  clear:both;
  margin:0px auto;
  max-width:1030px;
}
#footer_container {
  clear:both;
  margin:0px auto;
  max-width:1030px;
}
#baseline_container {
  z-index:99;
  position:fixed;
  bottom:0px;
  left: 0px;
  right:0px;
}

/*** BASELINE ***/

#baseline {
  clear:both;
  margin:0px auto;
  width:1030px;
}

/*** HEADER ***/

#header {
  clear:both;
  margin:0px auto;
  width:100%;
  height:auto;
  background:#fff;
  overflow-y: hidden;
}
#header_left {
  display:block;
  float:left;
  width:273px;
  height:146px;
  background:url(../images/logo.png) bottom no-repeat;
}
#header_right {
  float:right;
  width:279px;
  height:146px;
}

@media screen and (max-width: 767px) {
  #header_left {
    float:left;
    width:50%;
    background-size: auto 100%;
    height: 146px;
    min-height: 100px;
    background-position: top;
  }
  #header_right {
    float:left;
    padding-top:15px;
    width: 50%;
    text-align: center;
    height: auto;
  }
  #header_right img {
    max-width: 100%;
  }
}
@media screen and (max-width: 490px) {
  #header_left {
    height: auto;
    background-size: 100%;
  }
}

/*** NAV (The rest of nav styling is handled in nav.css) ***/

#nav {
  padding:2px 0px 6px 0px;
  max-width:1030px;
  height:28px;
  line-height:28px;
  font-size:14px;
  color:#848689;
}
#nav ul {
  width:100%;
  height:100%;
}
#nav .left {
  float:left;
  width:2px;
  line-height:28px;
  font-weight:bold;
}
#nav a, #nav .on {
  display:block;
  float:left;
  margin:0px 10px 0px 10px;
  padding:0px 10px 0px 10px;
  line-height:28px;
  font-weight:bold;
  color:#848689;
  text-decoration:none;
  text-shadow:none;
  background-color:#FFFFFF;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}
#nav a:hover, #nav .on, #nav ul li:hover a {
  color:#FFFFFF;
  text-decoration:none;
  text-shadow:none;
  background-color:#2dc1d6;
}



/*** SLIDESHOW ***/

#slideshow_container {
  clear:both;
  margin:0px auto;
  max-width:1030px;
  height:320px;
  background:#FFFFFF;
  overflow:hidden;
}
@media screen and (max-width: 767px) {
  #slideshow_container {
    display: none;
  }
}
#slideshow {
  clear:both;
  margin:0px auto;
  width:1030px;
  height:320px;
  background:url(/images/lightbox/loading.gif) center center no-repeat;
  overflow:hidden;
}
#slideshow #slides {
  height:320px;
}
#slideshow #slides .slide {
  float:left;
  width:1030px;
  height:320px;
  background-repeat:no-repeat;
}

#crossfade_container #gallery_wrap {
  clear:both;
  margin:0px auto;
  max-width:1030px;
  height:320px;
  background:#FFFFFF;
}
@media screen and (max-width: 767px) {
  #crossfade_container {
    /*display: none;*/
  }
}
#crossfade_container #gallery_wrap .loading {
  position:absolute;
  max-width:1030px;
  height:320px;
  background:url(/images/lightbox/loading.gif) center center no-repeat;
}
#crossfade_container #gallery_wrap .gallery {
  max-width:1030px;
  height:320px;
  overflow:hidden;
}
#crossfade_container #gallery_wrap .gallery a {
  dispaly:block;
}
#crossfade_container #gallery_wrap .gallery img {
  border:none;
}
.swGallery {
  overflow: hidden;
  position: relative;
}
.swGallery .slideElement {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  margin: 0px !important;
  background-color:#FFFFFF;
}

/*** CONTENT ***/

#content, #wysiwyg {
  clear:both;
  margin:0px auto;
  padding:18px 36px 36px 36px;
  width:auto;
  max-width: 100%;
  color:#848689;
  /*text-shadow:#FFFFFF 1px 1px 1px;*/
  background:#FFFFFF;
}
#content ul, #wysiwyg ul {
  margin:0px;
  
}
#content li, #wysiwyg li {
  margin:0px;
  padding:0px;
  
}
#content .aqua, #wysiwyg .aqua {
  color:#2dc1d6;
}
#content h1, #wysiwyg h1 {
  margin:0px 0px 10px 0px;
  font-family:"ChaletParisNineteenSixty", Arial, Helvetica, sans-serif;
  font-size:48px;
  color:#263976;
  letter-spacing:-1px;
}
#content h2, #wysiwyg h2 {
  margin:0px 0px 10px 0px;
  font-family:"ChaletParisNineteenSixty", Arial, Helvetica, sans-serif;
  font-size:32px;
  color:#263976;
  letter-spacing:-1px;
}
#content h3, #wysiwyg h3 {
  margin:0px 0px 10px 0px;
  font-size:24px;
  color:#263976;
  letter-spacing:normal;
}
#content p, #wysiwyg p {
  margin:0px 0px 10px 0px;
  line-height:18px;
}
#content small, #wysiwyg small {
  
}
#content a, #wysiwyg a {
  color:#263976;
  text-decoration:underline;
}
#content .left_col {
  float:left;
  padding:20px 0px 0px 0px;
  max-width:600px;
  width: auto;
}
#content .right_col {
  float:right;
  max-width:344px;
  width: auto;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #content .right_col {
    float:none;
    width: 100%;
    max-width: 100%;
  }
  #content .right_col * {
    float:none;
    text-align: center;
  }
  #content .right_col div.right br {
    display: none;
  }
  #content .right_col div.right a {
    display: inline-block;
  }
  #content .right_col div.right {
    padding-top: 30px;
    float:none;
    text-align: center;
  }
  #content .left_col {
    float:none;
    width: 100%;
    max-width: 100%;
  }
  #content .left_col * {
    float:none;
    text-align: center;
  }
} 
.booking_frame {
  margin-left:-36px;
}
.booking_frame #main #content {
  padding-right:0px;
}
.list_files {
  padding:0px;
  list-style:none;
}
.list_files li {
  margin-bottom:8px;
  font-size:14px;
}
.list_files img {
  padding-right:6px;
}

/*** EVENTS ***/

.event {
  margin:0px 0px 20px 0px;
}
.event .heading {
  margin:0px;
  font-size:18px;
  color:#263976;
  letter-spacing:normal;
}
.event .more {
  display:block;
}

/*** FOOTER ***/

#footer {
  clear:both;
  margin:0px auto;
  max-width:1030px;
  
}
#footer #footer_top {
  padding:0px 24px 0px 24px;
  max-width:982px;
  line-height:48px;
  font-size:14px;
  color:#FFFFFF;
  background:#263976;
}

#footer #footer_top .left {
  float:left;
  line-height:48px;
}
#footer #footer_top a {
  display:block;
  float:left;
  margin:0px 10px 0px 10px;
  padding:0px 10px 0px 10px;
  line-height:48px;
  color:#FFFFFF;
  text-decoration:none;
}

@media screen and (max-width: 767px) {
  #footer #footer_top a {
    float:none;
    text-align: center;
    line-height: 30px;
  }
  #footer #footer_top div.left {
    display: none;
  }
}
/*#footer #footer_top .btn_facebook {
  padding:0px 36px 0px 20px;
  background:url(/images/icon_facebook.png) right center no-repeat;
}*/
#footer #footer_top .btn_facebook {
  margin:0px 10px 0px 10px;
  padding:8px 10px 0px 10px;
}
#footer #footer_top a:hover {
  color:#FFFFFF;
  text-decoration:underline;
}
#footer #footer_bottom {
  padding:10px 20px 10px 20px;
  max-width:990px;
  height:60px;
}
#footer #footer_bottom #ionline {
  float:right;
  width:274px;
  height:28px;
  line-height:28px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#c2c4c6;
  text-align:left;
  text-decoration:none;
  background:url(../images/ionline_logo.png) right center no-repeat;
}

div.apartment {
  float:left;
}

div.contact-details {
  float:right;
  max-width: 400px;
}

@media screen and (max-width: 767px) {
  #footer #footer_bottom div.left {
    float:none;
    width:100%;
    text-align: center;
    display: inline-block;
  }
  #footer #footer_bottom #ionline {
    width: 80%;
    float:none;
    margin: 0px auto;
    text-align: left;
    display: block;
    background-position: right;
  }
  div.contact-details {
    float:none;
    max-width: 100%;
  }

}


/* EXTRA RESPONSIVE CLASSES */
@media screen and (max-width: 767px) {
  div.apartment {
    float:none;
    padding-top: 50px;
  }
  .form.half {
    width: 100%;
  }
  img {
    max-width: 100%;
  }

  #content, #wysiwyg {
    padding: 18px 10px 36px;
  }

  #content .right_col {
    float: none;
    width: 100%;
    max-width: 100%;
  }
  #content .right_col * {
    float:none;
    text-align: center;
  }

  #content .right_col div.right {
    float: none;
  }

  #content .left_col {
    float: none;
    width: 100%;
    max-width: 100%;
  }
  #content .left_col * {
    float:none;
    text-align: center;
  }
  a.travelreel {
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  
}