@charset "UTF-8";

/* #### SITE ################################################################# */			  
@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: 300;
  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;}

.lsf, 
.lsf-icon:before {
  font-family: 'LigatureSymbols'; 
  -ms-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;
  font-feature-settings: "liga" 1, "dlig" 1;
}

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

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



/* #### GRID ################################################################# */			  
.noDesktop {
    display:block;}

.noMobil {
    display:none;}

/* HEADER */			  
header{
	display: grid;
	grid-gap: 1em;
	grid-template-columns: auto 5em;
	padding:0.5em 0 0 0;}
			
header .logo{
	grid-column: 1;
	grid-row: 1;
    padding: 0 0.5em 0 0.5em;
}
			
header .nav{
	grid-column: 2;
	grid-row: 1;
}

header .mobilnav{
	grid-column: 1 / 3;
	grid-row: 2;
}
			

/* MAIN */			  
main{
	display: grid;
	grid-gap: 1em;
	grid-template-columns: auto;
	padding:3em 0 3em 0;}
			
main .headline{
	grid-column: 1;
	grid-row: 1;}
			
main article{
	grid-column: 1;
	grid-row: 2;}
			

/* FOOTER */			  
footer{
	display: grid;
	grid-gap: 1em;
	grid-template-columns: auto;
	padding:3em 0 4em 0;}
			
footer .teaser{
	grid-column: 1;
	grid-row: 1;}
			
footer .impressum{
    grid-column: 1;
	grid-row: 2;}
			
footer .social{
	grid-column: 1; 
	grid-row: 3;}

footer .copy{
	grid-column: 1;
	grid-row: 4;}
	 
 
@media (min-width: 40em){
    .noDesktop {
        display:none;


    }
    
    .noMobil {
        display:block;}

	/* HEADER */			  
	header{
		grid-template-columns: 20% auto;}

	header .logo{
		grid-column: 1;}
				
	header .nav{
		grid-column: 2;}


	/* FOOTER */			  
	footer{
		grid-template-columns: auto auto auto;}
				
	footer .teaser{
		grid-column: 1 / 4;}
				
	footer .impressum{
		grid-column: 1 / 3;}
				
	footer .social{
		grid-column: 3 / 4; 
		grid-row: 2;}
				
	footer .copy{
		grid-column: 1 / 4;
		grid-row: 3;}
	}
  

@media (min-width: 80em){
	/* HEADER */			  
	header{
		grid-template-columns: auto 16em 60em auto;
	}
				
	header .logo{
		grid-column: 2;}
				
	header .nav{
		grid-column: 3;}

		
	/* MAIN */			  
	main{
		grid-template-columns: auto 77em auto;}
				
	main .headline,
	main article{
		grid-column: 2;}


	/* FOOTER */			  
	footer{
		grid-template-columns: auto 25em 25em 25em auto;}
				
	footer .teaser{
		grid-column: 2 / 5;}
				
	footer .impressum{
		grid-column: 2 / 4;}
				
	footer .social{
		grid-column: 4 / 5; 
		grid-row: 2;}
				
	footer .copy{
		grid-column: 2 / 5;
		grid-row: 3;}
	}
/* #### END GRID ############################################################# */			  



/* #### CONTENT ############################################################## */			  
h1 {
	font-size:4em;
	text-align:center;}

h2 {
	font-size:2em;
	line-height:3em;
	text-align:center;}

h3 {
	font-size:1.6em;
	line-height:2em;
    margin-top:2em;
	text-align:left;}

p{
    color:[[*c_black]];
    font-size:1.0em;
    margin-bottom:1.3em}

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

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

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

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

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

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

table tr.inactive{ 
    color: [[*c_black20]];}

table tr th{ 
    border-bottom:1px solid [[*c_black40]];
    padding:0;
    font-weight:700;}

table tr td{ 
    padding:0.5em 2em 0.5em 0;
    border-bottom:1px solid [[*c_black20]];}

table.arbeitsdienste tr td:nth-child(3){ 
    padding:0.5em 0 0.5em 0;
    text-align:right;}


article img{
  max-width:100%;}

.logo a.noDesktop img {
    padding:0.5em 1em 0 0;
    width:90%;}
  
/* Login */
#login{
}

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

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;}


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

nav#level1 div,
nav#level2 div{
    display: inline-block
}

nav#level1 a{
    background:[[*c_black00]];
    display: block;
    padding:0.5em 0.7em;
    text-align:center;}

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

nav#level1 a:hover{
    background:[[*c_black05]];
    background: linear-gradient(320deg, [[*c_black05]] 40%, [[*c_black00]] 100%);
    transition: all 0.5s ease;
    border-radius: 3px;
}

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

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;
    width:100%;
}

.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;}


/* #### CONTENT SPECIAL ###################################################### */			  
/* Kalender */
ul#kalender li {
    background:[[*c_black05]];
    border-left:5px solid [[*c_black10]];
    border-radius: 3px;
    display:block;
    margin-top:0.5em;
    overflow:auto;
    width:95%;
}

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;
    width:25%;
}
  
.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 {
    border-bottom:none;
    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;}


/* 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;}


/* Dashboard */
div#dashboardFahrkarten div.busTicketBox {
	display: grid;
	grid-template-columns: 2em auto;}

div#dashboardFahrkarten div.busTicketStatus { 
	grid-area: 1 / 1 / 2 / 2;
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	background:	#353535;
	color: #ffffff;
	margin:0 0 10px 0;
	text-align:center;}
	
div#dashboardFahrkarten div.busTicket{
 background:#f2f2f2;
 margin:0 0 10px 0;
 padding:10px;
 border-right:10px solid #ffffff;
 grid-area: 1 / 2 / 2 / 3;}

div#dashboardFahrkarten div.busZiel{
 font-weight:bold;}

div#dashboardFahrkarten div.busInfo{
 font-size:0.8em;}

div#dashboardFahrkarten div.busInfo span{
    font-size:1.2em;
    font-weight:bold;}

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

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

/* Busstatus */
.busOverview{
  background:#ffffff;
  border-radius:2px;
  font-size:0.8em;}
  
.busStatus {
  background:#ef8963;
  color:#ffffff;
  text-align:left;
  padding:1px 1px 1px 10px;
  margin-top:1em;}

.busStatus.green {
  background:#579A1B;}

 
/* Artikelübersicht Aktuelles */
a.getResNews li{
    background:[[*c_black05]];
    border-left:5px solid [[*c_black10]];
    border-radius: 3px;
    margin-bottom:1em;
}

 
/* #### END CONTENT ########################################################## */			  



/* #### FOOTER ############################################################### */			  
footer {
    background:[[*c_black]];
    background: linear-gradient(140deg, [[*c_black]] 0%, [[*c_black80]] 80%);
    color:[[*c_black00]];}

footer .teaser{
  background:[[*c_black80]];}

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

#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;}
/* #### END FOOTER ########################################################### */			  
