/* =================================================

Stylesheet für die Website der Lippischen Landeskirche/Gemeindepaedagogik

unter "http://www.lippische-landeskirche.de"  

Datei: styles.css

Datum: 8. Maerz 2018

Autor:  Peter Thimm (ThiWeCo)

Erweiterung: Klaus Vogler

================================================== */






@media screen {

/* ========================== Layout (Größe und Positionierung) =========================================*/

* {

	box-sizing: border-box;

}
 
body {

	width: 90%;

	max-width: 1200px;

	margin: 0 auto;

}

.wrap {

	padding: 0 2em;

}

header {

	padding: 2em 0;

	margin-bottom: 1%;

}

.logo {

	width: 30%;

	float: left;

}

.slider {

	position: relative;

	margin-bottom: 3%;

}

.slider a {

	position: absolute;

	top: 1em;

	left: 1em;

	font-size: 30px;

	color: black;

	text-decoration: none;

	padding: 6px;

	background-color: white;

	opacity: 0.6;

}

.slider a:hover {

	color: white;

	text-decoration: none;

	padding: 6px;

	background-color: black;

	opacity: 0.6;

	transition: background-color 0.3s;

}



.welcome {

    padding: 1em 2em;

	margin-bottom: 3%;

}



/* Gestaltung der Featured Artikel auf Startseite oben */

.featured {

	float: left;

	width: 31.3%; 

	margin-right: 3%;

	margin-bottom: 3%;

	text-align: center;

	height: 625px;

	overflow: hidden;

	background: rgba(255,255,255,0.8);

}

.featured p {

	text-align: left;

}

article.featured:last-child {

	float: left;

	width: 31.3%;

	margin-bottom: 3%;

	margin-right: 0;

	text-align: center;

	height: 625px;

	overflow: hidden;

	background: rgba(255,255,255,0.8);

}

.readon {

	float: right;

	padding: 0.2em;

	border: 1px solid #555555;

}

/* Ende Gestaltung der Featured Artikel auf Startseite oben */



/* Gestaltung Termine */

#termine h3 {

	margin: 2em 2em 1em 2em;

}

#termine h4 {

	margin: 1em 2em;

}

#kalender {

	float: left;

    background-color: #999999;

    color: #ffffff;

    font-size: 1.5em;

    margin: 0 10px 0 0;

    padding: 5px;

}

#termine article h3 {

	margin-top: 0;

}

#termine article h3, #termine article h4, #termine article h5, #termine article p {

	margin-left: 0px;

}

/* Ende Gestaltung Termine */



/* Bilder mit Bildunterschriften */

figure {

	display: table;

	padding: 10px

}

figcaption {

	display: table-caption;

	caption-side: bottom ;

	text-align: center;

	font-size: 15px;

	font-size:0.9375rem;

	font-weight:700;

}

/* Ende Bilder mit Bildunterschriften */

section.news {

	float: left;

	width: 65.6%;

	margin: 0 3% 3% 0;

}

article {

	padding: 1em 2em;

}

article.news {

	margin-bottom: 1em;

}

section.sidebar_right {

	float: right;

	width: 31.3%;

	margin-bottom: 3%;

}

.sidebar_right article {

	margin-bottom: 3%;

}

section.sidebar_left {

	float: left;

	width: 31.3%;

	margin-bottom: 3%;

}

section.main {

	float: right;

	width: 65.6%;

	margin: 0 0 3% 3%;

}

.pagefooter {

	clear: both;

	padding: 1% 3% 1% 3%;

	margin-top: 3%;

}

.footer_menu {

    float: right;

}

address {

	float: left;

	width: 31.3%;

	margin-right: 3%;

	border-right: 2px solid white;

}

.fa {

	margin-right: 0.7em;

}

.transparency {

	float: left;

	width: 31.3%;

	margin-right: 3%;

	border-right: 2px solid white;

}

ul.socialmedia {

	padding-top: 1em;

	margin: 0;

}

ul.socialmedia li {

	float: right;

	margin-left: 2em;

}

ul.data {

	margin-top: 4em;

}

ul.data li {

	float: right;

	margin-left: 0.4em;

}

.copyright {

	clear: both;

	padding-top: 1.5em;

}



/* ========================== Inhalt (Gestaltung einzelner Elemente) =========================================*/

html {

	background-color: #fff;

	background: url(../../../../daten/Media/gemeindepaedagogik/gemeindepaedagogik-hg.jpg) no-repeat center center fixed;

	-webkit-background-size: cover;

	-moz-background-size: cover;

	-o-background-size: cover;

	background-size: cover;

	font-family: 'Source Sans Pro', Arial, sans-serif;

	font-size: 100%;

}

body {

	background: rgba(255,255,255,0.6);

	font-size: 18px;

	font-size: 1.125rem;

	color: #333;

}

.welcome {

	background: rgba(255,255,255,0.8);

}

.welcome h1 {

	font-family: 'Source Sans Pro', Arial, sans-serif;

	font-weight:700;

	font-size: 26px;

	font-size: 1.625rem;

	color: #3868a0;

}

.welcome p {

	font-size: 20px;

	font-size: 1.25rem;

	font-weight: 700;

}

section.news {

	overflow: hidden;

	background: rgba(255,255,255,0.8);

}

section.sidebar_right {

	background: rgba(255,255,255,0.8);

}

.sidebar_right h3 {

	color: white;

	padding: 0.4em 0.9em;

	background: #3868a0;

}

section.sidebar_left {

	background: rgba(255,255,255,0.8);

	padding-top: 1em;

}

section.main {

	background: rgba(255,255,255,0.8);

}

.pagefooter {

	color: white;

	background-color: #555555;

}

.pagefooter a {

	color: white;

	text-decoration: none;

}

address {

	text-align: left;

	font-style: normal;

}

ul.socialmedia li {

	display: inline-block;

}

ul.data li {

	display: inline-block;

}

.copyright {

	text-align: center;	

}

h2 {

	font-family: 'Source Sans Pro', Arial, sans-serif;

	font-weight:700;

	font-size: 22px;

	font-size: 1.375rem;

	color: #3868a0;

}

h3 {

	font-family: 'Source Sans Pro', Arial, sans-serif;

	font-weight:700;

	font-size: 20px;

	font-size: 1.25rem;

	color: #3868a0;

}

h5 {

	font-size: 16px;

	font-size: 1rem;

	font-weight: 300;

	margin: -0.8em 0 1em 0;

}

.subtitle {

	float: none;

	font-weight: 600;

	margin-top: -0.5em;

}

img {

	max-width: 100%;

	height: auto;

}

.img_right {

	float: right;

	margin-left: 15px;

}

.img_left {

	float: left;

	margin-right: 15px;

}

article h3 a, article h3 a:visited {

	color: #3868a0;

	text-decoration: none;

}

article h3 a:hover, article h3 a:focus {

	color: #3868a0;

	text-decoration: underline;

}

.sidebar_right h3 a:hover, .sidebar_right h3 a:focus {

	color: #ffffff;	

	text-decoration: underline;

}

.sidebar_right h3 a, .sidebar_right h3 a:visited {

	color: #ffffff;	

}

a {

	color: #3868a0;

	text-decoration: none;

}

a:hover, a:focus {

	color: #3868a0;

	text-decoration: underline;

}

/* ========================== Navigation =========================================*/



/*Navigation Menü oben*/

nav {

	margin-left: 30%;

	margin-bottom: 2em;

}

nav ul {

	padding: 0;

	margin: 0;

	float: right;

}

nav li {

	display: inline-block;

	position:relative;

	padding: 0.9em 1em;

	margin: 0;

	list-style-type: none;

	font-family: Tahoma, Arial, sans-serif;

	font-size: 0.9em;

	font-weight: 400;

	color: #333;

	text-transform: uppercase;

	transition: background-color 0.3s;

	background: #aaa;

}

nav li a {

	color: #333;

	text-decoration: none;

}

nav li.active {

	color: white;

	background: #3868a0;

}

nav li.active_devider {

	color: white;

	background: #3868a0;

}

nav li.active a {

	color: white;

	text-decoration: none;

}

nav li:hover, nav li:focus {

	color: white;

	background: #3868a0;

}

nav li:hover a, nav li:focus a {

	color: white;

	text-decoration: none;

}



/* Navigation Menü oben Dropdown*/ 

nav ul.submenu li {

	clear: both;

	padding: 0.5em 1em;

	font-size: 0.9em;

}

nav li:hover ul.submenu {

	display: block;

	background: rgba(56,104,160,0.7);

	z-index: 10;

}

nav ul.submenu {

	position: absolute;

	top: 3em;

	left: 0;

	display:none;

	text-align: center;

}

nav ul.submenu li {

	color: white;

	text-transform: none;

	min-width: 14.2em;

}

nav ul.submenu li:hover, nav ul.submenu li:focus {

	background: #3868a0;

}



.slicknav_menu {

	display: none;

}





/*Navigation Menü links*/

ul.menu_left  {

	padding: 0;

	margin: 0;

	float: none;

}

.menu_left li {

	display: block;

	position:relative;

	padding: 0.9em 1em;

	margin-bottom: 0.15em;

	list-style-type: none;

	font-family: Tahoma, Arial, sans-serif;

	font-size: 0.8em;

	font-weight: 400;

	text-transform: uppercase;

	transition: background-color 0.3s;

	background: #aaa;



}

.menu_left li a {

	color: #333;

	text-decoration: none;

}

.menu_left li:hover, nav li:focus {

	color: white;

	background: #3868a0;

}

.menu_left li:hover a, nav li:focus a {

	color: white;

	text-decoration: none;

}

.menu_left li.active {

	color: white;

	background: #3868a0;

}

.menu_left li.active a {

	color: white;

	text-decoration: none;

}

.menu_left_submenu li {
    
	font-size: 0.7em;
	
	

	text-transform: none;

	text-align: right;
	margin-left: 1em;
	padding-left:1em;

}

.menu_left li.submenu a {
   
	font-size: 0.7em;
	
	

	text-transform: none;

	text-align: right;
	margin-left: 1em;
	padding-left:1em;

}

.menu_left_submenu li.active a {
	

	
	

	text-transform: none;

	text-align: right;
	margin-left: 1em;
	padding-left:1em;

}

/*Navigation Menü Soziale Netzwerke*/

#soziale-netzwerke {

	overflow: hidden;

	background-color: #aaa;

	padding: 0 2% 2% 2%;

	margin: 3em 0 1em 0;

}

#soziales-netz ul {

	float: left;

}

#soziales-netz li {

	list-style-type:none;

	display: inline-block;

	float: right;

	margin-left: 20px;

}

}











@media only screen and (min-width: 790px) and (max-width: 1100px){

body {

	width: 95%;

	font-size:15px;

	font-size:0.9375rem;

}

.wrap {

	padding: 0 1em;

}

.welcome {

    padding: 1em 1em;

	margin-bottom: 3%;

}



main {

	line-height: 1.6;

}

article {

	padding: 1em;

}

article.left {

	margin-bottom: 1em;

}

.pageheader {

	padding: 0.25em 0;

}

.slider {

	margin-bottom: 1em;

}

.left {

	width: 65%;

}

.aside {

	width: 30%;

	padding-left: 15px;

	margin-bottom: 15px;

}

h2 {

	font-size: 20px;

	font-size: 1.25rem;

}

h3 {

	font-size: 18px;

	font-size: 1.125rem;

}

nav li {

	font-size: 0.95em;

	padding: 0.75em 0.5em;

	color: white;

}

nav ul.submenu {

	position: absolute;

	top: 2.7em;

	left: 0;

	display:none;

	text-align: center;

}

#nav li:hover ul.level2 {

	margin-left: -0.5em;

}

.footer_menu {

	float: none;

	margin-bottom: 10px;

	text-align: center;

}



}





 @media screen and (min-width: 280px) and (max-width: 789px) {

body {

	width: 96%;

   -moz-hyphens: auto;

   -o-hyphens: auto;

   -webkit-hyphens: auto;

   -ms-hyphens: auto;

   hyphens: auto; 

}

.wrap {

	padding: 0 0.5em;

}

.welcome {

    padding: 0.5em 0.5em;

	margin-bottom: 3%;

}

article {

	padding: 0.5em;

}

/* Featured Artikel */

.featured {

	float: none;

	width: 100%; 

	margin-right: 0;

	margin-bottom: 2%;

}

article.featured:last-child {

	float: none;

	width: 100%; 

	margin-right: 0;

	margin-bottom: 2%;

}

/* Sections untereinander */

section.news {

	float: none;

	width: 100%;

	margin: 0 3% 3% 0;

}

section.sidebar_right {

	float: none;

	width: 100%;

	margin-bottom: 2%;

}

section.sidebar_left {

	float: none;

	width: 100%;

	margin-bottom: 2%;

}

section.main {

	float: none;

	width: 100%;

	margin: 0 0 3% 3%;

}



/* Navigation und Kopfbereich */

#nav {

	display:none;

}

	

.slicknav_menu {

	display:block;

}



.logo {

	position: absolute;

	top: 15px;

}

header {

	height: 10px;

	margin-bottom: 0;

	padding: 0;

}

address {

    float: none;

	width: 100%;

	margin-right: 0;

	margin-bottom: 30px;

	border-right: none;

	text-align: center;

}

.transparency {

    float: none;

	width: 100%;

	margin-right: 0;

	border-right: none;

	margin-bottom: 30px;

	text-align: center;

}

.footer_menu {

    float: none;

	width: 100%;

	margin-right: 0;

	margin-bottom: 30px;

	border-right: none;

	text-align: center;

}

ul.socialmedia li {

	float: none;

	margin-left: 2em;

	text-align: center;

}

ul.socialmedia li:first-child {

	margin-left: 0;

}

ul.data {

	margin-top: 2em;

}

ul.data li {

	float: none;

	margin-left: 0.6em;

}}









































 @media print {

* {

	color:#000 !important;

	box-shadow:none !important;

	text-shadow:none !important;

	background:transparent !important;

}

html {

	background-color:#fff;

}

nav {

	display:none;

}

a[href]:after {

	content: " (" attr(href) ") ";

}

a[href] {

	font-weight:bold;

	text-decoration:underline;

	color:#06c;

	border:none;

}

a[href^="javascript:"]:after, a[href^="#"]:after {

	content:"";

}

abbr[title]:after {

	content: " (" attr(title) ")";

}

figure {

	margin-bottom:1em;

	overflow:hidden;

}

figure img {

	border:1px solid #000;

}

}