/*
p,dir,ol,ul,div {text-align: justify;color: #0000AF;font-weight: normal; line-height:140%;font-family: kg;font-size: large;}
body { background: url('../bilder/Logopaket/Logo_HGtransparent-02.png') no-repeat center center #e7e8ee; font-family: kg; margin-left: 20pt; margin-right: 10pt; margin-top: 10pt;}
td {background-color: rgba(256,256,256,0.7);}

figcaption {text-align: justify;font-size:10pt; font-weight: normal;line-height:100%;}

#f10n { font-size:10pt; font-weight: normal;}
#fm { font-size:medium; font-weight: normal;}

#c {text-align: center;}
#r {text-align: right;}
#l {text-align: left;}
.ro {color: #DF0000;}
.bl {color: #0000AF;}
.gr {color: #009F00;}
.sw {color: #000000;}
td {font-family: ARIAL,HELVETICA,VERDANA;text-align: justify;vertical-align: top;color: #0000AF;}
td.c {font-family: ARIAL,HELVETICA,VERDANA;text-align: center;vertical-align: middle;color: #0000AF;}
h1 {font-family: ARIAL,HELVETICA,VERDANA;font-size: 16pt;}
a:link { color: #009F00;text-decoration:none;font-weight: bold;}
a:visited {color: #009F00;text-decoration:none;font-weight: bold;}
a:active {color: #009F00;text-decoration:none;font-weight: bold;}
a.standard {font-family: ARIAL,HELVETICA,VERDANA;font-weight: bold;color: #009F00;}

a.infobox { font-family: ARIAL,HELVETICA,VERDANA;color: #009F00;text-decoration:none; font-weight: normal;}
a.infobox:hover { background:white; text-decoration:none; }
a.infobox span { visibility:hidden; position:absolute; left:2em; margin-left:56px;
                 margin-top:1.5em; padding:0.5em; text-decoration:none; font-size:smaller; font-weight: normal;}
a.infobox:hover span { visibility:visible; border:2px solid #009F00;
                       color:#000080; background:#FFFFCC; font-weight: normal; }

a.infobox2 { font-family: ARIAL,HELVETICA,VERDANA;color: #009F00;text-decoration:none;}
a.infobox2:hover { background:white; text-decoration:none; }
a.infobox2 span { visibility:hidden;position: relative;
                  text-decoration:none; font-weight: normal; font-size:smaller;}
a.infobox2:hover span { visibility:visible; font-weight: normal;}

a.infobox3 { font-family: ARIAL,HELVETICA,VERDANA;color: #000080;text-decoration:none; font-weight: normal;}
a.infobox3:hover { background:#FFFFCC; text-decoration:none; }
a.infobox3 span { visibility:hidden; position:absolute; left:10px; top:2px; width:450px; padding-left:20px; 
                  padding-right:20px; text-decoration:none; color:#000080; border:3px solid #009F00; 
                  background:#FFFFCC; padding-bottom:5px; padding-top:5px; font-weight: normal;}
a.infobox3:hover span {visibility:visible;}

a.tooltip { font-family: ARIAL,HELVETICA,VERDANA;position: relative;	width:80%;font-size: large;text-align: center; 
            line-height: 120%;}
a.tooltip:hover {text-decoration:none;position: relative; }
a.tooltip span { display: none; }
a.tooltip:hover span {display: block;font-size:smaller; position:absolute;left:-190px;right: auto; top:50px; padding-left:10px;
                 width:380px; padding-right:10px; text-decoration:none; color:#000080; border:3px solid #009F00; 
                 background:#FFFFCC; padding-bottom:5px; padding-top:5px; font-weight: normal;
                 margin-left: 80px;margin-right: auto;}
  */                                

/* ====================================================   GLOBAL DEFINITION   ==================================================== */

@font-face { font-family: 'kg'; src: url('KGSorryNotSorry.ttf') format('truetype');}
@font-face { font-family: 'kg'; font-weight: bold; src: url('KGSorryNotSorryChub.ttf') format('truetype');}

@font-face { font-family: 'rw'; src: url('Raleway-Regular.ttf') format('truetype');}
@font-face { font-family: 'rw'; font-weight: bold; src: url('Raleway-SemiBold.ttf') format('truetype');}
@font-face { font-family: 'rw'; font-style: normal; font-weight: bold; src: url('Raleway-Medium.ttf') format('truetype');}

* { margin: 0; padding: 0;}

html { padding: 5px 2%;}

body {
    width: 950px; margin: 0 auto; 
    font: normal 0.8em rw; color: #3a3a3a; 
    background: #ffffff;
}

a { font-weight: bold;}
a:hover { color: #8F8F90;}

a.more { float: right;}
a.more:after {
    content: " >"; 
    display: inline-block; 
    height: 1em; 
    padding: 0 .5em 0.5em 0.5em;
    border-radius: 1em;
    background: #ffa323;
    margin-left: 10px;
}
a.less { float: right;}
a.less:after {
    content: " <"; 
    display: inline-block; 
    height: 1em; 
    padding: 0 .5em 0.5em 0.5em;
    border-radius: 1em;
    background: #ffa323;
    margin-left: 10px;
}
footer a { color: #3a3a3a;}

a.more:hover, footer a:hover { color: #4A4A4A; text-decoration: none;}

a.infobox { color: #3a3a3a;text-decoration:none; }
a.infobox:hover { background:white; text-decoration:none; }
a.infobox span { visibility:hidden; position:absolute; left:2em; margin-left:56px;
                 margin-top:1.5em; padding:0.5em; text-decoration:none; font-size:smaller; font-weight: normal;}
a.infobox:hover span { visibility:visible; border:2px solid #8F8F90;
                       color:#3a3a3a; background:#FFFFCC; font-weight: normal; }

a.infobox2 { color: #3a3a3a;text-decoration:none;}
a.infobox2:hover { background:white; text-decoration:none; }
a.infobox2 span { visibility:hidden;position: relative;
                  text-decoration:none; font-weight: normal; font-size:smaller;}
a.infobox2:hover span { visibility:visible; font-weight: normal;}

a.infobox3 { color: #3a3a3a;text-decoration:none; font-weight: normal;}
a.infobox3:hover { background:#FFFFCC; text-decoration:none; }
a.infobox3 span { visibility:visible; position:absolute; left:10px; top:2px; width:450px; padding-left:20px; 
                  padding-right:20px; text-decoration:none; color:#3a3a3a; border:3px solid #8F8F90; 
                  background:#FFFFCC; padding-bottom:5px; padding-top:5px; font-weight: normal;}
a.infobox3:hover span {visibility:visible;}
a.tooltip:hover {text-decoration:none;position: relative; }
a.tooltip span { display: none; }
a.tooltip:hover span {display: block;font-size:smaller; position:absolute;left:-150px;right: auto; top:50px; padding-left:10px;
                 width:380px; padding-right:10px; text-decoration:none; color:#3a3a3a; border:3px solid #8F8F90; 
                 background:#FFFFCC; padding-bottom:5px; padding-top:5px; font-weight: normal;
                 margin-left: 80px;margin-right: auto;}

p {line-height: 1.6em; margin: 10px 0 10px 10px;}

h1 {font: bold 1.875em rw;color: #3a3a3a;}
h2 { 
    font-size: 1.6em; font-weight: normal;
    color: #7C2D48; 
    padding: 10px;
    border-top: 4px dotted #ffffff;
}
h2.first { border: none;}
h2.etlink {	border: none;}
h2.ltlink {	border: none;padding-left: 50px;}
h2.hplink {	border: none;padding-left: 50px;}
h2.etlink a {
	 font: normal 1.20em kg; text-decoration: none;
	 color: #95c040; border: none;
}
h2.ltlink a {
	 font: normal 1.20em kg; text-decoration: none;
	 color: #c1087c; border: none;
}
h2.hplink a {
	 font: normal 1.20em kg; text-decoration: none;
	 color: #701042; border: none;
}

h3 {font: bold; 1.10em rw; color: #3a3a3a; margin: 20px 0;}

img, a img { border: 0 none;}

ul.article { margin-left: 30px;}
ul.article li { margin-bottom: 0.7em;}
ul.mich { margin-left: 30px;}

ul.bullets  { color: #FFA128;}
ul.bullets li {
    width: 100%; padding-left: 5px;
    font-size: 1.10em; font-weight: bold; 
    color: #FFA128;
}
ul.bullets li span { color: #474747;}

dl { margin-bottom: 50px; clear: left;}
dt {	
    float: left; font-weight: bold;
    margin-right: 5px; padding: 5px; width: 90px;
}
dd { margin: 2px 0; padding: 5px 0;}

.rTab { border-collapse: collapse;}
.rTab td {line-height:160%; border-width: 1px; border-style: solid; padding-left: 5px; padding-right: 5px;}


#et {font: normal 1.10em kg;color: #95c040;}
#lt {font: normal 1.10em kg;color: #c1087c;}
#hp {font: normal 1.10em kg;color: #701042;}
#ttet {font-family: 'rw'; border:3px solid #95c040;text-align: center;font-size:0.4em; }
#ttlt {font-family: 'rw'; border:3px solid #c1087c;text-align: center;font-size:0.4em; }
#tthp {font-family: 'rw'; border:3px solid #701042;text-align: center;font-size:0.4em; }
#c {text-align: center;}

.news span { visibility:visible; display:block; position:relative; top:2em; left: 2em; margin-left:56px;
             margin-top:1.5em; padding:0.5em; text-decoration:none; font-size:larger; font-weight: bold; border:2px solid #ffa323;
                       color:#3a3a3a; background:#FFFFCC; }
                                                                    
/* ====================================================  HEADER   ==================================================== */

header {
    width: 100%; height: 100px;
    background: #e8e8e8; background-size: contain; border: 1px solid #E5E7EB;
    font-family: rw; font-weight: bold; font-size: medium;
    text-align: center; vertical-align: text-bottom;
}

#logo	{
    float: left; padding: 10px 10px 25px 80px;
    /*margin: 30px 0 0 30px;*/
    background: url('../bilder/Logo_transparent.png') no-repeat left;
    font-family: rw; font-weight: bold; font-size: larger;
    color: #674d34; text-decoration: none;
}

#navlink {
    display:none; float: right;
    text-decoration: none;
    font-size: 1.875em; font-weight: normal;
    padding: 10px; margin: 30px 30px 0 0;
}

main	{ display: block; position: relative; width: 100%}

article {
    float: left; border: 1px #E5E7EB solid;
    background: url('../bilder/Logo_ELH.png') no-repeat center #efefb9;
	 background-size: contain;
    margin-top: 50px; width: 96%; padding: 20px 2%;
}
article.et {
	background: url('../bilder/bg_ernaehrung.jpg') no-repeat center top #efefb9;
	background-size: cover;
}
article.lt {
	background: url('../bilder/bg_lern.jpg') no-repeat center #efefb9;
	background-size: cover;
}
article.hp {
	background: url('../bilder/bg_lern.jpg') no-repeat center #efefb9;
	background-size: cover;
}

	
section {
    float: left; width: 74%;
    padding-left: 10px; padding-right: 10px;
    font-size: 1.2em;
    background: rgba(232,232,232,0.7);
}
section a { color: #3a3a3a}

section.home {	background: none;}
section.kontakt {width: 100%;	background: none;}
section.spalte home { background: none;}
section.spalte {
    float: left; width:32%; padding:20px 4% 8% 8%;
    min-height: 200px; vertical-align: middle;
}
section.spalte h2	{ border: none;}
main .news-1 { 
    background: url('../bilder/Logo_ELH.png') no-repeat center #EEEEEE;
	 background-size: cover;
} 
main .news-2	{
    background: url('../bilder/Logo_Lern.png') no-repeat right #EEEEEE;
}

aside { float: right; width: 23%; background: rgba(232,232,232,0.7);}
aside.home { float: right; width: 23%; background: none;}
aside ul { margin-left: 1.6em; font-weight: bold;
    /*list-style: none outside none;
    padding: 0 0 1em 5px;
    /*clear: left;*/
}
aside li { line-height: 1.6em;}
aside p { margin-bottom: 20px;}
aside p:last-child { margin-bottom: 10px;
}
aside h2 { 
    font-size: 1.4em;
}
/* ====================================================  NAV   ==================================================== */

nav	{ 
	float: left; 
	width: 100%;  
	list-style-type: none; 
	box-shadow: 0 10px 5px 0 rgba(0,0,0,0.75);
	position: absolute;
	top: -11px; left:0%;
	display: block;
	text-align: center;
	margin: 0 auto 0;
}
nav ul {
    float: left; width: 100%; 
    list-style-type: none;
    background: #673d34;
}
nav ul li { float: left;}
nav ul li:first-child { margin-left: 2%;}
nav ul li a {
    float: left; padding: 16px 0 16px 16px;
    color: #FFFFFF; text-decoration: none;
}
nav ul li a:after {
    content:" | ";
    color: #ffa323; margin-left: 20px;
} 
nav li a:hover, nav li a:focus { background: #701042;}

/* ====================================================   FOOTER   ==================================================== */

footer {
    float: left; height: 50px; width: 100%;
    padding-top: 10px; margin-top: 10px;
    color: #3a3a3a; background: #f4f5d3;
}
footer ul {
    float: left;
    margin-left: 22px;
    list-style-type: none;
}
footer ul li	 {
    display: inline-block;
    border-left: 1px solid #3a3a3a;
}
footer ul li:first-child	 {
    border: 0 none;
}
footer ul li a {
    padding: 0 8px;
}
footer p {
    float: right;
    margin-right: 30px;
    margin-top: 0;
    padding-top: 0;
    text-align: right;
}

/* 2-Spaltenlayout mit breiterem aside */
@media screen and (max-width: 950px) {
    body {width:100%}
    section {width:58%;}
    section.spalte, 
    aside {width:29%;}
}

/* 1-Spaltenlayout mit Navigation unten*/
@media screen and (max-width: 620px) {
    section, 
    section.spalte, 
    aside { float: none; width: 96%; }

    header { height: 200px; }
    #navlink { display:block; }

    article { margin-top: 16px; }
    nav { position:relative; }
    nav ul {
        display: block; 
        background: transparent;
        margin: 3em 0 2em;
    }
    nav ul li{ width: 90%; margin: 5px 2%; }
    nav ul li a{
        width: 90%; background: #7C2D48;
        margin: 5px 5%; border-radius: 10px;
    }
    nav ul li a:after { display:none; } 
}