/**
   *  stylesheet definitions for familienhotels.de - frontend
   *
   *  line endings: unix; encoding: utf-8; BOM: off; tabs: no; tab width: 2
   *
   *  @copyright  (c) Profi IT GmbH
   *  @author   tommy(at)profi(dot)it
   *  @since    20.08.2007 19:49:28
   */

  /* common elements */
  body {
    color: #786b50;
    background-color: #fff;
    font: 70%/120% Arial, Helvetica, Tahoma, sans-serif;
  }

  a {
    color: #c30;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  a.c786b50 {
    color: #786b50;
  }

  input, select, textarea {
    font: 100% Arial, Helvetica, Tahoma, sans-serif;
  }

  div.clear {
    clear: both;
    height: 0px;
    font-size: 0px;
    line-height: 0px;
  }

  /* modal elements */
  #modal_overlay {
    background-color: #000;
  }

  #modal_container {
    padding: 5px;
    background-color: #fff;
    border: 1px solid #666;
    overflow: auto;
    font-family:"Lucida Grande",Verdana;
    font-size: 12px;
    color: #333;
    text-align: left;
  }

  #modal_container.loading-indicator {
    border: none;
    background: #fff url('../../images/icons/loading-big.gif') center 2em no-repeat;
    padding: 2em;
    padding-top: 6em;
    text-align: center;
    width: 300px;
    font-size: inherit;
    color: inherit;
  }

  #ajax-errors {
    padding: 0.5em;
    margin: 0.5em 0;
    background-color: #fff;
  }

  /* framework elements */
  #wrap {
    /* for debug purposes only
    border-top: 10px solid #00f;
    */
    position: absolute;
    /*
    width: 100%;
    max-width: 998px;
    */
    width: 998px;
    left: 50%;
    margin-left: -499px;
    background: url('../../images/frontend/wrap-bg.png') right top no-repeat;
  }

    /* left part of layout (logo, menus, fulltext search form etc.) */
    #left {
      /* for debug purposes only
      border-top: 10px solid #f00;
      */
      float: left;
      margin-right: 10px;
      padding-top: 30px;
      width: 204px;
    }

      div#introduction {
        font-size: 1.2em;
        line-height: 1.2em;
        padding-top: .8em;
      }

      div.menu-container {
        font-size: 110%;
      }

      div.menu-container h2 {
        background: url('../../images/frontend/menu-header-bg.png') 3px center no-repeat;
        border-bottom: 1px solid #ce3d3d; 
        color: #cc4133;
        padding: 5px 0;
        padding-left: 22px;
        margin: 2em 0 0.5em 0;
        font-weight: bold;
        font-size: 1em;
        line-height: 1.5em;
      }

      div.menu-container ul {
        margin-left: 22px;
        /*list-style-image: url('../images/menu-item-arrow.png');*/
      }

      div.menu-container ul li {
        background: url('../../images/frontend/menu-item-arrow.png') left center no-repeat;
        padding-left: 8px;
        margin: 0.5em 0;
      }

      div.menu-container ul li a {
        color: #786b50;
      }

      div.menu-container ul.article-categories {
        
      }

      div.menu-container ul.article-categories li {
        background: #f5f5f7 url('../../images/frontend/menu-item-offer-bg.png') left top no-repeat;
        margin: 0;
        margin-bottom: 1px;
        padding: 0;
        padding: 3px 5px;
        /*
        border: 1px solid #e9eaeb;
        border-collapse: collapse;
        */
        border-top: 1px solid #f9fafb;
        border-right: 1px solid #e9eaeb;
        border-bottom: 1px solid #e9eaeb;
        border-left: 1px solid #f9fafb;
      }

      div.menu-container ul.article-categories li img {
        vertical-align: middle;
        margin-right: 5px;
      }

    /* right part of layout (header container, content container with content and contextual sidebar) */
    #right {
      /* for debug purposes only
      border-top: 10px solid #0f0;
      */
      /*float: right;*/
      float: left;
      width: 784px;
    }

      /* header container (header menu, header image, advertisements, breadcrumb) */
      #header-container ul.menu-header {
        margin-top: 20px;
      }

      #header-container ul.menu-header li {
        display: inline;
        line-height: 200%;
        border-right: 1px solid #786b50;
        padding: 0 0.5em;
      }

      #header-container ul.menu-header li.last-item {
        border-right: none;
      }

        #header {
          position: relative;
        }

          #header-image {
            float: left;
          }

          /*
          #header-advertisements {
            position: absolute;
            width: 277px;
            height: 239px;
            top: 0px;
            left: 437px;
            color: #fff;
            padding-left: 15px 10px 15px 15px;
            padding-right: 10px;
            background-color: #009946;
            font-size: 120%;
          }
          */

          #header-advertisements {
            float: left;
            width: 302px;
            width: 282px;
            /*
            height: 239px;
            height: 209px;
            */
            min-height: 209px;
            padding: 15px 5px 15px 15px;
            background-color: #0066a0;
            color: #fff;
            font-size: 120%;
          }

          #header-advertisements h3 {
            font-weight: bold;
            font-size: 120%;
            /*margin-top: 0.6em;*/
            margin-bottom: 0.5em;
          }

          #header-advertisements h4,
          #header-advertisements h5 {
            font-weight: bold;
            margin-bottom: 0.5em;
          }

          #header-advertisements h4 {
            font-size: 110%;
          }

          #header-advertisements ul {
            border-bottom: 1px solid #fff;
            padding-bottom: 10px;
            margin-bottom: 10px;
          }

          #header-advertisements ul li {
            list-style-image: url('../../images/frontend/ico-arrow-ffffff.gif');
            line-height: 150%;
            margin-left: 25%;
          }

          #header-advertisements dt {
            float: left;
            margin-right: 0.5em;
          }

          #header-advertisements dd {
            font-size: 90%;
          }

          #header-advertisements a {
            color: #fff;
          }

        #breadcrumb {
          /* for debug purposes only
          border: 1px solid #f0f;
          */
          clear: both;
          position: relative;
          z-index: 2;
        }

        #breadcrumb.loading {
          background: transparent url('../../images/icons/loading-small.gif') 530px center no-repeat;
        }

        #breadcrumb p {
          display: inline;
          line-height: 200%;
          margin-right: 0.25em;
        }

        #breadcrumb ul {
          display: inline;
        }

        #breadcrumb ul li {
          display: inline;
          line-height: 200%;
        }

        #breadcrumb ul li:after {
          content: " \00BB";
        }

        #breadcrumb ul li.last-item:after {
          content: "";
        }

      /* content container (content, content-sidebar) */
      #content-container {
        /* for debug purposes only
        border-top: 10px solid #f00;
        */
        /*clear: both;*/
      }

        #content {
          /* for debug purposes only
          border-top: 5px solid #ff0;
          */
          float: left;
          width: 539px;
          margin-right: 10px;
        }

          /* loading indicator on top of content container
          #loading-indicator {
            background: url('../../images/icons/loading-small.gif') left center no-repeat;
            padding: 0.5em;
            padding-left: 2em;
          }
          */

          div#locationtab.loading {
            background: url('../../images/icons/loading-small.gif') no-repeat 410px center;
          }

          #frm-content-search {
            margin: 0 0 5px 0;
            border-width: 3px 1px 3px 1px;
            border-style: solid;
            background: #fffbda;
            float: left;
            width: 537px;
          }

            #frm-content-search #frm-content-search-content {
              padding: 5px;
            }

          #frm-content-search.c009946 {
            border-color: #009946;
          }

          #frm-content-search.c02686d {
            border-color: #02686d;
          }

          #frm-content-search.c0066a0 {
            border-color: #0066a0;
          }

            #frm-content-search form select {
              width: 171px;
              color: #786b50;
              background: #fffbda;
              border: 1px solid #b2b0b0;
              padding: 1px;
            }

          .btn-search {
            /*
            position: absolute;
            right: 35px;
            */
            display: block;
            position: relative;
            float: right;
            width: 46px;
            height: 26px;
            margin: -13px 20px 0 0;
            padding: 0 0 0 30px;
            color: #fffbda;
            font-weight: bold;
            font-style: italic;
            line-height: 21px;
          }

            #frm-content-search .information {
              line-height: 1em;
              padding: 5px;
            }

            #frm-content-search #filter_facility_dropdown {
              width: 347px;
            }

            #frm-content-search #filter_accommodation_type_dropdown,
            #frm-content-search #filter_stars_dropdown,
            #frm-content-search #filter_board_dropdown {
              /*width: 187px;*/
              width: 160px;
            }
  

            #frm-content-search #filter_facility_dropdown,
            #frm-content-search #filter_accommodation_type_dropdown,
            #frm-content-search #filter_stars_dropdown,
            #frm-content-search #filter_board_dropdown {
              position: absolute;
              background: #fffbda;
              z-index: 100;
              padding: 5px;
              border-width: 1px;
              border-style: solid;
              border-color: #b2b0b0 #000000 #000000 #b2b0b0;
            }

            #frm-content-search #filter_facility_dropdown a,
            #frm-content-search #filter_accommodation_type_dropdown a,
            #frm-content-search #filter_stars_dropdown a,
            #frm-content-search #filter_board_dropdown a {
              display: block;
              line-height: 2em;
              background: transparent url('/sf/sf_admin/images/tick.png') 0.25em center no-repeat;
              padding-left: 2em;
            }

            #frm-content-search.c009946 #filter_facility_dropdown a,
            #frm-content-search.c009946 #filter_accommodation_type_dropdown a,
            #frm-content-search.c009946 #filter_stars_dropdown a,
            #frm-content-search.c009946 #filter_board_dropdown a {
              color: #009946;
            }
  
            #frm-content-search.c02686d #filter_facility_dropdown a,
            #frm-content-search.c02686d #filter_accommodation_type_dropdown a,
            #frm-content-search.c02686d #filter_stars_dropdown a,
            #frm-content-search.c02686d #filter_board_dropdown a {
              color: #02686d;
            }
  
            #frm-content-search.c0066a0 #filter_facility_dropdown a,
            #frm-content-search.c0066a0 #filter_accommodation_type_dropdown a,
            #frm-content-search.c0066a0 #filter_stars_dropdown a,
            #frm-content-search.c0066a0 #filter_board_dropdown a {
              color: #0066a0;
            }

            #frm-content-search #results-panel {
              display: inline-block;
              width: 166px;
              height: 20px;
              text-align: right;
              line-height: 20px;
              padding: 0 5px 0 0;
            }

              .c0066a0 #results-panel {
                background-color: #0066a0;
                color: #fffbda;
              }

                .c0066a0 #results-panel span {
                  background: transparent url('../../images/frontend/btn-filter-0066a0.png') right center no-repeat;
                  padding: 0 20px 0 0;
                }

              .c009946 #results-panel {
                background-color: #009946;
                color: #fffbda;
              }

                .c009946 #results-panel span {
                  background: transparent url('../../images/frontend/btn-filter-009946.png') right center no-repeat;
                  padding: 0 20px 0 0;
                }

                #results-panel a {
                  color: #fffbda;
                  font-style: italic;
                  font-weight: bold;
                }

                #results-panel a:hover {
                  text-decoration: none;
                }

            #frm-content-search #results-panel-current {
              float: right;
              width: 171px;
              text-align: right;
              line-height: 1em;
              padding: 5px 13px 5px 5px;
              font-weight: bold;
            }

          .content-header-009946 .btn-search {
            background-image: url('../../images/frontend/btn-search-009946.png');
          }

          .content-header-02686d .btn-search {
            background-image: url('../../images/frontend/btn-search-02686d.png');
          }

          .content-header-0066a0 .btn-search {
            background-image: url('../../images/frontend/btn-search-0066a0.png');
          }

          .content-header-009946 h1,
          .content-header-02686d h1,
          .content-header-0066a0 h1 {
            line-height: 1.2em;
            margin-bottom: 0.4em;
          }

          .content-header-009946 p,
          .content-header-02686d p,
          .content-header-0066a0 p {
            line-height: 1.2em;
          }

            dl.accommodation-vcard {
              margin-top: 1em;
            }

            dl.accommodation-vcard dt {
              float: left;
            }

            dl.accommodation-vcard dd {
            }

            dl.accommodation-vcard dd p {
              margin-bottom: 1em;
            }

            dl.accommodation-vcard dd ul {
              list-style-image: url('../../images/frontend/ico-arrow-cf2f2f.gif');
            }

            /*
            img#preview-image {
              float: left;
            }
            */

            /* thumbnail scroller "bars" */
            div.gallery-container {
              clear: both;
              padding-top: 0.3em;
            }

            div.thumb-scroller {
              float: right;
              width: 30px;
              height: 80px;
            }

            div.scroll-up,
            div.scroll-down {
              line-height: 40px;
            }

              .scroll-up a,
              .scroll-down a {
                display: block;
                text-indent: -9999em;
                height: 40px;
              }

              .scroll-up a {
                background: transparent url('../../images/icons/arrow_up2.png') center bottom no-repeat;
              }

              .scroll-down a {
                background: transparent url('../../images/icons/arrow_down2.png') center top no-repeat;
              }

            ul.thumbnail-list {
              height: 80px;
              width: 492px;
              overflow: hidden;
              border-top: 1px solid #cc3300;
              padding-top: 0.5em;
            }

              .thumbnail-list li {
                clear: left;
                float: left;
                width: 100%;
              }

                .thumbnail-list li div.thumb-80x80 {
                  float: left;
                  /*
                  width: 80px;
                  height: 80px;
                  overflow: hidden;
                  text-align: center;
                  */
                  margin-right: 2px;
                }

          #content h1 {
            font-size: 120%;
            font-weight: bold;
          }

          #content .cbb {
            padding: 0.5em;
          }

          #content .cbb,
          #content .cb {
            margin-bottom: 1em;
            clear: both;
          }

          .content-wrap {
            margin: 0.5em 0;
            border: 10px solid #fffbda;
            padding: 1em;
            background-color: #fffdee;
            position: relative;
          }

          .search-controls {
            clear: both;
          }

          /* content wrap with preceeding tab container */
          .content-wrap.with-tabs {
            clear: both;
            border-top: none;
            margin-top: 0px;
          }

            ul.pager-navigation {
              text-align: right;
              background-color: #f0f1f4;
              margin: 0.5em 0;
              float: left;
              width: 100%;
            }

            ul.pager-navigation li {
              display: inline;
            }

            ul.pager-navigation li.separator {
              margin-right: 0.5em;
              border-right: 2px solid #fff;
              padding-right: 0.5em;
            }

            ul.pager-navigation li img {
              vertical-align: middle;
            }

            /* accommodation list items */
            .accommodation-list-item {
              float: left;
              /* this has to be changed!! but 100% causes overflow of the .content-wrap element */
              width: 497px;
            }

            .accommodation-list-item .accommodation-location {
              text-align: right;
              margin-bottom: 1em;
            }

              .accommodation-list-item .accommodation-location sup {
                font-size: 0.8em;
                margin-top:-0.5em;
                vertical-align: text-top;
              }

            .accommodation-list-item .accommodation-image {
              float: left;
              width: 36%;
              width: 170px;
            }

            .accommodation-list-item .accommodation-description {
              float: left;
              width: 64%;
              width: 327px;
            }

            .accommodation-list-item .accommodation-description p {
              line-height: 120%;
              margin: 1em 0;
            }

            .accommodation-list-item .accommodation-name {
              border-bottom: 1px solid #786b50;
              margin: 0;
              padding-bottom: 0.75em;
            }

            .accommodation-list-item .accommodation-actions {
              /*clear: both;*/
              float: left;
              /*width: 100%;*/
              width: 497px;
            }

            .accommodation-list-item .accommodation-actions ul {
              list-style-type: none;
              margin: 0;
              float: left;
              /*width: 50%;*/
              width: 248px;
            }

            .accommodation-list-item .accommodation-actions ul li {
              display: inline;
              padding: 0 1em;
            }

            .accommodation-list-item .accommodation-actions ul.left {
              width: 200px;
            }

            .accommodation-list-item .accommodation-actions ul.left li {
              background: url('../../images/frontend/ico-arrow-786b50.gif') left center no-repeat;
            }

            .accommodation-list-item .accommodation-actions ul.right {
              text-align: right;
              width: 296px;
            }

            .accommodation-list-item .accommodation-actions ul.right li {
              border-right: 1px solid #cf2f2f;
            }

            .accommodation-list-item .accommodation-actions ul.right li.last-item {
              border-right: 0;
            }

            .accommodation-list-item,
            .article-list-item,
            .offer-list-item,
            .category-list-item,
            .adgroup-list-item {
              border-color: #f6efc7;
            }

            /* category list items */
            .category-list-item h2 {
              font-size: 1.75em;
              font-weight: bold;
              color: #cc3300;
              line-height: 1.25em;
            }

              .category-list-item td {
                vertical-align: middle;
              }

            /* adgroup list items */
            .adgroup-list-item h2 {
              font-size: 1.75em;
              font-weight: bold;
              color: #cc3300;
              line-height: 1.25em;
            }

              .adgroup-list-item td {
                vertical-align: middle;
              }

            #facilities {
              padding: 0; /* remove padding given with content-wrap */
            }

            #facilities .facility-list-item {
              border-bottom: 1px solid #7d6a50;
              padding: 10px; /* add padding */
            }

            #facilities h2 {
              padding: 0.5em;
              background-color: #fffbda;
              margin: 0;
            }
      
            #facilities span.facility-item {
              display: block;
              padding: 0.25em;
            }

            /* offer list items */
            #offers {
              padding: 0; /* remove padding given with content-wrap */
            }

            #offers .offer-list-item {
              border-top: 10px solid #fffbda;
              padding: 10px; /* add padding */
            }

            #offers .offer-list-item .details {
            }

              .offer-list-item .details .period {
                margin-bottom: 0.5em;
                font-weight: bold;
              }

            #offers .offer-list-item .description {
              border-top: 1px solid #786a4a;
              margin-top: 0.5em;
              padding-top: 0.5em;
            }

            #offers .offer-list-item .links table .first {
              background: none;
            }

            .offer-list-item .location {
              text-align: right;
            }

            .offer-list-item .image,
            .article-list-item .image {
              float: left;
              margin-right: 10px;
              /* IE6 fix */
              position: relative;
            }

            .offer-list-item .details,
            .article-list-item .details {
              margin-left: 170px;
            }

            .offer-list-item .details h2,
            .article-list-item .details h2 {
              clear: none;
              font-weight: normal;
              color: #786a4f;
              border-bottom: 1px solid #786a4a;
              margin-bottom: 0.5em;
              padding-bottom: 0.5em;
            }

            .offer-list-item .details .price {
              float: right;
              font-weight: bold;
            }

            .article-list-item .creation-date {
              text-align: right;
            }

            .offer-list-item .details h3,
            .article-list-item .details h3 {
              color: #cc0000;
              font-weight: bold;
            }

            .offer-list-item .details .description {
            }

            .offer-list-item .links,
            .article-list-item .links {
              clear: both;
              padding-top: .75em;
            }

            .offer-list-item .links table td,
            .article-list-item .links table td {
              text-align: center;
              line-height: 1em;
              padding: 0;
            }

            .offer-list-item .links table .first {
              text-align: left;
              background: url('../../images/frontend/ico-arrow-786b50.gif') no-repeat left center;
              padding-left: 1em;
            }

            .offer-list-item .links table .middle,
            .article-list-item .links table .middle {
              border-right: 1px solid #cf302d;
            }

        #content-sidebar {
          /* for debug purposes only
          border-top: 5px solid #0ff;
          */
          float: right;
          width: 225px;
          background-color: #f0f1f4;
          padding-left: 10px;
        }

          #leaflet {
            background: url('../../images/frontend/leaflet-footer-bg.png') left bottom no-repeat;
            padding-bottom: 12px;
          }

          #leaflet h2 {
            margin-top: -18px;
            background: url('../../images/frontend/leaflet-header-bg.png') left top no-repeat;
            padding-top: 25px;
            line-height: 26px;
            font-weight: bold;
            font-size: 1em;
            padding-left: 10px;
          }

          #leaflet div.leaflet-table-wrap {
            padding: 0.5em 0px 0.5em 10px;
            background: url('../../images/frontend/leaflet-body-bg.png') left top repeat-y;
          }

          #leaflet ul,
          #leaflet table {
          }

          #leaflet ul li,
          #leaflet table td {
            line-height: 150%;
            /* fix for IE */
            background: none;
          }

          #content-sidebar .box {
            margin: 10px 0;
            margin-right: 10px;
          }

          #content-sidebar .box h2 {
            background-color: #c30;
            color: #fff;
            font-weight: bold;
            font-size: 1em;
            text-align: center;
            margin: 0;
            padding-bottom: 1%;
          }

          #content-sidebar .box p {
            text-align: center;
            line-height: 140%;
          }

          #content-sidebar .box.introduction h3 {
            clear: both;
            font-weight: bold;
            margin: 0.1em 0;
          }

          #content-sidebar .box.introduction img {
            float: left;
            vertical-align: text-top;
            margin-right: 0.5em;
            margin-bottom: 0.5em;
            border: 1px solid #858c59;
          }

          #content-sidebar .box.introduction p {
            margin-left: 67px;
            text-align: left;
          }

          #content-sidebar .box .padding-wrap {
            padding: 0.5em;
          }

    #footer {
      clear: both;
    }

    #footer p {
      line-height: 200%;
      font-size: 80%;
      text-align: center;
      border-top: 1px solid #cecece;
      margin-top: 2%;
    }

    .tab-container {
      float: left;
      width: 100%;
      background: #fff;
      line-height: normal;
    }

    /* tabbed interface for detail page */
    .tabs {
      width: 100%;
      overflow:hidden;
      /*background:url(../../images/frontend/bg-tabset.gif) no-repeat 0 100%;*/
      font-size: 1em;
    }

    .tabs li {
      float: left;
      margin: 0 -5px 0 0;
      padding: 0 18px 0 0;
      text-align: center;
      height: 2em;
      background: url('../../images/frontend/tabs-a-bg.gif') no-repeat 100% 0;
    }

    #register-tabs li a,
    #register-tabs li a:visited,
    #detail-tabs li a, 
    #detail-tabs li a:visited {
      line-height: 2em;
      height: 2em;
      color: #786b50;
      float: left;
      text-decoration: none;
      font-weight: bold;
      border: 0;
      padding: 0 0 0 10px;
      background:url('../../images/frontend/tabs-li-bg.gif') no-repeat 0 0;
    }

    #register-tabs a {
      cursor: default;
    }

    /* the definition in line with .tab-container gives the hover pseudo classes and other elements a higher priority... */
    .tab-container .tabs li a:hover {
      border: 0;
      color: #cc3300;
      background: url('../../images/frontend/tabs-li-bg.gif') no-repeat 0 0;
    }

    .tab-container .tabs li.current-tab a:hover {
      background: url('../../images/frontend/tabs-li-bg.gif') no-repeat 0 -31px;
    }

    .tab-container .tabs li.current-tab {
      background: url('../../images/frontend/tabs-a-bg.gif') no-repeat 100% -31px;
      /* active tab overlaps inactive tabs */
      position:relative;
      padding: 0 18px 0 0;
    }

    #register-tabs li.current-tab a,
    #register-tabs li.current-tab a:hover,
    #detail-tabs li.current-tab a, 
    #detail-tabs li.current-tab a:hover {
      background: url('../../images/frontend/tabs-li-bg.gif') no-repeat 0 -31px !important;
      color: #cc3300 !important;
      border: 0;
      text-decoration: none;
      font-weight:  bold;
    }

    ul.month-list {
      text-align:center;
    }

    ul.month-list.horizontal li {
      background-color: #fffdee;
      display: inline;
      padding: 0 0.5em;
    }

    ul.month-list li.current {
      background-color: #fffbda;
      font-size: 1.2em;
      font-weight: bold;
    }

  div.explorer-panel {
    float: left;
    width: 100%;
  }

    .explorer-panel .panel {
      float: left;
	    height: 400px;
	    overflow: auto;
	    background-color: #fff;
    }

    .explorer-panel .left {
      width: 40%;
    }

    .explorer-panel .right {
      width: 60%;
    }

      .explorer-panel .panel .panel-content {
        margin: 0.5em;
      }

      .explorer-panel .left .panel-content {
        border-right: 1px solid #cecece;
      }

      .explorer-panel .loading {
        background: #fff url('../../images/icons/loading-big.gif') center no-repeat;
      }

  .sort-order-control {
    cursor: move;
  }