/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 265px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 25px;
    }
    .body-content {
        padding: 0px;
    }
    .messages {
        background-color:#286090;
        vertical-align: central;
        position: fixed;
        bottom: 50%;
        width: 30%;
        height: 50px;
        z-index: 99;
    }
 }


@media only screen and (max-device-width: 480px) {
    .jumbotron {
        margin-top: 5px;
        padding-top: 10px;
        padding-bottom:10px;
    }

    .body-content {
        padding: 10px;
    }

    .messages {
        background-color: #286090;
        vertical-align: central;
        position: fixed;
        bottom: 50%;
        width: 30%;
        height: 50px;
        z-index: 99;
    }
}


/* Animated gifs*/
.messagestext {
    text-indent:10px;
    font-size: 10pt;
    color: white;
    width: 100%;
}

/* Data-FIELDS (LISTVIEWS)
-----------------------------------------------------------*/
.listview_header1 {
    width:100%;
    background-color: darkgray;
    font-size: 12pt;
    font: bold;
    height: 20px;
}

.listview_header2 {
    width:100%;
    background-color: lightgray;
    font-size: 11pt;
    font: bold;
    height: 15px;
}

.listview_data {
    width: 100%;
    padding-left: 5px;
    font-family: Verdana;
    font-size: 9pt;
    color: #000000;
    background-color: #e7fae5;
}

.listview_data_alternating {
    width:100%;
    padding-left: 5px;
    font-family: Verdana;
    font-size: 9pt;
    color: #000000;
    background-color: #FFFFFF;
}

.data_pager {
    height: 20px;
    width: 100%;
    text-align: center;
    background-color: gainsboro;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 9pt;
}


/* MARQUEE & BILDWECHSLER
---------------------------------------------------------*/
.marquee {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding-left: 100%;     /* Legt fest, dass die Schrift von rechts eingeblendet wird */
    scro
}

    .marquee span {
        
        -moz-animation: marquee 16s linear infinite forwards;
        -webkit-animation: marquee 16s linear infinite forwards;
        animation: marquee 16s linear infinite;  /* Zeit muss abgestimmt werden mit transform */
        display: inline-block;  /* Für das Objekt kann Höhe und Breite festgelegt werden */
        font-size: 18px;
        text-align: left;
        width:500%;        /* Hat keinen Einfluss */

    }

    .marquee:hover span {
        animation-play-state: paused; /Bei mouseover oder Tipp auf dem Touchscreen pausiert die Laufschrift */
    }

    /*
@-moz-keyframes marquee {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(300%);
    }
}

@-webkit-keyframes marquee {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(300%);
    }
}
        */

@keyframes marquee {
    from {
        -moz-transform: translateX(-10%);   /* Legt den Beginn links fest. -100% = Schrift erscheitn komplett am Beginn und läuft links raus*/
        -webkit-transform: translateX(-10%);
        transform: translateX(-10%);
    }

    to {
        -moz-transform: translateX(-250%);   /* Muss mit der Zeit oben abgestimmt werden */
        -webkit-transform: translateX(-250%);
        transform: translateX(-250);
    }
}


/* DRUCK   
----------------------------------------------------------*/
.noprint {
    display: initial;
}