/*
 * Screen.css für Bildschirmausgabe
 *
 * */


/* ***** debug ***********************************************************
div                                                                        { border: 1px solid black; }    */



/*
 * Angaben, die überall im Dokument gelten
 *
 * */

img {
  border:none;
}

p {
  margin:0em 0em 0.5em 0em;
  line-height: 1.4em;
}


h1 {
  margin:0px 0px 0.5em 0px;
  color:#666666;
  font-weight:bold;
  font-size:1.2em;
}

h2 {
  margin:0px 0px 0.4em 0px;
  color:#666666;
  font-weight:bold;
  font-size:1.1em;
}

.grau {
  color:#999999;
}

.bildertext {
  font-family:Helvetica,Verdana,Arial,sans-serif;
  font-size:0.9em;
  line-height: 3.0em;
}


/*
 * Bodyränder auf Null setzen, damit alle Browser die gleiche Ausgangssituation haben.
 * Globale Einstellungen wie Font setzen.
 *
 * */
body {
  margin-left:6px;
  margin-right:auto;
  padding:0px;
  font-family:Helvetica,Verdana,Arial,sans-serif;
  font-size:0.9em;

  background:#88A1B7 url(../images/bg2.gif) bottom right no-repeat fixed;
  /* 598FA9 */
  font-size:0.9em;
}


/*
 * Leinwand, die alles zusammenhält
 * Mit position, weil wir für den Fall einer Positionierung innerhalb von 'canvas'
 * schon mal ein Elternelement mit position-Angabe brauchen
 * Navigationshintergrund als Bild auf unendlich in der y-Achse, damit der
 * Navigationshintergrund mit der Höhe von div.content automatisch mitwächst
 *
 * */

div.canvas {
  position:relative;
  top:10px;
  left:0px;
  width:982px;
  background:url(../images/navigationBg.png) repeat-y #DDDDDD;
}

/*
 * Box für Header
 * Das Bild wird als Hintergrundbild eingebaut, weil die Suchmaschinen dann
 * weniger <img ...> und mehr Textinhalt sehen
 *
 * */
div.header {
  position:relative;
  top:16px;
  left:0px;
  width:966px;
  height:154px;
  background:url(../bilder/logo.jpg);
}

/*
 * Name der Künstlerin, automatisch in der Mitte von div.content
 *
 * */
div.kunst {
  margin:1.5em;
  text-align:center;
  color:#662308;
}

/*
 * div.navigation lassen wir schweben und zwar links vom nachfolgenden div.content
 * Im HTML sind sie nacheinander, beim Betrachten nebeneinander.
 *
 * */

/*
 * farbiges Feld links im content *
 * */

div.field {
  float:left;
/*  width:112px;
*/
  width:154px;
  height:154px;
  position:relative;
  top:100px;
  left:850px;
  background:#FF0000;
}

div.navigation {
  float:left;
/*  width:112px;
*/
  position:absolute;
  top:158px;
  width:142px;
  left:16px;
  /*
  position:relative;
background:url(../images/menuBg.png);
*/
  background:#662308;

}

div.navpad {
  position:relative;
  margin:10px 0px 0px 10px;
}


/*
 * unordered lists für Menü, weil sie die items semantisch als "wir gehören zusammen" darstellen
 * Bullets abgeschaltet
 *
 * */
div.navpad ul {
  list-style:none;
  margin:0px;
  padding:0px;
  line-height: 1.4em;

}


div.navpad li {
  padding:8px 0px 0px 0px;
  margin:0px;
  /* display:block;  */
   font-weight:bold;
   color:#DDDDDD;
}


div.navpad li a:link {
   text-decoration:none;
   font-weight:bold;
   color:#DDDDDD;
}

div.navpad li a:visited {
   text-decoration:none;
   font-weight:bold;
   color:#DDDDDD;
}

div.navpad li a:hover{
  text-decoration:none;
  color:#662308;
  background-color: #DDDDDD;
  display:block;
}


div.navpad li li {
  padding:0px 0px 0px 15px;
  margin:0px;
  text-align:left;
}

div.navpad li li a {
   text-decoration:none;
   font-weight:normal;
   color:#DDDDDD;
}

div.navpad li li a:link {
   text-decoration:none;
   font-weight:normal;
   color:#DDDDDD;
}

div.navpad li li a:visited {
   text-decoration:none;
   font-weight:normal;
   color:#DDDDDD;
}

div.navpad li li a:hover{
  text-decoration:none;
  color:#662308;
  background-color: #DDDDDD;
  display:block;
}



/*
 * Content-Bereich
 * Innenabstand rechts und links.
 * Aussenabstand links, damit nach dem umflossenen div.navigation nicht
 * alles nach links rutscht.
 * Schriftfarbe für alle Kinder-Elemente gesetzt.
 *
 * */

div.content {
  position:relative;
  top:0px;
  left:10px;
  padding:0px 154px 8px 15px;
  margin-left:154px;

 color:#666666;

}

div.content a {
  text-decoration:none;
   font-weight:normal;
   color:#662308;
}

.press1 {
  color:#969696;
  font-size:0.8em;
  font-weight:normal;
}

.press2 {
  font-weight:normal;
}

div.akzidenz {
  position:relative;
  top:0px;
  left:10px;
  padding:0px 154px 8px 45px;
  margin-left:154px;
  margin-right:150px;
  color:#666666;
}

div.akzidenz a {
  text-decoration:none;
   font-weight:normal;
   color:#662308;
}


div.akzidenz a:focus,
div.akzidenz a:hover {
  text-decoration:none;
  color:#BF0000;
  background-color: #DDDDDD;
}



/*
div.content p {
  line-height: 1.4em;
}

div.akzidenz p {
  line-height: 1.6em;
}
*/


/*
 * Standardbullets sehen mistig aus.
 * Hab eines gebastelt und zur Verwendung angewiesen ;)
 *
 * */

div.content ul {
  list-style:url(../images/bullet.png);
}