@font-face {
  font-family: 'Source Sans Pro';
  src: url('[[++site_url]]assets/c103_fonts/SourceSansPro-Regular.ttf') format('truetype');
  font-weight:400;
  font-style: normal;}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('[[++site_url]]assets/c103_fonts/SourceSansPro-Bold.ttf') format('truetype');
  font-weight:700;
  font-style: normal;}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('[[++site_url]]assets/c103_fonts/SourceSansPro-Semibold.ttf') format('truetype');
  font-weight:600;
  font-style: normal;}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('[[++site_url]]assets/c103_fonts/SourceSansPro-Light.ttf') format('truetype');
  font-weight:300;
  font-style: normal;}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('[[++site_url]]assets/c103_fonts/SourceSansPro-Italic.ttf') format('truetype');
  font-weight:400italic;
  font-style: italic;}

@font-face {
  font-family: 'LigatureSymbols';
  src: url('[[++site_url]]assets/c103_fonts/LigatureSymbols-2.11.eot');
  src: url('[[++site_url]]assets/c103_fonts/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
       url('[[++site_url]]assets/c103_fonts/LigatureSymbols-2.11.woff') format('woff'),
       url('[[++site_url]]assets/c103_fonts/LigatureSymbols-2.11.ttf') format('truetype'),
       url('[[++site_url]]assets/c103_fonts/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
  src: url('[[++site_url]]assets/c103_fonts/LigatureSymbols-2.11.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;}

* {
  margin:0;
  padding:0;
  border:0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline:0;
  font-family:'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style:normal;
  font-weight:400;
  line-height:1.8em;} 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, div, ul { 
  display:block;
  overflow:auto;}

body {
  color:[[*c_black]];
  font-size:1.20em;
  line-height:1.7em;}

.lsf, 
.lsf-icon:before {
  font-family: 'LigatureSymbols'; 
  -webkit-text-rendering: optimizeLegibility; 
  -moz-text-rendering: optimizeLegibility; 
  -ms-text-rendering: optimizeLegibility; 
  -o-text-rendering: optimizeLegibility; 
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; 
  -moz-font-smoothing: antialiased; 
  -ms-font-smoothing: antialiased; 
  -o-font-smoothing: antialiased; 
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
  font-size:130%;}

span.lsf{
  font-size:1.7em;
  display:inline-block;
  width:50px;
  text-align:center;}

/* GRID */
.container {
  margin-left: auto;
  margin-right: auto;
  max-width:1200px;
  padding:0 10px;}

.grd25 .padd,
.grd33 .padd,
.grd50 .padd,
.grd67 .padd,
.grd100 .padd{
  padding:20px 10px;}

.grd25 .paddR,
.grd33 .paddR,
.grd50 .paddR,
.grd67 .paddR,
.grd100 .paddR{
  padding-right:40px;}

.grd10,
.grd15,
.grd25,
.grd33,
.grd50,
.grd67,
.grd75{
  float:left;}

.grd100{
  width:100%;}

.grd75{
  width:75%;}

.grd67{
  width:66.66%;}

.grd50{
  width:50%;}

.grd33{
  width:33.33%;}

.grd25{
  width:25%;}

.grd15{
  width:15%;}

.grd10{
  width:10%;}

.grd70px{
  width:70px;
  display:inline-block;}

.grd140px{
  width:140px;
  display:inline-block;}



/* ALLGEMEINE STYLES */
h1, h2, h3{
  color:[[*c_black60]];}

h1 + h2, h1 + h3{
  padding-top:1.5em;}

h1{
  font-size:4.0em;}

h2{
  font-size:2.0em;}

h3{
  font-size:1.6em;}

p{
  font-size:1.0em;
  margin-bottom:1.3em}

hr{
  display: block;
  margin:4.0em auto;
  border: 1px solid [[*c_black60]];}

ul{ 
  list-style:none;
  margin:0;
  padding:0;}

ol{ 
  list-style:decimal;
  padding:0;
  margin:5px 50px;}

article section ul li{ 
  list-style:disc;
  margin-left:30px;
  padding:0;}

article section ul.noLstStl li{ 
  list-style:none;
  margin-left:auto;}

a {
  border:none;
  color:[[*c_apricot]];
  text-decoration:none;}

a:hover {
  color:[[*c_apricotP10]];
  cursor:pointer;}

a[href^="http:"]:after,
a[href^="https:"]:after,
a[href^="ftp:"]:after{
  content: 'external';
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; 
  -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased;
  margin-left:0.3em;}

a[href^="http://www.bruehlbaerbel.de"]:after,
a[href^="http://bruehlbaerbel.de"]:after,
a[href^="https://www.bruehlbaerbel.de"]:after,
a[href^="https://bruehlbaerbel.de"]:after{
  display: none}

a.getResNews,
a.getResNews:hover {
  border:none;
  color:[[*c_black]];
  font-weight:normal;
  text-decoration:none;}

a.getResNews .link{
  color:[[*c_apricot]];}

a.getResNews:hover .link{
  color:[[*c_apricotP10]];}

input{
  background:[[*c_black05]];
  border:1px solid [[*c_black00]];
  width:10.0em;
  height:1.8em;
  padding:0 0.2em;
  font-size:0.8em;
  font-style:italic;}

input:focus{
  border:1px solid [[*c_apricot]];}

input[type="submit"] {
  background:[[*c_black60]];
  border:none;
  color:[[*c_black00]];
  cursor:pointer;}

#login label {
  padding:0 10px;
  display:inline-block;}

#login input {
  background:[[*c_black05]];
  display:inline-block;}

#login input#user {
  margin:0 30px 0 0;}

#login input[type="submit"] {
  background:[[*c_black60]];
  border:none;
  color:[[*c_black00]];
  cursor:pointer;
  font-size:1.0em;
  height:1.9em;
  margin:0 0 0 1.0em;}

.green {color:[[*c_green]];}

.red {color:[[*c_red]];}

/* HEADER */
header section#login{
  background:[[*c_black80]];
  color:[[*c_black00]];
  text-align:right;}

header #container-nav1{
  border-bottom:0px solid [[*c_black05]];}

header #container-nav1 .container{
  position:relative;}

header #container-nav1 .container #logo {
  float:left;
  padding:5px 0;
  position:relative;
  left:50px;
  overflow:auto;}


/* Login */
#login{
}

#loginBox{
  font-size:0.7em;
  margin:0.5em 0;}


/* NAVIGATION */
nav a,
nav a.lsf{
  color:[[*c_black]];
  font-size:1.30em;
  font-weight:300;
  text-decoration: none;}

nav#level1 ul{
  float:right;}

nav#level1 ul li{
  text-align:right;
  float:left;
  border-top:3px solid [[*c_black80]];}

nav#level1 a{
  display: block;
  padding:25px 0;
  text-align:center;
  width:120px;}

nav#level1 a.active{
  color:[[*c_apricot]];}

nav#level1 a:hover{
  background:[[*c_black05]];
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;}

nav#level2{
  overflow:auto;
  text-align:center;}

nav#level2 span{
  border-bottom:2px solid [[*c_black05]];
  margin: 0 0.5em;}

nav#level2 span:hover{
  border-bottom:2px solid [[*c_apricot]];}

nav#level2 a,
nav#level2 a:hover{
  color:[[*c_black60]];
  display:inline-block;
  font-size:1.10em;
  font-weight:300;
  padding: 0 1.0em 1.0em 1.0em;
  text-decoration:none;}

nav#level2 a:hover,
nav#level2 span.active a{
  color:[[*c_apricot]];}

/* NAVIGATION MOBIL*/
.mobilnav{
  background:[[*c_black20]];
  margin-bottom:1.0em;}

.mobilnav ul li{
  border-top:1px solid [[*c_black]];}

.mobilnav ul li.last{
  border-bottom:1px solid [[*c_black]];}

.mobilnav ul li a{
  color:#[[*color02]];
  width:100%;
  display:inline-block;
  padding:0 10px;}

.mobilnav ul li.active a{
  font-weight:800;
  font-style: normal;}

.mobilnav ul li ul li a{
  padding:0 30px;}


/* ARTICLE */
article{
  min-height:400px;}

article img{
  max-width:100%;}


/* FOOTER */
footer {
  font-size:0.80em;
  font-weight:300;
  padding-top:30px;}

footer,
footer h1,
footer h2,
footer h3 {
  color:[[*c_black00]];}

footer section#footerSection1,
footer section#footerSection2 {
  padding:30px 0 50px 0;}

footer section#footerSection1 {
  background:[[*c_black80]];}

footer section#footerSection2{
  background:[[*c_black]];}

footer h2,
footer h3{
padding:0;}


/* SPEZIELLE STYLES */
#countdownBox{
  background:[[*c_black00]];
  width:100%;
  border-radius: 2px;}
  
#countdown {
  background:[[*c_apricot]];
  text-align:right;
  font-size:0.7em;
  padding:1px;}

.copyright {
  font-size:0.8em;
  text-align:right;}


/* LISTEN */
ul.list li {
  overflow:auto;
  list-style:none;
  margin:10px 0;}

article ul.list li {
  background:[[*c_black05]];
  margin-bottom:10px;}

article ul.list.toggle li:hover {
  background:[[*c_black10]];
  cursor:pointer;}


/* Kalender */
div.cal{
  color:[[*c_black]];
  border-radius: 2px;
  float:left;
  margin-right:10px;
  text-align:center;
  width:60px;}

article div.cal{
  margin-right:20px;}

div.cal .month{
  background:[[*c_apricot]];/* Old browsers */ background:linear-gradient(to bottom, [[*c_apricotM10]] 0%,[[*c_apricotP10]] 100%); /* W3C */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='[[*c_apricotM10]]', endColorstr='[[*c_apricotP10]]',GradientType=0 );/* IE6-9 */
  font-size:0.9em;}

div.cal .day{
  font-size:2.0em;
  font-weight:bold;
  line-height: 1.3em;
  background:[[*c_black00]];/* Old browsers */ background:linear-gradient(to bottom, [[*c_black00]] 60%,[[*c_black10]] 100%);/* W3C */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='[[*c_black00]]', endColorstr='[[*c_black10]]',GradientType=0 ); /* IE6-9 */}

div.cal .weekday{
  font-size:0.3em;
  font-weight:normal;}

.list .visible .kalOverview div {
  min-height:1px;
  float:left;}
  
.list .visible .kalOverview div span{
  display:inline-block;
  margin-right:15px;
  width:30px;
  text-align:center;}

.list .visible div.listSymb:after {
  font-size:2.0em;
  overflow:hidden;
  float:right;
  content:"down";}

.list .visible.active div.listSymb:after {
  content:"up";}

#kalender.list .hidden {
  margin:20px 0 0 80px;}

footer #kalender li {
    padding-right:10px;}


/* Fasnetsübersicht */
.fasnetOverview{
  background:[[*c_black05]];
  border-radius:2px;
  padding-right:10px;
  margin-bottom:50px;
  text-align:right;
  width:100%;}
  
.fasnetDauer {
float:left;
  background:[[*c_apricot]];
  color:[[*c_black00]];
  text-align:left;
  padding:1px 1px 1px 10px;}


/* Dashboard */
ul#dashboardFahrkarten li{
  background:[[*c_black05]];
  margin:0 0 2px 0;
  list-style:none;
  overflow:auto;}

ul#dashboardFahrkarten li span{
  line-height:2.0em}

/* Dashboard v8*/
div#dashboardFahrkarten div.busTicket{
 background:#f2f2f2/*[[*c_black05]]*/;
 height:270px;
 margin:0 0 10px 0;
 padding:10px;
 overflow:auto;
 border-right:10px solid #ffffff/*[[*c_black00]]*/;}

div#dashboardFahrkarten .busZiel{
 height:100px;}

div#dashboardFahrkarten .busZiel h3{
 line-height:1.4em;}

div#dashboardFahrkarten div.ticketStatusGreen{
 border-left:10px solid #579A1B/*[[*c_green]]*/;
 margin:1px 0 0 0;}

div#dashboardFahrkarten div.ticketStatusRed{
 border-left:10px solid #AC441E/*[[*c_red]]*/;
 margin:1px 0 0 0;}

div#dashboardFahrkarten div.busStatusGreen,
div#dashboardFahrkarten div.busStatusRed{
 font-size:0.7em;
 text-align:right;}

div#dashboardFahrkarten div.busStatusGreen{
 border-top:5px solid #579A1B/*[[*c_green]]*/;}

div#dashboardFahrkarten div.busStatusRed{
 border-top:5px solid #AC441E/*[[*c_red]]*/;}

div#dashboardFahrkarten div.ticketStatus{
 margin:30px 0 0 0;}

div#dashboardFahrkarten div.busInfo{
 text-align:right;
 font-size:0.8em;
 font-weight:bold;}

div#dashboardFahrkarten a,
div#dashboardFahrkarten a:hover{
 color:#000000/*[[*c_black]]*/;}

div#dashboardFahrkarten div.busTicket:hover{
 background-color:#e5e5e5/*[[*c_black10]]*/;}

  
/* Mitglieder */
.list div.mitglImg{
  border-radius:2px;
  float:left;
  margin-right:10px;}

.list div.mitglImg img,
.list div.mitglImg div{
  background:[[*c_apricot]];/* Old browsers */ background:linear-gradient(to bottom, [[*c_apricotM10]] 0%,[[*c_apricotP10]] 100%);/* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='[[*c_apricotM10]]', endColorstr='[[*c_apricotP10]]',GradientType=0 );/* IE6-9 */
  color:[[*c_black00]];
  height:100px;
  width:100px;}

.list div.mitglImg div{
  font-size:2.5em;
  text-align:center;
  padding-top:5px;}

.list .visible .mitglOverview div span{
  display:inline-block;
  width:30px;
  text-align:center;}

#mitglList.list .hidden {
  margin:20px 0 0 110px;}

/* Laufnr*/
ul#laufnr li {
  list-style:none;
  height:50px;
  margin-bottom:10px;}

ul#laufnr li div.nr {
  background:[[*c_black20]];
  color:[[*c_black00]];
  border-style:solid;
  font-size:1.5em;
  font-weight:bold;
  float:left;
  vertical-align: middle;
  margin-right:10px;
  width:50px;
  height:50px;
  line-height:50px;
  text-align:center;
  border-radius: 50px;}

ul#laufnr li div.name {
  vertical-align: middle;
  line-height:50px;}

div#freieNr div.nr {
  background:[[*c_black20]];
  color:[[*c_black00]];
  border-style:solid;
  font-size:1.5em;
  font-weight:bold;
  float:left;
  vertical-align: middle;
  margin-right:10px;
  width:50px;
  height:50px;
  line-height:50px;
  text-align:center;
  border-radius: 50px;}

  
/* Galerie */
ul#gallery li {
  overflow:auto;
  border-right:10px solid [[*c_black00]];
  list-style:none;
  line-height:0;
  margin:0;
  text-align:center;
  position:relative;
  z-index:10;}

ul#gallery li a div.galTitel{
  background:[[*c_black]];
  color:[[*c_black00]];
  opacity:0.8;
  position:absolute;
  bottom:10%;
  width:100%;
  z-index:1;}

ul#gallery li a img,
div#gallerythumbs a img{
  background:url('[[++site_url]]assets/c103_images_v7/loader.gif') 50% 50% no-repeat;
  opacity:0.9;}

ul#gallery li a img{
  width:100%;}

ul#gallery li a:hover img,
div#gallerythumbs a:hover img{
  opacity:1.0;}

ul#gallery li a:hover div.galTitel {
    color:[[*c_apricot]];}

ul#gallery li,
div#gallerythumbs a {
  cursor:pointer;}

div#gallerythumbs a {
  border-right:10px solid [[*c_black00]];
  line-height:0;
  margin-bottom:10px;
  float:left;}


/* MEDIA QUERIES */
.noDesktop {
  display:none;}

.noMobil {
  display:block;}


@media screen and (max-width: 768px){
  .grd100, .grd75, .grd67, .grd50, .grd33{
    display:block;
    width:100%;
    float:none;}

  .grd25{
    width:50%;}

  h1 + h2, h1 + h3{
    padding-top:1.5em;}

  h1{
    font-size:2.0em;}

  h2{
    font-size:1.6em;}

  h3{
    font-size:1.3em;}

  ul#galerie li a div.galTitel{
    width:98%;}

  header {
   height:auto;}

  header nav#level1 {
    text-align:right;}

  header #container-navmobil .container .grd75{
    width:75%;
    float:left;}

  header #container-navmobil .container .grd75.logo{
    padding:10px;}

  header #container-navmobil .container .grd25{
    text-align:right;
    width:25%;}

  footer #kalender li {
    padding-bottom:10px;}

  nav ul{
    float: none;}
 
  nav ul li{
    float: none;
    text-align: left;}

  /* MOBILE ANPASSUNGEN */
  .noDesktop {
    display:block;}

  .noMobil {
    display:none;}
}


@media screen and (max-width: 480px){
  .grd100, .grd75, .grd67, .grd50, .grd33, .grd25 {
    width:100%;
    float:none;
    overflow:auto;}
}
