@charset "utf-8";
@import url(reset.css);
@import url(lightbox.css);

/* ----------------------------------------------------- All browsers */

body,
input,
textarea {
  background-color: #fffcff;
  font:             14px Calibri,Arial,sans-serif; /* 10pt; */
/*   font:             15px Calibri,Arial,sans-serif; */
  /* Die Font-Größe wird nur hier auf einen (Pixel-)Wert eingestellt. bei
   * den anderen Größenangaben dürfen ausschließlich relative Angaben (%)
   * gemacht werden, damit die Größenumschaltung bei Calibri funktioniert. */
}

:focus {
    outline: 1px dotted black;
}

strong {
  font-weight:      bold;
}

em {
  font-style:       italic;
}
em.ul { /* Ersatz für <u> */
  font-style:       normal;
  text-decoration:  underline;
}

a {
  color:            #993366;
  text-decoration:  underline;
}
a:hover,
a:focus,
a:active {
  text-decoration:  underline;
  background-color: #E0C2D1;
}

/* Skiplinks */
.skip {
  position:         absolute;
  top:              -32768px;
  left:             -32768px;
}
#skiplinks {
  position:         absolute;
  top:              0px;
  left:             -32768px;
  z-index:          1000;
  width:            100%;
}
/* Skip-Links für Tab-Navigation sichtbar machen */
.skip:focus,
.skip:active {
  position:         static;
  top:              0;
  left:             0;
}
#skiplinks a.skip:focus,
#skiplinks a.skip:active {
  left:             32768px;
  outline:          0 none;
  position:         absolute;
  width:            100%;
  color:            #fff;
  background:       #333;
  border-bottom:    1px #000 solid;
  padding:          10px 0;
  text-decoration:  none;
}

/* Der Hauptcontainer */
#container {
  margin:           30px auto 0 auto;
  position:         relative;
  width:            980px;
/*   border:           1px solid blue; */
}

#head {
  position:         relative;
  height:           57px;
  width:            100%;
/*   border:           1px solid green; */
}

#head .headline {
  position:         absolute;
  bottom:           3px;
  right:            3px;
  color:            #993366;
/*   border:           1px solid red; */
}

#logo {
  position:         absolute;
  top:              0px;
  left:             -92px;
  z-index:          1;
}

#content {
  position:         relative;
/*  position:         absolute;
  top:              57px;
  left:             0;*/
  z-index:          2;
  height:           610px;
  width:            100%;
  color:            #993366;
}

#dpvLogo {
  position:         absolute;
  bottom:           0px;
  left:             0px;
  z-index:          1;
}

#dpvLogoKontakt {
  position:         absolute;
  top:              0px;
  right:            0px;
  z-index:          1;
}
#dpvLogoKontakt a:hover {
  background-color: transparent;
  text-decoration:  none;
}

#menuebar {
  background-color: #993366;
  width:            100%;
  height:           38px;
  font-weight:      bold;
  position:         relative; /* wird bei z-index benötigt */
  z-index:          3;  /* muss höher sein als bei #content, sonst verschwinden im IE die Menue-Tabs hinter dem #content-div */
}
/* die Einstellungen für das Menue erfolgen in der superfish.css */

#footer {
  padding:          5px 0;
  width:            100%;
  clear:            both;
  text-align:       center;
  color:            #993366;
  font-size:        9pt;
  font-weight:      bold;
}
#footer img {
  vertical-align:   text-bottom;
}
#footer a {
  text-decoration:  none;
}
#footer a:hover,
#footer a:focus,
#footer a:active {
  text-decoration:  underline;
}

#addthis { /* Social Bookmarks */
  margin:           10px 0;
  width:            100%;
  clear:            both;
  text-align:       center;
}

/* Die Hintergrundbilder werden durch verschiedene Klassen geladen.
 * Da die URL sich auf die Position der CSS-Datei bezieht, liegen diese
 * Bilder auch in /scc/img/ */

.bgStartseite {
  background:       url(img/bg-startseite.jpg);
  background-color:transparent;
}
.bgPilatesseite {
  background:       url(img/bg-pilates.jpg);
}
.bgHistorieseite {
  background:       url(img/bg-historie.jpg);
}
.bgAngebotseite {
  background:       url(img/bg-angebot.jpg);
}
.bgMatteseite {
  background:       url(img/bg-matte.jpg);
}
.bgAllegroseite {
  background:       url(img/bg-allegro.jpg);
}
.bgYogaseite {
  background:       url(img/bg-yoga.jpg);
}
.bgBodyMindseite {
  background:       url(img/bg-body-mind.jpg);
}
.bgKidsseite {
  background:       url(img/bg-kids.jpg);
}
.bgStudioseite {
  background:       url(img/bg-studio.jpg);
}
.bgUeberUnsseite {
  background:       url(img/bg-ueber-uns.jpg);
}
.bgPreiseseite {
  background:       url(img/bg-preise.jpg);
}
.bgGutscheinseite {
  background:       url(img/bg-startseite.jpg);
}
.bgTeamseite {
  background:       url(img/bg-teamseite.jpg);
}
.bgAktuellseite {
  background:       url(img/bg-aktuelles.jpg);
}
.bgJobsseite {
  background:       url(img/bg-jobsseite.jpg);
}
.bgErorrseite {
  background:       url(img/bg-errorseite.jpg);
}
#content.bgKontakt {
  /* width:            1100px; */
  background:       url(img/bg-kontakt.gif) right 130px no-repeat;
}

#contentbox {
  position:         absolute;
  bottom:           20px;
/*   top:              20px; */
  right:            20px;
  width:            480px;
  max-height:       560px; /* Nützt zzt. nichts, da wg. JScrollPane #contentbox .scroll-pane eine fixe Höhe hat. */
/*   overflow:         scroll; */
/*   background:       url(img/bg-contentbox80.png); */
  background:       url(img/bg-contentbox90.png);
/*   background-color: #ffcc99; */
}
#contentbox .scroll-pane {
  width:            470px; /* ! Padding beachten ! */
  height:           550px; /* ! Padding beachten ! */
  overflow:         auto;
  padding:          5px;
/* Von jScrollPane: */
  top:              0px;
  position:         absolute;
}
#contentbox .jScrollPaneContainer {
  height:           560px;
  width:            480px;
}
#contentbox .jScrollPaneContainer:focus {
  /* border: 2px solid red; */
}

#contentbox.bigbox,
#contentbox.bigboxL {
  width:            880px;
  height:           560px;
}
#contentbox.bigbox .scroll-pane {
/*   border: 1px solid blue; */
}
#contentbox.bigboxL .scroll-pane {
/*   border: 1px solid blue; */
  width:            870px; /* ! Padding beachten ! */
}
#contentbox.bigbox .jScrollPaneContainer {
  position:         absolute;
  right:            0;
}
#contentbox.bigboxL .jScrollPaneContainer {
  position:         absolute;
  left:             0;
  width:            880px;
}

.bgKontakt #contentbox {
  left:             20px;
}

#content h1 {
  margin-bottom:    1em;
  font-size:        160%; /*16pt;*/
  font-weight:      bold;
  line-height:      1.5;
}
#content .unterH1 { /* für Text direkt unter einer h1 */
  margin-top:       -2em;
  margin-bottom:    1.6em;
}
#content h2 {
  margin:           1.5em 0 1em 0;
  font-size:        120%; /*12pt;*/
  font-weight:      bold;
  line-height:      1.5;
}
#content p {
  margin-bottom:    1em;
/*   font-size:        10pt; jetzt durch body definiert */
  line-height:      1.5;
}
#content p.weiter {
  float:            right;
  text-align:       right;
}
#content ul {
  margin-bottom:    1em;
}
#content ul li {
  list-style:       outside url(img/ul-bullet.gif); /* siehe auch unten bei .ie6 */
  margin-left:      20px;
  line-height:      1.5;
}

.portrait {
  width:            370px; /* 400px - padding */
  float:            left;
  padding:          25px 15px 10px 15px;
  text-align:       center;
  color:            #993366;
/*   border: 1px solid green; */
}
.portrait a {
  text-decoration:  none;
}

.top25 {
  padding-top:      25px;
}

#mix {
  margin-bottom:    1em;
}
#mix p {
  margin-bottom:    0;
}
#mix ul {
  margin:           0 0 0 1em;
}

#saeulen {
  width:            100%;
  margin-bottom:    1em;
}
#saeulen td {
  text-align:       center;
  width:            20%;
  font-weight:      bold;
}

#fett_tabelle {
  border-collapse:  collapse;
  width:            100%;
}
#fett_tabelle td,
#fett_tabelle th {
  border:           1px solid #993366;
  padding:          5px;
  vertical-align:   top;
}
#fett_tabelle th {
  font-weight:      bold;
}
#fett_tabelle .links {
  border-right:     none;
}
#fett_tabelle .rechts {
  border-left:      none;
}

#kontaktAdresse {
  position:         absolute;
  width:            450px;
  top:              30px;
  left:             520px;
/*   border: 1px solid red; */
}
#kontaktAdresse td {
  padding-right:    1em;
  line-height:      1.5;
}

#impressum {
  font-style:       italic;
  padding-right:    100px;
}

#Label_PLZOrt,
#kontaktform label {
  display:          inline-block;
  width:            120px;
  float:            left; /* Der FF < 3.x kennt inline-block nicht. siehe auch .fl_right */
}
#kontaktform input,
#kontaktform textarea {
  line-height:      1.5;
  padding:          3px;
  color:            #993366;
  margin-bottom:    1em;
}
#kontaktform .text {
  vertical-align:   baseline;
}
#kontaktform input.text,
#kontaktform textarea.text {
  width:            300px;
}
#kontaktform p.submit {
  text-align:       center;
}
#kontaktform .button,
#kontaktform .text {
  border:           1px solid #993366;
}
#kontaktform .button {
  font-weight:      bold;
}
#kontaktform .button:hover {
  background-color: white;
}
#kontaktform fieldset {
/*   background-color: red; */
}
#kontaktform input.radio {
  background-color: transparent;
}
#radios {
  position:         relative;
}
#kontaktform .label_inline,
#radios label {
  display: inline;
  width: auto;
  float: none;
}
#radios fieldset {
  width:            310px;
  line-height:      1.0;
  margin-bottom:    1.5em;
}
#radios input {
  margin-bottom:    0;
}
#radios legend {
  position:         absolute;
  left:             0;
  width:            120px;
  white-space:      normal !important; /* Fix FF Problem, aber wg. IE7 musste da eh ein <br> rein. */
}
#kontaktform #PLZ {
  width:            44px; /* -6px padding, aber nur einmal! Und - 10px margin */
  margin-right:     10px;
}
#kontaktform #Ort {
  width:            238px; /* hier - 2x Rahmen (je 1px ) */
}
#kontaktform .inputError {
  border:           2px solid red;
}
#kontaktform .fl_right {
  float:            right;
  margin-right:     15px;
}
#kontaktform .fl_left {
  float:            left;
}
#kontaktform p {
  clear:            both;
}

#upps {
  border:           2px solid red;
  color:            red;
  padding:          10px 5px 0 5px;
  margin-bottom:    1em;
}
#uppsHead,
#okHead {
  font-size:        120%;
  font-weight:      bold;
}

#font_text {
  position:         absolute;
  top:              100px;
  z-index:          1;
  color:            #fff3e7;
}

/* ----------------------------------------------------- Allgemeine Klassen  */

.weiter a {
  color:            #993366;
  text-decoration:  none;
  padding-right:    12px;
  background: url(img/basic_arrow_right.gif) no-repeat right 0;
}
.weiter a:hover,
.weiter a:focus,
.weiter a:active {
  text-decoration:  underline;
  background-position:  right -38px;
}

.zurueck a {
  color:            #993366;
  text-decoration:  none;
  padding-left:    12px;
  background: url(img/basic_arrow_left.gif) no-repeat left 0;
}
.zurueck a:hover,
.zurueck a:focus,
.zurueck a:active {
  text-decoration:  underline;
  background-position:  left -38px;
}

.referenzen li {
  font-weight:      bold;
}
.referenzen p {
  font-weight:      normal;
/*   font-size:        9pt  !important; */
  line-height:      normal;
}

div.partner {
  margin-bottom:    1.5em;
}
.partner h2,
.partner p {
  margin-bottom:    0 !important;
}
.partner img {
  float:            right;
}

/* Aktuelles --------------------------- */
div.aktuelles {
  margin-bottom:    1.5em;
  clear:            both;
/*   border:1px solid green; */
}
.aktuelles img {
  float:            left;
  margin-right:     15px;
}
.aktuelles p,
.aktuelles div {
  margin-left:     165px;
}

.unicef img {
  margin-right:     30px !important;
  margin-left:      15px !important;
}

.feed img {
  width:            150px !important;
  margin-bottom:     10px !important;
}

/* Personal-Training ------------------- */
.defListPT dt {
  font-weight:      bold;
  margin-top:       1em;
}
.defListPT dd {
  margin-left:      2em;
}

.ptIcon {
  float:            right;
  margin:           0 0 10px 10px;
}

.slogan {
  font-weight:      bold;
  font-style:       italic;
}

.autor {
  font-size:        85%; /*11px;*/
  line-height:      normal;
  font-weight:      normal;
}

.small {
  font-size:        85% !important;  /*9pt*/
}

.marginL1 {
  margin-left:      1em;
}

.clear {
  clear:            both;
}

.rahmen {
  float:            left; /* siehe auch .ie6 .rahmen */
  border:           1px solid #993366;
  padding:          0.2em;
}
.rahmen + p {
  clear:            both;
}

p.zitat {
  font-style:       italic;
  background:       url(img/quote.png) no-repeat left 0;
  padding-left:     65px;
}

.mini_portrait {
  float:            left;
/*   width:            125px; dreispaltig */
  width:            200px;
  height:           300px;
  margin:           0 5px 20px 5px;
  text-align:       center;
}
.mini_portrait a {
  text-decoration:  none;
  line-height:      1.2;
}
.mini_portrait a:hover span {
  border-bottom:    1px solid #993366;
}

p.anschrift {
  margin-left:      2em;
  text-indent:      -2em;
}
p.anschrift:first-line {
  font-weight:      bold;
}
ul.abstand li {
  margin-bottom:    1.5em;
}

.bold {
  font-weight:      bold;
}

/* Tabelle für die Kontaktdaten */
table.kontaktdaten {
  margin-left:      1em;
}
table.kontaktdaten th,
table.kontaktdaten td {
  padding:          0.2em 1em 0.2em 0;
}

.vcard abbr { /* abbr wird für Microformats gebraucht, aber reset.css macht da Formatierungen, die wir hier nicht wollen */
  border-style:     none !important;
  cursor:           default;

}

/* Für jquery-tooltip */
#tooltip {
  position:         absolute;
  z-index:          3000;
  border:           1px solid #111;
  color:            #993366;
  background-color: #eee;
  padding:          5px;
  opacity:          0.85;
}
#tooltip h3,
#tooltip div {
  margin:           0;
}
#tooltip.fancy {
/*   font-family:      Arial; */
  border:           none;
  width:            220px;
  height:           95px;
  padding:          4em 20px 20px 20px;
  opacity:          1;
  background:       url('img/tt-blase.png');
}
#tooltip.fancy.viewport-right {
  background:       url('img/tt-blase-links.png');
}
#tooltip.fancy.viewport-bottom {
  background:       url('img/tt-blase-oben.png');
  height:           150px;
  padding-top:      5em;
}
#tooltip.fancy.viewport-bottom.viewport-right {
  background:       url('img/tt-blase-rechts-oben.png') 0px -20px;
  height:           105px;
  padding-top:      4em;
  margin-left:      40px;
}
#tooltip.fancy h3 {
  margin-bottom:    0.75em;
  font-size:        120%; /*12pt;*/
  font-weight:      bold;
  width:            220px;
}
#tooltip.fancy div {
  width:            220px;
  text-align:       left;
}



/* ----------------------------------------------------- JS enabled browsers */

.js div { }

.js #contentbox .animated {
  left: -3000px;
  overflow: hidden;
}

/* ----------------------------------------------------- IE7 and below */

.ie7 div { }

/* ----------------------------------------------------- IE6 and below */

.ie6 div { }

.ie6 .rahmen {
  float:            none;
  /* das der IE6 das ".rahmen + p" nicht kennt, darf der Rahmen kein float
   * haben (der ist eh nur dazu da, das der Rahmen nicht bis ganz rechts
   * geht. */
}

.ie6 #content ul li {
  list-style:       outside url(img/ul-bullet-ie.gif);
  /* der IE richtet das Bullet wohl an der Zeilenoberkante aus und nicht
   * zentiert. Daher ein spezielles IE-Bullet mit entspr. Überstand oben. */
}

.ie7 #kontaktform input,
.ie7 #kontaktform textarea {
  margin-bottom:    0;
  /* oben ist der Abstand auf 1em eingestellt, dadurch machen IE6 u. IE7 aber
   * zu große Abstände. Daher hier für beide auf 0 gesetzt, dann stimmt es
   * wieder (warum auch immer) */
}

/* Da IE-Spezialitäten wie DXImageTransform nicht Valide sind, sind solche
 * Sachen nach screen-ie6.css ausgelagert. */

/* ------------------- spezielle Formatierungen ---------------------- */

#schloss {
  background:   url(img/schloss.jpg) no-repeat;
  width:        348px; /* 368 - 2xpadding */
  height:       470px; /* 490 - 2xpadding */
  margin-left:  20px;
  margin-top:   -20px;
  padding:      10px;
  color:        black;
  font-size:    160%;
  font-weight:  bold;
  position:     relative;
}
#schloss2 {
  width:        348px; /* 368 - 2xpadding */
  height:       470px; /* 490 - 2xpadding */
  position:     absolute;
  top:          -1px;
  left:         -1px;
  color:        white;
  padding:      10px;

}
#schloss a {
  color:        black;
}
#schloss2 a {
  color:        white;
}
#schloss a:hover,
#schloss2 a:hover {
  background-color: transparent;
}

table.preisliste {
  width:        90%;
}

.preisliste th {
  line-height:  1.2;
}
.preisliste td {
  width:        5em;
  text-align:   right;
  white-space:  nowrap;
}

.bottom1em {
  padding-bottom: 1em;
}

.mehr {
  padding-left: 3em;
  font-style:   italic;
}