/**
 * Main Stylesheet
 * Familien-MVZ WordPress Theme
 * 
 * Based on original Redaxo design (2011)
 * Cleaned and optimized for WordPress
 *
 * @package Familien-MVZ
 * @since 1.0.0
 */

@charset "UTF-8";

/*------------------------------------*\
	$BASE
\*------------------------------------*/
html {
	background: url(../img/bg.png) left -220px repeat-x #fff;
	padding-top: 10px;
	font-family: Calibri, Verdana, Tahoma, sans-serif;
	font-size: 14px;
}

/* 
ZENTRIERUNG: Spezielle Regel für .wrapper.grids Kombination!

Problem: In header.php steht <div class="wrapper grids">
Das kombiniert beide Klassen auf EINEM Element.

In grid.inuit.css:
  .wrapper { margin: 0 auto }      ← Zentriert
  .grids   { margin: 0 0 0 -2.083% } ← Links-Versatz für Grid-System

.grids überschreibt .wrapper's margin → Content nach links!

Lösung: Spezifischere Regel (2 Klassen) überschreibt .grids (1 Klasse):
*/
.wrapper.grids {
	margin-left: auto !important;
	margin-right: auto !important;
}

/*------------------------------------*\
	$TYPOGRAPHY
\*------------------------------------*/
h1 {
	display: none;
}

h2 {
	font-size: 18px;
	line-height: 1.7rem;
}

h2 span {
	color: #c85248;
	font-size: 24px;
	line-height: 2rem;
	margin-bottom: 6px;
}

h3 {
	color: #603913;
	border-bottom: 1px solid #ccc;
	padding: 8px 0;
}

h4 {
	border-bottom: 1px solid #ccc;
	padding: 8px 0;
}

#accordion h4 {
	background: url(../img/arrow-alt-down.gif) right no-repeat;
}

.target h3 {
	border-bottom: none;
}

span {
	display: block;
}

a {
	color: #4a8ec2;
}

.target a {
	text-decoration: none;
}

.target a p {
	color: #603913;
}

.inhalt p {
	width: 86%;
}

mark {
	border-bottom: 2px solid;
}

pre {
	padding: 10px;
}

pre code,
pre mark {
	background: none;
}

ul {
	list-style-type: square;
}

/*------------------------------------*\
	$HEADER & LOGO
\*------------------------------------*/
.site-header,
.header {
	padding: 1.5em 0;
	text-align: center;
}

.logo,
.logo img {
	width: 320px;
	height: 110px;
	margin: auto;
}

/* Sprachwahl - Sidebar ÜBER Kontakt-Box */
.sprachwahl {
	background: #eee;
	border-radius: 15px;
	padding: 12px 15px;
	margin-bottom: 20px;
	text-align: center;
}

/* FLEXBOX: Sprachen nebeneinander! */
.sprachwahl ul,
div.sprachwahl ul,
aside .sprachwahl ul {
	list-style: none !important;
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: horizontal !important;
	-webkit-box-direction: normal !important;
	-ms-flex-direction: row !important;
	flex-direction: row !important;
	-webkit-box-pack: center !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
}

.sprachwahl ul li,
div.sprachwahl ul li,
aside .sprachwahl ul li {
	display: block !important;
	float: none !important;
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Trennstrich ZWISCHEN den Sprachen */
.sprachwahl ul li + li::before {
	content: ' | ';
	color: #999;
	padding: 0 4px;
}

.sprachwahl a {
	color: #603913;
	text-decoration: none;
	font-weight: bold;
}

.sprachwahl a:hover {
	text-decoration: underline;
}

/* Aktuelle Sprache hervorheben */
.sprachwahl ul li.current-lang a,
.sprachwahl ul li.current-lang span {
	font-weight: bold;
	color: #BA093A;
}

/* Facebook-Link in der Sprachwahl-Box */
.sprachwahl .facebook-link {
	display: block;
	margin-top: 8px;
	font-size: 12px;
}

.sprachwahl .facebook-link img {
	vertical-align: middle;
	width: 20px;
	height: 20px;
}

.sprachwahl .facebook-link a {
	color: #3b5998;
	font-weight: normal;
	font-size: 12px;
}

.sprachwahl .facebook-link a:hover {
	text-decoration: underline;
}

/*------------------------------------*\
	$NAVIGATION
\*------------------------------------*/
/* Stärkere Spezifität für Navigation-Container */
#navi,
div#navi,
nav#navi {
	padding: 5px !important;
	background: #D7DF23 !important;
	margin-bottom: 20px !important;
	border-radius: 15px !important;
	overflow: hidden; /* Clearfix: Float-Kinder bekommen Höhe */
}

ul.rex-navi1 {
	list-style: none !important;
	margin: 0 !important;
	position: relative;
}

ul.rex-navi1 li {
	display: inline;
}

ul.rex-navi1 li a {
	padding: 10px 5px !important;
	margin: 3px !important;
	display: block !important;
	float: left !important;
	font-size: 16px !important;
	color: #603913 !important;
	background: rgba(255, 255, 255, 0.25) !important;
	border-radius: 15px !important;
	margin-right: 5px !important;
	text-decoration: none !important;
}

ul.rex-navi1 li a:hover {
	background: rgba(255, 255, 255, 0.75) !important;
}

ul.rex-navi1 li.rex-current a,
ul.rex-navi1 li.current-menu-item a {
	background: #fff !important;
}

/*------------------------------------*\
	$CONTENT AREAS
\*------------------------------------*/
.bg {
	background: url(../img/bg_hoch.png) repeat-y;
	padding: 10px 10px 10px 70px;
	margin-left: 10px;
	border-radius: 15px;
}

.inhalt {
	background: #ffffcc;
	background: none;
	border-radius: 15px;
	padding: 20px;
	margin-bottom: 20px;
}

/*------------------------------------*\
	$SIDEBAR
\*------------------------------------*/
.kontakt {
	background: #d2eaea;
	border-radius: 15px;
	padding: 20px;
	margin-bottom: 20px;
}

.praxiszeiten {
	background: #d2ead7;
	border-radius: 15px;
	padding: 20px;
	margin-bottom: 20px;
}

/*------------------------------------*\
	$TEASER BOXES
\*------------------------------------*/
.grid-4.target {
	background: #EBEF91;
	border-radius: 15px;
	margin-bottom: 20px;
	height: 300px;
}

.grid-4.target:hover {
	background: #D7DF23;
	height: 275px;
}

.grid-4.target p,
.target h3 {
	padding: 20px;
}

/* Farbmarkierungen für die 3 Teaser-Boxen */
.target-rot h2,
.target-rot h3 {
	color: #BA093A; /* Rot */
}

.target-gelb h2,
.target-gelb h3 {
	color: #D7DF23; /* Gelb-Grün */
}

.target-blau h2,
.target-blau h3 {
	color: #4a8ec2; /* Blau */
}

/*------------------------------------*\
	$GALLERY
\*------------------------------------*/
#galerie {
	width: 100%;
	padding: 0;
	display: inline-block;
	clear: both;
}

.galerie-image {
	float: left;
	position: relative;
	padding: 5px;
	height: 120px;
	text-align: center;
}

.galerie-image img {
	padding: 10px;
	border: 1px solid #aaa;
	box-shadow: 3px 2px 2px #eee;
}

/*------------------------------------*\
	$FORMS
\*------------------------------------*/
textarea {
	width: 250px;
}

.form_warning {
	color: red;
}

ul.form_warning {
	border: 1px solid red;
	color: red;
	margin: 0 0 20px 0;
	padding: 10px;
	list-style: none;
}

#xform-formular-security {
	display: none !important;
}

iframe {
	border: none;
}

/*------------------------------------*\
	$FOOTER
\*------------------------------------*/
.site-footer {
	padding-top: 1.5em;
	color: #999;
	width: 100%;
	background: url(../img/bg.png) left 300px repeat-x;
	text-align: center;
	height: 375px;
}

/* Footer-Text lesbar machen auf buntem Hintergrund */
.site-footer .site-info,
.site-footer .site-info p,
.site-footer .site-info a {
	color: #603913; /* Braun - gut lesbar auf Regenbogen */
}

/*------------------------------------*\
	$MISC
\*------------------------------------*/
/* 
.clear class is defined in inuit.css - no need to duplicate it here!
Original: .clear { clear:both; float:none; }
*/

::selection {
	border: none;
}

::-moz-selection {
	border: none;
}

hr {
	padding: 0;
	border: none;
	height: 1px;
	background-color: #ccc;
}