/* kids.css, created: 9.01.2016, last modified: 09.01.2016 */
/* style sheet for www.frauensteinweb.de/kids */
/* author: Volker Frauenstein */

/******************************************************************************/
/* Body layout                                                                */
/******************************************************************************/
  /* General Layout settings for frauensteinweb related pages */
  body { margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; float:left;
         color:black; background-color:white;
         font-family:Arial, sans-serif; font-size:14pt; }
/******************************************************************************/
/* General format overwrites                                                  */
/******************************************************************************/

  /* paragraphs without gaps between */
  p { margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px;
      padding-left:5px; padding-right:5px;  padding-top:0px; padding-bottom:0px;
      font-family:"Comic Sans MS", sans-serif; font-size:12pt; font-weight:normal;}

  /* lists without gaps between */
  ul { list-style-type:disc;
       margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px;
       padding-left:10px;  padding-right:5px;  padding-top:0px; padding-bottom:0px;
       font-family:"Comic Sans MS", sans-serif; font-size:12pt; }
  li { margin-left:20px; margin-right:5px; }

  /* Headlines with left hand margin of 5 pixel */
  h1,h2,h3,h4,h5,h6 { padding-left:10px; padding-top:10px;
                      font-family:Arial, sans-serif; }

  table { overflow:hidden; font-family:Arial, sans-serif; font-size:14pt; }

  /* Format - Arial letters, no underlines for links and color variation at mouse-over... */
  a { text-decoration:none; color:blue; font-family:arial, sans-serif; font-size:14pt; }
  a:hover { text-decoration:none; color:#00008B; } /* hovered link in (#00008B =) darkblue  */
  a:focus { text-decoration:none; color:blue; font-style:italic; } /* focused link */
  a:visited { text-decoration:none; color:navy; } /* visited links */

/******************************************************************************/
/* Special format overwrites                                                  */
/******************************************************************************/

  /* Format - blue Comic letters and no underlines for links with normal letters */
  a.kid { text-decoration:none; color:blue; font-family:"Comic Sans MS",sans-serif; font-size:12pt; }
  a.kid:hover { text-decoration:none; color:#00008B; } /* hovered link in (#00008B =) darkblue  */
  a.kid:focus { text-decoration:none; color:blue; font-style:italic; } /* focused link */
  a.kid:visited { text-decoration:none; color:navy; } /* visited links */

  /* Format - blue Comic letters and no underlines for links with small letters */
  a.kids { text-decoration:none; color:blue; font-family:"Comic Sans MS",sans-serif; font-size:10pt;
           font-weight:bold; }
  a.kids:hover { text-decoration:none; color:#00008B; } /* hovered link in (#00008B =) darkblue  */
  a.kids:focus { text-decoration:none; color:blue; font-style:italic; } /* focused link */
  a.kids:visited { text-decoration:none; color:navy; } /* Format - for visited links */

  a.comment { text-decoration:none; color:silver; } /* text with comment bubble in silver */

  p.gap { padding-bottom:10px; } /* paragraphs with bottom gap */
  p.bol { font-weight:bold; }    /* bold paragraphs */
  p.gab { padding-bottom:10px; font-weight:bold; } /* bold paragraphs with bottom gap */
  p.kids { font-family:"Comic Sans MS",sans-serif; font-size:10pt; font-weight:bold; }
  table.gap { margin-bottom:10px; } /* table with bottom gap */

  /* lists with little baer images in blue or yellow as list dot */
  ul.baerg { position:relative; left:10px; border-style:none; margin:0px; padding:10px 5px 10px;
             list-style-image:url(minibaer_g.gif); height:15px; }

  ul.baerb { position:relative; left:10px; border-style:none; margin:0px; padding:0px;
             list-style-image:url(minibaer_b.gif); height:15px; list-style-position:outside; }

  /* formats for "Untersuchungsergebnisse" */
  h4.ux { padding:0px; margin:0px; font-family:"Comic Sans MS", sans-serif; }
  p.ux  { font-size:10pt; font-family:Arial, sans-serif; color:navy; }

  h1.next { clear:both; } /* no left or right text flow at chapter start */
  h2.next { clear:both; }
  h3.next { clear:both; }
  h4.next { clear:both; }
  h5.next { clear:both; }
  h6.next { clear:both; }
  p.next  { clear:both; }
  a.next  { clear:both; }

/******************************************************************************/
/* Formats for box layouts                                                    */
/******************************************************************************/
/* Main box for Kids related pages, */
/* navigation box streching to bottom line via background pic */
  .KidPage { position:absolute; top:0px; left:0px; float:left;
                text-align:left; margin-top:0px; margin-left:0px; width:1000px; padding:0;
                background:#CCFFFF url(benny_bg.gif); background-repeat:repeat-y; }

/* Main box for Kids related pages with new background benny-> StarWars, */
/* navigation box streching to bottom line via background pic */
  .KidBPage { position:absolute; top:0px; left:0px; float:left;
                text-align:left; margin-top:0px; margin-left:0px; width:1000px; padding:0;
                background:#CCFFFF url(benny_b_bg.gif); background-repeat:repeat-y; }

/* Header boxes - at top of page */
  /* Logo - top left corner */
  .WebLogo { position:relative; top:0px; left:0px; width:125px; height:100px; border-style:none;
                background-color:#FF6633; background-image:url(../../src/WebWappen.gif);
                background-repeat:no-repeat; float:left; }
  .WebLogo img { width:125px; height:95px; border-style:none; }

  /* Page Haeder for Tagebuch pages -> Header picture included vie background-image*/
  .TBHead { position:relative; top:0px; width:875px; height:100px;
               border-style:none; background-color:#CCFFFF; float:right;
               background-image:url(T_Head.gif); background-repeat:no-repeat; }
  .TBHead img { width:875px; height:95px; border-style:none;}

  .TBBHead { position:relative; top:0px; width:875px; height:100px;
               border-style:none; background-color:#CCFFFF; float:right;
               background-image:url(B_Head.gif); background-repeat:no-repeat; }
  .TBBHead img { width:875px; height:95px; border-style:none;}

  /* Page Header for all non Tagebuch pages -> Header picture not included (done in html page */
  .KidHead { position:relative; top:0px; width:875px; height:100px;
               border-style:none; background-color:#CCFFFF; float:right; }
  .KidHead img { width:875px; height:100px; border-style:none;}

/* Navigation box - at left hand side for Kids related pages*/
  nav { position:relative; top:0px; left:0px; right:125px; float:left;
             min-height:500px; width:125px; overflow:hidden; margin:0px; padding:0px;
             border-style:none; background-color:#0033CC; }
  nav object { margin-left:0px; margin-top:0px; width:125px; height:500px;
                    text-align:left; float:left; border-style:none; overflow:hidden;
                    background-color:#0033CC; border-color:#0033CC; color:white;}
  nav h1 { margin-left:0px; padding-top:5px; padding-left:0px; color:white;
                text-align:center; font-family:"Arial", sans-serif; font-size:22pt; }

/* Box for page content - right next to navigation box */
  main { position:relative; top:0px; left:0px; width:800px; min-height:500px;
             overflow:visible; float:left; margin-top:0px; border-style:none; }

/* Box for right end - right next to navigation box */
  .benny { position:relative; top:0px; left:0px; width:75px; min-height:500px;
              overflow:hidden; float:right; margin-top:0px; border-style:none;
              background-image:url(Benny.gif); background-color:#0033CC; }

/* Boxes for Julians Tagebuch - Selector for direct Tagebuch access  */
/* not used together with KidCont */
  .TBs { position:relative; top:0px; left:0px; width:800px; height:191px; overflow:hidden;
            margin-top:0px; margin-left:0px; text-align:center; vertical-align:middle;
            float:left; border-style:none; background-color:yellow; }
  .TBs object { margin-left:4px; margin-top:2px; margin-right:0px; width:800px; height:191px;
                   border-style:none; overflow:hidden; background-color:#0033CC; color:white; }

/* Boxes for Julians Tagebuch - Content boxes in light-blue and light-yellow */
/*  .TBCont { position:relative; top:0px; left:0px; width:800px; min-height:500px;
               overflow:visible; float:left; margin:0px; border-style:none; } */

  /* box classes light-blue and light-yellow */
  .TBb { background-color:#CCFFFF; float:left; padding:0px 0px 5px; position:static; }

  .TBy { background-color:#F6FF74; float:left; padding:0px 0px 5px; position:static; }

/* Boxes for Julians Tagebuch - forward and back selector at bottom off page */
  .arrow { position:relative; left:125px; width:800px; height:35px;
              margin:0px; padding:0px; border-style:none; }

  .Back { position:relative; width:400px; height:35px;
             margin:0px; padding:0px; text-align:right; float:right;
             border-style:none; background-color:#CCFFFF; }
  .Back img { width:29px; float:right; border-style:none; padding:6px 10px 6px; }
  .Back a { margin:0px; padding:0px;
               font-family:"Comic Sans MS",sans-serif; border-style:none;
               font-size:14pt; text-decoration:none; color:blue; }
  .Back h1 { width:150px; height:35px; margin:0px; padding:0px;
                font-family:"Comic Sans MS",sans-serif; border-style:none;
                font-size:14pt; text-decoration:none; color:blue; float:right; }

  .Forw { position:relative; width:400px; height:35px;
             margin:0px; padding:0px; text-align:left; float:left;
             border-style:none; background-color:#CCFFFF; }
  .Forw img { width:29px; float:left; border-style:none; padding:6px 10px 6px; }
  .Forw a { margin:0px; padding:0px;
               font-family:"Comic Sans MS",sans-serif; border-style:none;
               font-size:14pt; text-decoration:none; color:blue; }
  .Forw h1 { width:150px; height:35px; margin:0px; padding:0px;
                font-family:"Comic Sans MS",sans-serif; border-style:none;
                font-size:14pt; text-decoration:none; color:blue; float:left; }

/* Box for footer - at bottom with seperator line in (#A9A9A9 =) darkgray */
  footer { background-color:#CFF9FF; float:right;
           left:125px; width:865px; overflow:visible; text-align:right;
           margin:0px; padding-top:5px; padding-right:5px; padding-bottom:5px;
           border-style:none; border-top-style:solid; border-top-width:2px;
           border-top-color:#A9A9A9; font-family:arial, sans-serif; font-size:14pt; }

/* Boxes for pictures - float left or right in text */
/* with light blue (b) or light yellow (y) background */
  .bPicR { width:110px; text-align:center; vertical-align:middle; float:right;
              border-top-style:solid; border-bottom-style:solid;
              border-left-style:solid; border-width:2px; border-color:#F6FF74;
              background-color:#CCFFFF; padding:5px 0px 5px; margin-left:5px; overflow:visible; }
  .bPicR img {  margin:5px; border-style:none; }

  .bPicL { width:110px; text-align:center; vertical-align:middle; float:left;
              border-top-style:solid; border-bottom-style:solid;
              border-right-style:solid; border-width:2px; border-color:#F6FF74;
              background-color:#CCFFFF; padding:5px 0px 5px; margin-right:5px; }
  .bPicL img { margin:5px; border-style:none; }

  .yPicR { width:110px; text-align:center; vertical-align:middle; float:right;
              border-top-style:solid; border-bottom-style:solid;
              border-left-style:solid; border-width:2px; border-color:#CCFFFF;
              background-color:#F6FF74; padding:5px 0px 5px; margin-left:5px; }
  .yPicR img { margin:5px; border-style:none; }

  .yPicL { width:110px; text-align:center; vertical-align:middle; float:left;
              border-top-style:solid; border-bottom-style:solid;
              border-right-style:solid; border-width:2px; border-color:#CCFFFF;
              background-color:#F6FF74; padding:5px 0px 5px; margin-right:5px; }
  .yPicL img { margin:5px; border-style:none; }

/* Boxes for picture road - center in body */
/* with light blue (b) or light yellow (y) background */
  .bRoad { width:775px; text-align:left; vertical-align:middle; float:left;
              border-style:solid; border-width:2px; border-color:#F6FF74;
              background-color:#CCFFFF; padding:5px; margin:5px; overflow:visible;
              position:relative; }
  .bRoad img {  margin:15px 5px; border-style:none; width:100px; height:75px; }
  .bRoad img:hover { position:absolute; top:25px; left:5px; z-index:99;
                     width:800px; height:600px; border-style:none; }
  .bRoad p { text-decoration:none; font-family:"Comic Sans MS",sans-serif; font-size:12pt;
           font-weight:bold; margin:15px 0px;}
  .bRoad hr { color:#F6FF74; height:2px; margin:20px 10px; padding:5px; border-style:solid; }
  /* deviaton for non landscape pics */
  .bRoad img.hk {  margin:5px; border-style:none; width:75px; height:100px; }
  .bRoad img.hk:hover { width:600px; height:800px; border-style:none; }
  /* deviaton for Samsung S4 pic format */
  .bRoad img.s4 {  margin:5px 5px 25px; border-style:none; width:100px; height:56px; }
  .bRoad img.s4:hover { width:800px; height:450px; border-style:none; }
  .bRoad img.hks4 {  margin:5px; border-style:none; width:56px; height:100px; }
  .bRoad img.hks4:hover { width:450px; height:800px; border-style:none; }


  .yRoad { width:775px; text-align:left; vertical-align:middle; float:left;
              border-style:solid; border-width:2px; border-color:#CCFFFF;
              background-color:#F6FF74; padding:5px; margin:5px; overflow:visible;
              position:relative; }
  .yRoad img { margin:15px 5px; border-style:none; width:100px; height:75px; }
  .yRoad img:hover { position:absolute; top:25px; left:5px; z-index:99;
                     width:800px; height:600px; border-style:none; }
  .yRoad p { text-decoration:none; font-family:"Comic Sans MS",sans-serif; font-size:12pt;
           font-weight:bold;  margin:15px 0px;}
  .yRoad hr { color:#CCFFFF; height:2px; margin:20px 10px; padding:5px; border-style:solid; }

  /* deviaton for non landscape pics */
  .yRoad img.hk {  margin:5px; border-style:none; width:75px; height:100px; }
  .yRoad img.hk:hover { width:600px; height:800px; border-style:none; }
  /* deviaton for Samsung S4 pic format */
  .yRoad img.s4 {  margin:5px 5px 25px; border-style:none; width:100px; height:56px; }
  .yRoad img.s4:hover { width:800px; height:450px; border-style:none; }
  .yRoad img.hks4 {  margin:5px; border-style:none; width:56px; height:100px; }
  .yRoad img.hks4:hover { width:450px; height:800px; border-style:none; }

  /* Box for Counter on left hand side (#A9A9A9 =) darkgray */
  div#JLCount { clear:both; left:0px; width:990px; overflow:visible;
                  margin-left:0px;  margin-top:100px;  margin-bottom:0px; padding:0px;
                  border-style:none; border-top-style:none; background-color:#0033CC; color:white; }
  div#JLCount object { margin-left:5px; margin-top:100px; width:115px; height:40px; text-align:left;
                         float:left; border-style:none; overflow:hidden; background-color:#FFA500; }
  div#JLCount p { text-align:right; }

  <!--  <div style="margin-left:0px; margin-top:100px; width:115px; height:40px; text-align:left; float:left; border-style:none; overflow:hidden; background-color:#0033CC; color:white;"> -->