/* AXLE GREASE template stylesheet

 graphic design: Deirdre O'Lavery (www.dwarvenbrassiere.org)
 interactive design, coding, additional graphics: Andrew Tay (www.andrewtay.com) September 2009
 /* AXLE GREASE template stylesheet

 graphic design: Deirdre O'Lavery (www.dwarvenbrassiere.org)
 interactive design, coding, additional graphics: Andrew Tay (www.andrewtay.com) September 2009
 
 MASTER FILE: gray, guitar theme, default banner
 
 Variations can be across any of 3 dimensions, resulting in 4 variations per color: 
 - 5 different colors ("axle grease" gray is standard)
 - guitar theme (standard) vs. bass theme
 - default banner photo (standard) or custom banner photo
 
*/

/* --- 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 {
 background: #1e1c1d top left; 
 text-align: left;
   }


/* ACCESSIBILITY */   

/* Hand - This is the hand graphic in the sidebar */
#accessibility {
 position: absolute;
 top: 623px;
 left: 50%;
 margin-left: 182px;
 width: 198px;
 height: 198px;
 background: url(/images/Star.jpg) top left;
 text-indent: -9999px;
 z-index: 50;
 }
 
 
/* CONTAINER */
    
#container {
 position: relative;   /* this serves as a reference for #banner and #content h1 */
 width: 780px;
 margin: 0 auto;
 padding: 279px 0 0 0;  /* pushes #navigation and #content down to the right spot */
 background: #58504d;
   }

   
/* NAVIGATION */ 

#navigation {
 float: left;
 width: 134px;
 margin-bottom: 16px;
 background: url(/shared/axlegrease/navigation-gray.png) top left repeat-y;
 display: inline;      /* cures IE6 doubled-margin float bug */
 position: relative;
 z-index: 700;      /* makes it display over #banner and #content */
 }
 #navigation ul {
  width: 115px;
  margin: 0; 
  padding: 10px 0 33px 0;   
  list-style: none;
  font-size: 12px;
  text-transform: uppercase;
  }
  #navigation li {
   min-height: 24px;
   padding-top: 24px;
   line-height: 24px;
   text-indent: -10px;   /* creates hanging indent when there are multiple lines */
   }
   /* Ultra-Safe Hack for IE6: applies min-height, gives hasLayout */
   * html #navigation li {
    _height: 24px;    /* IE6 treats this as min-height */
    }
    
   #navigation li a {
    display: block;
    padding: 0 10px 0 20px; /* extra 10px on left side for hanging indent */
    width: 85px;    /* gives hasLayout, preventing a spacing bug in IE6/7 */
    }

/* EMAIL SIGNUP */

#emailsignup {
 position: absolute;
 top: 550px;
 left: 571px;
 width: 190px;
 height: 70px;
 z-index: 200;       /* makes it display over any #content img photos that spill over */
 }
 #emailsignup form {
  }

/* BANNER */

#banner {
 position: absolute;
 top: 0;
 left: 0;
 width: 780px;
 height: 321px;
 }

 /* Photo - This is the large photo at the top of the page */  
 #banner .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(/images/Full_Name_Banner.jpg) no-repeat;
  text-indent: -9999px;
  }
 
 /* Band - This is small band photo that sits on the right side */
 #banner .band {
  position: absolute;
  top: 281px;
  left: 571px;
  width: 203px;
  height: 258px;
  background: url(/shared/axlegrease/photobg-gray.jpg) top left no-repeat;
  }
  #banner .band span {
   display: block;
   position: absolute;
   top: 25px;
   left: 28px;
   width: 140px;
   height: 194px;
background: url(/images/SmallBanner.jpg) no-repeat;
   text-indent: -9999px;
   }
  
     
/* CONTENT */
    
#content {
 position: relative;
 width: 367px;
 min-height: 505px;
 margin: 0 0 16px 156px;    
 padding: 20px;      /* padding-top prevents margin collapsing */
 background: #22201e url(/shared/axlegrease/content-gray.png) left bottom no-repeat;
 }
 /* Ultra-Safe Hack for IE6: applies min-height, corrects 3px float offset */
 * html #content {
  _height: 505px;    /* IE6 treats this as min-height */
  _margin: 0 3px 0 153px;  /* left margin reduced by 3px, right increased by 3px */
  }
  
 /* H1 - This is used to place the guitar/bass graphic and the top rounded corners */
 #content h1 {
  position: relative;    /* also serves as a refernce to h1 span */
  top: -20px;
  left: -20px;
  width: 407px;
  height: 532px;
  margin: 0 -407px -532px 0;  /* these -ve margins prevent the h1 block from taking up space */
  background: url(/images/Name-Banner2.jpg) top left no-repeat;
  }
  /* H1 Span - The band/page name ribbon */
  #content h1 span {
   display: block;
   position: absolute;
   bottom: 554px;
   left: -156px;     /* same number of px as #content margin-left */
   width: 720px;
   min-height: 32px;
   padding: 7px 20px 7px 40px;
   line-height: 32px;
   background: url(/images/Name-Banner2.jpg) left -3px repeat-y;
   }
   /* Ultra-Safe Hack for IE6: applies min-height */
   * html #content {
    _height: 32px;    /* IE6 treats this as min-height */
    }

 /* These lines of code force the rest of the content to layer above the h1 guitar/bass graphic */   
 #content * {
  position: relative;
  z-index: 500;
  }  
 #content h1 {
  z-index: 0 !important;
  }  

 /* This could also be used instead of #content * or #content>*
 #content p,
 #content h2, #content h3, #content h4, #content img,
 #content ul, #content ol, #content dl, 
 #content form,
 #content .entry, #content .notes, #content .details, #content .contact {
  position: relative;
  z-index: 500;
  } */
  
 /* This makes it so that large images won't expand the #content div in IE6 */  
 * html #content img, * html #content object, * html #content embed {
  _margin-right: -185px;
  }
 
/* FOOTER */
 
#footer  {
 clear: both;
 width: 100%;    /* IE 6/7 needs this to give hasLayout */
 height: 47px;
 background: url(/shared/axlegrease/footer-gray.png) left top repeat-y;
 text-align: center;
 }
 #footer p {
  padding-top: 14px;
  margin: 0;
  }

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

body {
 color: #c4c1c0;
 font: 12px Times New Roman, "Times New Roman", Times, serif;
 }

#banner .band {
 }

h1 {
 margin-top: 0;     /* for browser consistency */
 margin-bottom: 0.5em;  /* for browser consistency */
 color: #c4c1c0;
 font: 
 text-transform: ;
 }
 
h2 {
 margin-top: 0;     /* for browser consistency */
 color: #7b6c59;
 font: 14px Times New Roman, "Times New Roman", Times, serif;
 text-transform: uppercase;
 }

h3 {
 margin-bottom: 0.5em; /* */
 color: #7a7572;
 font: bold 15px Times New Roman, "Times New Roman", Times, serif;
 }

h4 {
 margin-top: 0.5em; /* */
 }

#footer p {
/* color: #c4c1c0 !important; */
 font: 10px Times New Roman, "Times New Roman", Times, serif;
 text-transform: ;
 } 
  
p, .notes {
 line-height: 1.2;
 }

.details, .contact .entry ul {
/* font-style: italic; */
 } 

address {
 } 
 
/* --- Link Styling & Form Elements ------------------------------------------------- */

/* general links */

a    {font-weight: bold; text-decoration: underline;}
 a:link   {color: #a9ad8c;} 
 a:visited {color: #a9ad8c;}
 a:hover   {color: #7f8269;} 
 a:active  {color: #999;}

 h3 a:link  {color: #7a7572;}  /* reverts h3 links back to normal h3 color */
 h3 a:visited  {color: #7a7572;}
 h3 a:hover   {color: #7f8269;}
 h3 a:active  {color: #999;}
  
/* navigation links */

#navigation li a     {text-decoration: none;}
 #navigation li a:link   {color: #c4c1c0;}
 #navigation li a:visited {color: #c4c1c0;}
 #navigation li a:hover   {color: #7b6c59;}
 #navigation li a:active  {color: #999;}
 
 /* highlight current page */
 #navigation li a.highlight {
  color: #7b6c59 !important;
  }

/* email signup form elements */
#emailsignup form {
 line-height: 1.4;
 color: #c4c1c0;
 font-style: ;
 }
 /* this affects both the entry box and the button */
 #emailsignup input {
  width: 40px;
  border: 1px solid #7b6c59;
  background: #c4c1c0;
  }
  #emailsignup input:hover {
   background-color: #aca9a8;
   }
 /* this is the entry box */
 #emailsignup input#list_email {
  width: 135px;
  height: 1.35em;
  margin-right: 8px;
  padding: 2px;
  border: 1px solid #7b6c59;
  color: #7b6c59;
  background: #22201e;
  } 

  
/* --- 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 1.3em 0;
 padding-bottom: 1px;    /* browser consistency: prevents margin of p from collapsing through .entry */
 border-bottom: 2px solid #7b6c59; /* */
 }
 /* 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 h2 {
  }
 #calendar .entry h3 {
  }
 #calendar .entry .details {
  margin-left: 0;
  }
  #calendar .entry .details 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;
  }

/* NEWS */
.news .entry    {margin-bottom: 2.5em;}
   
/* PHOTOS */
.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 {
 margin-bottom: 2.5em;
 }
 .music .details .artist {
  color: white;
  font-weight: bold;
  }
 
/* GUESTBOOK */
/* guestbook entry form */
#postForm  {
 position: relative;   /* for some bizarre reason, ie6 needs this to position the captcha image. */
 margin: 0 auto 40px auto;
 }
#postForm form {
 margin: 0;      /* ie needs this to keep from adding extra space at the bottom */
 } 
 /* labels */
 #postForm label {
  display: block;
  min-height: 1.25em;  /* improves spacing in Safari, which sometimes mishandles line-heights */
  }
 /* submit button */
 #postForm input {
  display: block;
  margin: 20px auto 0 auto;
  width: 250px;
  }
 /* general entry fields */
 #postForm input#gbname,
 #postForm input#gbadress,
 #postForm textarea,
 #postForm input#security_code {
  display: block;
  width: 355px;
  margin: 2px 0 10px 0;
  padding: 2px 5px;
  border: 1px solid #aaa;
  color: #666;
  background: #c4c1c0; /* */
  }
  #postForm textarea {
   height: 100px;
   margin-bottom: 0 !important;  /* forces browser constistency */
   overflow-y: auto;      /* auto-hides scrollbar in ie */
   }
  #postForm input#gbname:focus,
  #postForm input#gbadress:focus,
  #postForm textarea:focus,
  #postForm input#security_code:focus {
   color: #444 !important;
   background: #cecece !important;  /* */
   } 
 
 /* captcha image */ 
 #postForm #gbimage {
  position: absolute;
  margin-top: 10px;       /* replaces lost margin-bottom from #gbcomment */
  }
 /* captcha "security code" text label */ 
 #postForm .security_code_label {
  display: block;
  margin-top: 10px;       /* replaces lost margin-bottom from #gbcomment */
  width: 220px !important;
  margin-left: 120px;
  }
 /* captcha entry field */ 
 #postForm input#security_code {
  width: 235px !important;
  margin-left: 120px;
  }

/* previous guestbook entries */  
#guestbook .entry {
 padding: 2px 10px 2px 5px;
 margin-bottom: 10px;
 font-size: 14px;
 }    
 #guestbook .entry h2 {
  padding-bottom: 4px;
  border-bottom: 2px solid #7b6c59; /* */
  margin-bottom: 0;
 /* color: #81807E; */
  font-size: 16px;
  text-transform: none;
  }
 #guestbook .entry h3 {
  margin: 0; 
  padding: 0;
 /* color: #81807E; */
  font-size: 14px;
  font-weight: normal;
  text-align: right;
  }


/* --- 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 { 
   width: auto; height: auto; 
   min-width: 0; min-height: 0; max-width: none; max-height: none;
   margin: 0; padding: 0; border: none; background: 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 {
  background: url(/shared/axlegrease/rightarrow-gray.gif) 105px 32px no-repeat !important;
  }
  /* Ultra-Safe Hacks for IE6 and IE7: this eliminates strange gap that appears when a li in the main nav
   has a subnav that also has li in it. The margin is reduced using ems because the size of the gap
   depends on the font size used in the main nav. */
  * html             #navigation ul#navlist li.hasflyout  {*margin-bottom: -0.23em;}
  *:first-child+html #navigation ul#navlist li.hasflyout  {*margin-bottom: -0.23em;}
  
  #navigation ul#navlist li.hasflyout:hover {
   }

/* --- Positioning and Hover Effect for Sub-Navigation (Flyouts) --- */
    
#navigation li ul.subnav {
 display: block;
 position: absolute;
 z-index: 1000;
 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: 120px;
 border: 5px solid #58504d;
 padding: 0;
 }
 #navigation li:hover ul.subnav,
 #navigation li.sfhover ul.subnav {
  top: 24px;    /* causes subnav to appear on hover (it's critical that there's no gap) */
  right: -129px;   /* causes subnav to appear on hover (it's critical that there's no gap) */
  }

/* --- Styling for Sub-Navigation (Flyouts) --- */
 
 #navigation li ul.subnav li {
  border-top: 2px solid #58504d;
  } 
  #navigation li ul.subnav li:first-child {
   border-top: none;
   } 
   
 #navigation li ul.subnav li a {
  display: block;
  width: 90px;     /* gives hasLayout to IE6/7. otherwise, it would be unnecessary */
  padding: 5px 10px 5px 20px;
  line-height: 1.25;
  font-size: 10px;
  }
  #navigation ul.subnav li a:link   {color: #b1a089; background: #22201e;}
  #navigation ul.subnav li a:visited  {color: #b1a089; background: #22201e;}
  #navigation ul.subnav li a:hover  {color: #b1a089; background: #383635;}
  #navigation ul.subnav li a:active  {color: #c4c1c0; background: #383635;}


/* --- CUSTOM BANNER PHOTO VARIATION ------------------------------------------------------------------------ */
/* ---- CODE ------------------------------------------------------------------------------------------------ */

 /* This code replaces the train photo collage with a user photo. Dimensions are 780px x 211px */
 #banner .photo {
  background: none;
background: url(/images/Full_Name_Banner_cropped.jpg) no-repeat;
  }