/* 
	Designed by designer: Petrik de Heus, Four Fifty Four www.four54.com  -  Amsterdam  Netherlands
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com July 2007-January 2008
   All styles that have been changed are indented

	- minor tweaks to improve layout on home pages that contain images or calendars
		
	REVISION 3:	
	- changed padding-left on #content to 35px. before it was set at 3%, which caused a strange indentation bug
	  that sometimes appeared in IE6 and IE7, but only on very long pages and then, only on the Hostbaby servers
	  (i.e. not on my test server). This doesn't behave exactly the same, but it solves the problem and still
	  looks good
	- cleaned up code that controls the positioning of the band photo, as well as a partially transparent gif
	  overlay image that makes the photo look "grunged-up" or rough around the edges
	
*/


/* =========== LAYOUT =========== */


/* Basic HTML Elements */
body {
	padding: 0;
	margin: 0;
	text-align: center;
}
ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
form {
	margin: 0;
}

/* main structural elements */
#accessibility {
	position: absolute;
	left: -9999px;
}
#container {
	width: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}


/* -- navigation -- */
#navigation {
    position: absolute;
	top: 275px;
    left: 50%;
    text-align: center;
    margin: 0 auto;
}
#navigation ul {
	margin: 0;
	padding: 10px;
	list-style: none;
	text-align: center;
	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
}

#navigation li {
    padding: 0 0 1px 0;
    margin: 0;
}
#navigation li a {
    color: #000;
    display: block;
	text-decoration: none;
	white-space: no-wrap;
	padding: 5px 0px 5px 0px;
    margin: 0;
    width: 120px;
}
#navigation li a:hover {
    background: url(/shared/americana/menuBg1.gif) center center no-repeat;
    color: #f93;
    text-decoration: underline;
}

			/* NEW!! Changing the padding from a percentage to a fixed width avoids a strange indentation problem
				in IE7 and IE6. What was happening? On long pages, IE would calculate the padding differently 
				in different places on the page, creating a staggered appearance. Yet the problem would go away,
				and then sometimes reappear upon refreshes. */

         #content {
            text-align: left;
            margin: 270px 52% 0 0;
            padding: 10px;
   			padding-left: 35px;    	/* NEW!! was padding-left: 3%; */
            /*max-width: 380px;*/
            min-height: 450px;
            height: 450px;
         }
         div[id] #content {
				height: auto;
         }

#content p {
    margin-left: 0;
    margin-right: 0;
}
#content h1 {
	padding-top: 0px;
	margin: 0px 0 15px 0;
}


#emailsignup {
	position: absolute;
	top: 550px;
	left: 70%;
    width: 155px;
	height: 80px;
	padding-top: 10px;
	color: #fff;
	text-align: center;
	background: url(/shared/americana/emailBg1.gif) left top no-repeat;
}
div>#emailsignup {
	line-height: 20px;
}


#emailsignup input {
    margin: 2px;
}

#emailsignup input[type=text] {
    border: 1px #ccc inset;
    background: #ccc;
}
#emailsignup input[type=submit] {
    border: 1px #666 outset;
    background: #666;
    width: 35px;
    color: #fff;
}

/* -- banner area -- */
#banner {
    color: #000;
    font-size: 1px;
}
#banner .band span {
    position: absolute;
    top: -20px;
    left: 290px;
	width: 350px;
background: url(/images/Final_Logo-cropped-logowhite323x155-cropped-logowhite350x60.gif) no-repeat bottom center;
    height: 90px;
	display: block;
}
#banner .band {
    position: absolute;
	top: 0;
	left: 0;
    width: 100%;
    display: block;
    height: 280px;
    background: url(/shared/americana/headerBgMonumentValleyBW.jpg) left top repeat-x;
}

			/* NEW!! Layout code for #photo div has been cleaned-up. It wasn't causing serios problems before,
				but it did allow oversized band photos to spill outside of the "grunged-up" photo frame (i.e. the
				background image for #photo span. */
			
         #banner .photo {
         	position: absolute;
         	top: 285px;					/* NEW!! was top: -20px; */
         	left: 70%;					
            height: 250px;				/* NEW!! was height: 555px; */
            width: 250px;				/* NEW!! was width: 30%; */
background: url(/images/ALIVE_Sepia_8F3791YlClrcrp_resized-cropped-right250x250.jpg) no-repeat bottom left;
         }
			
         #banner .photo span {
				text-indent: -99999px;	/*	NEW!! hides band name text */
            background: url(/shared/americana/photoBg1.gif) no-repeat bottom left;
            height: 250px;
         /* padding-bottom: 305px; 		NEW!! this is no longer needed */
            width: 100%;
         	display: block;
         }
			

/* =========== STYLE =========== */


/* -- basic html elements -- */
body {
	font: 80% georgia, "Times New Roman", times, serif;
	color: #333;
	background: #EFE7D6 url(/shared/americana/contentBg1.jpg) center top repeat;
	margin:0;
	padding: 0;
}
a {
	color: #988348;
}
img {
    border-color: #6E5A4A;
}
a:hover {
	color: #DB6505;
}
h1 {
    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	color: #333;
	font-size: 1.3em;
	margin-bottom: 1em;
}
h2 {
	text-transform: lowercase;
	color: #2F4250;
	font-weight: normal;
	font-style: italic;
	font-size: 1.2em;
	letter-spacing: 1px;
	margin: 0 0 5px 0;
}
h3 {
	font-size: 15px;
	margin: 0;
}
h4 {
	font-size: 14px;
	font-style: italic;
	margin: 2px 0 10px 0;
	color: #2F4250;
}
ul {
	padding: 0;
	margin: 0 0 0 30px;
	list-style-type: square;
}
p {
	line-height: 1.3;
}

input,select, textarea {

}
input[type=text],select, textarea {
    border: 1px #8F908E inset;
    background: #fff;
}
input[type=submit] {
    border: 2px #DAD0C1 outset;
    background: url(/shared/americana/footerBg1.jpg) left bottom repeat-x;
    color: #fff;
	clear: both;
}

/* layout tweaks */

#footer {
	margin: 0;
	padding: 40px 0 20px 0;
	text-align: center;
	clear: both;
	color: #ccc;
	background: url(/shared/americana/footerBg1.jpg) left top repeat-x;
}
#footer p {
	margin: 0px;
	font-size: 0.8em;
}

/* -- emailsignup --*/
#emailsignup {
	padding: 8px;
}

/* -- content area --*/
#content .entry {
	margin: 0 0 30px 0;
	clear: left;
}
.entry .name, .entry .act {
	font-weight: bold;
	font-style: normal;
	font-size: 1em;
	margin: 5px 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #636D73;
}
.entry .act {
    margin-left: 5px;
}
.entry ul {
	margin-top: 10px;
}
.entry li {
	line-height: 20px;
}
.details {
	margin: 0 20px 0 30px;
}

/* -- section-specific style -- */
#navigation a {
	color: #fff;
}
#navigation a:hover {
	color: #fff;
}
.home p, .index p {
	margin: 0 0 1.5em 0;
	line-height: 130%;
}
.contact ul {
	list-style: none;
}
.contact h2 {
    letter-spacing: 5px;
}
#postForm {
	height: 290px;
	margin: 0 0 35px 0;
	padding: 0px;
	width: 450px;
}
#postForm input, #postForm label, #postForm textarea {
	display: block;
	width: 300px;
	margin: 0 0 10px 0;
}
#postForm input:focus, #postForm textarea:focus {
    background: #ffc;
}
#postForm label {
	padding: 3px 0;
	margin-bottom: 1px;
	font-style: italic;
}
/* Captcha stuff */ 
#postForm img#gbimage {
	width: 100px;
	float: left;
	margin-right: 20px;
}

label.security_code_label {
	float: left;
}

#postForm input#security_code {
	float: left;
	width: 180px;
}

.guestbook h2 {
	margin: 0 0 2px 0;
	padding: 1px 1px 1px 0px;
	letter-spacing: 0;
	font-size: 1.1em;
}
.guestbook h2 a {
	text-transform: lowercase;
	font-weight: normal;
}
.guestbook h3 {
	margin: 0;
	padding: 10px 0 0 0;
	font-weight:normal;
	font-size: 1em;
	text-transform: uppercase;
}
.guestbook blockquote {
	margin: 0;
	padding: 0px 20px 15px 20px;
}
.guestbook p:first-letter {
    font-size: 1.2em;
}
.links h2 {
	margin: 0 0 20px 0;
	color: #000;
	text-decoration: none;	
}
.links dl {
	margin: 0 0 25px 0;
}
.links dd {
	margin-bottom: 5px;
}
.music h2 {
	font-size: 1.3em;
}
.music h2 {
	margin-top: 40px;
	padding-bottom: 10px;
	letter-spacing: 5px;
}
.music h3 {
    text-transform:uppercase;
	font-weight: normal;
	margin: 5px 0 5px 0;
}
.music h3 a {
    text-decoration: none;
    font-weight: normal;
}
.music .details {
	margin: 0 0 15px 0;
}
.music .artist {
	color: #777;
}
.music .artist, .music .caption {
	display: inline;
	text-size: 0.7em;
	padding-right: 10px;
}
.music .description {
	line-height: 150%;
	font-style: italic;
	border-bottom: solid 1px #797982;
}
.music #content ul {
	list-style-type: none;
	padding: 5px 0px;
	margin: 10px 0;
}
.music #content li a {
	font-weight: bold;
}
.music .m3u_hifi_download,
.music .m3u_hifi_clip {
	padding: 12px 0 12px 25px;
	background: url(/shared/americana/mp3Icon1.gif) no-repeat center left;
	display: block;
}
.music  .m3u_lofi_download,
.music .m3u_lofi_clip {
	padding: 10px 0 10px 25px;
	background: url(/shared/americana/mp3Icon1small.gif) no-repeat center left;
	display: block;
}
.photos img {
	border: solid 1px #999;
	padding: 0px;
}
.photos dl {
	margin: 0;
	padding: 0;
}
.photos dt {
	padding: 5px;
	margin: 20px 0 1px 0;
}
.photos dd {
	margin: 0;
	padding: 0;
}
.press h2 {
	margin-left: 0;
	margin-right: 0;
	letter-spacing: 5px;
}
.press .caption {
    text-align: right;
	margin: 0 0 40px 0;
	padding: 0 5px 0 20px;
}
.links h3 a {
	font-size: 0.9em;
}

			/* 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 h2 {
         	font-size: 1.1em;
         	text-transform:uppercase;
         	font-style: normal;
         }
         #calendar h2 a {
             font-weight:normal;
         }
         #calendar h3 {
         	font-weight: bold;
         	font-variant: small-caps;
         	font-size: 1.1em;
         	margin: 2px;
         }
         #calendar h4 {
             margin: 0;
             padding: 0;
         }

/* -- selected links --*/
.home #navhome, .blog #navblog, .index #navindex, .music #navmusic, .contact #navcontact,   .press #navpress, .news #navnews, .photos #navphotos, .guestbook #navguestbook,  .links #navlinks, .calendar #navcalendar, .bio #navbio, .products #navproducts {
	color: #fff;
	font-weight: bold;
    background: url(/shared/americana/menuBg1.gif) center center no-repeat;
}

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

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

         .home .details {margin-bottom: 1em;}

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