/* gelb.css */
   /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /*    Die Haupt-Stylesheet-Datei der Seite www.HalloFreun.de    */
 /*     überarbeitet von Martin Heller im Februar - Juni 2004    */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 /*       Grundlegende Bereiche       */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
html      { /* draussen ist es grün */
            background-color:#CFC;
          }
body      { /* dasselbe Grün        */
            min-width:745px;
            max-width:60em;
            background-color:#CFC;
            font-size:13px;
            font-family:sans-serif;
          }
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 /*     Hauptgestaltungselemente      */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#aussen   { /* enthält Rand, Content*/
            margin-left:10px;
            padding-top:1.5ex; padding-right:0.5em; padding-bottom:1.0ex; padding-left:0em;
            background-image:url(mirage.jpg);
          }
#rand     { /* enthält die Kästen   */
            width:14em;
            float:left;
            margin-left:-10px; margin-right:10px;
            text-align:left;
          }
.kasten   { /* Navigation, News,... */
            margin-top:10px;
            padding:5px;
            background-color:#FEF800;
            border-width:3px;         border-style:solid;
            border-top-color:#FF8;    border-right-color:#CC0;
            border-bottom-color:#AA0; border-left-color:#F3F380;
          }
.content0,  /* kein Hintergrundbild */
.content1,  /* Bild u.r.: Lempuyang */
.content2,  /* Bild Pasir Putih     */
.content3 { /* Bild Menjangan       */
            margin-left:80px;
            text-align:justify;
          }
.content0 { /* kein Hintergrundbild */
            padding:1.5ex;
            background-color:#F6FFE0;
          }
.content1 { /* Bild u.r.: Lempuyang */
            padding:1.0ex 70px 1.0ex 1.0em;
            background:#FFF url(lempuyang1.jpg)   no-repeat bottom right;
          }
.content2 { /* Bild Pasir Putih     */
            padding:1.0ex 60px   0   1.0em;
            background:#FFF url(pasir-putih2.jpg) no-repeat bottom right;
          }
.content3 { /* Bild Menjangan       */
            padding:1.0ex 60px 1.0ex 1.0em;
            background:#FFF url(menjangan3.jpg)   no-repeat bottom right;
          }
.links    { width:176px; }
.linksh   { width:143px; }
.links,     /* Bild am linken Rand  */
.linksh   { /* hochkant, schmaler   */
            float:left;
            margin: 8px 8px 3px 0px;
            text-align:center;
            background-color:#F6FFE0; color:blue;
          }
.rechts   { width:176px; }
.rechtsh  { width:143px; }
.rechts,    /* Bild am rechten Rand */
.rechtsh  { /* hochkant, schmaler   */
            float:right;
            margin: 8px 0px 3px 8px;
            text-align:center;
            background-color:#F6FFE0; color:blue;
          }
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 /*    Hierarchie der Textelemente    */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
h1        { /* goldene Titelplatte  */
            margin:07px 00px 18px 80px;
            padding:5px  5px  5px  5px;
            text-align:center;
            background-color:#FEF800; color:#C00;
            font-family:'Copperplate Gothic Bold','Times New Roman',serif; font-size:2em;
            border-width:4px;         border-style:solid;
            border-top-color:#FF8;    border-right-color:#CC0;
            border-bottom-color:#AA0; border-left-color:#F3F380;
          }
h2        { /* zweite Überschrift   */
            margin:10px 00px 10px 4em;
            text-align:center;
            font-size:21px;
          }
h3        { /* Kasten-Überschrift   */
            margin-top:00px; margin-bottom:05px;
            font-size:16px;
          }
h4        { /* Bericht-Überschrift  */
            margin-top:10px; margin-bottom:00px;
            font-size:16px;
          }
h5        { /* Titel der Linkliste  */
            margin-top:10px; margin-bottom:00px;
            text-align:right;
            color:#090;
            font-size:13px;
            font-weight:normal;
          }
p         { /* Absatz               */
            margin-top:00px; margin-bottom:00px;
          }
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 /*       Gestaltung der Links        */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#rand a, .continue a      { font-weight:bold; }
a:link    { color:blue;     text-decoration:underline; }
a:visited { color:#009;     text-decoration:underline; }
a:hover   { color:green;    text-decoration:none;      }
a:active  { color:#C00;     text-decoration:underline; }
a:focus   { color:red;      text-decoration:underline; }
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 /*        spezielle Klassen          */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.versetzt { /* eingeruecktes Menu   */
            margin-left:1em;
          }
.antiqua  { /* groß, ungewöhnlich   */
            margin:10px 0 0 3.5em;
            font-family:'Book antiqua',serif; font-size:160%;
          }
.verdana  { /* technisch            */
            font-family:Verdana,sans-serif
          }
.flach    { /* IE-Fehler mit margin */
            margin:40px 0 0 0;
            line-height:1px;
          }
.klar     { /* float beenden        */
            clear:both;
            line-height:1px;
          }
.continue { /* nächste Seite        */
            clear:both;
            margin-top:5px;
            text-align:center;
          }
.kontakt  { /* Seitenfuß            */
            margin-top:5px;
            text-align:center;
          }
.r-blau,    /* Rahmen einer Klasse  */
.r-rot,     /* Rahmen einer Ordnung */
.r-gruen  { /* Rahmen einer Familie */
            padding:4px;
            text-align:left;
          }
.blau     { color:#00F;
            text-align:center;}
.r-blau   { border:solid 1px #00F;}
.rot      { color:#F00;
            text-align:right;}
.r-rot    { border:solid 1px #F00;}
.gruen    { color:#090; }
.r-gruen  { border:solid 1px #0C0;}
.ort      { /* in Perama-Fahrplan   */
            color:#C00;
          }
.fisch    { /* Fischbilder          */
            background-color:#F6FFE0;
          }
.fisch td { border:0;
          }
.fisch p  { margin:5px;
          }
.fisch img{ display:block;
          }
.tdlinks  { /* Fischbeschreibung    */
            width:100%;
          }
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 /*        sonstige Elemente          */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
table     { /* Tabellen             */
            margin:0;
            text-align:center;
          }
ul        { /* Liste (Verursacher)  */
            margin-left:80px;
          }
li        { /* Liste (Verursacher)  */
            margin-bottom:10px;
          }
img       { /* Bilder ohne Rahmen   */
            margin:0;
            border:0;
          }
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 /* Krücken für den Internet Explorer */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
         /* Mit "* html" gelten die folgenden Formatierungen nur innerhalb von html, */
        /* das ein Nachkomme von irgendwas ist. Sowas gibt es gar nicht, weil html  */
       /* die oberste Ebene ist. Der IE interpretiert diese Befehle aber trotzdem. */
      /* So verstecke ich die nur für IE bestimmten Befehle vor anderen Browsern. */
     /*                 Referenzen zu den behandelten IE-Fehlern:                */
    /* "Peek-a-Boo": http://www.positioniseverything.net/explorer/peekaboo.html */
   /* doppelte margin bei float: ..everything.net/explorer/doubled-margin.html */
  /* 3 pixel zu viel bei float: ...iseverything.net/explorer/threepxtest.html */
 /* "* html": http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* Noch eine Feinheit: diese Fehler treten im IE5 für Mac nicht auf, und die */
   /* Krücken sollen vor ihm versteckt werden. Dies geschieht unter Ausnutzung  */
  /* eines IE5/Mac Fehlers, der ein Kommentarende nicht erkennt, wenn vor dem  */
 /* Stern ein Backslash steht so wie hier: \*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\*/
* html body 
          { 
            width:60em;             /* gegen: IE kennt keine max-width      \*/
          }      
* html #rand
          { display:inline;         /* gegen: doppelte margin bei float     \*/
            margin-right:7px;       /* gegen: 3px zu viel zw. float und p   \*/
          }
* html .links,
* html .linksh,
* html .rechts,
* html .rechtsh
          { display:inline;         /* gegen: doppelte margin bei float     \*/
            position:relative;      /* gegen: "Peek-a-Boo" - Text ist weg!  \*/
          }
* html .links,
* html .linksh
          { margin-right:5px;       /* gegen: 3px zu viel zw. float und p   \*/
          }
* html .rechts,
* html .rechtsh
          { margin-left:5px;        /* gegen: 3px zu viel zw. float und p   \*/
          }
* html h1,
* html h2,
* html h4,
* html p,
* html ul
          { position:relative;      /* gegen: "Peek-a-Boo" - Text ist weg!   */
          }