/* KRITTL-LAYOUT design & layout by  karl csar 01.04.2005 */

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

/* Zentrierlogik: //http://www.thestyleworks.de/tut-art/centerblock.shtml */

/* Standard CSS  */

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

html, body, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd,
span, a, table, td, form, legend, fieldset, img, .toolTip,
textarea, input, hr, ol, ul, li,
#TXT, #scrollframeTXT, #contentTXT,
#Text, #menu, #move_left, #move_right, #move_bottom, #move_top, #move_down,
#bottom, #top, #top_text, #content, #info_fenster,
#projekt_ueberschrift .img_menu, .sprungmarke, .bild, #top_menu_big_foto,
#ladeanzeige, #contentGesamtText, #contentText, #contentBilder,
#menu_info, #Bilder, #hr_bottom, #hr_top, #impressum, impressum_content,
#scrollframeText, #scrollframeBilder, #Text, #druck, #druck_js,
#home_ueb, #menu_bottom, #info, #contentTopBilderBottom,.sitemap,
#rechter_abschlussrand, #logo, #foto_text, #showToolTip {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border:0;
/*                                          ms eigenschaft
  scrollbar-arrow-color: #000000;
  scrollbar-base-color: #FFFFFF;
  scrollbar-3dlight-color: #000000;
  scrollbar-darkshadow-color: #000000;
  scrollbar-highlight-color: #AFC4ED;
  scrollbar-shadow-color: #6699CC;
  scrollbar-track-color: #6699CC;
*/
}
html {
  overflow:hidden;
}
html, body, .email {
  font-size: 101%;   /* hilft bei relativen Schriftgrößenproblemen (em) */
                     /* siehe http://www.drweb.de/csstechnik/css-strukturieren.shtml */
  font-family: verdana, arial, geneva, helvetica;
  color: #000000;
}
html {
  width:100%;
  height:99%;    /* für firefox 99  sonst scrollbalken */
}
body {
  overflow: hidden;
  width: 97.5%; /* firefox 97.5 */
  height:100%;
  padding: 0.0em 0.0em 0.0em 1.0em; /* o r u l */
  background: #FFFFEB;
  position:absolute;
  top:0;      /* für anpassung bei bildschirmauflösung */
  left:0px;   /* bei 17 zoll auf 30px Bildschirmaufloesung() */
}
h6{
  text-align:left;
}
fieldset, form  {
  font-size: 12px;
  color:#808080;
  padding: 0.5em;
  margin: 0.0em 0.8em 0.0em 0.8em; /* o r u l */
  border: 1px solid #E9E9E9;
}
form {
  border: 0;
}
/* 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/ */
input, textarea{
  border: 1px solid #E9E9E9;
}
.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;
}
.form_button, form .form_button {
  display:inline;
  text-align: center;
  color: #E9E9E9;
  background: #B1B1B1;
  font-weight: 700;    /* 100 normal, 700 bold, 900 bolder */
  width: auto;  height:auto;
  margin: 10px 0 10px 0; /* o r u l */
  border: 2px solid #AFABAB;
}
.stern {
  color:#FF0000;
  font: 14px verdana, arial,  sans-serif;
}
.center {
  text-align: center;
}

.color_black {
  color:#000000;
}

.clear_both {
  clear: both;
}
.sitemap{
  text-decoration: none;
}
a.sitemap:hover{
  text-decoration: none;
  background-color: #FFFFFF;
}

.img_menu{  /* Hauptmenu icon quadrat */
  border:0.05em solid #AFABAB;
  margin-right:0.3em;
  background:#AFABAB;

}
.img_submenu{  /* Submenu icon quadrat */
  border:0.05em solid #000000;
  margin-right:0.3em;
  background:#AFABAB;
  background: #000000;
}
.img_menu_kreuz{  /* menu icon kreuz */
  border:0.00em solid #AFABAB;
  margin-right:0.3em;
  background:#FFFFFF;
  
}
.email img {
  text-decoration: none;
  background:#AFABAB;
  padding: 0px;
}
a.email:hover {
  text-decoration: none;
  background:#FFFFFF;
  padding: 0;
  border: 0px solid red;
}
.bild{
  float:left;
  text-align: center;
  margin-top:0.0em;
  padding-left: 0.2em;  /* o r u l */
}
.bild_clear {
  clear:both;
  float:left;
  text-align: center;
  margin-top:0.7em;
  padding-left: 0.3em; /* o r u l */
}
.bild img, .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;
}
.screen {
  display:block;
}
.error_anzeige{
  color:red;
  
}
.normal, .normal_horz {
  background: #FFFFEB;
  color:#808080;
  font-size:12px;      /* menu text nicht dyn. veränderbar */
}
.stark {
  background: #E8E6E6;
  color:#000000;
  font-size:12px;      /* menu text nicht dyn. veränderbar */
}
/* ============================================= */
#horz_vert {  /* horz zentrieren */
  text-align: center;
  position:relative;
  left:0;
  top:0;        /* angepasst im BSaufloesung.js */
  height: 100%; /* gesetzt clientlayout_krittl.tpl*/
  width: auto;
  padding-bottom: 2.0em;  /* notwendig weil beim langsamen laden */
                          /* menu und textbox abgeschnitten werden */
  border: 0px solid blue;
}
/* ======================================= */
#logo_menu { /* für firefox: damit textcontainer + bildcontainer left sind */
  float:left;
  width:auto; /* muss gesetzt sein bei div */
  height:auto;
  position:relative;
  left:0;
  top:60px;   /* BS: 800 auf 90 BSaufloesung.js */
  border: 0px solid red;
}
#info_fenster {  /* vorschaufenster */
 float:left;
 width: 179px;  /* muss auch in show() für img verändert werden */
 height:155px;
 text-align: left;
}

#info_fenster img  {  /* für Vorschaufotos */
  display: block;     /* textzeile */
  border:0em;
}
#info {           /* für TEXT infovorschau  im tooltip */
  width:10.0em; height:auto;
  padding:0.1em;
  border: 0 solid #E8E6E6;
}
#info p {           /* Textvorschau im tooltip */
  text-align: left;
  line-height: 14px;
  font-size:11px;   /* vorschau text nicht dyn. veränderbar */
}
#logo a img { /* projektseite, #logo siehe: logo_projektseite.css */
  display:block;
  width:auto;
  height:auto;
  margin:0; /* zentrieren im FF  lt. Wunsch von Krittl deaktiviert von auto auf 0 */
  text-align:left;
  border: 0px solid green;
}
#menu {
 display:none; /* nach homeseite auf block */
 clear:both;
 float:left;
 position: absolute; /* notwendig bug a:hover */
 left:0em;
 top:0em;           /* gesetzt BSaufloesung.js  */
 width:179px;      /* menu breite nicht dyn. veränderbar (14.6em) */
 height:auto;
 border:0px solid black;
}
#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 */
  text-decoration: none;
  display: block;
  height: 100%;
  background: #FFFFEB;
  color:#808080;
  margin-top:0.1em;
  margin-bottom: 0.1em;
  padding:0.20em 0 0.20em 0.2em;  /* o r u l */
  font-size:12px;      /* menu text nicht dyn. veränderbar */
  border: 0 none;
}
#menu dd ul li a{ /* Submenu */
  background: #FFFFEB;          /* so wie hauptmenü */
}
#menu li a:hover, #menu dt a:hover, #menu dd ul li a:hover,
a:hover .normal {
  background: #E8E6E6;
  color:#000000;
  margin-top:0.1em;
  margin-bottom:0.1em;
  padding:0.20em  0 0.20em 0.2em;  /* o r u l */
  border:0;
}
/* ==== allg. Textcontainer: Impressum, Philosophie, Projekttexte ===== */
#contentTXT {
  display:none;
  float:left;
  position:relative;
  top:0em;
  left:1em;
  width:53%;  /* firefox */
  height:auto;
}
#scrollframeTXT  { /* div name verwendet in scroll-function!! */
                   /* fix: "scrollframe" + "TXT" */
  overflow: hidden; /* IE unbedingt notwendig zum srollen  */
  display:block;
  width:100%;  height:440px;
  margin-top:40px; /* px wegen firefox */
  border-left: 0.05em solid #E8E6E6;
}
#TXT {           /* div name verwendet in scroll-function */
   width:96%; height:auto;
   padding-top:0.3em;
   padding-left:0.4em;
   padding-right: 0.5em;
   padding-bottom:0.3em;
   text-align:left;
}
#Imove_top {
   cursor: pointer;
   float:left;
   position:absolute;
   top:47px;  /* px wegen firefox */
   left:-0.7em;
}
#Imove_down {
   cursor: pointer;
   float:left;
   position:absolute;
   top:460px; /* px wegen firefox */
   left:-0.7em;
}
/* ========================================== */
#content  { /* top: einzel show menu (BIG) */
            /* content: textcontainer + bildcontainer */
  float:left;
  position:relative; /* wegen verschiebenung bei bildschirmauflösung */
  top:70px;          /* 90px BS:800 BSaufloesung.js  */
  left:15px;         /* abstand menucontainer und content text+bilder */
  width:78%;        /* 78% kein auto wegen firefox, gesetzt clientlayout_*.tpl */
  height:auto;
  border: 0px solid blue;
}
#contentGesamtText {  /* textcontainer */
  float:left;
  width:28%;          /*  dzt. geht kein auto / gesetzt clientlayout_*.tpl*/
  height:100%;
  position: relative;
  top:160px;         /* 160 gesetzt preload.js => 170px BS:800 BSaufloesung.js */
  left:0.0em;
  border: 0px solid red;
}
#contentText {
  float:left;
  width:100%;  /* firefox */
}
#scrollframeText { /* div name verwendet in scroll-function!! */
  overflow: hidden; /* IE unbedingt notwendig zum srollen */
  display:block;
  width:100%;      /* sollte bleiben, ev. für 800 X 600 */
  height: 215px;  /* wenn dieser wert verändert wird, ändert sich auch die höhe der seite */
                  /* nagigation.htm show()+ preload.js bildershow() */
                  /* px wegen firefox */
}
#Text {            /* div name verwendet in scroll-function */
   width:100%;  height:auto;
}
#Text img {  /* bei homeseite */
  border:0;
}
/* ======================================================= */
#contentTopBilderBottom {   /* container Top - Bilder - Bottom */
                            /* wegen position big-menu */
  float:right;              /* wegen firefox */
  width:70%; height:auto;
  border: 0px solid green;
}
#top  {          /* top: überschriftsbereich + big-einzelbilder menu */
  display:block; /* aufruf impressum: none in clientlayout_*.tpl */
  float:left;
  width:100%;
  height: 0px; /* 105 px wegen firefox */
}
#top_menu_big_foto{  /* notwendig: weil beinflussung  UL bei #menu */
   z-index:2;  /* wegen firefox */
   float:left;
   margin-left:5px;
   display:inline;
   text-align:left;
   width:auto; height:auto;
}
#top_menu_big_foto ul  { /* preload.js: Bildershow() */
                        /* referenzierung notwendig: weil beinflussung  UL bei #menu */
   text-align:left;
   list-style-type: none;
   width:23em;   /* wegen firefox mussangabe im em */
   height:1.5em;
   white-space: nowrap; /* kein Zeilenumbruch wenn zu lange nur Firefox */
}
#top_menu_big_foto ul li {
  display:inline;
  list-style-type: none;
  margin-left:0px;
  margin-right:0px;
  padding:0;
  border: 1px solid #E8E6E6;;
}
#top_menu_big_foto ul li a {
  text-decoration: none;
  margin:0;
  padding:0;
  color:#808080;
}
#top_menu_big_foto ul li a:hover {
  margin:0;
  padding:0;
  background: #E8E6E6;  /* sanftes grau */
}
/* ================================================== */
#contentBilder{   /* Bildcontainer für THU + BIG*/
  z-index:1;      /* kann menu_bottom überlagern */
  float:left;
  position:relative;
  top:0px;        /* 20px BS:800 BSaufloesung.js */
  left:0em;
  width:100%;   /* 70 % */
  height:auto;
  margin-top:138px; /* gesetzt prelaod.js: Bildershow() */
                   /* gesetzt preload.js: bigFotoAnzeige() 15px für BIG-Foto   */
  text-align:left;
  border: 0px solid yellow;
}
#scrollframeBilder { /* äußerer Bereich => Scrollbereich */
                     /* scrolling wird über Javascript gesteuert */
  overflow:hidden;
  float:left;
  width:97%;   /* 99% ohne border */
  height:auto;
}
#Bilder {  /* innerer Bereich muss in einer Zeile alle Bilder aufnehmen */
           /* und muss auf jeden Fall eine > WIDTH als #scrollframeBilder besitzen, */
           /* damit nicht eine zweiter Bilderzeile erzwungen wird */
   width:550em;
}
#rechter_abschlussrand {
  display:none;
  float:left;
  width:auto; height: 202px;
  border-right: 12px solid #000000;
}
#ladeanzeige  {
  display:none;
  text-align: left;
  position:relative;
  top:0;
  left:6em;
  width: 100%;  height:auto;
  margin-top:2em;
}
#move_down {    /* preload.js bildershow() auf none homeseite */
   display: none; /* startwert */
   cursor: pointer;
   float:left;
   position:absolute;
   top:0.0em;
   left:-0.6em;

}
#move_top {         /* preload.js bildershow() auf none homeseite */
   display: none;   /* startwert */
   cursor: pointer;
   float:left;
   position:absolute;
   top:197px; /* px wegen firefox */
              /* in clientlayout_krittl.tpl, show() none home seite */
              /* in preload.js bildershow 9.1em für einzelprojekt */
   left:-0.6em;
}
#move_left  {
   display: none;   /* startwert */
   float:right;
   cursor: pointer;
   margin-right: 0.4em;
}
#move_right {
   display: none;   /* startwert */
   float:right;
   cursor: pointer;
   margin-right: 0.60em;
}
/* ====== horizontale navigation ======== */
#menu_bottom {
 z-index:0;          /* kann dann von BIG-Foto überlagert werden */
 display:none;        /* wird mit  JS verändert */
 float:left;
 position: absolute; /* notwendig bug a:hover */
 left:0em;           /* gesetzt preload.js */
 top:0em;            /* gesetzt BSaufloesung.js  und bei BIG-Anzeige preload.js */
 width:50%;          /* muss gesetzt sein bei div */
 height:auto;
 padding-top: 5px;   /* firefox */
 text-align: left;
 border: 0px solid red;
}
#menu_bottom dl {
 width:auto;
 height:25px;
}
#menu_bottom dt {
  cursor: pointer;
  display:inline;
}
#menu_bottom dt a  {
  display: inline;
  text-decoration: none;
  background: #FFFFEB;
  color:#808080;
  padding-right:7px;
  padding-left:7px;
}
#menu_bottom dt a:hover,
#menu_bottom a:hover .normal_horz {
  color:#000000;
  background: #E8E6E6;
}

#home_ueb {  /* wird bei homeseite auf BLOCK gesetzt */
  display: none;
  clear:both;
  position:relative;
  top:8.0em;  /* achtung kann left und right scroll überlagern */
  left:8em;
  width:90%; height:auto;
  text-align: center;
  letter-spacing: 8px;
  margin-left:0em;
}
#druck {
  display:none;
}
.toolTip {
  z-index:99;
  position: absolute;
  display: none;
  background-color: #FFFFFF;
}
#showToolTip{
  width:auto;
  height:auto;
  padding: 15px 25px 15px 15px;  /* o r u l */
  border: 1px solid #AFABAB;
}
#showToolTip br{
  line-height: 2px;
}