/* koeln.de Colors */
/* warnlevel-colors */
/* koeln.de Fonts */
/* Media-Query-Values */
/* General settings */





a:hover {
  text-decoration: underline;
}

ul, li {
  margin: 0;
  padding: 0;
}

article ul {
  margin-bottom: 1.8em;
  margin-left: 14px;
}


#wetterapp a:hover, #wetterapp a:visited:hover, #wetterapp a:hover:hover, #wetterapp a:link:hover, #wetterapp a:focus:hover, #wetterapp a:active:hover {
  text-decoration: none;
}

iframe {
  border: none;
}

table {
  clear: both;
  font-size: 14px;
}

.table > thead > tr > th {
  background-color: #488ccb;
  color: white;
}

/* Weather-Icon-Settings */
.wi {
  font-size: 1.1em;
  min-width: 15px;
  text-align: center;
  float: left;
}

.wi-2 {
  padding: 10px 0;
  font-size: 4em;
  width: 80px;
}

.wi-4 {
  padding: 15px 0;
  font-size: 8em;
}

.wi-6 {
  padding: 30px 0 30px;
  font-size: 12em;
  width: 100%;
}

/* Set Text-Shadow */
#wetterapp .wi,
#day .dd p,
.day-details-details,
.daily-short-details,
.daily-short-temp,
.temp-now,
.more-days-container {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

/* Wetterwarnungs-Banner */
div.warningbanner {
  background: #E3001B;
  padding: 5px 8px;
  margin: 0 0 15px;
  clear: both;
}
div.warningbanner a {
  display: block;
  color: #ffffff !important;
  text-decoration: none;
  outline: none;
}

/* Citylist */
#changeCity {
  display: none;
}
#changeCity:checked + label {
  width: 300px;
  padding: 10px 0;
}
#changeCity:checked + label #citylist {
  display: block;
}

label[for=changeCity] {
  float: right;
  margin: 0 0 10px 0;
  background-color: #efefef;
  color: #333333;
  cursor: pointer;
  padding: 10px;
  text-align: center;
  line-height: 1em;
  border-radius: 5px;
  font-weight: normal;
  transition: width 1s;
  weoverflow-x: hidden;
  border: 1px solid #dddddd;
  border-radius: 4px;
}

#citylist {
  display: none;
  position: absolute;
  margin-top: 5px;
  z-index: 10;
  height: 300px;
  overflow-y: scroll;
}
#citylist a {
  display: block;
  padding: 5px 0;
  width: 283px;
  background-color: #ffffff;
  text-decoration: none;
  color: #666666;
}
#citylist a:nth-child(odd) {
  background-color: #efefef;
}
#citylist a:hover {
  background-color: #80c6fc;
}

/* Navigations */
#nav-period {
  clear: both;
  height: 45px;
  padding-bottom: 10px;
}

#nav-special {
  height: 37px;

}

.horizontal-nav-container {
  width: 100%;
  overflow: auto;
  overflow-y: hidden;
}

.horizontal-nav {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}
.horizontal-nav ul {
  margin: 0;
  padding: 0;
  display: table;
  list-style: none;
  transition-property: margin-left;
  transition-duration: 1s;
}
.horizontal-nav ul li {
  display: table-cell;
}
.horizontal-nav ul li a {
  color: #666666;
}

#horizontal-nav-center {
  float: left;
  width: 85%;
  overflow: hidden;
  height: 50px;
  margin-bottom: 20px;
}

.scroll-arrow {
  display: none;
  float: left;
  width: 50px;
  color: #E3001B;
  cursor: pointer;
  padding: 10px 13px;
}

#scroll-arrow-left {
  text-align: left;
  display: none;
}

#scroll-arrow-right {
  text-align: right;
  display: none;
}

.tab-nav .horizontal-nav ul li {
  padding: 8px 10px 8px 10px;
  white-space: nowrap;
  background: #efefef;
  margin: 0 20px 0 0;
  display: inline-block;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

#nav-special .horizontal-nav ul li {
  padding: 3px 10px 8px 10px !important;
  background: none;
}
#nav-special .horizontal-nav ul li.active {
  background: #efefef;
}

.tab-nav .horizontal-nav ul li.first-nav-tab {

}
.tab-nav .horizontal-nav ul li.active {
  border-bottom: none;
  font-weight: bold;
  background: #216BAF;
  color: #ffffff;

}
.tab-nav .horizontal-nav ul li.active a {
  color: #ffffff !important;
}
.tab-nav .horizontal-nav ul li a:hover {
  color: #333333;
}

#nav-day {
  height: 50px;
  margin: 10px 0;
  overflow: hidden;
}
#nav-day .horizontal-nav ul {
  width: 100%;
}
#nav-day .horizontal-nav ul li {
  vertical-align: middle;
  text-align: center;
  min-width: 55px;
}
#nav-day .horizontal-nav ul li a {
  display: block;
  padding-top: 6px;
  width: 50px;
  height: 50px;
  border: 1px solid #80c6fc;
  background-color: #efefef;
  color: #666666;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  line-height: 1.1em;
  cursor: pointer;
  text-decoration: none;
  font-size: 16px;
}
#nav-day .horizontal-nav ul li a:hover {
  background-color: #e0e0e0;
  color: #333333;
}
#nav-day .horizontal-nav ul li.active a {
  font-weight: bold;
  background: #ffffff;
  color: #333333;
  border: 2px solid #488ccb;
}

#day > .row-gradient > .col-sm-7,
#day > .row-gradient > .col-md-12,
#day > .row-gradient .day-details > .col-md-12, #day > .row-gradient .day-details > .col-sm-12 {
  background: transparent -moz-linear-gradient(center top, #216baf 0%, #488ccb 58%, #488ccb 100%) repeat scroll 0 0;
  background: -webkit-linear-gradient(top, #216baf 0%, #488ccb 58%, #488ccb 100%);
  border: 1px solid #488ccb;
  border-radius: 4px;
  color: #efefef;
  margin-bottom: 5px;
}

.day-survey-outer {
  min-height: 460px;
}

.day-survey {
  margin-bottom: 15px;
  position: relative;
}

.day-date {
  position: absolute;
  top: 9px;
  left: -2px;
  width: 65px;
  height: 65px;
  padding: 10px;
  text-align: center;
  line-height: 1.1em;
  border: 3px solid #80c6fc;
  border-radius: 8px;
  font-size: 18px;
  color: #333333;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U5ZjNmYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9f3fb), color-stop(100%, #ffffff));
  background-image: -moz-linear-gradient(#e9f3fb 0%, #ffffff 100%);
  background-image: -webkit-linear-gradient(#e9f3fb 0%, #ffffff 100%);
  background-image: linear-gradient(#e9f3fb 0%, #ffffff 100%);
}

.temp-now {
  padding: 20px 0 0 0;
  float: right;
  right: 0px;
  line-height: 1.1em;
  font-size: 16px;
  height: 50px;
}
.temp-now p {
  float: right;
  margin-left: 5px;
  font-size: 30px;
}

.daily-short {
  position: relative;
  margin: 0 auto;
  clear: both;
}
.daily-short p {
  padding-bottom: 15px;
  font-size: 3em;
  text-align: center;
  color: #80c6fc;
}

.full .daily-short {
  padding-top: 50px;
}

.daily-short-details {
  border-bottom: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
  text-transform: uppercase;
  padding: 5px 0;
  margin-top: 10px;
}
.daily-short-details table {
  width: 100%;
}
.daily-short-details table td:nth-child(even) {
  text-align: right;
}

.day-details-outer {
  padding-left: 5px;
  padding-right: 0px;
  line-height: 1em;
}
@media (max-width: 768px) {
  .day-details-outer {
    padding: 0;
  }
}

.day-details > div {
  min-height: 156.5px;
  padding-top: 10px;
}
.day-details > div > div {
  width: 186px;
  margin: 0 auto;
}
.day-details > div > div > p {
  color: #80c6fc;
  font-size: 18px;
  font-weight: normal;
  text-transform: uppercase;
}

.day-details-details {
  float: left;
  margin-left: 1.7em;
}
.day-details-details i {
  margin-right: 1em;
}

.day-subnav {
  width: 100%;
  height: 45px;
  margin-top: 0px;
  border: 1px solid #80c6fc;
  border-radius: 4px;
  background-color: #efefef;
}

.pager {
  padding-top: 0px;
}
.pager li a {
  color: #E3001B;
}
.pager li a.day-previous {
  border-radius: 4px 0 0 4px;
  border-right: 1px solid #dddddd;
}
.pager li a.day-next {
  border-radius: 0 4px 4px 0;
  border-left: 1px solid #dddddd;
}

.more-details-link {
  border: none;
  padding-top: 10px;
  color: #E3001B;
  background: transparent;
  font-size: 1.3em;
}
.more-details-link > p {
  display: inline;
}
@media (max-width: 480px) {
  #nav-period {
    height: auto;
    padding-bottom: 40px;
  }
  .tab-nav .horizontal-nav ul li {
    border-radius: 6px;
    margin-bottom: 10px;
  }

  .more-details-link > p {
    display: none;
  }
}
@media (max-width: 767px) {

  .container-schmal {
    width: 100% ! important;
  }
 #more-day-details {
    margin: 0 !important;
    background: #216BAF;
    padding: 10px;
  }

}

.more-details-link i.fa-chevron-down {
  display: none;
}
.more-details-link.collapsed i.fa-chevron-up {
  display: none;
}
.more-details-link.collapsed i.fa-chevron-down {
  display: inline;
}

.details-header {
  overflow: hidden;
}

.floating-left {
  float: left;
  line-height: 18px;
}

.daily-value {
  float: right;
  font-size: 24px;
  line-height: 24px;
  padding-top: 5px;
}

.custom-link-button {
  display: block;
  background-color: #efefef;
  background-repeat: no-repeat;
  color: #666666;
  margin: 5px 0;
  border-radius: 3px;
  line-height: 1em;
}

#more-weather .row > div {
  padding: 0 5px;
}
#more-weather a.more-weather-button {
  padding: 20px;
  text-indent: 30px;
}
#more-weather a#regenradar {
  background-image: url(../img/iconssprite.png);
  background-position: 1px 3px;
}
#more-weather a#wetterlage-europa {
  background-image: url(../img/iconssprite.png);
  background-position: 5px -215px;
}
#more-weather a#ozon {
  background-image: url(../img/iconssprite.png);
  background-position: 5px -161px;
}
#more-weather a#uv-index {
  background-image: url(../img/iconssprite.png);
  background-position: 6px -266px;
}
#more-weather a#biowetter {
  background-image: url(../img/iconssprite.png);
  background-position: 5px -54px;
}
#more-weather a#pollenflug {
  background-image: url(../img/iconssprite.png);
  background-position: 5px -377px;
}
#more-weather a#flughafen-koeln-bonn {
  background-image: url(../img/iconssprite.png);
  background-position: 5px -318px;
}
#more-weather a#rheinpegel {
  background-image: url(../img/iconssprite.png);
  background-position: 5px -107px;
}
#more-weather a#wetterwarnungen {
  background-image: url(../img/iconssprite.png);
  background-position: 5px -437px;
}
#more-weather a#sonnenuntergang-sonnenaufgang-koeln {
  background-image: url(../img/iconssprite.png);
  background-position: 4px -486px;
}

.costum-teaser {
  padding-bottom: 15px;
  margin-top: 30px;
  display: inline-block;
}
.costum-teaser .row > div {
  padding-left: 0px;
}

.adsense-teaser .row {
  text-align: center;
  padding: 10px 0;
}

#weather-in-region .row > div:not(.further-towns), #weather-in-region .further-towns > div:not(.further-towns) {
  padding: 0 5px;
}
#weather-in-region .weather-in-region-button {
  padding: 10px;
}
#weather-in-region .weather-in-region-button a {
  color: #666666;
}
#weather-in-region .weather-in-region-button p {
  margin: 0px;
  padding: 0px;
  font-weight: bold;
}

.further-towns {
  display: none;
}

#toggleFurtherTowns {
  font-family: FontAwesome;
  clear: both;
  width: 100%;
  text-align: right;
  padding: 10px;
  cursor: pointer;
}
#toggleFurtherTowns:before {
  color: #E3001B;
  content: "\f063 ";
}
#toggleFurtherTowns.active:before {
  color: #E3001B;
  content: "\f062 ";
}

#daily-summary .row > div, #weekend .row > div {
  padding: 5px;
}
#daily-summary .more-days-container, #weekend .more-days-container {
  background: transparent -moz-linear-gradient(center top, #216baf 0%, #488ccb 58%, #488ccb 100%) repeat scroll 0 0;
  background: transparent -webkit-linear-gradient(top, #216baf 0%, #488ccb 58%, #488ccb 100%) repeat scroll 0 0;
  color: #ffffff;
  text-align: center;
  padding: 5px;
  line-height: 1.5em;
}
#daily-summary .more-days-container div, #weekend .more-days-container div {
  clear: both;
  display: block;
}
#daily-summary .more-days-container .daily-date, #weekend .more-days-container .daily-date {
  border-bottom: 1px solid #ffffff;
}
#daily-summary .more-days-container .daily-weather-icon, #weekend .more-days-container .daily-weather-icon {
  width: 100%;
  margin: 20px auto 5px;
}
#daily-summary .more-days-container .daily-wheather-temp, #weekend .more-days-container .daily-wheather-temp {
  color: #80c6fc;
  font-size: 20px;
}
#daily-summary .more-days-container a, #weekend .more-days-container a {
  display: block;
  background-color: #e7f3fc;
  color: #488ccb;
  border-radius: 3px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1em;
  padding: 7px;
  margin: 10px auto 5px;
  width: 70%;
  text-shadow: none;
}
#daily-summary .more-days-container a:hover, #weekend .more-days-container a:hover {
  background-color: #d5eaf9;
}
#daily-summary .more-days-container .daily-overview-fill-element, #weekend .more-days-container .daily-overview-fill-element {
  margin: 5px;
  padding: 20px 10%;
}

#nav-special ul {
  font-size: 16px;
}
#nav-special ul li.active a {
  color: #333333 !important;
}
#nav-special ul li a.back-2-start {
  color: #E3001B;
}
#nav-special ul li a.back-2-start i {
  font-size: 20px;
  margin-right: 4px;
}

.wetterwarnungen #warnlevels {
  border: 1px solid #dddddd;
}
.wetterwarnungen #warnlevels thead tr th {
  background-image: linear-gradient(#ffffff 0%, #efefef 100%);
  color: #333333;
}
.wetterwarnungen #warnlevels .level-info {
  cursor: pointer;
}
.wetterwarnungen #warnlevels .level-info strong span {
  background-color: #dddddd;
  padding: 2px 4px;
}
.wetterwarnungen #warnlevels .level-info .warnlevel1 {
  color: #0080ff;
}
.wetterwarnungen #warnlevels .level-info .warnlevel2 {
  color: #feff01;
}
.wetterwarnungen #warnlevels .level-info .warnlevel3 {
  color: #f5b315;
}
.wetterwarnungen #warnlevels .level-info .warnlevel4 {
  color: #E3001B;
}
.wetterwarnungen #warnlevels .level-info .warnlevel5 {
  color: #ff00fe;
}
.wetterwarnungen #warnlevels .level-info span {
  font-weight: bold;
}
.wetterwarnungen #warnlevels .level-info div:after {
  color: #dddddd;
  content: "\f063";
  font-family: FontAwesome;
  float: right;
}
.wetterwarnungen #warnlevels .level-info-text {
  display: none;
  padding: 10px 0 0 10px;
}
.wetterwarnungen #warnlevels .level-info-text p {
  margin: 0;
}
.wetterwarnungen #warninglist ul {
  padding-left: 10px;
}
.wetterwarnungen #warninglist li {
  list-style: none;
}
.wetterwarnungen #warninglist .warninglevel {
  border: 1px solid #dddddd;
  display: inline-block;
  height: 18px;
  margin-right: 4px;
  width: 18px;
}
.wetterwarnungen #warninglist .warnlevel1 {
  background-color: #0080ff;
}
.wetterwarnungen #warninglist .warnlevel2 {
  background-color: #feff01;
}
.wetterwarnungen #warninglist .warnlevel3 {
  background-color: #f5b315;
}
.wetterwarnungen #warninglist .warnlevel4 {
  background-color: #E3001B;
}
.wetterwarnungen #warninglist .warnlevel5 {
  background-color: #ff00fe;
}
.wetterwarnungen #warninglist .warningtext {
  margin-bottom: 1em;
}
.wetterwarnungen #warninglist .warningduration p {
  margin: 0;
}

.special-flex-content-container {
  border: 1px solid #488ccb;
  border-radius: 4px;
  padding: 0 10px 10px;
  overflow: visible;
  margin-bottom: 1.5em;
}
.special-flex-content-container h2 {
  font-size: 18px;
}
.special-flex-content-container .special-flex-content-tabs .sfc-tab {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: #ffffff none repeat scroll 0 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-color: #ffffff #488ccb #488ccb;
  border-image: none;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  display: block;
  float: left;
  margin: -1px 5px 10px 0;
  padding: 10px 15px 5px;
  color: #333;
}
.special-flex-content-container .special-flex-content-tabs .sfc-tab.active {
  background-color: #e9f3fb;
  font-weight: bold;
}
.special-flex-content-container .special-flex-contents .sfc.active {
  display: block;
}
.special-flex-content-container .special-flex-contents .sfc {
  padding: 12px 2px;
  clear: both;
  display: none;
}

#rheinpegel-info td:nth-child(2n+1) {
  font-weight: bold;
}

.highwatermark {
  color: #E3001B;
  font-weight: bold;
}

.img-inline {
  background: #efefef none repeat scroll 0 0;
  border-radius: 4px;
  float: none;
  margin-bottom: 5px;
  text-align: center;
}
.img-inline img {
  width: 100%;
}

#airport-weather-icon {
  float: left;
  position: relative;
}
#airport-weather-icon .fa {
  font-size: 5em;
  left: 0.4em;
  position: absolute;
  top: 0.4em;
}
#airport-weather-icon .wi {
  color: #488ccb;
  text-shadow: none;
  font-size: 10em;
  margin: 0.5em 0.2em 0.2em 0.5em;
}

#airport-weather-info {
  float: left;
  margin-top: 25px;
}
#airport-weather-info p {
  font-size: 24px;
}
#airport-weather-info div {
  font-size: 18px;
  margin-left: 5px;
}

.lexicon .lexSearchNotFound {
  background-color: rgba(255, 0, 0, 0.5);
}
.lexicon input[type="text"] {
  margin: 10px 0 0 0;
  padding: 4px;
  width: 100%;
}
.lexicon .lexRow:not(:first-child) {
  padding: 5px;
}
.lexicon .lexRow:not(:first-child):nth-child(even) {
  background-color: #efefef;
}
.lexicon .hit_white {
  background-color: #ffffff !important;
}
.lexicon .hit_sec {
  background-color: #efefef !important;
}
.lexicon .lexicon-header {
  margin: 10px 0 5px 0;
}
.lexicon .lex-backlink {
  margin: 10px 0;
}

/* Extraanpassungen*/
i.fa {
  top: 2px;
  position: relative;
}
.adsense-teaser {
  width: 100%;
  justify-content: center;
  display: flex;
  margin: 30px 0 30px 0;
}
.article-content {
  padding: 10px;
  background: #efefef;
}
.container-schmal {
  width: 565px;
  margin: 35px auto;
}
.container-schmal a {
  text-decoration: none;
  font-weight: bold;
  }