/*
Theme Name: aktionsbuendnis
Author: Sebastian Falk, Fenn EDV
Description: A small and easy responsive Layout
Tags: responsive, blank
*/

/* FONTS */
@font-face {font-family: OpenSans; src: url('fonts/OpenSans-Regular.ttf') format('truetype');}

/* PRESETS */
* {margin: 0; padding: 0; position: relative; outline: none;}
html, body {height: 100%;}
img, iframe {max-width: 100%; height: auto; border: 0;}
a, a:hover, a:active, a:focus, a:visited {text-decoration: none; outline: none;}
a img {outline: none;}
.mobil {display: none;}
.clear {float: none; clear: both;}
body {font-family: OpenSans; background-color: #f8f8f8;}
body {background-image: url('images/hintergrund.jpg'); background-attachment: fixed; background-size: 100% auto; background-repeat: no-repeat;}

/* GENERAL */
#outer-pagewrapper {border: 1px solid #6884bc; width: 70em; margin: 0 auto; margin-top: 2em; margin-bottom: 5em; box-shadow: 0.125em 0.25em 0.5em #666;}
#header-wrapper {width: 70em; margin: 0 auto; background-color: #fff; position: relative;}
#header-wrapper {background-image: url('images/header.jpg'); background-size: 100% auto; background-repeat: no-repeat;}
#header-wrapper .logo {width: 33em; height: auto; display: inline-block; margin-left: 1.5em; margin-top: 1em; margin-bottom: 1em;}
#header-wrapper .navigation {position: absolute; bottom: 2.5em; right: 2em; list-style: none;}
#header-wrapper .navigation li {float: left; margin-right: 0.5em;}
#header-wrapper .navigation li:last-child {margin-right: 0;}
#header-wrapper .navigation li a {color: #002d87; border: 1px solid #002d87; padding: 0.35em 0.5em; font-size: 0.875em; background-color: #fff;}
#header-wrapper .navigation li a:hover, #header-wrapper .navigation li a:active, #header-wrapper .navigation li a:focus, #header-wrapper .navigation li.current_page_item a {background-color: #002d87; color: #fff;}
#page-wrapper {width: 70em; margin: 0 auto; background-color: #fff; padding-top: 1em;}
.slider {overflow: hidden; width: 100%; height: 15em; margin-bottom: 1.25em; padding: 0 2em; position: relative;}
.slider-text {position: absolute; bottom: 0; left: 0; background-color: rgba(0,48,143,0.7); padding: 1em; width: auto; margin-left: 2em; color: #fff;}
.slider img {width: 100%; height: auto; margin-top: -20%;}
.the-content {float: left; width: 48em;}
.the-sidebar {float: right; width: 18em; background-color: #fff; padding: 1em 2em; margin-bottom: 1em; padding-top: 0;}
.the-text {background-color: #f3f3f3; padding: 1em; margin-bottom: 1.25em; margin-left: 2em; border: 1px solid #cecece;}
.the-text a {color: #333; font-weight: bold;}
.the-text a:hover, .the-text a:active, .the-text a:focus {text-decoration: underline;}
.post-image {float: left; width: 15em; margin-top: 0.5em;}
.post-wrapper {float: right; width: 27.5em;}
.post-image-single {margin-bottom: 1em;}
.post-image-page {margin-bottom: 1em;}

/* SEARCHFORM */
#searchform #s {border: 1px solid #002d87; padding: 0.5em; width: 13.25em; float: left;}
#searchform #searchsubmit {border: none; background-color: #002d87; padding: 0.5em 1em; color: #fff; cursor: pointer; width: 4.75em; float: right;}
.screen-reader-text {display: none;}

/* PAGE-CONTENT */
#page-wrapper .the-content h1 {margin-bottom: 0.5em; margin-left: -1.25em; background-color: #999; color: #fff; padding: 0.25em 0.5em; font-size: 1.5em;}
#page-wrapper .the-content h2 {margin-bottom: 0.5em; margin-left: -1.5em; background-color: #999; color: #fff; padding: 0.25em 0.5em; font-size: 1.25em;}
#page-wrapper .the-content h3 {color: #002268; margin-bottom: 1em;}
#page-wrapper .the-content h4 {color: #002268; margin-bottom: 1em;}
#page-wrapper .the-content h5 {color: #002268; margin-bottom: 1em;}
#page-wrapper .the-content h6 {color: #002268; margin-bottom: 1em;}
#page-wrapper .the-content p {color: #333; line-height: 1.5em; margin-bottom: 1em;}
#page-wrapper .the-content ul {margin-left: 1em; margin-bottom: 1em;}
#page-wrapper .the-content ul li {color: #333; line-height: 1.5em;}

/* SIDEBAR */
#page-wrapper .the-sidebar h1 {color: #666; margin-bottom: 0.5em; font-size: 1.25em; text-transform: uppercase; border: 1px solid; padding: 0.25em; text-align: center;}
#page-wrapper .the-sidebar h2 {color: #666; margin-bottom: 0.5em; font-size: 1.125em; text-transform: uppercase; border: 1px solid; padding: 0.25em; text-align: center;}
#page-wrapper .the-sidebar h3 {color: #002268; margin-bottom: 0.25em; font-size: 1.125em;}
#page-wrapper .the-sidebar h4 {color: #002268; margin-bottom: 0.25em; font-size: 1.125em;}
#page-wrapper .the-sidebar h5 {color: #002268; margin-bottom: 0.25em; font-size: 1.125em;}
#page-wrapper .the-sidebar h6 {color: #002268; margin-bottom: 0.25em; font-size: 1.125em;}
#page-wrapper .the-sidebar p {color: #333; line-height: 1.5em; margin-bottom: 1em; font-size: 0.875em;}
#page-wrapper .the-sidebar img {margin-bottom: 1em;}
#page-wrapper a.link-all-posts {background-color: #002d87; color: #fff; padding: 0.5em; text-align: center; display: block; border: 1px solid #002d87;}
#page-wrapper a.link-all-posts:hover, #page-wrapper a.link-all-posts:active, #page-wrapper a.link-all-posts:focus {background-color: #fff; color: #002d87;}

/* KALENDER */
#page-wrapper .the-sidebar .day {width: 12.125%; margin-right: 0.65%; margin-bottom: 2%; float: left; border: 1px solid #000; overflow: hidden; text-align: center; padding: 0.25%;}
#page-wrapper .the-sidebar .day.today {background-color: #ededed; color: #002268; font-weight: bold; box-shadow: 0.125em 0.125em 0.125em #000;}
#page-wrapper .the-sidebar .day.today.has-posts {box-shadow: 0.125em 0.125em 0.125em #000;}
#page-wrapper .the-sidebar .day.today.has-posts, #page-wrapper .the-sidebar .day.has-posts {background-color: #5d7b03; color: #fff;}
#page-wrapper .the-sidebar .day.today.has-posts:hover, #page-wrapper .the-sidebar .day.has-posts:hover {background-color: #002268;}
#page-wrapper .the-sidebar .day-inner {font-size: 0.65em;}
#page-wrapper .the-sidebar .calendar-wrapper {margin-bottom: 2em;}
#page-wrapper .the-sidebar h3.month-name {text-align: center; background-color: #002268; color: #fff; padding: 0.5em; display: block; margin-top: 1em;}

#footer-wrapper {width: 70em; margin: 0 auto; background-color: #1545A6;}
#footer-wrapper {background-image: url('images/hintergrund-footer.jpg'); background-attachment: fixed; background-size: 100%; background-repeat: no-repeat;}
#footer-inner {padding: 1.5em 2em; color: #fff;}
#footer-inner .col {font-size: 0.875em; float: left;}
#footer-inner .col ul {margin-bottom: 1em; margin-left: 1em;}
#footer-inner .col ul li {list-style: square; margin-bottom: 0.125em;}
#footer-inner .col h3 {margin-bottom: 0.5em;}
#footer-inner .col p {margin-bottom: 1em;}
#footer-inner .col img {max-width: 80%;}
#footer-inner .fa {width: 1em; text-align: center; margin-right: 0.5em;}
#footer-inner a {color: #fff;}
#footer-inner a:hover, #footer-inner a:active, #footer-inner a:focus {text-decoration: underline;}

.cn-set-cookie, .cn-more-info {background-color: #5d7b03; color: #fff; padding: 0.25em; display: inline-block;}

/* MOBIL PRESETS */
.mobil {display:  none;}
#mobil-navigation-top {text-align: center; background-color: #002d87;}
#mobil-navigation-top a {color: #fff; display: inline-block; font-size: 1.75em; margin: 0 0.125em; padding: 0.5em;}
#to-top-button {text-align: center; background-color: #002d87;}
#to-top-button a {color: #fff; display: inline-block; font-size: 1.75em; margin: 0 0.125em;	padding: 0.5em;}
#mobil-navigation-bottom h2 {color: #fff; background-color: #002d87; font-size: 1.25em; text-transform: uppercase; padding: 1em; text-align: center; margin-top: 0; margin-bottom: 0; border-bottom: 1px solid #000; border-top: 1px solid #000;}
#mobil-navigation-bottom ul.navigation li.page_item a {padding: 1em 2em; background-color: #999; color: #fff; display: block; border-bottom: 1px solid #000;}
#mobil-navigation-bottom ul.navigation li.current_page_item a, #mobil-navigation-bottom ul.navigation li.page_item a:hover, #mobil-navigation-bottom ul.navigation li.page_item a:active, #mobil-navigation-bottom ul.navigation li.page_item a:focus {background-color: #eee; color: #333;}
#mobil-navigation-bottom ul.navigation ul.children li a {font-size: 0.875em; padding-left: 3em; background-color: #21c2f3;}

@media only screen and (min-width : 12.5em) and (max-width : 72.5em)
{
	/* RESETS */
	#header-wrapper, #outer-pagewrapper, #page-wrapper, .slider, #footer-wrapper {width: auto;}
	#header-wrapper {background-image: initial;}
	#header-wrapper .logo {width: auto; height: auto; display: block; margin: 0 auto; max-width: 80%; padding-top: 1em;}
	#outer-pagewrapper {margin-top: 0; margin-bottom: 0; border: none;}
	.the-content, .the-sidebar {float: none; width: auto;}
	.the-sidebar {margin-bottom: 0;}
	.the-text {margin-right: 2em;}
	#searchform #s {width: 60%}
	.slider {height: auto;}
	
	h1,h2,h3,p {hyphens: auto;}
	
	.mobil {display: block;}
	
	
	/* HIDE OUTS */
	#header-wrapper .navigation {display: none;}
	#footer-wrapper {display: none;}
	.slider-text {display: none;}
	
}