/* 
 Designed by Jordi Romkema, Jor-On Web and Print Design www.jor-on.com  -  Zeewolde  Netherlands
 
 Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com June 2007 
   All styles that have been changed are indented
 
 - minor usability improvements: 1) max-width is now applied to p, blockquote, etc. to keep the lines from
   getting too long before wrapping; 2) display: block; is now applied to #navigation a, which makes menu
   links easier to click
 - fixed a minor IE5 problem by commenting out an unnecessary IE5-only padding declaration on #content

*/


body {
 font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
 color: #000000;
 background-color: #FFFFFF;
 background-image: url(/shared/riga/banner-piano.jpg) no-repeat;

 background-repeat: repeat-y;
 background-position: left top;
 margin: 0px;
 padding: 0px;
}

a:link, a:visited {
 color: #666666;
}

a:hover, a:active {
 color: #000000;
}

#banner .photo {
 display: none;
}

#banner .band {
 position: absolute;
 left: 108px;
 top: 0px;
 width: 498px;
 height: 117px;
 z-index: 1;
 background-image: url(/shared/riga/banner-piano.jpg) no-repeat;

 background-repeat: no-repeat;
 background-position: left top;
}

#banner .photo span, #banner .band span {
 display: none;
}

#container {
 margin: 0px;
 margin-left: 108px;
 background-image: url(/shared/turntable/bghead-yellow.gif);
 background-repeat: repeat-x;
 background-position: left top;
 padding: 0px;
 padding-top: 117px;
}

#accessibility {
 position: absolute;
 left: -9999px;
}

#navigation {
 top: 117px;
 left: 108px;
 position: absolute;
 width: 160px;
 margin: 0px;
 padding: 0px;
}

#navigation ul {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 text-transform: lowercase;
 font-size: x-small;
 voice-family: "\"}\"";
 voice-family:inherit;
 font-size: small;
}

         #navigation li {
          border-top-width: 1px;
          border-bottom-width: 1px;
          border-top-style: solid;
          border-bottom-style: solid;
          border-top-color: #FFFFFF;
          border-bottom-color: #666666;
          padding: 2px 0;     /* NEW!! Got rid of side padding as part of moving padding to li a */
         /* padding-left: 10px;      NEW!! Moved to li a for better "clickability" */
    display: block;     /* NEW!! Makes links easier to click, no change in appearance */
         }

   /* NEW!! All of this makes the entire rectangle clickable. This didn't work in
    IE7, even though it's a standard technique that normally works in everything (and in this case,
    worked fine in IE6). For some reason, adding background-color: #eee; fixed it. 
    Je ne comprends pas...*/
    
         #navigation li a {
    display: block;     /* NEW!! Makes links easier to click, no change in appearance */
    padding-left: 10px;     /* NEW!! This has been moved from li */
    width: 150px;      /* NEW!! Setting a width is necessary for IE6 */
    background-color: #eee;   /* NEW!! For some reason this makes it work in IE */
         }

#navigation li a:link, #navigation li a:visited {
 color: #666666;
 text-decoration: none;
}

#navigation li a:hover, #navigation li a:active {
 color: #000000;
 text-decoration: none;
}

         #content {
         /* padding-top: 108px;      NEW!! This makes IE5 look different from the others. No purpose. */
          margin: 5px;
          margin-top: 0px;
          margin-left: 185px;
          margin-right: 25px;
          font-size: x-small;
          voice-family: "\"}\"";
          voice-family:inherit;
          font-size: small;
          padding-top: 0px;
         }

#content h1 {
 text-align: right;
 text-transform: lowercase;
 color: #666666;
 border-bottom-color: #CCCCCC;
 border-bottom-style: dashed;
 border-bottom-width: 1px;
 font-weight: bold;
 font-size: large;
 voice-family: "\"}\"";
 voice-family:inherit;
 font-size: x-large;
}

#content h3 {
 background-image: none;
 padding-left: 0px;
 color: #D29501;
 font-weight: normal;
 font-size: x-small;
 voice-family: "\"}\"";
 voice-family:inherit;
 font-size: small;
}

#content h2, .music #content h3 {
 line-height: 30px;
 background-image: url(/shared/turntable/header-yellow.gif);
 background-repeat: no-repeat;
 background-position: left top;
 padding-left: 35px;
 color: #D29501;
 font-weight: bold;
 font-size: small;
 voice-family: "\"}\"";
 voice-family:inherit;
 font-size: medium;
}

.photos #content {
 text-align: center;
}

.photos #content dd {
 margin-bottom: 15px;
 border-bottom-color: #CCCCCC;
 border-bottom-width: 1px;
 border-bottom-style: dashed;
 padding: 5px;
}

#footer {
 margin-left: 185px;
 margin-right: 25px;
 color: #CCCCCC;
 font-size: xx-small;
 voice-family: "\"}\"";
 voice-family:inherit;
 font-size: x-small;
}

#emailsignup {
 margin: 0px;
 margin-left: 185px;
 margin-right: 25px;
 text-align: right;
 text-transform: lowercase;
 color: #666666;
 font-size: x-small;
 voice-family: "\"}\"";
 voice-family:inherit;
 font-size: small;
}

#postForm {
 text-align: left;
 margin: 0px;
 margin-top: 10px;
 text-transform: lowercase;
}

#postForm form {
 padding: 10px;
}

#postForm input, #postForm textarea {
 display: block;
 width: 360px;
 margin-bottom: 10px;
}

#emailsignup input, #postForm input, #postForm textarea {
 margin-left: 5px;
 border: 1px solid #666666;
 background-color: #FFFFFF;
 padding: 1px;
 font-weight: bold;
 color: #666666;
}

#emailsignup input[type="text"], #postForm input[type="text"], #postForm textarea {
 background-image: url(/shared/turntable/formbg-yellow.gif);
 background-repeat: no-repeat;
 background-position: left top;
}

#emailsignup input[type="submit"], #postForm input[type="submit"] {
 background-image: url(/shared/turntable/formsubmitbg-yellow.gif);
 background-repeat: no-repeat;
 background-position: right bottom;
}

/* Captcha stuff */
#postForm img#gbimage {
 width: 100px;
 text-align: left;
 margin-left: 130px;
 display: block;
}

hr {
 background-color: #CCCCCC;
 color: #CCCCCC;
 height: 1px;
 border: 0px;
}

   /* NEW!! Since this is a fluid layout and #content will stretch in width, this prevents lines from
    becoming so long (really, "wide") that they are hard to read. Ultra-safely hacked for IE6 using
    the * html and underscore hacks. IE6 can't do max-width, so this uses a IE proprietary
    workaround (http://www.svendtofte.com/code/max_width_in_ie/) */
    
   p, blockquote, .entry, .details, .guestbook #guestbook {
    max-width: 555px;
   }
   
   * html p, blockquote, .entry, .details, .guestbook #guestbook {
    _width:[removed]document.body.clientWidth > 741? "740px" : "auto");
   }

#splashimage { text-align: center; margin: 100px auto; }
#splashimage a img { border: 0; }