/* 
	designer: Shawn Dampier, www.buzzpopmedia.com  -  Orlando FL US
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com May-June 2007 
   All styles that have been changed are indented
	
	Many bugs and idiosyncrasies were inherited from the original 5 templates included in the Hostbaby Designer
	Kit, on which this template was based. These include:
	
	- band photo, which was absolutely positioned, was shifted to the right in IE. solved by using left and top
	  instead of margins to put it in its right place. this works across all browsers without hacks
	- text on the news page was shifting due to a change in line-height that was applied to the entire page 
	
	...and also, some new bugs:
	
	- set #emailsignup block to a particular height, improving consistency as well as improving positioning of
	  the entire #content div below
	- calendar styling is now applied at the div level instead of the page level (#calendar instead 
	  of .calendar). This means they styling gets applied to the calendar when it's chosen to appear on the home
	  page, too.

*/


/* CSS Document Name: Red Punk 1 */

body {
   background-image:  url(/shared/ukpunk/red_punkisdead.jpg);
	background-repeat: no-repeat;
	background-color: #F4F4F3;
	}
	
/* main structural elements */

#accessibility {
	position: absolute;
	left: -9999px;
}
#container {
	width: 750px;
	text-align: left;
	margin: 50px 0 0 165px;
	position: absolute;
	padding: 0;
	
}

/* main content elements */
			
			/* NEW!! band photo was shifting to the right in IE7 (hacked for IE6). The simple fix? Get rid of the
				margins and use left: 0; */
				
         #banner {
         	width: 191px;
         	height: 210px;
         	position: absolute;
         	top: 0;						
				left: 0;						/*	NEW!! this fixes the positioning bug without hacks */
         /*	margin-left: -191px; 		NEW!! it's best not to use margins with asbolute positioning */
         }
			
         /* NEW!! This hack is no longer necessary
				html>body div#banner {
         	margin-left: 0;				NEW!! it's best not to use margins with asbolute positioning 
         }
			*/

/* -- navigation -- */
#navigation ul {
	position: absolute;
	margin: 250px 0 6em 20px;  /* was 350 top */
	width: 120px;
	background:  url(/shared/ukpunk/nav-ul-bg.jpg) left top no-repeat;
	list-style: none;
}
/* ie5/mac hack \*/
#navigation ul {
	margin-top: 230px;  /* was 300 */
}
/* end hack */
#navigation li {
	height:30px;
	background:  url(/shared/ukpunk/nav-back.jpg) left bottom no-repeat;
}
#navigation li a {
	text-decoration: none;
	display: block;
	white-space: no-wrap;
	padding: 5px 0 3px 28px;
}
#navigation li a:hover {
	background:  url(/shared/ukpunk/skull.jpg) 5px 4px no-repeat;
}

#content {
	margin: 0 0 0 190px;
}
#content h1 {
  	margin-top: 50px;
}
#content .entry {
	width: 460px;
}

         #emailsignup {
         	clear: left;
         /* margin-left: 231px; 			NEW!! this doesn't really do anything, so goodbye */
         	text-align: right;
         }
			
         /* NEW!! this hack doesn't really do anything, so goodbye
         	div>#emailsignup {
         	margin-left:28px;
         }
         */

#emailsignup span {
	display: block;
}
#emailsignup input {
	width: 83px;
	font-size: .9em;
}


/* -- banner area -- */
#banner .band {
	position: absolute;
	top: 15px;
	left:10px;
	width: 190px;
	height: 208px;
background:  url(/images/hugeds-190x208.jpg) no-repeat;
	margin-left: -140px;
}
/* ie5/mac hack \*/
#banner .band {
	margin-left: 0px;
}
/* end hack */

#banner .band span {
	display: none;
}
#banner .photo span {
	display: none;
}

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


/* -- basic html elements -- */

body {
	font: 73% Arial, sans-serif;
	color: #000;
	
	margin:0;
	padding: 0;
}
a {
	color: #E11629;
	font-weight: bold;
}
a:hover {
	color: #000;
}
h1 {
	color: #E11629;
}
h2 {
	text-transform: lowercase;
	color: #E11629;
	font-weight: bold;
	font-style: normal;
	font-size: 1.3em;
	letter-spacing: 1px;
	margin: 0 0 5px 0;
	}
	
.home .entry h2 {
     background-image:  url(/shared/ukpunk/red_h2-back.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	}	
h3 {
	font-size: 15px;
	margin: 0 10px;
}
h4 {
	font-size: 14px;
	font-style: italic;
	margin: 2px 10px 10px 0;
	color: #E11629;
}
ul {
	padding: 0;
	margin: 0 0 0 30px;
	list-style-type: square;
}
p {
	line-height: 1.3;
}

/* layout tweaks */
#content {
	padding: 0 15px;
}

#footer {
	margin: 6em 0 0 0;
	padding-bottom: 15px;
	text-align: center;
	clear: both;
}
#footer p {
	margin: 2px;
	font-size: 0.8em;
}

/* -- emailsignup --*/

			/* NEW!! Before, this div was displaying differently in each browser and since it's in the normal flow,
				it was affecting the positioning of the #content div below it. Simply telling the browsers
				explicitly instead of relying on defaults fixed this problem. */
				
         #emailsignup {
         	background: url(/shared/ukpunk/red_emailsignup-bg.jpg) top right no-repeat;
         	height: 33px;						/* NEW!! forces a consistent height for the div */
				padding: 7px 4px 0 0; 			/* NEW!! was padding: 4px; */
         }

			#emailsignup form {
				margin: 0; 							/* NEW!! zeroing these values forces consistency betw. browesers */
				padding: 0;							/* NEW!! zeroing these values forces consistency betw. browesers */
			}

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

/* -- section-specific style -- */
#navigation a {
	color: #E11629;
}
#navigation a:hover {
	color: #000;
}
.home p, .index p {
	margin: 0 20px 1.5em 20px;
	line-height: 130%;
}
.contact ul {
	list-style: none;
}
.contact h2 {
    letter-spacing: 5px;
}
#postForm {
	height: 280px;
	margin: 0 0 55px 0;
	padding: 10px;
	
}
#postForm input, #postForm label, #postForm textarea {
	display: block;
	text-align: left;
	width: 300px;
	margin: 0 auto 10px auto;
}
#postForm input:focus, #postForm textarea:focus {
	color: #fff;
	background: #C84130;
	font-weight: bold;
}
#postForm label {
	padding: 3px 0;
	margin-bottom: 1px;
	font-style: italic;
}

/* Captcha stuff */
#postForm img#gbimage {
	width: 100px;
	float: left;
	margin-top: 6px;
	margin-left: 105px;
	margin-bottom: 7px;
}

#postForm label.security_code_label {
	width: 220px;
	margin-top: 1px;
	margin-left: 15px;
	float: left;
}

#postForm input#security_code {
	width: 181px;
	float: left;
	margin-left: 15px;
}

#postForm input[type=submit] {
	clear: both;
	display: block;
	text-align: center;
	width: 280px;
}

.guestbook h2 {
	margin: 0 0 2px 0;
	padding: 1px 1px 1px 20px;
	letter-spacing: 0;
	font-size: 1.1em;
}
.guestbook h2 a {
	text-transform: lowercase;
	font-weight:normal;
}
.guestbook h3 {
	margin: 0;
	padding: 10px 0 0 20px;
	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 20px 10px;
}
.links dl {
	margin: 0 25px 20px;
}
.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 10px 5px 60px;
}
.music h3 a {
    text-decoration: none;
    font-weight:normal;
}
.music .details {
	margin: 0 30px 15px 60px;
}
.music .artist {
	color: #838386;
}
.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 10px;
	margin: 10px 0;
}
.music #content li a {
	font-weight: normal;
}
.music .mp3_hifi_download, .music .mp3_lofi_download {
	padding: 0 0 10px 20px;
	
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 0 0 10px 20px;
	
	display: block;
}

			/* NEW!! This was inherited verbatim from the 5 original templates in the designer kit. It causes
				text to shift around, yet it serves no real purpose. Gone!! 
				
         .news {
         	line-height: 130%;
         }
			*/
			
.photos img {
	border: solid 1px #D0C6C6;
	background: #F3F5F2;
	padding: 10px;
}
.photos dl {
	margin: 0 20px;
	padding: 0;
}
.photos dt {
	padding: 5px;
	margin: 20px 0 1px 0;
}
.photos dd {
	margin: 0;
	padding: 0;
}
.press h2 {
	margin-left: 20px;
	margin-right: 20px;
	letter-spacing: 5px;
}
.press .caption {
	margin: 0 40px 40px;
	padding: 0 5px 0 35px;
	
}

.press blockquote {
    background-image: url(/shared/ukpunk/quotes.gif);
	background-position: top left;
	background-repeat: no-repeat;
	padding-left: 25px;
	padding-top: 5px;
	}
	
.links h3 a {
	font-size: 0.9em;
}
.links h2 {
     color: #000;
	 text-decoration: none;
	 }
.links a:hover h2 {
     text-decoration: underline;
	 
	 }

	 		/* NEW!! These styles are now applied at the div level instead of the page level (#calendar instead of
				.calendar). This way, they are also applied to the calendar when it appears on the home page. */
	 
         #calendar h2 {
         	font-size: 1.1em;
         	text-transform:uppercase;
         	font-style: normal;
         	color: #464646;
         }
         #calendar h2 a {
             font-weight:normal;
         }
         #calendar h3 {
         	font-weight: normal;
         	font-variant: small-caps;
         	font-size: 1.1em;
         	margin: 0;
         }

			/* NEW!! This was inherited verbatim from the 5 original templates in the designer kit. It causes
				text to shift around, yet it serves no real purpose. Gone!! 

         .news h1 {
              padding-top: 1px;
         	 }
			*/
	 
	 
/* -- 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 {
	text-transform: uppercase;
	padding: 5px 3px 3px 22px;
}

/* -- section-specific image replacement -- */
h1 {
	height: 55px;
	margin: 4em 0 1em 0;
	font-size: 2em;
	background-repeat: no-repeat;
	background-position: top left;
	background-color: transparent;
	background-image: url(/shared/ukpunk/red_h-back.jpg);
}



/* =========== TWEAKS =========== */

/* -- 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 {
	padding: 5px 0 3px 28px;
}
a img {
  border: 2px solid #E11629;
  }
 a:hover img{
  	border: 2px solid #000;
	}
	

			/* NEW!! minor tweaks for splash and home page images */

         .home img {margin: 1.5em 0 1.5em 20px; display: block;}	/* display: block makes margin collapse */
         
         #splashimage { text-align: center; margin: 100px auto; }
         #splashimage a img { border: 0; }