html, body {
    height: 100%;
  }
 body{background-color:#F8F7EB;
  font: 16px/20px arial, sans-serif, verdana;
  color:#1e3c50;
  margin:0;
}

.wrapper {
  width: 100%;
  min-width: 1000px;
  min-height:100%;      
}

/* Header
-----------------------------------------------------------------------------*/
.header {
  width:80%;
  position: relative;
  top: 10px;
  margin: 0 auto;
  height: 120px;
  z-index: 100;
}
.logo {
  width:240px;
  position:relative; 
  float:left;
  
}

.menu-pos{
  width:100%; 
  position: relative;
  float: left; 
  z-index: 100;  
}

/* Middle
-----------------------------------------------------------------------------*/
.middle {
  width: 100%;  
  height: auto;
  position: relative;
  z-index:0;         
}

main{
     width:54%;
      overflow: hidden;
      z-index:1;
  margin:0 auto;
   
    
}

main h1,h2,h3 {
   color: maroon; 
   text-align:center; 
   font-family: 'Stoke', serif;
   font-weight: normal;
}
main h1 {
    font-size: 2em; 
}
main h2 {
    font-size: 1.2em; 
}

main h3 {
    font-size: 0.9em; 
}
main p::first-letter {
    font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */
    font-size: 1.4em; /* Размер шрифта первого символа */
    color: maroon; /* Красный цвет текста */
    margin-left:2em;
   }

/* Galerien CSS */
.artikel-box{
  display:table-cell;
  width:12vw;
  height: auto;
  overflow:hidden;  
  position:relative;
  float: left;
  margin: 5px;
  z-index: 0;
  
}
.bild-box{
  width: 100%;
  overflow:hidden;
  position:relative;
  top: 0;
  z-index: 0;
}
.title-box{
  position:relative;
  bottom:0;
  width: 100%;
  text-align: center;
  z-index: 300;
}
.kuechen_slide  {
  width:100%;   
  height:20vh; 
  position:relative; 
  top:0; 
  overflow:  hidden;   
  margin:0 auto; 
  } 


.front_slide {
  width:10vw;   
  height:17vw; 
  position:relative; 
  top:0; 
  overflow:  hidden;   
  margin:0 auto; 
}  

.knopf_slide {
  width:8vw;   
  height:11vw; 
  position:relative; 
  top:0; 
  overflow:  hidden;   
  margin:0 auto; 
}  

.korpusdekor_slide {
  width:25vh;   
  height:14vh; 
  position:relative; 
  top:0; 
  overflow:  hidden;   
  margin:0 auto; 
}  

.neu{position:absolute;  
  left:20px; top:50px; 
  z-index:300;  
  font-weight:bold; 
  font-size:10pt; 
  color:red;
}

main div{width:100%;
  display: table;
margin:0 auto;
position: relative;
height:auto;
}

main table{
  width:100%;  
}

main td{vertical-align:top;
  padding:5px;
}   


td{text-align:center; 
  padding:10px;
  margin:0;
  }


th{
font-size: 1.0em;
color: maroon;
font-family: 'Stoke', serif;  
padding: 20px;}


p{text-align:left;}



.menu {
color: #28529a;
font-family: Tahoma;
font-size: 10pt;
font-weight: bold;
line-height:18px;
text-decoration:none;
}





.1 { color:#B965C5;}
.weiss{color:#ffffff;}
h4 {font-family: verdana; font-size:11pt;}

p.9 { font-size:9pt; COLOR:#1e3c50;text-align:left;}
p.8{font-size:8pt; text-align:left;}
.11{font-size:11pt;}
.12{font-size:12pt;}
.color{font-COLOR:#1e3c50;}
ul.ohne{list-style-type:none;}




A:link {color: #180366;TEXT-DECORATION:none}
A:active {color: #180366;TEXT-DECORATION:none}
A:visited  {COLOR:#180366;   TEXT-DECORATION:none}
A:hover  {COLOR:#DC0821;   TEXT-DECORATION:none}



/* ================================================================
This copyright notice must be kept untouched in the stylesheet at all times.
Copyright (c) 2010 Stu Nicholls. All rights reserved.
=================================================================== */

#menu {width:700px; height:40px; margin: 0 auto; }

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#menu ul {display:inline-block;}

#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul ul {position:absolute; left:-9999px; padding:10px 0;}
#menu ul.level1 {margin:0 auto; padding:0 20px;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;}

#menu ul.level1 {background:#5be; z-index:100;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));


-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);

-o-border-radius: 8px;
-icab-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#menu ul.level2 {background:#e86; opacity:0; z-index:100;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));

-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);

-o-border-radius: 8px;
-icab-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

-webkit-transition: opacity 0.6s ease-in-out;
}

#menu ul.level3 {background:#ea3;  opacity:0; z-index:100;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));

-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);

-o-border-radius: 8px;
-icab-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

-webkit-transition: opacity 0.6s ease-in-out;
}

#menu ul.level4 {background:#4ba; opacity:0; z-index:100;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));

-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);

-o-border-radius: 8px;
-icab-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

-webkit-transition: opacity 0.6s ease-in-out;
}

#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/

#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:35px; text-decoration:none; padding:0 30px 0 10px; margin-right:-10px;}
#menu ul ul a {line-height:25px;}

#menu li.left ul li a {padding:0 10px 0 30px; margin-right:0; margin-left:-10px;}

#menu ul.level1 li.level1-li a.level1-a {float:left;}

#menu ul li.level1-li:hover {padding-bottom:10px; margin-bottom:-10px;}

#menu ul li:hover > ul {visibility:visible; left:0; top:35px; opacity:1; margin-top:10px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-35px; opacity:1;  margin-left:8px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:-10px; top:35px; opacity:1; margin-right:10px; }
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-35px; margin-right:10px; opacity:1; }


#menu a:hover ul {left:0; top:28px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:28px;}

#menu li.left ul a {text-align:right; padding:0 10px 0 20px;}


#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible; }
#menu li.left a:hover a:hover ul,
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}

#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul,
#menu li.left a:hover a:hover ul ul {left:-9999px;}


#menu li a.fly {background:transparent url(http://www.adam-platten.de/images/arrow.gif) no-repeat 92% center;}
#menu li.left ul a.fly {background:transparent url(http://www.adam-platten.de/images/arrow-le.gif) no-repeat 10px center;}

#menu li a:hover,
#menu li a.fly:hover {color:#fff; direction:ltr;}
#menu ul li:hover > a,
#menu ul li:hover > a.fly {color:#fff;}

#menu table {position:absolute; height:33px; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-44px;}

#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-44px;}

//Ñòèëè äëÿ ïîäñêàçêè


 .joint
 {background-color:#f2f2f2;
 }

.tooltip {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #222;
    outline: none;
}

.tooltip:hover:before {
    content: attr(data-title);
    white-space: pre-line;
    position: absolute;
    bottom: -40px;
    left: 10%;
    z-index: 999;
    width: 230px;
    margin-left: -127px;
    padding: 10px;
    border: 2px solid #ccc;
    opacity: .9;
    background-color: #ddd;
    background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltip:hover:after {
    content: "";
    position: absolute;
    z-index: 1000;
    bottom: 24px;
    left: 50%;
    margin-left: -8px;
    border-top: 8px solid #ddd;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 0;
}

/* Yellow */
.yellow-tooltip:hover:before {
    border-color: #e1ca82;
    background-color: #ffeaa6;
}

.yellow-tooltip:hover:after {
    border-top-color: #ffeaa6;
}