/* CSS Pegelportal HH  STUCK */
/* digsyland.de        */
/* zum Teil Übernahme von hamburg.de */
/* ks, 10-JAN-2016 */
/* lr ks 28-FEB-2018, ergänzt */
/* lr ks 10-JUN-2018, CSS-Icons ergänzt */

/* normalize */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 4px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/*-----------------------------------------------------------------------------*/

/* Tools */

.hidden{
  display: none !important;
  visibility:hidden;
}

.invisible{
  visibility:hidden;
}

.clearfix:before,.clearfix:after{
  content:"";
  display:table;
}

.clearfix:after{
  clear:both;
}

.clearfix{
  *zoom:1;
}

.trenn {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

.noumbruch{
  white-space:nowrap;
}


/* Layout
-----------------------------------------------------------------------------*/

html{
  overflow-y:scroll;
  font-size: 62.5%;
}

body{
	
  font-size: 14px;
  font-size: 1.4rem;
	
  xfont-size:12px;
  xfont-size:1.2rem;
  font-family: Arial, Helvetica, sans-serif, Sans;
  line-height: 1.8;
  width:100%;
  background-color:darkgray;
}

.wrapper{
  width:980px;
  margin:10px auto;
  background-color:white;
  padding:7px 7px 7px 7px;
}

/* breitere Admin-Seiten */
.page_admin .wrapper{
	width:1300px;
}

.content{
  position:relative;
  min-height: 650px;
}

.footer{
  height:60px;
  text-align:center;
  margin-top: 80px;
  clear:both;
}


/* Design
-----------------------------------------------------------------------------*/


/* Header */

.pheader{
  position:relative;
}

.pheader figure{
  margin:0;
  background-repeat:no-repeat;
  background-position:top center;
  background-color:#efefef;
  height:202px;
}


/* neue Bilder */
.page_lage .pheader figure,
.page_lagebericht .pheader figure,
.page_beschreibung .pheader figure,
.page_betriebsinfos .pheader figure,
.page_admin .pheader figure,
.page_impressum .pheader figure,
.page_gen .pheader figure{
  background-image:url(../img/header-gen.jpg);
}

.page_table .pheader figure{
  background-image:url(../img/header-table.jpg);
}

.page_map .pheader figure{
  background-image:url(../img/header-map.jpg);
}

.page_lagebericht .pheader figure{
  background-image:url(../img/header-lagebericht.jpg);
}

.page_niederschlag .pheader figure{
  background-image:url(../img/header-niederschlag.jpg);
}

.page_beschreibung .pheader figure{
  background-image:url(../img/header-beschreibung.jpg);
}

.page_betriebsinfos .pheader figure{
  background-image:url(../img/header-betriebsinfos.jpg);
}

.page_admin .pheader figure{
  background-image:url(../img/header-intern.jpg);
}

.page_gen .pheader figure, .page_impressum .pheader figure{
  background-image:url(../img/header-gen.jpg);
}

/* Header Branding */

.pheader .lsbg-bug{
  position:absolute;
  bottom:35px;
  left:0px;
}

.pheader .hamburgde{
  position:absolute;
  bottom:50px;
  right:10px;
}

.pheader .warndienst{
  position:absolute;
  bottom:45px;
  left:20px;
}

.pheader .lsbg-bug{
  display:table;
  position:absolute;
  height:33px;
  min-width:300px;
  bottom:35px;
  left:0px;
  background-image:url(../img/slogan.png);
  background-repeat:no-repeat;
  background-position:right;
  margin:0;
  padding:0 40px 0 20px;
  text-align:left;
  vertical-align:middle;
}

h1.warndienst{
  font-family:"UniversNextW04-620CondB","Universe","Arial Narrow",Arial,Helvetica,sans-serif;
  font-weight:bold;
  font-size:30px;
  font-size:3rem;
  color:#444444;
}

h2.lsbg-bug a{
  font-family:"UniversNextW04-420CondR","Universe","Arial Narrow",Arial,Helvetica,sans-serif;
  font-weight:normal;
  font-size:14px;
  font-size:1.4rem;
  color:white;
  text-decoration:none;
  vertical-align:middle;
  display:table-cell;
}


/* Haupt-Navigation */

.navhead{
  height:30px;
  bottom:5px;
  margin-left:0px;
  font-family:"UniversNextW04-420CondR","UniversNextW04-620CondB","Arial Narrow",Arial,sans-serif;
  font-weight:bold;
}

.main-navigation{
  background:rgba(0,0,0,0) -moz-linear-gradient(center top,white 0px,#EAE7E7 100%) repeat scroll 0 0;
  border:1px solid #d1d1d1;
  height:30px;
  padding:0;
  margin:3px 0 0;
  position:relative;
}

.main-navigation li{
  letter-spacing:0.05px;
  display:block;
  float:left;
  list-style:outside none none;
  text-align:center;
  border-left:1px solid white;
  border-right:1px solid #e5e5e5;
}

.main-navigation li:hover{
  background:#fff none repeat scroll 0 0;
}

.main-navigation li.main-nav--home{
  background:rgba(0,0,0,0) url("../img/home.png") no-repeat scroll center center;
  width:30px;
}

.main-navigation li a{
  width:105px;
  margin-left:3px;
  color:#444;
  display:block;
  float:left;
  font-size:12px;
  font-size:1.2rem;
  height:30px;
  line-height:30px;
  padding:0 9px;
  text-decoration:none;
  text-transform:uppercase;
}

/* generische active-Markierung */

.page_map .main-nav--karte,
.page_table .main-nav--liste,
.page_lagebericht .main-nav--lage,
.page_beschreibung .main-nav--warn,
.page_betriebsinfos .main-nav--info,
.page_admin .main-nav--admin,
.page_niederschlag .main-nav--nieder{
  border-color:#545454;
  border-image:none;
  border-style:solid solid none;
  border-width:1px 1px 0;
  margin:-1px 0 0;
  background:#fff none repeat scroll 0 0;
}


/* normale Text-Seiten */

.content--text{
  margin-left:50px;
  margin-right:50px;
  margin-bottom:15px;
  min-height:450px;
}

/*  breite Text-Seiten, Anpassung Backend-Seiten  */

.page_admin .content--text{
  margin:auto;
  padding:3px 50px;
}


/* Karte */

.mapwrapper{
  margin:0 5px 5px;
  position:relative;
  vertical-align:top;
}

.map{
  display:inline-block;
  width:900px;
  margin:5px;
  text-align:center;
}

/* Startkarte ist kleiner */
.map--karte{
   width:800px;
}

.imgwrapper{
  position:relative;/* enthält Tooltips und Marker */
}

.karte{
  margin:5px auto;
}

/* Pegel-Positionen / Pegel-3er-Farben - stehen inline */

/* Status Icon */
.cssicon{
   display:inline-block!important;
  vertical-align:middle;
  margin-top: -3px;
  margin-right: 5px;
}
/* Pegel Circle */
.cssicon--circle{
    width: 14px;
    height: 14px;
	border-radius:100%;
	border: solid 1px #3D3D3D;
	background-color: black; /* dummy */
}

/* Pegel Square */
.cssicon--square{
    width: 14px;
    height: 8px;
	border: solid 1px #3D3D3D;
	background-color: white; /* dummy */

}

/* Pegel Dome */
.cssicon--dome{
     height:7px;
     width:14px;
     border-radius: 14px 14px 0 0;
	border: solid 1px #3D3D3D;	 
}

.cssicon--bowl{
     height:7px;
     width:14px;
     border-radius: 0 0 14px 14px;
	border: solid 1px #3D3D3D;	 
}

/* Pegel-Farben */
.pi_elbe{
	background-color: #548dd4;
}     

.pi-99, .pi_-1{
	background-color: #C2C2C2;	 /*  grau */
}

.pi_0, .pi0{
	background-color: #2ac319;		 /*  grün */
}

.pi_1{
	background-color: #ebea0f;		 /*  gelb */
}

.pi_2{
	background-color: #db2323;		 /*  rot */
}

.pi_3{
	background-color: #851086;	 /*  lila, war orange FF9900 */	
}
#pegelwrapper a{
  position:absolute;
}

/* Länder-Links */

.laenderlink li{
  background-position:left top 5px;
  background-repeat:no-repeat;
  list-style:outside none none;
  margin-left:0;
  padding-left:1em;
  background-image:url("../img/link.gif");
}

.laenderlink li:hover{
  background-image:url("../img/link-hover.gif");
}

.laenderlink li a{
  text-decoration:none;
  font-weight:bold;
  color:#767676;
}

.laenderlink li a:hover{
  color:#336699;
  text-decoration:underline dotted;
}

.link--ns{
  position:absolute;
  left:350px;
  top:580px;
}

.link--hwz{
  position:absolute;
  left:10px;
  top:26px;
}

.link--sh{
  position:absolute;
  left:180px;
  top:90px;
}


/* Legenden */

.legende img{
  vertical-align:sub;
}

.legende--map h2{
   margin-top: 1px;
   margin-bottom: 1px;
}

.legende--map h3{
   font-size: 14px;
   font-size: 1.4rem;
   margin: 0;
   line-height: 20px;
}

.legende--map{
  top:55px;
  right:50px;
  position:absolute;
  display:inline-block;
  padding:5px 10px 5px 5px;
  box-shadow:0 1px 1px 0 rgba(0,0,0,0.3);
  width:220px;
}

.legende--map img{
  vertical-align:sub;
}

.legende--map dl{
  margin-left:6px;
}

.legende dd{
  margin-left:4px;
}

.legende2 dd{
  margin-left:4px;  /* ### */
}

.legende--map dd{
  margin-left:4px;
}

.legende--table,
.legende--table--bottom{  /* ### */
  float:right;/* hat Probleme nur mit inline-block */
  top:10px;
  margin-bottom:-10px;
  position:relative;
  display:inline-block;
  font-size:11px;
  font-size:1.1rem;
  line-height: 1.2;
  padding:0px 10px 0px 0px;
  box-shadow:0 1px 1px 0 rgba(0,0,0,0.3);
}

.legende--table h2,
.legende--table--bottom h2{ /* ### */
  margin:1px 1px 1px 10px;
  font-size:17px;
  font-size:1.7rem;
}

.legende--table dl,
.legende--table--bottom dl{ /* ### */
  margin:1px;
}

.legende--table--bottom{ /* ### */
  width:500px;
  margin:10px 0px 20px 0px;
}


/* Aside */
/* Pegel-Legenden */
aside{
  border:1px solid #E8E8E8;
  background-color:white;
  padding-top:3px;
  padding-bottom:3px;
  padding-left: 5px;
  display:block;
}

/* Legende DListe */
dt,dd{
  display:inline-block;
}

dt{
  padding:0 2px;
  vertical-align:middle;
}

/* top bei mehrzeilig */
.legende--map dt{
	float: left;
}

dd{
  margin-right:10px;
}

/* Legende Liste */
aside ul{
	list-style: none;
}
aside li{
	width:  15em;
	padding-left:7px;
}


/* interne Nav active */
.vor_film .vor_film a,
.vor_filmhh .vor_filmhh a,
.vor_2stunde .vor_2stunde a,
.vor_6stunde .vor_6stunde a,
.vor_12stunde .vor_12stunde a,
.vor_20stunde .vor_20stunde a,
.ezg_1stunde .ezg_1stunde a,
.ezg_2stunde .ezg_2stunde a,
.ezg_6stunde  .ezg_6stunde a,
.ezg_24stunde .ezg_24stunde a,
.vor_api .vor_api a,
.vor_bsh .vor_bsh a,
.icon_film .icon_film a,
.icon_sum .icon_sum a,

.prognose .prognose a, 
.film .film,  
.film_hh .film_hh a, 
.stunde .stunde a, 
.stunde_hh .stunde_hh a, 
.tag .tag a, 
.tag_hh .tag_hh a{
	color: #39B2C9;
	font-weight: bold;
}

li.margin{
	margin-top: 0.5em;
}

/* Footer */

.footer nav{
  margin:5px auto;
  padding-top:5px;
  padding-bottom:5px;
  color:white;
  display:block;
}

.footer a{
  color:#707070;
  text-decoration:none;
}

.footer a:hover{
  color:#336699;
  text-decoration:underline dotted;
}

.navfoot{
  background:rgba(0,0,0,0) linear-gradient(to bottom,white 0px,#f2f2f2 100%) repeat scroll 0 0;
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.23);
  padding:0;
  text-transform:none;
  width:auto;
  color:#b2b2b2;
  overflow:hidden;
  text-align:center;
}

.navfoot ul{
  display:block;
  margin:0;
  padding:0;
}

.navfoot ul li{
  background:rgba(0,0,0,0) none repeat scroll 0 center;
  border-left:1px solid #939292;
  float:left;
  font-size:12px;
  font-size:1.2rem;
  line-height:1.3;
  list-style:outside none none;
  margin:12px 0;
  padding:0 10px;
}

.navfoot ul li:first-child{
  border-left:medium none;
  margin:12px 0;
  padding:0 10px;
}

.navfoot ul li.first{
  background:rgba(0,0,0,0) none repeat scroll 0 center;
}

.navfoot ul li{
  float:left;
  font-size:12px;
  font-size:1.2rem;
  line-height:13px;
  list-style:outside none none;
}

.navfoot ul li{
  display:inline;
}

.navfoot ul li.last-link{
  border-left:medium none;
  float:right;
}

.fineprint{
  font-size:12px;
  font-size:1.2rem;
  line-height:20px;
  color:gray;
  text-align:center;
}

.fineprint em{
	color: red;
}


/* Haupt-Überschrift */

main h1,
caption,
figcaption{
  font-size:24px;
  font-size:2.4rem;
  text-align:left;
  padding:10px 0px;
  color:#1b5c85;
  margin-left:30px;
  font-weight:normal;
}

.page_map figcaption{
    padding:0;
}

.page_admin main h1{
  margin-bottom:20px;
  margin-left:-10px;
  margin-top:5px;
  padding:0 0 0 3px;
}

/* h1 bei breiten Seiten page_lagebericht page_beschreibung*/

.content--text h1{
  margin-left:-1px;
  margin-top:5px;
  padding: 0;
}

/* Table-Caption als h1 */

#pegeltabelle caption{ /* ### */
  position:relative;
  display:inline-block;
  top:-110px;
  margin-left:0px;
  font-size: 24px;
  font-size: 2.4rem;
  text-align: left;
  color: #1b5c85;  
}
/*
.content--text h2{
    position: relative;
    margin-left: -60px;
    margin-top: 5px;
}
  */

h2{
  font-size:20px;
  font-size:2rem;
  font-weight:normal;
  color:black;      /*#1b5c85; */
  margin-top:25px;
  margin-bottom:15px;
}

h2.h--underline{
  border-bottom:solid 1px gray;
}

.page_betriebsinfos h2,
.page_betriebsinfos h3{
  border:none;
}

h3{
  font-size:18px;
  font-size:1.8rem;
  font-weight:normal;
  color:black;
  margin-top:15px;
  margin-bottom:10px;
}

h4{
  font-size:13px;
  font-size:1.3rem;
  font-weight:bold;
  margin-bottom:0px;
}

h4+p{
  margin-top:5px;
}

address{
    font-style: normal;
}

/* Tooltip */

.tooltip-content{
  display:none;/* required */
  position:absolute;/* required */
  width:auto;
  min-width: 365px;
  overflow:visible;
  padding:0 5px 5px 5px;
  font-size:12px;
  font-size:1.2rem;
  text-align:left;
  border:1px solid #819BB4;
  background-color:#F7F7F7;
  z-index:200;
}

.tooltip-content h4{
  font-size:13px;
  font-size:1.3rem;
  color:#2E5C8A;
  background-color:#D0D9DE;
  margin:0px -5px 3px -5px;
  padding:1px 1px 1px 5px;
  vertical-align:middle;
  font-weight:bold;
  background-position:left 7px center;
  background-repeat:no-repeat;
}

.tooltip-content h4.header{
  background-color:white;	
}
.right{
	float: right;
}

.tooltip-content dt{
  display:inline-block;
  width:100px;
  font-weight:bold;
  margin-left:1px;
}

.tooltip-content dd{
  margin-left:5px;
  background-position:left 2px center;
  background-repeat:no-repeat;
}

.tooltip-content dl{
  margin:1px 0px 1px 0px;
}

.tooltip-content dl+h4{
  margin-top:7px;
}


/* Pegel Popup */
/* wayfarerweb.com/jquery/plugins/wowwindow/ */

#wowwindow {
    position: absolute;
    left: 50%;/*margins are adjusted by plugin to place window at center center*/
    top: 50%;
    -moz-box-shadow: 0 0 15px #252525;
    -webkit-box-shadow: 0 0 15px #252525;
    box-shadow: 0 0 15px #252525;
    background: #fff;
    border: 1px solid #7f7f7f;
    position: absolute;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

#wowwindow .pegelleg{
}

#wowwindow h3, th{
    text-align: left;
}

#wowwindow td.pegelwert{
    vertical-align: middle;
    text-align: right;
    padding-right:5px;
}

#wowwindow-image {
    line-height: 0;
}

#wowwindow-image-loading {
    background: url(../img/wowwindow-loading.gif) center center no-repeat;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

#wowwindow-iframe, #wowwindow-video-flash {
    /*position: absolute;
    left: 10px;
    top: 10px;*/
    position: relative;
    z-index: 10;
}

.wowwindow-title {
    font-weight: bold;
    font-size: 11px;
    font-size:1.1rem;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: white;
    cursor: move;
    /*IE6 rules*/
    _display: block;
    _position: relative;
}

#wowwindow-inner {
    padding: 10px;
    position: relative;
    overflow: hidden; /*contains floating elements*/
    /*IE6 rule*/
    _zoom: 1;
}

.wowwindow-controlbar {
    /* background: #252525 url(../img/wowwindow-controlbar.gif) repeat-x; */
    cursor: move;
    background-color: #819BB4;
    overflow: hidden;
    border-bottom: 1px solid #252525;
    padding: 0 30px 0 10px;
    line-height: 18px;
    /*IE6 rule*/
    _zoom: 1;
}

a.wowwindow-close {
    display: block;
    float: right;
    height: 20px;
    width: 20px;
    margin-right: -30px;
    text-indent: -999em;
    background: url(../img/wowwindow-close.gif) no-repeat top left;
    border-left: 1px solid #7f7f7f;
    border-bottom: 1px solid #7f7f7f;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
    /*rules for IE7 and below*/
    *position: relative;
    *right: -9px;
    /*IE6 rule*/
    _display: inline;
}

a.wowwindow-close:hover {
    background-position: bottom left;
}


/* Pegeltabelle */



td.trend-,td.trend-0,td.trend--1,td.trend-1,td.trend-2,td.trend-3{}

/* Ganglinie */

.ganglinie{
  background-image:url(../img/ganglinie.gif);
}

/* Trend-Icons  */
.imgicon{
	background-repeat: no-repeat;
	padding-left: 25px;
	background-position-y:50%; /* zentriert bei mehrzeilig */
	background-position-x:5px;	
}
.trend-0,.trend-{
  background-image:url(../img/trend-0.png);
}

.trend--1{
  background-image:url(../img/trend--1.png);
}

.trend-1{
  background-color:#FCF88C;
  background-image:url(../img/trend-1.png);
}

.trend-2{
  background-color:#DD8080;
  background-image:url(../img/trend-2.png);
}

.trend-3{
  background-color:#A4DFE0;
  background-image:url(../img/trend-3.png);
}

/* Warn-Icons */
/*#####################  nicht mehr verwendet */

.xwarn-0{
  background-image:url(../img/status-0.png);/* grün */
}

.xwarn-1{
  background-image:url(../img/status-1.png);/* gelb */
}

/* warum sind die nicht alle xx-2? */
.xwarn-2,.xnotenieder.warn-3,
.xbacknieder.warn-3{
  background-image:url(../img/status-2.png);/* rot */
}

.xnotenieder.warn-2,
.xbacknieder.warn-2{
  background-image:url(../img/status-3.png);/* orange */
}

.xwarn--1{
  background-image:url(../img/status--1.png);
}

.xelbe{
  background-image:url(../img/elbe.png);
}

td.warn--1,
td.warn-0,
td.warn-1,
td.warn-2,
td.ganglinie{}

/* Warnung Tooltip / Tabelle */

dd.warn--1,
dd.warn-0,
dd.warn-1,
dd.warn-2,
dd.warn-3{}

dd.warn-2,dd.warn-3,
td.warn-2,td.trend-2,
td.trend-3{
  font-weight:bold;
}

/* Farben  Warn-Text*/

dd.warn-0,td.warn-0,
td.trend-{
  color:#007a00;/* grün */
}

dd.warn-1,
td.warn-1{
  color:#EE9118;/* orange */
}

dd.warn-2,
td.warn-2{
  color:#D63E3E;/* rot */
}

dd.notenieder.warn-2,
td.notenieder.warn-2{
  color:#FF6600;/* dklorange */
}

dd.notenieder.warn-3,
td.backnieder.warn-3{
  color:#D63E3E;/* rot */
}

dd.warn--0,td.warn--0{
  color:gray;
}

/* Übernahme Tabelle */

.content table{
  margin:5px;
  border-collapse:collapse;
  line-height:1.2em;
  border:none;
  width:960px;
  display:inline-block;
}

.content--text table{
  width:99.5%;
}

.content .table--pegel{ /* ### */
  margin:0;
  margin-top: 60px;
  width:99.5%;
}

thead th{
  border:none;
  border-right:1px solid white;
  vertical-align:middle;
  height:30px;
}

thead th.colhead{
  text-align:center;
}

/* Standard-Zelle */

tbody tr td{
  border-left:none;
  border-right:1px solid white;
  padding:0.4385em;
  text-align:center;
  vertical-align:middle;
}

td{
  text-align:center;
}

td.right{
  text-align:right;
}

td.left{
  text-align:left;
}
/* erste Zelle */

tbody tr td:first-child{
  text-align:left;
  padding-left:2px;
}

/* letzte Zelle */

tbody tr td:last-child{
  padding-right:1px;
}

.table--pegel td:nth-child(4){
  text-align:right;
  padding-right:10px;
}

/*  Zebra   */

tbody tr:nth-child(even),
.tablesorter-default tr:nth-child(even) td{
  background-color:#E8E8E8;
}

.back0,.backtrend0{
  background-color:#D9E8D1;/* green */
}

.back1,.backtrend1{
  background-color:#FCF88C;/* yellow */
}

.back2,.backtrend2{
  background-color:#DD8080;/* red */
}

.back3,.backtrend3{
  background-color:#A4DFE0;/* teal */
}

a.link--ganglinie{
  text-decoration:underline gray;
  color:black;
}

a.link--ganglinie:hover{
  text-decoration:underline dotted #006699;
  color:#336699;
}

/* spezielle Anpassungen für Tabellen unter Beschreibung */

.page_beschreibung td img{
  margin-left:10px;
}

.page_beschreibung td{
  text-align:left;
}

.page_beschreibung th{
  padding-left:10px;
  padding-right:10px;
}

.page_beschreibung tr.even{
  background-color:white;
}

.content--text caption{
  color:#4a659c;
  font-size:15px;
  font-size:1.5rem;
}

table.gesamtwarnstufe{
  width:auto;
}

table.wasserstaende{
  width:auto;
}

table.niederschlag{
  width:auto;
}


/* Tablesorter */

table.tablesorter thead tr .header{
  background-image:url(../img/bg.gif);
  background-repeat:no-repeat;
  background-position:center right;
  cursor:pointer;
}

table.tablesorter tbody td{
  vertical-align:middle;
}

table.tablesorter tbody tr.odd td{}

table.tablesorter thead tr .headerSortUp{ background-image:url(../img/asc.gif);}
table.tablesorter thead tr .headerSortDown{ background-image:url(../img/desc.gif);}

.tablesorter-default thead .sorter-false{
  background-image:none;
  cursor:default;
  padding:1px 4px;
}

.tablesorter-default th,
.tablesorter-default thead td{
  background-color:#D1D9E1;
}


/* Backend
-----------------------------------------------------------------------------*/

/* Überschriften Aufgaben */

/* Bilder / Filme figure */
#bilder{
		display: inline-block;
}

/* Zoom-Bilder */
figure.grid2 .container{
  width: 50%;
  display: inline-block;
}

.xzoom  .grid {
  width: 200px;
  -webkit-transition-duration: 0.6s; /*Webkit: animation duration*/
  -moz-transition-duration: 0.6s; /*Mozilla: animation duration*/
  -o-transition-duration: 0.6s; /*Opera: animation duration*/
  opacity: 1; /*initial opacity of the image*/
  z-index: 1; /*place non-hover images behind the hover image*/
  margin: 0; /*remove default margin for images*/
  position: relative; /*solve the problem with z-index in Chrome*/
}

.xzoom  .grid:hover { 
  -webkit-transform: scale( 4 ); /*Webkit: increase size to 12x*/
  -moz-transform: scale( 4 ); /*Mozilla: scaling*/
  -o-transform: scale( 4 ); /*Opera: scaling*/
  -ms-transform: scale( 4 );
  transform: scale( 4 );  
  box-shadow: 0px 0px 25px gray; /*CSS3 shadows: 25px fuzzy shadow around the entire image*/
  -webkit-box-shadow: 0px 0px 25px gray; /*Webkit: shadows*/
  -moz-box-shadow: 0px 0px 25px gray; /*Mozilla: shadows*/
  opacity: 1; /*default opacity*/
  z-index: 10; /*place hover image in front the non-hover images*/
  position: absolute;
  left: 500px;
  top: 250px;
}

.zoom  .grid {
  width: 200px;  
  position: relative;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  margin: auto;
  max-width: 200px;
  border-radius: 10px;
  transition: 1s all;
  z-index: 1;
}


.zoom  .grid:hover { 
  transform: scale(4);
  z-index: 10; /*place hover image in front the non-hover images*/  
  position: relative;
  bottom: 0;
  left: 0;
  top: 80px;
  right: 0;
  margin: auto;  
}



.zoom  .grid2 {
  width: 350px;
  -webkit-transition-duration: 0.6s; /*Webkit: animation duration*/
  -moz-transition-duration: 0.6s; /*Mozilla: animation duration*/
  -o-transition-duration: 0.6s; /*Opera: animation duration*/
  opacity: 1; /*initial opacity of the image*/
  z-index: 1; /*place non-hover images behind the hover image*/
  margin: 0; /*remove default margin for images*/
  position: relative; /*solve the problem with z-index in Chrome*/
}




.zoom  .grid2:hover { 
  -webkit-transform: scale( 2 ); /*Webkit: increase size to 12x*/
  -moz-transform: scale( 2 ); /*Mozilla: scaling*/
  -o-transform: scale( 2 ); /*Opera: scaling*/
  -ms-transform: scale( 2 );
  transform: scale( 2 );  
  box-shadow: 0px 0px 25px gray; /*CSS3 shadows: 25px fuzzy shadow around the entire image*/
  -webkit-box-shadow: 0px 0px 25px gray; /*Webkit: shadows*/
  -moz-box-shadow: 0px 0px 25px gray; /*Mozilla: shadows*/
  opacity: 1; /*default opacity*/
  z-index: 10; /*place hover image in front the non-hover images*/
  position: absolute;
  left: 500px;
  top: 50px;
}

.zoom > figure{
	position: relative;
}

.task_header{
  padding-left:60px;
  font-weight:bold;
  background-position:left 5px center;
  line-height:40px;
  background-repeat:no-repeat;
}

.task_header--rain{ background-image:url(../img/task-nieder.gif);}
.task_header--edit{ background-image:url(../img/task-edit.gif);}
.task_header--admin{ background-image:url(../img/task-admin.gif);}
.task_header--sup{ background-image:url(../img/task-sup.gif);}

ul.tasklist--menu{
	padding-left: 5px;
	margin: 0px;
}

ul.tasklist a{
  text-decoration:none;
  color:#49494A;
}

ul.tasklist a:hover{
  color:#39B2C9;
}

li.tasklist_item{
  list-style-type:none;
  padding-left:50px;
  font-weight:bold;
  font-size:14px;
  font-size:1.4rem;
  background-position:left center;
  line-height:40px;
  background-repeat:no-repeat;
}

.tasklist--menu li{
  list-style-type:none;
}

.tasklist--menu a:before{
  content:"\00bb \00a0 "
}

.tasklist_item--niedervor{background:url(../img/task-niedervor.gif);}
.tasklist_item--vorfilm{background:url(../img/task-niederfilm.gif);}
.tasklist_item--vorfilmhh{background:url(../img/task-niederfilm-hh.gif);}
.tasklist_item--nieder1{background:url(../img/task-nieder1.gif);}
.tasklist_item--nieder1hh{background:url(../img/task-nieder1-hh.gif);}
.tasklist_item--nieder24{background:url(../img/task-nieder24.gif);}
.tasklist_item--nieder24hh{background:url(../img/task-nieder24-hh.gif);}
.tasklist_item--ezg1{background:url(../img/task-ezg1.gif);}
.tasklist_item--ezg2{background:url(../img/task-ezg2.gif);}
.tasklist_item--ezg6{background:url(../img/task-ezg6.gif);}
.tasklist_item--ezg24{background:url(../img/task-ezg24.gif);}

.tasklist_item--vor2{background:url(../img/task-vor2.gif);}
.tasklist_item--vor6{background:url(../img/task-vor6.gif);}
.tasklist_item--vor12{background:url(../img/task-vor12.gif);}
.tasklist_item--vor20{background:url(../img/task-vor20.gif);}

.tasklist_item--vor_api{background:url(../img/task-api.gif);}
.tasklist_item--vor_bsh{background:url(../img/task-bsh.gif);}
.tasklist_item--icon_film{background:url(../img/task-iconfilm.gif);}
.tasklist_item--icon_2tag{background:url(../img/task-voricon.gif);}

.tasklist_item--edit{background:url(../img/task-editscreen.gif);}
.tasklist_item--userpass{background:url(../img/task-userpass.gif);}
.tasklist_item--userinfo{background:url(../img/task-userinfo.gif);}
.tasklist_item--useradd{background:url(../img/task-useradd.gif);}
.tasklist_item--pegeledit{background:url(../img/task-pegeledit.gif);}
.tasklist_item--pegelfullrun{background:url(../img/task-pegelfullrun.gif);}
.tasklist_item--log{background:url(../img/task-log.gif);}
.tasklist_item--mail{background:url(../img/task-mail.gif);}
.tasklist_item--exit{background:url(../img/task-exit.gif);}
.tasklist_item--cron{background:url(../img/task-cron.gif);}
.tasklist_item--web{background:url(../img/task-web.gif);}

a.linkadd{
  background-position:left center;
  line-height:15px;
  background-repeat:no-repeat;
  text-decoration:none;
  color:#006699;
  padding-left:25px;
  font-weight:bold;
}

a.linkadd:hover{
  color:#39B2C9;
}

a.linkadd--neubeschr,
a.linkadd--login,
a.linkadd--neuerbericht,
a.linkadd--neuuser,
a.linkadd--neustart,
a.linkadd--neuwarndienst,
a.linkadd--neuinfo,
a.linkadd--neumail,
a.linkadd--neulage{
  background-image:url(../img/add.gif);
}

.klapp{
  display:none;
}

/* Navigation intern */

.navintern a{
  color:#1965B5;
  font-weight:bold;
  text-decoration:none;
}

.navintern a:hover{
  text-decoration:underline dotted;
}

.navintern li{
  list-style-type:none;
}

.nlink--footer a,
.nlink--footer a:hover,
.nlink--footer a:visited{
  color:#39B2C9;
  font-weight:bold;
  text-decoration:dotted;
  margin:1px;
  width:300px;
}

.nlink--footer a:hover{
  text-decoration:underline dotted;
}

hr{
  width:90%;
  text-align:left;
  margin-left:0;
  margin-top:-10px;
  border:0;
  height:0;
  border-top:1px solid rgba(0,0,0,0.5);
  border-bottom:1px solid rgba(255,255,255,0.5);
}

/* Hinweise */

.warnung{
  margin-left:10px;
  border-left:5px #D95F5F solid;
  padding:5px 5px 5px 20px;
}

.warnblock{
  border-left:5px #D95F5F solid;
  padding:5px 5px 5px 20px;
}

.noteblock{
  border-left:5px #39B2C9 solid;
  padding:5px 5px 5px 20px;
}

.zentrieren{
  text-align:center;
}

/* Forms im Backend */

.form--logsuc label{
  width:120px;
  display:inline-block;
  font-weight:bold;
  color:#494A4B;
}

.form--logsuc input{
  margin-left:4px;
}

.form--usaend label,
.form--benutzerinfo label,
.form--kwaend label,
.form--mailedit label{
  width:250px;
  display:inline-block;
  text-align:right;
  font-weight:bold;
  color:#494A4B;
}

.form--usaend input,
.form--benutzerinfo input,
.form--kwaend input,
.form--mailedit input{
  width:250px;
  margin-left:4px;
}

a.button,
a.button:hover,
a.button:visited{
  color:#39B2C9;
  font-weight:bold;
}

input[type='checkbox']{
  width:40px;
}

/* dev-Indikator <> %3C %3E */
body.xxdev{
	background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='150px'%3E%3Ctext x='0' y='15' fill='lightgray' font-size='20'%3EDEV wabiha%3C/text%3E%3C/svg%3E");
}
body.xxstuck{
	background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='150px'%3E%3Ctext x='0' y='15' fill='lightgray' font-size='20'%3ESTUCK wabiha%3C/text%3E%3C/svg%3E");
}

/*   Links für Gäste ausblenden */
.roleGA  > .nds_vor{
	display: none;
}


/* Änderungen 2020 dev / prod */

.wrapper{
	width: 1150px;
}

.content table{
	width: auto; /* z1014 */
}

.content .table--pegel{
	margin: auto;
margin-top: 60px;	
}

.legende--table {
    top: 55px;
}

.legende--table h2, .legende--table--bottom h2, 
.legende--table dl, .legende--table--bottom dl{
	display: inline;
}

.legende--table , .legende--table--bottom{
	width: 95%;
	float: none;
}

#pegeltabelle caption {
    top: -110px;
}


.nhh{
    top: 73px;
    position: relative;
	border: solid 1px gray;
	width: 770px;
}

.nhh b{
	background-color: #d1d9e1;
	display: inline-Block;
	padding: 5px 7px;
}

.nhh .heading{
	font-weight: bold;
	margin-left: 1em;
	margin-right: 0.3em;
}
.legende--table .cssicon , .legende--table--bottom .cssicon {
    margin-right: 2px;
    margin-left: 10px;	
}

/* Header-Größe anpassen */
.pheader figure {
    background-size: contain;
}


/* intern: keine Bild */
.page_admin .pheader figure {
	height: 70px;
    background-image:none;
}

.page_admin .pheader .warndienst {
    bottom: 40px;
}


/* auch oben! */
body {

    font-size: 14px;
    font-size: 1.4rem;
}

/* navside marker */



figure#bilder{
	margin: 1em 0px;
	
}
/* Standard width */
img.single, img.map, img.film, img.cycle-slide{
	width: 100%; /*850px; */
}

/* grid Bilder */
img.grid{
	width: 200px;
}

.contentwrapper{
	display: flex;
	flex-direction: row;
	width: 100%;
}

.figurewrapper{
	width: 900px;	
	flex-grow: 1;
}

#bilder{
	margin: 0;

}

.asidewrapper{
	width: 150px;
	flex-grow: 1;
	padding-left:5px;	
}

.page_admin .asidewrapper,
.page_niederschlag .asidewrapper{
	margin-top: 50px;
}

.page_nds_niederschlag .content--text h1{
	position: absolute;
	right: 50px;
    width: 140px;
    line-height: 1.1;
    font-size: 1.2em;	
}

.page_niederschlag .content--text h1{
	position: absolute;
	right: 30px;
    width: 140px;
	
}

/* Slider */
.pager{
	display: flex;
	flex-direction: row;
	width: 800px;
}
span.position{
	margin-right: 2px;
	font-size: 10px;
	cursor: pointer;
	height: 15px;
	background-color: #d6e4ee;
	flex-grow: 1;
	border: solid 1px gray;
	border-radius: 3px;
	box-sizing: border-box;	
}


/* Niederschlag Unterschied observed / forecasted */
.pager span[class*="observed"]{
	background-color: #d2eaf9;
}
.pager span[class*="forecasted"]{
	background-color: #91cbf4;
}

/* Niederschlag Unterschied 1-12 / 25 ... 24+12 */
.page_nds_niederschlag .vor_film span:nth-of-type(n + 36){
	background-color: #31a3f4;
}

.pager span.cycle-pager-active.cycle-pager-active
{
	background-color: white;
	border: dashed 1px #d51b1b;	
}

.pager span.cycle-pager-active:hover{
	background-color: gray;	
}

.cycle-slideshow {
    width: 900px;
    min-width: 200px;
    max-width: 900px;
    margin: 10px 10px;
	}
	
#zeit{
	border: solid 1px #98a5b3;
	width: auto;
	display: inline-block;
	padding: 0px 10px;
	margin: 5px 5px 5px 50px;
}

#links button{
	width: 5em;
}

p.zeitlegende{
	margin: 0;
}

.figurewrapper figure{
	margin-bottom: 0;
}

.linkbsh{
	margin: 100px 10px 10px 100px;
	display: inline-block;
}

.tablesorter-default {
	font-size: 13px;
}

.pegeltabelle tbody{
	border: solid 1px gray;
}
/* Rahmen nicht komplett sichtbar */
.pegeltabelle tbody tr td:last-child{
	border-right: solid 1px gray;	
}

.pegeltabelle tbody tr:last-child td{
	border-bottom: solid 1px gray;	
}