/* COLORCURVES stylesheet template designed by Andrew Tay (www.andrewtay.com) for HostBaby.com August 2005 

 Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April-August 2007 
 All styles that have been changed are indented
 
 - minor problem with text appearing over the band photo fixed using display: none;
 - calendar styling is now applied at the div level instead of the page level (#calendar instead 
   of .calendar) so styles home page calendars too.
 - added margins to home page image and default styling to #splashimage

 REVISION 2A:
 - major reworking of entire layout in order to eliminate a design flaw that only appeared in IE and Safari.
   the design has a top background image that is fixed to the top of the page, and a bottom background image
   which should connect to the bottom of #content, like a footer (yet it needed to span the full width of the
   viewport, which the footer couldn't do). the problem was that when the page was really short or the    
   viewport was really tall, it would behave differently depending on the browser: in FF an Opera it would
   stay stuck to the #content div, on IE and Safari it would stay stuch to the viewport. problem solved mainly
   by rearranging all the divs, how they're laid out (type of positioning, margins, padding, etc.) and which
   background image lies in which div. Many many things have been moved around.
 - minor margin tweak on links page
 
 REVISION 2B:
 - corrected an IE expanding box bug that cropped up as a result of the layout reworking (revision 2A) under
   very specific conditions. #content width had been set to 405px with padding-right: 255 px to keep
   everything on the left two thirds of the page. when the user had very wide content (e.g. wide photo, long
   link) it would trigger the IE5/IE6 expanding box problem. *all* templates have this issue to some extent,
   but 405px width is narrower than usual (before revision 2A, you could go to ~650px). solution was to
   increase #content width, reduce padding-rightx, and set the width individually for each element. less
   elegant, but it works.
   
 REVISION 2C:
 - continuing the REVISION 2B fix discussed above, defined a width for tables. currently, tables are only
   found on the #calendar when you choose "show past dates"

 UPDATED FOR HOSTBABY WIZARD 2.0 (pre-release)
 Revised by Andrew Tay (www.andrewtay.com) for HostBaby.com April 2009
 All styles that have been changed are indented. New stuff for 2.0 update is marked as "TWO!!"
 
 - #navigation blob now expands and contracts to accomodate different numbers of links, as well as long link
   names, using the sliding doors technique. This required removing the nav and band photo blobs from the
   main #content and #accessibility backgrounds and putting them in their own divs, using transparency on the
   photo blob
 - now using new dynamically-added .highlight class to select active #navigation link
 - modified guestbook postForm layout to accomodate captcha
 - cleaned up file, removing several comments from template revision process in 2007-2008
   
*/


/* --- GLOBAL PAGE SETTINGS --------------------------------------------------------- */

 html, body, div {margin: 0; padding: 0}  /* clears block margins/padding */
 img     {border: none;}    /* clears all image borders */
 
/* (mostly) firefox defaults, for other browser's benefit */
 
 p, blockquote   {margin: 1em 0;} 
 ul, ol     {margin: 1em 0 1em 35px; padding: 0;} 
 h2      {margin: .83em 0;}
 h3      {margin: 1em 0;} 

    
/* --- GENERAL PAGE LAYOUT -------------------------------------------------------------- */

body {
 padding: 0;       /* NEW!! rearranged... was padding: 0 0 106px 0; */
   text-align: center;    /* page auto-centering for IE5win */
 color: black;
   background-color: #FFFBF2;  /* NEW!! bottom background image now moved to #container */
   }

/* NEW!! Now #container is used to position the bottom image because we can always count on the
 bottom of #container to move along with the #content as the page gets taller or shorter. */
    
#container {
 padding-top: 18px;   /* NEW!! Used to use position: relative; top: 18px; this is simpler */
   width: 100%;
   background: url(/shared/colorcurves/colorcurves-pop-bottom.gif) 50% 100% no-repeat;
   }
   
/* NEW!! Most of these styles used to be applied to the #container. #container was the "big
 rectangle" while #content didn't really do much positioning. Now #content is the "big rectangle"
 so that #container can used to position the bottom background image. */
    
#content {
   position: relative;
 left: -15px;
 width: 630px;    /* NEW!! was width: 405px; now wider to avoid IE expanding box problem */
 min-height: 585px;
 margin: 0px auto;   /* page auto-centering */
 z-index: 50;
 padding: 55px 30px 110px 30px;   /* NEW!! rearranged... was padding: 45px 0px 0px 30px; */
 border: 2px solid #666;
 text-align: left; 
   background: white url(/shared/colorcurves/colorcurves-pop-newcontent.gif) 0 0 no-repeat;
 }
 /* NEW!! An ultra-safe hack for IE6 and IE5 only, combining the * html hack and the underscore 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. */
 * html #content {   
  _width: 694px;   /* fake width for IE5win only: real width + padding + border */
  _w\idth: 630px;  /* NEW!! was width: 405px; now wider to avoid IE expanding box problem */
  _height: 750px;  /* fake height for IE5win only: real min-height + padding + border */
  _he\ight: 585px;
  }

/* NEW!! Part of a fix to the IE expanding box problem (see lengthy comments above). Since the
 actual area for page content is supposed to be 405px wide, these are now set to 405px
 individually. Table is currently used on the #calendar when you choose "show past dates". */

#content p, 
#content h1, 
#content h2, 
#content h3, 
#content dl, 
#content .details, 
#content .entry,
#content table {
 width: 405px;
 }

/* NEW!! These are 35px narrower because of margin-left: 35px. */

#content ul,
#content ol, 
#content #calendar .entry {
 width: 370px;       
 }

/* NEW!! This is 20px narrower because of padding. */

#content #guestbook .entry {
 width: 385px;
 }

/* NEW!! These should all spread to the full width of the .entry that contains them. */

#content .entry p,
#content .entry h2,     
#content .entry h3, 
#content .entry .details {
 width: 100% !important;
 }

/* Accessibility is being used to position the top full-width background graphic. */    
#accessibility {
 position: absolute;
 top: 0; 
 left: 0;
 width: 100%;
 height: 355px;  
 z-index: 10;
 font-size: 0px;
 text-indent: -9999px;
 background: url(/shared/colorcurves/colorcurves-pop-newtop.gif) 50% 0 no-repeat;
 }
   
/* NEW!! Now that #content fills the role of the "big rectangle" and #footer is a sibling of
 #content, not a child (like it was when #container was the rectangle), it must be repositioned so
 it looks like it's inside the rectangle */

#footer  {
 position: relative;    /* NEW!! was clear: both; but #navigation is no longer floated */
 left: -15px;
 top: -90px;       /* NEW!! #footer must now appear inside #content rectangle */
 width: 660px;
 height: 58px;      /* NEW!! was 54px */
 margin: 0 auto;     /* NEW!! now auto-centered since #container isn't centered */
 z-index: 400;       /* NEW!! #footer must now appear inside #content rectangle */
 background: url(/shared/colorcurves/colorcurves-pop-footer.gif) 0 100% no-repeat;
 text-align: left;
 padding: 30px 0 0 30px;   /* NEW!! was padding: 1px 30px 30px 30px; */
 }
 /* NEW!! An ultra-safe Tan hack for IE5 only (using Pixy underscores act as a backup). The
  backslashes pass real values to IE6 that override the fake values for IE5 (box model problem). */
 * html #footer {
  _width: 690px;   /* fake width for IE5win only: real width + padding + border */
  _w\idth: 660px;
  _height: 88px;  /* fake height for IE5win only: real height + padding + border */
  _he\ight: 58px;
  }

#footer p {
 margin: 0;        /* NEW!! forces browser consistency */
 padding: 0;       /* NEW!! forces browser consistency */
 }
 
/* band name & images */
  
#banner .band {
 position: absolute; 
 left: -9999px;   /* hide off-screen */
 }
   
   /* TWO!! This div now contains the photo blob as transparent PNG, which used to be part of the page
    and #content backgrounds. */
    
   #banner .photo {
    position: absolute;
    top: 79px;    /* TWO!! was 98px, and later, 118px; */
    left: 50%;    /* NEW!! was right: -11px; when #containter was the "big rectangle" */
    width: 290px;   /* TWO!! increased from 208px; */
    height: 259px;   /* TWO!! increased from 177px; */
    margin-left: 82px; /* TWO!! was 133px */
    background: url(/shared/colorcurves/colorcurves-pop-newphotoblob.png) top left no-repeat;
    z-index: 500;   /* TWO!! was 400; */
    text-align: left;  /* TWO!! IE shouldn't need this, but it does */
    }
    /* This ultra-safe hack for IE6 and IE5 only combines the * html hack and the underscore hack. It
     lets them to use PNG alpha transparency using the IE proprietary AlphaImageLoader filter */
    * html #banner .photo { 
     _background: none;
     _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/colorcurves/colorcurves-pop-newphotoblob.png');
     }
 
   #banner .photo span {
    display: block;
    margin: 39px 0 0 51px;
    width: 208px;
    height: 177px;
background: url(http://italianwithbetty.com/images/betty.jpg) no-repeat;
    text-indent: -9999px;
    }   

  
   /* TWO!! This div now contains the navigation blob as a pair of GIFs (one with transparency), which
    which can expand and contract vertically as needed using the sliding doors technique. This blob used
    to be part of the #content background; the shape was changed slightly. */
        
   #navigation {
    position: absolute;  /* NEW!! rearranged... was float: right; which won't work anymore */
    top: 313px;     /* TWO!! was 351px; */
    right: 50%;     /* NEW!! page centering */
    margin-right: -300px; /* TWO!! was -279px, now shifted to right (-294px matches old position) */
    width: 137px;     /* TWO!! was 107px */
   /* height: 335px;     TWO!! not needed with sliding doors technique */
    background: url(/shared/colorcurves/colorcurves-pop-newnavbottom.gif) bottom left no-repeat;
    z-index: 450;    /* TWO!! overlaps #footer, underlaps #banner .photo */
      }    
    #navigation ul {
     padding: 36px 20px 30px 20px !important; /* TWO!! */    
     min-height: 290px; /* TWO!! 298px matches actual height of source graphic */
     background: url(/shared/colorcurves/colorcurves-pop-newnavtop.gif) top left no-repeat;
     }
     /* This ultra-safe hack for IE6 and IE5 only combines the * html hack and the underscore hack. */
     * html #navigation ul {
      _height: 290px;   /* IE6 treats this as if it were min-height */
      }

    
#emailsignup {
 position: absolute;
 top: 30px;       /* NEW!! was top: 10px; when #containter was the "big rectangle" */
 right: 50%;       /* NEW!! was right: 10px; when #containter was the "big rectangle" */
 margin-right: -319px;
 z-index: 300;
display:none;
 }


/* --- Text Styles & Additional Margin Fixes ---------------------------------------- */

body {
 font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
 font-size: 13px;
 }

h2 {
 color: #971801;
 font-weight: bold;
 font-size: 115%;
 text-align: left; 
 }

h3 {
 font-style: italic;
 font-size: 100%;
 }

p, .notes {
 line-height: 1.2;
 }

#navigation ul {
 margin: 0; 
 padding: 0;
 font-size: 15px;
 list-style: none;
 }    
 #navigation li {
  line-height: 100%; 
  margin-bottom: 6px;
  }

#emailsignup {
 font-weight: bold;
 }

   #emailsignup input {
    width: 50px;   /* TWO!! minor tweak improves appearance */
    }

   #emailsignup input#list_email {
    margin-left: 3px;  /* TWO!! minor tweak improves appearance */
    width: 125px;   /* TWO!! minor tweak improves appearance */
    }


/* --- Link Styling ----------------------------------------------------------------- */

/* general links */
a    {font-weight: bold; text-decoration: underline;}
a:link   {color: #5B8FBA;} 
a:visited {color: #5B8FBA;}
a:hover   {color: #EDAD53;} 
a:active  {color: white;}

/* navigation links */
#navigation li a     {text-decoration: none;}
#navigation li a:link   {color: white;}
#navigation li a:visited {color: white;}
#navigation li a:hover   {color: #FFE4AD;}
#navigation li a:active  {color: white;}

/* links page links */
.links a:link h2    {text-decoration: none;}    
.links a:visited h2   {text-decoration: none;}    
.links a:hover h2    {color: #EDAD53;}    
.links a:hover h2    {color: #EDAD53;}    

 
/* highlight current page */
 
   /* TWO!! Now using .highlight class (which is added dynamically) to highlight current page */
 
   .highlight {
    color: #F09D18 !important;
    }
    
/* playfully stagger links */
#navigation li {text-align: center;}

   /* TWO!! A few minor changes here to better accomodate custom link names */
   #navhome   {margin-left: 6px; margin-right: 5px;}  
   #navbio   {margin-left: 4px; margin-right: 4px;} 
   #navmusic  {margin-left: 0px; margin-right: 18px;} /* squeezed */
   #navcontact  {margin-left: 10px;}        
   #navpress  {margin-left: -5px; margin-right: 15px;} /* squeezed */
   #navnews   {margin-left: 2px; margin-right: 4px;}
   #navcalendar {margin-left: 2px; margin-right: 4px;}
   #navphotos  {margin-left: 0px; margin-right: 6px;}
   #navproducts {margin-left: 5px; margin-right: 1px;} 
   #navguestbook {margin-left: 0px; margin-right: 3px;}  /* left was 10px; */      
   #navlinks  {margin-left: 1px; margin-right: 7px;}

 
/* --- PAGE SPECIFIC STYLES --------------------------------------------------------- */

/* photos */
.photos dt {
 color: #971801;
 font-weight: bold;
 font-size: 115%;
 margin: 1.7em 0 .8em 0; 
 } 
.photos dd {
 margin: 0; 
 padding: 0;
 }

/* music */
.music .artist, .music .details {margin: 0; padding: 0;}

/* contact */
.contact .name   {font-weight: bold;}
.contact .entry ul  {list-style: none;}
.contact .entry li {padding-bottom: .15em;}    

/* press */
.press .caption  {font-weight: bold; color: #8f8f8f;}

/* products */
.products hr {display: none;}

/* 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 h3, #calendar .details, #calendar .entry p {
 margin-left: 35px;
 }
#calendar h3, #calendar h4, #calendar address {
 margin-top: 0; 
 margin-bottom: 0.1em;
 font-style: normal;
 font-size: 100%;
 }
#calendar h4  {font-weight: normal;}

/* products */
.products table {font-size: 100%;}

/* guestbook */
#postForm  {
 text-align: left;
 width: 340px;
 margin: 18px 0 25px 20px;
 }
 #postForm input, #postForm textarea {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  }
 #postForm textarea {
  height: 100px;
  }
 #postForm input[type="submit"] {
  width: 200px;
  margin: 0 auto;
  }

#guestbook .entry {
 padding: 2px 10px;
 margin-bottom: 10px;
 }    
 #guestbook .entry h2 {
  font-size: 100%;
  color: #BAA486;
  padding-bottom: 4px;
  margin-bottom: 0;
  border-bottom: 1px solid #DCD1C2;
  }
 #guestbook .entry h3 {
  font-size: 85%;
  color: #BAA486;
  text-align: right;
  margin: 0; padding: 0;
  }
    
   /* TWO!! Captcha styling */

   .guestbook #gbcomment {
    margin-bottom: 0 !important;   /* TWO!! forces browser constistency */
    }
   .guestbook #gbimage {
    position: absolute;
    margin-top: 10px;       /* TWO!! replaces lost margin-bottom from #gbcomment */
    }
   .guestbook .security_code_label {
    display: block;
    margin-top: 10px;       /* TWO!! replaces lost margin-bottom from #gbcomment */
    width: 220px !important;
    margin-left: 120px;
    }
   .guestbook #security_code {
    width: 220px !important;
    margin-left: 120px;
    }
    
/* links */
.links h3     {font-style: normal;} 

.links dl, .links h2  {margin-left: 10px;}

     
/* --- Non-graphical H1 Text Styling ------------------------------------------------ */

   h1 {
    margin-top: 0;     /* TWO!! improves browser consistency */
    padding-top: 0.66em;   /* TWO!! improves browser consistency */
    color: #971801;
    font-weight: bold;
    font-size: 200%;
    text-transform: capitalize;
    }
 
/* NEW!! minor tweaks for splash and home page images */

.home img {margin: 1em 0; display: block;} /* NEW!! display: block triggers margin collapse */

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