body {
/* um diese Werte saemtlicher block-Objekte neutral zu setzen */
margin: 0;
padding: 0;
/* fuer IE zur Zentrierung der Seite im Browser */
text-align: center;
background-color: #ffffff;
}




#Container {
width: 780px;
/* zur Zentrierung der Seite im Browser */
margin: 15px auto 0 auto;
/* zur Ausrichtung des Box-Inhaltes */
text-align: left;
background-image: url(industrie-montagen-hofmann-img-allgemein/hintergrund.jpg);
}




/* ----------------KOPF------------------ */

#Kopf {
width: 780px;
height: 65px;
text-align: left;
background-image: url(industrie-montagen-hofmann-img-allgemein/industrie-montagen-titel-oben.jpg);
background-repeat: no-repeat;
background-position: left top;
}

#Kopf img {
display: block;
/* Damit unter dem Bild kein Freiraum erscheint. */
/* Img ist ein inline-Element und wird wie Text behandelt. */
/* Also gibt es unter dem Img noch einen Freiraum (wie der Zeilenabstand). */
/* Dies kann man mit block aufheben, dann wird das Img zum block-element. */
margin-left: 625px;
}

/* float-Ojekte (auch block) sind aus dem normalen Fluss herausgenommen. */
/* text-align funktioniert hier nicht. Dies erzeugt man */
/* durch float right oder float left */
/* Nur bei Ihnen laesst sich margin-top verwenden. */
/* bei normalen Box-Objekten gibt es - bei margin-top - unschoene Luecken */
/* zum darueberliegenden Objekt. */
/* bei float-Objekten ohne Breitenbestimmung zaehlt die Breite */
/* des Inhalts (Texte, Bilder). */




/* ----------------NAVIGATION OBEN QUER------------------ */

#NavOben {
width: 780px;
height: 50px;
margin: 0;
background-color: #ffffff;
}

/* Will man fuer ul keine Aussenabstaende (margin), */
/* so sollte man diese - trotz body-Einstellung. */
/* gesondert auf 0 stellen */

#NavOben ul {
margin: 0 0 0 30px;
padding: 0px;
list-style-type: none;
}

/* Um eine Navigation nebeneinander auszurichten, */
/* muss man die li floaten. */
/* Da es im umschliessenden div-tag unter den */
/* gefloateten li kein weiteres Objekt gibt, */
/* kann man hier auf ein clear verzichten. */
/* Dies kommt erst am Ende des Kopf-div */
/* und gilt fuer alle Kopf-Objekte. */

#NavOben ul li {
float: left;
border-left: 1px solid #666666;
padding: 8px 20px 0 5px;
}

#NavOben ul li a {
text-decoration: none;
}

#NavOben ul li a:hover {
text-decoration: underline;
color: #000000;
}




/* ----------------NAVIGATION LINKS------------------ */

.AbstandNavLinks {
height: 20px;
background-color: #999999;
border-bottom: 1px solid #ffffff;
}

#NavigationLinks {
float: left;
width: 170px;
text-align: left;
background-color: #999999;
}

#NavigationLinks ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#NavigationLinks ul li {
text-align: left;
background-color: #999999;
border-bottom: 1px solid #ffffff;
}

/* Ohne display:block wuerde der hover-Effekt nur */
/* auf den Text in a angewendet, da a ein inline-Objekt ist. */
/* Fuer IE 5 + 6 muss in einer Weiche zusaetzlich die Breite */
/* des a-Objektes bestimmt werden, da die alten IE nur so */
/* einen hover-Effekt ueber die gesamte Breite der Nav ausfuehren. */
/* Ausserdem muessen noch unschoene 2-3 pix-Bugs zwischen den */
/* li ausgeglichen werden */

#NavigationLinks ul li a {
display: block;
padding: 10px 0px 10px 30px;
text-decoration: none;
}

#NavigationLinks ul li a:hover {
background-color: #666666;
}

#NavigationLinks p {
margin: 18px 0 0 30px;
letter-spacing: 0px;
}




/* ----------------INHALT GESAMT------------------ */

#InhaltGesamt {
float: left;
width: 570px;
margin-left: 40px;
text-align: left;
background-color: #ffffff;
}




/* ----------------INHALT OBEN------------------ */

.AbstandInhaltOben {
width: 100px;
height: 95px;
}

#InhaltOben {
width: 570px;
height: 195px;
text-align: left;
}

#InhaltOben h1 {
text-align: left;
margin: 0;
}

#InhaltOben p {
margin: 18px 0 0 0;
letter-spacing: 0;
}

#InhaltOben ul {
margin: 30px 0 0 0;
height: 122px;
width: 552px;
padding: 0px;
list-style-type: none;
border: 1px solid #666666;
background-color: #666666;
}

#InhaltOben ul li {
float: left;
padding: 10px 0px 10px 10px;
}

#InhaltOben img {
display: block;
border: 1px solid #ffffff;
}

#InhaltOben a:hover {
text-decoration: none;
}




/* ----------------INHALT Links------------------ */

#InhaltLinks {
float: left;
width: 262px;
text-align: left;
}

#InhaltLinks img.Erstes {
display: block;
border: 1px solid #ffffff;
}

#InhaltLinks h2 {
margin: 20px 0 0 0;
}

#InhaltLinks p {
margin: 18px 0 0 0;
}

#InhaltLinks a:hover {
text-decoration: none;
}

#InhaltLinks ul {
margin: 18px 0 0 15px;
padding: 0px;
}




/* ----------------INHALT RECHTS------------------ */

#InhaltRechts {
float: left;
width: 262px;
margin-left: 30px;
text-align: left;
}

#InhaltRechts img.Erstes {
display: block;
border: 1px solid #ffffff;
}

#InhaltRechts img.Projekt {
display: block;
float: left;
border: 1px solid #ffffff;
}

#InhaltRechts h2 {
margin: 20px 0 0 0;
}

#InhaltRechts p {
margin: 18px 0 0 0;
}

#InhaltRechts a:hover {
text-decoration: none;
}

#InhaltRechts ul {
margin: 18px 0 0 15px;
padding: 0px;
}




/* ----------------INHALT BILDERGALERIE------------------ */

#InhaltGalerie {
width: 570px;
text-align: left;
margin: 20px 0 0 0;
}

#InhaltGalerie h2 {
text-align: center;
padding: 5px 0 5px 0;
background-color: #999999;
margin: 0 0 20px 0;
}

#ButtonVor {
float: left;
text-align: left;
background-image: url(industrie-montagen-hofmann-galerie/vor.jpg);
background-repeat: no-repeat;
background-position: left top;
}

#ButtonVor :hover{
background-image: url(industrie-montagen-hofmann-galerie/vor-rot.jpg);
background-repeat: no-repeat;
background-position: left top;
cursor: pointer;
}

.carousel {
float: left;
text-align: left;
}

#ButtonZurueck {
float: left;
text-align: left;
background-image: url(industrie-montagen-hofmann-galerie/zurueck.jpg);
background-repeat: no-repeat;
background-position: left top;
}

#ButtonZurueck :hover{
background-image: url(industrie-montagen-hofmann-galerie/zurueck-rot.jpg);
background-repeat: no-repeat;
background-position: left top;
cursor: pointer;
}




/* ----------------INHALT LEISTUNGSSPEKTRUM------------------ */

#InhaltLeistungsspektrum {
width: 570px;
text-align: left;
}

#InhaltLeistungsspektrum p {
text-align: left;
margin: 20px 0 50px 292px;
}




/* ----------------INHALT START------------------ */

#InhaltStart {
width: 780px;
height: 335px;
text-align: left;
background-image: url(industrie-montagen-hofmann-img-allgemein/industrie-montagen-titel-unten.jpg);
background-repeat: no-repeat;
background-position: left top;
}

#InhaltStart h1 {
text-align: left;
margin: 0 0 0 28px;
letter-spacing: 0.05em;
line-height: 28px;
}




/* ----------------FUSS------------------ */

.AbstandFuss {
height: 40px;
}

/* Das clear im Fuss ist nur eine */
/* Sicherheitsmassnahme. */

#Fuss {
width: 610px;
margin-left: 170px;
text-align: center;
clear: both;
}

#Fuss p {
margin: 0;
letter-spacing: 0px;
}

#Fuss a {
text-decoration: underline;
}

#Fuss a:hover {
text-decoration: none;
}

#CopyRight {
width: 780px;
padding-top: 20px;
background-color: #ffffff;
}




/* ----------------FUSS_START------------------ */

.AbstandFussStart {
height: 20px;
background-color: #ffffff;
}

/* Das clear im Fuss ist nur eine */
/* Sicherheitsmassnahme. */

#FussStart {
width: 780px;
text-align: center;
background-color: #ffffff;
clear: both;
}

#FussStart p {
margin: 0;
letter-spacing: 0px;
}

#FussStart a {
text-decoration: underline;
}

#FussStart a:hover {
text-decoration: none;
}

#CopyRightStart {
text-align: right;
width: 780px;
padding-top: 10px;
background-color: #ffffff;
}