/* ----------------------------------------------------------------------------- *
 *                           Styles der Basisversion     Möller und Schmelz      *
 * ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- *
 * Änderung des default-Box-Modells aller Elemente auf "border-box"
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * << apply a natural box layout model to all elements >>
 * ----------------------------------------------------------------------------- */
*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}

/* ----------------------------------------------------------------------------- */
.page-wrapper {
    margin: 0px;
}

header {
    width: 100%;
	position: absolute;
	padding: 0px;
}

.kleinav {
	margin: 0px 5px;
	padding: 0px;
}

div#language {
	margin: 0px 0px 5px 0px;
	padding: 5px 0px 5px 85%;
	color: #000000;
	background-color: #069a32;
	background-image: linear-gradient(#2d4132, #069a32);
   	box-shadow: 0;
	text-align: right;
}

.deutsch {
	width: 40px;
	height: 27px;
	background-image: url(../images/english.gif);
}
	
.deutsch:hover { 
	background-image: url(../images/english-over.gif);
}

.deutsch a {
	width: 100%;
	height: 100%;
	display: block;
	text-decoration: none;
}

.deutsch a span {
	width: 100%;
	display: block;
}

.english {
	width: 40px;
	height: 27px;
	background-image: url(../images/deutsch.gif);
}
	
.english:hover { 
	background-image: url(../images/deutsch-over.gif);
}

.english a {
	width: 100%;
	height: 100%;
	display: block;
	text-decoration: none;
}

.english a span {
	width: 100%;
	display: block;
}

.logo {
	max-width: 100%;
	height: auto;
	padding: 0px 0px 0px 1%;
	position: absolute;
	z-index: 3;
}

footer {
	z-index: 5;
	width: 100%;
    padding: 0.05em 10px;
	font-size: 0.8em; /* 12px */
	position: fixed;
	bottom: 0;
}

footer .select {
	color: #ffffff;
	font-weight: bold;
}

footer a:link {
	color: #ffffff;
	text-decoration: none;
}

footer a:visited {
	color: #ffffff;
	text-decoration: none;
}

footer a:hover {
	color: #e6e6e6;
}

section {
    padding: 0px 20px;
}

section img {
	max-width: 100%;
	height: auto;
	border: 0px;
}

section a img { border: 0; }

.mainContent {
    width: 100%;
	text-align: center;
    border-top: 1px solid transparent;
    padding: 0.8em 0px 20% 0px;
}

article {
	margin: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.headtext img {
	display: none;
}

.hideOnMobile {
	display: none;
}

div#button {
    border: 0px;
	margin: auto;
	padding: 8.0em 0px 5.0em 0px;
}

div#button img {
	max-width: 100%; 
	height: auto; 
}

@media print {
	 .hideOnMobile {
	display: table-cell; }
}

table	{ 
	width: 100%;
	margin: 10px 0px 40px 0px; 
	border: 1px solid #069a32; 
	border-collapse: collapse; 
	background-color: #ffffff; 
	empty-cells: show;
}

tbody tr.odd td {
	background-color: #d4ead4; 
}

thead {
	margin: 0px; 
	padding: 2px 2px 2px 4px; 
	text-align: left; 
	vertical-align: top; 
	font-size: 0.9em; 
	line-height: 1.3em; 
	border: 1px; 
	background-color: #069a32; 
	color: #ffffff; 
}

th, td {
	margin: 0px; 
	padding: 2px 2px 2px 4px; 
	text-align: left; 
	vertical-align: top; 
	font-size: 0.8em; 
	line-height: 1.3em; 
	border: 1px solid #069a32; 
	word-wrap: break-word;
}

col#coltyp {
}

col#colverwendung {
}

col#colmembran {
}

col#colinkubation {
}

col#colwachstum {
}

col#colmenge {
}

col#coldownload {
}

col#colcolbeschreibung {
}

col#colcolartikel {
}

col#coldownloaddl {
	width: 20%;
}

col#colcolbeschreibungdl {
	width: 80%;
}


/* ----------------------------------------------------------------------------- *
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
h1 {
    margin: 0.6em 0px;
}

h2 {
    margin: 0.6em 0px;
}

h3 {
    margin: 0.6em 0px;
	font-size: 1.0em;
}

.box.teaser p {
	padding: 0px;
	margin: 0 0 0.8em 0;
}

ul {
    padding: 0;
    margin: 0 0 0.625em 20px;
}

ul li {
	padding: 0px 0px 0px 0px;
}

ol {
    padding: 0;
    margin: 0 0 0.625em 0px;
}

ol li {
	padding: 0px 0px 5px 0px;
}

/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */
nav ul {
    margin: 0;
}

nav ul > li {
    margin-left: 0;
    border-bottom: 1px solid rgba(250, 250, 250, 0.6);
}

nav ul > li > a, nav ul > li > strong {
    padding: 0.3em 20px;
    display: block;
}

nav ul a:link {
    text-decoration: none;
}

/* ----------------------------------------------------------------------------- *
 *                                  Kopfbild                                     *
 * ----------------------------------------------------------------------------- */

div#headimage {
    border: 0px;
	margin: 0px;
	padding: 0px;
}

div#headimage img {
	max-width: 100%; 
	height: auto; 
	margin: 0px;
	display: block;
}

/* ----------------------------------------------------------------------------- * 
 *                                  Slideshow                                    *
 * ----------------------------------------------------------------------------- */
 
div#slideshow {
    border-bottom: 0px;
	background-color: #d4ead4;
	height: auto; 
	margin: 0px;
	overflow: hidden;
}

div#slideshow img {
	width: 120%; 
	padding-left: -20%;
	height: auto; 
	margin: 0;
}
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
}

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {
    
    /* Schriftverkleinerung wird für große Screens wieder aufgehoben */
    @media only screen and (max-width: 78em) {
        body {
            font-size: 0.938em; /* 15px */
        }
		
		.box.teaser {
		float: left;
		margin: 0 0 0.5em 0;
		width: 100%;
		}
		
		.box.teaser figure {
		width: 30%;
 		height: 30%;
 		float: left;
 		margin: 0 2% 2% 0;
		}
	}
	
    .main {
        /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
        overflow: hidden;
    }
	
    .mainContent {
        width: 100%;
    	padding: 40% 10% 3.0em 10%;
        border-top: none;
    }
	
	footer {
        padding: 0.1em 20px;
    }

    section {
        padding: 0px 20px;
    }
			
	.headtext img {
		display: inline;
	}
	
	.hideOnMobile {
		display: table-cell;
	}
	
	div#slideshow {
		width: 100%; 
	}
	
	div#slideshow img {
		width: 100%; 
		padding: 0px;
		height: auto; 
		margin: 0;
	}
	
			
    /* ----------------------------------------------------------------------------- *
     *                                  Navigation                                   *
     * ----------------------------------------------------------------------------- */
    nav {
        /* clearing für die floatenden LIs */
        margin: 5px 0px 0px 0px;
		overflow: hidden;
        font-size: 1.0em; /* 16px */
    }

    nav ul {
        margin: 0px;
    }

    nav ul li {
        float: left;
        border: none;
        width: auto;
    }
		
    nav ul > li > a {
        padding: 0.6em 0px 0.6em 0px;
        display: inline-block;
		text-align: center;
    }
	
	nav ul .navselect {
		margin: 0px;
		padding: 0.1em 10px 1.8em 10px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center;
	}
	
	nav ul .navuselect {
		margin: 0px;
		padding: 0.5em 10px 1.4em 10px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center;
	}
	

}

/* ----------------------------------------------------------------------------- *
 *                          Styles für kleine Desktops                           *
 *                           1024px / 16px/em = 64em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 64em) {

    nav {
         box-shadow: none;
    }

	nav ul .navselect {
		margin: 0px;
		padding: 0.5em 10px 1.6em 10px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center
	}

	nav ul .navuselect {
		margin: 0px;
		padding: 0.5em 10px 1.6em 10px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center
	}

	.main {
        /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
    	overflow: hidden;
    }

    .mainContent {
        width: 100%;
        float: left;
    	padding: 35% 10% 3.0em 10%;
        border-top: none;
    }
		
	div#slideshow {
		width: 100%; 
		margin: auto;
	}
	
	div#slideshow img {
		width: 100%; 
		padding: 0px;
		height: auto; 
		margin: 0;
	}
		
/* ----------------------------------------------------------------------------- * 
 *                  Teaserboxen mit Bild und Text .box.teaser                    *
 * ----------------------------------------------------------------------------- */

.teaser {
    margin-top: 1.5em;
    padding: 0px;
}

.box.teaser {
    float: left;
    margin-right: 3%;
    width: 30%;
    overflow: auto;
}

.teaser p {
	margin: 0px;
    font-size: 0.8em; /* 12 px */
}

}
/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1248px / 16px/em = 78em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 78em) {
	  
    /* Größenanpassungen */
    .mainContent {
	    width: 100%;
    	padding: 40% 0px 3.0em 0px;
    }

    .page-wrapper {
        margin: 0 auto;
        max-width: 60%;
    }
	
	footer {
        padding: 0.1em 50px;
    }
	
	h1 {
		margin: 1.125em 0px;
	}

    section {
    	padding: 0px;
    }
	
	div#slideshow img {
		width: 100%; 
		padding: 0px 15%;
		height: auto; 
		margin: 0;
	}
		
	.logo {
		max-width: 100%;
		height: auto;
		padding: 0px 0px 0px 16%;
		position: absolute;
		z-index: 3;
	}

	div#language {
		margin: 0px 0px 5px 0px;
		padding: 5px 0px 5px 82%;
		color: #000000;
		background-color: #069a32;
		background-image: linear-gradient(#2d4132, #069a32);
   		box-shadow: 0;
		text-align: right;
	}
	
	.kleinav {
		margin: 0px 15%;
		padding: 0px;
	}
	
	/* ----------------------------------------------------------------------------- *
     *                                  Navigation                                   *
     * ----------------------------------------------------------------------------- */
    nav {
        /* clearing für die floatenden LIs */
		padding: 0px 15%;
        overflow: hidden;
        font-size: 1.0em; /* 16px */
    }

    nav ul {
        margin: 0px;
    }

    nav ul li {
        float: left;
        border: none;
        width: auto;
    }

    nav ul > li > a {
        padding: 0.6em 10px 0.6em 10px;
        display: inline-block;
		text-align: center;
    }
	
	nav .link {
		padding: 0.3em 10px 1.5em 10px;
	}

	nav .link:hover {
		padding: 0.3em 10px 1.5em 10px;
	}
	
	nav ul .navselect {
		margin: 0px;
		padding: 0.3em 10px 1.9em 10px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center
	}

	nav ul .navuselect {
		margin: 0px;
		padding: 0.5em 10px 1.4em 10px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center
	}

	
}

/* ----------------------------------------------------------------------------- * 
 *                          Styles für Multi-Toggle-Nav                          *
 * ----------------------------------------------------------------------------- */

header {
    position: relative;
}

/* Menü-Link im Header zum Ein-und Ausblenden des Menüs */
a.toggle-nav {
    display: inline-block;
    position: absolute;
    right: 5%;
    /*top: 1.3em;*/
    top: 3.0em;
    text-decoration: none;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    border-radius: 0.4em;
    cursor: pointer;
    padding: 0.357em 0.5em;
    color: #ffffff;
    background: #069a32;
    border: 1px solid #069a32;
	z-index: 10;
}

a.toggle-nav:hover {
    border: 1px solid #069a32;
    background: #d4ead4;
    color: #069a32;
}

/* NEU */
/* ----------------------------------------------------------------------------- *
 *                      Beispiel Multi-Level-Menü im Basis-Layout                *
 * ----------------------------------------------------------------------------- */
/* Clearing von nav, nav.ul, .main mit .clearfix statt mit overflow:hidden;
 * sonst wird die zweite menüebene abgeschnitten! */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

/* ----------------------------------------------------------------------------- *
 *                          Multi-Level-Menü im Basis-Layout                     *
 * ----------------------------------------------------------------------------- */
/* Positionierung der Navigation "auf" dem Hauptinhalt, damit die zweite Menüebenen nicht verdeckt wird. */
nav {
    overflow: inherit;
    position: relative;
    z-index: 10;
    width: 100%;
}

.main {
    z-index: 5;
}

/* Layout und Positionierung der 2. Menüebene */
nav ul ul {
    z-index: 20;
    display: none;
}

nav ul .openmenu ul {
    display: block;
}

nav ul li {
    position: relative;
}

nav ul li li {
	font-size: 14px;
    float: none;
}

nav li.act {
	padding: 0px;
}

nav ul > li > a, nav ul > li > b, nav ul > li > strong {
	padding: 0.6em 20px;
    display: block;
    font-weight: normal;
}

nav .link {
	padding: 0px 20px;
}

nav .link:hover {
	padding: 0px 20px;
}

nav .navselect {
	margin: 0px;
	padding: 0.6em 40px;
	display: block;
}

nav .navuselect {
	margin: 0px;
	padding: 0.6em 40px;
	display: block;
}

#navMain {
    display: none;
}

/* Einblenden des Untermenüs onHover für alle Ebenen */
nav ul li:hover ul {
    display: block;
}

/* ----------------------------------------------------------------------------- *
 *                      Styles für Menü ab Tabletversion                         *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {
	header {
		position: fixed;
		z-index: 5;
		}

    nav > ul > li {
        height: 3.4em;  /* wenn diese Zahl verändert wird, auch im Folgenden TOP verändern */
        width: 20%;
    }

    /* Layout und Positionierung der 2. Menüebene */
    nav ul ul {
        top: 3.75em;
        position: absolute;
        width: auto;
        margin: 0;
        min-width: 100%;
    }

   	nav ul > li > a, nav ul > li > b, nav ul > li > strong {
        padding: 0.3em 10px 1.6em 10px;
        display: block;
		    }
	
    #navMain {
        display: block;
    }
		
	nav .link {
	padding: 0px;
	}

	nav .link:hover {
	padding: 0px;
	}


    /* Menü-Link verstecken in großen Viewports */
    a.toggle-nav {
        display: none;
    }
	
}

/* ----------------------------------------------------------------------------- *
 *                     Styles für große Desktops                            *
 *                           1248px / 16px/em = 78em                                   *
 * ----------------------------------------------------------------------------- */

@media only screen and (min-width: 103em) {

    nav > ul > li {
        height: 3.1em;  /* wenn diese Zahl verändert wird, auch im Folgenden TOP verändern */
        width: 20%;
    }

    /* Layout und Positionierung der 2. Menüebene */
    nav ul ul {
        top: 3.45em;
        position: absolute;
        width: auto;
        margin: 0;
        min-width: 100%;
    }

   	nav ul > li > a, nav ul > li > b, nav ul > li > strong {
        padding: 0.7em 10px 0.9em 10px;
        display: block;
    }
	
	nav ul .navselect {
		margin: 0px;
		padding: 0.7em 10px 0.9em 10px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center;
	}
	
	nav ul .navuselect {
		margin: 0px;
		padding: 0.7em 10px 0.9em 10px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center;
	}
	
    /* 100% Navigation wird hier wieder überschrieben NEIN, NICHT MEHR
    nav {
        width: 25%;
    }

    nav ul {
        margin: 0;
		position: relative;
    }

    nav ul ul {
        position: absolute;
        top: 0;
		left: 100%;
    }

    nav ul li.act ul {
        
    }

    nav > ul > li {
        height: auto;
        width: auto;
    }

    nav ul > li > a, nav ul > li > b, nav ul > li > strong {
        padding: 0.6em 20px;
    }
    nav ul ul > li > a, nav ul ul > li > b, nav ul ul > li > strong {
        padding: 0.7em 20px;
    }	
	
    nav ul li {
        float: none;
    } */
}