/* Springtime (2004/02/25)

    a colorfully bright stylesheet celebrating the advent of spring

    This  sheet was  designed using  Mozilla Firefox  0.8 and  while I
    tried  to avoid  too fancy  stuff,  you might  get surprises  with
    different  browsers.   It also  contains  two  uses  of a  Mozilla
    extension to CSS; being well aware  that one is not supposed to do
    this, I excuse this by using it for non-essential layout.

    Your mileage may vary.

    This software is provided "AS IS," without a warranty of any kind.
    ALL EXPRESS OR IMPLIED CONDITIONS, REPRESENTATIONS AND WARRANTIES,
    INCLUDING ANY  IMPLIED WARRANTY OF MERCHANTABILITY,  FITNESS FOR A
    PARTICULAR PURPOSE OR NON-INFRINGEMENT, ARE HEREBY EXCLUDED.

    You  acknowledge  that  Software  is  not  designed,  licensed  or
    intended  for  use  in  the  design,  construction,  operation  or
    maintenance of any nuclear facility.

   TODO:

     - being a personal blog, it should have a picture of Thilo
     - it is still too green; some more red or yellow spots might do
       good 
     - fix the horizon if mainblog overflows
     - fix the icon hack
   
   CHANGELOG:

     2004/02/25
        initial release
*/

/* The properties of the body and the title

   I give the entire body the grass-green texture as a background. The
   horizon is  done by giving  the pagetitle another  background. This
   approach  has one  drawback however:  To  make sure  these two  fit
   seamlessly, I have to set the height of the pagetitle explicitly in
   pixels -- and it does not behave as well as it should when changing
   font sizes.
*/
:link { color: #006000; }
:visited { color: #003000; }
body { 
     font-family: Arial, Helvetica, sans-serf;
     margin: 0px; padding: 0px; 
     background-image: url("SpringIsGreen.png"); 
     background-position: top left;
}
.pagetitle { 
           margin: 0px; padding: 20px;
           height: 56px; 
           font-size: 40px; 
           background-image: url("SpringIsClearSky.png"); 
           background-position: bottom left;
}

/* The background of the menubar and mainblog

   As these  should be partially translucent, there  are three options
   as far  as I know:  (a) use a  one-color PNG with  fractional alpha
   channel, (b)  use a Mozilla  extension (-moz-opacity) or (c)  use a
   different background that looks translucent.

   (a) is known not to work with  IE, (b) is not playing by the rules,
   so I  chose (c). The  small patterns in the  background (hopefully)
   make sure that  it's not too obvious, that  the backgrounds are not
   seamless.
*/
.menubar { 
         display: block;
         text-align: justify;
         font-size: small;
         margin: 0px 2em; padding: 1em;
         background-image: url("SpringIsYellow.png");
}
.mainblog { 
          clear:both; 
          margin: 2em; padding: 1em;
          background-image: url("SpringIsWhite.png");
 }

/* The Menubar

   I  arrange the  items in  the  menubar horizontally.  This is  done
   basically by  two tricks: (a)  make everything inline  elements and
   (b)  remove  those  linebreaks  (except  the  one  after  the  blog
   description)
*/
.menubar ul { display: inline; margin: 0px; padding: 0px; }
.menubar p,
.menubar div,
.menubar li { display: inline; padding: 0px 0.5em; /*margin 0px;*/ }
.menubar br { display: none; }
.menubar div.blog_description+br { display: block; }
.menubar b:after {  content: ":"; }

/*  now  here comes  some  DIRTY hack:  as  the  icons have  different
heights, I don't want them in the inline text. However, since they are
currently tightly  interwoven, I found  no other way than  making them
floats. */
div.menubar img { display: block; float:right; margin: 3em 0.5em; }

/* The blog entries

   As opposed to FlipFlop, fairly  simple this time. The selectors for
   the framed quotes is taken from FlipFlop.
*/
.dateheader { 
            color: green; 
            font-size: large; font-weight: bold; 
            border-bottom: 0.25em solid green; -moz-border-radius: 0.25em;
}
.storytitle { font-size: large; }
.storybody { text-align: justify; }
.storybody pre,
.storybody dl,
.storybody blockquote,
.storybody .quote {
        overflow: hidden; 
        font-family: monospace;
        margin: 1em 2em; padding: 1em;
        border: thin solid green; -moz-border-radius: 0.75em;
} 
.story { margin: 1em; border-bottom: thin solid green; }