/* RETRO stylesheet template 

 graphic design: Hostbaby staff (www.hostbaby.com)
 interactive design, coding, additional graphics: Andrew Tay (www.andrewtay.com) June 2009
 
 COLOR VARIATION
 
*/

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

.gradientBoxesWithOuterShadows { 
height: 100%;
width: 400px; 
padding: 20px;
background-color: white; 
margin-left: 125px;

/* outer shadows  (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6); 
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 7px;
-moz-border-radius: 7px; 
border-radius: 7px;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), 
 color-stop(65%, white), color-stop(100%, #f7f7f7)); 
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); 
}

body {
   background: white url(/shared/retro/stripes-red.gif) top center repeat-x;
 text-align: left; 
   }


/* ACCESSIBILITY */   
   
#accessibility {
 position: absolute;
 left: -9999px;
 } 
 
 
/* CONTAINER */
    
#container {
 position: relative;   /* this serves as a reference for #banner */
 width: 860px;
 margin: 0 auto;
 padding-top: 315px;
 background: url(/shared/retro/bg-container-red.gif) center -52px repeat-y;
   }

  
/* BANNER */

/* This div places the background for the upper portion of the page */ 
#banner {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 773px;
   background: transparent url(/shared/retro/bg-banner-red.gif) top center no-repeat; 
 z-index: 1;
 }
 /* Photo - This is the photo at the top of the screen */
 #banner .photo {
  position: absolute;
  top: 160px;
  left: 185px;
  width: 614px;
  height: 122px;
  border: 3px solid #142755;
background: url(/images/palace5.jpg) top left;
  }
  /* Photoburst - This is the cute little starburst graphic overlay thingy */
  #banner .photo span {
   position: absolute;
   bottom: -14px;
   right: -9px;
   width: 48px;
   padding-top: 62px; /* these lines hide the span text */
   height: 0;    /* these lines hide the span text */
   overflow: hidden;  /* these lines hide the span text */
   background: url(/shared/retro/photoburst-red.png) no-repeat;   
   }
   /* Ultra-Safe Hack for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
   * html #banner .photo span {
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/retro/photoburst-red.png');
    }  

 #banner .band {
  position: absolute;
  top: 124px;
  left: 202px;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  }

   
/* NAVIGATION */ 

#navigation {
 float: left;
 margin: -2px 0 0 15px;
 width: 135px;
 min-height: 375px;  /* this controls placement of #emailsignup and therefore, bottom of nav graphic */
 padding: 0 14px 0 8px;
 background: url(/shared/retro/bg-navigation-red.gif) left 389px no-repeat;
 display: inline;   /* cures IE6 doubled-margin float bug */
 text-align: center;
 position: relative; 
 z-index: 200;    /* places it above #banner */
 }    
 /* Ultra-Safe Hack for IE6: applies min-height */
 * html #navigation {
  _height: 375px;  /* IE6 treats this as min-height */
  }

   
/* CONTENT */
    
#content {
 width: 600px;
 margin: 0 0 0 195px;
 padding: 0 0 10px 0;
 position: relative;
 z-index: 100;    /* places it above #banner */
 }
 h1 {
  display: none;
  }

 
/* EMAIL SIGNUP */

#emailsignup {
 clear: both;    /* always stays below #navigation */
 float: left;
 width: 148px;
 height: 70px;
 margin: 0 0 8px 15px; 
 padding: 12px 0 5px 9px;
 background: url(/shared/retro/bg-emailsignup-red.gif) bottom left no-repeat;
 text-align: center;
 display: inline;   /* cures IE6 doubled-margin float bug */
 position: relative;
 z-index: 300;
 }  

 
/* FOOTER */
 
#footer  {
 clear: both;    /* always stays below #emailsignup */
 width: 700px;
 height: 43px;
 margin: 0 auto;
 padding: 20px 0 0 130px;
   background: url(/shared/retro/bg-footer-red.gif) bottom center no-repeat;
 text-align: center;
 }
 #footer p {
  margin: 0;
  }

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

body {
 color: black;
 font: 11px, Georgia, Times, serif;
 }

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

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

h3 {
 color: #a9072c;
 font-size: 1.1em;
 }

p, .notes {
 line-height: 1.2;
 }
 
#navigation ul {
 margin: 0; 
 padding: 0;
 font-size: 14px;
 list-style: none;
 }    
 #navigation li {
  }
  #navigation li a {
   display: block;
   line-height: 19px;
   padding: 6px 0;
   }
   * html #navigation li a {
    _width: 100%;    /* this gives IE6 hasLayout, preventing a spacing bug */
    }
   
#footer p {
 color: white;
 font-weight: bold;
 text-transform: uppercase;
 } 

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

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

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

 #navigation li a span {
  padding-left: 17px;
  }
  #navigation li a:hover span {
   background: url(/shared/retro/asterisk-30trans.png) left center no-repeat;
   }
   /* Ultra-Safe Hack for IE6: eliminates non-essential alpha-transparent PNG */
    * html #navigation li a:hover span {
     _background: url(/shared/retro/asterisk-red.gif) left center no-repeat;
     }  
   
 /* highlight current page */
 #navigation li a.highlight {
  }
  #navigation li a.highlight span {
   background: url(/shared/retro/asterisk-red.gif) left center no-repeat; 
   }

/* email signup form elements */
#emailsignup form {
 position: relative;  /* sets form as a reference for absolute positioning */
 font-size: 12px;
 text-transform: uppercase;
 }
 /* this affects both the entry box and the button */
 #emailsignup input {
  width: 45px;
  }
  #emailsignup input:hover {
   }
 /* this is the entry box */
 #emailsignup input#list_email {
  width: 80px;
  margin-right: 4px;
  color: #666;
  background: #e6e6e6;  
  } 
  #emailsignup input#list_email:focus {
   color: #444 !important;
   background: #d9d9d9 !important;  /* makes entry field slightly darker when it has focus */
   } 

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

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

/* HOME */
.home img {
 
 }

/* 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 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 {
 color: black;
 font-weight: bold;
 }
 
/* GUESTBOOK */
/* guestbook entry form */
#postForm  {
 width: 400px;
 margin: 18px auto 25px auto;
 }
 /* general entry fields */
 #postForm input#gbname,
 #postForm input#gbaddress,
 #postForm textarea,
 #postForm input#security_code {
  display: block;
  width: 388px;
  padding: 2px 5px;
  border: 1px solid #aaa;
  color: #666;
  background: #f6f6f6;
  margin-bottom: 10px;
  }
  #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;
  }
 /* submit button */
 #postForm input[type="submit"] {
  margin-top: 10px;
  width: 400px;
  }

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