/* 
 Designed by Adarsh Dilip www.adarshdilip.com  -  Saint John New Brunswick Canada
 
 Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April-July 2007 
   All styles that have been changed are indented
 
 - IE7 spacing problem resolved by getting rid of hacks and fixing the real layout bug
 - fixed height problem on one of the style images
 - minor problem with text appearing over the band photo fixed using Dwyer method
 - now using padding-left: 10px; on #content to make sure all content has at least some indentation. left
   margins reduced accordingly
 - calendar styling is now applied at the div level instead of the page level (#calendar instead 
   of .calendar). This means the styling gets applied to the calendar when it's chosen to appear on the home
   page, too.
 - minor code cleanup
 
*/

/* ------------------ ~ Basic Layout ~ ----------------- */

body {  
 font-family: "Lucida Grande", "Lucida Sans", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
 padding: 0;
 text-align: center;
 color: #292727;
 margin-top: 25px;
 background: #210 url(/shared/pleather/bg_pattern.gif);
}

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

#container {
 width: 792px;
 margin: 0 auto;
 padding-top: 60px;
 text-align: left;
 background: url(/shared/pleather/top_container_blue.gif) no-repeat;
}

         /* NEW!! This does nothing, so goodbye.
         html>body #container {
          padding-top: 60px;
         }
         */
form {
 margin: 0;
}


/* ------------------ ~ Navigation ~ ----------------- */
#navigation {
 float: left;
 width: 100%;
 line-height: normal;
 font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
}

#navigation ul {
 position: absolute;
 text-align: center;
  font-size: 13px;             /* Change font size to align tabs in center - if more tabs, choose less font-size */
  font-weight: bold;
 z-index: 2;
 width: 792px;
 height: 32px;
 top: 82px;
 margin: 0;
 padding: 10px 10px 0;
 list-style: none;
}

#navigation li {
 float: left;
 text-align: center;
 margin: 0px 3px 0px 1px;
 padding: 0 0 0 7px;
 background: url(/shared/pleather/menu_tab_left_blue.gif) no-repeat left top;
}
 
#navigation a {
 float: left;
 display: block;
 color: #363636;
 padding: 5px 15px 4px 6px;
 text-decoration: none;
 border: none;
 background: url(/shared/pleather/menu_tab_right_blue.gif) repeat-x right top;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#header a {
 float:none;
}
/* End IE5-Mac hack */

#navigation li a:hover {
 color: #1E1E1E;
 text-decoration: line-through;
} 


/* ------------------ ~ Email Sign-up ~ ----------------- */

#emailsignup {
 z-index: 3;
 position: relative;
 top: 0px;
 left: 0px;
 width: 291px;
 height: 39px;
 color: #FFFCD2;
 font-size: 12px;
 font-weight: bold;
 line-height: 2.4em;
 text-align: center;
 margin: -46px 0px 0px 488px;
 background-image: url(/shared/pleather/email_bg_blue.gif);
}

#emailsignup #list_email {
 margin: 7px 0 2px 3px;
 border: none;
 width: 100px;
 height: 17px;
 font-size: 12px;
}

#emailsignup #list_submit {
 margin: 7px 2px 1px 9px;
 background: #F2FCD8;
 border: none;
 color: #374D00;
 font-weight: bold;
 text-transform: uppercase;
}

/* ------------------ ~ Band Banner ~ ----------------- */

               #banner {
                width: 786px;
                height: 234px;   /* NEW!! was previously 174px, but this is correct */
                margin-left: 3px;
                position: relative;
                top: 67px;
               }

               #banner .band {
                position: relative;
                z-index: 1;
                font-size: 1px;
                letter-spacing: -1px;
                overflow: hidden;
                height: 50px;   /* NEW!! was previously 100px, probably not the designer's intention */
                margin: -278px 0px 0px 10px;
background :url(/images/distortedpianobwl-cropped-logofloat.jpg) no-repeat;
               }

 
#banner .photo {
 position: relative;
 font-size: 1px;
 letter-spacing: -1px;
 overflow: hidden;
 text-indent: 1000px;
 width: 786px;
 height: 187px;
 margin-top: -20px;
background: transparent url(/images/distortedpianobwl-cropped-logofloat-cropped-bigmiddle.jpg) no-repeat;
}

               /* NEW!! hides band name from photo using Dwyer method */
               /* see http://www.mezzoblue.com/tests/revised-image-replacement/) */
               
               #banner .band span {
                display: block;
                width: 0;
                height: 0;
                overflow: hidden;
                }
               
               #banner .photo span {
                display: block;
                width: 0;
                height: 0;
                overflow: hidden;
                }

/* ------------------ ~ Contents ~ ----------------- */

         #content {
    width: 775px;        /* NEW!! was 785px; but reduced to accomodate 10px padding */
          margin-left: 2px;
          margin-top: 0px;  /* NEW!! previously 61px, this is now controlled by banner height */
          padding-bottom: 15px;
          border-bottom: #4B650E thin dotted;   
          border-left: #4B650E thin dotted;
          border-right: #4B650E thin dotted;
          background: #FFFFFF url(/shared/pleather/content_bg_blue.jpg) top right repeat-y;
            padding-left: 10px /* NEW!! global indent. All left margins will be reduced by 10px */
         }

         /* NEW!! An ultra-safe hack for IE6 and IE5 only, combining the Tan hack and the Pixy hack. The
          * html makes sure that only IE5/6 see any of this (and the underscores act as a backup). The
          backslashes pass real values to IE6 that override the fake values for IE5 (box model problem). */
         
         * html #content { 
    _padding-left: 10px;  /* NEW!! for some reason this needs to be set again as part of this hack */
          _width: 789px;    /* NEW!! fake width for IE5win only = real width + padding + border */
            _w\idth: 775px;
            }

     
     /* NEW!! This IE hack no longer works in IE7 and is no longer necessary 
               *>#content {
                margin-top: 80px;
               } 
     */

     
     /* NEW!! Weird-ass bug causes position for entire #content div to be thrown off between */
     /* IE6/IE7 and Firefox/Opera. Only happens when font size for h1 is set. The fix was to */
     /* apply the declaration to h1 span instead. Don't ask me why this works, but it eliminates */
     /* need for IE hacks which weren't working in IE7 anymore anyway */
     
               #content h1 span {  /* NEW!! previously, this was applied to "#content h1 {" */
                font-size: 20px; 
                text-align: left; 
                text-transform: capitalize;
               /* margin-left: 10px;    NEW!! now using 10px #content padding */
                line-height: 1.8em; 
               }

         #content p {
          font-size: 14px;
          text-align: left;
          text-indent: 8px;
         /* margin-left: 10px;    NEW!! now using 10px #content padding */
          margin-right: 10px;
          line-height: 1.4em;
          border-bottom: thin dotted;
         }

#content .entry h2 {
 font-size: 16px;
 color: #070707;
 text-align: left;
 margin-left: 10px;
 margin-top: 20px;
}

         #content .notes {
          font-size: 12px;
          line-height: 1.5em;
          text-align: left;
          text-indent: 8px;
         /* margin-left: 10px;    NEW!! now using 10px #content padding */
          margin-right: 10px;
         }
         
         #content h3 {
          font-size: 16px;
          color: #070707;
          text-align: center;
         /* margin-left: 10px;    NEW!! now using 10px #content padding */
          line-height: 1.1em;
         
         }

/* ------------------ ~ Contents - MUSIC ~ ----------------- */

         /* NEW!! This page-specific styling was causing the entire #content div to shift upwards on the music
    page, probably due to the new line-height. Better to leave it the same as all the h1 on the other
    pages. It looks more consistent that way. 
   
         .music #content h1 {
          font-size: 20px;
          text-align: center;
          text-transform: capitalize;
          line-height: 2.8em;
         }
   */

         .music #content .artist, .music #content .caption {
          font-size: 12px;
          color: #070707;
         /* margin-left: 10px;    NEW!! now using 10px #content padding */
          text-align: center;
         }

         .music #content blockquote {
         /* margin-left: 50px;    NEW!! now using 10px #content padding */
    margin-left: 40px;   /* NEW!! margin-left reduced by 10px */
         }

.music h3 {
 margin-bottom: 0;
}

.music #content ul {
 font-size: 11px;
 text-align: center;
 list-style-type: none;
 margin: 15px 150px 0px 150px;
 padding: 10px;
 border: thin dotted;
 line-height: 1.9em;
}

.music #content li a {
 text-align: center;
 font-weight: normal;
 color: #233100;
}

.music #content li a:hover {
 color: #050700;
}

/* ------------------ ~ Contents - CONTACT ~ ----------------- */

         #content span.name {
          font-size: 14px;
          color: #050700;
          font-weight: bold;
          text-align: left;
   /* margin-left: 25px;    NEW!! now using 10px #content padding */
    margin-left: 15px;   /* NEW!! margin-left reduced by 10px */
         }

.contact #content ul {
 list-style:none;
 font-size: 13px;
 color: #070707;
 line-height: 1.5em;
}

.contact #content ul li a{
 color: #070707;
 text-decoration: underline;
}

.contact #content ul li a:hover {
 color: #000000;
 text-decoration: underline;
}

/* ------------------ ~ Contents - PRESS ~ ----------------- */

.press #content blockquote {
 font-size: 13px;
 line-height: 1.5em;
}

         .press #content .caption {
          font-size: 14px;
          color: #0A0A0A;
          font-weight: bold;
          text-align: left;
         /* margin-left: 40px;    NEW!! now using 10px #content padding */
          margin-left: 30px;   /* NEW!! margin-left reduced by 10px */
         }

.press #content .caption a {
 font-size: 14px;
 color: #0A0A0A;
 font-weight: bold;
 text-align: left;
}

.press #content .caption a:hover {
 color: #584B0D;
}

/* ------------------ ~ Contents - CALENDAR ~ ----------------- */

   /* NEW!! Before, these were styled at the page level (using body.calendar or .calendar for short).
   Now that calendars can also appear on the home page, they are styled using div#calendar or
   #calendar for short. Calendars are always contained within a #calendar div, no matter what page
   they're on. Good, no? */

         #calendar .entry {
          border: thin dotted;
          text-align: center;
          margin: 0 100px 25px 100px;
          padding-bottom: 10px;
         }
         
         #calendar h2 {
          text-align: center;
          font-size: 14px;
          color: #373737;
         }
         
         #calendar h3 {
          font-weight: bold;
          font-size: 18px;
          text-transform: uppercase;
          text-align: center;
         }
         
         #calendar h4 {
          font-weight: bold;
          font-size: 14px;
          text-transform: uppercase;
          text-align: center;
         }
         
         #calendar address {
          font-weight: bold;
          font-size: 14px;
          color: #373737;
          text-align: center;
         }
         
         #calendar p {
          font-size: 12px;
          color: #292309;
          text-align: center;
          border-bottom: none;
          text-transform: capitalize;
         }

/* ------------------ ~ Contents - PHOTOS ~ ----------------- */

.photos img {
 padding: 3px;
 border: solid 1px #1B2600;
 background: #384E02 url(/shared/pleather/photo-bg.gif);
}

         .photos dl {
         /* margin: 0 20px;      NEW!! now using 10px #content padding */
          margin: 0 20px 0 10px;   /* NEW!! margin-left reduced by 10px */
          padding: 0;
         }
         
         .photos dt {
          text-align: center;
          text-transform: capitalize;
          font-size: 12px;
          color: #3E3E3E;
          padding: 5px;
         /* margin: 15px 40px 2px 40px;    NEW!! now using 10px #content padding */
          margin: 15px 40px 2px 30px;   /* NEW!! margin-left reduced by 10px */
          border-top: thin dotted;
         }

.photos dd {
 text-align: center;
 margin: 0;
 padding: 0;
}

/* ------------------ ~ Contents - STORE ~ ----------------- */

.products #content .products {
 border: thin dotted;
 margin: 0 20px 0 20px;
}

.products #content .products table td {
 float: left;
}

.products #content .products a {
 color: #2B2100;
}

.products #content .products a:hover {
 color: #393939;
}

.products #content .products img {
 border: solid 1px #1B2600;
 padding: 2px;
 margin-left: 10px;
 margin-top: 23px;
}

.products #content .products h2 {
 font-size: 14px;
 text-indent: 15px;
 text-decoration: none;
}

.products #content .products p {
 font-size: 12px;
 border-bottom: none;
 text-indent: 25px;
}

/* ------------------ ~ Contents - GUESTBOOK ~ ----------------- */

         .guestbook #postForm {
          height: 385px;
         /* margin: 0 0 35px 10px;    NEW!! now using 10px #content padding */
          margin: 0 0 35px 0;    /* NEW!! margin-left reduced by 10px */
          padding: 0px;
         }

.guestbook #postForm input, .guestbook #postForm label {
 display: block;
 width: 300px;
 margin: 0 0 10px 0;
}

.guestbook #postForm form p {
 border:none;
}

.guestbook #postForm textarea {
 display: block;
 width: 600px;
 height: 150px;
 margin: 0 0 10px 0;
}

.guestbook #postForm input:focus, .guestbook #postForm textarea:focus {
    background: #ffc;
}

.guestbook #postForm label {
 padding: 3px 0px;
 margin-bottom: 1px;
}

/* Captcha stuff */
#postForm img#gbimage {
 width: 100px;
 float: left;
 margin-top: 10px;
 margin-bottom: 10px;
}

#postForm label.security_code_label {
 width: 500px;
 margin-left: 20px;
 float: left;
}

#postForm input#security_code {
 width: 180px;
 float: left;
 margin-left: 20px;
 margin-right: 200px;
}

#postForm input[type=submit] {
 clear: both;
 width: 305px;
 text-align: center;
}

         .guestbook #guestbook h2 {
         /* margin-left: 30px;    NEW!! now using 10px #content padding */
          margin-left: 20px;   /* NEW!! margin-left reduced by 10px */
          padding-top: 10px;
          font-size: 14px;
         }
         
         .guestbook #guestbook h3 {
         /* margin-left: 30px;    NEW!! now using 10px #content padding */
          margin-left: 20px;   /* NEW!! margin-left reduced by 10px */
          font-size: 11px;
          text-align: left;
          color: #393939;
         }
         
         .guestbook #guestbook blockquote {
         /* margin-left: 50px;    NEW!! now using 10px #content padding */
          margin-left: 40px;   /* NEW!! margin-left reduced by 10px */
          font-size: 12px;
          text-align: left;
          line-height: 1.7em;
         }

.guestbook #guestbook .entry {
 border-top: thin dotted;
}


/* ------------------ ~ Contents - LINKS ~ ----------------- */

         .links #content dl {
         /* margin-left: 10px;    NEW!! now using 10px #content padding */
          margin-left: 0px;    /* NEW!! margin-left reduced by 10px */
          margin-right: 10px;
          text-align: left;
          border-bottom: thin dotted;
         }

.links #content h3  {
 font-size: 14px;
 text-align: left;
 margin: 20px;
}

.links #content h3 a  {
 color: #393939;
}

.links #content h3 a:hover  {
 color: #000000;
}

         .links #content h2  {
          font-size: 16px;
          text-align: left;
         /* margin: 20px;    NEW!! now using 10px #content padding */
          margin: 20px 20px 20px 10px ;   /* NEW!! margin-left reduced by 10px */
          color: #000000;
         }

.links #content a {
 text-decoration: none;
}

.links #content a:hover {
 color: #815F29;
 text-decoration: underline;
}


/* ------------------ ~ Footer ~ ----------------- */

#footer {
 position: relative;
 clear: both;
 font-size: 11px;
 color: #FFFCD2;
 line-height: 2.9em;
 width: 786px;
 height: 30px;
 text-align: center;
 margin-left: 3px;
 z-index: 6;
 background-image: url(/shared/pleather/footer_bg_blue.gif);
}

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

/*************** START NEW STUFF **************/
/* quick fix stuff added to end of file to fix ugly link colors,
 * lack of margin on some pages and h2 grouping indentation.
 */
 
         h2 {
          color: #2E1401;
          text-align: left;
         /* margin-left: 10px;    NEW!! now using 10px #content padding */
          margin-left: 0px;    /* NEW!! margin-left reduced by 10px */
          margin-top: 20px;
         }
         
         .home #content .entry {
          width: 750px;
         /* margin-left: 15px;    NEW!! now using 10px #content padding */
          margin-left: 5px;    /* NEW!! margin-left reduced by 10px */
          margin-right: 15px;
         }
         
         .products #content .details {
          width: 750px;
         /* margin-left: 15px;    NEW!! now using 10px #content padding */
          margin-left: 5px;    /* NEW!! margin-left reduced by 10px */
          margin-right: 15px;
         }

a {
 text-align: center;
 font-weight: normal;
 color: #233100;
}

a:hover {
 color: #050700;
}
/*************** END NEW STUFF **************/