/*
  **  stylesheet definitions for pension-mitterhofer.com
  **
  **  line endings: unix; encoding: utf-8; BOM: off; tabs: spaces; tab width: 2
  **
  **  @copyright  (c) Profi IT GmbH
  **  @author     tommy(at)profi(dot)it
  **  @since      19.02.2008 14:56:39
  */

  @import url('style-reset.css');
  @import url('style-typography.css');
  @import url('style-form.css');
  /* remove before copying to production server! */
  @import url('style-css_styled_content.css');
  @import url('style-ve_guestbook.css');
  @import url('style-ce_gallery.css');

  body {
    font: normal normal normal 80% normal Arial, Helvetica, sans-serif;
    background: #fef9e5 url('../img/bg-fef9e5.png');
  }

    #wrap {
      width: 964px;
      margin: auto;
      /* use margin-top here, padding-top causes IE6,7 to show this top margin before content container too oO */
      margin-top: 30px;
    }

      #header-container {
        position: relative;
        background: #fff url('../img/bg-header-container.png') repeat-x left bottom;
        float: left;
        width: 100%;
      }

        #header-left {
          float: left;
          width: 220px;
          background: url('../img/bg-header-left.png') no-repeat;
        }

          #header-left h1 {
            margin-top: 30px;
            text-indent: -9999em;
            background: url('../img/logo-mitterhofer.png') no-repeat;
            width: 219px;
            height: 130px;
            border-left: 1px solid #f3d89c;
          }

          #header-left #address-container {
            border-left: 1px solid #f3d89c;
            text-align: center;
            font-size: 0.95em;
            color: #646567;
          }

        #header-right {
          float: left;
          width: 744px;
          background: url('../img/bg-header-right.png') no-repeat;
        }

          #header-image-container {
          }

        .tx-srlanguagemenu-pi1 {
          position: absolute;
          top: 0px;
          left: 0px;
          /*background: url('../img/bg-wrap.png') no-repeat left top;*/
          width: 100%;
          /*z-index: 3;*/
        }

          ul#menu-languages {
            text-align: right;
            width: 100%;
          }

            #menu-languages li {
              display: inline;
            }

              #menu-languages li a {
                text-decoration: none;
                text-transform: uppercase;
                padding: 0 1em 0 0;
                color: #898782;
                font-size: 0.9em;
                font-weight: bold;
              }

                #menu-languages li a img {
                  margin-right: 0.8em;
                  vertical-align: text-top;
                }

      #content-container {
        clear: both;
        background: #fff url('../img/bg-content-container.png') repeat-y;
      }

        .column {
          float: left;
        }

        #sidebar-left {
          width: 204px;
          padding-right: 16px;
          background: url('../img/bg-sidebar-left.png') no-repeat 1px top;
        }

          ul#menu-main {
            margin-top: 40px;
            padding-left: 1px;
            /*
            background: url('../img/main-menu-top-trans.png') no-repeat 1px top;
            padding-top: 13px;
            */
          }

            #menu-main li {
              line-height: 2em;
              background-color: #faf0d3;
            }

            #menu-main li.first-item {
              background: #faf0d3 url('../img/main-menu-top.png') no-repeat left top;
              padding-top: 13px;
            }

            #menu-main li.last-item {
              background: #faf0d3 url('../img/main-menu-bottom.png') no-repeat left bottom;
              border: none;
              padding-bottom: 32px;
            }

              /* we use span elements to deal with the top and bottom menu graphics */
              #menu-main li span {
                /* set it to block, set padding and border, it will fit to its inner elements */
                display: block;
                padding: 0 39px 0 12px;
                border-right: 1px solid #f3d89c;
              }

                #menu-main li a {
                  text-decoration: none;
                  color: #646567;
                  border-bottom: 1px solid #e3dcbd;
                  display: block;
                  line-height: 2em;
                  font-size: 0.95em;
                }
    
                #menu-main li a.active,
                #menu-main li a:hover {
                  color: #e9ad2b;
                }
  
                  /* sub menus */
                  #menu-main li ul li {
                    border: none;
                  }
  
                  #menu-main li ul li a {
                    font-size: 0.85em;
                    padding: 0 0 0 12px;
                    line-height: 2.15em;
                  }

          form.express label {
            color: #000;
            font-size: 0.8em;
          }

          ul#menu-extra li {
            line-height: 1.5em;
            margin: 0 1.5em 0 1em;
          }

            #menu-extra li a {
              text-decoration: none;
              color: #646567;
            }

            #menu-extra li.active a,
            #menu-extra li a:hover {
              color: #e9ad2b;
            }

        #content {
          width: 490px;
          background: url('../img/bg-content.png') no-repeat left top;
          /* normally, left and right padding is 27px but so we have more space for content: 490px */
          padding: 25px 25px 0 25px;
        }

        #sidebar-right {
          width: 203px;
          padding-top: 80px;
        }

        #footer {
          clear: both;
          text-align: center;
          font-size: 0.9em;
          color: #cecece;
        }

  /* == special elements ==================================================== */
  div.box-left {
    /* faux column border of underlaying content container */
    margin-left: 1px;
    padding-top: 12px;
  }

    /* common settings for box content container */
    .box-left .box-content {
      padding: 0 39px 0 12px;
    }

  /* left box element with background color set to faf0d3 */
  .box-left.clr-faf0d3 {
    /* define bottom box graphic and set bottom padding to the height of the graphic */
    background: url('../img/bg-boxleft-faf0d3-bottom.png') no-repeat left bottom;
    padding-bottom: 21px;  
  }

  .box-left.clr-faf0d3 .box-header-simple {
    /* the header element is used to show the top box graphic, padding is set to height of the graphic */
    background: url('../img/bg-boxleft-faf0d3-top.png') no-repeat;
    padding-top: 12px;
  }

  .box-left.clr-faf0d3 .box-header-simple h3 {
    color: #646567;
    font-weight: normal;
    background-color: #faf0d3;
    border-right: 1px solid #f3d88c;
    padding-left: 12px;
    line-height: 1.5em;
  }

  .box-left.clr-faf0d3 .box-content {
    border-right: 1px solid #f3d88c;
    background-color: #faf0d3;
  }

  /* right box element with background color set to faf0d3 */
  div.box-right {
  	margin-bottom: 25px;
  }

    .box-right .box-content {
      padding: 0 12px 0 12px;
    }

  .box-right.clr-faf0d3 {
    background: url('../img/bg-boxright-faf0d3-bottom.png') no-repeat left bottom;
    padding-bottom: 12px;
  }

    .box-right .box-header-complex a.block-link {
      display: block;
      background-color: #f0cf86;
      color: #646567;
      line-height: 2em;
      text-align: center;
      text-decoration: none;
    }

    .box-right.clr-faf0d3 .box-content {
      border-left: 1px solid #f3d88c;
      background-color: #faf0d3;
    }