/* HEADPHONES template stylesheet

 graphic design: Discmakers desgin team (www.discmakers.com)
 interactive design, coding, additional graphics: Andrew Tay (www.andrewtay.com) July 2009
 
 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 {
 background: #022765 url(/shared/headphones/background-blue.gif) top center repeat-y;
 text-align: left; 
   }


/* ACCESSIBILITY */   

#accessibility {
 position: absolute;
 left: -9999px;
 }
 
 
/* CONTAINER */
    
#container {
 position: relative;   /* this serves as a reference for #banner */
 width: 821px;
 margin: 0 auto;
 padding-top: 350px;
 background: url(/shared/headphones/container-blue.gif) top center repeat-y;
   }

  
/* BANNER */

/* This div places the main background, including tops of both #navigation and #content */ 
#banner {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 415px;
 background: url(/images/headphones-wheat.jpg) top left no-repeat;
 }
 
 /* Photo - This is the photo at the top of the page */
 #banner .photo {
  position: absolute;
  top: 37px;
  left: 229px;
  width: 521px;
  height: 139px;
  padding: 12px;
  background: url(/shared/headphones/photoglow.png) top left no-repeat;
  }
  /* Ultra-Safe Hack for IE6: uses IE proprietary filter to display transparent PNG */
  * html #banner .photo {
   _background: none;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/headphones/photoglow.png');
   }  

  #banner .photo span {
   display: block;
   width: 521px;
   height: 139px;
   background: url(/images/silhouettes.jpg);
   text-indent: -9999px;
   }

 /* Band - This is the band name at the top of the page */
 #banner .band {
  position: absolute;
  top: 192px;
  left: 241px;
  width: 521px;
  text-align: right;
  }

   
/* NAVIGATION */ 

#navigation {
 position: relative;
 float: left;
 width: 175px;
 margin: 0 0 0 37px; 
 padding: 0;
 display: inline;   /* cures IE6 doubled-margin float bug */
 z-index: 100;
 }    
 #navigation ul {
  margin: 0; 
  padding: 0;
  list-style: none;
  }
  #navigation li {
   font-size: 11px;
   text-transform: uppercase;
   }
   #navigation li a {
    display: block;
    margin-top: 1px;
    padding: 6px 10px 6px 60px;
    line-height: 18px;
    }
    /* Ultra-Safe Hack for IE6: gives hasLayout, preventing a spacing bug */
    * html #navigation li a {
     _height: 1px;    /* this gives IE6 hasLayout without affecting layout */
     }

   
/* CONTENT */
    
#content {
 position: relative;
 min-height: 350px;
 margin: 0 50px 0 280px;
 padding: 1px 0 0 0;  /* padding-top: 1px prevents margin collapsing */
 z-index: 100;
 }

 
/* EMAIL SIGNUP */

#emailsignup {
 position: absolute;
 left: 641px;
 top: 277px;
 width: 160px;
 height: 80px;
 z-index: 100;
 }  

 
/* FOOTER */
 
#footer  {
 clear: both;
 height: 45px;
 padding: 35px 0 0 280px;
 background: black url(/shared/headphones/footer-blue.gif) top left no-repeat;
 }
 #footer p {
  margin: 0;
  }

/* FIXES FOR IE6 3px FLOAT OFFSET BUG */  

* html #content {
 _position: relative;
 _left: -3px;    /* moves #content 3px to the left, where it should be */
 _margin-right: 47px;  /* 50 - 3 = 47px restores lost 3px of #content width */
 }  
  
   
/* --- Text Styles & Minor Placement Adjustments ------------------------------- */

/* For some reason, Safari (but not Chrome, which also uses WebKit) is displaying all fonts smaller than it
 should. weird. */

body {
 color: white;
 font: 11px Georgia, "Times New Roman", Times, serif;
 }

#banner .band {
 color: #042553;
 font-size: 20px;
 text-transform: uppercase;
 letter-spacing: 1px;
 }

h1 {
 margin-top: 0;     /* for browser consistency */
 margin-bottom: 1em;   /* for browser consistency */
 color: #929292;
 font: bold 13px Georgia, "Times New Roman", Times, serif;
 text-transform: uppercase;
 }
 
h2, h3, h4 {
 font-weight: bold;
 }

h2 {
 margin-top: 0;     /* for browser consistency */
 color: #2c457e;
 font-size: 1.25em;
 text-transform: uppercase;
 }

h3 {
 color: #576476;
 font-size: 1.1em;
 font-style: italic;
 }
 
p, .notes {
 line-height: 1.2;
 }
 
#footer p {
 color: #929292 !important;
 font-size: 10px;
 } 

.details, .contact .entry ul {
 font-style: italic;
 } 
 
 
/* --- Link Styling & Form Elements ------------------------------------------------ */

/* general links */

a    {font-weight: bold; text-decoration: underline;}
 a:link   {color: #0b51c6;} 
 a:visited {color: #09419f;}
 a:hover   {color: #596d80;} 
 a:active  {color: white;}

 h3 a:link  {color: #576476;}  /* reverts h3 links back to normal h3 color */
 h3 a:visited  {color: #576476;}
 h3 a:hover   {color: #596d80;}
 h3 a:active  {color: white;}
  
/* navigation links */
#navigation li a     {text-decoration: none;}
 #navigation li a:link   {color: #929292;}
 #navigation li a:visited {color: #929292;}
 #navigation li a:hover   {color: white;}
 #navigation li a:active  {color: #666;}

 /* highlight current page */
 #navigation li a.highlight {
  color: white !important;
  background: url(/shared/headphones/highlight-blue.png) top left no-repeat;
  }
  * html #navigation li a.highlight {
   _background-image: url(/shared/headphones/highlight-blue-ie.gif);
   }

/* email signup form elements */
#emailsignup form {
 color: white;
 font: bold 10px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;
 line-height: 1.5;
 }
 /* this affects both the entry box and the button */
 #emailsignup input {
  width: 50px;
  }
  #emailsignup input:hover {
   }
 /* this is the entry box */
 #emailsignup input#list_email {
  width: 100px;
  margin-right: 4px;
  border: none;
  height: 1.35em;
  color: #666;
  background: white;
  } 
  #emailsignup input#list_email:focus {
   color: #444 !important;
   background: #f6f6f6 !important;  /* makes entry field slightly lighter when it has focus */
   } 

   
/* --- 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 */
 }
 /* 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;
  }

/* 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. */
 width: 400px;
 margin: 18px 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: 300px;
  }
 /* general entry fields */
 #postForm input#gbname,
 #postForm input#gbaddress,
 #postForm textarea,
 #postForm input#security_code {
  display: block;
  width: 388px;
  margin: 2px 0 10px 0;
  padding: 2px 5px;
  border: 1px solid #aaa;
  color: #666;
  background: #f6f6f6;
  }
  #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#gbaddress:focus,
  #postForm textarea:focus,
  #postForm input#security_code:focus {
   color: #444 !important;
   background: #eee !important;  /* makes entry field slightly darker when it has focus */
   } 
 
 /* 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: 268px !important;
  margin-left: 120px;
  }

  
/* previous guestbook entries */  
#guestbook .entry {
 padding: 2px 10px 2px 5px;
 margin-bottom: 10px;
 }    
 #guestbook .entry h2 {
  font-size: 1em;
  color: #81807E;
  padding-bottom: 4px;
  margin-bottom: 0;
  border-bottom: 1px solid #B9B8B7;
  }
 #guestbook .entry h3 {
  font-size: .85em;
  color: #81807E;
  text-align: right;
  margin: 0; padding: 0;
  }

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

body    {background: #c57b37 url(/images/background-wheat.gif) top center repeat-y;}
#container  {background: url(/shared/headphones/container-orange.gif) top center repeat-y;}
banner   {background: url(/headphones-wheat.jpg) top left no-repeat;}
#footer   {background: black url(/shared/headphones/footer-orange.gif) top left no-repeat;}

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

#banner .band  {color: #ff5100;}

h2 {color: #ff8851;}
h3 {color: #c06958;}

#footer p  {color: #929292 !important;}  


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

/* general links */
 a:link   {color: #ff3f0e;} 
 a:visited {color: #b62d0a;}
 a:hover   {color: #c0523d;} 
 a:active  {color: white;}

 h3 a:link  {color: #c06958;}  /* reverts h3 links back to normal h3 color */
 h3 a:visited  {color: #c06958;}
 h3 a:hover   {color: #c0523d;}
 h3 a:active  {color: white;}
  
/* navigation links */
 #navigation li a:link   {color: #c57b37;}
 #navigation li a:visited {color: #c57b37;}
 #navigation li a:hover   {color: white;}
 #navigation li a:active  {color: #666;}

 /* highlight current page */
 #navigation li a.highlight {
  color: white !important;
  background: url(/images/highlight-wheat.png) top left no-repeat;
  }
  * html #navigation li a.highlight {
   _background-image: url(/images/highlight-wheat-ie.gif);
   }