html {
	/*padding: 0 5% 10px;*/
}

body {
	position:relative;
	/*background: #d5d5d5;*/
        background: #f1f1f1;
	font-family: Arial, Helvetica, sans-serif;
	width: 1380px;
	margin:0 auto;
        padding: 0 0.5% 8px;
	font-size: 12px;   
	color: #000000;
}

* {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */

}

a {
	text-decoration: none;
}

header {
	width: 100%;
	height: 116px;
	margin: 5px auto 0px;
	/*color:white;*/
}

header h1 a{
	display:block;
	color:navy;
	padding:2px 0 0 2px;
	font-size: 115%;
}

header h1 span {
	font-size:50%;
	color:navy;
	padding: 0 4px;
}

header h1 img {
        max-width: 100%;  /*Autoskalierung Bild mit Maximum Originalgröße*/
        height: auto;
}

.ribbon{
	margin: 0;
	position: relative;
        float: left;
	background: rgba(255,255,255,0.9);
        border-radius: 0.5em 0.5em 0 0;
	/*border: 1px solid navy;
	box-shadow: 0px 1px 3px rgba(0,0,140,.9);*/
	/*padding: 10px 15px;*/
	/*clear: both;*/
	text-align: center;
	padding: 5px 2px 0 0;
	width: 18.4%;
}
 

header a#navlink {
	display:none;
	float: right;
	text-decoration: none;
	font-size: 1.8em;
	font-weight: bold;
	margin:5px 15px 0 0;
}

ul#breadcrumb {
               position: absolute;
               top: 2px;
               left: 19%;
               margin: 1px -5px 1px 2px;
	       list-style-type: none;
               font-style: italic;
}

ul#breadcrumb li {
                  float: left;
}

ul#breadcrumb:lang(de) li ::before  {
           padding: 0 5px;
           color: navy;
           content: "Sie sind hier:";
}

ul#breadcrumb:lang(en) li ::before  {
           padding: 0 5px;
           color: navy;
           content: "You are here:";
}

ul#breadcrumb:lang(fr) li ::before  {
           padding: 0 5px;
           color: navy;
           content: "Vous \EA tes ici:";
}

ul#breadcrumb:lang(nl) li ::before  {
           padding: 0 5px;
           color: navy;
           content: "U bent hier:";
}

ul#breadcrumb:lang(de) li + li ::before {
           padding: 0 5px;
           color: navy;
           content: "/";
          /* content: "\25B6"; */
}

ul#breadcrumb:lang(en)  li + li ::before {
           padding: 0 5px;
           color: navy;
           content: "/";
          /* content: "\25B6"; */
}

ul#breadcrumb:lang(fr)  li + li ::before {
           padding: 0 5px;
           color: navy;
           content: "/";
          /* content: "\25B6"; */
}

ul#breadcrumb:lang(nl)  li + li ::before {
           padding: 0 5px;
           color: navy;
           content: "/";
          /* content: "\25B6"; */
}

ul#header-top { 
	position:absolute; 
	top:2px; 
	right:20px;
        margin: 1px -5px 1px 2px;
	list-style-type: none;  
}

ul#header-top  li { 
        float: right; 
        list-style-type: none; 
        padding: 0 10px; 
        border-left: 1px #ACACAC solid; 
}

ul#header-top  li:last-child { border: none; }	

header p{
        /*background-color: #EDF0F7;*/ 
	/*background: #4E68AD url("../img/welle.png") bottom -55px right no-repeat;*/
        background-image: linear-gradient(#f1f1f1, white, #f1f1f1, transparent, transparent, transparent, #B5C0DE, #EDF0F7, #B5C0DE), url("../img/welle.png");
        background-repeat: no-repeat;
        background-position: right bottom;
        /*background-clip: content-box;*/
	width: 100%;
	height:118px;
        margin: 0;
        /*padding: 25px 0 0 0;*/
}

/** CONTENT **/
main {
	float:left;
	width: 100%;
	margin: 0 0 10px 0;
	background: #fff;
}

article {
	padding: 3px;
        margin: 3px;
	width: 80.5%;
	float:right;
}


/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    cursor:pointer;
    /*border-bottom: 1px dotted black;*/
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    /*width: 150px;*/
    background-color: #E6ECFF;
    color: navy;
    text-align: center;
    font-size: 0.95em; 
    padding: 1px 1px;
    border: 1px solid #4E68AD;
    /*opacity: 0;
    transition: opacity 0.9s;*/
 
    position: absolute;
    z-index:20;
    top: 130%;
    left: 50%;
    margin-left: -30px;
}

.breit {
  width: 270px;
}

.schmal {
  width: 170px;
}

/* für Überschriften */
.tooltip .tooltiptext em {
    background-color: navy;
    color: white;
    text-align: center;
    font-style: normal;
    font-size: 1.01em; 
    display: block; 
    padding: 0.2em 0 0.2em 0;
    margin-bottom: 0.4em;
}

.tooltip .tooltiptext img {
	padding: 0px 1px 0px !important;
        margin: 0px 1px 0px !important;
        max-width: 100% !important;
        height: auto;
        /*max-width: 17px !important;*/
}

/* Tooltip-Anzeige */
.tooltip:focus .tooltiptext,
.tooltip:hover .tooltiptext {
    visibility: visible;
    /*opacity: 1;*/
}

/* SVG-Grafiken highlight */
figure svg path:hover {
	    fill: white;
	    -webkit-filter: drop-shadow(0px 15px 1px black);
	    filter: drop-shadow(0px 15px 1px black);
	    opacity:0.35;
	  }

div svg path:hover {
                  fill: white !important;
                  opacity:0.35 !important;
                }

h1,
h2 {
	font-size: 1.75em; 
	font-weight: normal; 
	/*font-family: 'Tauri', serif; */ 
	padding-left: 10px; 
	color: #4E68AD; 
	/**text-transform: uppercase;**/
	/*border-left:5px solid #4e68AD;*/
}
	
h2 span {
	font-size: 0.80em; 
	color: #000000; 
	text-transform: none;
        font-weight: bold;
}

h3	{ 
	font-size: 1.1em; 
	font-weight: bold; 
	line-height: 1.7em; 
	padding: 1px; 
	margin: 0px; 
	/**color: #4E68AD;**/
        color: #000000;
        background: #f1f1f1;
       /* border: 1px solid #D8DEEE;*/
        border-radius: 0.5em 0.5em 0 0 ; 
}		

h4	{ 
	font-size: 1.15em; 
	font-weight: bold; 
	padding: 0px; 
	margin: 0px; 
	/**color: #4E68AD;**/
        color: #000000;
}		

h5	{ 
        clear: left;
	font-size: 1.1em; 
	font-weight: bold; 
        line-height: 1.9em; 
	padding: 2px 20px 0px 20px; 
	margin: 0px 10px 0px 10px; 
	/**color: #4E68AD;**/
        color: #000000;
}


h5 span {
	font-size: 1.20em; 
	color: #4E68AD; 
}

h6	{ 
	font-size: 1.1em; 
	font-weight: bold; 
        line-height: 1.7em; 
	padding: 2px 20px 0px 20px; 
	margin: 0px 10px 0px 10px; 
	/**color: #4E68AD;**/
        color: #000000;
}


h6 span {
	font-size: 1.20em; 
	color: #4E68AD; 
}

.trennung {
        hyphens: auto;
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
}				

p       {
	/*text-align: left;*/
	line-height: 1.3em; 
	padding: 2px 5px;
	margin: 3px 3px; 
}


blockquote {
         font-style: italic;
         font-variant: small-caps;
}

.center {
	
        text-align: center;

}

.left {
	
        text-align: left;

}

.center_blue {
	
        text-align: center;

        color: navy; 
	font-size: 0.96em; 
	line-height: 0.80em; 
	margin-bottom: 10px; 
}

a 	{ 
	color: #4E68AD; 
	padding: 2px 0; 
	outline: none; 
	text-decoration: none; 
}
a:hover 	{ 
	color: darkorange; 
	text-decoration: none; 
}
a:focus 	{ 
	outline: none; 
	color: maroon; 
}

/*a.more	{ 
	float: right; 
	font-weight: bold; 
}
a.more:hover { 
	color: #535353; 
}
a.more:after{
	content:" \2192 ";
	font-size:1.2em;
	font-weight:bold;
}*/

.blue {
       color: blue;
}


ul.square {
	list-style-type:circle;
        color: #000000;
        float: left;
        margin: 0 0 5px 8px;
	font-weight:bold;
}

ul.square span {
	font-weight:normal;
        padding: 0px 5px;
}

ul.square li{
	padding: 3px 5px;	
}

ul.none {
	list-style-type:none;
        color: #000000;
        margin: 0 0 2px 0px;
        padding: 0px 0px;
	font-weight:normal;
}

ul.none span {
	font-weight:normal;
        padding: 0px 2px;
}

ul.none li{
	padding: 0px 1px;
        line-height: 1.1em;
}

ul.none img{
	padding: 0px 1px 0px !important;
        margin: 0px 1px 0px !important;
        max-width: 100% !important;
        height: auto;
        /*max-width: 18px !important;*/
}

ul.disc {
	list-style-type:disc;
        color: #000000;
        float: left;
        margin: 4px 4px 6px 4px;
	font-weight:bold;
}

ul.disc span {
	font-weight:normal;
        padding: 0px 3px;
}

ul.dash {
	list-style-type:disc;
        color: #000000;
        /*float: left;*/
        margin: 5px 4px 5px 4px;
        padding: 0px 15%;
	font-weight:normal;
}

ul.dash2 {
	list-style-type:circle;
        color: #000000;
        float: left;
        margin: 5px 4px 5px 10px !important;
        padding: 2px 2px 2px 10px !important;
	font-weight:normal;
}

ul.dash2 li{
	padding: 1px 2px !important;	
}

ul.dash li,
ul.disc li{
	padding: 1px 1px;	
}


figure {
        clear: left;
        float: left;
        display: table;
        /*position: relative;*/
        margin: 2px;
        padding: 5px;
}

figcaption {
        display: table-caption; 
        caption-side: bottom;
        font-weight:normal;
        color: #818181;
        margin: 1px;
        padding: 2px 2px 2px 7px;
        text-align: left;
}


table {
	
        width: 100%;

}

th { 
     font-weight:bold;
     text-align:center;
     background-color: #EDF0F7;
 
}

tr:nth-child(even) {
	
                     background-color: #f2f2f2;

}

section.spalte_3 td:nth-last-child(3) { 
                   font-weight:bold;
}

section.spalte_3 td:nth-last-child(2) { 
                   text-align:right; 
}

section.spalte_3 td:nth-last-child(1) { 
                   text-align:center; 
}

section.intro {
	width: 99.5%;
	padding:5px;
	float: left;
}

section.intro_kasten {
	width: 99%;
        margin: 10px 0.7% 4px 0.4%;
	padding:0 0 5px 0;
	float: left;
        border-radius: 0.5em;
        border: 1px solid #B5C0DE;
}

section.intro img {
	float:left;
	margin:0 8px 8px 2%;
        max-width: 100%;
        height: auto;
}

section.intro_kasten img {
	float:left;
	margin:2px 15px 2px 2px;
        max-width: 100%;
        height: auto;
}

section.spalte {
	width: 49%;
	padding:5px 1%;
	float: left;
}

section.spalte_kasten {
	width: 49%;
        margin: 5px 0.4% 4px 0.4%;
	padding: 0 1px 0 1px;
	float: left;
        border-radius: 0.5em;
        border: 1px solid #B5C0DE;
}

section.spalte_kasten img {
	/*float:left;*/
        display: block;
        margin: auto;
	/*margin:0 2% 0px 2%;*/
        max-width: 100%;  /*Autoskalierung Bild mit Maximum Originalgröße*/
        height: auto;
}

section.spalte img {
	margin:0 2% 0px 2%;
        max-width: 100%;  /*Autoskalierung Bild mit Maximum Originalgröße*/
        height: auto;
}

section.spalte_kasten div img,
section.spalte div img {
	margin: 0;
        max-width: none; /*Punktgrafiken bei WQ-aktuell*/
}


section.spalte_3 {
	width: 32.45%;
        margin: 10px 0.4% 0px 0.4%;
	padding:0;
	float: left;
        border-radius: 0.5em;
        border: 1px solid #B5C0DE;
}

section.spalte_3_but {
	width: 32.45%;
	padding:3px 0;
        margin: 5px 0.4% 5px 0.4%;
	float: left;
        border: 1px solid #B5C0DE;
        border-radius: 0.5em;
        background-color: #f1f1f1; 
}

section.spalte_3_but:focus,
section.spalte_3_but:hover {
	 -moz-box-shadow: 3px 3px 6px 6px #555;
	
         -webkit-box-shadow: 3px 3px 6px 6px #555;
	
         box-shadow: 3px 3px 6px 6px #555;
}

section.spalte_3_but img { /*Teaser*/
	float:left;
	margin:5px 3%;
        /*max-height: 66px;
        width: auto;*/
        max-width: 100%;  /*Autoskalierung Bild mit Maximum Originalgröße*/
        height: auto;
        border: 1px solid #B5C0DE;
}

select.Auswahlkurz {
                 width: 100%;
                 display: block;
}

select.Auswahlultrakurz {
                 width: 90px;
}

div.kartenlegende {
                position: relative;
                top: 5px;
                left: 0px;
                z-index:5;
                background: white;
                opacity: 0.8;
                padding: 2px;
                max-width: 420px;
                min-width: 200px;
}

div.aktualisierung {
                  position: relative;
                  top: 6px;
                  left: 12px;
                  z-index: 6;
                  background: white;
                  opacity: 0.9;
                  padding: 2px;
                  max-width: 420px;
                  color: darkblue;
                  font-size: 0.9em;
}

nav.navgebiet {
               float: left;
               margin: 89px 0 0 5px;
               overflow: hidden;
}

nav.navgebiet ul {
               margin: 0;
               padding: 0;
}

nav.navgebiet ul li {
                     display: inline-block;
                     list-style-type: none;
}

.navtop,
nav.navgebiet > ul > li > a {
        background-color: #92A2CE;
        border-top: 1px solid #B5C0DE;
        border-left: 1px solid #B5C0DE;
        border-right: 1px solid #B5C0DE;
        color: navy;
        border-radius: 0.3em 0.3em 0 0;
        display: block;
        font-size: 1.35em;
        font-weight: 600;
        /*height: 2em;*/
        letter-spacing: .10rem;
        /*line-height: 2em;*/
        padding: 0.2em 0.5em;
        margin: 0 0.09em 0 0;
        /*text-transform: uppercase;*/
        text-shadow: 2px 2px 2px rgba(181,192,222,.9);
}

nav.navgebiet > ul > li:first-child {
        margin: 0 0.5em 0 0;
}

nav.navgebiet > ul > li:last-child {
        margin: 0 0 0 0.5em;
}

.navtop,
nav.navgebiet > ul > li > a:focus,
nav.navgebiet > ul > li > a:active {
           background-color: white;
           cursor: pointer;
        }

nav.navgebiet > ul > li > a:hover {
           text-shadow: 1px 1px 1px navy, 1px -1px 1px navy, -1px 1px 1px navy, -1px -1px 1px navy;
           cursor: pointer;
           color: white;
        }


nav.navfluss {
       float: left;
       margin-right: 3px;
       margin-left: 2px;
       margin-top: 10px;
       width: 250px;
}

nav.navfluss {
  overflow: hidden;
  text-align: left;
 
}

  nav.navfluss > ul {
    list-style-type: none;
       /*navi-eintrag*/
        margin: 0;
        padding: 0;
	outline: none;
   }

    nav.navfluss > ul > li {
      display: block;
      text-align: center;
    }

nav.navfluss > ul > li > a {
               background-color: #B5C0DE;
               /*border-bottom: 1px solid rgba(5,5,100,.1);*/
               border-right: 1px solid rgba(5,5,100,.1);
        color: navy;
        display: block;
        font-size: 1.15em;
        font-weight: 600;
        padding: 0.2em 0.5em;
        margin: 0 0.1em 0 0;
        text-indent: 0.5em;
        text-align: left;
        /*text-transform: uppercase;*/
        text-shadow: 2px 2px 2px rgba(181,192,222,.9);
        transition: all .1s ease;
}

/*nav.navfluss > ul > li > a:focus,*/
nav.navfluss > ul > li > a:hover {
           /*text-shadow: 1px 1px 1px navy, 1px -1px 1px navy, -1px 1px 1px navy, -1px -1px 1px navy;*/
           cursor: pointer;
           color: white;
        }


nav.navfluss > ul > li > ul {
            list-style-type: none;
            /*navi-eintrag*/
           margin: 0;
           padding: 0;
	   outline: none;
           max-height: 0px; /*Navigation zusammenklappen*/
           overflow: hidden;
           transition: all .5s linear;
          }


nav.navfluss .navsub:focus + ul,
nav.navfluss .navsub:active + ul {
              max-height: 800px;
               }

nav.navfluss > ul > li > ul > li {
      display: block;
      text-align: center;
    }


nav.navfluss > ul > li > ul > li > a {
               background-color: #D8DEEE;
               /*border-bottom: 1px solid rgba(5,5,100,.1);*/
               border-right: 1px solid rgba(5,5,100,.1);
        color: navy;
        display: block;
        font-size: 1.15em;
        font-weight: 500;
        padding: 0.2em 0.5em;
        margin: 0 0.1em 0 0;
        text-indent: 0.5em;
        text-align: left;
        text-shadow: 2px 2px 2px rgba(181,192,222,.9);
}

/*nav.navfluss > ul > li > ul > li > a:focus,*/
nav.navfluss > ul > li > ul > li > a:hover {
           cursor: pointer;
           font-style:italic; 
           border-left: 3px solid #B5C0DE;
        }

/* nav.navfluss > ul > li > ul > li:hover > a::before {
                color: navy;
                content: '\00BB\ ';
              }  */

.navsub::after {
                   content: '  \2193\ ';

                   }

/*aktuelle Seite in Navigation anzeigen*/

body#basisinfo li#basisinfonav > a,
body#startseite li#startseitenav > a,
body#donaugebiet li#donaugebietnav > a,
body#wesergebiet li#wesergebietnav > a,
body#elbegebiet li#elbegebietnav > a,
body#rheingebiet li#rheingebietnav > a,
body#emsgebiet li#emsgebietnav > a, 
body#odergebiet li#odergebietnav > a {
           background-color: white;
}

main#basis ul#basisnav,
main#dohwnw ul#dohwnwnav,
main#dopegel ul#dopegelnav,
main#domess ul#domessnav,
main#wehwnw ul#wehwnwnav,
main#wepegel ul#wepegelnav,
main#wemess ul#wemessnav,
main#elhwnw ul#elhwnwnav,
main#elpegel ul#elpegelnav,
main#elmess ul#elmessnav,
main#rhhwnw ul#rhhwnwnav,
main#rhpegel ul#rhpegelnav,
main#rhmess ul#rhmessnav,
main#rhaktWQ ul#rhaktnav,
main#emhwnw ul#emhwnwnav,
main#empegel ul#empegelnav,
main#emmess ul#emmessnav,
main#odhwnw ul#odhwnwnav,
main#odpegel ul#odpegelnav,
main#odmess ul#odmessnav {
                         max-height: 800px;
}

footer {
        float: left;
}

div#up {
       float: right;
}

div#up::before {
                   content: '  \21E1\ ';
                   color: black;
               }

@media only screen and (max-width: 1280px) {
body {width:1270px;}
nav.navfluss {width:225px;}
header h1 a{font-size: 105%;}
}

@media only screen and (max-width: 960px) {
body{width:100%}	
header h1.ribbon {float: left; width:60%;}
ul#breadcrumb {display: none;}
article {width:100%}
.ribbon::before {display:none;}
header a#navlink {
	display: block;
}

ul#header-top { 
	position:relative;
}

header p {
        float: left;
	height:0;
	margin:0;
        padding:0;
}

nav.navgebiet {
      margin: 2px 0 0 0;
      float: left;
}
nav.navgebiet > ul > li {
      display: inline-block;
      text-align: center;
    }

nav.navgebiet > ul > li:first-child,
nav.navgebiet > ul > li:last-child {
      margin: 0;
}
}
/* 1-Spaltenlayout  */
@media only screen and (max-width: 600px) {

header h1.ribbon {
          width:60%;}
header h1 a {font-size: 0.9em}

nav.navgebiet > ul > li {
      display: block;
}

nav.navgebiet {
               margin: 0;
               width: 100%
}
nav.navfluss {
              width: 99%
}

article section.spalte_3,
article section.spalte_3_but,
article section.spalte_kasten, 
article section.spalte {width:99%;}
			
}


@media print {

html {
    font-family: "times new roman", times, serif;
    text-align: justify;
  }

header {height:60px;}
header h1.ribbon {float: left; width:60%;}
ul#breadcrumb {position: absolute;top: -7px;left: -9px;}

body{width:100%}
article {width:100%}

nav.navgebiet,
nav.navfluss   {
    display: none;
}
}