/* design & layout by  karl csar 01.04.2005 */
/* Homepage für Alexander Krittel */

/* vertikales dropdown menu: */
/* http://tutorials.alsacreations.com/deroulant/ */

/* Zentrierlogik: //http://www.thestyleworks.de/tut-art/centerblock.shtml */
/* zum Zentrieren von DIV-Blöcken: http://css.fractatulum.net/sample/layout4format.htm  */

/* Standard CSS  */
/* Achtung: IE Version < 6 hat falsches Box-Model: margin, padding werden von width abgezogen */
/*          bei FF und IE > 5.5 wird magin und padding zu width dazuaddiert */
/*          Für alte Browser "backCompat" für neue Browser "CSS1Compat" verweden */
/*          Siehe Quirks- oder Standard-Modus */

/* wichtige Farben
leichtes Rosa = #E9DED7
leichtes Grau  = #AFABAB
*/

html, body, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd,
span, a, table, td, form, legend, fieldset, img,
textarea, hr, ol, ul, li, .logo,
#projekt_ueberschrift .img_menu, .sprungmarke, .bild, .link, .toolTip,
#ladeanzeige,  #menu_horz,  #menu_slideshow, #slideshow_img,
#menu_info,  .show_top, #druck, #druck_js, #home_ueb,  #info, #show_all,
#show_logo, #show_top, #show_img_video,
#show_text, #show_media, #show_audio, #media_player, #audio_text_id,
#video_player, #video_player_border, #sprache, #suche_id, #suchbegriff, #suche_go_id,  #suche_id_form, #show_logo_inner,
#datenschutz,#bankueberweisung_1,#bankueberweisung_2,#kontakt,
#bestellung_email_form_id, #bestellung_pruefen_id,  #showToolTip, #nachricht_browser,
#menue_pdf, #print, .sprache_yoga, .sitemap, .download, .print_langtext,
#velvet_musiker, #table_id
 {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border:0;
/*                                          ms eigenschaft  */
/*
  scrollbar-arrow-color: #000000;
  scrollbar-base-color: #FF9933;
  scrollbar-3dlight-color: #000000;
  scrollbar-darkshadow-color: #000000;
  scrollbar-highlight-color: #AFC4ED;
  scrollbar-shadow-color: #696969;
  scrollbar-track-color: #696969;
                                       */
}
html {
  overflow:hidden;

}
html, body, .link {
  font-size: 101%;   /* IE: hilft bei relativen Schriftgrößenproblemen (em) */
                     /* siehe http://www.drweb.de/csstechnik/css-strukturieren.shtml */
  font-family: verdana, arial, geneva, helvetica;
  font-weight: normal;
  line-height: 1.4em;   /* Zeilenhöhe */
  color: #000000;
}
html {
  width:100%;
  height:100%;    /* für firefox 99  sonst scrollbalken */
  border: 0px solid black;

}
/* http://aktuell.de.selfhtml.org/artikel/javascript/aufloesungsweiche/ */
body {
  /* in BSaufloesung_media.js: */
  overflow: hidden; /* wegen dyn. textsize vergrößern, mit scrollbalken verschieben sich die container */
  display: block;
  width:100%;  height: 100%;
  text-align:center; /* zum Zentrieren von DIV-Blöcken: http://css.fractatulum.net/sample/layout4format.htm  */
  background-color: #AFABAB; /* wird im client_chris.tpl bei ci002clu_chris BLAU überschrieben */
  background-color: #4E4E4E;
  border: 0px solid red;
}
h6{
  text-align:left;
}
table {
  width:auto;
  border-spacing:0;
  border-collapse:collapse; /* stellt Zwischenräume auf null bei td */
  border: 0px solid green;
}

.table_vertikal{
  height:auto;   width:auto;
  border: 0px solid red;
}
#table_id {   /* clientlayout_chris.tpl */
 height: 100%;  width: auto;
 border: 0px solid red;
}
#id_table_768{ /* fuer BS=1024 x 768 und Audiotabelle */
 height:auto;
 width:auto;  /* 100% bei BS 768 */
}
textarea {
  overflow:auto; /* mit scrollbar */
  border: 2px solid #AFABAB;
  padding: 9px;
}
fieldset {
  padding: 0.5em;
  margin: 0.0em 0.8em 0.0em 0.8em; /* o r u l */
  border: 1px solid #FFFFFF;
}
.legend_passwort, legend{
  font-size:13px;
  color:#000000;
}
.form_passwort{
  padding-top: 10px;  padding-bottom: 20px;
  border: 0px solid red;
}
.versand{
  color:blue;
}
.bestellung_color{
  color: yellow;
  font-weight: 900;    /* 100 normal, 700 bold, 900 bolder */
}
.test{
  color: red;
}
.center {
  text-align: center;
}
.color_black {
  color:#000000;
}
.color_grau {
  color:#AFAFAB;
}

.clear_both {
  clear: both;
}
.img_menu {  /* menu icon quadrat */
  border:0.05em solid #AFABAB;
  margin-right:0.3em;
  background: #000000;
}
.img_menu_kreuz{  /* menu icon kreuz */
  border:0.00em solid #AFABAB;
  margin-right:0.3em;
  background-color: #AFABAB;
}
.link img {
  text-decoration: none;
  background:#AFABAB;
  padding: 0px;
}
a.link:hover {   /* für eMail ... */
  text-decoration: none;
  background:#FFFFFF;
  padding: 0;
  border: 0px solid red;
}
.bild a {
 text-decoration: none;
}
.bild img{   /* für #show_top bereich - THU-Fotoanzeige */
  float:left;
  text-align: center;
  margin:0;
  padding: 0 0 0.3em 0.3em ;  /* o r u l */
  border:0;
}
.bild_clear {
  clear:both;
  float:left;
  text-align: center;
  margin-top:0.7em;
  padding-left: 0.3em; /* o r u l */
}
.bild_clear img {
  border: 0.07em solid #ABAFAF;
}
.hr_top {
  border-top: 0.01em solid #E8E6E6;  /* border-top wegen firefox */
  height:0.00em;                     /* wegen MSIE */
  width:100%;
  margin: 0.0em 0.5em 0.0em 0em; /* o r u l */
}
.hr_bottom {
  clear: both;
  border-top: 0.01em solid #E8E6E6;  /* border-top wegen firefox */
  height:0.00em;                     /* wegen MSIE */
  width:100%;
  margin: 0.3em 0.5em 0em 0em; /* o r u l */
}
.fontsize_12px {
  font-size: 12px;
}
.sprache_yoga{
  margin-top: 3px;
}
.screen {
  display:block;
}
.sitemap{
  text-decoration: none;
}
a.sitemap:hover{
  text-decoration: none;
  background-color: #FFFFFF;
}
.sprungmarke { /* inhaltsverzeichnis Projekttexte */
  clear:both;
  text-decoration: none;
  font-size:11px;
  color:#000000;
}
a.sprungmarke:hover {
  text-decoration: none;
  background:#E8E6E6;
  color:#000000;
}
.inline{
  float:left;
  display:inline;
}
.error_anzeige{
  color:red;
}
.normal, .normal_horz, .normal_slideshow, #menu_horz form span.bestellung {
 /* background-color: #AFABAB; */
  color:#000000;
  font-size:12px;      /* menu text nicht dyn. veränderbar */
}

.blocksatz {
   text-align:justify; /* blocksatz */
}
.show_top {
  color: #000000;
}
.form_button {
  display:inline;
  text-align: center;
  background: #AFABAB;
  font-weight: 700;    /* 100 normal, 700 bold, 900 bolder */
  width: auto;  height:auto;
  margin: 10px 0 10px 0; /* o r u l */
  cursor:pointer;
  border: 2px solid #FFFFFF;
}
.download, .print_langtext  {
  width: auto;  height:auto;
  text-align: center;
  background: #AFABAB;
  background: #c0c0c0;
  font-weight: 700;    /* 100 normal, 700 bold, 900 bolder */
  margin: 2px 0px 0px 10px; /* o r u l */
  cursor:pointer;
  border: 1px solid #FFFFFF;
}
.download{  /* FF notwendig */
  width:6.0em;
}
.stern {
  color:#FF0000;
  font: 14px verdana, arial,  sans-serif;
}
#show_text .email_anzeige img{  /* funktioniert derzeit nicht EMAIL als IMG */
  border:1px solid red;
  background: #0000FF;
  
}
/* ========= Bestellung ============================== */
.produktzeile_color1 tr, .produktzeile_color1 td {
  background-color:  #E9E9E9;
  color: #000000;
}
.produktzeile_color2 tr, .produktzeile_color2 td {
  background-color:  #AFAFAB;
  color: #000000;
}

.table_bestellung {
  border-spacing:0;
  border-collapse:collapse; /* stellt Zwischenräume auf null bei td */
  padding: 0;
  margin: 0;      /* o r u l */
}
.table_bestellung td{
  padding-left: 5px;
}
.sum_bestellung {  /* summenzeile */
  color: #000000;
  font-weight:bold;
  border-top: 2px solid #FFFFFF;
}
#velvet_musiker img {
  float:left;
  width:auto; height:auto;
  margin-right: 10px;
  margin-top: 0em;
  border: 0px solid red;
}

/* werden die Labels mit der Klasse "left" rechtsbündig     */
/*  an eine imaginäre Mittelachse gebracht und mit einem Abstand */
/*  zu den daneben stehenden Kontrollelementen versehen: */
/* http://www.einfach-fuer-alle.de/artikel/formulare/tag1/ */

#bestellung_email_form_id label.left,
#bestellung_email_form_id span.left,
.form_passwort label.left,
.form_kontakt label.left {
  clear:both;
  float: left;        /* die Labels werden LINKS von den folgenden Inputfelder stehen */
  text-align: right;
  width: 7em;        /* bereich der labels */
  margin-right: 25px; /* abstand zu den Inputfeldern */
  margin-top: 0px;
  border:0px solid black;   }

#show_logo {
  clear:both;
  text-align:left;
  display:block;
  width:auto; /* muss gesetzt sein bei div */
  height:80px; /* 80 default - Anpassung in BSaufloesung_media.js */
  border: 0px solid green;
}
#show_logo_inner{
  float:left;
  display:block;
  width:auto; height:80px; /* 80 default - Anpassung in BSaufloesung_media.js */
  border: 0px solid yellow;
}

#show_logo  #show_logo_inner table {
  display: inline;             /* dzt. Fehler bei FF, richtig BLOCK, wegen TABLE */
  width:auto; height:100%;
  border-spacing:0;
  border-collapse:collapse; /* stellt Zwischenräume auf null bei td */
  border: 0px solid green;
}
#show_logo #show_logo_inner table img{
  margin:0; padding:0; border:0;
}

#sprache{  /* div-container */
  display: block;
  float: right;
  margin-right:1em;
  margin-top:55px;
  width:auto; height:auto;
  border: 0px solid blue;
}
#suche_id{  /* div-container */
  display: block;
  float: right;
  margin-right:0.5em;
  margin-top:52px;
  width:auto; height:auto;
  border: 0px solid #ABABAF;
}
#suche_id_form{
  display: block;
  padding: 0 10px 0 10px;             /* o r u l */
  width:auto; height:auto;
  border: 0px solid blue;
}
#suche_go_id {
  height: 16px; width:26px;
  margin-bottom:1px;
  border: 1px solid black;
  cursor:pointer;
}
#suchbegriff{  /* inputfeld */
  height:15px;  width:100px;
  padding: 0 0px 0 0px;             /* o r u l */
  border: 1px solid #ABABAF;
}
/* anzeige thu-fotos mit referezierung auf big-foto */
#show_top   { /* thu-fotoanzeige container */
   overflow:hidden;  /* anpassung in show() - clientlayout_*.tpl */
   display: block;
   clear: both;
   text-align:left;
   list-style-type: none;
   width:auto;           /* wegen firefox mussangabe im em */
   height:0px;           /* anpassung in show() - clientlayout_chris.tpl */
   white-space: nowrap; /* kein Zeilenumbruch wenn zu lange nur Firefox */
   background-color: #696969;  /* dimgrey */
   border: 1px solid #696969;;  /* dimgrey */
}
#show_top img{
    padding: 0px 1.5px 0px 1.5px;  /* o r u l */
    border-top:0px solid #000000;
}
#show_top .show_top{
    float:left;
    margin-left:33%;
}

/* ============================================ */
#pwd_abfrage{  /* Passwortabfrge für Testumgebung PROD */
  clear:both;
  display:none;  /* anpassung in show() - clientlayout_chris.tpl */
  overflow:auto;
  float:left;
  text-align:left;
  width:60%;  /* => anpassung clientlayout_chris.tpl */
  height:20%;  /* => anpassung BSaufloesung.js */
  padding: 0.5em 1.5em 0em 1.5em;  /* o r u l */
  margin-left: 0px; /* => anpassung BSaufloesung.js */
  border:0px solid green;
}
/* =================================================== */

#show_all {
  clear:both;
  display:block;
  overflow: hidden;
  float:left;
  width:auto;    /* auto default - anpassung BSaufloesung.js */
  height:auto;   /* auto default - anpassung BSaufloesung.js */
  text-align: center;
  border:0px solid green;
}
#show_text{  /* Textcontainer (produktext lang siehe anpassung: preload_media.js */
  float:none;    /* anpassung BSaufloesung.js für IE / FF bezogen auf show_media */
                 /* float: none ist zum Zentrieren notwendig wenn nur text oder Foto angezeigt wird */
  display:none;  /* anpassung in show() - clientlayout_chris.tpl */
  Overflow-x: hidden;
  Overflow-y: auto;

  width:auto;   /* auto default - anpassung BSaufloesung_media.js + anpassung clientlayout_chris.tpl */
  height:auto;  /* auto default - anpassung BSaufloesung_media.js   */
  padding: 0.5em 1.2em 0em 1.2em;  /* o r u l */
  text-align:left;
  margin: auto;  /* zum Zentrieren bei FF */
   /* wenn option[9]=J und imgBG vorhanden ist; laden URL in preload_media.js */
      background:repeat;
      /* background:no-repeat; */
      /* background:repeat-x; */
      /* background-position: 50% 50%;  */
  border:0px solid yellow;
  /* filter: alpha(Opacity=100);   siehe fontsize_MSIE: faktor wieviel sichtbar ist, original 40 */
}
div #show_media{ /* gesamtcontainer: lade-, foto-, videoanzeige */
   display:block;
   overflow: hidden;
   width:0%;   /* 35      in BSaufloesung_media.js  */
   height:0%;  /* 55      in BSaufloesung_media.js  */
   margin-top: 0.0em;  /* in BSaufloesung_media.js */
   text-align:left;
   margin: auto;
   padding-top:0.0em;
   /* wenn option[9]=J und imgBG vorhanden ist; laden URL in preload_media.js */
      background:no-repeat;
      background:repeat-x;
      background-position: 50% 50%;
   border:1px solid #ABABAB; /*  FF notwendig, sonst wird das img abgeschnitten */

   /* BORDER - ACHTUNG bei TEST im clientlayout_chris.tpl => options_colors(): color[0] deaktivieren */
}
#ladeanzeige  {
  display:none;
  text-align:center;
 /* background-color: #585858;   dimgrey */
  width:99%;
  height: 90%;  /* BS 768, 800: angepasst - clientlayout_chris.tpl */
  margin-top:0em;
  border:0px solid blue;
}
#ladeanzeige table {
  height:100%;
  margin:auto;  /* zentrieren */
  border: 0px solid blue;
}
#close{
  display:none;
}
/* ======================================================== */
#menu_slideshow {
  display: none;
  width:300px;           /* muss gesetzt sein bei div */
  height:auto;          /* wegen firefox: audio-div */
  background-color: #9c9c9c;
  border: 0px solid #FFFFFF;
}
#menu_slideshow dl {
  display: block;
  width:auto;
  height: 25px;
  border: 0px solid red;
}
#menu_slideshow dt {
  cursor: pointer;
  display:inline;
  border:0;
}
#menu_slideshow dl dt a {
  display: inline;
  text-decoration: none;
  padding:5px 5px 5px 5px;    /* o r u l */
  border:0px solid red;
}
#menu_slideshow dl dt a:hover,
#menu_slideshow a:hover .normal_slideshow {
  display: inline;
  text-decoration: none;
  color:#000000;
  background: #928989;
  border: 0px solid black;
}
#show_img_video{   /* Foto- oder Videocontainer */
  display:block;
  overflow: hidden;
  width:0%;        /* in preload_media.js zum Zentrieren */
                   /* anpassung BSaufloesung.js */
  height:0%;
  text-align:center; /* zum Zentrieren */
  margin:auto;       /* zum Zentrieren */
  padding-right:0px; /* bei Borderangabe #video_player: IE Fehlerkorrektur mit 3px (show_id() + (border px * 2) notwendig */
  border:0px solid #AFABAB;
   /* border-width:10px; */
   /* border-color:#E1F9FA; */
   /* border-style:outset; */
   border: 0px solid red;
}
#show_audio{

  text-align:center;
  display:none;      /* anpassung in show() - clientlayout_*.tpl */
  width:auto;
  height:auto;
  border: 0px solid green; /* FF 1px - BS 768 - muss sein BSaufloesung_media.js */
}
#audio_text_id{
  display:block;
  width:300px; height:auto;   /* anpassung clientlayout_*tpl audio */
  border: 0px solid red;
}
/* ==================================================================== */
#ie_player2 {  /* IE Audiofile-Anzeige - Musik wird bei none trotzdem abgespielt */
   display:block;
   width:260px;
   height:50px;
   margin:0; /* zentrieren */
   border:0px solid blue;
}
#ff_player2 {  /* Firefox Audiofile-Anzeige  - Musik wird bei none trotzdem abgespielt */
   display:block;
   width:260px;
   height:16px;
   margin:0; /* zentrieren */
   border:0px solid red;
}
#video_player {  /* IE+FF Videofile-Anzeige */
  display:none;  /* darf erst im clientlayout.tpl auf block gesetzt werden, wegen Playerablauf (FF) */
  width: 0px;   /* wird in BSaufloesung_media.js angepasst */
  height:0px;  /* wird in BSaufloesung_media.js angepasst */
  text-align:center;  /* zum Zentrieren */
  margin:auto;       /* zum Zentrieren */
  background: #000000;  /*  black */
  border:0px solid red;  /* wenn mit border, dann (+3px) und (+ border-px * 2) bei #show_img_video  padding-right angeben*/
}
#video_player_border{  /* wegen FF eigener DIV-Border */
  width:auto; height:auto;
  border:0;
}
/* ================================================================ */
#menu_horz {    /* www.krittl.com/index_d_kr001clu_yoga.php */
  float:left;
  float:right;
  display: block;
  width:22.5%;     height:auto;
  margin: 0 auto 0 0em;
  margin-right:0.3em;
  background-color: #9c9c9c;
  border: 0px solid blue;
}
#menu_horz dl {
  display: block;
  width:auto;
  height: 25px;
  border: 0px solid red;
}
#menu_horz dt {
  cursor: pointer;
  display:inline;
  border: 0px solid red;
}
#menu_horz dl dt a {
  display: inline;
  text-decoration: none;
  padding:5px 5px 5px 5px;    /* o r u l */
  border: 0px solid red;
}
#menu_horz dl dt a:hover,
#menu_horz a:hover .normal_horz {
  display: inline;
  text-decoration: none;
  color:#000000;
  background: #928989;
  border: 1px solid black;
}
/* ======================================== */
#menu_profile{
   float:right;
   display: block;
   width:auto;       /* auto default - anpassung BSaufloesung.js */
   height:auto;      /* auto default - anpassung BSaufloesung.js */
   border: 0px solid green;
}

#menu_pdf{
  height:auto;  width:auto;
  margin-top: 2em;
  border: 0px solid red;
}

/* ======================================= */
/* Achtung vertikales Menu:
/* - Hauptcontainer #menu ist jeweils im fontsize_Fierefox_* und fontsize_MSIE_* definiert */
/*   Grund: float: left für FF; float:right für IE */

#menu dt, #menu dd {
  cursor: pointer;
  text-align: left;
}
#menu dd {
  display: none;
}

#menu li {
  text-align: left;
  list-style-type: none;
}

#menu li a, #menu dt a, #menu dd ul li a,    /* main- und submenu */
#menu_pdf  a {
  overflow: auto;
  text-decoration: none;
  display: block;
  height: 100%;   /* siehe fontsize_MSIE_media.css */
  margin:  0px 2px 0px 2px;  /* o r u l */
  padding: 1px 0px 1px 5px;  /* o r u l */
  border: 0 none;
}
#menu dd ul li a{ /* Submenu */
  background-color: #9C9C9C;
}
#menu li a:hover, #menu dt a:hover, #menu dd ul li a:hover,
a:hover .normal, #menu_pdf a:hover  {
  color:#000000;
  margin:  0px 2px 0px 2px;  /* o r u l */
  padding: 1px 0px 1px 5px;  /* o r u l */
  border:0 none;
  background: #928989;
}
#profile_div {  /* view version */
  clear:both;
  float:right;
  display:block;
  padding:0.0em  1.2em 0.0em 0.0em;  /* o r u l */
  width:80%; height:auto;
  margin-top: 0px;
  margin-right: 8px;
  border: 0px solid blue;
}

/* =========================================================== */
#druck {
  display:none;
}
#slideshow_img{
  width:0px;
  text-align:center;
  border: 0;
}
/* ============== Slideshow Intervallsteuerung ================== */

#sekunden_form_id{
  display:inline;
}
#bestellung_form_id {
  display:none;
}
/* ======================================================== */
#bankueberweisung_1{
  width: auto;
  height:auto;
}
#bestellung_email_form_id  {
 border: 0px solid red;
 padding: 10px 10px 10px 10px;  /* o r u l */
}
#kontakt {
  float:left;            /* für #bankueberweisung */
  width: auto;
  height:auto;
}
#bankueberweisung_2{
  float: left;
  margin-left: 1.0em;
  width: 20em;   /* 768 BS Anpassung BSaufloesung_media.js */
  height:auto;
}
#datenschutz {
  float:left;
  width: 22em;  height:auto;
  margin-left: 0.1em;
  border: 0px solid #000000;
}
#nachricht_browser{
  clear:both;
  width:auto;  height:auto;
  padding: 3px 3px 3px 3px;  /* o r u l */
  margin-top:20px;
  border: 1px solid #AFABAB;
}
#bestellung_pruefen_id  {
 width:auto;  height:auto;
 border: 0px solid red;
 padding: 10px 10px 10px 10px;  /* o r u l */
}
.toolTip {
  display: none;
  z-index:99;
  position: absolute;
  background-color: #FFFFFF;
}
#showToolTip{
  width:auto;  height:auto;
  padding: 15px 15px 15px 15px;  /* o r u l */
  border: 3px solid #FFFFFF;
}
#showToolTip br{
  line-height: 2px;
}
#print {
  display:none;   /* wird nur für die Druckvorschau aktiviert */
}