/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

/* ========================================================================
   Use this file to add custom CSS easily
 ========================================================================== */

/* Grundsätzlich sollten padding und border in die width und height Kalkulationen
   miteinberechnet werden. Scheint keine negativen Auswirkungen auf das Template
   zu haben. */
div {
	box-sizing: border-box;
}

h1, h1.uk-article-title {
	font-size: 33px !important; /* wegen mobil-Hack in joomlaplates.css */
	color: rgb(71,71,71);
}

h2, h2.uk-article-title {
	font-size: 27px !important; /* wegen mobil-Hack in joomlaplates.css */
	color: rgb(153,153,153);
}

h3, h3.uk-article-title {
    font-size: 27px !important; /* wegen mobil-Hack in joomlaplates.css */
  	color: rgb(10,70,149);
}

h4, h4.uk-article-title {
    font-size: 23px !important; /* wegen mobil-Hack in joomlaplates.css */
  	color: rgb(153,153,153);
}

h5, h5.uk-article-title {
    font-size: 23px !important; /* wegen mobil-Hack in joomlaplates.css */
  	color: rgb(10,70,149);
}

h6, h6.uk-article-title {
    font-size: 20px !important; /* wegen mobil-Hack in joomlaplates.css */
  	color: rgb(10,70,149);
}
 
.sprocket-features-title {
	margin: 0px;
}

.layout-slideshow .sprocket-features-content {
	max-width: 75%;
	background-color: rgba(217,224,233,0.7);
}

.layout-slideshow .sprocket-features-content h2 {
  	/*color: rgb(200,33,33);*/
    color: #333;
}

h3.uk-panel-title {
	color: rgb(10,70,149);
}

@media (max-width: 1119px)
{
	.toolbar-outer {
		display: none !important;
	}
}

.uk-navbar-toggle {
    color: #094696 !important;
	float: right !important;
    font-size: 45px;
}

.backbutton a {
	border: 1px solid #4db848;
    padding: 6px;
}

/* Top-Menü */
.toolbar-outer a:hover{
	color:#0a4695;
}

.tm-footer,
.uk-subnav li a {
	font-size:13px;
}

.tm-footer,
.uk-subnav li a:hover {
	font-size:13px;
}

/*
 * Hauptmenü-Navigation:
 */

/* Non-clickable main menu items get the arrow cursor
   insted of a text cursor. */
.uk-navbar-nav > li > a[href='#'] {
	cursor: default;
}

/* Farbige Balken unter aktiven und gehoverten Menüeinträgen. */
.uk-navbar-nav > li {
	border-bottom: 10px solid transparent;
	margin-bottom: -10px;
}

/* Gründer Balken für aktive Einträge. */
.uk-navbar-nav > li.uk-active {
	border-bottom: 10px solid #4db848;
}

/* Roter Balken für gehoverte Einträge. */
.uk-navbar-nav > li:hover, .uk-navbar-nav > li:focus, .uk-navbar-nav > li.uk-open {
	border-bottom: 10px solid #c9215e;
	z-index: 9999;
}

/* Dropdown-Menü um Balkenhöhe nach oben korrigieren. */
.uk-open > .uk-dropdown-navbar {
	margin-top: -10px;
}

/* Hauptmenü-Item bleibt grau/weiß beim klicken. */
.uk-navbar-nav > li:hover > a:active {
    background-color: #d9e0e9;
    color: #222222;
    outline: none;
}

.uk-navbar-nav > li.uk-active:hover > a:active {
    background-color: #fff;
}

/* Seitenabstände leicht verringern, um Umbruch zu vermeiden. */
.uk-navbar-nav > li.uk-parent > a {
    padding-left: 13px;
    padding-right: 23px;
}

/*
 * Untermenüs:
 */

@media (min-width: 768px) {
	/* Untermenüeinträge klappen nach rechts auf. */
	.uk-nav > li.uk-parent > a:after {
		content: " ";
		position: absolute;
		width: 0;
		height: 0;
		border: 3px solid transparent;
		border-left-color: #000;
		right: 17px;
		margin-top: 9px;
	}

	.uk-nav > li.uk-parent > a:hover:after {
		border-left-color: #fff;
	}

	.uk-nav-sub {
		display: none;
	}

	.uk-navbar-nav li:hover > ul.uk-nav-sub, .uk-navbar-nav li:focus > ul.uk-nav-sub {
		padding: 15px 0px;
		width: 266px;
		position: absolute;
		left: 266px;
		background-color: #fff;
		margin-top: -49px;
		display: unset;
		animation: uk-slide-right-fixed 0.2s ease-in-out;
	}

	ul.uk-nav-sub > li > a {
		padding: 5px 30px;
	}

	.uk-nav-sub > li > a:hover, .uk-nav-sub > li > a:focus {
		background: #0a4695;
		color: #ffffff;
	}
}

/* Untermenüs des letzten sichtbaren Hauptmenü-Eintrags (der vorletzte, da
   "Aktuelles" ausgeblendet ist) für >= Tablet und < Fulldesktop nach links
   öffnen lassen, um sicherzustellen, dass keine Einträge abgeschnitten
   werden. */
@media (min-width: 768px) and (max-width: 1219px) {
    div.menu-inner > ul.uk-navbar-nav > li.uk-parent:nth-last-child(2) .uk-nav-navbar li:hover > ul.uk-nav-sub,
    div.menu-inner > ul.uk-navbar-nav > li.uk-parent:nth-last-child(2) .uk-nav-navbar li:focus > ul.uk-nav-sub {
		left: -266px;
		animation: uk-slide-left-fixed 0.2s ease-in-out;
	}
}

/*
 * Allgemeine Formular-Styles:
 */

/* Es sollen nur bestimmte Labels als klickbar dargestellt werden. */
label:not([class="checkbox"]):not([class="radio"]) {
    cursor: default;
}

/*
 * Zusätzliche Animationen:
 */
 
@-webkit-keyframes uk-slide-right-fixed {
  0% {
    opacity: 0;
    -webkit-transform: translateX(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@keyframes uk-slide-right-fixed {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

 
@-webkit-keyframes uk-slide-left-fixed {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@keyframes uk-slide-left-fixed {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Navigation für mobile Version. */
nav.tm-navbar.uk-navbar > div.uk-navbar-content.uk-navbar-center.uk-visible-small {
	float: left;
/*	margin-top: -8px;*/
}

/*
 * Zusätzliche Stile für JCE-ComboBox:
 */
 
.content-column-left,
.content-column-right,
.content-column-left-desktop,
.content-column-right-desktop,
.content-column-left-fulldesktop,
.content-column-right-fulldesktop {
	width: 50%;
	margin-bottom: 22px;
	box-sizing: border-box;
}

.content-column-left,
.content-column-left-desktop,
.content-column-left-fulldesktop {
	float: left;
	padding-right: 16px;
}

.content-column-right,
.content-column-right-desktop,
.content-column-right-fulldesktop {
	float: right;
	padding-left: 16px;
}

@media (max-width: 767px) {
    .content-column-left,
    .content-column-right {
		float: none;
		width: 100%;
		padding: 0;
	}
}

@media (max-width: 979px) {
    .content-column-left-desktop,
    .content-column-right-desktop {
		float: none;
		width: 100%;
		padding: 0;
	}
}

@media (max-width: 1179px) {
    .content-column-left-fulldesktop,
    .content-column-right-fulldesktop {
		float: none;
		width: 100%;
		padding: 0;
	}
}

.clearfix {
	clear: both;
    height: 0;
}

/*
 * Accordion:
 */

/* Gelben Schatten entfernen. */
.rl_sliders.accordion>.accordion-group>div>a:focus,
.rl_sliders.accordion>.accordion-group.active>div>a:focus {
    outline: 0;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

/* Ränder entfernen. */
.rl_sliders.accordion>.accordion-group {
    border-style: none;
}

.rl_sliders.accordion>.accordion-group>.accordion-body>.accordion-inner {
    border-top-style: none;
}

/* Farben und Schriftgröße anpassen (h4 als Orientierung genommen). */
.rl_sliders.accordion>.accordion-group>.accordion-heading>a.accordion-toggle {
    font-size: 23px;
    background-color: #f8f8f8;
    color: rgb(153,153,153);
    text-decoration: none;
}

.rl_sliders.accordion>.accordion-group.active>.accordion-heading>a.accordion-toggle,
.rl_sliders.accordion>.accordion-group.active>.accordion-heading>a.accordion-toggle:hover {
    color: #3071a9;
}

.rl_sliders.accordion>.accordion-group>.accordion-heading>a.accordion-toggle:hover {
    background-color: #eee;
    color: ff0024;
}

/* Plus-Minus-Symbol rechts anzeigen und Symbolgröße verringern. */
.rl_sliders.accordion>.accordion-group.icon>.accordion-heading>a.accordion-toggle span.rl_sliders-toggle-inner:before {
    float: right;
    font-size: 20px;
}

/*
 * JSN-Uniform
 */

.control-group input:not([type="checkbox"]):not([type="radio"]),
.control-group textarea {
    height: 34px;
    padding: 6px 12px;
}

/* Font-Eigenschaften anpassen. */
.jsn-master,
.jsn-uniform.jsn-master .jsn-bootstrap .jsn-form-content .control-label,
#jsn_form_1.jsn-master .jsn-bootstrap  .jsn-form-content .control-group .control-label
{
	font-family: "Noto Sans" !important;
    font-weight: normal;
    font-size: 16px;
}

/*
 * Neu eingefürte dritte (mittlere) Footer-Position (footer-m):
 */

/*
 * Zusätzlichen Umbruch "xlarge" hinzufügen (zur Abwärtskompatibilität
 * wird was mittels "uk-visible-large" dargestellt wird auch in
 * "uk-visible-xlarge" dargestellt):
 */

/* Phone landscape and smaller*/
@media (max-width: 667px) {
    .uk-visible-xlarge { display: none !important; }
}

/* Tablets portrait */
@media (min-width: 768px) and (max-width: 959px) {
    .uk-visible-xlarge { display: none !important ; }
}

/* Desktop and bigger */
@media (min-width: 960px) and (max-width: 1219px) {
    .uk-visible-xlarge { display: none !important; }
}

/* Full desktop and bigger */
@media (min-width: 1220px) {
    .uk-visible-small { display: none !important; }
    .uk-visible-medium { display: none !important; }
    .uk-hidden-large { display: none !important; }
    .uk-hidden-xlarge { display: none !important; }
}

/*
 * Rocksproket:
 */

/* Wechsel auf max. 2 Spalten bereits früher einleite, um Überlappungen
   von Überschriften zu verhindern. */
@media (min-width: 481px) and (max-width: 959px) {
	.sprocket-strips-s-container .sprocket-strips-s-block {width: 50%;}
}


/*
 * Footer:
 */

/* Footerbereich nach oben erweitern, indem bottom-d im gleichen Style
   des Footers gehalten wird. */
#bottom-d {
    background-color: #445163;
    color: #fff;
    padding-top: 40px;
}

#bottom-d a, #bottom-d a:hover {
    color: #fff;
}

#bottom-d h3.uk-panel-title {
    color: #fff;
}

#bottom-d h3.uk-panel-title::after {
    background-color: #fff;
}

@media (min-width: 1181px) {
    #bottom-d {
        padding-left: 80px;
    }
}

@media (max-width: 1180px) {
    #bottom-d {
        padding-left: 12px;
    }
}

/*
 * Diverses:
 */

/* Einleitungstext-Bild auf kleinen Geräten ausblenden. */
@media (max-width: 767px) {
    article > h1:first-child + a > img:first-child {
        display: none;
    }
}

/* Hover-Farbe für Primary-Button anpassen. */
.uk-button-primary:hover,
.uk-button-primary:focus {
    background-color: #00baf2;
}

/* Suchfeld in Größe anpassen. */
input.uk-search-field {
    width: 160px;
}

.uk-search-field:focus,
.uk-search.uk-active .uk-search-field {
  width: 200px;
}

/* Top-Scroller weiß umranden, damit er im Footerbereich noch erkennbar ist. */
.tm-totop-scroller:after {
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

/* Sidebars sind auf Tablets etwas schmal. Abstand zum Artikel verkleinern. */
@media (min-width: 768px) and (max-width: 959px) {
    .tm-sidebar-a,
    .tm-sidebar-b {
        padding-left: 20px;
    }
}

/* Sidebars ab Desktop aufwärts (inkl. xlarge) auf gleicher Breite halten. */
@media (min-width: 960px) {
    .tm-sidebar-a,
    .tm-sidebar-b {
        padding-left: 80px;
    }
}

/* Zusätzliche Artikelinformationen (z.B. Bearbeitungsdatum) stylen. */
.article-info li {
    font-size: 13px;
    color: rgb(153,153,153);
}

/*
 * Suchen-Seite:
 */

/* Suchfeld nach links einrücken. */
#searchForm > div:first-child {
    padding-left: 0px;
}

/* Nicht benötigte Suchoptionen ausblenden. */
#searchForm > div:first-child > fieldset:nth-child(2) {
    display: none;
}

#search-searchword {
    width: 240px;
}

#searchForm > div:first-child > fieldset label {
    display: none;
}

/*
 * Phoca Downloads:
 */

/* Anzahl der Datein pro Kategorie in Kategorien-Ansicht ausblenden. */
.pd-title > small {
    display: none;
}

/* Kategorien untereinander darstellen. */
#phoca-dl-categories-box div.pd-categoriesbox {
    float: unset;
    padding: unset;
    margin-left: unset;
}

/* Auf Übersicht zurückführenden Button stylen. */
#phoca-dl-category-box .pd-category div.pdtop,
#phoca-dl-file-box .pd-file div.pdtop,
#phoca-dl-download-box .pd-file div.pdtop {
    float: unset;
    position: unset;
    width: unset;
    margin: unset;
    padding: 4px;
}

.pdtop > a > img {
    display: none;
}

.pdtop > a:after {
    content: "Kategorie";
}

.pdtop > a {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    border-radius: 0;
    border-color: transparent;
    box-shadow: none;
    text-shadow: none;
    line-height: 22px;
    background-color: #0a4695;
    color: #ffffff;
}

#phoca-dl-category-box .pdtop > a:hover {
    background-color: #00baf2;
    text-decoration: none;
}

/* Kategorieüberschrift ohne Rahmen darstellen. */
#phoca-dl-category-box .pd-category h3.pd-ctitle,
#phoca-dl-file-box .pd-file h3.pd-ctitle,
#phoca-dl-download-box .pd-file h3.pd-ctitle {
    border: 0;
}

/*
 * Spezieller Kategorie-Blog-Style: BlogItemImageLeft
 */

/* Item-Bilder links neben Text anordnen. */
@media (min-width: 768px) {
    .BlogItemImageLeft div.view-category.layout-blog article a:first-of-type {
        float: left;
        margin-right: 25px;
        margin-left: 0px;
    }

    .BlogItemImageLeft div.view-category.layout-blog article a:first-of-type > img {
        width: 245px;
    }
}

/*
 * Breadcrumbs:
 */

/* Abstände und Strich entfernen. */
.uk-breadcrumb {
    margin-bottom: 0px;
    border-bottom: 0;
    padding-bottom: 0px;
}

/*
 * Offcanvas-Menü-Header:
 */

.uk-offcanvas .uk-panel {
    margin: 0;
    padding: 20px 15px;
    background-color: #0a4695;
}

.uk-offcanvas table tr {
    line-height: 18px;
}

/*
 * Offcanvas-Menü:
 */

.uk-nav-parent-icon > .uk-parent > a:after {
    content: "\f107";
}

.uk-nav-parent-icon > .uk-parent.uk-open > a:after {
    content: "\f106";
}

.uk-nav-offcanvas > li > a {
    padding-right: 25px;
}

.uk-nav-offcanvas ul li.uk-active a {
    color: #474747;
}

/*
 * Menüs in mobiler Anzeige ohne Rand darstellen:
 */

@media (max-width: 767px) {
    aside .uk-panel-box {
        padding: 0;
    }
    
    aside .uk-panel-box > .uk-nav-side {
        margin: 0;
    }
    
    aside .uk-nav > li > a {
        padding-left: 0;
        padding-right: 0;
    }
}

/*
 * Größe des Menü-Symbols kleiner darstellen:
 */

.uk-navbar-toggle {
    font-size: 40px;
}

.uk-navbar-content:before,
.uk-navbar-brand:before,
.uk-navbar-toggle:before {
    display: block;
}

nav.tm-navbar.uk-navbar > div.uk-navbar-content.uk-navbar-center.uk-visible-small {
    margin-top: 14px;
}