html { height: 100% }
      body { height: 100%; margin: 0; padding: 0; background: #b0bbae; }
      .page,
      header {
        margin: 20px auto;
        max-width: 1208px;
        width: 100%;
        position: relative;
      }
      .content h1,
      header h1 {
        font-family: 'Droid Serif', serif;
        color: #6e5166;
        padding: 0;
        margin: 0 0 0 14px;
        display: inline-block;
        font-size: 2.4em;
      }
      .content h1 {
        display: block;
      }
      header div.headline {
        margin-right: 240px;
        min-height: 75px;
      }

      header div.contact {
        display: block;
        margin:0;
        width: 220px;
        position: absolute;
        right: 20px;
        top: 0;
      }
      header h2 {
        font-family: 'Shadows Into Light', cursive;
        color: #6e5166;
        padding: 0;
        margin: 0 0 0 10px;
        display: block;
        font-size: 1.5em;
      }
       header h3 {
        font-family: 'Shadows Into Light', cursive;
        color: #6e5166;
        padding: 0;
        margin: 0;
        font-size: 1.8em;
        display: block;
        text-align: center;
      }
      header h4 {
        text-align: center;
        font-family: 'Droid Serif', serif;
        color: #6e5166;
        padding: 0;
        margin: 0 ;
        display: block;
        font-size: .8em;
      }

      @media (max-width: 620px) {
         header div.headline {
            margin-right: 0;
            min-height: 75px;
            text-align: center;
          }
        header div.contact {
          position: relative;
          width: auto;
          top: auto;
          right: auto;
        }

        header h2 {
          font-size: 1.2em;
        }
      }
      header .img {
        box-sizing: border-box;
        border: 4px solid #5f6e5c;
        background: #fff;
        width: 100%;
        margin-top: 10px;
      }
      header .img img {width: 70%;}
      header ul.socialmedia {padding: 0;margin: 0 14px; float: right;display: inline-block; display: none;}
      header ul.socialmedia li {background-image: url(../images/socialmediasprite.png); background-repeat: no-repeat; width: 28px; height: 28px; display: inline-block; float: right; margin: 0 4px;background-size: auto 100%;}
      header ul.socialmedia li.facebook {background-position: 0 0;}
      header ul.socialmedia li.twitter {background-position: -35px 0;}
      header ul.socialmedia li.google {background-position: -70px 0;}
      header ul.socialmedia li.pinterest {display: none;}
      header ul.socialmedia li a {text-indent: -999999px; display: block;}
      .menu {}
      .menu ul {padding: 0;margin: 0 14px;}
      .menu ul li {display: inline-block; margin: 0 2px 0 0; padding: 10px 12px; background: #efefef; color: #5f6e5c; cursor: pointer;}
      .menu ul li.active {background: #fff; color: #6e5166;}
      .content {background: #fff; padding:20px 30px; max-width: 1148px; display: none;}
      .content.active {display: block;}
      .content h1 {margin-left: 0; font-size: 1.8em; padding-bottom: 3px;}
      .content p {font-family: 'Droid Serif', serif; font-size: 0.9rem; line-height: 1.4rem;}

      .content p label {
        width: 160px;
        display: inline-block;
      }

      .form p label {width: 100px; display: inline-block; vertical-align: top; padding-top: 3px;}
      .form p input {width: 100%; max-width: 300px; display: inline-block; border: 1px solid #5f6e5c; padding: 5px; font-size: 14px}
      .form p select {width: 100%; max-width: 312px; display: inline-block; border: 1px solid #5f6e5c; padding: 5px; font-size: 14px}
      .form p textarea {width: 100%; max-width: 300px; height: 90px; display: inline-block; border: 1px solid #5f6e5c; padding: 5px; font-size: 14px}
      .form p input[type="button"] {background: #6e5166; color: #fff; margin-left: 105px; width: 100px;}
      .form p label.errorMsg {display: none;}
      .form p.error label {color: #cc0000;}
      .form p.error input,
      .form p.error textarea {border-color: #cc0000;}
      .form p.error label.errorMsg {display: inline-block; color: #cc0000; width: 260px; margin-left: 10px;}

      #information-article img,
      #bookings-article img {float: right; border: 4px solid #5f6e5c;}
      #information-article > div {width: 50%;}

      .content p a {color: #6e5166;}

      .content .panel.left {float: left;}
      .content .panel.right {float: right;}
      .content .panel.cols-2 {width: 45%;}
      .content .panel.cols-2.main {width: 50%;}

      .content .images a > img {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
      }
      .content .cols-1 .images a {
        padding: 3px;
      }
      .content .cols-1 .images a > img {
        max-height: 14rem;
        max-width: 100%;
      }
      .content .cols-2 .images a > img {
        width: 100%;
      }
      .content .map {
        width: 100%;
        min-width: 200px;
        max-width: 800px;
        height: 400px;
        float: right;
        margin-left: 20px;
        margin-bottom: 20px;
        border: 3px solid #5f6e5c;
      }

      .content .cols-2 blockquote {
        width: 90%;
        padding: 5%;
      }
/*
#gallery .images a > img,
.roomsImagePanel > a > img,
.imagePanelRight > .images > a > img,
.image-set a > img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

#gallery .images a > img,
.image-set a > img {
  max-height: 14rem;
  max-width: 100%;
}
#gallery .images a {
  padding: 3px;
}*/


     /* .roomsImagePanel,
      .imagePanelRight,
      #contactPanelImages {
        min-width: 335px;
        width: 45%;
        float:right;
      }
      .homeTextPanel {
        width: 50%;
      }
      .roomsTextPanel {
        min-width: 335px;
        width: 50%;
        padding-left: 50%;
      }

      .roomsImagePanel {
        float:left;
        padding-top: 20px;
        padding-right: 20px;
      }
      .roomsImagePanel img,
      .imagePanelRight img {
        width: 100%;
      }
      .imagePanelRight blockquote {
        width: 90%;
        padding: 5%;
      }*/


@media (max-width: 796px) {

  .menu ul li {display: block;}
  .content .panel.left {float: none;}
  .content .panel.right {float: none;}
  .content .panel.cols-2 {width: 100%; max-width: 100%; min-width: 100px;}
  .content .panel.cols-2.main {width: 100%; max-width: 100%; min-width: 100px;}
  .content .cols-2 .images a > img {width: auto; max-height: 200px; max-width: 100%;}

/*  .content .panel.main.cols-2,
  .roomsTextPanel {
    padding-left: 0;
    width: 100%;
    max-width: 100%;
    min-width: 100px;
  }
  .roomsImagePanel,
  .imagePanelRight {
    max-width: 100%;
    min-width: 10px;
    width: auto;
    float: none;
  }
  .roomsImagePanel {
    height: 200px;
  }
  .roomsImagePanel img,
  .imagePanelRight img {
    width: auto;
    max-height: 200px;
    max-width: 100%;
  }
  .homeTextPanel {
    width: auto;
  }*/
}
header .img div {
  position: relative;
}
blockquote {
  font-family: 'Shadows Into Light', cursive;
  color: #6e5166;
  font-size: 1.3em;
  margin: 0;
  padding: 5% 5% 0 5%;
  background: #fff;
  width: 70%;
}
header blockquote {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
}

blockquote footer {
  font-family: 'Droid Serif', serif;
  font-size: 0.9rem;
  line-height: 1.4rem;
  text-align: right;
}

      .content .quotes.rotate blockquote,
      .content .images.rotate > a {
        display: none;
      }

      .content .quotes.rotate blockquote.visible,
      .content .images.rotate > a.visible {
        display: block;
      }


.ui-datepicker {
  font-size: .8em;
}