@charset "UTF-8";

/* NBTX 2015 */
/* by pHneutral */

/* colors */
/*
blau: #009fe3
grün: #95c11f
*/

/* imports */
@import url(reset.css);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:700,300);

/* basics */

body {
    font-family: 'Roboto Condensed', Arial, sans-serif;
    background: #fff;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size:100.01%;
    line-height:1.5;
    font-weight:300;
    color:#666;
    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
    background:#f1f1f1;
    }

::-moz-selection {
    background: #25ad75; 
    text-shadow: none;
    color:#fff;
}

::selection {
    background:#25ad75;
    text-shadow: none;
    color:#fff;
}

h4 {font-size:1em; font-weight:700;}

/* nav */

header {
    background:#fff;
    box-shadow:0 0 5px rgba(0,0,0,0.5);
    width:100%;
    position: fixed;
    z-index:1;
}

header .burger,
header .logo {width:230px; display:block; min-height:30px; float:left; margin:15px 0 10px;}

header .logo {margin-left:10px;}
header .burger {
    float:right;
    width:42px;  
    background-image: url(../images/NBTX_Webicons.svg);
    background-size:1500%;
    background-position:28% 12%;
    background-repeat:no-repeat;
    margin-right:10px;
}

header .burger:hover,
header .logo:hover {text-decoration:none;}

header ul {overflow:hidden; width:480px; float:left;}

header ul li {float:left;}
header ul li a {color:#777; width:120px; padding:20px 10px 10px; display:block; min-height:60px; text-transform:UPPERCASE; transition:all .3s ease; text-align:center;}
header ul li a:hover {text-decoration:none; color:#777777; background:#f1f1f1;}
header ul li.is_active a {font-weight:700;}

/* content */

nav,
section {max-width:960px; margin:0 auto;}

section {background:#fff; padding:10px 0;}

h2 {border-bottom:1px solid #777777; margin:10px 10px 0; overflow:hidden;}
h2 span {display:block; padding:10px; background:#777777; color:#fff; float:left; font-weight:700; text-transform:UPPERCASE; min-width: 100px;}

h2 span:after {content:''; border-style:solid; display:block; float:right; width:12px; height:12px; margin-top:-10px; margin-right:-10px; border-width: 0 12px 12px 0; border-color:transparent #fff transparent transparent;}

.mobile {display:none;}
/* Calculator and Timetable */

.calculator {    
    padding:60px 10px 20px;
    color:#fff;
    background: rgb(0,159,227); /* Old browsers */
    background: -moz-linear-gradient(45deg, rgba(0,159,227,1) 0%, rgba(149,193,31,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(0,159,227,1)), color-stop(100%,rgba(149,193,31,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, rgba(0,159,227,1) 0%,rgba(149,193,31,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, rgba(0,159,227,1) 0%,rgba(149,193,31,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, rgba(0,159,227,1) 0%,rgba(149,193,31,1) 100%); /* IE10+ */
    background: linear-gradient(45deg, rgba(0,159,227,1) 0%,rgba(149,193,31,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009fe3', endColorstr='#95c11f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    min-height:30px;
    overflow:hidden;
    list-style: none;
}

.calculator li {float:left; margin-right: 20px;}
.calculator li:last-child {float:right; margin-right:10px;}

.calculator label {margin-bottom:5px; display:block;}

.result li:before,
.calculator label:before {
    content:' ';
    width:22px;
    height:22px;
    display:inline-block;
    background-image: url(../images/NBTX_Webicons.svg);
    background-size: 1500%;
    background-repeat:no-repeat;
    background-position: 0 4px;
    line-height: 1;
    margin-right:10px;
}

.result li.destination:before,
.calculator label[for="destination"]:before {
    background-position: 8% 4px;    
    margin-right:5px;    
}

.result li.time:before,
.calculator label[for="time"]:before {
    background-position: 22% 3px;    
}

.result li.date:before,
.calculator label[for="date"]:before {
    background-position: 15% 4px;    
}

/*.result li.via:before {
    content: none;
}*/
.calculator label[for="speed"]:before {
    background-position: 30% 3px;
    margin-right:5px;    
}

.result li.via.racebiking:before {background-position: 7% 66%;}
.result li.via.biking:before {background-position: 0% 66%;}
.result li.via.skating:before {background-position: 29% 66%;}
.result li.via.jogging:before {background-position: 22% 66%;}
.result li.via.walking:before {background-position: 15% 66%;}

.calculator select,
.calculator input {display:block; border-radius:0; background:#fff; box-shadow:0; color:#777; border:0; padding:5px 10px; line-height:1.4;}

.calculator select{
   -webkit-appearance: none;
   -moz-appearance:none;
   appearance:none;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   -webkit-box-shadow: 0;
   -moz-box-shadow: 0;
   box-shadow: 0;
   -webkit-padding-end: 10px;
   -webkit-padding-start: 10px;
   -webkit-user-select: none;
   background-image: url(../images/NBTX_Dropdown.png);
   background-position: 96% center;
   background-repeat: no-repeat;
}

.calculator input[type="date"],
.calculator input[type="time"] {
   -webkit-appearance: none;
   -moz-appearance:none;
   appearance:none;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   -webkit-box-shadow: 0;
   -moz-box-shadow: 0;
   box-shadow: 0;
   -webkit-padding-end: 10px;
   -webkit-padding-start: 10px;    
}

.calculator select#station {width:240px;}
.calculator select#destination {width:100px;}
.calculator select#speed {width:175px;}

.calculator input[type="time"] {width:100px;}
.calculator input[type="date"] {width:130px;}

.calculator input[type="submit"] {transition:all .3s ease; color:#fff; background:#444; font-weight:300; text-shadow:0; padding:5px 10px 5px; margin-top:34px;}
.calculator input[type="submit"]:hover {background:#000;}

.calculator li#speed { position:relative; left:0px; }

ul.result {
    transition:all .5s ease;
    opacity:0;
    margin:0 10px;
    height:0;    
    min-height:0;
    list-style:none;
    color:#fff; 
    background:#ff6699;
    overflow:hidden;
}

ul.result.is_active {
    opacity:1;
    margin:10px;
    height:auto;
    min-height:85px;
    padding: 0 10px;
    }

ul.result li {width:450px; border-bottom:1px solid #fff; padding:10px; float:left; text-transform:UPPERCASE; margin-right:20px; font-weight: 700;}
ul.result li:nth-child(even) {margin-right:0;}
ul.result li:nth-child(3), ul.result li:nth-child(4) {border:0;}

.map {margin:40px 0;}
.map img {width:100%;}

.timetable {margin:10px;}
table.table {text-transform:UPPERCASE;}

.timetable table.table {
    background-image:url(../images/NBTX_Tabletrack.svg);
    background-repeat:no-repeat;
    background-position:10px 47px;
    background-size:35px;
    }

.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th {
    padding:10px;
}

/* Direction Arrows and Flag */
.timetable table.table .direction {
    background-image: url(../images/NBTX_Streckenposten.svg);
    background-size: 111%;
    background-repeat:no-repeat;  
  }

.timetable table.table .direction.east {background-position:left top;}
.timetable table.table .direction.west {background-position:left bottom;}
.timetable table.table .direction.flag {background-position:left center;}

/* Via */
.timetable table.table .via .icon{
    background-image: url(../images/NBTX_Webicons.svg);
    background-size: 1500%;
    background-repeat:no-repeat;
    background-position: 0% 45%;
    width:40px;
    height:30px;
    margin-left:-7px;
    margin-top:-5px;
    margin-bottom:-5px;
}

.timetable table.table .via.racebiking .icon {background-position: 7% 45%;}
.timetable table.table .via.biking .icon {background-position: 0% 45%;}
.timetable table.table .via.skating .icon {background-position: 29% 45%;}
.timetable table.table .via.jogging .icon {background-position: 22% 45%;}
.timetable table.table .via.walking .icon {background-position: 15% 45%;}

/* Shariff Overwrite */

.shariff .orientation-horizontal li {
    max-width:100px;
    min-width:100px;
    margin-right: 20px;
    }

.shariff .orientation-horizontal .info {
    width: 35px;
    min-width: 35px;
}

/* Über NBTX */

ul.accordion {
    list-style:none;
    padding:0 10px;
    margin-bottom:50px;
}

ul.accordion li {padding:15px 10px; border-bottom:1px solid #bbb; }
ul.accordion li h3 {text-transform:UPPERCASE; cursor:pointer;}
ul.accordion li h3.is_active {font-weight:700;}
ul.accordion li h3:before {
    content:'';
    width:40px;
    height:40px;
    margin-top:-7px;
    margin-right:5px;
    display: block;
    float:left;
    background-image: url(../images/NBTX_Webicons.svg);
    background-size: 1500%;
    background-repeat:no-repeat;
    background-position: 0% 0%;
}

ul.accordion li h3.nbtx:before {
    background-position: 44% 12%;
}

ul.accordion li h3.single:before {
    background-position: 59% 12%;
}

ul.accordion li h3.group:before {
    background-position: 59% 12%;
}

ul.accordion li h3.dev:before {
    background-position: 51% 12%;
}

ul.accordion li h3.origin:before {
    background-position: 66% 12%;
}

ul.accordion article {overflow:hidden; display:none}
ul.accordion article.first { display:block; }

ul.accordion article p {padding:10px 0; width:400px;}
ul.accordion article .fleft {float:left; margin-right:20px;}
ul.accordion article .fright {float:right; margin-left:20px;}
ul.accordion article iframe {float:right;}

/* footer */

footer {
    color: #fff;
    font-size:1em;
    background: rgb(0,159,227); /* Old browsers */
    background: -moz-linear-gradient(45deg, rgba(0,159,227,1) 0%, rgba(149,193,31,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(0,159,227,1)), color-stop(100%,rgba(149,193,31,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, rgba(0,159,227,1) 0%,rgba(149,193,31,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, rgba(0,159,227,1) 0%,rgba(149,193,31,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, rgba(0,159,227,1) 0%,rgba(149,193,31,1) 100%); /* IE10+ */
    background: linear-gradient(45deg, rgba(0,159,227,1) 0%,rgba(149,193,31,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009fe3', endColorstr='#95c11f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    width:100%;
    overflow:hidden;
}

footer section {background:transparent;}
footer ul {float:left; min-width:240px; list-style: none;}
footer li {padding:0 20px 20px;}
footer li.social a {
    display:inline-block; 
    width:30px; 
    height:30px; 
    background-image: url(../images/NBTX_Webicons.svg);
    background-size: 2300%;
    background-repeat:no-repeat;
    background-position: 0% 0%;
    }
footer li.social a.facebook {background-position: 1% 88%;}
footer li.social a.twitter {background-position: 8% 88%;}

footer li.social,
footer .logo {margin-top:10px;}
footer a, footer a:link, footer a:active, footer a:visited,footer a:hover {color:#fff;}
footer li.social a:hover {text-decoration: none;}

/* media queries */

@media only screen and (max-width: 970px) {
    .timetable .mobile {display:none; font-size:.7em}
    nav, section {
      max-width: 480px;
      margin: 0 auto;
    }
    nav ul {display:none;}
    footer ul {min-width: 200px; max-width:240px; font-size:.9em;}
    ul.result li{ width: 430px; }
    ul.result li:nth-child(3) { border-bottom:1px solid #fff; }
    .timetable table.table .via,
    .timetable table.table .distance {display:none;}
	.timetable table.table .direction { background-size: 111%; }

    .calculator li:last-child,
    .calculator li { margin-right: 0px; }
    .calculator li#speed { display: block; }
    
    .calculator select#station {width:220px; margin-right:20px;}
    .calculator select#destination {width:100px; margin-right:20px;}
    .calculator select#speed {width:220px; margin-right:20px;}

    .calculator input[type="time"] {width:100px;}
    .calculator input[type="date"] {width:100px; margin-right:20px;}

    .calculator input[type="submit"] {width:100px;}
}