/* -------------------------------------------------

                   Quick Metall

(C) 2008 brands emotion e.K.    www.brandsemotion.de

----------------------------------------------------

Layout Screen

------------------------------------------------- */


/* Seite zentriert ausgeben */
#seite {
	position: relative;
	left: 0px;
	top: 0px;
	width: 748px;
	margin: 0px auto; /* zentriert */
	padding: 0px;
}

/* Oben */
#oben, #obenStartseite {
  position: relative;
  width: 748px;
  height: 262px;
  margin: 0px;
  padding: 0px;
  background-image: url('../images/Hintergrund/ObenS.png')
}

#obenStartseite {
  height: 429px; /* 367px; */
}

/* Mitte */
#mitte {
  position: relative;
  width: 748px;
  margin: 0px;
  padding: 0px;
  background-image: url('../images/Hintergrund/MitteS.png')
}

/* Unten */
#unten {
  position: relative;
  width: 748px;
  height: 46px;
  margin: 0px;
  padding: 0px;
  background-image: url('../images/Hintergrund/UntenS.png');
  overflow: hidden;
}
  
/* Printinfos */
#print {
  position: relative;
  margin: 20px 0px 5px 38px;
  display: none;
}

    
/* --- Oben ----------------------------------------------- */

#verlaufOben {
  position: absolute;
  left: 4px;
  top: 0px;
  width: 740px;
  height: 88px;
  background-image: url('../images/Hintergrund/Oben.png');
}
  
#qmLogo {
  position: absolute;
  left: 39px;
  top: 10px;
  width: 37px;
  height: 60px;
  background-image: url('../images/QM.gif');
}
  
#qmSchriftzug {
  position: absolute;
  left: 84px;
  top: 33px;
  width: 127px;
  height: 18px;
  background-image: url('../images/Quick%20Metall.gif');
}

#topMenu {
  position: absolute;
  top: 0px;
  right: 4px;
  height: 37px;   
}
  
#sprache {
  position: relative;
  top: 10px;
  float: left;
  margin-right: 30px;
  text-align: right;  
}

#seit1 {
  position: relative;
  width: 18px;
  height: 37px;
  float: left;
  background-image: url('../images/Icons/seit1.png');
}

#seit2 {
  position: relative;
  height: 26px;
  float: left;
  padding: 11px 0 0 10px;
  background-image: url('../images/Icons/seit2.png');
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  color: White;
}

#seit3 {
  position: relative;
  height: 28px;
  float: left;
  padding: 9px 10px 0 5px;
  background-image: url('../images/Icons/seit2.png');
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16px;
  color: White;
}

#banner {
  position: absolute;
  top: 88px;
  left: 4px;
  width: 740px;
  height: 174px;
}
  
/* Schatten Oben */
#schattenLinksOben {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 4px;
  height: 4px;
  background-image: url('../images/Schatten/LinksOben.png');
  overflow: hidden;
}
  
#schattenRechtsOben {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 4px;
  height: 4px;
  background-image: url('../images/Schatten/RechtsOben.png');
  overflow: hidden;
}

#menu {
  position: absolute;
  top: 72px;
  right: 30px; 
  height: 26px;
  overflow: hidden;
}
 
#menu div.links {
  height: 26px;
  width: 3px;
  margin-left: 2px;
  background-image: url('../images/Menu/Links.gif');
  float: left;
  overflow: hidden;
}

#menu div.mitte {
  height: 26px;
  padding: 0px 6px;
  background-image: url('../images/Menu/Mitte.gif');
  float: left;
}

#menu div.rechts {
  height: 26px;
  width: 3px;
  background-image: url('../images/Menu/Rechts.gif');
  float: left;
}
  
/* --- Startseite oben ------------------------------------ */
  
#verlaufStartseite {
  position: absolute;
  left: 4px;
  top: 88px;
  width: 740px;
  height: 341px; /* 279px; */
  background-image: url('../images/Hintergrund/Startseite2.png');
}
 
/* Drei Grafiken */
#grafikProdukte, #grafikWerkstoffe, #grafikDienstleistungen {
  position: absolute;
  top: 125px;
  width: 220px;
  height: 151px;
}

#grafikProdukte {
  left: 36px;
}

#grafikWerkstoffe {
  left: 263px;
}

#grafikDienstleistungen {
  left: 490px;
}

/* Drei Buttons */
#buttonProdukte, #buttonWerkstoffe, #buttonDienstleistungen {
  position: absolute;
  top: 276px;
  width: 224px;
  height: 57px;
  background-image: url('../images/Startseite/Button.png');
}

#buttonProdukte {
  left: 34px;
}

#buttonWerkstoffe {
  left: 261px;
}

#buttonDienstleistungen {
  left: 488px;
}

#imageButtonProdukte {
  position: absolute;
  left: 5px;
  top: 7px;
  width: 53px;
  height: 41px;
  background-image: url('../images/Startseite/Gabelstapler.gif');
}
  
#imageButtonWerkstoffe {
  position: absolute;
  left: 12px;
  top: 7px;
  width: 28px;
  height: 41px;
  background-image: url('../images/Startseite/Notizblock.gif');
}

#imageButtonDienstleistungen {
  position: absolute;
  left: 13px;
  top: 10px;
  width: 34px;
  height: 41px;
  background-image: url('../images/Startseite/Schieblehre.gif');
}

#linkButtonProdukte, #linkButtonWerkstoffe, #linkButtonDienstleistungen {
  position: absolute;
  top: 12px;
  height: 25px;
}

#linkButtonProdukte {
  left: 69px;
}

#linkButtonWerkstoffe {
  left: 48px;
}

#linkButtonDienstleistungen {
  left: 60px;
}


/* Zwei Buttons darunter */
#buttonGewichtsrechner, #buttonLegierungszuschlaege {
  position: absolute;
  top: 348px;
  width: 339px;
  height: 65px;
  background-image: url('../images/Startseite/Button2.png');
}

#buttonGewichtsrechner {
    left: 31px;
}

#buttonLegierungszuschlaege 
{
    left: 376px;
}

/* --- Mitte ---------------------------------------------- */


/* Content Mitte */
#contentMitte {
  position: relative;
  padding: 25px 38px 10px 38px;
  margin: 0px;
}
    
#contentTitel {
  position: relative;
}

#contentTextInfobox {
  position: relative;
  padding-top: 10px;
}

#contentText {
  position: relative;
  width: 437px;
  border-right: 1px solid #c2ba61;
  padding: 0px 15px 0px 0px;
}

#contentInfobox {
  position: absolute;
  top: 10px;
  left: 475px;
  width: 200px;
}    

#contentFullscreenText {
  position: relative;
  padding-top: 10px;
}

#contentClear {
  clear: both;
  height: 20px;
  overflow: hidden;
}

div.contentBild {
  margin-top: 4em;
  margin-bottom: 0px;
  position: relative;
  width: 437px;
}

div.contentButton {
  position: relative;
  margin-top: 0px;
  width: 437px;
  height: 57px;
  background-image: url('../images/Startseite/Button437.png');
}


/* --- Unten ---------------------------------------------- */
  
/* Content Unten */  
#contentUnten {
  position: relative;
  left: 4px;
  top: 0px;
  width: 740px;
  height: 42px;
	padding: 1px 0px 0px 0px;
  margin: 0px;
  background-image: url('../images/Hintergrund/Unten.png');
} 
 
#menuUnten {
  position: relative;
  top: 13px;
  right: 30px;
  text-align: right;  
}
 
/* Schatten Unten */
#schattenLinksUnten {
  position: absolute;
  top: 38px;
  left: 0px;
  width: 4px;
  height: 8px;
  background-image: url('../images/Schatten/LinksUnten.png');
}
  
#schattenUntenLinks {
  position: absolute;
  top: 42px;
  left: 4px;
  width: 4px;
  height: 4px;
  background-image: url('../images/Schatten/UntenLinks.png');
}

#schattenUnten {
  position: absolute;
  top: 42px;
  left: 8px;
  width: 732px;
  height: 4px;
  background-image: url('../images/Schatten/Unten.png');
}

#schattenUntenRechts {
  position: absolute;
  top: 42px;
  right: 4px;
  width: 4px;
  height: 4px;
  background-image: url('../images/Schatten/UntenRechts.png');
}

#schattenRechtsUnten {
  position: absolute;
  top: 38px;
  right: 0px;
  width: 4px;
  height: 8px;
  background-image: url('../images/Schatten/RechtsUnten.png');
}