@charset "UTF-8";
/* CSS Document */

body, html {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

#wrap {
width: 970px;
height: 100%;
margin : 0 auto;
padding : 0;
}

#navheader {
width: 970px;
height: 60px;
margin-top : 60px;
padding : 0;
}

#container {
width: 821px;
height:100%;
margin: 0 auto;
padding-left: 0;
background-image:url(../images/back.jpg);
background-repeat:repeat-y;
}

#content {
margin:0;
height: 100%;
padding-left: 75px;
padding-right: 75px;
padding-top: 50px;
}

#content ul {
padding-top: 40px;
padding-left: 12px;
padding-bottom: 60px;
float:left;
}

.contentimg {
padding-top: 30px;
padding-right: 12px;
padding-bottom: 60px;
float:right;
}

#iframe iframe {
width:690px;
height:500px;
border:none;
margin-bottom:65px;
}

.maintext {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 18px;
color:#666;
}

.listtext {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
line-height: 18px;
color:#7187a5;
}

#border {
width: 821px;
height:18px;
margin: 0 auto;
padding: 0;
background-image:url(../images/footer.jpg);
background-repeat:no-repeat;
}

#footer {
width: 821px;
height:100%;
margin: 0 auto;
padding: 0;
text-align:center;
}

#footer p {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
line-height: 10px;
color:#999;
}

#footer h1 {
padding: 0;
margin: 0;
}

#clear {
clear:both;
}

/**************************************************************

	NAVMenu

**************************************************************/

#navwrap { margin-left:100px; }

/* NAVSTATS */
#navstates { width: 970px; height: 60px; margin: 0 auto; position: relative; /*z-index: 9998;*/ }
#navstates #nav { margin: 0; padding: 0; }
#navstates #nav li { display: inline; }
#navstates #nav li a { float: left; width: 100px; height: 0; padding-top: 60px; overflow: hidden; outline:none; }
#navstates #nav li a,
#navstates  { background-image: url(../images/nav_states.gif); background-repeat: no-repeat; }


/* BUTTONS*/
#navstates #nav li#werkst a { background-position: 100px 0; }
#navstates #nav li#fahrz a { background-position: 200px 0; }
#navstates #nav li#stand a { background-position: 300px 0; }
#navstates #nav li#kontakt a { background-position: 400px 0; }


/* OVER STATES*/
#navstates #nav li#werkst a:hover { background-position: -100px -60px; }
#navstates #nav li#fahrz a:hover { background-position: -200px -60px; }
#navstates #nav li#stand a:hover { background-position: -300px -60px; }
#navstates #nav li#kontakt a:hover { background-position: -400px -60px; }


/* PRESSED STATES */
#navstates #nav li#werkst a:active { background-position: -100px -120px; }
#navstates #nav li#fahrz a:active { background-position: -200px -120px; }
#navstates #nav li#stand a:active { background-position: -300px -120px; }
#navstates #nav li#kontakt a:active { background-position: -400px -120px; }


/* ON STATES*/
#navstates.wer #nav li#werkst a { background-position: -100px -180px; cursor:default; }
#navstates.fah #nav li#fahrz a { background-position: -200px -180px !important; cursor:default; }
#navstates.sta #nav li#stand a { background-position: -300px -180px !important; cursor:default; }
#navstates.kon #nav li#kontakt a { background-position: -400px -180px !important; cursor:default; }


/*************************************************************/

/*	-------------------------------------------------------------
	Kontaktformular
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
       
/*	-------------------------------------------------------------
	STRUKTUR
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/


               div#formwrapper {
                    /* Allgemeines Container */
               	margin-bottom: 65px;
               	width: 400px;
				padding: 0 0 0 0;
				text-align:left;
				float:right;
               }

               div#formular {
                    /* Sub-Container, wird nach rechts verschoben, da links bei einem Formulare
                    weitere Elemente stehen werden. Typische Alternative: margin: 0 auto; */
                    margin: 0 ;
               	padding: 0 0 0 0;
               	text-align: left;
               	width: 400px;
               }
               .contactleft {
                    /* Linker Bereich des Formulars: für Labels */
                    width: 10%;
                    clear: both;
                    float: left;
                    display: inline;
                    padding: 4px;
                    margin: 0;
                    text-align: left;
               }
               .contactright {
                    /* Rechter Bereich des Formulars: für Eingabefelder */
                    width: 70%;
                    text-align: left;
                    /*float: right;*/
                    display: inline;
                    padding: 0;
                    margin: 0;
               }

/*	-------------------------------------------------------------
	GESTALTUNG VON EINGABEFELDERN
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
               input, textarea {
                    border: 1px solid #d6d6d6;
                    -moz-border-radius: 3px;
               }

               .contactform {
                    /* Hintergrundebene mittels overflow */
                    height: 100%;
                    overflow: auto;
                    
               }

               .contactform #name,
               .contactform #email,
               .contactform #site,
               .contactform #feedback {
                    width: 65%;
                    padding: 5px; 
                    color: #7b7b7b;
                    font: 1.1em/1.6em Verdana ,Arial, Helvetica, sans-serif; 
               }

               #subm {
                    /* Versenden-Schaltfläche */
                    font: 1.1em/1.6em Verdana ,Arial, Helvetica, sans-serif; 
                    width: 100px;
                    border: 1px solid #d6d6d6;
                    padding: 4px 5px 4px 5px;
					margin: 10px 0 0 0;
                    color: #7b7b7b;
					background: #fff;
                    
               }

               /*  ICONS FÃœR EINGABEFELDER   */

               .contactform #name {
                    background: #fff url(../images/user.jpg) no-repeat left;
               }
               .contactform #email {
                    background: #fff url(../images/mail.jpg) no-repeat left;
               }
               .contactform #site {
                    background: #fff url(../images/world.jpg) no-repeat left;
               }
               .contactform #feedback {
                    width: 86%;
                    background: #fff url(../images/comment.gif) no-repeat bottom right; 
               }
               .contactform #name,
               .contactform #email,
               .contactform #site 
               {
                    width: 80%;
                    padding: 5px 5px 5px 30px;
               }
               
               /* Hover-Zustände für jeweilige Eingabefelder */
              
               .contactform #name:hover,
               .contactform #email:hover,
               .contactform #site:hover,
               .contactform #feedback:hover {
                    background-color: #fff;
                    border: 1px solid #d6d6d6;
                    color: #7b7b7b;
               }

               .contactform #name:focus,
               .contactform #email:focus,
               .contactform #site:focus,
               .contactform #feedback:focus
               {
                    border: 1px solid #d6d6d6;
                    color: #7b7b7b;
                    background-color: #fff;
               }

               .contactform .wrong #email {
                    /* Gestaltung der Felder mit Fehlermeldungen */
                    background: #ffffff url(../images/warning.gif) no-repeat left;
                    -moz-border-radius: 3px;
                    color: #333333;
                    border: 1px solid #d6d6d6;
               }
               
               .contactform #erfolg {
                    /* Mitteilung: Informationen wurden versandt */
                    background: #fff url(../images/accept.gif) no-repeat left;
                    border: 1px solid #eeeeee;
                    color: #0066CC;
                    padding: 10px 10px 10px 30px;
                    -moz-border-radius: 3px;
                    width: 80%;
                    margin: 1.5em auto;
               }

/*	-------------------------------------------------------------
	ALLGEMEINE ATTRIBUTE
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
               h2 {
                    /* Ãœberschrift der Seite */
                    font-family: Verdana ,Arial, Helvetica, sans-serif;
                    font-weight: normal;
                    font-size: 4em; 
                    color: #7b7b7b;
               }
               span.required {
                    /* Markierung des Eingabefeldes, das ausgefüllt werden soll */
                    color: #ccc;
                    font-size: 14px;
					padding-left: 2px;
               }
               label {
                    /* Beschriftung des Eingabeldes */
                    color: #999;
                    padding: 2px 5px 2px 5px;
                    
                    /* Hintergrundfarbe + Abrundung 
                    background-color: #5ea4d7;
                    -moz-border-radius: 3px;*/
               }