/*
  * some layout colours: 
  * --------------------
  *
  *   dark brown (bg-body)                                  #2c100e
  *   less dark brown (bg-div#all):                         #310e0c
  *   green (href):                                         #6f6  
  *   footer-text/href p.imagerow a:                        #f66 
  *   footer-border, img Startseite border, div#all border: #7d5c26 
  * 
  * img sizes:
  * ----------
  *
  *   1 across: 522 * 335px 
  *   1 on end: 238 * 363px 
  *
  *   2 across: 370 * 243px 
  *   2 on end: 238 * 365px 
  * 
  *   3 across: 291 * 191px 

  *   3 on end: kommt nicht vor 
  * 
  *   4 across: 240 * 156px
  *   4 on end: 190 * 292px 
  * 
  *   5 across: 205 * 123px
  *   5 on end: kommt nicht vor 
  *
  *   Vergroesserungen: 
  *   across: px 612 * 393px
  *   on end: px 340 * 518px
  * 
  */


  /* clearfix */
    .clearfix:after
{
                content: '.';
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
}
    /* this is for ie5mac only, reset for other browsers follows below 
    .clearfix
{
                display: inline-block;
}
    /* Hide from IE-mac \*/
    * html .clearfix
{
                height: 1%;
}
    .clearfix
{
                display: block;
}
    /* End hide from IE-mac 
    -----------------
    clearfix credits: 
    -----------------
    Tony Aslett (csscreator.com), Mark Hadley and Matt Keogh, 
    Alex Robinson, Holly 'n John (positioniseverything) 

    end clearfix */




	body
{
				font-size: 1em;
				line-height: 1.4em;
				padding: 15px 0 0 0;
				background-color: #290a0a;
}


	body.nobg
{
				background-image: none;
}



	*
{
				font-family: Verdana, Arial, Helvetica, sans-serif; /* "Trebuchet MS", */
				padding: 0;
				margin: 0;
				border: 0;
}



	a
{
				text-decoration: none;
}

	ul,
	li
{
				list-style: none;
				list-style-type: none;
}



	p,
	a
{
				font-size: 0.9em;
}

	p.emph
{
				font-weight: bold;
				color: #999;
}


	.left
{
				float: left;
}

	.right
{
				float: right;
}





                                                                  /*
------------------------------------------------------------------ *
   div#all:                                                        *
------------------------------------------------------------------ */
  /* zwei Varianten: 'normal' (ohne Klasse) und mit Klasse 'text'  */


	div#all
{
				width: 980px;
				height: 570px;
				margin: 0 auto;
				background-color: #310e0c;
				border-style: solid; border-color: #7d5c26; border-width: 1px;
				background-repeat: repeat-x;
				background-image: url(../media/img/layout/bg/bg_topnavi.gif);
				/* background-image geht auf Bildseiten ueber die ganze Hoehe, 
				   auf Text-Seiten (je nach Hoehe des Inhalts) eventuell nicht */
}


	div#all.text
{
				height: auto;
				margin-bottom: 60px;
}


	div#all.arbeiten_with_autoheight
{
				height: auto;
				margin-bottom: 60px;
}



                                                                  /* 
------------------------------------------------------------------ *
   div#header:                                                     *
------------------------------------------------------------------ */

	div#header
{
				z-index: 100;
				position: absolute;
				top: 0;
				width: 980px;
				height: 134px;
}


	div#header a#home img
{
				float: left;
				width: 32px;
				height: 32px;
				margin: 100px -106px 0 53px;
}




                                                                  /* 
------------------------------------------------------------------ *
   div#content:                                                    *
------------------------------------------------------------------ */

	div#content
{
				padding: 119px 0 0 0;
}




	div#content p.imagerow
{
    height: 417px;
    /* Die verschiedenen Bilder in den p.imagerow's haben ihre obere 
       Kante nicht alle auf der selben y-Koordinate, da sie auch 
       in der Vertikalen zentriert dargestellt werden sollen (und 
       verschiedene Hoehen besitzen). Eine Einrueckung der Bilder 
       ueber ihren margin-top-Wert bewirkt in Bezug auf den p.imagerow 
       das Gleiche wie wenn ich dieses margin-top direkt auf ihn 
       anwenden wuerde. Also formatiere ich den p.imagerow und verwende 
       statt margin padding. 

       Bei jeder Aenderung des padding-top muss dieser Wert von der 
       urspruenglichen Hoehe des p.imagerow (417px) abgezogen werden. 
       Das geschieht jeweils unten bei den Klassen fuer die verschiedenen 
       Seiten (Templates). */
}


	div#content p.imagerow a
{
				float: left;
				color: #f66;
				margin: 0 9px;
				cursor: hand; 
				/* 'pointer' versteht ie5pc nicht, die Anderen brauchen es nicht ... */
}

	div#content p.imagerow a:hover
{
				color: #fff;
}






/* div#content 'index.htm': 
 * ------------------------------------------- */

	div#content.index p.imagerow
{
				height: 363px;
				padding: 31px 216px 0 216px;
}


	div#content.index p.imagerow a
{
				/* Ist sonst mit ie5pc nicht mehr klickbar: */
				float: none;
				/* wird sonst, als inline-Element, mit ie5pc nicht mehr 
                   richtig formatiert (border, padding fehlen): */
				display: block;
				padding: 3px;
				border-style: solid; border-color: #7d5c26; border-width: 1px;
}


	div#content.index p.imagerow img
{
				/* ohne mit Mozilla-Browsern 3px Abstand unter dem Bild: */
				display: block;
				width: 522px;
				/* Originalgroesse stimmt noch nicht mit CSS-Wert ueberein: */
				height: 344px;
}




/* div#content 'arbeiten.htm': 
 * ------------------------------------------- */




	div#content.arbeiten p.imagerow
{
				height: 178px;
				padding: 0 50px;
				margin: 35px 0 0 0;
}



	div#content.arbeiten p.imagerow a {}


	div#content.arbeiten p.imagerow a img
{
				width: 202px;
				height: 138px;
}


	div#content.arbeiten p.imagerow a span
{
				display: block;
				width: 202px;
				height: 20px;
				text-align: center;
				padding: 10px 0;
}









  /* Textseiten: */

  div#all.text div#content {
    width: 608px;
    color: #fff;
    /* margin: 0 auto 80px auto;
    !! Das 'margin-right/left: auto' marged mit ie6 der div#header auf der 
       linken Seite genauso weit wie den div#content, der div#header wird 
       dann nach rechts aus dem Fenster gedraengt. Daher dank ie6 leider keine 
       saubere css-Loesung moeglich. Es geht leider nicht, angemessen auf den 
       ie zu scheissen: ganze Kontinente wurden in dieser ertrinken.  */
    margin: 0 184px 40px 184px;
    /* Dieses margin per festem px-Wert verhaut der ie6 natuerlich auch - es 
    !! kann aber im ie6-stylesheet per negativ-margin fuer den header 
       ausgeglichen werden. */
}

  div#all.text div#content div.left {
    width: 334px;
}

  div#all.text div#content div.right {
	float: left;
    width: 274px;
}



  div#all.text div#content p, 
  div#all.text div#content h1, 
  div#all.text div#content h2, 
  div#all.text div#content h3 {
    color: #fff;
}

  div#all.text div#content h1, 
  div#all.text div#content h2, 
  div#all.text div#content h3 {
    font-size: 0.8em;
    /* margin-top: 50px;
    !! ie6 reagiert nicht auf dieses margin-top. Den Wert beim 
       'div#all.text div#content' dazu zu zaehlen hat keinen Sinn, 
       dann muesste auf jenen Seiten das background-image des 
       'div#all' um -50px nach oben korrigiert werden. 
       Es tut zwar weh, aber ich werde padding verwenden: */
    padding-top: 50px;
}

  div#all.text div#content h1 {
    margin-top: 5px;
    margin-bottom: 30px;
}


  div#all.text div#content h1.wenigerAbstandNachUnten {
    margin-top: 5px;
    margin-bottom: 15px;
}

  
  div#all.text div#content h2 {
    font-size: 0.7em;
    padding-top: 20px;
}
 
  div#all.text div#content h3 {
    font-size: 0.7em;
    padding-top: 20px;
}

  div#all.text div#content p {
    font-size: 0.75em;
    line-height: 1.9em;
    margin-top: 5px;
    margin-bottom: 15px;
}

  div#all.text div#content p.author {
    font-style: italic;
}




  div#all.text div#content table {
    width: 100%;
    font-size: 0.8em;
    color: #fff;
    margin-top: 10px;
}

  div#all.text div#content table td {
    vertical-align: top;
    padding: 2px 3px 4px 3px;
}

  div#all.text div#content table td.leftcol {
    width: 8em;
}

  div#all.text div#content a {
    font-size: 1.1em;
    color: #0f0;
}


  div#all.text div#content a#up {
    margin: 0 0 0 550px;
}




  div#all div#header ul li a.tocome, 
  div#all div#header ul li a.tocome:visited {
    color: #090;
}





  /* Breite: Bildbreite + 
             p.imagerow-padding-right/left + 
             a-margin-right/left (2*9px, faellt auf manchen Seiten weg (+0)) 
  */



  /* 1 Bild quer: ------------------------------------------------------- */
    /* Breite: 522 + 440 +  18 = 980  */
    /* Hoehe:  376 +  41       = 417  */

  div#content.oneAcross p.imagerow {
    height: 376px;
    padding: 41px 220px 0 220px;
}

  div#content.oneAcross p.imagerow a {
    width: 522px;
}

  div#content.oneAcross p.imagerow a img {
    width: 522px;  /* Normgroesse !!! */
    height: 335px; /* Normgroesse !!! */
}


  /* 1 Bild hochkant: ----------------------------- */
    /* Breite: 238 + 724 +  18 = 980  */
    /* Hoehe:  389 +  28       = 417  */

  div#content.oneOnEnd p.imagerow {
    height: 389px;
    padding: 28px 362px 0 362px;
}
  div#content.oneOnEnd p.imagerow a {
    width: 238px;
}

  div#content.oneOnEnd p.imagerow a img {
    width: 238px;  /* Normgroesse !!! */
    height: 363px; /* Normgroesse !!! */
}





  /* 2 Bilder quer: ---------------------------------------------------- */
    /* Breite: 740 + 204 +  36 = 980  */
    /* Hoehe:  333 +  84       = 417  */

  div#content.twoAcross p.imagerow  {
    height: 333px;
    padding: 84px 102px 0 102px;
}

  div#content.twoAcross p.imagerow a {
    width: 370px;
}

  div#content.twoAcross p.imagerow a img {
    width: 370px;  /* Normgroesse !!! */
    height: 243px; /* Normgroesse !!! */
}


  /* 2 Bilder hochkant: --------------------------- */
  /* Breite: 476 + 468 + 36 = 980  */
  /* Hoehe:  391 +  26      = 417  */

  div#content.twoOnEnd p.imagerow {
    height: 391px;
    padding: 26px 234px 0 234px;
}
  div#content.twoOnEnd p.imagerow a {
    width: 238px;
}

  div#content.twoOnEnd p.imagerow a img {
    width: 238px;  /* Normgroesse !!! */
    height: 365px; /* Normgroesse !!! */
}





  /* 3 Bilder quer: ---------------------------------------------------- */
  /* Breite: 870 +  56 + 54 = 980  */
  /* Hoehe:  308 + 109      = 417  */

  div#content.threeAcross p.imagerow {
    height: 308px;
    padding: 109px 24px 0 28px;
} /* Fehler mit ie5mac, daher padding-left zu niedrig !!! */

  div#content.threeAcross p.imagerow a {
    width: 291px;
}

  div#content.threeAcross p.imagerow a img {
    width: 291px; 
    height: 191px;
}


  /* 3 Bilder hochkant: nicht vorhanden ----------- */





  /* 4 Bilder quer: ---------------------------------------------------- */
  /* Breite: 960 + 20 + 0 = 980  */
  /* Hoehe:  306 + 111    = 417  */

  div#content.fourAcross p.imagerow {
    height: 306px;
    padding: 111px 10px 0 10px;
}

  div#content.fourAcross p.imagerow a, 
  div#content.fourAcross p.imagerow a:visited {
  /* ie6 verigbt ohne diese Zeile sonst das margin left/right */
    width: 240px;
    margin-right: 0;
    margin-left: 0;
}

  div#content.fourAcross p.imagerow a img {
    width: 240px;  /* Normgroesse !!! */
    height: 156px; /* Normgroesse !!! */
}


  /* 4 Bilder hochkant: --------------------------- */
  /* Breite: 760 + 148 + 72 = 980  */
  /* Hoehe:  355 +  62      = 417  */

  div#content.fourOnEnd p.imagerow {
    height: 355px;
    padding: 62px 74px 0 74px;
}

  div#content.fourOnEnd p.imagerow a, 
  div#content.fourOnEnd p.imagerow a:visited {
  /* ie6 verigbt ohne diese Zeile sonst das margin left/right */
    width: 190px;
}

  div#content.fourOnEnd p.imagerow a img {
    width: 190px;  /* Normgroesse !!! */
    height: 292px; /* Normgroesse !!! */
}





  /* 5 Bilder quer: ---------------------------------------------------- */
  /* Breite: 960 +  20 + 0 = 980  */
  /* Hoehe:  287 + 130     = 417  */

  div#content.fiveAcross p.imagerow {
    height: 291px;
    padding: 126px 10px 0 10px;
}

  div#content.fiveAcross p.imagerow a, 
  div#content.fiveAcross p.imagerow a:visited {
    width: 192px;
    margin-right: 0;
    margin-left: 0;
}

  div#content.fiveAcross p.imagerow a img {
    width: 192px;  /* Normgroesse !!! */
    height: 123px; /* Normgroesse !!! */
}


  /* 5 Bilder hochkant: nicht vorhanden ----------- */






                                                                  /* 
------------------------------------------------------------------ *
   div#footer:                                                     *
------------------------------------------------------------------ */

  /* Gesamthoehe: 34px 
     [border-top-width + padding-top + height + padding-bottom] */


  div#footer {
    clear: both;
    width: 960px;
    height: 22px;
    /* font-size: 0.8em;
       Info: font-size-Angabe in 'em' wirkt sich, wenn die 'width' 
       auch in 'em' angegeben ist, auch auf die 'width' aus. */
    color: #f66;
    padding: 5px 0 6px 0;
    margin: 0 10px;
    border-style: solid; border-color: #7d5c26; border-width: 1px 0 0 0;
}



  div#footer a, 
  div#footer a:visited, 
  div#footer a:hover {
    cursor: pointer;
}

  div#footer a#weiter img, 
  div#footer a#zurueck img {
    float: right;
    width: 50px;
    height: 16px;
}

  div#footer a#zurueck img {
    margin: 0 10px 0 0;
}








  div#footer p {
    width: 750px;
    font-size: 0.7em;
    text-align: center;
    margin: 0 110px 0 100px;
    /* background-color: #9f9; */
}








  div#footer.index {
    width: 530px;
    height: 12px;
    padding: 0 0 11px 0;
    margin: 0 225px;
    border-width: 0 0 1px 0;
}

  div#footer.index p {
    width: 260px;
    margin: 0;
}

  div#footer.index p.left {
    text-align: left;
}

  div#footer.index p.right {
    text-align: right;
}