/******************************************************************************************
Autorin: Stefanie Janine Stoelting
E-Mail:  kontakt@Stefanie-Stoelting.de

CSS-Datei zum Ausprobieren
style-1

Die Datei enthaelt zwei CSS Formatierungen, eine fuer die Anzeige auf dem Monitor und
eine fuer den Druck. Zuerst werden die am meisten benutzten Formatierungen zentral
eingestellt. Das spart die Einstellung bei jedem einzelnen Element. Wenn ein Element
anders formatiert werden soll, kann es unterhalb jederzeit getan werden. Es gewinnt
immer die letzte Formatierung.
******************************************************************************************/
@media screen{
  body, h1, h2, h3, p, ul, a, table, tr, td {
    font-family: Arial, Helvetica;
    font-style: normal;
    font-weight: normal;
    font-size: medium; 
    color: #000000;
    text-align: left;
  }
  a:link {color:#000000;}
  a:visited {color:#000000;}
  a:active {color:#000000;}

  
  body {
    background: #BACEC2;
    margin: 0px;
    border: 0px;
  }
  
  h1 {
    font-weight: bold;
    text-decoration: underline;
    font-size: x-large;
  }
  h2 {
    font-weight: bold;
    font-size: large;
  }
  h3 {
    font-weight: bold;
    font-size: large;
  }

  /*Spalte fuer das Menue Links*/
  #divmenu {
    position: absolute;
    left: 0px;
    width: 190px;
    height: 400px;
    top: 0px;
    background-image: url(images/menu.png);
    background-repeat: no-repeat;
    vertical-align: top;
    padding-left: 8pt;
    padding-top: 25px;
  }
  
  /*Spalte rechts mit Logo*/
  #divlogo {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 25px;
    height: 400px;
    /*
    background-image: url(images/wow.png);
    background-repeat: no-repeat;
    background-position: center 150px;
    */
  }
  #spanlogo {
    position: relative;
    height: 400px;
  }
  
  /*Mittlere Spalte mit Inhalt*/
  #divvalue {
    position: absolute;
    top: 0px;
    left: 180px;
    right: 40px;
    padding: 10px;
    padding-top: 0px;
  }

  /*Die Kopfzeile ist nur im Druck sichtbar*/
  #divheader {
    visibility: hidden;
  }

  /*Formatierung der Absaetze im Inhalt*/
  p.article:first-letter {
    font-size: large;
    font-weight: bold;
  }
  p.article { 
    text-align: justify;
  }
  p.article-center { 
    text-align: center;
  }
  p.contact {
    text-align: left;
  }
  p.header {
    font-size: 0pt;
    visibility: hidden;
  }
  p.footer {
    font-size: 0pt;
    visibility: hidden;
  }
  
  /*Listen fuer Links*/
  ul.main { 
    list-style: disc;
    list-style-position: outside;
    padding-top: 0pt;
    padding-left: 10pt;
    margin: 0pt;
    margin-left: 10pt;
  }
  li.list-main {
    margin: 0px;
    margin-bottom: 3px;
  }
  
  ul.sub {
    font-size: small;
    color: aqua;
    list-style: circle;
    list-style-position: outside;
    padding: 1px;
    margin-left: 2px;
  }

  /*Liste fuer das Hauptmenue*/
  ul.ulmenu {
    list-style: none;
    list-style-position: outside;
    padding: 0px;
    margin: 0px;
    font-size: large;
    margin-left: 10px;
    margin-top: 0px;
  }
  li.limenu {
    margin: 0px;
    margin-bottom: 5px;
  }
  li.limenu-current {
    margin: 0pt;
    margin-bottom: 5px;
    font-size: large;
    color: #AA0000;
  }

  /*Liste fuer Untermenue*/
  ul.menu-sub {
    list-style: none;
    list-style-position: outside;
    padding: 0px;
    margin: 0px;
    font-size: medium;
    margin-left: 10px;
    margin-top: 0px;
    margin-bottom: 5px;
  }
  li.menu-sub {
    font-size: medium;
  }
  li.menu-sub-current {
    font-size: medium;
    color: #AA0000;
  }
  
  /*Links im Menue*/
  a.amenu {
    text-decoration: none;
    font-size: large;
  }
  a.amenu:hover {color:#FF0000;}

  a.menusub {
    text-decoration: none;
    font-size: medium;
  }
  a.menusub:hover {color:#FF0000;}

  /*Links im Text*/
  a.article {
    text-decoration: none;
    font-color: #0000FF; 
  }
  a.article:link {color:#0000FF}
  a.article:hover {color:#FF0000}
  a.article:visited {color:#0000FF;}

  /*Links als Liste*/
  a.linklist {
    text-decoration: none;
  }
  a.linklist:link {color:#008800}
  a.linklist:hover {color:#FF0000}
  a.linklist:visited {color:#008800}
}/*End of screen*/


/******************************************************************************************
Fuer den Druck benutze ich ein zweites Stylesheet, da die dritte Spalte sonst als leerer
Bereich auf dem Papier landet. Es sieht nicht gut aus und ist auch muehsamer zu lesen.
Zusaetlich laesst sich die Farbe bei den Links entfernen.
Dieser Bereich ist in beiden Stylesheets gleich.
******************************************************************************************/
@media print{
  body, h1, h2, h3, p, ul, a, table, tr, td {
    background: #FFFFFF;
    font-family: "Times New Roman", Times, Courier, Helvetica;
    font-size: 14pt;
  }

  body {
    margin: 0px;
    border: 0px;
  }
  a{
    text-decoration: none
  }
  a:link {color:#000000}
  a:visited {color:#000000}
  a:active {color:#000000}
  a:hover {color:#000000}

  h1 {
    font-weight: bold; 
    font-size: 20px;
  }
  h2 {
    font-weight: bold; 
    font-size: 18px;
  }
  h3 {
    font-weight: bold;
    font-size: 16px;
  }

  #divmenu {
    visibility: hidden;
  }

  #divlogo {
    visibility: hidden;
  }

  #divvalue {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    padding: 0pt
  }

  p.article:first-letter {
    font-size: 18pt;
    font-weight: bold;
  }
  p.article { 
    text-align: justify;
    line-height: 25px;
  }
  p.article-center {
    font-size: 14pt;
    text-align: center;
    line-height: 25px;
  }
  p.contact {
    text-align: left;
    line-height: 25px;
  }
  p.header {
    font-weight: bold; 
    font-size: 20px;
  }
  p.footer {
    text-align: justify;
    line-height: 25px;
  }
}/*End of print*/