/* 
Schriftgrößen:
2.8284  49.8px  3.111rem
2.0000  35.2px  2.200rem
1.4142  24.9px  1.555rem
1.0000  17.6px  1.100rem normaler Text
0.7071  12.4px  0.778rem breadcrumbs
0.5000   8.8px  0.550rem
0.3536   6.2px  0.389rem

*/


@charset "UTF-8";

@import url(https://fonts.googleapis.com/css?family=Lora:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);


/* 
============================================================
    CSS RESET
------------------------------------------------------------
Source:  http://meyerweb.com/eric/tools/css/reset/
Title:   Eric Meyer's Reset CSS v2.0
Author:  Eric Meyer
Remarks: I excluded ul, ol, li
============================================================ 
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video 
                                { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section 
                                { display: block; }
body                            { line-height: 1; }
/*ol, ul                          { list-style: none; }*/
blockquote, q                   { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after 
                                { content: ''; content: none; }
table                           { border-collapse: collapse; border-spacing: 0; }


/* 
============================================================
    Box-Modell
------------------------------------------------------------
Source: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Author: Paul Irish
============================================================ 
*/
html                            { box-sizing: border-box; }
*, *:before, *:after            { box-sizing: inherit; }







html, body                      { width: 100%; height: 100%; }
body                            { background: none repeat scroll 0% 0% rgba(238,224,190,1.0); color: #444; font: normal 100%/1.4 serif; font-family: 'Open Sans', serif; }
#container                      { position: relative; max-width: 1160px; min-height: 100%; margin: 0 auto; padding: 0 0 5rem 0; border-width: 0 10px; border-style: solid; border-color: rgba(153,102,51,1.0); }
.content                        { width: 100%; padding: 1rem 0; text-align: left; }


/* 
============================================================
    Layout < 450px
============================================================ 
*/ 
#header                         { position: relative; height: 210px; }
#header #h1                     { background: url('../gfx/kutsche_200.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; display: none; height: 200px; float: left; }
#header #h2                     { background: url('../gfx/voltigieren_200.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; display: block; width: calc(33.33% - 6.66px); height: 200px; float: left; margin: 5px 5px 5px 5px; }
#header #h3                     { background: url('../gfx/dressur_200.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; display: block; width: calc(33.33% - 6.66px); height: 200px; float: left; margin: 5px 5px 5px 0; }
#header #h4                     { background: url('../gfx/ponyspiele_200.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; display: none; height: 200px; float: left; }
#header #h5                     { background: url('../gfx/springen_200.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; display: block; width: calc(33.33% - 6.66px); height: 200px; float: left; margin: 5px 5px 5px 0; }
#header #reiterverein           { display: none; }
#header #hubertus               { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FFF; font-family: 'Lora', sans-serif; font-size: 2rem; font-weight: bold; text-shadow: 0px 0px 10px #000; text-align: center; }
#navigation                     { display: block; background-color: rgba(153,102,51,1.0); color: rgba(255,255,255,1); text-align: center; }
#navigation ul                  { display: none; position: absolute; z-index: 999; margin: 0; padding: 0; background-color: rgba(153,102,51,1.0); list-style: none; }
#navigation ul.visible          { display: block; }
#navigation ul li               { display: inline-block; width: calc(100% - 2px); float: left; margin: 0px; border-width: 1px 0px 1px 0px; border-style: solid; border-color: #fff; padding: 0.5rem 1rem; font-size: 1.5rem; line-height: 1.5; }
#navigation input[type="checkbox"] { display: none; }
#nav-toggle                     { display: block; width: 35px; margin: 0 auto; padding: 1rem 0; cursor: pointer; }
#nav-toggle .bar1, 
#nav-toggle .bar2, 
#nav-toggle .bar3               { width: 21px; height: 3px; background-color: #fff; margin: 4px 7px; transition: 0.4s; }
#nav-toggle.change .bar1        { transform: rotate(-45deg) translate(-6px, 4px); }
#nav-toggle.change .bar2        { opacity: 0; }
#nav-toggle.change .bar3        { transform: rotate(45deg) translate(-6px, -5px); }

#page-heading                   { width: 100%; }
#page-heading .page-title       { padding: 1rem 0 0 0; text-align: center; color: rgba(153,102,51,1.0); font-family: 'Lora', sans-serif; font-size: 3.6rem; }

.breadcrumbs                    { display: block; padding: 0 0 1rem 0; color: rgba(153,102,51,1.0); text-align: center; }
.breadcrumbs ol                 { margin: 0; padding: 0; }
.breadcrumbs li                 { display: inline; color: #444; font-size: 0.8rem; }
.breadcrumbs li:before          { content: '>'; margin: 0 0.3125rem; }
.breadcrumbs li.homebase:before { content: ''; margin: 0; }
.breadcrumbs li a               { color: rgba(153,102,51,1.0); text-decoration: none; }
.breadcrumbs li a:hover         { text-decoration: underline; }

#footer                         { display: block; position: absolute; bottom: 0; width: 100%; background-color: rgba(153,102,51,1.0); color: rgba(255,255,255,1); text-align: center; clear: both; }

/* 
============================================================
    Layout >= 450px
============================================================ 
*/
@media screen and (min-width: 450px) and (max-width: 829px) {
#header                         { position: relative; height: 220px; }
#header #h1                     { display: block; width: calc(25% - 12.5px); margin: 10px 10px 10px 10px; }
#header #h2                     { display: block; width: calc(25% - 12.5px); margin: 10px 10px 10px 0; }
#header #h3                     { display: block; width: calc(25% - 12.5px); margin: 10px 10px 10px 0; }
#header #h4                     { display: none; }
#header #h5                     { display: block; width: calc(25% - 12.5px); margin: 10px 10px 10px 0; }
#header #reiterverein           { display: none; }
#header #hubertus               { font-size: 2.75rem; white-space: nowrap; }
#navigation ul li               { width: calc(50% - 4px); margin: 1px; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #fff; padding: 0.5rem 1rem; }
}

/* 
============================================================
    Layout >= 830px
============================================================ 
*/ 
@media screen and (min-width: 830px) and (max-width: 1029px) {
#header                         { position: relative; height: 220px; }
#header #h1                     { display: block; width: calc(20% - 12px); margin: 10px 10px 10px 10px; }
#header #h2                     { display: block; width: calc(20% - 12px); margin: 10px 10px 10px 0; }
#header #h3                     { display: block; width: calc(20% - 12px); margin: 10px 10px 10px 0; }
#header #h4                     { display: block; width: calc(20% - 12px); margin: 10px 10px 10px 0; }
#header #h5                     { display: block; width: calc(20% - 12px); margin: 10px 10px 10px 0; }
#header #reiterverein           { display: inline; }
#header #hubertus               { font-size: 2.75rem; white-space: nowrap; }

#page-heading                   { display: flow-root; overflow: auto; }
#page-heading .page-title       { float: left; padding: 1rem 0; text-align: inherrit; }

#navigation ul                  { display: block; position: static; z-index: 0; background-color: none; }
#navigation ul li               { width: auto; float: none; margin: 0; border: none; padding: 0 0.75rem; }
#nav-toggle                     { display: none; }

.breadcrumbs                    { float: right; padding: 2.5rem 0 0 0; text-align: inherrit; }
}


/* 
============================================================
    Layout >= 1030px
============================================================ 
*/ 

@media screen and (min-width: 1030px) {
#header                         { position: relative; height: 220px; }
#header #h1                     { display: block; width: calc(20% - 12px); margin: 10px 10px 10px 10px; }
#header #h2                     { display: block; width: calc(20% - 12px); margin: 10px 10px 10px 0; }
#header #h3                     { display: block; width: calc(20% - 12px); margin: 10px 10px 10px 0; }
#header #h4                     { display: block; width: calc(20% - 12px); margin: 10px 10px 10px 0; }
#header #h5                     { display: block; width: calc(20% - 12px); margin: 10px 10px 10px 0; }
#header #reiterverein           { display: inline; }
#header #hubertus               { font-size: 4rem; white-space: nowrap; }

#page-heading                   { display: flow-root; overflow: auto; }
#page-heading .page-title       { float: left; padding: 1rem 0; text-align: inherrit; }

#navigation ul                  { display: block; position: static; z-index: 0; }
#navigation ul li               { width: auto; float: none; margin: 0; border: none; padding: 0 1rem; }
#nav-toggle                     { display: none; }

.breadcrumbs                    { float: right; padding: 2.5rem 0 0 0; text-align: inherrit; }
}






.content                        { padding: 1rem 1.5rem; }


article                         { position: relative; margin-top: 3rem; margin-bottom: 3rem; border-top: 1px solid rgba(153,102,51,1.0); }

h1, h2, h3, h4, h5, h6          { color: #222; font: normal 100%/1.4 serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Lora', sans-serif; }
h1                              { position: relative; margin: 3.111rem 0 2.000rem 0; text-align: center; font-size: 3.111rem; font-weight: 700; }
h2                              { position: relative; margin: 2.200rem 0 1.414rem 0; text-align: left; font-size: 2.000rem; font-weight: 700; }
h3                              { position: relative; margin: 2.200rem 0 1.414rem 0; text-align: left; font-size: 1.700rem; font-weight: 700; }
h4                              { position: relative; margin: 1.555rem 0 1.000rem 0; text-align: left; font-size: 1.555rem; font-weight: 700; }
h5                              { position: relative; margin: 1.100rem 0 0.707rem 0; text-align: left; font-size: 1.100rem; font-weight: 400; }

p                               { font-size: 1.1rem; line-height: 1.625; margin: auto auto 1.5rem; }
a                               { color: inherit; text-decoration: underline; font-size: inherit; }
a.anker                         { text-decoration: none; }

b                               { font-weight: 700; }

img.alignleft, img.alignright, img.aligncenter
                                { margin-top: 0.5rem; margin-bottom: 0.5rem; }
img.alignleft                   { float: left; margin-right: 1rem; }
img.alignright                  { float: right; margin-left: 1rem; }
img.aligncenter                 { display: block; margin-left: auto; margin-right: auto; }

code, pre                       { border-radius: 0.25rem; background-color: #444; }
code                            { padding: 0.25rem 0.5rem; position: relative; top: -2px; white-space: nowrap; font-size:75%;font-family:Menlo,Inconsolata,Consolas,Courier,monospace;color:#f8f8f8; }
pre                             { padding: 0.5rem 1rem; max-width: 100%; overflow: auto; white-space: pre; margin: 0 0 1rem; }
pre code                        { padding: 0; white-space: pre; }
kbd                             { background-color: #F8F8F8; border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid #CCC; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); white-space: nowrap; }


dl                              { margin-bottom: 2rem; }
dt                              { margin-bottom: 0.5rem; }
dt:not(:first-child)            { margin-top: 2rem; }
dd                              { margin-bottom: 10px; margin-left: 1rem; }

ul.shortlist                    { margin-bottom: 3rem; }
ul li                           { font-size: 1.1rem; line-height: 1.625; margin-bottom: 1.5rem; }
ul.shortlist li                 { margin: auto; }

figure                          { background-color: #FFFFFF; border: 10px solid #FFFFFF; border-radius: 2px; box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); margin: 5px 5px 20px 5px; }
figcaption                      { background-color: #FFFFFF; text-align: center; }
figure.left, div.img.left       { float: left; margin-left: 0; margin-right: 2rem; }
figure.right, div.img.right     { float: right; margin-left: 2rem; margin-right: 0; }
div.img img                     { border: 10px solid #FFFFFF; border-radius: 2px; box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); margin: 5px 5px 20px 5px; }

.clear                          { clear: both; }

.news-author                    { display: block; width: 50%; float: left; }
.news-date                      { display: block; width: 50%; float: left; }

.event                          { max-width: 600px; padding: 10px 20px 10px 20px; margin: 20px auto; overflow: auto; background-color: #D4C8AA; }
.date                           { float: left; width: 90px; padding: 0 20px 0 0;}
.single_day .day                { font-size: 3rem; line-height: 1; }
.single_day .month              { font-size: 2.5rem; }
.multi_day .day                 { display: block; font-size: 1.3rem; line-height: 1; }
.multi_day .month               { display: block; font-size: 2.5rem; }
.multi_month .day               { font-size: 1.2rem; line-height: 1; }
.multi_month .month             { font-size: 1.2rem; }
.multi_month .sep               { display: block; text-align: center; font-size: 1.0rem; }
.event .content                 { width: calc(100% - 90px); margin: 0 0 0 90px; padding: 0 0 0 20px; border-left: 1px solid #996633; }
.event .title                   { margin: 0 0 20px 0; border-bottom: 1px solid #996633; }
.event .title h1                { margin: 0; padding: 0; text-align: left; }


table.gruppen                   { width: 100%; border: 1px solid rgba(153,102,51,1.0); border-collapse: collapse; }
table.gruppen th                { margin: 0; padding: 3px; border: 1px solid rgba(153,102,51,1.0); background-color:  rgba(153,102,51,1.0); color: #EEE0BE; }
table.gruppen td                { margin: 0; padding: 3px; border: 1px solid rgba(153,102,51,1.0); }

table.rechte                    { margin-top: 20px; width: 100%; border: 1px solid rgba(153,102,51,1.0); border-collapse: collapse; }
table.rechte th                 { margin: 0; padding: 3px; border: 1px solid rgba(153,102,51,1.0); background-color: rgba(153,102,51,1.0); color: #EEE0BE; }
table.rechte td                 { margin: 0; padding: 3px; border: 1px solid rgba(153,102,51,1.0); }

table                           { margin-top: 20px; width: 100%; border: 1px solid rgba(153,102,51,1.0); border-collapse: collapse; }
table th                        { margin: 0; padding: 3px; border: 1px solid rgba(153,102,51,1.0); background-color: rgba(153,102,51,1.0); color: #EEE0BE; }
table td                        { margin: 0; padding: 3px; border: 1px solid rgba(153,102,51,1.0); }


/* 
============================================================
    Info-Boxes
============================================================ 
*/
.info, .warning, .failure       { margin: 30px auto 10px; padding: 1px 12px; width: 90%; background-color: #FFF; border-left-style: solid; border-left-width: 4px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1); box-sizing: border-box; }
.info                           { border-left-color: #7AD03A; }
.warning                        { border-left-color: #FFBA00; }
.failure                        { border-left-color: #C32E04; }

.editlink                       { margin-top: 3rem; text-align: center; }