/******************************************************************************/
/* Allgemeines CSS ************************************************************/
/******************************************************************************/

html {
    background-attachment: fixed;
    background-position: top center;
    background-repeat: repeat;
    color: white;
    font-family: Verdana, Arial, sans-serif;
    font-size: 80%; /* Entspricht nn % von 1em oder 12pt oder 16px */
    overflow: auto;
}

body {
    margin: 0 auto;
    margin-left: 1%;
    margin-bottom: 10%;
    margin-right: 1%;
    margin-top: 10%;
    overflow: hidden;
}

.container {
    float: left;
    width: 100%;
}

.eineSpalte {
    margin-left: 25%;
    overflow: hidden;
    width: 50%;
}

.zweiSpalten {
    float: left;
    overflow: hidden;
    width: 45%;

}

#footer {
    color: black;
    overflow: hidden;
}    

/******************************************************************************/    
/* Miscellaneous **************************************************************/
/******************************************************************************/

.animationWartungService {
	background-repeat: no-repeat;
	background-position: center;
	height: 400px;
	margin-bottom: 5%;
	width: 100%;
}

.imgAllg {
    border: 0px;
    border-width: 0px; /* IE */
}

.imgHeader {
    float: left;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    width: 20%; /* aber */ max-width: 100px;
}

.logo {
    width: 100%; /* aber */ max-width: 300px;
}

.margin-bottom {
    margin-bottom: 10%;
}

.margin-right {
    margin-right: 10%;
}

.pading-text {
    padding: 5px;
}

.opacity {
    background-color: rgba(0, 0, 0, 0.10);    
}

.opacityWhite090 {
    background-color: rgba(255, 255, 255, 0.90);
}

.textBold {
    font-weight: bold;
}

.textKlein {
	font-size: 70%;
}

.textKursiv {
	font-style: italic;
}

.textCenter {
    text-align: center;
}

.textRight {
    text-align: right;
}

.textGelb {
	color: yellow;
}

.textRot {
    color: red;
}

/******************************************************************************/    
/* Links **********************************************************************/
/******************************************************************************/

A:link
{
    color: #ffffff;
    font-weight: normal;
    text-decoration: underline;
}

#footer A:link
{
    color: black; 
}

A:visited
{
    color: #ffffff;
    font-weight: normal;
    text-decoration: none;
}

A:hover
{
    color: #ffffff;
    font-weight: normal;
    text-decoration: none;
}

/* PDF-Links */
a[href$=pdf] {
    background: transparent url(../img/linktags/pdf.png) right center no-repeat;
    padding-right: 39px; /* 5px Abstand zum Text */
}

/******************************************************************************/
/* Geraetespezifische CSS-Anpassungen fuer bestimmte Endgeraetegruppen         *
/******************************************************************************/
/******************************************************************************/

/******************************************************************************/
/* CSS fuer Desktops (Bildschirmgroessen > 800 px) ****************************/
/******************************************************************************/

@media screen and (min-width: 801px) {
    html {
        background-image: url(../img/backgrounds/htmlBackgroundDesktops.png);
    }
}

/******************************************************************************/    
/* CSS fuer Tablets (Bildschirmgroessen 481 bis 800 px) ***********************/
/******************************************************************************/

@media screen and (min-width: 481px) and (max-width: 800px) {
    html {
        background-image: url(../img/backgrounds/htmlBackgroundIPads.png);
    }
    
    /* Auf Tablets soll die Inhaltsspalte breiter werden. */
    .eineSpalte {
    margin-left: 12.5%;
    overflow: hidden;
    width: 75%;
}
}

/******************************************************************************/
/* CSS fuer mobile Phones (Bildschirmgroessen bis einschl. 480 px) ************/
/******************************************************************************/

@media screen and (max-width: 480px) {

    html {
        background-image: url(../img/backgrounds/htmlBackgroundIPhones.png);
        font-size: 100%;  /* Schriftgroesse heraufsetzen. */
        line-height: 1.2; /* Zeilenabstand vergroessern. */
    }
    
    /* Auf mobile Phondes soll die Inhaltsspalte 100% breit sein. */
    .eineSpalte {
        margin-left: 0%;
        overflow: hidden;
        width: 100%;
    }
    
    /* Auf mobile Phones sollen aus den zwei Spalten je eine Spalte mit einer
       Breite von 100% werden (float: none; und width: 100%;), dazu noch etwas
	   Abstand nach oben (margin-top).
    */
    .zweiSpalten {
	    float: none;
		margin-top: 1%;
        overflow: hidden;
        width: 100%;
    }
    
    /* Deshalb hat die linke Spalte keine rechte Margin mehr. */
    .margin-right {
        margin-right: 0%;
    }
}