/*

#009 AURA Blau

#F33 AURA Rot

1E34C7     | A5CCFA     | FFFFFF für den BG-Verlauf
BonBonBlau   HimmelBlau   weißer geht's nicht

Goldener Schnitt würde bei ca. 61,8%

*/


/* START ############################################################################################################ */

html {

  height: 100%; /* Mozilla! */ /* plus @ body, #PageRAK ! */

  overflow-x: scroll;
  overflow-y: scroll;

}

body {

  background-image: url(/images/hintergrund-autoradio.png);
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-color: #FFF; /* Weiß */

  color: #4F4F4F; /* Hauptschriftfarbe */

  height: 100%; /* plus @ html, #PageRAK ! */

  margin: 0;
  padding: 0;

  font-family: Verdana, Geneva, sans-serif;

  /* font-size: 66%; */
  /* font-size: 69%; */
  font-size: 70%; /* max. Wert für "Schriftgröße +1 und Menü (noch) einzeilig" */
  /* line-height: 1.2em; */

  text-align: center; /* plus @ #PageRAK "margin: 0 auto;" */

  cursor: auto;

}


/* MAIN CONTAINER ################################################################################################### */

#PageRAK {

  /* keine Farbe für background hier angeben! */

  width: 1160px; /* 960 Page + 40 Space + 160 Banner, siehe auch #Banner und #BottomAds */
  height: 100%; /* plus @ html, body ! */

  margin: 0 auto; /* plus @ body "text-align: center;" */
  padding: 0; /* für letzten Container immer am Window Bottom! */

  text-align: left;

}

#HeadRAK {

  width: 960px;

  /* Min-Height Hack */
  /* RAKOFF
  min-height: 150px;
  height: auto !important;
  height: 150px;
  */

  padding-top: 0;

  /* clear: both; */
  float: left; /* wichtig für alte Browser: eine width angeben! */

}

#LogoRAK {
  /* border-top: 0.1em solid #4A61AD; */
  background: url(/images/moodpics/autoradio-hamburg-bergedorf-homepage.jpg); /* PreLoad Homepage MainPic */
  background: url(/images/moodpics/autoradio-hamburg-bergedorf-homepage_xmas.jpg); /* PreLoad Homepage MainPic */
  background: url(/images/logo/logo-autohifi-bergedorf.jpg);
  background-repeat: no-repeat;
  background-position: 0 0; /* links oben */
  background-color: #1E34C7;
  width: 960px;
  height: 300px; /* plus @ #LogoRAK img */
  overflow: hidden;
  clear: both;
  float: left; /* wichtig für alte Browser: eine width angeben! */
}
#LogoRAK img {
  padding: 0;
  width: 960px; /* Bereich des Logos wegen "Startseite"-Link */
  height: 300px; /* plus @ #LogoRAK */
}

#BasketItemsCount {
  padding-right: 20px;
  white-space: nowrap;
  width: 40em;
  position: relative;
  top: -32px;
  z-index: 2;
  float: right;
}
#BasketItemsCount p {
  color: A5CCFA; /* HimmelBlau */
  font-size: 1.2em;
  font-weight: bold;
  text-align: right;
}
#BasketItemsCount p a.piclink:hover {
  border-bottom: 0.1em solid #000 !important;
  text-decoration: none;
}
/* warenkorb.gif */
#BasketItemsCount img {
  width: 93px;
  height: 18px;
}


.eContRAK {
  /* background-color: #FFF; */ /* Weiß */
  width: 960px;
  float: left; /* wichtig für alte Browser: eine width angeben! */
}
.eContRAK.M1 {
  height: 1em;
}
.eContRAK.M2 {
  height: 2em;
}
.eContRAK.M3 {
  height: 3em;
}
#HeadRAK div.eContRAK.M3 {
  background-image: url(/images/rand-autoradios-bergedorf.gif);
  background-repeat: repeat-y;
  background-color: #FFF; /* Weiß */
}
.eContRAK.P1 {
  height: 10px;
}
.eContRAK.P2 {
  height: 20px;
}
.eContRAK.P3 {
  height: 30px;
}

.eContRAK.P5 {
  background-image: url(/images/bottom-autoradio-hamburg.png);
  background-repeat: no-repeat;
  background-position: top;
  background-color: transparent;
  height: 50px;
}
/* Star-HTML-Hack: IEn bis IE6 */
* html .eContRAK.P5 {
  background-image: url(/images/bottom-autoradio-hamburg.gif) !important;
}

#W3CValidator, #BottomAds, #SocialBookmarking {
}
#AntiCache {
  clear: both;
}

#MainNaviRAK, #ContentRAK, #FootHeadRAK, #FootRAK, #W3CValidator, #BottomAds, #OrderOK, #SocialBookmarking {
  width: 960px;
  margin: 0;
  padding: 0;
  float: left; /* wichtig für alte Browser: eine width angeben! */
}

#MainNaviRAK {
  /* background-image: url(/images/hintergrund-navigation.png);
  background-repeat: repeat-y;
  background-color: #006; */
  background: #009;
  /* padding-bottom: 0.1em; */
  position: relative; /* WICHTIG bei Vergrößerungen für den korrekten Float!!! */
  z-index: 10; /* wichtig für z-index der Subs (zZt.: = 20), damit diese über dem Content liegen können bzw. siehe IE Bug z-index */
}

#ContentRAK {
  background-image: url(/images/rand-autoradios-bergedorf.gif);
  background-repeat: repeat-y;
  background-color: #FFF; /* Weiß */
  padding: 1em 0 1em 0;
}

#FootHeadRAK {
  background-image: url(/images/rand-autoradios-bergedorf.gif);
  background-repeat: repeat-y;
  background-color: #FFF; /* Weiß */
  margin: 0;
  padding: 0;
}
#FootHeadRAK img {
  /* padding: 20px;
  position: relative;
  top: 10px; */
  /* left: 20px; */
  height: 20px;
}
#FootHeadRAK img.fhic1 {
  /* left: 155px; */
}
#FootRAK {
  background-image: url(/images/hintergrund-mobiltelefon.png);
  background-repeat: repeat-x;
  background-color: #009;
  /* border-top: 0.1em solid #CCC; */
  /* border-bottom: 0.1em solid #CCC; */
}
/*
#FootHeadRAK, #FootRAK {
  padding: 0 0 0.5em 0;
}
*/
#FootHeadRAK {
  padding: 0 0 0.5em 0;
}


#BottomAds {
  position: relative;
  top: 0;
}
#BottomAds p {
  color: #4F4F4F;
  font-size: 0.8em;
  line-height: 1.25em;
  /* padding-right: 200px; */ /* Space 40 + Banner 160 verderben den Centerpunkt, siehe auch #PageRAK und #Banner */
  text-align: center;
  /* clear: both; */
}

#Banner {
  /* siehe auch #PageRAK und #BottomAds */
  width: 160px;
  margin: 0;
  padding: 0 40px 0 0;
  float: left;   /* wichtig für alte Browser: eine width angeben! */
  /* position: fixed;
  z-index: -1; */
  position: relative;
}


#Debugger {

  background: #000;
  color: #FFF;

  display: none;

  /* Center Hack */
  left: 50%;
  margin: 0 0 0 -440px; /* Hälfte der Breite */
  padding: 10px;

  text-align: center;

  position: absolute;
  width: 860px;
  top: 20px;

  z-index: 999;

  -moz-opacity: .7; /* Mozilla alt */
  -khtml-opacity: .7; /* Safari alt und Konqueror alt */
  filter: Alpha(opacity=70, finishopacity=0, style=0); /* IE */
  opacity: .7; /* Mozilla neu */

}
#Debugger h1 {
  color: #FFF;
  font-size: 2em;
}
#Debugger span {
  color: #F00;
  font-size: 1.5em;
  font-weight: bold;
}

#W3CValidator p, #SocialBookmarking p {
  text-align: center;
}

#divtext {
  width: 960px;
  margin: 0 0 0 -1060px;
}
#divtext h1, #divtext p {
  /* color: #FFF; */
  color: #DDD;
}


#oeffnungszeiten {

  background-image: url(/images/hintergrund-oeffnungszeiten-autohifi-bergedorf.png);
  background-repeat: no-repeat;
  background-position: 3.2em 25%; /* link oben */
  /* background-color: #f7f7f7; */
  background-color: #FFF;

  width: 46em;

  margin: 0 0 3em 4em !important;
  padding: 0 0 0 0 !important;

  float: right !important;
}
#oeffnungszeiten div {

  margin: 0 !important;
  padding: 0 0 0.2em 0 !important;

  width: 46em;

  float: right !important;

}
#oeffnungszeiten div p {

  /* border: 0.1em solid #bababa; */
  border: 0.1em solid #CCC;

  text-align: center;

  white-space: nowrap;

  margin: 0 0 0.1em 0.3em  !important;
  padding: 1em !important;

  width: 10em;
  /* height: 1em; */

  float: right;

}


/* CONTENT CONTAINER ################################################################################################ */

#letterhead {
  display: none;
}

#PageContent, #myBasket, #myCheckOut, #myConfirmation {
  width: 920px;
  padding: 0 20px;
}
#PageContent #HomePage div, #PageContent div.NormCont div, #PageContent #Geschichte {
  padding: 0 20px;
}
#PageContent div.NormCont.Full div {
  margin: 0 140px;
}
#PageContent a {
  white-space: nowrap;
}

#HomePage div, .NormCont div {
  width: 460px;
  float: left; /* wichtig für alte Browser: eine width angeben! */
}
.NormCont.Wide div {
  width: 560px;
}
.NormCont.Maximum div {
  width: 870px;
}
.NormCont.Full div {
  width: 600px;
}
#noGoRAK, #MaintenanceRAK {
  width: 920px;
}
#Geschichte {
  width: 920px;
  float: left; /* wichtig für alte Browser: eine width angeben! */
}
#Geschichte h2 {
  font-size: 1.1em;
  line-height: 1.3em;
  padding: 0 0 1em 0;
  clear: both;
}
#HomePage div p, .NormCont div p, #noGoRAK div p, #MaintenanceRAK div p, #Geschichte p {
  color: #4F4F4F;
  font-size: 1.2em;
  line-height: 1.4em;
  /* text-align: justify; */
  padding: 0 0 2em 0;
}
#Geschichte div {
  width: 920px; /* wichtig für img float rechts bei kleiner Schrift! */
  clear: both;
  float: left;
}
#Geschichte p {
  text-align: justify;
  width: 540px;
  float: left; /* wichtig für alte Browser: eine width angeben! */
}

#HomePage img {
  position: relative;
  right: 40px;
  width: auto;
  float: right;
  top: 2em; /* s. auch in 1.php wegen XMAS */
}
.NormCont span {
  width: 280px;
  float: right;
}
.NormCont span img {
  width: 280px;
  height: 170px;
  float: right; /* ### Test ### */
}
#Geschichte img {
  /* border: 0.1em solid #CCC; */
  /* margin:  0.4em 40px 20px 100px; */
  /* padding: 0.4em 40px 1.6em 140px; */
  margin: 0.4em 20px;
  width: 200px;
  float: right; /* wichtig für alte Browser: eine width angeben! */
}

.NormCont span img, #Geschichte img {
  padding-bottom: 4em;
  position: relative;
  right: 40px;
}
.NormCont.Maximum img {
  width: auto;
  height: auto;
  /* padding: 7px 0 3em 4em; */
  padding: 0 0 3em 4em;
  float: right;
}

#noGoRAK, #MaintenanceRAK {
  padding-bottom: 2em;
}

#noGoRAK div div, #MaintenanceRAK div div {
  height: 180px;
}

#myBasket h1 {
  background-color: #FFE0EE; /* SM Rosa */
  text-align: center;
  padding: 0.2em 0.5em;
  width: 520px;
  overflow: hidden;
  position: relative;
  left: 200px;
}
#myBasket h1 b {
  border: 0.1em dotted #C71585; /* MediumVioletRed */
  font-weight: normal;
  padding: 0.1em 0.2em;
}
#myBasket h2, #myCheckOut h2, #myConfirmation h2 {
  color: #C71585; /* MediumVioletRed */
  font-size: 1.3em;
  font-weight: normal;
  line-height: 1.5em;
  padding: 2em 0 1em 0;
  clear: both;
}
#myBasketHEADER h2 {
  padding: 0 0 1em 0;
}

#myBasketHEADER, div.myBasketItems, div.myBasketSUM, div.myBasketColAll, div.myBasketColLine, div.myBasketColLine2, div.myBasketColLine3 {
  width: 920px;
  clear: both;
  float: left;
}
/* 920px maximale Breite: */
div.myBasketCol1 { text-align: center; width: 150px; }
div.myBasketCol2 { text-align: center; width: 100px; }
div.myBasketCol3 { text-align: left;   width: 150px; }
div.myBasketCol4 { text-align: center; width: 150px; }
div.myBasketCol5 { text-align: center; width: 150px; }
div.myBasketCol6 { text-align: center; width: 67px; }
div.myBasketCol6Image { text-align: left; width: 33px; }
div.myBasketCol7 { text-align: right;  width: 100px; }
div.myOrderStatus1 { background: #FFF; line-height: 1.5em; padding: 1.8em 0 1.5em 0; overflow: hidden; float: left; }
div.myOrderStatus2,
div.myOrderStatus3 { background: #FFF; line-height: 1.5em; padding: 0.8em 0 0.5em 0; overflow: hidden; float: left; }
/*  Trennlinie */
div.myBasketColAll {
  text-align: center;
  padding: 0 0 0.5em 0;
}
div.myBasketColLine, div.myBasketColLine2, div.myBasketColLine3 {
  height: 1px;
  overflow: hidden;
}
div.myBasketColLine {
  border-bottom: 0.1em dotted #CCC;
}
div.myBasketColLine2 {
  border-bottom: 0.1em solid #CCC;
}
div.myBasketColLine3 {
  border-bottom: 0.2em solid #CCC;
}
#myBasket p {
  line-height: 1.5em;
}
#myBasketHEADER div p, div.myBasketSUM div p {
  font-weight: bold;
  height: auto;
}
div.myBasketSUM div.myBasketColAll p, #myCheckOut p.ColCheckOut, #myConfirmation p.ColConfirmation {
  color: #4F4F4F;
  font-size: 0.95em;
  font-weight: normal;
  padding: 1em 0 0 0;
  height: auto;
  clear: both;
}
div.myBasketSUM div.myBasketColAll p {
  padding: 0;
}

#myCheckOut p.ColCheckOut, #myConfirmation p.ColConfirmation {
  line-height: 1.2em;
  width: 50em;
}

div.myBasketSUM b, #myCheckOut b {
  color: #000;
  font-size: 1.2em;
  font-weight: bold;
}

div.myOrderStatus1 p {
  padding: 0;
  height: 120px; /* Bild 100 x 100 plus Reflection 20 plus Rand  ! */
  overflow: hidden;
}
div.myOrderStatus2 p, div.myOrderStatus3 p {
  padding: 0;
  overflow: hidden;
}
#myBasketHEADER p, div.myBasketItems p, div.myBasketSUM p, #myConfirmation p.Confirmation {
  color: #4F4F4F;
  font-size: 1.1em;
  overflow: hidden;
}
#myConfirmation p.Confirmation {
  width: 460px;
  line-height: 1.5em;
}
div.myBasketOptions {
  width: 920px;
  padding: 1em 0 0.5em 0;
  clear: both;
  float: left;
}
div.myBasketOptions p {
  padding: 0.5em 0 0 0;
  float: left;
}
div.myBasketOptions a {
  padding: 0.5em 0 0 0;
  clear: both;
  float: right;
}
#myCheckOut {
  background: url(/images/shopping-girl.jpg);
  background-repeat: no-repeat;
  background-position: 520px 70px; /* rechts oben */
  height: 75em;
  clear: both;
}
#myConfirmation {
  height: 52em;
  clear: both;
}
#CustomerData form div.field_row, #Confirmation form div.field_row {
  height: 3em;
  overflow: hidden;
}
#CustomerData form div.field_row label, #Confirmation form div.field_row label {
  border: 0.1em solid #FFF;
  display: inline;
  color: #4F4F4F;
  font-size: 1.1em;
  line-height: 1.3em; /* wichtig u.a. wegen IE und AGB-Link bei Bestätigung */
  vertical-align: middle;
  padding: 0.2em 0;
  float: left;
  overflow: hidden;
}
#CustomerData form div.field_row label {
  width: 12em;
}
#Confirmation form div.field_row label {
  width: 7em;
}
#CustomerData form div.field_row input, #CustomerData form div.field_row textarea,
#Confirmation form div.field_row input, #Confirmation form div.field_row textarea {
  background: transparent;
  border: 0.1em dotted #CCC;
  color: #4F4F4F;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1em;
  vertical-align: middle;
  padding: 0.2em;
  width: 24em;
  float: left;
}
#CustomerData form div.text_area,
#Confirmation form div.text_area {
  height: 7em;
}
#CustomerData form div.field_row textarea,
#Confirmation form div.field_row textarea {
  height: 6em;
}
#CustomerData form div.field_row input, #Confirmation form div.field_row input {
  vertical-align: middle;
  overflow: hidden;
}
/* FF etc. und IE mit eigener Klasse "radio" */
#CustomerData form div.field_row input[type="radio"], #CustomerData form div.field_row input.radio,
#Confirmation form div.field_row input[type="radio"], #Confirmation form div.field_row input.radio {
  background: transparent;
  border: none;
  font-size: 1.2em;
  vertical-align: middle;
  width: 2em;
}
#CustomerData form div.fit_radio, #Confirmation form div.fit_radio {
  height: 2em;
  overflow: hidden;
}
/* FF etc. und IE mit eigener Klasse "checkbox" */
#CustomerData form div.field_row input[type="checkbox"], #CustomerData form div.field_row input.checkbox,
#Confirmation form div.field_row input[type="checkbox"], #Confirmation form div.field_row input.checkbox {
  background: transparent;
  border: none;
  font-size: 1.2em;
  vertical-align: middle;
  width: 2em;
}
#CustomerData form div.fit_checkbox, #Confirmation form div.fit_checkbox {
  height: 2em;
  overflow: hidden;
}
#CustomerCol1, #CustomerCol2, #CustomerCol3 {
  padding: 1em 0;
  float: left;
}
#CustomerCol1 {
  margin: 0 20px 0 0;
  width: 400px;
  overflow: hidden;
}
#CustomerCol2 {
  margin: 0 20px 0 0;
  width: 300px;
  overflow: hidden;
}
#CustomerCol3 {
  width: 180px;
  overflow: hidden;
}


#noGoRAK, #MaintenanceRAK, #FootRAK, #OrderOK {
  text-align: center; /* plus @ #FootNaviRAK und reflection.js zu der (auch notwendigen) "width :" kommt dort "margin: 0px auto;" und "text-align: left;" */
}


#ArtText, #ArtImgs {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#ArtText {
  width: 380px;
  padding-left: 20px;
  float: left;
}

#ArtImgs {
  width: 460px;
  padding-right: 35px;
  padding-bottom: 0;
  float: right;
  text-align: center;
}

#ArtThumbs {
  width: 960px;
  padding: 0 20px;
  text-align: left;
  float: left;
}


#ImgFront img {
  /* border: 0.1em solid #CCC;
  padding: 20px; */
}
#ImgMidLoading {
  display: none;
  border: none;
  position: absolute;
  z-index: 2;
  -moz-opacity: .8; /* Mozilla alt */
  -khtml-opacity: .8; /* Safari alt und Konqueror alt */
  filter: Alpha(opacity=80, finishopacity=0, style=0); /* IE */
  opacity: .8; /* Mozilla neu */
}
#ImgMidSize {
  border: 0.1em solid #CCC;
  padding: 20px;
  cursor: help;
}
#ImgMid p {
}
#ImgBigBackground {

  background: #FFF;

  display: none;

  width: 100%;

  margin: 0;
  padding: 0;

  position: absolute;
  top: 0;
  left: 0;

  z-index: 2;

  /* bei HimmelBlau: 40/.4/.4 */
  /* bei #000:      50/.5/.5 */
  /* bei #FFF:      70/.7/.7 */
  -moz-opacity: .7; /* Mozilla alt */
  -khtml-opacity: .7; /* Safari alt und Konqueror alt */
  filter: Alpha(opacity=70, finishopacity=0, style=0); /* IE */
  opacity: .7; /* Mozilla neu */

}
#ImgBig {

  display: none;
  border: 0.2em solid #CCC;
  background: #FFF;

  /* Center Hack */
  left: 50%;
  margin: 0 0 0 -400px; /* Hälfte der ImgBig StandardBreite 800px x 800px | wird alles in der js geändert per toggle ! */
  padding: 10px 30px;

  text-align: center;

  position: absolute;
  top: 20px;

  z-index: 3;

}
#ImgBig p {
  white-space: nowrap;
}
#ImgBig img {
  border: none;
}
#ImgBigSize {
  /* cursor: url(/images/mouse2mouse.ani), url(/images/mouse2mouse.gif), auto; */
}
#ImgBig p.ImgBigBottom {
  padding: 1.5em 0 1em 0;
}
#ImgOther img {
  border: 0.1em solid #CCC;
  margin-left: 4px;
  margin-right: 3px;
  padding: 0;
}
#ImgOther p {
  padding-bottom: 0;
}


#Geschichte .Img17000Background {

  display: none;

  background: #003;

  margin: 0;
  padding: 0;

  position: absolute;
  top: 0;
  left: 0;
  width: 2560px !important; /* max. mögliche Breite bei 30" TFT */
  /* height: 25600px !important; */
  /* height: 9413px !important; */ /* Beim IE7 sind maximal 9413px möglich! Sonst gibt es bei einigen gezzomten Pics keine Transparenz beim Background!?! */
  height: 800em;

  z-index: 32;

  /* bei HimmelBlau: 40/.4/.4 */
  /* bei #000:      50/.5/.5 */
  /* bei #FFF:      70/.7/.7 */
  -moz-opacity: .7; /* Mozilla alt */
  -khtml-opacity: .7; /* Safari alt und Konqueror alt */
  /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70, FinishOpacity=0, Style=0)"; */ /* IE 8 (muss vor IE bis 7 stehen) | wegen Problemen siehe meta-tag IE8=IE7 */
  filter: Alpha(opacity=70, finishopacity=0, style=0) !important; /* IE bis 7 */
  opacity: .7; /* Mozilla neu */

}
#Geschichte .Img17000 {

  display: none;

  border: 0.2em solid #CCC;
  background: #FFF;

  /* Center Hack */
  /* left: 50%;
  margin: 0 0 0 -324px; */ /* ca. Hälfte der Img17000 StandardBreite 660px | wird alles in der js geändert per toggle ! */

  padding: 10px 20px;

  /* text-align: center !important; */

  width: 600px !important;
  /* height: 1000px; */
  height: auto;

  /* position: relative;
  top: -340px; */

  /* position: relative; */
  position: absolute;

  /* top: 0;
  left: 0; */

  /* top: 10%; */

  /* Center Hack */
  left: 50%;
  margin: 0 0 0 -323px; /* ca. Hälfte der Img17000 StandardBreite 640px | wird alles in der js geändert per toggle ! */

  z-index: 33;

}
#Geschichte .Img17000 p {

  font-size: 1em;

  text-align: center;

  margin: 0;
  padding: 0.8em 0 2em 0;
  /* white-space: nowrap; */

  width: 100%;
  height: auto;

  /* position: static;
  float: none; */
}
#Geschichte .Img17000 img {
  border: none;

  margin: 0 auto !important; /* plus @ #Img17000 "text-align: center;" oder nicht ?! */
  text-align: left !important;

  padding-bottom: 0;

  width: 600px;

  position: static;
  right: 0px !important;
  float: none;
}
#Geschichte .Img17000 p.Img17000Bottom {
  padding: 2em 0 0.8em 0;
}


#ArticlePrice {
  width: 90px;
  height: auto;
  margin: 0;
  padding: 1em 0 1em 0;
  overflow: hidden;
  float: left; /* wichtig für alte Browser: eine width angeben! */
}

#ArtText p.CostsInfo, #myBasket p.CostsInfo {
  font-size: 1em;
  font-weight: normal;
}
#myBasket p.CostsInfo {
  text-align: right;
}
#ArtText p.CostsInfo a:hover, #myBasket p.CostsInfo a:hover {
  border: none;
  cursor: help;
}
p.CostsInfo a:hover span {
  display: block;
}
p.CostsInfo a span {
  display: none;
  border: 0.2em solid #CCC;
  background: #FFF;
  color: #4F4F4F;
  font-weight: normal;
  text-align: left;
  margin-top: -20em;
  padding: 2em;
  width: 30%;
  overflow: hidden;
  position: absolute;
  left: 25%;
  z-index: 11;

  -moz-opacity: .9; /* Mozilla alt */
  -khtml-opacity: .9; /* Safari alt und Konqueror alt */
  filter: Alpha(opacity=90, finishopacity=0, style=0); /* IE */
  opacity: .9; /* Mozilla neu */
}
#ArtText p.CostsInfo a span b, #myBasket p.CostsInfo a span b {
  color: #4F4F4F;
  font-size: 1em;
}

#ProductSizeChoice {
  width: auto;
  height: auto;
  margin: 0;
  padding: 1em 5px 1em 5px;
  text-align: center;
  overflow: visible;
  float: left; /* wichtig für alte Browser: eine width angeben! */
}
#FactoryLogo {
  width: auto;
  height: auto;
  margin: 0;
  padding: 1em 0;
  text-align: center;
  overflow: hidden;
  float: right; /* wichtig für alte Browser: eine width angeben! */
}
#Add2Basket {
  clear: both;
}

#ArtText.p19002 #FactoryLogo {
  padding: 1em 35px 0 0;
  float: right; /* wichtig für alte Browser: eine width angeben! */
}
#FactoryLogo.noActiveProductSizeChoice {
  padding-right: 80px;
}


div.ProductThumb {
  color: #999;
  font-size: 1em;
  font-weight: normal;
  width: 300px;
  /* height: 26em; */ /* nun als style bei der class im php */
  padding: 4em 0 0 0;
  text-align: left; /* wenn nicht exakt wie hier, dann wegen reflection.js: center */
  overflow: hidden; /* !!! sonst wegen reflection.js zu hohe DIVs (speziell beim IE 6) !!! */
  float: left; /* wichtig für alte Browser: eine width angeben! */
}
div.ProductThumbImage {
  text-align: center;
}
div.ProductThumb img {
  padding-bottom: 0;
}
div.ProductThumb h2 {
  font-size: 1em !important;
  font-weight: normal !important;
  height: 1em; /* Höhe angeben wegen IE7 Bug (unten beim "h2 a:hover") !!! */
  padding: 1em 0 0.4em 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden; /* !!! sonst Überschneidung mit h3 beim Vergrößern! */
}
div.ProductThumb h3 {
  font-size: 1em !important;
  font-weight: normal !important;
  height: 1em; /* Höhe angeben wegen IE7 Bug (weiter unten beim "h3 a:hover") !!! */
  padding: 0 0 0.4em 0;
  text-align: center;
}
div.ProductThumb h3.soldout {
  background: #CA0000; /* WarnRot */
  color: #FFF;
  font-weight: bold !important;
  margin: 0 80px;
  padding: 0.1em 0 0.3em 0;
}
div.ProductThumb h2 a {
  color: #999;
}
div.ProductThumb h2 a:hover {
  background: #999;
  color: #FFF;
}

#ProductCrossSelling {
  width: 360px;
  padding: 0.5em 0 2em 0;
  text-align: left;
  clear: both;
  float: left;
}
#ProductCrossSelling h3 {
  padding-top: 1.2em;
}
#ProductCrossSelling p {
  padding: 0 0 1.2em 0;
}
#ProductCrossSellingImage {
  width: 100px;
  height: 120px;
  margin-right: 9px;
  text-align: left;
}
#ProductCrossSelling img {
  border: none;
  padding: 0;
}


#HistoryBack {
  width: 360px;
  padding: 0.4em 0;
  clear: both;
  float: left;
}


#FootNaviRAK, #FootInfoRAK {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#FootNaviRAK {
  width: 47%;
  padding: 0 0.5em 0 20px;
  text-align: right;
  clear: both;
  float: left; /* wichtig für alte Browser: eine width angeben! */
}

#FootInfoRAK {
  width: 43%;
  padding: 0 20px 0 0.5em;
  text-align: left;
  float: left; /* wichtig für alte Browser: eine width angeben! */
}


#W3CValidator {
  background-color: transparent;
}


/* Standards ######################################################################################################## */

p, img, ul {
  border: none;
  margin: 0;
  padding: 0;
}

p {
  padding: 0 0 0.5em 0;
}

h1, h2, h3 {
  border: none;
  margin: 0;
}

h1 {
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1.6em;
  padding: 0 0 1em 0;
}

h2 {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.4em;
  padding: 0 0 1em 0;
}

h3 {
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.3em;
  padding: 0 0 1em 0;
}

/* Links ############################################################################################################ */


a {
  border: none;
  color: #00F;
  text-decoration: none;
  white-space: nowrap;
}

a.txtlink:hover,
div.ProductThumb h3 a:hover,
 p a:hover,
#ArtThumbs p a:hover,
#ArtImgs p a:hover,
#ProductCrossSelling p a:hover,
#HistoryBack p a:hover,
#Aktuell p a:hover,
#CustomerCol3 label a:hover {
  border-bottom: 0.1em solid #00F !important;
  text-decoration: none;
}

#ArtThumbs a.wandelbar:hover,
#ArtText a.wandelbar:hover,
#Impressum a.wandelbar:hover {
  border-bottom: 0.2em solid #C71585 !important; /* MediumVioletRed */
  text-decoration: none;
}

#ContentRAK div.myOrderStatus1 p a:hover,
p.emptycart a:hover,
#AGB p.textcenter a:hover,
#W3CValidator p a:hover {
  border: none !important;
}

a.confidential {
  color: #FFF;
  text-decoration: none;
  border: none !important;
  cursor: default;
}


/* Standards Speziell ############################################################################################### */


.wandelbar {
  border-bottom: 0.1em solid #C71585 !important; /* MediumVioletRed */
  color: #C71585; /* MediumVioletRed */
  text-decoration: none;
}
#ArtText.p19002 h2, b.wandelbar {
  border: none !important;
  color: #C71585; /* MediumVioletRed */
}


p.ProductClaim {
  color: A5CCFA; /* HimmelBlau */
  font-size: 1.1em;
  line-height: 1.4em;
  padding-top: 0.5em;
  padding-bottom: 0.4em;
  clear: both;
}

div.myBasketItems div.myBasketColAll p.emptycart {
  font-size: 1.4em !important;
}

#AntiCache, #MainNaviRAK h1, #FootNaviRAK h1 {
  display: none;
}

#ArtText h1, #ArtText h2 {
  font-weight: normal;
  padding: 0 0 0.8em 0;
}
#ArtText h3 {
  padding: 0.8em 0;
}
#ArtText p {
  line-height: 1.3em;
}


#ArtThumbs h1 {
  /* color: #00C0EB; */ /* GABS hell */
  color: #999;
  /* font-size: 1.3em; */
  font-size: 1.4em;
  /* font-weight: bold; */
  font-weight: normal !important;
  line-height: 1.5em;
  padding: 0.2em 0 0.8em 0;
  clear: both;
}
#ArtThumbs h2 {
  /* color: #A5CCFA; */ /* HimmelBlau */
  color: #999;
  font-size: 1.2em;
  font-weight: normal;
  line-height: 1.5em;
  padding: 0 0 0.8em 0;
  clear: both;
}
#ArtThumbs p {
  font-size: 1em;
  font-weight: normal;
  line-height: 0.1em;
  padding: 0 0 0.8em 0;
  clear: both;
}

#ProductSizing select, #ProductSizing select option {
  border-bottom: 0.1em solid #FFE0EE; /* SM Rosa */
  background: #FFE0EE; /* SM Rosa */
  color: #4F4F4F;
  font-size: 1em;
  font-weight: normal;
}

#ArtImgs p {
  color: #999;
  padding: 0.8em 0 2.4em 0.5em;
}


.M1top {
  padding-top: 1em;
}
.M2top {
  padding-top: 2em;
}
.M3top {
  padding-top: 3em;
}
.M1right {
  padding-right: 1em;
}
.M2right {
  padding-right: 2em;
}
.M3right {
  padding-right: 3em;
}
.M1bottom {
  padding-bottom: 1em;
}
.M2bottom {
  padding-bottom: 2em;
}
.M3bottom {
  padding-bottom: 3em;
}
.M1left {
  padding-left: 1em;
}
.M2left {
  padding-left: 2em;
}
.M3left {
  padding-left: 3em;
}

#PageContent a.nounderline {
  color: #4F4F4F !important; /* HauptSchriftFarbe */
  border-bottom: none !important;
  text-decoration: none !important;
}
#PageContent a.nopointer {
  cursor: text !important;
}
#PageContent a.nounderline:hover {
  color: #4F4F4F; /* HauptSchriftFarbe */
  border-bottom: none !important;
  text-decoration: none !mportant;
}

/* MAINNAVI SUBNAVI FOOTNAVI ######################################################################################## */

#MainNaviRAK ul {
  /* background-image: url(/images/hintergrund-navigation.png);
  background-repeat: repeat-y;
  background-color: #006; */ /* Background/Rahmen hinter/um MainNavi Kategorien */
  background-color: #009;
  list-style: none;
  /* padding: 0.2em 20px 0.2em 20px; */
  /* padding: 0.1em; */
  /* padding: 0.1em 0.1em 0 0.1em; */
  width: auto;
  /* KEINE height !!!, sonst läuft Höhe nicht mit beim Vergrößern... */
  float: left; /* wichtig für alte Browser: eine width angeben! */
}

/* ### Main Navi #################################################################################################### */

#MainNaviRAK ul li {
  background: #006; /* Trennstriche zwischen MainNavi Kategorien */
  /* margin: 0 0.2em 0 0; */
  /* padding: 0.1em; */
  padding: 0 0.1em;
  width: auto;
  height: 3em;
  float: left; /* wichtig für alte Browser: eine width angeben! */
  white-space: nowrap;
  display: inline;
}

#MainNaviRAK ul li a {
  background-image: url(/images/mainnavi_normal.gif);
  background-repeat: repeat-x;
  background-position: 0 -2px;
  background-color: #009; /* AURA Blau Hintergrund MainNavi Kategorie, nur sichtbar wenn URL nicht da/ladbar */
  color: #FFF;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.2em;
  line-height: 2em;
  padding: 0.2em 0.8em;
  /* text-transform: uppercase; */
  display: block;
}

#MainNaviRAK ul li.active a {
  background-image: url(/images/mainnavi_active.gif);
  background-repeat: repeat-x;
  background-position: 0 -2px;
  background-color: #1010BD; /* Hintergrund MainNavi Kategorie active, nur sichtbar wenn URL nicht da/ladbar */
}

#MainNaviRAK ul li a:hover {
  text-decoration: underline;
}
#MainNaviRAK ul li.no1st a:hover {
  text-decoration: none;
  cursor: default;

  /* Gecko-based, Mozilla */
  -moz-user-select:none;
  /* Safari */
  -khtml-user-select: none;

}

/* ### Sub 1 Navi ################################################################################################### */

#MainNaviRAK ul li:hover ul,
#MainNaviRAK ul li.hover ul {
  display: block;
}

#MainNaviRAK ul li ul {
  /* border-top: 0.2em solid #006;
  border-bottom: 0.1em solid #006; */
  border: 0.2em solid #006;
  background: #009; /* AURA Blau Background/Rahmen hinter/um SubNavi UnterKategorien*/
  /* Mozilla alt | Safari alt und Konqueror alt | IE | Mozilla neu */
  /* zZt. deaktive Transparenz!
  -moz-opacity: .8;
  -khtml-opacity: .8;
  filter: Alpha(opacity=80, finishopacity=0, style=0);
  opacity: .8;
  */
  -moz-opacity: .9;
  -khtml-opacity: .9;
  filter: Alpha(opacity=90, finishopacity=0, style=0);
  opacity: .9;

  position: absolute; /* !!! nicht relative !!!, sonst läuft MainNaviZone mit... */
  /* border-top: 0.2em solid #006; */
  z-index: 20;
  display: none;
}

#MainNaviRAK ul li.active ul {
  display: block !important;
}
#MainNaviRAK ul li.active ul.subnotvisible {
  display: none !important;
}
#MainNaviRAK ul li.active:hover ul.subnotvisible,
#MainNaviRAK ul li.active.hover ul.subnotvisible {
  display: block !important;
}

#MainNaviRAK ul li ul li {
  padding: 0;
  height: 100%;
  float: none; /* wichtig für alte Browser: eine width angeben! */
  white-space: nowrap;
  /* display: block; */ /* ### Test ### wegen hover nicht volle Schriftbreite bzw. TextHintergrund fehlt beim IE7 */
  display: block;
}
#MainNaviRAK ul li ul li.catsubmid {
  padding: 0 0 0 0.2em !important;
}
#MainNaviRAK ul li.active ul li {
  /* padding: 0 0.2em !important; */
  float: left !important;
}
#MainNaviRAK ul li.active ul.subnotvisible li {
  float: none !important;
}

#MainNaviRAK ul li ul li a {
  background: #009; /* AURA Blau Hintergrund SubNavi Kategorie */
  padding: 0 0.8em;
  text-decoration: none;
}

#MainNaviRAK ul li.active ul,
#MainNaviRAK ul li.active ul li a {
  background: #1010BD; /* AURA Blau Hintergrund SubNavi Kategorie active */
}

#MainNaviRAK ul li ul li a:hover {
  background: #0033DD; /* SubNavi Kategorie */
  text-decoration: none;
}
#MainNaviRAK ul li.no1st ul li a:hover {
  cursor: pointer;
}
/* Star-HTML-Hack: IEn bis IE6 */
* html #MainNaviRAK ul li.no1st ul li a:hover {
  cursor: hand !important;
}

#MainNaviRAK ul li.active ul li a:hover {
  background: #3333FF; /* SubNavi Kategorie active  */
}


#FootNaviRAK ul {
  color: #FFF;
  list-style: none;
  padding: 2em 0 0.5em 0;
}
#FootNaviRAK ul li {
  display: inline;
  white-space: nowrap;
}

#FootInfoRAK p {
  color: #FFF;
  padding: 2em 0 0.5em 0;
}

#FootNaviRAK a {
  color: #FFF;
}
#FootNaviRAK a:hover {
  border-bottom: 0.1em solid #FFF;
}


/* Diverse ########################################################################################################## */

.textleft {
  text-align: left;
}

.textcenter {
  text-align: center;
}

.textright {
  text-align: right;
}

.textlowcase {
  text-transform: lowercase;
}

.textuppcase {
  text-transform: uppercase;
}

.textbold {
  font-weight: bold;
}

.left {
  float: left;
}

.right {
  float: right;
}

.clear {
  clear: both;
}

.visible {
  display: block;
}
.notvisible {
  display: none;
}

:focus {
  outline-style: none;
}

code {
 background: #DDD;
 font-size: 1.2em !important;
}