/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) Variation of screen layout (basemod.css) for layout example "3col_fullheight"
 * (de) Variation des Screenlayouts (basemod.css) für Layoutbeispiel "3col_fullheight"
 *
 * @copyright       Copyright 2005-2010, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.3
 * @revision        $Revision: 466 $
 * @lastmodified    $Date: 2010-09-14 21:19:30 +0200 (Di, 14 Sep 2010) $
 */

@media screen, projection
{
  body, html { height: 100% !important; padding: 0;}
  
  body {
  background-color: #063121;
  /* background-color: #B5AE61; */
  overflow-y: auto;
  
  }
  
  #bg_image_wrap {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 100%;
  
  background-color:#063121;
  display: none;
  }
  
  #bg_image {
  padding-top: 146px;
  }
  
  #bg_transparency {
  position: fixed;
  /* top: 0px; */
  top: 146px;
  left: 140px;
  width: 480px;
  height: 100%;
  
  background-color: transparent;
  background-image: url("../../art_global/bg_transparency_close_button.png");
  background-repeat:no-repeat;
  background-position: top right;
  }
  
  /*  Hintergrund weiß 80% transparent */
  .bg_trans_white_80 {
  background-color: rgb(255,255,255);
  background-color: rgba(255,255,255,.8);
  background-color: transparent\9; /* Hide solid background for IE8 */
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#CCFFFFFF,endColorstr=#E5FFFFFF); /* IEs , E5 = HEX(255 * 0,8) */
  zoom:1;
  }
  
  
  
  .page_margins, .page, #main, #col3 {
  position:relative !important;
  min-height:100% !important; /* real browsers */
  height: 100% !important;
  
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  }
  

  
  .page, #main, #col3 {
  /* overflow: hidden;TEST  */
  }
  .page_margins {
  background: transparent;
  
  
  }
  
  .page {
  background-color:transparent; /* yellow TEST */
  padding: 0;
  }
  
  #header {
  position: fixed;
  z-index: 99;
  width: 100%;
  background-color: #063121;
  padding: 0px;
  height: 146px;
  overflow: visible;
  }
  
  #nav {
  position: absolute;
  bottom: 0px;
  overflow: visible;
  }

  #logo {
 
  margin-left: 620px;
  padding-top: 36px;
  padding-bottom: 24px;
  /**/
  }
  

  

  
  #main {
  position:absolute !important;
  top: 0px;
  background-color:transparent;
  }
  
  #col1, #col1_content {
  /* background-color: #090; TEST */
  }
  
  #col2, #col2_content {
  /* background-color: #F66; TEST */
  }
  
  #col3 {
  width: 480px;
  }
  
  /* CLOSE-BUTTON */
  #close_button {
    width: 20px;
    height: 20px;
    background-color: transparent;
    /* background-color:fuchsia; TEST */
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9;
  cursor: pointer;
  }
  
  #close_button a,
  #close_button a:focus,
  #close_button a:hover,
  #close_button a:active  {
    display:block;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url("../../art_global/close_button.png");
    background-repeat:no-repeat;
    /*background-position: center;*/
    background-position: 2px 2px;
    z-index: 9;
    text-decoration:none;
    outline: 0 none;
    text-align: center;
  cursor: pointer;
  }
  
  #close_button a:focus,
  #close_button a:hover  {
    background-image: url("../../art_global/close_button_over.png");
  }
  #close_button a:active  {
    /* background-image: url("../../art_global/close_button_active.png"); */
    background-image: url("../../art_global/close_button_over.png");
  }
  
  /* ARROW-BUTTONS */
  #arrow_button {
  width: 22px;
  height: 45px;
  position: fixed;
  top: 320px;
  z-index: 99;
  background-color: transparent;
    /* background-color:fuchsia; TEST */
  /* transparenz für IE */
  filter:alpha(opacity=70);
  /* transparenz CSS3 standard */
  opacity:0.7;
  }
  
  #arrow_button.left {
  left: 12px;
  }
  #arrow_button.right {
  /* left: 938px; */
  right: 12px;
  }
  
  #arrow_button a,
  #arrow_button a:focus,
  #arrow_button a:hover,
  #arrow_button a:active  {
    display:block;
    width: 100%;
    height: 100%;
    background-color: transparent;
    text-decoration:none;
    outline: 0 none;
    
    background-repeat:no-repeat;
    background-position: center right;
  }
  
  #arrow_button.left a  {
    background-image: url("../../art_global/arrow_button_left.png");
    
  }
  
  #arrow_button.left a:focus,
  #arrow_button.left a:hover  {
    background-image: url("../../art_global/arrow_button_left_over.png");
  }
  
  #arrow_button.left a:active  {
    background-image: url("../../art_global/arrow_button_left_active.png");
  }
  
  #arrow_button.right a  {
    background-image: url("../../art_global/arrow_button_right.png");
  }
  
  #arrow_button.right a:focus,
  #arrow_button.right a:hover  {
    background-image: url("../../art_global/arrow_button_right_over.png");
  }
  
  #arrow_button.right a:active  {
    background-image: url("../../art_global/arrow_button_right_active.png");
  }
  
  
  #col3_content, #col2_content {
    /*background-color:fuchsia;  TEST */
  /* bak padding: 40px;*/
  /* bak padding-top: 185px; */
  /* margin statt padding wegen close_button z-index-Problem*/
  padding: 145px 0 0 0;
  margin: 40px
  } 
  #col2_content {
  padding: 20px;
    padding-top: 220px;
  position: fixed;
  width: 300px;
  }
  
    
  .clearboth {
    clear:both;
    content:".";
    display:block !important;
    font-size:0;
    height:0;
    visibility:hidden;
  
  }
  
  /**
  * ------------------------------------------------------------------------------------------------- #
  *
  * Layout Angebot-Buttons
  *
  * @section Layout-buttons
  */ 
  
  div.ad_button_khaki {
    display: block;
  width: 102px;
  height: 102px;
  }
  
  div.ad_button_red {
    display: block;
  width: 148px;
  height: 148px;
  float:left;
  }
  
  div.ad_button_khaki a {
  width: 102px;
  height: 102px;
  }
  
  div.ad_button_red a {
  width: 148px;
  height: 148px;
  }

  div.ad_button_khaki a,
  div.ad_button_red a {
  display: table-cell;
  vertical-align: middle;
  }
  
  
}

 @media (max-device-width: 1024px) { 
 #nav {
 width: 100%;

}

 }