/*
Theme Name: DDR-Oberliga.de
Author: metafox Webagentur
Author URI: http://metafox-webagentur.de/
Description: A small and easy responsive Layout
Tags: responsive, blank
*/

* {margin: 0; padding: 0; position: relative; outline: none;}
ul, li {list-style: none;}
.clear {clear: both; float: none;}
.left {width: 48%; float: left;}
.right {width: 48%; float: right;}
.small {font-size: 65%;}
table {max-width: 100%;}
.table-wrapper {width: 100%; max-width: 100%; overflow-y: hidden; overflow-x: scroll;}
table, tr, td {border: none; border-collapse: collapse;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #fff;}
::-moz-placeholder { /* Firefox 19+ */ color: #fff;}
:-ms-input-placeholder { /* IE 10+ */ color: #fff;}
:-moz-placeholder { /* Firefox 18- */ color: #fff;} 

.page-wrapper {padding: 1em 0 2em;}
.content-wrapper {width: 60em; margin: 0 auto;}
.logo {max-width: 100%; height: auto; margin-bottom: 1em;}

.navigation {float: left; width: 15em;}
.navigation ul li a {background-color: rgba(8,105,170,0.95); padding: 0.5em 1em; display: block; color: rgb(252,239,38); text-decoration: none; margin-bottom: 0.5em;}
.navigation ul .children li a {font-size: 0.875em; padding-left: 2em;}
.navigation ul li a:hover, .navigation ul li a:active, .navigation ul li a:focus, .navigation ul li.current_page_item a {background-color: rgba(252,239,38,0.95); color: #000;}
.navigation ul.children {display: none;}
.navigation .current_page_item ul.children {display: block !important;}

.the-content {float: right; width: 40em; background-color: rgba(8,105,170,0.8); color: #fff;}
.the-content-inner {padding: 1em;}

.the-footer-wrapper {margin-top: 1em; float: right; width: 40em; background-color: rgba(8,105,170,0.8); color: #fff;}
.the-footer {padding: 1em;}
.the-footer a {color: #fff; text-decoration: none;}

/* TYPO & CO. */
body {font-family: 'Open Sans', sans-serif;}
table, table tr, table tr td, table tr td span {font-family: 'Open Sans', sans-serif !important;}
.the-content h1, .the-content h2 {font-family: 'Barlow Semi Condensed', serif; margin-bottom: 0.75em; background-color: #333; padding: 0.25em 0.5em; margin-left: -1em; box-shadow: 0.125em 0.25em 0.5em #000; font-size: 2em; margin-top: 0.25em; border: 1px solid #555;}
.the-content h3 {font-family: 'Barlow Semi Condensed', serif; margin-bottom: 0.75em; font-size: 1.25em; background-color: #0869AA; padding: 0.25em 0.5em; border: 1px solid #333; margin-top: 1.75em;}

.the-content a {color: #F2E628; text-decoration: none; font-weight: bold; font-weight: normal;}
.the-content p {margin-bottom: 1em; line-height: 1.5em;}
.the-content table {width: 100%; font-size: 0.875em;}
.the-content table tr td {padding: 0.5em 0.75em; vertical-align: top;}
.the-content table tr th {padding: 0.5em 0.75em; text-align: left;}
.the-content table tr:nth-child(odd) {background-color: #1879BA;}
.the-content table tr:nth-child(even) {background-color: #0869AA;}
.the-content ul {margin-bottom: 1em; margin-left: 1em;}
.the-content ul li {list-style: disc;}

a.action-button {font-size: 0.875em; padding: 0.25em 0.5em; background-color: #0869AA; border: solid 1px #333; display: inline-block; border-radius: 0.25em; color: #fff; font-weight: normal;}
a.action-button:before {content: '→'; padding-right: 0.5em;}
a.action-button:hover, a.action-button:active, a.action-button:focus {background-color: #FCEF26; color: #333;}

.button a {font-size: 1em; padding: 0.5em 0.75em; background-color: #0869AA; border: solid 1px #333; display: inline-block; border-radius: 0.25em; color: #fff; font-weight: normal;}
.button a:hover, .button a:active, .button a:focus {background-color: #FCEF26; color: #333;}
.button a:before {content:''; padding: 0;}
.button.left a {float: left;}
.button.right a {float: right;}

.screen-reader-text {display: none;}
.search-wrapper input {border: none; width: 54%; float: left; background-color: rgba(8,105,170,0.95); padding: 1.125em 1em; display: block; color: rgb(252,239,38);}
.search-wrapper input#searchsubmit {border: none; width: 30%; float: right; cursor: pointer;}
.search-wrapper h2 {font-family: 'Barlow Semi Condensed', serif; margin-bottom: 0.25em; color: #F2E528; font-size: 2em; margin-top: 0.75em; text-shadow: 1px 2px 3px #000; transform: rotate(-3deg);}
.social-wrapper h2 {font-family: 'Barlow Semi Condensed', serif; margin-bottom: 0.25em; color: #F2E528; font-size: 2em; margin-top: 2em; text-shadow: 1px 2px 3px #000; transform: rotate(-3deg);}
.social-wrapper i {color: rgb(8,105,170); font-size: 3.5em; margin-right: 0.125em; padding: 0.125em; background-color: #fff;}

.wpcf7-form-control {font-family: 'Open Sans', sans-serif; border: none; width: 85%; background-color: rgba(8,105,170,0.95); padding: 1.125em 1em; display: block; color: #fff;}
.wpcf7-captchac, .wpcf7-submit {width: auto;}
.wpcf7-captchar {width: 5.875em; margin-top: 1em;}
.wpcf7-not-valid-tip {color: #fff !important; font-size: 0.875em !important;}

.the-thumbnail-single {width: 36%; float: right; padding: 1em;}
.the-thumbnail-startpage {float: left; width: 23%; padding-right: 1em;}
.the-thumbnail-startpage img {width: 100%; height: auto;}
.the-thumbnail-single img {width: 100%; height: auto;}

.banner-werbung {background-color: #fff; position: relative; text-align: center; margin-bottom: 1em;}
.banner-werbung em {font-size: 0.75em; position: absolute; left: 0; top: 0; padding: 0.25em 0.5em;}
.banner-werbung img {margin: 0 auto; text-align: center; width: auto; padding: 0.5em 1em; max-width: 80%; height: auto;}

.social-wrapper .banner-werbung {margin-top: 2em; padding-top: 2em;}

.current-table {background-color: rgba(8,105,170,0.95); color: #fff; font-size: 0.875em; width: 100%;}
.current-table .number {background-color: #FBF44F; margin: 0.5em; color: #333; border-radius: 1em; height: auto; width: 1.35em; text-align: center; display: block; margin: 0.25em 0.5em;}
.current-table .number::after {content: '.';}
.current-table tr td {padding: 0.25em;}

img#fsb_image {opacity: 0.65;}
.copyright {float: right;}

.werbung-im-text {width: 100%; height: auto; display: block;}
.werbung-link::before {content: 'Anzeige'; width: auto; height: auto; font-weight: bold; margin-bottom: 0.5em; display: block; font-style: italic;}

.werbung-fixiert-unten {position: fixed; width: 45%; bottom: 1.75em; right: -29%; z-index: 99999; transition: 1s ease all;}
.werbung-fixiert-unten:hover {right: 0;}
.werbung-link-fixiert::before {content: 'Anzeige'; width: auto; height: auto; font-weight: bold; margin-bottom: 0.5em; display: block; font-style: italic; position: fixed; bottom: 0.25em; right: 0; z-index: 999999; background-color: #0f6ba9; padding: 0.25em; color: #fff;border: 1px solid #fff;}

/* MOBIL prepare */
#mobil-navigation-top {background-color: #0869aa; text-align: center;}
#mobil-navigation-top a {color: #f7ea2c; font-size: 1.5em; padding: 1em; display: inline-block;}
#mobil-navigation-top a:hover, #mobil-navigation-top a:active, #mobil-navigation-top a:focus {background-color: #e9be3f; color: #000;}

#mobil-navigation-bottom {background-color: #0869aa;}
#mobil-navigation-bottom .navigation {padding: 0; margin: 0;}
#mobil-navigation-bottom a {color: #e9be3f; text-decoration: none;}
#mobil-navigation-bottom h2 {color: #e9be3f; text-align: center; text-shadow: none; padding: 1em; display: block; margin: 0;}
#mobil-navigation-bottom .navigation li a {padding: 1em 2em; border-top: 1px solid #e9be3f; display: block;}
#mobil-navigation-bottom .navigation li.current_page_item a, #mobil-navigation-bottom .navigation li a:hover, #mobil-navigation-bottom .navigation li a:active, #mobil-navigation-bottom .navigation li a:focus {background-color: #e9be3f; color: #000;}

#to-top-button {background-color: #0869aa; text-align: center;}
#to-top-button a {color: #e9be3f; padding: 1em; display: block; font-size: 1.25em; border-top: 1px solid #e9be3f;}
#to-top-button a:hover, #to-top-button a:active, #to-top-button a:focus {background-color: #e9be3f;color: #0869aa; border-top: 1px solid #e9be3f;}

.mobil {display: none;}

@media only screen and (min-width : 12.5em) and (max-width : 60em)
{
	/* HIDE INS */
	.mobil {display: block;}
	
	/* HIDE OUTS */
	.content-wrapper .navigation ul, .search-wrapper, .current-table, .social-wrapper, .the-footer-wrapper, .single .logo {display: none;}
	.page .logo, .single .logo {display: none;}
	
	/* RESETS */
	.content-wrapper, .content-wrapper .navigation {width: auto;}
	.content-wrapper .navigation {text-align: center;}
	.content-wrapper .navigation img.logo {margin: 0 auto; max-width: 80%;}
	.logo {margin-top: 1.5em !important;}
	.navigation, .the-content {float: none; width: auto;}
	.the-content-inner {padding: 1em 2em;}
	.the-content {margin-top: 1.5em;}
	.page-wrapper {padding: 0;}
	.content-wrapper {border-bottom: 1px solid #000;}
	.content-wrapper img, .the-thumbnail-single, .the-thumbnail-startpage {width: 100%; max-width: 100%; height: auto; float: none; padding: 0;}
	.wp-caption {width: 100% !important;}
	.content-wrapper img {margin-bottom: 0.5em;}
	.single .the-content {margin: 0;}
	.page .the-content {margin: 0;}
	
	.the-content table colgroup, .the-content table tr, .the-content table td {width: auto;}
	.the-content table td {display: block;}
	
	
	
}