/* 
	Designed by designer: Amber Orenstein www.2is3.com  -  Portland Oregon 
	
	Bugfixed (no pun) by Andrew Tay (www.andrewtay.com) for HostBaby.com May 2007 
   All styles that have been changed are indented
	
	- added padding-bottom to all images, namely for the homepage image
	- a few minor layout, margin, and text styling tweaks which are at the end of this file
	- in the guestbook, aligned the submit button under the entry fields
	- previously the #content div was slightly wider than the black area of the page background image (the one
	  with the polkadots and the wide black stripe in the middle. This caused part of the leftmost column of dots
	  to get partially cut off on some pages. The simplest fix was to use Photoshop to edit the leftmost dots
	  out of the background images themselves, with no changes to the .css 

	NEW VARIATION: using plain text headers instead of graphic headers.
	  
*/


body {
	margin:0;
	padding:0;
	color:#fff;
	font-family: Verdana, Arial, sans-serif;
	font-size:11px;
	line-height:18px;
	background:url(/shared/punkbug/3-bg.gif) top center #000;
	text-align:center;
}
a {
	text-decoration:none;
	border-bottom:dotted 1px #fff;
	color:#0cf;
}
a:hover {
	color:#fff;
	border-bottom:solid 1px #fff;
}
small {
	font-size:9px;
}
p {
	margin:0;
	padding:0;
	margin-bottom:10px;
}
.center {
	text-align:center;
}
.spacer {
	clear:both;
	height:0;
	margin:0;
	padding:0;
}
form {
	margin:0;
	padding:0;
}
#accessibility {
	position: absolute;
	left: -9999px;
}
h1, h2, h3, h4, h5, h6 {
	margin:0 0 5px 0;
	padding:0;
	line-height:normal;
}
h2 {
	font-size:14px;
}
h3, h4, h5, h6 {
	margin-bottom:0;
	font-weight:normal;
	font-size:12px;
}

			/* NEW!! These graphic headers are removed from this plain text variation
			
         body.home #content h1, body.list #content h1 {
         	background:url(/shared/punkbug/ttl_home.gif) no-repeat;
         }
         body.bio #content h1 {
         	background:url(/shared/punkbug/ttl_bio.gif) no-repeat;
         }
         body.music #content h1 {
         	background:url(/shared/punkbug/ttl_music.gif) no-repeat;
         }
         body.contact #content h1 {
         	background:url(/shared/punkbug/ttl_contact.gif) no-repeat;
         }
         body.press #content h1 {
         	background:url(/shared/punkbug/ttl_press.gif) no-repeat;
         }
         body.news #content h1 {
         	background:url(/shared/punkbug/ttl_news.gif) no-repeat;
         }
         body.calendar #content h1 {
         	background:url(/shared/punkbug/ttl_calendar.gif) no-repeat;
         }
         body.photos #content h1 {
         	background:url(/shared/punkbug/ttl_photos.gif) no-repeat;
         }
         body.products #content h1 {
         	background:url(/shared/punkbug/ttl_store.gif) no-repeat;
         }
         body.guestbook #content h1 {
         	background:url(/shared/punkbug/ttl_guestbook.gif) no-repeat;
         }
         body.links #content h1 {
         	background: url(/shared/punkbug/ttl_links.gif) no-repeat;
         }
			*/			

/* general */
#container {
	width:780px;
	margin:0 auto 0 auto;
	padding:0;
	text-align:left;
	position:relative;
	border:solid 1px #000;
	border-bottom:none;
}
#navigation {
	position:absolute;
	top:0;
	left:0;
	width:185px;
	z-index:0;
	padding-top:205px;
}

			/* NEW!! The positioning and styling has been revamped to display plain text h1 headers. Now h1 is
				left in the normal flow (before, it used absolute positioning), which has the advantage that if
				the header spills over to the second line, it will push down page content instead of overlapping
				it. */
			
			
         #content {
         	padding:133px 54px 25px 239px;	/* NEW!! padding-top was 185px, now less to make space for h1 */
         	background:url(/shared/punkbug/bug3.gif) no-repeat;
         	min-height:600px;
         	voice-family: "\"}\"";
         	voice-family:inherit;
         	min-height:410px;
         }
			
         html>#content {
         	min-height:410px;
         }

         #content h1 {
				color: #f8f8f8;																	
				font: 34px "impact", "haettenschweiler", "arial narrow", sans-serif;
				text-transform: uppercase;
				text-align: right;
				line-height: 1.1; 
				padding-bottom: 10px;
				/* line-height: .8; */
			
        	/*	NEW!! Everything above is new, everything below is old...
				
				position:absolute;
         	top:120px;
         	left:450px;
         	width:276px; 
         	height: 50px; 
         	overflow:hidden; 
         	padding-top:50px; 
         	height:0px !important; 
         	height /**:50px; */
         }
         
         #content h1 span {
			background-color: black;	/* NEW!! this helps the text remain visible if it overlaps the bug */
			padding-left: 15px;			
         /*	display:none; 					NEW!! this needs to be displayed now since there is no graphic */
         }

#content li {
	list-style-image:url(/shared/punkbug/bullet.gif);
}
#content div.entry {
	padding-bottom:20px;
}
#content h2 {
	border-bottom:dotted 1px #0cf;
}
#banner div.photo {
	position:absolute;
	top:0;
	left:450px;
	width:276px;
	height:115px;
	border-bottom:solid 5px #0cf;
}
#banner span {
	display:none;
}
#emailsignup {
	position:absolute;
	top:510px;
	left:0;
	z-index:5;
	width:165px;
	padding:10px;
	margin:10px;
	background:#000;
	border:solid 1px #fff;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:145px;
}
html>#emailsignup {
	width:145px;
}
#emailsignup input {
	font-size:10px;
	margin-top:10px;
}
#footer {
	clear:both;
	padding:5px 54px 5px 239px;
	font-size:.85em;
	color:#666;
}

/* nav */

			/* NEW!! This is the other section that has been heavily revamped for these new variations. Punk bug
				seems to be the only template that had graphic headers *and* graphic navigation links. The
				approach is similar to h1, but the line spacing has been reduced using negative top margins on
				each li element. Instead of using background-color: black;, a black .gif has been used. Otherwise,
				the background color on each li would have visibly covered up part of the li above it. */
				
			#navigation {margin-top: 12px;}		/* NEW!! this makes up for the negative margins on the li */
			
         #navigation ul {
         	margin:0;
         	padding:0;
         }

         #navigation li {
         	margin:0;
         	padding:0;
         	list-style-type:none;
         	float:left;
         	width:185px;
         	height: 35px;							/* NEW!! setting this height forces consistency between browsers */
         	margin-top: -11px;					/* NEW!! for tighter spacing between each line */
         }

			/* NEW!! all these styles are new; they control the appearance of the navigation links */
         #navigation li a {
            border:none; 
            color: #f8f8f8;
            font: 28px "impact", "haettenschweiler", "arial narrow", sans-serif;
            text-transform: uppercase;
            line-height: 1.1;
				background: url(/shared/punkbug/plaintext-nav.gif) 0 4px repeat-x;
            padding: 0 7px 0 4px;  
         }
			
			/* NEW!! this code highlights the link corresponding to the current page */
			.home #navhome, .index #navindex, .music #navmusic, .contact #navcontact, 
			.press #navpress, .news #navnews, .photos #navphotos, .guestbook #navguestbook,  
			.links #navlinks, .calendar #navcalendar, .bio #navbio, .products #navproducts {
				color: #0cf !important;
				}

			/* NEW!! of course, now we want the link text to appear 
         #navigation li span {
         	display:none;
         	margin:0;
         	padding:0; 
         } */

         /* NEW!! These graphic link images are removed from this plain text variation
         
         a#navhome {
         	display:block;
         	width:185px;
         	height:29px;
         	margin:0;
         	padding:0;
         	background:url(/shared/punkbug/nav_home.gif) top left no-repeat;
         }
         body.home a#navhome {
         	background:url(/shared/punkbug/3-nav_home_on.gif) top left no-repeat;
         }
         a#navbio {
         	display:block;
         	width:185px;
         	height:25px;
         	margin:0;
         	padding:0;
         	background:url(/shared/punkbug/nav_bio.gif) top left no-repeat;
         }
         body.bio a#navbio {
         	background:url(/shared/punkbug/3-nav_bio_on.gif) top left no-repeat;
         }
         a#navmusic {
         	display:block;
         	width:185px;
         	height:25px;
         	margin:0;
         	padding:0;
         	background:url(/shared/punkbug/nav_music.gif) top left no-repeat;
         }
         body.music a#navmusic {
         	background:url(/shared/punkbug/3-nav_music_on.gif) top left no-repeat;
         }
         a#navcontact {
         	display:block;
         	width:185px;
         	height:25px;
         	margin:0;
         	padding:0;
         	background:url(/shared/punkbug/nav_contact.gif) top left no-repeat;
         }
         body.contact a#navcontact {
         	background:url(/shared/punkbug/3-nav_contact_on.gif) top left no-repeat;
         }
         a#navpress {
         	display:block;
         	width:185px;
         	height:25px;
         	margin:0;
         	padding:0;
         	background:url(/shared/punkbug/nav_press.gif) top left no-repeat;
         }
         body.press a#navpress {
         	background:url(/shared/punkbug/3-nav_press_on.gif) top left no-repeat;
         }
         a#navnews {
         	display:block;
         	width:185px;
         	height:25px;
         	margin:0;
         	padding:0;
         	background:url(/shared/punkbug/nav_news.gif) top left no-repeat;
         }
         body.news a#navnews {
         	background:url(/shared/punkbug/3-nav_news_on.gif) top left no-repeat;
         }
         a#navcalendar {
         	display:block;
         	width:185px;
         	height:25px;
         	margin:0;
         	padding:0;
         	background:url(/shared/punkbug/nav_calendar.gif) top left no-repeat;
         }
         body.calendar a#navcalendar {
         	background:url(/shared/punkbug/3-nav_calendar_on.gif) top left no-repeat;
         }
         a#navphotos {
         	display:block;
         	width:185px;
         	height:25px;
         	margin:0;
         	padding:0;
         	background:url(/shared/punkbug/nav_photos.gif) top left no-repeat;
         }
         body.photos a#navphotos {
         	background:url(/shared/punkbug/3-nav_photos_on.gif) top left no-repeat;
         }
         a#navproducts {
         	display:block;
         	width:185px;
         	height:25px;
         	margin:0;
         	padding:0;
         	background:url(/shared/punkbug/nav_store.gif) top left no-repeat;
         }
         body.products a#navproducts {
         	background:url(/shared/punkbug/3-nav_store_on.gif) top left no-repeat;
         }
         a#navguestbook {
         	display:block;
         	width:185px;
         	height:25px;
         	margin:0;
         	padding:0;
         	background:url(/shared/punkbug/nav_guestbook.gif) top left no-repeat;
         }
         body.guestbook a#navguestbook {
         	background:url(/shared/punkbug/3-nav_guestbook_on.gif) top left no-repeat;
         }
         a#navlinks {
         	display:block;
         	width:185px;
         	height:29px;
         	margin:0;
         	padding:0;
         	background:url(/shared/punkbug/nav_links.gif) top left no-repeat;
         }
         body.links a#navlinks {
         	background:url(/shared/punkbug/3-nav_links_on.gif) top left no-repeat;
         }
         */

/* home + news */
body.home p {
	padding-bottom:20px;
}
body.home div.entry p {
	padding-bottom:0;
}

/* music */
body.music div.details {
	padding-bottom:20px;
}
body.music div.artist {
	font-size:.85em;
	line-height:normal;
	display:block;
	border-bottom:dotted 1px #0cf;
}

/* contact */
body.contact #content li {
	list-style-image:none;
	list-style-type:none;
}

/* press */
body.press div.entry blockquote {
	margin:10px;
}
body.press div.entry .caption {
	margin:10px;
	font-weight:bold;
}

/* photos */
body.photos dt {
	padding-bottom:3px;
	margin-bottom:5px;
	border-bottom:dotted 1px #0cf;
}
         body.photos dd {
         	margin:0;
         	text-align:center;
				padding-top: 5px;			/*	NEW!! Becasue it looks better (before, photos were too close */
         /*	padding-bottom:20px; 		NEW!! This is now applied to the bottom of all img and is now 30px */
         }

/* products */
body.products hr {
	display:none;
}

/* guestbook */
body.guestbook div#postForm {
	border:solid 1px #0cf;
	padding:10px;
	margin-bottom:20px;
	text-align:center;
}
body.guestbook div#postForm label {
	float:left;
	width:150px;
	text-align:right;
	margin-top:5px;
}
body.guestbook div#postForm input, body.guestbook div#postForm textarea {
	margin-top:5px;
	width:265px;
}

/* links */
body.links #content dl {
	margin:0 25px 20px 25px;
}
body.links #content dt {
	padding-bottom:3px;
}

			/* NEW!! Several minor fixes and tweaks lie here. For the most part, they don't override previous
				settings. */
			
			/* NEW!! aligns the Submit button under entry fields (there's no unique id for the button itself ) */
         .guestbook #postForm input 				{margin-left: 150px;}	
			
			/*	NEW!! puts the entry fields themselves back where they're supposed to be */
         .guestbook #postForm input#gbname, 									
         .guestbook #postForm input#gbadress    {margin-left: 0px;}
 
 			
			h3 				{font-weight: bold; margin-bottom: 3px;}	/* NEW!! this looks better on most pages... */
			
			.guestbook h3 	{font-weight: normal;}							/* NEW!! ...but not on the guestbook page. */
			
			img				{padding-bottom: 30px;}		/* NEW!! this padding is now applied to all images */

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