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

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

body,
input,
textarea {
  background-color: #fff3e7;
  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. */
}

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:  none;
}
a:hover {
  text-decoration:  underline;
}

/* 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:            #663300;
}

#menuebar {
  background-color: #ffcc99;
  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:        90%; /* 9pt; */
  font-weight:      bold;
}
#footer img {
  vertical-align:   text-bottom;
}
#footer a {
  text-decoration:  none;
}
#footer a:hover {
  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;
}
.bgBWseite {
  background:       url(img/bg-bwseite.jpg);
}
.bgTeamseite {
  background:       url(img/bg-teamseite.jpg);
}
.bgPTseite {
  background:       url(img/bg-ptseite.jpg);
}
.bgCheckseite {
  background:       url(img/bg-checkseite.jpg);
}
.bgBewegungseite {
  background:       url(img/bg-bewegungseite.jpg);
}
.bgErnaehrungsseite {
  background:       url(img/bg-ernaehrungsseite.jpg);
}
.bgEntspannungsseite {
  background:       url(img/bg-entspannungsseite.jpg);
}
.bgWissensseite {
  background:       url(img/bg-wissensseite.jpg);
}
.bgBusinessseite {
  background:       url(img/bg-businessfitseite.jpg);
}
.bgGutscheinseite {
  background:       url(img/bg-gutscheinseite.jpg);
}
.bgReferenzenseite {
  background:       url(img/bg-referenzenseite.jpg);
}
.bgKooperationseite {
  background:       url(img/bg-kooperationseite.jpg);
}
.bgKoopAerzte {
  background:       url(img/bg-koop-aerzte.jpg);
}
.bgKoopErnaehrung {
  background:       url(img/bg-koop-ernaehrung.jpg);
}
.bgKoopFitness {
  background:       url(img/bg-koop-fitness.jpg);
}
.bgKoopHeilpraktiker {
  background:       url(img/bg-koop-heilpraktiker.jpg);
}
.bgKoopSonstiges {
  background:       url(img/bg-koop-sonstiges.jpg);
}
.bgKoopSportbekleidung {
  background:       url(img/bg-koop-sportbekleidung.jpg);
}
.bgKoopWellness {
  background:       url(img/bg-koop-wellness.jpg);
}
.bgAktuellseite1 {
  background:       url(img/bg-aktuellseite1.jpg);
}
.bgAktuellVorsaetze {
  background:       url(img/bg-aktuell-vorsaetze.jpg);
}
.bgAktuellUnternehmen {
  background:       url(img/bg-aktuell-unternehmen.jpg);
}
.bgAktuellFit {
  background:       url(img/bg-aktuell-fit.jpg);
}
.bgAktuellPause {
  background:       url(img/bg-aktuell-pause.jpg);
}
.bgAktuellFett {
  background:       url(img/bg-aktuell-fett.jpg);
}
.bgAktuellExtra {
  background:       url(img/bg-aktuell-extra-gross.jpg);
}
.bgAktuellDiabetes {
  background:       url(img/bg-aktuell-diabetes.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 bottom 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 ! */
  width:            450px; /* von jScrollPane berechnet: = jScrollPaneContainer.width - padding - schrollbar */
  height:           550px; /* ! Padding beachten ! */
  overflow:         auto;
  padding:          5px;
/* Von jScrollPane: */
  top:              0px;
  position:         absolute;
}
#contentbox .jScrollPaneContainer {
  height:           560px;
  width:            480px;
}

#contentbox.bigbox {
  width:            880px;
  height:           560px;
}
#contentbox.bigbox .scroll-pane {
/*   border: 1px solid blue; */
}
#contentbox.bigbox .jScrollPaneContainer {
  position:         absolute;
  right:            0;
}

.bgKontakt #contentbox {
  left:             20px;
}

#content h1 {
  margin-bottom:    1em;
  font-size:        160%; /*16pt;*/
  font-weight:      bold;
  line-height:      1.5;
}
#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;
}

#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 #663300;
  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;
}

#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:            #663300;
  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 #663300;
}
#kontaktform .button {
  font-weight:      bold;
}
#kontaktform .button:hover {
  background-color: white;
}
#kontaktform fieldset {
/*   background-color: red; */
}
#kontaktform input.radio {
  background-color: transparent;
}
#radios {
}
#radios label {
  float:            left;
}
#radios fieldset {
  width:            310px;
  line-height:      1.0;
  margin-bottom:    1.5em;
}
#radios input {
  margin-bottom:    0;
}
#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:            #663300;
  text-decoration:  none;
  padding-right:    12px;
  background: url(img/basic_arrow_right.gif) no-repeat right 0;
}
.weiter a:hover {
  text-decoration:  underline;
  background-position:  right -38px;
}

.zurueck a {
  color:            #663300;
  text-decoration:  none;
  padding-left:    12px;
  background: url(img/basic_arrow_left.gif) no-repeat left 0;
}
.zurueck a:hover {
  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 #663300;
  padding:          0.2em;
}
.rahmen + p {
  clear:            both;
}

.mini_portrait {
  float:            left;
/*   width:            125px; dreispaltig */
  width:            140px;
  height:           210px;
  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 #663300;
}

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:            #663300;
  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 { }

/* ----------------------------------------------------- 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. */