/* CSS design by Alek Vila - www.racingheart.com 

	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com June 2007 
   All styles that have been changed are indented
	
	- calendar styling is now applied at the div level instead of the page level (#calendar instead 
	  of .calendar). This means the styling gets applied to the calendar when it's chosen to appear on the home
	  page, too.
	- changes to p tags on home page, improving layout--especially when a calendar or image follows the
	  paragraphs
	- new margins on home page image

*/


/* global styles */

body  {
     font: 13px/1.2em Arial, sans-serif;
     text-align: left;
     background: url(/shared/beetlejuice/water.gif) fixed;
     padding: 0;
     margin: 0;
     }

ul, form  {
     list-style-type: none;
     padding: 0;
     margin: 0;
     }

a  {
     font: 16px Impact, Helvetica Compressed, Arial Narrow Bold, Arial Narrow, Arial, sans-serif;
     line-height: 1em;
     font-weight: normal;
     color: #9CF;
     text-decoration: none;
     }

a:hover, a:hover h2  {
     color: yellow;
     text-decoration: underline
     }


/* --------------- absolutely positioned common divs --------------- */

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

#navigation  {
     position: absolute; top: 26px; right: 0; z-index: 6;
     width: 106px; height: 234px;
     text-align: right;
     background: url(/shared/beetlejuice/punchout.gif) top right no-repeat;
     padding: 15px 10px 0 0; white-space: nowrap;
     margin: 0;
     }

#emailsignup  {
     position: absolute; top: 0; right: 0; z-index: 7;
     width: 100%; height: 20px;
     font: 9px Verdana, sans-serif;
     color: yellow;
     text-align: right;
     background: black;
     padding: 4px 10px 4px 0;
     }

.products #emailsignup form  {
     padding: 4px 10px 4px 0;
     border: none;
     }

#emailsignup span  {
     display: block
     }

#banner .band  {
     width: 300px; height: 50px;
     position: absolute; top: 0; left: 0; z-index:9;
background: url(/images/Gregg_Wright-cropped-logo.jpg);
     border-right: solid 2px black;
     }

#banner .band span  {
     display: none
     }

#banner .photo  {
     width: 300px; height: 100px;
     position: absolute; top: 50px; left: 0; z-index: 8;
     float: left;
background: url(/images/Bagneaux__FR_photo_by_Patrick_Denis_cropped-cropped-photo.jpg);
     border-right: solid 2px black;
     border-bottom: solid 4px black;
     }

#banner .photo span  {
     display: none
     }


/* --------------- common elements --------------- */

h1  {
     width: auto; height: auto;
     font: 28px/1em Impact, Helvetica Compressed, Arial Narrow Bold, Arial Narrow, Arial, sans-serif;
     font-weight: normal;
     text-transform: uppercase;
     color: white;
     letter-spacing: .035em;
     text-align: right;
     background: url(/shared/beetlejuice/bannerfade3.gif) bottom right;
     padding: 120px 5px 2px 5px;
     margin: 0 75px 0 300px;
     }

h2  {
     font: 21px/.72em Impact, Helvetica Compressed, Arial Narrow Bold, Arial Narrow, Arial, sans-serif;
     font-weight: normal;
     color: white;
     border-bottom: dotted 1px white;
     padding: 0 0 1px 5px;
     margin: 25px 0 5px 0;
     }

h3  {
     color: #0F6;
     font: 18px/.85em Impact, Helvetica Compressed, Arial Narrow Bold, Arial Narrow, Arial, sans-serif;
     font-weight: normal;
     padding: 10px 0 1px 10px;
     margin: 30px 75px 0 25px;
     }

h4  {
     font: 15px/.85em Impact, Helvetica Compressed, Arial Narrow Bold, Arial Narrow, Arial, sans-serif;
     font-weight: normal;
     letter-spacing: .03em;
     padding: 0;
     margin: 0;
     }

.entry  {
     color: white;
     background: black;
     border: dotted 1px white;
     padding: 10px;
     margin: 25px 75px 0 25px;
     }

.notes, .bio #content p, .list #content  {
     color: black;
     line-height: 1.5em;
     text-indent: 1em;
     background: white;
     padding: 25px;
     border: dotted 1px black;
     margin: 0;
     }

#banner  {
     padding: 0;
     margin: 0;
     }

#container  {
     background-color: #006;
     padding: 0;
     margin: 0 40px 0 0;
     }

html>body #container {
     padding: 0;
     }

#footer p {
     position: relative;
     top: 25px;
     color: silver;
     font: 10px Verdana, Arial, sans-serif;
     text-align: center;
     background: #006;
     padding: 20px 0 10px 0;
     margin: 0;
     }


/* --------------- home (& news) page --------------- */

			.home h1 {
				margin-bottom: 28px;				/* NEW!! This is a better way to push the paragraphs down */
				}
				
.home #content p  {
  /* position: relative;							NEW!! This doesn't work so well when a #calendar or image
     top: 28px;										follow the paragraphs on the home page. Now using margin on h1
     z-index: 10; */
     color: white;
     font: 11px Verdana, Arial, sans-serif;
     background: black;
     padding-left: 15px;
     padding-right: 15px;
     padding-top: 8px;
     padding-bottom: 8px;
     margin: 0 75px 0px 25px;
     }

	  		/* NEW!! These styles reset the p in the calendar to the default */
			
			.home #content #calendar p {
	  			font: 13px/1.2em Arial, sans-serif;
				padding: 0;
				margin: 1em 0;
				}

			/* NEW!! minor tweak for home page image */

         .home img {
				margin: 1em 0; 
				display: block;					/* NEW!! display: block triggers margin collapses */
				}	
         

#content .entry span.date  {
     color: #6AC;
     }


/* --------------- bio page --------------- */

.bio #content br  {
     line-height: 1.5em;
     }


/* --------------- music page --------------- */

.music h3  {
     border-bottom: dotted 1px white;
     }

.details  {
     text-align: left;
     position: relative;
     left: 10px;
     top: 10px;
     color: white;
     font: 11px Verdana, Arial, sans-serif;
     background: black;
     padding-left: 15px;
     padding-right: 15px;
     padding-top: 8px;
     padding-bottom: 8px;
     margin: 0 75px 0px 25px;

     border: dotted 1px white;
     }

.artist  {
     color: white;
     margin: 0 0 0 35px;
     }

.music #content ul  {
     list-style-type: square;
     color: #CCCC99;
     background: black;
     padding: 5px 5px 5px 25px;
     border: dotted 1px white;
     margin: 0 75px 0 25px;
     }


/* --------------- contact page --------------- */

span.name  {
     font-weight: bold;
     margin: 0 0 0 5px;
     }

.contact ul  {
     text-indent: 1em;
     }


/* --------------- press page --------------- */

.press .entry blockquote  {
     color: white;
     text-align: left;
     padding: 10px;
     margin: 0;
     }

.press .caption  {
     font: 16px Impact, Helvetica Compressed, Arial Narrow Bold, Arial Narrow, Arial, sans-serif;
     line-height: 1em;
     font-weight: normal;
     color: #9CF;
     text-align: left;
     padding: 0 10px 10px 10px;
     }


/* --------------- calendar page --------------- */


			/* NEW!! Before, these were styled at the page level (using body.calendar or .calendar for short).
			Now that calendars can also appear on the	home page, they are styled using div#calendar or
			#calendar for short. Calendars are always contained within a #calendar div, no matter what page
			they're on. Good, no? */

         #calendar h3  {							/* NEW!! now using #calendar instead of .calendar */
              padding: 0;
              margin: 15px 10px 5px 10px;
              }

.details h4  {
     display: inline;
     margin: 0 10px 10px 10px;
     }

.details address  {
     display: inline;
     }

/*
.calendar #calendar p  {
     position: absolute; top: 28px; left: 0; z-index: 10;
     width: 38%;
     font: 11px Verdana, Arial, sans-serif;
     background: black;
     padding: 7px;
     border: double 3px silver;
     margin: 0 0 0 302px;
     }
*/

/* --------------- photos page --------------- */

.photos #content dt  {
     font: 16px Impact, Helvetica Compressed, Arial Narrow Bold, Arial Narrow, Arial, sans-serif;
     line-height: 1em;
     font-weight: normal;
     color: white;
     text-transform: uppercase;
     text-align: center;
     padding: 20px 0 0 0;
     }

.photos #content dd  {
     text-align: center;
     margin: 2px 0 0 0;
     }

.photos #content img  {
     background: #00CC33;
     padding: 2px;
     border: dotted 1px white;
     }


/* --------------- products page --------------- */

.products .products  {
     padding: 0;
     margin: 25px 75px 0 25px;
     }

.products .entry  {
     margin: 0 0 10px 0;
     }

.products form  {
     color: white;
     background: black;
     padding: 10px;
     border: dotted 1px white;
     }


/* --------------- guestbook page --------------- */

#postForm  {
     padding: 10px;
     border: double 3px black;
     margin: 25px 75px 0 25px;
     }

#postForm input, #postForm label, #postForm textarea  {
     display: block;
     text-align: left;
     }

#postForm input  {
     color: black;
     width: 100%;
     margin: 0 0 5px 0;
     }

#postForm label  {
     font: 15px Impact, Helvetica Compressed, Arial Narrow Bold, Arial Narrow, Arial, sans-serif;
     color: silver;
     font-weight: normal
     text-align: left;
     margin: 10px 10px 0 10px;
     }

#postForm textarea  {
     color: black;
     width: 100%;
     margin: 0 0 5px 0;
     }

/* Captcha stuff */ 
#postForm img#gbimage {
	width: 100px;
	float: left;
	padding-left: 2px;
	padding-bottom: 10px;
	margin-top: 7px;
	margin-right: 20px;
}

#postForm label.security_code_label {
	padding-top: 7px;
	margin-left: 0px;
	width: 100px;
	float: left;
}

#postForm input#security_code {
	float: left;
	width: 130px;
	margin-top: 15px;
	margin-bottom: 15px;
}

#postForm input[type=submit] {
	text-align: center;
	clear: both;
}

.guestbook h2  {
     font: 20px/.85em Impact, Arial Narrow Bold, Arial Narrow, Arial, sans-serif;
     font-weight: normal;
     color: #00FF66;
     letter-spacing: .025em;
     border: none;
     padding: 0;
     margin: 0;
     }

.guestbook h3  {
     color: white;
     font: 18px/.85em Impact, Arial Narrow Bold, Arial Narrow, Arial, sans-serif;
     font-weight: normal;
     letter-spacing: .03em;
     padding: 0;
     border-bottom: dotted 1px white;
     margin: 15px 10px 5px 10px;
     }

.guestbook blockquote  {
     font: 13px Courier, sans-serif;
     font-weight: normal;
     letter-spacing: .03em;
     padding: 0 0 10px 0;
     margin: 0 10px 0 10px;
     }


/* --------------- links page --------------- */

.links dl  {
     background: black;
     padding: 10px;
     border: dotted 1px white;
     margin: 25px 75px 10px 25px;
     }

.links dd  {
     color: white;
     }

.links h3  {
     font: 16px/1.2em Arial, sans-serif;
     text-transform: uppercase;
     font-weight: bold;
     letter-spacing: .03em;
     padding: 0;
     border: none;
     margin: 5px 10px 5px 10px;
     }

.links h2  {
     font: 21px/.72em Impact, Arial Narrow Bold, Arial Narrow, Arial, sans-serif;
     font-weight: normal;
     color: #9CF;
     letter-spacing: .025em;
     border: none;
     padding: 0 0 1px 5px;
     margin: 10px 75px 10px 25px;
     }

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