/* STUDIO stylesheet template 

 visual design: Hostbay staff (www.hostbaby.com)
 interactive design, coding, additional graphics: Andrew Tay (www.andrewtay.com) June 2009
 
 COLOR VARIATION - for this variation, some colors are overridden at the end of the file
 
*/

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


html, body {
 height: 100%;
 }
 /* Ultra-Safe Hack for IE6: hides vertical scrollbar except when absolutely necessary */
 * html, * body {
  _overflow-y: auto;  /* this gave IE7 serious problems upon resize, hence the hack */
  }
  
body {
 position: relative;   /* when min-width is invoked this is needed as a reference for abs. positioning */
 color: black;
   background: url(/shared/woodgrain/darkwood2.jpg) center center;
 text-align: left; 
 min-width: 800px;    /* forces horizontal scroll bar on very narrow screens */
 max-width: 1260px;   /* on very large screens, keeps #content from getting too wide */
   }

/* BANNER */
 
#banner {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 100;     /* #banner needs to stack higher than #content, which is in normal flow */
 }
 /* Photo - This is the band photo/name at the top of the screen */
 #banner .photo {
  margin-top: 10px;
  margin-left: 40px;
  width: 450px;
  height: 90px;
background: url(/images/sobriquets-site-head.jpg) left center no-repeat;
  text-indent: -9999px;
  }
  /* Rounded Corner NW - This is the top of the nav & top left corner of #content */
  #banner .photo span {/* background-color: blue !important; */
   display: block;
   position: absolute;
   top: 100px;
   left: 30px;
   width: 260px;
   height: 20px;
   background: url(/shared/woodgrain/navcorners2dark.png) left top no-repeat;
   text-indent: -9999px;
   }  
   /* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
   * html #banner .photo span {
    _background-image: url(/shared/woodgrain/navcorners2.gif);
    }

 /* Border N - This is the fluid top border of #content */
 #banner .band {/* background-color: red !important; */
  position: relative;
  top: 0px;
  margin: 0 70px 0 290px;  /* these allow the strip to be exactly the right width */
  height: 20px;
  background: url(/shared/woodgrain/borders2.png) center top repeat-x;
  }
  /* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
  * html #banner .band {
   _background-image: url(/shared/woodgrain/borders2.gif);
   }
  
  /* Rounded Corner NE - This is the top right corner of #content */
  #banner .band span  {/* background-color: orange !important; */
   display: block;
   position: absolute;
   right: -20px;
   width: 20px;
   height: 20px;
   background: url(/shared/woodgrain/corners2dark.png) right top no-repeat;
   text-indent: -9999px;
   font-size: 0px;  /* since this div is small, extra text-hiding measures are needed */
   line-height: 0px;  /* since this div is small, extra text-hiding measures are needed */
   }
   /* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
   * html #banner .band span {
    _background-image: url(/shared/woodgrain/corners2.gif);
    }
   
   
/* ACCESSIBILITY */   
   
/* Content Background - This fills in the right part of #content, leaving a gap between the scrollbar */
#accessibility {/* background-color: purple !important; */
 position: absolute;
 top: 120px;
 right: 50px;
 width: 100px;
 height: 70%;
 background: url(/shared/woodgrain/rightborder2.png) right center repeat-y; /* right part of #content background */
 }
 /* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
 * html #accessibility {
  _background-image: url(/shared/woodgrain/rightborder2.gif);
  }
  
 /* Rounded Corner SE - This is the bottom right corner of #content */
 #accessibility a {/* background-color: yellow !important; */
  position: absolute;
  bottom: -20px;
  right: 0;
  width: 20px;
  height: 20px;
  background: url(/shared/woodgrain/corners2light.png) right bottom no-repeat;
  text-indent: -9999px;
  font-size: 0px;  /* since this div is small, extra text-hiding measures are needed */
  line-height: 0px;  /* since this div is small, extra text-hiding measures are needed */
  }
  /* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
  * html #accessibility a {
   _background-image: url(/shared/woodgrain/corners2.gif);
   }
  
  
/* CONTAINER */
    
#container {
 height: 100%;    /* nav, content, bottom borders/corners, emailsignup, foooter all reference this */
}

/* NAVIGATION */ 

#navigation {/* background-color: green !important; */
 position: absolute;
 top: 120px;
 left: 30px;
 width: 240px;
 height: 70%;
 padding: 0 35px 0 20px;   /* horizontal only--vertical would break the layout */
 background: url(/shared/woodgrain/navigation2.png) left center repeat-y;
 z-index: 400;
 }    
 /* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
 * html #navigation {
  _background-image: url(/shared/woodgrain/navigation2.gif);
  }

   
/* CONTENT */
    
#content {
 position: relative;
 top: 120px;
 height: 70%;
 margin: 0 20px 0 285px;   /* controls width for fluid layout */
 padding: 0 35px 0 5px;   /* horizontal only--vertical would break the layout */
    background: url(/shared/woodgrain/60trans.gif) right center repeat-y;
/* left part of the #content background */
 overflow-y: scroll;    /* forces scrollbar to appear, keeps everything within #content window */
 }

 
/* EMAIL SIGNUP */

/* Rounded Corner SW - This has the bottom of the nav, bottom left corner of #content, and #emailsignup bg */
#emailsignup {/* background-color: orange !important; */
 position: absolute;
 top: 70%; 
 left: 30px;
 width: 425px;
 height: 35px;
 margin-top: 120px;
 padding: 30px 15px 0 20px; 
 background: url(/shared/woodgrain/navcorners2.png) left -60px no-repeat;
 z-index: 300;
 }  
 /* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
 * html #emailsignup {
  _background-image: url(/shared/woodgrain/navcorners2.gif);
  }

 
/* FOOTER */
 
#footer  {
 position: absolute;
 top: 70%;
 left: 0;
 margin-top: 125px;
 width: 100%;
 }
 /* Border S - This is the fluid bottom border of #content */
 #footer p {/* background-color: maroon !important; */
  display: block;
  position: relative;
  top: -5px;
  padding-top: 30px;   /* places text below #content */
  margin: 0 70px 0 490px;  /* these allow the strip to be exactly the right width */
  background: url(/shared/woodgrain/borders2.png) center -60px repeat-x;
  color: black;
  font: bold 14px Helvetica, Arial, sans-serif;
  text-align: right;
  }
  /* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
  * html #footer p {
   _background-image: url(/shared/woodgrain/borders2.gif);
   }

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

body {
 color: #333;
 font: 13px book antiqua, palatino, serif;
 }

h1, h2, h3, h4 {
 font-weight: bold;
 }

h1 {
 color: gray;
 font-size: 1em;
 margin-top: 0.2em;
 }
   
h2 {
 color: black;
 font-weight: bold;
 font-size: 1.25em;
 }

h3 {
 color: black;
 font-style: italic;
 font-size: 1em;
 }

p, .notes {
 line-height: 1.2;
 }
 
#navigation ul {
 margin: 0; 
 padding: 0;
 font: bold 16px book antiqua, palatino, serif;
 list-style: none;
 }    
 #navigation li {
  }
  #navigation li a {
   display: block;
   line-height: 2;
   padding: 3px 0;
   width: 100%;    /* this gives IE6 hasLayout, preventing a spacing bug */
   }

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

/* general links */
a    {font-weight: bold; text-decoration: underline;}
a:link   {color: #ff1d25;} 
a:visited {color: #ff6f74;}
a:hover   {color: #df1920;} 
a:active  {color: white;}

/* navigation links */
#navigation li a     {text-decoration: none;}
#navigation li a:link   {color: #ff1d25;}
#navigation li a:visited {color: #ff1d25;}
#navigation li a:hover   {color: white; background-color: #df1920; padding: 3px 5px; width: 195px;}
#navigation li a:active  {color: #ff1d25;}

 /* highlight current page */
 #navigation li a.highlight {
  color: white !important; 
  background-color: #ff1d25; 
  padding: 3px 5px; 
  width: 195px;  
  }

/* general form elements */
input, textarea {
 color: #666;
 background: #e6e6e6;  
 }  
input:focus, textarea:focus {
 color: #444 !important;
 background: #d8d8d8 !important;  
 }  

/* email signup form elements */
#emailsignup form {
 position: relative;  /* sets form as a rference for absolute positioning */
 padding-top: 1px;   /* pushes text down a bit */
 height: 19px;
 font: bold 15px Arial, Helvetica, sans-serif;
 }
 /* this affects both the entry box and the button */
 #emailsignup input {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 50px;
  height: 18px;
  margin: 0; 
  padding: 0; 
  border: none; 
  color: white;
  font: bold 12px Arial, Helvetica, sans-serif;
  background: url(/shared/woodgrain/joinred4.gif) left top no-repeat;
  }
  #emailsignup input:hover {
   background-position: left -20px;
   }
 /* this is the entry box */
 #emailsignup input#list_email {
  top: 2px; 
  right: 56px;
  width: 230px;
  height: 14px; 
  padding: 1px 3px;
  color: #666;
  background: #e6e6e6;  
  } 

/* --- 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: 2.5em 0 2em 0;
 border-top: 2px solid #bbb;
 padding: 3px 0 0 0;
 }
 /* Ultra-Safe Hack for IE6: gives hasLayout, curing a border rendering bug */
 * html #calendar .entry {
  _height: 1px;     /* doesn't affect layout since IE6 treats this as min-height */
  }

 #calendar .entry h2 {
  display: inline;    
  position: relative;   
  left: 0;       /* wanted this to be 20px, but it caused a scrollbar in IE7 */
  top: -9px;      /* moves h2 up to midpoint of .entry border */
  line-height: 10px;   /* controls space left behinf by h2 */
  padding: 2px 5px 3px 5px;
  color: white;
  font-size: 14px;
  background: #bbb;
  }

 #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 dt {
 font-weight: bold;
 font-size: 1.15em;
 margin: 1.7em 0 .8em 0; 
 } 
.photos dd {
 margin: 0; 
 padding: 0;
 } 

/* MUSIC */
.music .artist {
 }

.music .details .artist {
 color: black;
 font-weight: bold;
 }
 
/* GUESTBOOK */
/* guestbook entry form */
#postForm  {
 width: 400px;
 margin: 18px 0 25px 0;
 }
 #postForm input, #postForm textarea {
  display: block;
  width: 390px;
  padding: 2px 5px;
  border: none;
  color: #666;
  background: #e6e6e6;
  margin-bottom: 10px;
  }
  #postForm textarea {
   height: 100px;
   margin-bottom: 0 !important;  /* forces browser constistency */
   overflow-y: auto;      /* auto-hides scrollbar in ie */
   }
  /* submit button */
  #postForm input[type="submit"] {
   margin-top: 15px;
   width: 400px;
   color: white;
   font-weight: bold;
   background: red url(/shared/woodgrain/submitred2.gif) left top no-repeat;
   }
   #postForm input[type="submit"]:hover {
    background-position: left -24px;
    }

 /* 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 box */ 
 #postForm input#security_code {
  width: 270px !important;
  margin-left: 120px;
  }

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

    
/* --- COLOR VARIATION -------------------------------------------------------------------------------------- */

body {
 color: #333;
 font: 13px book antiqua, palatino, serif;
 }
#navigation ul {
 font: bold 17px book antiqua, palatino, serif;
 }    

/* general links */
a:link   {color: #75503e;} 
a:visited {color: #92837c;}
a:hover   {color: #4f362a;} 
a:active  {color: white;}

/* navigation links */
#navigation li a:link   {color: black;}
#navigation li a:visited {color: black;}
#navigation li a:hover   {color: white; background-color: #4f362a;}
#navigation li a:active  {color: #75503e;}

/* highlight current page */
#navigation li a.highlight {
 color: white !important; 
 background-color: #555; 
 }

/* email signup form elements */
#emailsignup form {
 height: 19px;
 font: bold 15px Arial, Helvetica, sans-serif;
 }
 /* this affects both the entry box and the button */
 #emailsignup input {
  color: white;
  font: bold 12px Arial, Helvetica, sans-serif;
  background: url(/shared/woodgrain/joincocoa4.gif) left top no-repeat;
  }
 /* this is the entry box */
 #emailsignup input#list_email {
  color: #666;
  background: #e6e6e6;  
  } 

/* guestbook submit button */
#postForm input[type="submit"] {
 color: white;
 background: #3fa9f5 url(/shared/woodgrain/submitcocoa2.gif) left top no-repeat;
 }