/*
Theme Name: Lokalzeitung
Theme URI: http://klipskom.de/themes/lokalzeitung/
Author: klipskom medien
Author URI: http://klipskom.de
Description: Lokalzeitung ist ein Wordpress Theme für lokale Newsanbieter.
Version: 1.0.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lokalzeitung
Tags: Lokalzeitung

This theme, like WordPress, is licensed under the GPL.
*/

/*
--------------------------------------------
1. Grundeinstellungen
--------------------------------------------
*/

body {
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	color: rgba(0,0,0,1.00);
	background: rgba(255,255,255,1.00);
	padding: 0;
	margin: 0;
}

.seitenwrapper {
	width: 95%;
	margin: 0 auto;
	padding-top: 0.5em;
}

p, h1, h2, h3, h4 h5, h6 {
	font-family: 'Roboto', sans-serif;
	color: rgba(0,0,0,1.00);
}

a {
	text-decoration: none;
	color: rgba(210,0,0,1.00);
}

a:hover, a:active {
	text-decoration: none;
	color: rgba(255,50,50,1.00);
}

.screen-reader-text {
	display: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.tag-cloud-link {
	display: inline-block;
	font-size: 1em !important;
	color: rgba(255,255,255,1.00);
	background: rgba(150,150,150,0.80);
	padding: 0 0.3em;
	margin-bottom: 0.3em;
	border-radius: 0.2em;
}

.fb_iframe_widget iframe, .fb_iframe_widget span {
	max-width: 100%;
}

.genericon-zeichen {
	font-family: 'Genericons';
	font-size: inherit;
	font-weight: normal;
	font-style: normal;
	vertical-align: top;
}

.search-form {
	display: flex;
	flex-flow: row nowrap;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.search-form .search-field {
	flex: 1 1 auto;
	padding: 0.5em;
	border: thin solid rgba(180,180,180,1.00);
	border-radius: 0.3em;
}

.search-form .search-submit {
	flex: 1 1 3em;
	max-width: 3em;
	margin-left: 0.2em;
	border: thin solid rgba(180,180,180,1.00);
	border-radius: 0.3em;
	cursor: pointer;
	font-size: 1.2em;
	color: rgba(255,0,0,1.00);
}

#RRVCookiesPopup {
	display: none;
	flex-flow: row nowrap;
	position: fixed;
	bottom: 0;
	left: 0;
	max-width: 100%;
	background: rgba(84,84,84,0.90);
	font-size: 90%;
	color: rgba(255,255,255,1.00);
	padding: 1em;
	z-index: 1000;
}

#RRVCookiesPopup a {
	color: rgba(255,200,200,1.00);
	text-decoration: underline;
}
	
#pad2 button {
	margin-left: 1em;
	width: 3em;
	height: 3em;
	border: thin solid rgba(0,0,0,1.00);
	border-radius: 0.5em;
	background: rgba(0,147,30,1.00);
	color: rgba(255,255,255,1.00);
	font-size: 120%;
	font-weight: bold;
	cursor: pointer;
	transition: ease-in-out 0.3s;
}

#pad2 button:hover, #pad2 button:active {
	background: rgba(255,91,93,1.00);
}

/*
--------------------------------------------
2. Allgemeine Einstellungen für die Anzeige 
der Seitenelemente
--------------------------------------------
*/

.menu-item {
	font-family: 'Roboto Condensed', sans-serif;
	margin-top: 0.2em;
}

/*
--------------------------------------------
2.1. Kopf
--------------------------------------------
*/

.haupt-kopf {
	order: 1;
	display: flex;
	flex-direction: row nowrap;
	background: rgba(255,255,255,1.00);
	padding-bottom: 1em;
	margin-bottom: 1em;
	max-width: 99%;
	border-bottom: medium solid rgba(210,0,0,1.0);
}

.seiten-branding {
	flex: 1;
}

.seiten-branding div {
	padding: 0;
}

.branding-logo {
	text-align: left;
}

.branding-logo-image {
	background: rgba(220,220,220,1.00);
	border-radius: 0.3em;
}

.kopf-titel-headline {
	margin: 0 0 0 0.5em;
	color: rgba(210,0,0,1.00);
	font-size: 175%;
	font-weight: bold;
	line-height: 95%;
	width: 100%;
}

.kopf-winzig {
	font-size: 60%;
	color: rgba(120,120,120,1.00);
}

.haupt-navigation {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	margin-bottom: 0.5em;
	padding-bottom: 1em;
	background: rgba(255,255,255,1.00);
	border-bottom: thin solid rgba(0,0,0,1.00);
	text-align: center;
}

.haupt-navigation .menu-item {
	padding: 0.2em 0.5em;
	background: rgba(230,230,230,1.0);
	border-radius: 0.2em;
}

.haupt-navigation .menu-item a {
	display: block;
	font-weight: bold;
	color: rgba(210,0,0,1.00);
	width: 100%;
}

.haupt-navigation .menu-item a:first-child {
	color: rgba(0,0,0,1.00);
}

/*
--------------------------------------------
2.2. Hauptteil
--------------------------------------------
*/

.blog-titel {
	font-size: 100%;
	color: rgba(100,100,100,1.00);;
}

.artikel-kopf a {
	color: rgba(0,0,0,1.00);
}

.artikel-kopf a:hover, .artikel-kopf a:active {
	text-decoration: underline;
	color: rgba(255,50,50,1.00);
}

.post-spalte {
	margin-bottom: 1em;
	border-bottom: thin solid rgba(0,0,0,1.00);
	clear: both;
}

.einzelbeitrag .attachment-post-thumbnail {
	max-width: 99%;
	height: auto;
	margin-bottom: 1em;
}

.artikel-titel {
	margin: 0.3em 0 0 0;
	padding: 0;
	font-size: 160%;
}

.artikel-inhalt {
	margin: 0;
	padding: 0;
}

.artikel-inhalt h1 {
	font-size: 150%;
	margin: 0.3em 0;
	padding: 0;
}

.artikel-inhalt h2 {
	font-size: 130%;
	margin: 0.3em 0;
	padding: 0;
}

.artikel-inhalt h3 {
	font-size: 120%;
	margin: 0.3em 0;
	padding: 0;
}

.artikel-inhalt h4 {
	font-size: 110%;
	margin: 0.3em 0;
	padding: 0;
}

.artikel-inhalt h5 {
	font-size: 90%;
	margin: 0.3em 0;
	padding: 0;
    color: #676767;
}

.artikel-inhalt ul {
	margin-top: 0.5em;
	list-style: disc inside;
}

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

.artikel-inhalt blockquote > p {
    color: #787878;font-style: italic;
}

.excerpt p::after {
	content: ' [...]';
}

.artikel-footer div {
	margin-top: 0.5em;
}

.entry-meta {
	margin-top: 0.5em;
	font-size: 90%;
	color: rgba(100,100,100,1.00);
}
.meta-tags a {
	font-size: 80%;
	color: rgba(255,255,255,1.00);
	background: rgba(60,60,60,1.00);
	margin-right: 0.5em;
	padding: 0.3em;
	border-radius: 0.2em;
}

.meta-tags a:hover, .meta-tags a:active {
	color: rgba(200,0,0,1.00);
}

.post-navigation {
	margin-top: 1em;}

.nav-links div {
	background: rgba(220,220,220,1.00);
	margin-top: 0.3em;
	padding: 0 0.3em;
	border-radius: 0.2em;
	font-weight: bold;
	text-align: center;
}

.nav-links a {
	color: rgba(255,0,0,1.00);
}

.nav-links a:hover, .nav-links a:active {
	color: rgba(100,0,0,1.00);
}

.nav-previous a::before {
	content: '<<<<  ';
}

.nav-previous a::after {
	content: '  <<<<';
}

.nav-next a::before {
	content: '>>>>  ';
}

.nav-next a::after {
	content: '  >>>>';
}

/*
--------------------------------------------
2.3. Sidebars
--------------------------------------------
*/

aside {
	margin: 1em 0 0 0;
	border-top: thin solid rgba(0,0,0,1.00);
}

.widget-title {
	margin: 0.5em 0 0.2em 0;
	font-size: 90%;
	text-transform: uppercase;
	color: rgba(100,100,100,1.00);
}

.sidebar li {
	font-family: 'Roboto Condensed', sans-serif;
	margin-top: 0.2em;
	padding: 0.2em 0.3em;
	background: rgba(240,240,240,1.00);
	border-radius: 0.2em;
}

.sidebar .post-date {
	color: rgba(150,150,150,1.00);
	font-size: 80%;
}

.sidebar .post-date::before {
	content: '(';
}

.sidebar .post-date::after {
	content: ')';
}

.sidebar-ad-element {
    max-width: 98%;
}

select {
	font-size: 100%;
}

.widget-social-button {
    margin-top: 0.3em;
}

/*
--------------------------------------------
2.4. Footer
--------------------------------------------
*/

.haupt-footer {
	display: flex;
	flex-flow: column;
	margin-top: 0.3em;
}

/*
--------------------------------------------
2.5. Werbeblöcke einpassen
--------------------------------------------
*/

.top-ads {
	flex: 1;
	display: none;
	max-height: 6em;
	margin: 0 0 0 1em;
	padding: 0 0 0 1em;
}

.top-ad-headline {
	font-size: 1em;
	margin: 0em;
	padding: 0em;
	color: rgba(100,100,100,1.0);	
}


.top-ad {
	display: flex;
	flex-flow: row nowrap;
	margin-top: 1em;
}

.top-ad-element {
	margin-right: 1em;
}

.top-ad-image {
	max-width: 95%;
	height: auto;
	vertical-align: top;
}

.top-ad-text {
	display: none;
	padding: 0;
	margin: 0.3em 0 0 0;
	font-size: 85%;
}

.footer-ads {
	display: flex;
    flex-flow: column;
	margin: 1em;
}

.footer-ad-image {
    margin-top: 1em;
    max-width: 85%;
}

.a {
    max-width: 100%;
}

.a-single {
    max-width: 100%;
}

.g {
    max-width: 100%;
}

.g-single {
    max-width: 100%;
}

.g-dyn {
    max-width: 100%;
}

.adrot {
    max-width: 99%;
	height: auto;
}

.a-single img {
    max-width: 99%;
	height: auto;
    padding-bottom: 0.4em;
    margin-bottom: 0.4em;
    border-bottom: thin solid rgba(0,0,0,1.00);
}

.g-single img {
    max-width: 99%;
	height: auto;
    padding-top: 0.4em;
    margin-top: 0.4em;
    padding-bottom: 0.4em;
    margin-bottom: 0.4em;
    border-bottom: thin solid rgba(0,0,0,1.00);
}

.g-dyn img {
    max-width: 99%x;
	height: auto;
    padding-top: 0.4em;
    margin-top: 0.4em;
    padding-bottom: 0.4em;
    margin-bottom: 0.4em;
    border-bottom: thin solid rgba(0,0,0,1.00);
}

/*.sidebar-ad {
	display: none;
}*/

/*
--------------------------------------------
3. Mobile first! 
Einstellungen für Smartphones:
Bestimmung der allgemeinen Ausgangsgrößen, 
der Sichtbarkeit der Objekte, der Anordnung
der Flex-Objekte und Festlegung 
der Startreihenfolge:
Alles untereinander in einer Spalte.
Wichtiges nach oben!
--------------------------------------------
*/

.seitenwrapper {
	display: flex;
	flex-flow: column;
}
	
.seiten-branding {
	display: flex;
	flex-flow: row;
	align-items: flex-end;
}

.branding-logo {
	height: 4em;
}

.branding-logo-image {
	height: 4em;
	width: 4em;
}

main {
	order: 2;
	display: flex;
	flex-flow: column;
}

.haupt-navigation {
	order: 3;
}

.haupt-footer {
	order: 4;
}

.haupt-inhalt {
	order: 1;
}

.attachment-post-thumbnail {
	max-width: 99%;
	height: auto;
}

.alignnone {
	max-width: 99%;
	height: auto;
}

.sidebar-links {
	order: 2;
}

.sidebar-rechts {
	order: 3;
}

/*
--------------------------------------------
Breakpoint für große Smartphones 
und Tablets.
Wir versuchen ein zweispaltiges Layout.
Das kann, muss aber nicht auf allen 
Geräten funktionieren.
--------------------------------------------
*/

@media all and (min-width: 35em) {
	
	.seitenwrapper {
		margin-top: 1em;
	}
	
	.haupt-navigation {
		order: 2;
	}

	.haupt-navigation .menu-item {
		float: left;
		padding: 0 0.3em;
		margin-left: 0.3em;
		background: rgba(230,230,230,1.0);
		border-radius: 0.2em;
	}
	
	main {
		order: 3;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.haupt-inhalt {
		order: 2;
		flex: 1 1 19em;
		margin: 0.5em 1em 0 1em;
		min-width: 19em;
		max-width: 28em;
	}
	
	aside {
		border: 0;
	}
	
	.sidebar-links {
		order: 1;
		flex: 1 1 12em;
		max-width: 12em;
	}
	
	.sidebar-rechts {
		order: 3;
		flex: 1 1 auto;
		display: flex;
		flex-flow: row wrap;
	}
    
    .sidebar-rechts .widget-wrap {
        margin-right: 0.3em;
    }
	
	.haupt-footer {
		order: 4;
		margin: 1em 0;
	}

    .a-single img {
        max-width: 99%;
        padding-bottom: 0.4em;
        margin-bottom: 0.4em;
        border-bottom: thin solid rgba(0,0,0,1.00);
    }
    
    .g-single img {
        max-width: 99%;
        padding-top: 0.4em;
        margin-top: 0.4em;
        padding-bottom: 0.4em;
        margin-bottom: 0.4em;
        border-bottom: thin solid rgba(0,0,0,1.00);
    }
    
    .g-dyn img {
        max-width: 99%;
        padding-top: 0.4em;
        margin-top: 0.4em;
        padding-bottom: 0.4em;
        margin-bottom: 0.4em;
        border-bottom: thin solid rgba(0,0,0,1.00);
    }
}

/*
--------------------------------------------
Breakpoint für große Tablets und 
kleine Desktops.
Wir vergrößern rechte Sidebar, 
Kopf und Hauptteil und schalten den
Werbeblock im Kopf ein.
Das kann, muss aber nicht auf allen 
Geräten funktionieren.
--------------------------------------------
*/

@media all and (min-width: 600px) {
	
	.seitenwrapper {
		padding-top: 1.0em;
	}

	.branding-logo {
		height: 6em;
	}
	
	.branding-logo-image {
		height: 6em;
		width: 6em;
	}
	
	.top-ads {
		flex: 3;
		display: block;
	}
	
	.haupt-inhalt {
		flex: 1 1 24em;
		min-width: 24em;
		max-width: 38em;
	}

	.attachment-post-thumbnail {
		max-width: 45%;
		height: auto;
		float: left;
		margin-right: 1em;
	}
	
	.sidebar-links {
		flex: 1 1 13em;
		max-width: 13em;
	}
	
	.sammlung {
		display: flex;
		flex-flow: row wrap;
		margin-top: 1.5em;
		padding-top: 1.5em;
		border-top: medium solid rgba(200,200,200,1.00);
	}
	
	.sammlung-titel {
		flex: 10 10 100%;
	}
	
	.sammlung .post-spalte {
		flex: 1 1 30%;
		margin-right: 1em;
	}
	
	.sammlung .post-spalte:last-child {
		margin-right: 0;
	}
	
	.sammlung .entry-meta {
		display: none;
	}
	.sammlung .sammlung-titel {
		font-size: 1em;
	}
	
	.sammlung .attachment-post-thumbnail {
		max-width: 99%;
		height: auto;
		margin-bottom: 1em;
	}
	
	.sammlung .artikel-inhalt {
		display: none;
	}
    
    .footer-ads{
        display: none;
    }
}

/*
--------------------------------------------
Breakpoint für Desktops.
Wir erzwingen ein dreispaltiges Layout und 
schalten die sekundären Werbeblöcke ein.
Das kann, muss aber nicht auf allen 
Geräten funktionieren.
--------------------------------------------
*/

@media all and (min-width: 65em) {
	
	body {
		font-size: 120%;
	}
	
	.seitenwrapper {
		max-width: 70em;
		margin: 0 auto;
	}

	.branding-logo {
		height: 10em;
	}
	
	.branding-logo-image {
		height: 10em;
		width: 10em;
	}

	.kopf-titel-headline {
		font-size: 150%;
		}
	
	.kopf-winzig {
		font-size: 60%;
		color: rgba(120,120,120,1.00);
	}
	
	.top-ads {
		flex: 2;
		max-height: 10em;
	}
	
	.top-ad-element {
		flex: 1;
		margin: 0 0.5em 0 0;
		padding: 0.5em;
		border: thin solid rgba(100,100,100,1.00);
		border-radius: 1em;
	}
	
	.top-ad-image {
	}
	
	.top-ad-text {
		display: block;
	}
	
	main {
		flex-wrap: nowrap;
	}
	
	.haupt-inhalt {
		flex: 3 3 auto;
		max-width: auto;
	}
	
	.sidebar-links {
		flex: 1 1 auto;
		max-width: 270px;
	}
	
	.sidebar-rechts {
		flex: 1 1 auto;
		max-width: 270px;
		flex-flow: column;
	}
	
	.sidebar-ad {
		display: block;
	}
}




/*
--------------------------------------------
Debugmodus
--------------------------------------------
*/

.suchtext {
	display: none;
	font-size: 150%;
	font-weight: bold;
	color: rgba(0,44,255,1.00);
}