/*
Stylesheet-Angaben for balinger-rockfestival.de
CSS-Angaben for Bildschirmdarstellung

Autor: Joachim Schleicher und Daniel Staebler

Dies ist die Unkomprimierte Version; tatsaechlich ausgeliefert wird
die style_xx.css wobei xx eine hochzaehlende Versionsnummer ist, um
den Cache auf Unendlich setzen zu koennen.
Aenderungen an dieser Datei
1) lokal testen
2) hier diese Datei aendern
3) mit csscompressor.com komprimieren
4) style2016_xx.css mit komprimiertem Code anlegen und im Template verlinken


Verwendete Farben:
* blau: 2f6588
* dunkelblau? 153b58
* footer-grau: #181818
* rot: e2001a



*/

body {
 margin: 0;
 font-size: 100.01%;
 font-family: 'Roboto', Arial, sans-serif;
 background: url(../images/BRF23_polygon_bg_v6.svg) top center no-repeat fixed;
 background-size: cover;
 min-width: 320px;
 color: #000;
}

div#outer_frame {
 width: 100%;
 margin: 0 auto;
 clear: both;
 padding: 0;
}

div#header {
 position: fixed;
 padding: 0;
 margin: 0;
 border: 0;
 background: #e2001a;
 width: 100%;
 z-index: 3;
}

div#header div.headerimage {
 border: 0;
 float: left;
 font-family: 'Rubik', sans-serif;
 font-weight: 700;
 font-size: 1.75em;
 text-transform: uppercase;
 color: white;
 padding: 0.3571em 0 0.3571em 0.6em;
 line-height: 1.0;
}

div#header span.headerdate {
 font-weight: 300;
 letter-spacing: 0.5px;
 padding-left: 0.6em;
}

ul.m1, ul.m2{
 font-family: 'Rubik', sans-serif;
}

ul.m1 {
 padding: 0 1em 0 3em;
 margin: 0;
 text-align: right;
 line-height: 1.5625;
}

ul.m1 li {
 list-style-type: none;
 display: inline;
 margin: 0;
 padding: 0;
 font-size: 1em;
}
ul.m2 li {
 list-style-type: none;
 display: inline;
 padding: 0;
 font-size: 1em;
 margin: 0;
 line-height: 1.25;
}

ul.m1 li, ul.m2 a{
opacity: 0.75;
}

ul.m1 li.menu-level1-act, ul.m2 li.menu-level1-act a{
opacity: 1.0;
}

ul.m1 li:hover a, ul.m1 li.menu-level1-act a {
 border-bottom: 0.2em solid #ffffff;
 opacity:1.0;
}
div#sidebar ul.m2 li:hover > a, div#sidebar ul.m2 li.act > span {
 background:#153b58;
 border: 0;
}
 
ul.m1 li a{
 margin: 0;
 padding: 0.75em 0.6em 0.5em;
 font-weight: 400;
 display: inline-block;
 text-transform: uppercase;
 border-bottom: 0.2em solid transparent;
}
div#header a, div#header, div#menu_mobile, div#menu_mobile a, div#sidebar, div#sidebar a {
 color: #ffffff;
 text-decoration: none;
}
ul.m2 li a, ul.m2 li span {
 margin: 0;
 padding: 1.25em 0.75em;
 font-weight: 400;
 text-decoration: none;
 text-transform: none;
 display: inline-block;
}
ul.m3 {
 display: inline-block;
 padding: 0;
}
ul.m3 li {
 font-style: italic;
}

div#content_outer {
 position: relative;
 top: 0;
 left: 0;
 padding: 0;
 margin-top: 0.5em;
 min-height: 450px;
}

div#sidebar ul#sidebar_submenu{
 padding: 0;
 margin: 0;
 background: #2a4f6c;
 position: fixed;
 z-index: 2;
 width: 100%;
}

div#menu_mobile {
 display: none;
}

ul.menu-3 {
 display: inline;
 padding: 0;
 font-size: 0.8em;
}

div#main_div {
 padding: 0;
 margin: 0 auto;
}

div#main_content {
 padding: 0;
 margin: 0;    
}

div#footer {
 background-color: #181818;
 color: #fff;
 clear: both;
}
div#footer_content {
 padding: 2em 5% 2em;
 margin: 6em auto 0;
 text-align: left;
 max-width: 1050px;
}
div#footer_left {
 width: 50%;
 float: left;
}
div#footer_right {
 margin-left: 50%;
 text-align: right;
}
.clearboth {
 clear: both;
}

div#footer p, div#footer a {
 margin: 1.1em 0;
 color: #fff;
 font-family: 'Roboto', sans-serif;
 font-size: 0.9em;
 font-weight: 300;
 text-transform: none;
 line-height: 1.3em;
}

div#footer h2{
 color: #fff;
 font-family: 'Rubik', sans-serif;
 font-size: 1.5em;
 font-weight: 700;
 text-transform: uppercase;
 margin: 0em;
}

div#footer .social {
 padding: 0 0.6em;
}

div#outer_frame a {
 color: #e20001;
 text-decoration: none;
}

div#outer_frame a:focus {
 color: #e20001;
 text-decoration: underline;
}

div#outer_frame a:hover {
 color: #e20001;
 text-decoration: none;
}



/* special links that do not need yellow background */
div#goof_nav a, a.goof_dirlink,
a.external-link-transparent, div.links-transparent a, a.imagelink {
 color: #000000;
 text-decoration: none;
}

div.links-transparent a:hover, div.links-transparent a:focus {
 text-decoration: underline;
 color: #000000;
}

h1 {
 font-family: 'Rubik', sans-serif;
 font-size: 2.6em;
 border-bottom: 5px solid #2f6588;
 font-weight: 700;
 margin: 0 0 1.5em 0;
 color: #2f6588;
 padding: 1.3em 0 0.3em 0;
 text-transform: uppercase;
 text-align: center;
}

h1.ohneUnterstrich {
 border-bottom: 0px;  
}

h2 {
 font-family: 'Rubik', sans-serif;
 font-size: 1.5em;
 font-weight: 700;
 margin: 1.3em 0 0.5em;
 padding: 0.2em 0;
 text-transform: uppercase;
 color: #2f6588;
 letter-spacing: 0.5px;
}
.ce-textpic h2 { /* News */
 margin: 0;
}

h3,h4,h5,h6 {
 font-size: 0.95em;
 font-weight: 700;
 text-transform: uppercase;
}

div#main_content p , div#main_content li, div#main_content dd, div#main_content dt {
 font-size: 0.95em;
 line-height: 1.25em;
 margin-top: 0.2em;
}

.ce-textpic, .ce-nowrap .ce-bodytext, .ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div, .ce-outer, .ce-inner {
 max-width: 100%;
}

div.ce-textpic img {
 max-width: 100%;
 height: auto;
}

/* Ueberschriften Styling DS */

div#sidebar_container {
 padding: 3em 0 0;
}
div#sidebar {
 width: 100%;
 padding: 0;
 margin: 0;
 text-align: center;
 height: 3.8em;
}
div#main_div {
 float: none;
 padding: 0 5%;
}

/* Startseite content bloecke zweispaltig */
div.block-2sp {
 background: #ECE9E6; /* fallback for old browsers */
 background: -webkit-linear-gradient(to left, #ECE9E6 , #FFFFFF); /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to left, #ECE9E6 , #FFFFFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */       
 color: #fff;
 clear: both;
}
div.block-2sp_content div.column {
 display: inline-block;
 vertical-align: middle;
 width: 50%;
}
div.block-2sp_content {
 padding: 2em 5% 2em;
 margin: 6em auto 0;
 max-width: 1050px;
}
div#main_content div.block-2sp_content div p.h2 {
 font-family: "Rubik",sans-serif;
 font-size: 1.5em;
 font-weight: 700;
 letter-spacing: 0.5px;
 margin: 0;
}
div.block-2sp_left {
 float: left;
 text-align: center;
 width: 100%
}
div.block-2sp_right {
 text-align: center;
}
div.block-2sp .social {
 padding: 0 0.6em;
 color: #2f6588;
}
div.block-2sp p {
 margin: -2.8em 0 2.8em 0;
}
.gradient0 {
 background: #ECE9E6; /* fallback for old browsers */
 background: -webkit-linear-gradient(to left, #ECE9E6 , #FFFFFF); /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to left, #ECE9E6 , #FFFFFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */       
}
.gradient1 {
 background: #f5d197; /* fallback for old browsers */
 background: -webkit-linear-gradient(to left, #e56f48 , #f5d197); /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to left, #e56f48 , #f5d197); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.gradient2 {
 background: #6793b0; /* fallback for old browsers */
 background: -webkit-linear-gradient(to left, #9fb1aa , #6793b0); /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to left, #9fb1aa , #6793b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}


/* RWD */
@media (min-width: 981px) {
div#main_div {
 max-width: 1050px;
}
}

/* toggle menu */
@media (max-width: 980px) {
div#sidebar{
 display: none;
}
div#toggle_menu {
 background: url('../images/toggle_menu.png') no-repeat scroll center center;
 background-size: 62% auto;
 position: absolute;
 right: 0;
 top: 0;
 width: 3em;
 height: 3em;
}
div#header ul.m1 {
 display: none;
}
div#menu_mobile {
 display: block;
 background: #e2001a;
}
ul.m1 {
 margin: 0;
 padding: 0;
 text-align: left;
}
ul.m1 li {
 display: block;
}
ul.m1 li.act a, ul.m1 li span{
 border-bottom: 0.2em solid #ffffff;
 background: rgba(255,255,255,0.16);
 display: block;
}
ul.m1 li a, ul.m1 ul.m2 li.act span {
 padding: 0.4em 1em;
}
ul.m1 li.no a {
 border-bottom: 0.2em solid #c8c8c8;
 background: transparent;
 display: block;
}
ul.m1 li a:hover{
 border-bottom: 0.2em solid #ffffff;
 background: rgba(255,255,255,0.16);
}
ul.m1 li, ul.m2 a {
 opacity: 1.0;
}
}

@media (max-width: 640px) {
div#header div.headerimage {
 float: none;
 font-size: 1.25em;
 padding: 0.7em 1em 0.7em 0.6em;
}
div#header span.headerdate {
 display: none;
}
.flex-control-nav {
 display: none;  
}

h1 {
 font-size: 2em;
}
div#footer_left, div#footer_right {
 width: 100%;
 float: none;
 margin: 0;
 text-align: left;
}
div.block-2sp_left {
 width: 100%;
 float: none;
}
div.block-2sp_content div.column {
 width: 100%;
}
div.ce-left .ce-gallery, div.ce-textpic .ce-column {
 float: none;
}
.ce-textpic .ce-bodytext {
 margin-left: 0;
}
.ce-gallery iframe {
 max-width: 100%;
}
}

/* sr_freecap-Captcha */
.tx-srfreecap-pi2-cant-read a:link {
 background-color:transparent;
 text-decoration:none;
}
.tx-srfreecap-pi2-cant-read a:hover, .tx-srfreecap-pi2-cant-read a:focus {
 text-decoration:underline;
}

.tx-srfreecap-pi2-image { /* we have to set the width manually to avoid overflow */
 width: 292px;
 height: auto;
}

/* Kontakt-Formular */

form.powermail_form fieldset, table.powermail_all,
form input.powermail_confirmation_form,
form input.powermail_confirmation_submit { /** should be set global. not only for p and li**/
 font-size: 0.8em;
}

form.powermail_form fieldset fieldset {
 font-size: inherit;
}

form#mailform fieldset, form.powermail_form fieldset {
 border: 0;
 padding: 0;
 margin: 0;
}

form#mailform input, form.powermail_form input {
 border: 1px solid #808080;
 font-size: 100%;
}

form#mailform label, form.powermail_form label {
}

form#mailform legend, form.powermail_form legend {
 display:none;
}

form#mailform fieldset div p, form.powermail_form fieldset div {
 margin: 0 0 0.75em 0;
}

form.powermail_form .powermail_fieldwrap input,
form.powermail_form .powermail_fieldwrap textarea {
 width: 100%;
 border: 1px solid #808080;
}

form.powermail_form input.powermail_checkbox {
 width: auto; /* no 100% width checkbox. */
}

form.powermail_form .powermail_fieldwrap input.powermail_submit,
form input.powermail_confirmation_form,
form input.powermail_confirmation_submit {
 border: 1px solid #808080;
 border-style: outset;
 width: auto;
}

div.error {                                                                    
 background-color: #FFED00;
 border: 1px solid #FFC300;
 padding: 0.1em;
}
.parsley-errors-list {
 background-color: #FFED00;
 border: 1px solid #FFC300;
 padding: 0.1em;
}

/* flexslider */
/*
 * jQuery FlexSlider v1.8
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* Additional Resets */
.slides li,
.flex-control-nav li,
.flex-direction-nav li { margin: 0; list-style-type: none; }


/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 4em 0 0 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block; height: auto;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {background: #fff; border: none; position: relative; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}

/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption {width: 96%; padding: 2%; margin: 0; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}

/* Direction Nav */
.flex-direction-nav {*height: 0; padding: 0;} /*fix for IE 7 */
.flex-direction-nav li a {width: 26px; height: 26px; margin: -13px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 45%; cursor: pointer; text-indent: -9999px; opacity: 0.8; filter:alpha(opacity=80); }
.flex-direction-nav li a:hover  { opacity: 1; filter:alpha(opacity=100); }
.flex-direction-nav li .next {background-position: -30px 0; right: 20px;}
.flex-direction-nav li .prev {left: 20px;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: 20px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(../images/bg_control_nav.png) no-repeat; cursor: pointer; text-indent: -999em;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

/* fs-media-gallery
*********************************/
.fs-media-gallery .thumb, .fs-media-gallery .img-thumbnail {
    margin: 0 2px;
    float: left;
}
.fs-media-gallery .thumb .description .asset-count, .fs-media-gallery .img-thumbnail .description .asset-count {
    display: none;
}
.fs-media-gallery .thumb a, .fs-media-gallery .thumb a:link, .fs-media-gallery .thumb a:hover, .fs-media-gallery .thumb a:active, .fs-media-gallery .thumb a:visited,
.fs-media-gallery .img-thumbnail a, .fs-media-gallery .img-thumbnail a:link, .fs-media-gallery .img-thumbnail a:hover, .fs-media-gallery .img-thumbnail a:active, .fs-media-gallery .img-thumbnail a:visited {
    display: block;
    text-align: center;
}
.fs-media-gallery .navigation {
    clear: both;
    margin-bottom: 10px;
    margin-top: 10px;
}
.fs-media-gallery .pagination {
  clear: left;
    margin-bottom: 10px;
    margin-top: 10px;
}
.fs-media-gallery .pagination ul li {
  list-style-type: none;
  display: inline;
  margin: 0 0.2em;
}

/* Link Box */
div.linkbox {
  background: transparent;
  border: 3px solid #e20001;
  width: 100%;
  max-width: 350px;
  padding: 0 !important;
  margin:4em auto 4em auto !important;
  cursor: pointer;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  text-transform: uppercase;
  color: #e20001;
  letter-spacing: 0.5px;
}
div.linkbox div {
  display: inline-block;
  padding: 0.5em;
  text-align: center !important;
  line-height: 1.1;
  width: 100%;
}
div.sweep-to-right {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.sweep-to-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e20001;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.sweep-to-right:hover, .sweep-to-right:focus, .sweep-to-right:active {
    color: white!important;
}
.sweep-to-right:hover:before, .sweep-to-right:focus:before, .sweep-to-right:active:before{
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}