@charset "utf-8";
/************************************* GENERAL ***************************************/
@media (min-width: 864px) {
    body {
        background: url('bg.gif');	
    }
}


/**************************************** LAYOUT ****************************************/
@media (min-width: 864px) {
    #page {
        background: url('hintergrund-oben.gif') repeat-x;
    }

    #copyright {
        color: #ab9ab5;
    }

    #copyright span {
        background: none;
    }

    #copyright a {
        color: #ba8dd5;
    }
}

/************************** CONTENT *********************************/

@media (min-width: 864px) {
    #main #content {
        min-height: 500px;
    }
    #main #content #body {
        min-height: 500px;
    }

    #main #content #body_inner {
        min-height: 500px;
    }

    #main {
        min-height: 500px;
    }
}

h1#fahrenderritter-header {
    background: url('../ueberschrift.gif') no-repeat;
    width: 264px;
    height: 68px;
    margin: auto;
}

/****************************** LEFT ************************************/
#left {
    display: none;
}

@media (min-width: 864px) {
    #left {
        display: block;
    }

    #fahrenderritter_portschluessel {
        background: url('left_portschluessel_bg.png') no-repeat top right;
        width: 100%;
        height: 269px;
    }
    #fahrenderritter_portschluessel .inner {
        position: relative;
        left: 30px;
        top: 70px;
    }
    #fahrenderritter_portschluessel .table-spacing td {
        padding: 0 1px;
    }

    #fahrenderritter_menu {
        background: url('left_fahrenderritter_bg.png') no-repeat top right;
        width: 100%;
        height: 211px;
    }
    #fahrenderritter_menu .inner {
        position: relative;
        text-align: center;
        left: 20px;
        top: 60px;
        width: 160px;
    }
}

/** Driving animation **/
.driving {
    -webkit-animation: bounce-bottom 1s infinite both;
    animation: bounce-bottom 1s infinite both;
}

@-webkit-keyframes bounce-bottom {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    30% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    62% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    75% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    25%,
    55% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes bounce-bottom {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    30% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    62% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    75% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    25%,
    55% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}