/* use own fonts */

@font-face {
    font-family: "Roboto";
    src: url('Roboto_Condensed/RobotoCondensed-Regular.ttf');
}


/* reset css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1.2;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


.no-js .top-bar {
    display: none;
}

@media screen and (min-width: 40em) {
    .no-js .top-bar {
        display: block;
    }

    .no-js .title-bar {
        display: none;
    }
}

/* styles */

/* ##### STRUCTURE ##### */


body{
    background: #d9d9d9;
    background-image: url('../img/bg.jpg');
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
}
body.dark-mode,
body.dark-mode header,
body.dark-mode .row,
body.dark-mode textarea,
body.dark-mode table tr,
body.dark-mode table td,
body.dark-mode table#spieler th,
body.dark-mode table#spieler,
body.dark-mode table#trainer,
body.dark-mode table#trainer th,
body.dark-mode .side-table td,
body.dark-mode .leistungsbox,
body.dark-mode .spielbox,
body.dark-mode .birthday-box,
body.dark-mode h3
{
    background: #222 !important;
    color: #ddd !important;
    border: none;
    box-shadow: none;
}

body.dark-mode nav,
body.dark-mode nav a,
body.dark-mode .menu,
body.dark-mode #second-nav-line,
body.dark-mode label,
body.dark-mode input,
body.dark-mode select,
body.dark-mode #second-nav-line select,
body.dark-mode .second-nav-forms,
body.dark-mode h2,
body.dark-mode .profile-pic
{
    background: #2f2f2f !important;
    color: #ddd !important;
    box-shadow: none;
    border: none;
}

body.dark-mode h2{
    border-bottom: 5px solid #BD0000;
}
body.dark-mode a{
    color: #aaa !important;
    border-bottom: 2px solid;
}

body.dark-mode nav{
    border-bottom: 2px solid #BD0000 !important;
}
body.dark-mode div#news-menu li,
body.dark-mode #statistics a{
    box-shadow: none;
    color: #fff !important;
}
body.dark-mode .spielbox-ansetzung{
    color: #bbb;
}


header{
    padding: 12px 0 12px 10px;
    margin-bottom: 10px;
    background: #BD0000;
    color: #fff;
    height: 90px;
    box-shadow: 0 1px 8px #555;
}
header form{
    margin-top: 12px;
}
header a{
    color: #000;
}
header button.button,
header .button{
    background: #1B2A36;
}
header img{
    float: left;
    border: none;
    margin: 0 0 0 5px;
}

#header-search{
    margin-top: 20px;
}

#second-nav-line{
    background: #BD0000;
    padding: 8px;
    box-shadow: 0 1px 8px #555;
    border-top: 1px solid #fff;
    color: #fff;
}

#header-search-small{
    background: #BD0000;
    position: absolute;
    top: 7px;
    right: 10px;
}

#header-search-small form button.button{
    background: #1B2A36;
}
#header-search-small form input.search-text{
    margin: 0;
}
#second-nav-line{
    height: 52px;
    background: #BD0000;

}

.second-nav-forms.row{
    background: #BD0000;
}
#second-nav-line form{
    margin: 0 5px 0 0;
    padding: 0;
}
#second-nav-line select{
    margin: 0;
    border: transparent;
    box-shadow: 0 1px 8px #888;
}

footer{
    text-align: center;
    background: #1B2A36;
    color: #fff;
    margin-top: 40px;
    border-top: 5px solid #BD0000;
    box-shadow: 0 1px 8px #555;
}
footer .footer-text{
    width: 100%;
    padding: 30px 0 40px 0;
}
footer a, footer a:hover{
    color: #fff;
}

/*##### NAV #####*/
nav{
    position: relative;
    padding: 0;
    background: #BD0000;
    box-shadow: 0 1px 8px #555;
}
.menu.title-bar{
    background: #BD0000;
    padding: 16px 15px 16px 10px;
}
.menu.row{
    background: #BD0000;
    border-bottom: none;
}
.menu li a{
    padding: 15px 15px;
    background: #BD0000;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: none;
}

.menu li a:hover,
.menu li a.active{
    background: #1B2A36;
    color:#fff;}

.path{
    font-size: 1.2em;
    background: none;
    padding: 0;
    position: relative;
}
.path div{
    margin: 20px 0 20px 8px;
}
a.btn-toggle{
    position: absolute;
    right: 0;
    top: 10px;
    background: #000;
    padding: 5px 20px;
    color: #fff;
    border: none;
    box-shadow: 0 1px 8px #888;
}
a.btn-toggle:hover{
    background: #1B2A36;
    color: #fff;
}
.row.transparent{
    background: none;
}
article.withbackground,
.row{
    background: #f1f1f1;
}
.row.no-background{
    background: none;
}
#main{
    padding: 0 0 0 0;
    position: relative;
    clear: both;
}


/* ##### ARTICLE ##### */

article{
    padding: 5px 15px 5px 15px;
    margin: 0 0 20px 0;
}
article.left-box{
}
article.left-box select{
    margin: 0;
}
article.left-box form{
    margin: 0 0 20px;
}
article.box{
    margin: 0;
    padding: 0;
}

#statistics{
    border-left: 1px solid #ccc;
    padding-top: 20px;
}
#statistics a{
    font-size: 0.9em;
    color: #fff;
    background: #BD0000;
    box-shadow: 0 1px 8px #888;
    line-height: 1.2em;
    display: inline-block;
    margin: 0 0 6px;
    padding: 5px 8px;
}
#statistics a:hover{
    background: #1B2A36;
}

#birthday-wrapper{
    width: 100%;
    margin-top: 10px;
}
#birthday-box-wrapper{
    padding: 0 15px;
}
.birthday-box{
    margin-bottom: 15px;
    padding:0 0 5px;
    background: #fff;
}
.birthday-box h3{
    font-size: 1em;
    background: #333;
    color: #fff;
    padding: 10px 10px;
    margin: 0;
    text-align: center;
}
.birthday-box h3.today{
    background: #BD0000;
}
.birthday-box p{
    margin: 5px 5px 0;
}


table#calendar{
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #aaa;
    margin-bottom: 15px;
}
#calendar th{
    text-align: center;
}
#calendar th.monthbefore,
#calendar th.monthafter{
    cursor: pointer;
    text-align: left;
}
#calendar th.monthafter{
    text-align: right;
}
#calendar td{
    cursor: pointer;
    text-align: center;
    padding: 10px;
    border: 1px solid #fff;
}
#calendar td:hover{
    background: #e3e3e3;
}
#calendar td.active{
    background: #BD0000;
    color: #fff;
}




#side-wrapper{
    padding: 25px 10px 15px;
    margin-top: -20px;
    border-left: 1px solid #ccc;
    position: relative;
}

div#news-box{
    height: 255px;
    padding: 0;
    color: #fff;
    margin-bottom: 20px;
    border-bottom: 5px solid #BD0000;
}
div#news-preview,
#max-preview{
    box-shadow: 0px 3px 8px #bbb inset, 0px -2px 6px #bbb inset;
    position: relative;
    background: #eee;
    background-image: url('../img/bg.jpg');
    overflow: hidden;
    padding: 0;
    text-align: center;
    border-right: 1px solid #888;
    margin-bottom: 20px;
    cursor: pointer;
}
.desc-wrapper{
    width: 80%;
    position: absolute;
    bottom: 10px;
    left: 0;
    padding: 0 5px;
    margin-left: 5px;
    text-align: left;
    font-weight: bold;
    color: #fff;
}
.date-cat-wrapper{
    margin: 0 0 5px;
    font-weight: bold;
}

.date-cat-wrapper .date,
.date-cat-wrapper .category{
    background: #fff;
    padding: 4px;
    font-size: 0.8em;
    text-align: center;
    color: #000;
}
.date-cat-wrapper .category{
    background: #BD0000;
    color: #fff;
    padding: 4px 8px;
}
.desc-wrapper .desc{
    background: #1B2A36;
    line-height: 1.7em;
    font-size: 1em;
    padding: 4px 8px;
    /* Needs prefixing */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

div#news-menu{
    padding: 0;
    position: relative;
}

div#news-menu li{
    cursor: pointer;
    padding: 6px 10px;
    background: #BD0000;
    margin-bottom: 5px;
    box-shadow: 0 1px 8px #888;
    position: relative;
    left: -1px;
    border-radius: 6px;
}

div#news-menu li:hover{
    background: #1B2A36;
}
div#news-menu li.active{
    background: #1B2A36;
    position: relative;
}

#max-preview{
    height:350px;
    font-size: 1.4em;
    cursor: default;
    margin-bottom: 20px;
    border-bottom: 5px solid #BD0000;
    border-right: none;
}
#max-preview .desc-wrapper{
    left: 15%;
}

#max-preview .desc{
}


article#statistiken div{
    margin: 0 0 10px;
}
article#statistiken ul{
    padding: 0 0 0 10px;
    margin: 0 20px 10px 0;
}
article#statistiken ul li{
    list-style: circle;
}
article#statistiken ul li.no-list-style{
    list-style: none;
}
article#statistiken ul li.margin-10{
    margin: 0 0 10px;
}

article#leftstat{

}

.spielbox-team,time{
    position: relative;
    font-size: 1em;
    z-index: 1;
    background: #1B2A36;
    padding: 4px 10px 4px;
    color: #fff;
    margin: 0 0 0 0;
}

.timeline time{
    margin: 0;
    display: block;
    padding: 4px 10px;
}
.spielbox{
    color:#000;
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 8px 5px;
    margin: 1px 0 0;
    overflow: hidden;
    font-size: 1em;
    opacity: 0.8;
}
p.spielbox{
    line-height: 1.1;
}
.spielbox-ansetzung{
    font-weight: normal;
    font-size:0.8em;
    color: #555;
    padding: 0 0 3px 0;
    display:block;
}
.spielbox-ergebnis{
    display: block;
    margin-top: 5px;
    text-align: right;
    color: #BD0000;
}

/*##### BASICS #####*/
h1{
    color: #fff;
    padding: 20px 0 0;
    margin-left: 10px;
    float: left;
    font-size: 22px;
    font-family: 'Roboto', sans-serif;
    font-variant-caps: all-small-caps;
    letter-spacing: 1px;
    font-weight: bold;
    line-height: 22px;
}
h1 span.smaller{
    font-size: 16px;
    font-variant-caps: normal;
    font-weight: normal;
}

h2{
    font-family: 'Roboto', sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    background: #1B2A36;
    color: #fff;
    padding: 15px 15px;
    margin: 0 0 20px;
    position: relative;
    border-bottom: 5px solid #BD0000;
}

h3{
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 10px;
    border-bottom: 1px solid #ccc;

}
h3.border{
    border-bottom: 1px solid #ccc;
    margin: 0;
    padding: 0 0 4px;
}
h3.h3-bg{
    background: #BD0000;
    color: #fff;
    display: inline-block;
    padding: 7px 10px;
}
h3.no-caps{
    font-variant-caps: normal;
}
h3.margin-down{
    margin: 0 0 15px;
}
h3.border-bottom{
    border-bottom: 1px solid #1B2A36;
}
h4{
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    font-weight: bold;
    background: #1B2A36;
    color: #fff;
    padding: 4px 10px;
    margin: 0;
    position: relative;
    border-bottom: 3px solid #BD0000;
}
p{
    margin-bottom: 15px
}

a{
    color: #BD0000;
    font-weight: bold;
    line-height: 1.1;
}
a.icon{
    border: none;
    text-decoration: none;
}
a:hover{
    color: #000000;
}

label,
.label{
    background: #BD0000;
    color: #fff;
    padding: 3px 10px;
    font-weight: bold;
}
small{
    font-size: 0.9em;
}
.small-font{
    font-size: 0.7em;
}
/* ##### TABLE ##### */

table.scrollable{
    table-layout: fixed;
    border: 1px solid #888;
}
table.scrollable thead tr{
    display: block;
}
table.scrollable tbody{
    display:block;
    width: 100%;
    overflow: auto;
    height: 350px;
}
table.scrollable th, table.scrollable td {
    width: 160px;
    padding: 2px 10px;
}
table.scrollable th{
    text-align: left;
    background: #1B2A36;
    color: #fff;
}


table th{
    border-bottom: 3px solid #BD0000;
}

table tbody tr.highlight-row{
    background: #BD0000;
    color: #fff;
}
tr.high-sized{
    font-size: 1.2em;
    font-weight: bold;
}
table tbody tr.high-sized:nth-child(even) {
    background: #fff;
}
tr.mannschaft-odd{
    background: #fff !important;
}
tr.mannschaft-even{
    background: #ddd !important;
}
tr.border-top{
    border-top: 3px solid #1B2A36 !important;
}

tr.high-sized td{
    border: 0;
    padding: 0 10px;
}
table td a.background{
    background: #BD0000;
    line-height: 2em;
    color: #fff;
    padding: 2px 7px;
}
table td a.background:hover{
    background: #1B2A36;
    color: #fff;
}
th.th-bg{
    background: #1B2A36;
    color: #eee;
    font-variant-caps: all-small-caps;
}
th.mdesc{
    border-bottom: 1px solid #fff;
    background: #181818;
}
td.padding-bottom{
    padding-bottom: 40px !important;
}
table#adm{
    margin-bottom: 15px;
}
table#spiel{
    margin-bottom: 15px;
}
table#spiel th{
    padding: 0;
    font-size: 1em;
    line-height: 1.3em;
    font-weight: normal;
}
table#spiel tr{
    border: none;
}
table#spiel tr td{
    padding: 15px 10px;
}
table#spiel table tr.spiel-infos td:nth-child(2){
    font-weight: bold;
    vertical-align: top;
}
table#spiel table tr.spiel-infos td:nth-child(3){
    background-color: #444 !important;
    padding: 0 !important;
}
table#spiel table tr.spiel-infos td:nth-child(2){
    background-image: linear-gradient(to right, #1B2A36 0%, #222 50%, #444 100%)
}
table#spiel table tr.spiel-infos td:first-child{
    width: 15%;
    vertical-align: top;
}

table#spiel table tr.spiel-infos td{
    padding: 3px 5px !important;
    border: none;
    background-color: #1B2A36 !important;
    font-weight: normal;
}

table#spiel p{
    margin: 0 0 10px;
}

#spiel-statistik{
    border-right: 10px solid #f1f1f1;
}
body.dark-mode #spiel-statistik{
    border-right: 10px solid #222;
}
.spiel-special{
    font-weight: bold;
    padding: 7px 10px;
    border-bottom: 2px solid #fff;
    background:#BD0000;
    color:#fff;
}
#spiel-header-wrapper,
#saison-header-wrapper{
    font-size: 1.2em;
    font-weight: bold;
    background: #1B2A36;
    color: #fff;
    padding: 0;
    margin: 0 0 20px;
    position: relative;
    text-align: center;
    border-top: 5px solid #BD0000;
    border-bottom: 5px solid #BD0000;
}
#spiel-header-wrapper a,
#saison-header-wrapper a{
    color: #fff;
    border-bottom: 1px solid #fff !important;
}
#spiel-header-wrapper a.no-underline,
#saison-header-wrapper a.no-underline{
    border: none !important;
}
#spiel-header{
    margin-top: 15px;
}
#saison-header{
    margin: 15px 0;
    padding: 0 0;
}
#spiel-header p,
#saison-header p{
    line-height: 1.2em;
}
#liga-wrapper{
    padding: 5px 5px;
    display: block;
    font-size: 1em;
    margin: 10px 0 0px;
    /*box-shadow: 0px 2px 6px #000 inset, 0px -2px 4px #000 inset;*/

}
#liga-wrapper span.no-wrap{
padding: 0 0;
}
.spiel-logo{
    height: 80px;
    margin-bottom: 10px;
}
#spiel-header-side,
#saison-header-side{
    background: #444;
    color: #fff;
    padding: 15px 15px;
    position: relative;
    right: 0;
    text-align: left;
    font-size: 0.8em;
}
#saison-header-side{
    text-align: center;
}
#spiel-header table{
    margin: 10px 0 10px;
}
#spiel-header table td{
    background: #1B2A36;
    line-height: 1.3em;
    color: #fff;
    border-bottom: none;
    font-weight: bold;
    font-size: 1.1em;
    padding: 0;
}
#spiel-header table td.tore{
    font-size: 2.5em;
    line-height: 1.1em;
    letter-spacing: 1px;
    vertical-align: bottom;
    text-align: center;
    padding-bottom: 5px;
}
#spiel-header table .subtore{
    font-size: 1em;
    letter-spacing: 1px;
    color: #aaa;
    vertical-align: top;
}
.side-table{
    margin-bottom: 25px;
    border: 1px solid #888;
}
.side-table td{
    border: none;
    background: #f1f1f1 !important;
    padding-bottom: 0;
}

.side-table th,
.side-table h4{
    background: #1B2A36;
    padding: 10px 10px;
    font-size: 1em;
    margin: 0;
}
.side-table th.inactive{
    background: #d7d7d7 !important;
    cursor: default !important;
    color: #888 !important;
    font-style: oblique !important;
}
.side-table th.aufstellung{
    background-repeat: no-repeat;
    background-size: auto 60px;
    background-position: top 5px left 5px;
    padding: 25px 10px 25px 70px;
    text-shadow: 1px 1px #000;
}
h2.bilanz{
    background-repeat: no-repeat;
    background-size: 100px;
    background-position: top -15px right 0px;
    text-shadow: 2px 2px #000;
}
#spiel-drucksachen{
    border-left: 10px solid #f1f1f1;
}
body.dark-mode #spiel-drucksachen{
    border-left: 10px solid #222;
}

#spiel-drucksachen table th{
    width: 25%;
    border-bottom: 2px solid #1B2A36;
    border-right: 1px solid #ddd;
    background: #BD0000;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

#spiel-drucksachen table th:nth-child(4){
    border-right: none;
}

#spiel-drucksachen table th.active{
    background: #1B2A36;
    color: #fff;
    font-weight: bold;
    border-bottom: 2px solid #1B2A36;
}

#spiel-drucksachen table td,
#spiel-drucksachen .side-table p{
    padding: 15px 10px 10px;
}

table#spieler,
table#trainer{
    font-size: 1.2em;
    border: 1px solid #ccc;
}
table#spieler tbody tr:nth-child(even) {
    background-color: #fff;
}
table#spieler th,
table#trainer th{
    border-bottom: none;
    color: #BD0000;
    background: #f1f1f1;
    font-weight: bold;
    text-align: right;
    padding: 8px;
    vertical-align: top;
}
table#spieler td,
table#trainer td{
    padding: 8px;
    background: #f1f1f1;
    color: #000;
    border-bottom: none;
    vertical-align: top;
}

table.kader{
    text-align: center;
}
table.kader th,
table#search-result th{
    background: #1B2A36;
    color: #fff;
    border-bottom: 3px solid #BD0000;
}
table#tabedit tbody tr{
    background: #fff;
}
table#tabedit td{
    padding: 4px 2px;
}
table#tabedit td input{
    margin: 0;
}
.tabup, .tabdown{
    background: #BD0000;
    color: #fff;
    padding: 2px 5px 5px;
    cursor: pointer;
}
.tabup{
    background: green;
}
table#kreuztabelle{
    font-size: 0.7em;
    text-align: right;
}
table#kreuztabelle thead{
}
table#kreuztabelle th{
    background: #1B2A36;
    color: #fff;
    width: 5%;
}
table#kreuztabelle td,
table#kreuztabelle th{
    border: 1px solid;
    padding: 0px 2px;
}
table#kreuztabelle td,
table#kreuztabelle input{
    font-size: 1em;
    text-align: center;
    padding: 0;
    margin: 0;
}

td.desc{
    border-top: 3px solid #BD0000;
    padding: 8px 10px;
    background: #1B2A36;
    color: #fff;
    font-size: 0.95em;
}

/* ##### IMG ##### */

img.columns{
    border: none;
    margin: 0 10px 5px 0;
    padding: 0;
}

.picture-in-text{
    padding: 20px;
    float: left;
    border-radius: 4px;
    margin: 0 10px 5px 0;
    border: 1px solid #999;
}



/* ##### Sonderklassen #####*/

.no-margin{
    margin: 0;
}
.no-padding{
    padding: 0;
}
.display-none{
    display: none;
}
.visibility-hidden{
    visibility: hidden;
}
.no-underline{
    border: none;
}
.no-line-break{
    white-space: nowrap;
}
.vertical-middle{
    vertical-align: middle;
}
.vertical-top{
    vertical-align: top;
}
.clear-left{
    clear: left;
}
.clear-right{
    clear: right;
}
.shadow{
    border: none;
    box-shadow: 0 1px 8px #888;
}
.no-wrap{
    white-space: nowrap;
}
.wrap-checkbox{
    margin: 0 0 8px;
}
.wrap-checkbox label{
    box-shadow: 0 1px 8px #888;
    line-height: 1.2em;
    padding: 8px 10px;
}
#edit label{
    padding: 2px 10px;
}
label.signal-green{
    background: #299ec1;
    color: #fff;
}
label.signal-red{
    background: #BD0000;
    color: #fff;
}
label.signal-grey{
    background: #aaa;
    color: #fff;
}
label.show-statistic,
label.show-player,
label.show-bilanz,
label.show-coaches{
    cursor: pointer;
    background: #BD0000;
    display: inline-block;
    margin-right: 2px;
    box-shadow: 1px 0 5px #333;
}
label.show-statistic.active,
label.show-player.active,
label.show-bilanz.active,
label.show-coaches.active{
    background: #1B2A36;
    color: #fff;
}
label.show-player{
    margin-bottom: 5px;
}
.pic-wrapper{
    position: relative;
}

.profile-pic{
    border: 5px solid #fff;
    /*border-bottom: 35px solid #fff;*/
}

.pic-float{
    float: left;
    margin: 0 10px 5px 0;
}
.pic-wrapper .remove-pic span{
    position: absolute;
    right: 3px;
    top: 3px;
    padding: 1px 6px;
    background: #BD0000;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    font-size: 1.2em;
    border: 1px solid #777;
}
a.remove-entry{
    float: right;
    padding: 1px 6px;
    background: #BD0000;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    font-size: 1.2em;
    border: 1px solid #777;
}
a.remove-entry:hover{
    color: #fff;
}
.pic-desc{
    position: absolute;
    bottom: 0;
    left: 0;
    background: #BD0000;
    color: #fff;
    font-weight: bold;
    width: 100%;
    padding: 5px 10px;
    opacity: 0.85;
}
#team-foto{
    position: relative;
    margin: 15px 0 0;
    text-align: center;
}
#team-fotos{
    position: relative;
}
.team-desc{
    text-align: left;
    padding: 15px 25px 0;
    background: #1B2A36;
    font-weight: normal;
    font-size: 0.7em;
    line-height: 1.6em;
}

#team-fotos img{
    margin: 10px 5px;
    cursor: pointer;
}
#team-fotos img.active{
    border: 2px solid #ccc;
    position: relative;
    left: -10px;
}
.photoList{
    width: 80%;
}
.photoList.active{
    border: 1px solid #555;
    width: 100%;
}
.font-red{
    color: #fff;
    font-size: 0.85em;
    background: #BD0000;
    padding: 21px 10px;
    margin-left: -5px;
    margin-right: 5px;
}

.meldung,.fehler{
    margin: 10px 0;
    padding: 10px 20px;
    background: #299ec1;
    color: #fff;
}
.fehler{
    background: #BD0000;
    color: #fff;
}

.arrow-navigate{
    margin-top: 2px;
}
#saison-header-wrapper .arrow-navigate{
    margin: 0 10px;
}

#bio{
    clear: both;
    padding-top: 10px;
}

.leistungsdaten-wrapper .row,
.trainer-posten-wrapper .row{
    background: #ccc;
}

.trainer-posten-wrapper h4{
    background: #fff;
    display: inline-block;
    padding: 5px 10px;
}

.trainer-posten-row{
    margin: 0 0 20px;
}
.leistungsdaten-wrapper .row{
    padding: 2px 0;
    margin: 0 0;
    background: none;
}
.leistungsdaten-wrapper label,
.leistungsdaten-wrapper input,
.leistungsdaten-wrapper select{
    margin: 0;
    font-size: 0.85em;
}

.leistungsbox{
    background: #fff;
    padding: 5px 10px;
    margin: 0 0 10px;
    border: 1px solid #ccc;
}

.search-summary{
    background: #fff;
    border: 1px solid #ccc;
    border-left: 5px solid #BD0000;
    padding: 5px 8px;

}

ul.padding-bottom-20{
    padding-bottom: 20px;
}

.forbidden-overlay{
    position: absolute;
    top: 0;
    left:0;
    z-index: 999;
    background: #000;
    opacity: 0.8;
    height: 4000px;
}
.forbidden-overlay div{
    position: relative;
    top: 150px;
    text-align: center;
    font-size: 2em;
    opacity: 1;
    color: #fff;
    text-shadow: 1px 1px #000;
}

/* ##### FILE UPLOAD ##### */

.fileContainer {
    overflow: hidden;
    position: relative;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
}

/* ##### BOOK ##### */

#book .fi-arrow-left,
#book .fi-arrow-right{
    float: left;
    font-size: 2em;
    cursor: pointer;
}
#book .fi-arrow-right{
    float: right;
}
.book-site{
    box-shadow: 0 1px 8px #888;
}
#pagination{
    padding: 2px 0 0;
    margin: 0;
    font-size: 1.1em;
}
.drucksachen-wrapper{
    position: relative;
}
.drucksachen-programme,.drucksachen-autogramme{
    position: relative;
    height: 120px;
    text-align: center;
    overflow: hidden;
}
.drucksachen-programme img, .drucksachen-autogramme img{
    height: 110px;
    position: absolute;
}
.drucksachen-karten{
    position: relative;
    height: 120px;
    text-align: center;
    overflow: hidden;
}
.drucksachen-karten img{
    height: 70px;
    position: absolute;
}
.drucksachen-plakate{
    position: relative;
    height: 120px;
    text-align: center;
    overflow: hidden;
}
.drucksachen-plakate img{
    height: 110px;
    position: absolute;
}

.drucksachen-presseinfos{
    position: relative;
    height: 120px;
    text-align: center;
    overflow: hidden;
}
.drucksachen-presseinfos img{
    height: 110px;
    position: absolute;
}

.programme-wrapper,
.karten-wrapper{
    float: left;
    margin: 8px 10px 20px;
    position: relative;
}
.programme-wrapper{
    height: 300px;
    width: 212px;
}
.karten-wrapper{
    height: 90px;
    width: 190px;
    position: relative;
    overflow: hidden;
}
.karten-wrapper img{
    width: 190px;
}
.programme-desc,
.karten-desc{
    font-size: 0.7em;
    position: absolute;
    bottom: 20px;
    left: -1px;
    background: #1B2A36;
    box-shadow: 0 1px 8px #555;
    color: #fff;
    padding: 2px 5px;
}
.karten-desc{
    bottom: 0;
}
.programme-desc.no-position,
.karten-desc.no-position{
    position: relative;
    top:0;
    left: 0;
}
.programme-desc a,
.karten-desc a{
    color: #eee;
}

.picture-row .small-pic-wrapper{
    display: inline-block;
    position: relative;
}

.picture-row img{
    margin: 12px 5px 0 5px;
    cursor: pointer;
}
.small-pic-wrapper img{
    cursor: default;
}
.small-pic-wrapper .set-profile-pic span{
    position: absolute;
    cursor: pointer;
    padding: 1px 4px;
    background: #1B2A36;
    color: #fff;
    border: 1px solid #777;
    bottom: 0px;
    font-size: 1em;
    left: 1px;
}

.small-pic-wrapper .remove-pic span{
    position: absolute;
    cursor: pointer;
    padding: 1px 5px;
    background: #BD0000;
    color: #fff;
    font-weight: bold;
    border: 1px solid #777;
    top: 5px;
    font-size: 1em;
    right: 2px;
}

/*** ICONSET ***/

.icons{
    background-image: url('../img/iconset_sprite.png');
}

.goal{
    display: inline-block;
    background-position: -340px -81px;
    width: 18px;
    height: 18px;
}
.change-in{
    display: inline-block;
    background-position: -287px -81px;
    width: 18px;
    height: 18px;
}
.change-out{
    display: inline-block;
    background-position: -305px -81px;
    width: 18px;
    height: 18px;
}
.get-out{
    display: inline-block;
    background-position: -340px -102px;
    width: 18px;
    height: 18px;
}
.referee{
    display: inline-block;
    background-position: -753px -304px;
    width: 18px;
    height: 18px;
}

.card{
    text-align: center;
    box-shadow: 0 1px 2px #333;
    display: inline-block;
    width: 10px;
    height: 16px;
    padding: 2px 0 0;
    margin-top: 2px;
    position: relative;
    border-radius: 2px;
    vertical-align: top;
    font-size: 0.6em;
}
.card.yellow{
    background: #fdcd3b;
}
.card.yellowred{
    background: linear-gradient(90deg, #fdcd3b 70%, #BD0000 70%);
    width: 12px;
}
.card.red{
    background: #BD0000;
}
.ptime-wrapper{
    display: inline-block;
    background: #BD0000;
    padding: 0 3px 0 1px;
    color: #fff;
    font-size: 0.8em;
    box-shadow: 0 1px 2px #333;
    border-radius: 2px;
    height: 21px;
    cursor: default;
}
.ptime{
    display: inline-block;
    background-position: -352px -3px;
    width: 18px;
    height: 20px;
}
.z-index-99{
    z-index: 99;
   position: relative;
}
.grey{
    color: #aaa;
}



/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline{
    position: relative;
    overflow: hidden;
}
.timeline .spielbox{
    box-shadow: none;
    padding: 5px 10px;
}

.timeline ul {
    background-image: url('../img/background_n.jpg');
    padding: 20px 0;
}

.timeline ul li {
    list-style-type: none;
    position: relative;
    width: 6px;
    margin: 0 auto;
    padding-top: 20px;
    background: #bbb;
}

.timeline ul li::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: inherit;
}

.timeline ul li div {
    position: relative;
    bottom: 0;
    width: 300px;
    padding: 0;
    margin: 0;
    background: transparent;
}

.timeline ul li div::before {
    content: '';
    position: absolute;
    bottom: 7px;
    width: 0;
    height: 0;
    border-style: solid;
}

.timeline ul li:nth-child(odd) div {
    left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #fff transparent transparent;
    opacity: 0.8;
}

.timeline ul li:nth-child(even) div {
    left: -339px;
}

.timeline ul li:nth-child(even) div::before {
    right: -15px;
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent #fff;
    opacity: 0.8;
}


/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
    transition: background .5s ease-in-out;
}

.timeline ul li.in-view::after {
    background: #fff;
}

.timeline ul li div {
    visibility: hidden;
    opacity: 0;
    transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
    transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
    transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
    transform: none;
    visibility: visible;
    opacity: 1;
}
.autotable{
    margin-top: 10px;
}
.autotable table td{
    vertical-align: top;
    padding: 5px;
}
.playersnumber,.autoyear{
    text-align: center;
    background: #BD0000;
    display: block;
    color: #fff;
    padding: 8px 5px;
    border: 1px solid #fff;
    font-weight: bold;
}
.playersnumber{
    font-size: 1em;
}
.autoyear{
    font-size: 0.8em;
    padding: 5px;
    background: #1B2A36;
    border-bottom: none;
}

@media screen and (max-width: 900px) {
    .timeline ul li div {
        width: 250px;
    }
    .timeline ul li:nth-child(even) div {
        left: -289px;
        /*250+45-6*/
    }
}

@media screen and (max-width: 600px) {
    .timeline ul li {
        margin-left: 20px;
    }
    .timeline ul li div {
        width: calc(100vw - 91px);
    }
    .timeline ul li:nth-child(even) div {
        left: 45px;
    }
    .timeline ul li:nth-child(even) div::before {
        left: -15px;
        border-width: 8px 16px 8px 0;
        border-color: transparent #fff transparent transparent;
    }
}
@media screen and (max-width: 320px) {
    .timeline ul li div {
        width: 190px;
    }
}

@media print {
    body{
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
    header,
    nav,
    footer a,
    #programme-box,
    #saison-auswahl,
    #spieler-suche,
    header form#header-search input{
        display: none;
    }

    a{
        color: #BD0000 !important;
        text-decoration: none;
    }
    a[href]:after{
        content: none !important;
    }

    h2{
        font-size: 1.2em;
        border-left: none;
        padding: 10px 0 0;
        border-bottom: 4px solid #BD0000;
    }
    h3{
        margin: 20px 0 10px;
        border-bottom: 2px solid #BD0000;
    }

    .programme-desc{
        background: #1B2A36 !important;
        color: #eee !important;
    }

    #profile-pic-wrapper{
        height: 25%;
        width: 25%;
    }

    .book-site, .pic-wrapper{
        height: 50%;
        width: 50%;
    }

    #spieler-wrapper,
    #trainer-wrapper{
        float: right;
        width: 75%
    }

    table th{
        background: #BD0000 !important;
        color: #fff;
    }
    table tbody tr.highlight-row td{
        font-weight: bold;
    }
    table tr td{
        background: #f9f9f9 !important;
    }

    #bio{
        display: none;
    }

    footer{
        border: none;
        text-align: right;
    }
    .pic-desc{
        background:#BD0000 !important;
    }
}