/* UPSHADOW template stylesheet

 graphic design: Stacy Bias (www.stacybias.net)
 coding: Andrew Tay (www.andrewtay.com) February 2010
 
 VARIATION FILE: all unique colors and images for this variation are given at the end of the file for 
       ease of maintenance, overriding earlier settings.
 
*/

/* --- 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 {
 text-align: left; 
   }

/* ACCESSIBILITY */   

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

/* CONTAINER */
    
#container {
 background: white url('/shared/upshadow/content-white.gif') center top repeat-y;
   }

/* NAVIGATION */ 

#navigation { 
 position: relative;  /* ie7 needs this for the flyouts to overlap the #banner */
 z-index: 9999;     /* ie7 needs this for the flyouts to overlap the #banner */
 min-height: 63px;
 background: url('/shared/upshadow/headerstripe-ocean.jpg') center top;
 }    
 /* Ultra-Safe Hack for IE6: applies min-height */
 * html #navigation {
  _height: 63px;      /* IE6 treats this as min-height */
  }
       
 #navigation ul {
  width: 960px;
  margin: 0 auto;  
  list-style: none;
  }
  #navigation li {
   display: block;
   float: left;
   font: bold 14px "trebuchet ms", arial, helvetica, sans-serif;
   text-transform: uppercase;
   }
   #navigation li a {
    display: block;
    float: left;   /* ie6 needs this for some bizarre reason */
    height: 63px;
    padding: 0 7px;
    line-height: 59px;
    }

   /* Special fancy code makes sure that navigation expands vertically if an extra line of links is 
  needed. Doesn't work in IE6/7. See http://www.positioniseverything.net/easyclearing.html */
   #navigation ul:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }  

    
/* EMAIL SIGNUP */

#emailsignup {
 position: relative;    /* using this instead of absolute so it will shift down in case nav expands */
 top: 75px;
 left: 346px;
 width: 260px;
 height: 355px;      /* this controls the height of the left border */
 margin: 0 auto -355px auto; /* -ve bottom margin cancels out the height that was set above */
 padding-left: 15px;
 border-left: 2px solid #ccc;
 z-index: 900;
 }

 
/* BANNER */

#banner {
 position: relative;  /* reference for positioning #banner .band */
 clear: both;
 width: 956px;
 margin: 0 auto;
 padding-top: 12px;
 }
 
 /* Photo - This is the main photo at the top of the page. Dimensions are 955px x 301px */
 #banner .photo {
  width: 955px;
  height: 301px;
  text-indent: -9999px;
  }
  /* Band Span - This is the rounded-corner photo frame, and optionally displays the band name */
  #banner .photo span {
   display: block;
   width: 895px;
   height: 275px;
   padding: 16px 30px 10px 30px;  /* bottom padding protexcts descenders from being cut off in IE7 */
   background: url('/shared/upshadow/mainphotocorners-white.png') center center no-repeat;
   }
   /* Ultra-Safe Hack for IE6: uses IE proprietary filter to display transparent PNG */
   * html #banner .photo span {
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/mainphotocorners-white.png');
    }  

 /* Band - This is the secondary photo at the side of the page. Dimensions are 253px x 260px */
 #banner .band {
  position: absolute;
  top: 425px;
  right: 0;
  width: 253px;
  height: 260px;
  text-indent: -9999px;
  }
  /* Band Span - This is the rounded-corner photo frame */
  #banner .band span {
   display: block;
   width: 100%;
   height: 100%;
   background: url('/shared/upshadow/sidebarphotocorners-white.png') center center no-repeat;
   }
   /* Ultra-Safe Hack for IE6: uses IE proprietary filter to display transparent PNG */
   * html #banner .band span {
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/sidebarphotocorners-white.png');
    }  
  
   
/* CONTENT */
    
#content {
 width: 630px;
 min-height: 360px;
 margin: 0 auto;
 padding: 12px 300px 20px 20px;  /* padding-top also prevents margins from collapsing through */
 position: relative;
 }
 /* Ultra-Safe Hack for IE6: applies min-height */
 * html #content {
  _height: 360px;      /* IE6 treats this as min-height */
  }

 
/* FOOTER */
 
#footer  {
 width: 100%;
 height: 100px;
 border-top: 32px solid #264645;
 background-color: #3a6967;
 text-align: center;
 }

   
/* --- Text Styles & Minor Placement Adjustments ----------------------------------- */

body {
 color: #3f3f3f;
 font: 14px Arial, Helvetica, sans-serif;
 }

h1 {
 margin: 0 0 0 -20px;   /* margin-top: 0; is for browser consistency */
 color: #3a6967;
 font: bold 36px "Trebuchet MS", Arial, Helvetica, sans-serif;
 padding-bottom: 3px;
 line-height: 1em;
 }
 
h2, h3, h4 {
 font-weight: bold;
 }

h2 {
 color: #264645;
 font-size: 1.25em;
 text-transform: uppercase;
 }

h3 {
 color: black;
 font-size: 1.1em;
 }

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

#emailsignup form {
 color: #3a6967;
 font: bold 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
 }
  
#footer p {
 color: #264645 !important;
 font-size: 13px;
 font-weight: bold;
 text-transform: uppercase;
 } 

 
/* --- Link Styling & Form Elements ------------------------------------------------ */

/* general links */
a    {font-weight: bold; text-decoration: underline;}
 a:link   {color: #69bcb9;} 
 a:visited {color: #93b9b8;}
 a:hover   {color: #638059;} 
 a:active  {color: #264645;}
  
/* navigation links */
#navigation li a     {color: white; text-decoration: none;}
 #navigation li a:link   {}
 #navigation li a:visited {}
 #navigation li a:hover   {background: url('/shared/upshadow/navarrow-white.png') center bottom;}
 #navigation li a:active  {background: none;}

 /* highlight current page */
 #navigation li a.highlight {
  background: url('/shared/upshadow/navarrow-white.png') center bottom;
  }

  /* Ultra-Safe Hack for IE6: uses IE proprietary filter to display transparent PNG. IE6 can't center
   the transparent PNG, so we've separated the arrow from the gradient. Arrow is centered, gradient is
   stretched. */
  * html #navigation li a:hover, 
  * html #navigation li a.highlight {
   _padding: 0;
   _background: none;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/ie6-navarrow-gradient.png', sizingMethod='scale');
   }
   * html #navigation li a:hover span,
   * html #navigation li a.highlight span {
    _display: block;
    _background: url('/shared/upshadow/ie6-navarrow-white.gif') center bottom no-repeat;
    _padding: 0 7px 4px 7px;
    }
  
/* EMAILSIGNUP FORM */

#emailsignup form {
 }
 /* this affects both the entry box and the button */
 #emailsignup input {
  width: 50px;
  height: 50px;
  margin-top: 2px;
  font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
  vertical-align: middle;  /* this is the secret to getting the button and the entry box to line-up */
  background: url('/shared/upshadow/emailbutton-oceanwhite.gif') center bottom no-repeat;
  border: none; 
  color: white;
  text-transform: uppercase;
  }
  #emailsignup input:hover {
   background-position: center top;
   }

 /* this is the entry box */
 #emailsignup input#list_email {
  width: 180px;
  height: 20px;
  margin-right: 8px;
  padding: 15px 8px;
  border: none;
  color: #666;
  background: url('/shared/upshadow/emailbox-white.gif') no-repeat;
  text-transform: none;
  } 

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

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

/* HOME */
.home img {
 display: block;
 margin: 1em 0;
 }
 
/* CONTACT */
.contact .name   {font-weight: bold;}
.contact .entry ul  {list-style: none;}
.contact .entry li {padding-bottom: .15em;} 
 
/* CALENDAR */
#calendar .entry {
 margin: 0 0 2.3em 0;
 }
 /* Ultra-Safe Hack for IE6: gives hasLayout, curing potential rendering bugs */
 * html #calendar .entry {
  _height: 1px;     /* doesn't affect layout since IE6 treats this as min-height */
  }

 #calendar .entry .details {
  margin-left: 20px;
  }
  #calendar .entry h4 {
   font-size: 1em;
   margin-bottom: 0.5em;
   }
 
/* LINKS */
.links h3 {
 font-style: normal;
 } 
.links dl {
 margin-left: 20px;
 }

/* PRESS */

.press .entry {
 }
 .press .entry .caption {
  text-align: right;
  margin-right: 75px;
  font-style: italic;
  }
  
/* PHOTOS */
.photos dl {
 margin-left: 0;    /* ie needs this */
 }
   .photos dt {
  font-weight: bold;
  font-size: 1.15em;
  margin: 0 0 0.8em 0; 
  } 
 .photos dd {
  margin: 0 0 1.7em 0; 
  padding: 0;
  } 

/* MUSIC */
.music .details .artist {
 font-weight: bold;
 }


/* FORM SUBMIT BUTTONS, INPUTS, TEXTAREAS */
/* Submit Buttons - this affects email list 2nd page, blog form and guestbook form */
.home table input[type="submit"],     /* ie6 doesn't understand this */
.blog #comment_form input#guestbook_button,
.guestbook #postForm input#guestbook_button {
 color: white;
 font: bold 15px "Trebuchet MS", Arial, Helvetica, sans-serif !important;
 background: #3a6967;
 padding-bottom: 3px !important; /* overrides inline styles in the HTML */
 border: none;
 }
 .home table input[type="submit"]:hover,
 .blog #comment_form input#guestbook_button:hover,
 .guestbook #postForm input#guestbook_button:hover {
  background: #264645;
  }

/* Inputs/Textareas - this affects email list 2nd page and blog form */  
.home table input, .home table select,
.blog #comment_form input, .blog #comment_form textarea {
 padding: 2px 5px !important;  /* overrides inline styles in the HTML */
 border: none;
 color: #555;
 background: #e0e0e0;
 }
 .home table select {
  padding: 0 !important;  /* overrides inline styles in the HTML */
  border: 2px solid #ddd;
  background: white;
  }
 
/* GUESTBOOK */
/* guestbook entry form */
#postForm {
 width: 406px;
 height: 325px;
 margin: 18px 0 15px 0;
 padding: 25px 97px 30px 97px;
 background: url('/shared/upshadow/guestbookform-ocean.gif') top center no-repeat;
 border-bottom: 10px solid #62b1c8;
 }
 
 /* labels */
 #postForm label {
  display: block;
  min-height: 18px;  /* helps improve spacing in Safari, which messes-up line-heights for some reason */
  font-weight: bold;
  color: white;
  }
 /* submit button */
 #postForm input {
  margin-top: 5px;
  width: 260px;
  }
 /* general entry fields */
 #postForm input#gbname,
 #postForm input#gbaddress,
 #postForm textarea,
 #postForm input#security_code {
  display: block;
  width: 398px;
  min-height: 16px;  /* helps improve spacing in Safari, which messes-up line-heights for some reason */
  padding: 2px 5px;
  border: none;
  color: #555;
  background: #fff;
  margin: 0 0 5px 0;
  }
  #postForm textarea {
   height: 100px;
   margin-bottom: 0 !important;  /* forces browser constistency */
   overflow-y: auto;      /* auto-hides scrollbar in ie */
   }
 
 /* captcha image */ 
 #postForm #gbimage {
  position: absolute;
  margin-top: 10px;       /* replaces lost margin-bottom from #gbcomment */
  }
 /* captcha "security code" text label */ 
 #postForm .security_code_label {
  margin-top: 10px;       /* replaces lost margin-bottom from #gbcomment */
  width: 220px !important;
  margin-left: 115px;
  }
 /* captcha entry field */ 
 #postForm input#security_code {
  width: 135px !important;
  margin-left: 115px;
  }

/* previous guestbook entries */  
#guestbook .entry {
 padding: 2px 20px 2px 0;
 margin-bottom: 0;
 }    
 #guestbook .entry h2 {
  margin-bottom: 0;
  padding-bottom: 2px;
  color: black;
  font: 22px "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-transform: none;   /* overrides earlier "uppercase" setting */
  }
 #guestbook .entry h3 {
  margin: 0; 
  padding: 0 0 6px 0;
  color: black;
  font-size: 12px;
  border-bottom: 1px solid #62b1c8;
  }
 #guestbook .entry blockquote {
  padding: 0 20px;
  color: black;
  }    

  
/* --- FLYOUT SUB-MENUS ------------------------------------------------------------------------------------- */

/* --- Resets for Sub-Navigation (Flyouts) --- */
   
  /* Resets subnav ul to defaults. Added "body" in front to increase 
   specificity and reduce cascade problems. */ 
  body #navigation ul.subnav, body #navigation ul.subnav li, body #navigation ul.subnav li a { 
   width: auto; height: auto; 
   min-width: 0; min-height: 0; max-width: none; max-height: none;
   margin: 0; padding: 0; border: none; background: none;
   float: none;
   text-align: left;
   line-height: 1;
   }

/* --- Changes to Main Navigation --- */

#navigation ul#navlist li {
 position: relative;   /* used as a reference for subnav */
 }
 /* Flyout Arrows */
 #navigation ul#navlist li.hasflyout a span {
  padding-right: 13px;
  background: url('/shared/upshadow/downarrow-white.gif') right 7px no-repeat !important;
  }

 /* Hover Highlight/Layering */
 #navigation ul#navlist li:hover,
 #navigation ul#navlist li.sfhover {
  z-index: 999;  /* forces submenu to overlap all of the main navigation links and #emailsignup */
  }

   
/* --- Positioning and Hover Effect for Sub-Navigation (Flyouts) --- */

 /* Known issue: Opera 9.6 has problems with having display: inline on the main #navigation lis and position: 
  absolute on the .subnav. It expands #navigation, creating a horizontal scroll bar when hovered and
  sometimes produces repainting problems. */
      
#navigation li ul.subnav {
 display: none;   /* choosing to use the "none/block" technique only because Opera 9.6 chokes */
 position: absolute;
 z-index: 999;
/* top: -9999px;   /* hides menu offscreen when it isn't being hovered (better accessibility) */
/* right: 9999px;   /* hides menu offscreen when it isn't being hovered (better accessibility) */
 width: 200px;
 }
 #navigation li:hover ul.subnav,
 #navigation li.sfhover ul.subnav {
  display: block; /* choosing to use the "none/block" technique only because Opera 9.6 chokes */
  top: 40px;   /* causes subnav to appear on hover (it's critical that there be no gap) */
  left: 0px;   /* causes subnav to appear on hover (it's critical that there be no gap) */
  }

 /* Ultra-Safe Hack for IE7: this gives hasLayout to the li, which improves subnav positioning. Unfortunately,
  this also forces IE6 to display theses <li>s as block, so we must restrict the fix to IE7. Also, small
  position tweak. */
 *:first-child+html ul#navlist li {*zoom: 1;}
  
  
/* --- Styling for Sub-Navigation (Flyouts) --- */
 
#navigation li ul.subnav {
 padding: 0 1px 1px 0;
 background: url('/shared/upshadow/shadow-navbuttons-black10.png') right bottom no-repeat;  /* shadow */ 
 } 
 #navigation li ul.subnav li {
  display: block;  /* this layout needs this, since parent li is now inline */
  font-size: 1px;  /* this odd bit of code prevents IE 6/7 from inserting extra space below li */
  } 
  #navigation li ul.subnav li a {
   display: block;
   top: auto;     /* overrides 1px offset used in main nav for shadow effect */
   left: auto;    /* overrides 1px offset used in main nav for shadow effect */
   padding: 6px 7px;
   font-size: 14px;
   font-weight: bold;
   color: #264645;
   background: url('/shared/upshadow/white95.png'); 
   }
   #navigation ul.subnav li a:hover {
    color: #fff;
    background: #72c2bf url('/shared/upshadow/white25.png'); 
    }
   #navigation ul.subnav li a:active {
    padding: 7px 6px 5px 8px;
    }

 /* Ultra-Safe Hacks for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
 * html #navigation li ul.subnav {
  _background: none;     /* removes shadow effect, which doesn't work in IE6 */ 
  } 
  * html #navigation ul.subnav li a {
   _background: none; 
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/white95.png', sizingMethod='scale');
   _zoom: 1;
   }
   * html #navigation ul.subnav li a:hover {
    _background: #72c2bf url('/shared/upshadow/trans.gif'); /* ie6 needs this for the menu to work!! */ 
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/white25.png', sizingMethod='scale');
    }


/* --- VARIATION -------------------------------------------------------------------------------------------- */
/* ---- CODE ------------------------------------------------------------------------------------------------ */

#container   {background: black url('/shared/upshadow/content-black.gif') center top repeat-y;}
#navigation  {background: url('/shared/upshadow/headerstripe-red.jpg') center top;}    
#emailsignup  {border-left: 2px solid #555;}

#banner .photo span {
 background: url('/shared/upshadow/mainphotocorners-black.png') center center no-repeat;}
 * html #banner .photo span {
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/mainphotocorners-black.png');}  

#banner .band span {
 background: url('/shared/upshadow/sidebarphotocorners-black.png') center center no-repeat;}
 * html #banner .band span {
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/sidebarphotocorners-black.png');}  
  
#footer  {
 border-top: 32px solid #290610;
 background-color: #420a1a;}
   
/* --- Text Styles & Minor Placement Adjustments ----------------------------------- */

body  {color: #aaa;}

h1  {color: #4f0c1f;}
h2  {color: #555;}
h3  {color: #444;}

#emailsignup form {color: #4f0c1f;}
#footer p    {color: #290610 !important;} 
 
/* --- Link Styling & Form Elements ------------------------------------------------ */

/* general links */
a:link   {color: #8d1538;} 
a:visited {color: #906370;}
a:hover   {color: #610f26;} 
a:active  {color: #420a1a;}
  
/* navigation links */
#navigation li a {color: #eee;}

/* highlight current page */
#navigation li a:hover,
#navigation li a.highlight {
 color: #fff;
 background: url('/shared/upshadow/navarrow-black.png') center bottom;}
 * html #navigation li a:hover,
 * html #navigation li a.highlight span {
  _background: url('/shared/upshadow/ie6-navarrow-black.gif') center bottom no-repeat;}

/* this affects both the entry box and the button */
#emailsignup input {
 color: #eee;
 background: url('/shared/upshadow/emailbutton-redblack.gif') center bottom no-repeat;}
 /* this is the entry box */
 #emailsignup input#list_email {
  color: #999; background: url('/shared/upshadow/emailbox-black.gif') no-repeat;} 

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

/* Submit Buttons - this affects email list 2nd page, blog form and guestbook form */
.home table input[type="submit"], .blog #comment_form input#guestbook_button, 
.guestbook #postForm input#guestbook_button {
 color: #eee;
 background: #420a1a;
 }
 .home table input[type="submit"]:hover, .blog #comment_form input#guestbook_button:hover,
 .guestbook #postForm input#guestbook_button:hover {
  background: #290610;}

/* Inputs/Textareas - this affects email list 2nd page and blog form */  
.home table input, .home table select, .blog #comment_form input, .blog #comment_form textarea {
 color: #333;
 background: #aaa;
 }
 .home table select {
  border: 2px solid #ddd;
  background: white;}

/* GUESTBOOK */
#postForm {
 background: url('/shared/upshadow/guestbookform-gray3.gif') top center no-repeat;
 border-bottom: 10px solid #252525;
 }
 #postForm label      {color: #333;}
 #postForm input#gbname, #postForm input#gbaddress, #postForm textarea, #postForm input#security_code {
  color: #333; background: #aaa;}
 
 #guestbook .entry h2    {color: #4f0c1f;}
 #guestbook .entry h3    {color: #555; border-bottom: 1px solid #333;}
 #guestbook .entry blockquote  {color: #aaa;}    

  
/* --- FLYOUT SUB-MENUS ------------------------------------------------------------------------------------- */

#navigation ul#navlist li.hasflyout a span {
 background: url('/shared/upshadow/downarrow-aaa.gif') right 7px no-repeat !important;}
 #navigation ul#navlist li.hasflyout a.highlight span {
  background: url('/shared/upshadow/downarrow-white.gif') right 7px no-repeat !important;}
#navigation li ul.subnav {
 background: url('/shared/upshadow/shadow-navbuttons-black10.png') right bottom no-repeat;} /* shadow */ 
 
 #navigation li ul.subnav li a {
  color: #ddd;
  background: url('/shared/upshadow/black55.png');
  }
  #navigation ul.subnav li a:hover {
   color: #fff;
   background: url('/shared/upshadow/black75.png');}

 * html #navigation ul.subnav li a {
  _background: none;  /* necessary here */
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/black55.png', sizingMethod='scale');
  }
  * html #navigation ul.subnav li a:hover {
   _background: url('/shared/upshadow/trans.gif'); /* ie6 needs this for the menu to work!! */ 
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/black75.png', sizingMethod='scale');}