@font-face {
	font-family: 'Titillium Maps';
	src: url("/fonts/TitilliumMaps29L-800wt.otf") format("opentype");
    font-display: swap;
    font-weight: 800;
}

@font-face {
	font-family: 'Titillium Maps';
	src: url("/fonts/TitilliumMaps29L-400wt.otf") format("opentype");
    font-display: swap;
    font-weight: 400;
}

@font-face {
	font-family: 'Titillium Maps';
	src: url("/fonts/TitilliumMaps29L-999wt.otf") format("opentype");
    font-display: swap;
    font-weight: 999;
}

* {
	box-sizing: border-box;
}

html {
    background: #999;
    background-image:url(../images/bg_autobahn.jpg);
    background-attachment:fixed;
    background-position:center center; 
    background-size:cover;
    font-family: sans-serif;
    line-height: 1.15;
}

body {
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
    background-color: #fff;
    border-radius: 10px 10px 10px 10px;
    max-width: 900px;
	font-family: arial, helvetica, sans-serif;
    margin-left: auto;
	margin-right: auto;
    font-size:.8em;
}

#header {
    border-radius: 10px 10px 0px 0px;
	display: block;
	background-color: white;
    max-width: 900px;
    margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
}

#header img {
    border-radius: 10px 10px 0px 0px;
    width: 100%;
    height: auto;
}

a {
	text-decoration: none;
}


#main {
	background-color: white;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
    padding: 15px 20px;
}

#footer {
    border-radius: 0px 0px 10px 10px;
    color: #fff;
    display: block;
	background-color: #333;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
    margin-bottom: 30px;
    padding: 15px 10px 15px 20px;
}

#footer p {
	margin: 0;
    line-height: 1.7em;
    text-align: center;
    color: white;
}

#footer a {
    color: white;
}

h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    line-height: 1.2;
    font-weight: 800;
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

h2{
    color: #d20000;
    font-family: 'Titillium Maps', Arial;
    font-size: 1.8em;
    font-weight: 800;
    margin-bottom: 10px;
    padding: 3px 0;
    padding-top: 15px;
}

h3 {
    font-size:1.1em;
    font-weight:800;
    margin:20px 0 5px 0;
}

ul, ol {
    padding-left: 20px;
}

li ul {
    margin:5px 0px 5px 0px;
    list-style-type: disc;
}


iframe{
    border: 0;
    overflow:hidden;
	display: block;
	padding:0;
    margin: 0;
    max-width: 600px;
	height: 400px;
}

#wrapper {
    position: relative;
    overflow: hidden;
}

#content {
    position: relative;
    min-height: 320px;
    padding: 0px 20px 20px 20px;
    min-height: 400px;
    float: left;
    width: 650px;
}

#cssmenu {
  padding: 15px 0 0 0;
  margin: 0;
  border: 0;
  float:left;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  width: 200px;
}

#cssmenu ul {
  background-color: #F1F1F1;
  border: 1px solid #CCC;
  background-clip: padding-box;
  position: relative;
  padding: 0px;
}

#cssmenu li {
  border-bottom: 1px solid #CCC;
  box-shadow: 0 1px 0 white;
  padding: 0px;
}

#cssmenu ul li {
  min-height: 1px;
  line-height: 1em;
  list-style: none;
  margin: 0;
  padding: 0;
}

#cssmenu a {
  border: 1px solid transparent;
  color: #444;
  height: 25px;
  line-height: 25px;
  padding: 0 12px;
  text-align: left;
  text-overflow: ellipsis;
  display: block;
  text-decoration: none;
}

#cssmenu a:hover {
  color:#de4940;
}

#cssmenu li.active {
  background-color: #ca3b39;
  background-image: linear-gradient(#d56361, #ca3b39);
  position: relative;
}

#cssmenu li.active a {
  border-right: 0 none;
  position: relative;
  color: #FFF;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  padding-right:15px;
}

.mobilemenu {
    width: 200px;
    float: left;
}

.mobilemenu .card {
    border: 0;
    border-radius: 0;
    padding-bottom:10px;
}

.linkwrap {
    white-space: pre-wrap; /* CSS3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

#mobilemenu {
    background-color: #ca3b39;
    background-image: linear-gradient(#d56361, #ca3b39);
    padding: 0;
    margin: 0;
    border: 0;
    float:left;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    position: relative;
    color: #FFF;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    min-height: 1px;
    line-height: 1em;
    display: none;
    border-radius: 0;
}

#mobilemenu button {
    border: 1px solid transparent;
    height: 35px;
    line-height: 25px;
    padding: 0 12px;
    text-align: left;
    text-overflow: ellipsis;
    display: block;
    text-decoration: none;
    border-right: 0 none;
    position: relative;
    color: #FFF;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    padding-right:17px;
    width: 100%;
}

#stop {
  background:url(/images/logos/stoppschild.png) no-repeat scroll 0 0 transparent;
  height:243px;
  position:absolute;
  right:0px;
  top:30px;
  width:243px;
}

#autobahn {
  background:url(/images/logos/autobahn.png) no-repeat scroll 0 0 transparent;
  height:250px;
  position:absolute;
  right:0px;
  top:30px;
  width:250px;
}

#christmas {
  background:url(/images/logos/chricon.png) no-repeat scroll 0 0 transparent;
  height:250px;
  position:absolute;
  right:-130px;
  top:0px;
  width:250px;
}

#ostern {
  background:url(/images/logos/osticon.png) no-repeat scroll 0 0 transparent;
  height:172px;
  position:absolute;
  right:0px;
  top:0px;
  width:250px;
}

#vorfahrt {
  background:url(/images/logos/vorfahrt.png) no-repeat scroll 0 0 transparent;
  height:281px;
  position:absolute;
  right:0px;
  top:30px;
  width:281px;
}

.table-bordered td {
   padding: 8px;
   border: 1px solid #999999;
}
.table-bordered th {
   padding: 8px;
   border: 1px solid #999999;
}

.table-bordered tr {
   line-height: 15px;
   min-height: 15px;
   height: 15px;
   border: 1px solid #999999;
}

th {
    background-color: #EEE;
}

div.collapse.show {
    height: 100%;
}

/* Plans */

#planlist a img {
  filter:grayscale(100%);
}

#planlist a:hover img {
    filter:grayscale(0%);
}

.heading {
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    background-color:#EEE;
}

.exceptionBG {
  background-color:#EEE;
  color:#EEE;
}

.okBG {
  background-color:#DFD;
  color:#3D3;
}

.okBG a {
  color:#3B3;
}

.okBG a:hover {
  color:#3D3!important;
  text-decoration:underline!important;
}

.noCourseBG {
  background-color:#FDD;
  color:#F88;
  font-weight:700;
}

#themen {
  border:0 solid #ddd!important;
  border-collapse:collapse;
}

#themen a:hover {
  color:inherit;
  text-decoration:none;
}

#themen tr,td,th {
  vertical-align:top;
  padding:5px;
}

/* Cards */

.card-header {
    padding: 0 0 0 0;
}

.card-header h2 {
    margin-bottom: 0px;
}

.card-header h1 {
	font-size: 1.6em;
    display: inline-block;
    text-decoration: none;
}

.card-body h3 {
    font-size: 1.5em;
	margin: 0 0 10px 0;
}

.mb-0 {
    padding: 5px 10px 5px 10px;
}

.mb-0 button {
    width: 100%;
    padding: 0;
    margin: 0;
}

.img-thumbnail {
	width: 120px;
    text-decoration: none;
}

#triplecard {
    width: 300%;
    margin-left: -200%;
    background-color: white;
    text-align: center;
}

@media only screen and (max-width: 900px) {
    html {
        background: #999;
    }
    
    body {
        border-radius: 0px 0px 0px 0px;
    }
    
    #main {
        padding: 0;
    }
    
    #header {
        margin: 0;
        border-radius: 0px 0px 0px 0px;
    }
    
    #header img {
        border-radius: 0px 0px 0px 0px;
    }
    
    iframe {
        width: 100%;
    }
    
    #footer {
        margin: 0;
        border-radius: 0px 0px 0px 0px;
    }
    
    #content {
        width: 100%;
        max-width: none;
    }
  
    #cssmenu {
        margin: 0;
        width: 100%;
        padding: 0;
    }
  
    #mobilemenu {
        display: inline;
        padding-top: 0;
    }
    
    #stop {
        display: none;
    }

    #autobahn {
        display: none;
    }

    #vorfahrt {
        display: none;
    }
    
    #ostern {
        display: none;
    }
    
    #christmas {
        display: none;
    }
    
    .mobilemenu {
        width: 100%;
    }
    
    /* Cards */
    .card-header h1 {
        font-size: 1.2em;
    }
}

/* Image spilling */
@media only screen and (max-width: 575px) {
    #triplecard {
        margin-left: -100%;
    }
}

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
    /* Hack für Bootstrap cards in IE10+ */
    .card .card {
        height: 280px;
    }
            
    .card a {
        height: 190px;
    }
}