/* 
	Designed by Dave Shea www.brightcreative.com
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com October 2008
   All styles that have been changed are indented
	
	OCTOBER 2008:
	- fixed layout of guestbook form, which was broken in IE6 due to expanding box problems. solved by
	  eliminating some unnecessary padding and rearranging code so that it doesn't use input[type="submit"],
	  which IE6 doesn't understand
	- similar fixes to #emailsignup, for similar reasons (input[type="submit"] issues)
	- now using padding-left on #content, which is much more future-proof
	- made cosmetic changes to how photos are displayed, replacing the white rectangles with simple borders
	
*/



body {
	background: #fff url(/shared/barbiegirl/body-bg.gif) 0 71px repeat-x;
	color: #780462;
	padding: 0;
	margin: 0;
	text-align: center;
	font: x-small 'Trebuchet MS', Verdana, sans-serif;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}
ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
form {
	margin: 0;
}
h2 {
	color: #0600A0;
	font-size: 1.2em;
	font-weight: normal;
	margin: 0 0 0.5em 0;
}
h3 {
	font-weight: bold;
	font-size: 1.1em;
	font-style: italic;
	color: #fff;
	margin: 0 0 1em 0;
	text-indent: 8px;
}
a {
	color: #FFC76F;
	font-weight: bold;
}
a:hover {
	color: #ffdd99;
}
#container {
	width: 730px;
	text-align: left;
	margin: 0 auto;
	background: #FC62B4 url(/shared/barbiegirl/container-bg.gif) center top repeat-y;
	position: relative;
}
#navigation {
	font-size: 15px;
	background: #fff;
	height: 40px;
}
#navigation ul {
	margin: 0;
	text-align: right;
	position: absolute;
	padding: 17px 35px 3px 35px;
	width: 740px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 670px;
}
#navigation li {
	list-style: none;
	display: inline;
}
#navigation li a {
	color: #B5B3E3;
	text-decoration: none;
	margin-right: 10px;
}
#navigation li a:hover {
	color: #9B057F;
	text-decoration: underline;
}

#emailsignup {
	width: 204px;
	position: absolute;
	top: 290px;
	right: 47px;
	background: url(/shared/barbiegirl/newsletter-bg.gif) 0 0 repeat-y;	/* NEW!! this is the pink rectangle */
}
#emailsignup form {
	padding-left: 12px;
}

         /* NEW!! This seems to be from an early version of the Wizard and is no longer relevant
         #emailsignup span {
         	display: block;
         	width: 204px;
         	overflow: hidden;
         	font-size: 1px;
         	letter-spacing: -1px;
         	background: url(/shared/barbiegirl/newsletter-header-bg.gif) top left no-repeat;
         	padding-top: 51px;
         	height: 51px;
         	voice-family: "\"}\"";
         	voice-family:inherit;
         	height: 0;
         }

         #emailsignup div {
         	padding-bottom: 10px;
         	background: url(/shared/barbiegirl/newsletter-div-bg.gif) bottom left no-repeat;
         }
         */

			/* NEW!! it was a useless hack, anyway. Gone.
         /* hide from ie5/mac \
         #email3signup html>body form {
         	background: url(/shared/barbiegirl/newsletter-form-bg.gif) -1px 52px no-repeat;
         }
         
         end hide */
			

         /* NEW!! This section has been extensively reworked in order to fix some IE6 problems. The main
				problem is that IE6 doesn't understand input[type="text"] or input[type="submit"] 
         			
         #emailsignup input {
         	margin-left: 15px;
         }
         #emailsignup input[type="text"] {
         	margin: 5px 0 5px 20px;
         	border: none;
         	width: 100px;
         	height: 17px;
         	font-size: 12px;
         }
         #emailsignup input[type="submit"] {
         	margin: 5px 0 5px 15px;
         	background: #FF34AA;
         	border: none;
         	color: #fff;
         	font-weight: bold;
         }
			*/

			/* NEW!! This new code replaces everything that was commented out above, but works much better */
			
         #emailsignup input {
         	margin-left: 15px;
         	margin: 5px 0 5px 15px;
         	background: #FF34AA;
         	border: none;
         	color: #fff;
         	font-weight: bold;
         }

         #emailsignup input#list_email {				/* NEW!! this governs the text field */
         	margin: 5px 0 5px 20px;
         	border: none;
         	width: 97px;						/* NEW!! Reduced by 3px for padding */
         	height: 17px;
         	font-size: 12px;
				padding-left: 3px;				/* NEW!! Added 3px of padding */
         	background-color: white;		/* NEW!! This resets it back to normal */
				color: black;						/* NEW!! This resets it back to normal */
				font-weight: normal;				/* NEW!! This resets it back to normal */
         }


#banner {
	width: 730px;
	height: 206px;
	background: url(/shared/barbiegirl/banner-bg.gif) 0 0 no-repeat;
}
#banner .band {
	width: 439px;
	font-size: 1px;
	letter-spacing: -1px;
	overflow: hidden;
					background: url(images/hugetoprightredcross2.jpg) 0 0 no-repeat;
	position: absolute;
	top: 80px;
	left: 10px;
	padding-top: 149px;
	height: 149px;
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 0;
}
#banner .photo {
	width: 204px;
	overflow: hidden;
	font-size: 1px;
	letter-spacing: -1px;
background: url(/images/mimilog1.jpg) 0 0 no-repeat;
	position: absolute;
	top: 51px;
	left: 479px;
	padding-top: 222px;
	height: 222px;
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 0;
}

         #content {
         	padding-right: 230px;
				padding-left: 40px;			/* NEW!! This replaces margin-left: 40px; on several elements */
         }
			
         h1 {
         	width: 479px;
         	overflow: hidden;
         	background-repeat: no-repeat;
         	background-position: 12px 0;
         	padding-top: 47px;
         	height: 47px;
				margin-left: -40px;		/* NEW!! Reduced margin-left by 40px; now using content padding. */
         	voice-family: "\"}\"";
         	voice-family:inherit;
         	height: 0;
         }
			
.bio h1 {
	background-image: url(/shared/barbiegirl/h1-bio.gif);
}
.products h1 {
	background-image: url(/shared/barbiegirl/h1-buy.gif);
}
.calendar h1 {
	background-image: url(/shared/barbiegirl/h1-calendar.gif);
}
.contact h1 {
	background-image: url(/shared/barbiegirl/h1-contact.gif);
}
.guestbook h1 {
	background-image: url(/shared/barbiegirl/h1-guestbook.gif);
}
.home h1, .index h1, .list h1 {
	background-image: url(/shared/barbiegirl/h1-welcome.gif);
}
.links h1 {
	background-image: url(/shared/barbiegirl/h1-links.gif);
}
.music h1 {
	background-image: url(/shared/barbiegirl/h1-music.gif);
}
.news h1 {
	background-image: url(/shared/barbiegirl/h1-news.gif);
}
.photos h1 {
	background-image: url(/shared/barbiegirl/h1-photos.gif);
}
.press h1 {
	background-image: url(/shared/barbiegirl/h1-press.gif);
}
.name, .act {
	display: block;
	font-size: 1.1em;
	color: #fff;
	font-style: italic;
	margin: 0 1em;
}
.entry ul {
	margin: 1em;
	display: block;
}
         .entry {
         	margin: 0 40px 1.5em 0px;		/* NEW!! Reduced margin-left by 40px; now using content padding. */
         }
			
.details {
	margin: 1em;
}
			
         .entry p {
         	margin: 1em !important;		/* NEW!! Added !important, forcing 1em margin in home page #calendars */
         }

/* -- page-specific style -- */

			/* NEW!! margin-right was 55px, but this broke the layout in IE6 */

         #postForm {
         	text-align: left;
         	background: #FFB4DC url(/shared/barbiegirl/guestbook-top.gif) 0 0 no-repeat;
         	margin: 0 0 30px 0;		/* NEW!! Reduced margin-left by 40px; now using content padding. */		
         	width: 400px;
         }
			
         #postForm form {
         	background: url(/shared/barbiegirl/guestbook-bottom.gif) bottom left no-repeat;
         	padding: 25px 0px				/* NEW!! left/right padding was 20px, but this expanded in IE6 */
			}	

         /* NEW!! This section has been extensively reworked in order to fix some IE6 problems. The main
				problem is that IE6 doesn't understand input[type="submit"]
				
         #postForm input, #postForm textarea {
         	display: block;
         	width: 360px;
         	margin-bottom: 10px;
         }
         #postForm input {							NEW!! This made the submit button look weird in every browser
          	height: 15px;
         }
         #postForm textarea {
         	height: 100px;
         }
         #postForm input[type="submit"] {		NEW!! IE6 never understood this code
         	width: 200px;
         	margin: 0 auto;
         }
         */

			/* NEW!! This new code replaces everything that was commented out above, but works much better */
			
			#postForm textarea {
         	display: block;
         	width: 360px;
				height: 100px;
         	margin-bottom: 10px;
         	margin: 0 auto 10px auto;
         }

			#postForm input {
         	display: block;
         	width: 200px;
         	margin: 0 auto;
			}

			#postForm input#gbname, #postForm input#gbadress {
				width: 360px;
				margin-bottom: 10px;
			}
			
			#postForm label {
				margin-left: 20px;
			}

         /* NEW!! An ultra-safe hack for IE6 and IE5 only, combining the Tan hack and the Pixy hack. The
         	* html makes sure that only IE5/6 see any of this (and the underscores act as a backup). The
         	backslashes pass real values to IE6 that override the fake values for IE5 (box model problem). */

               * html #postForm input { 		
               	_margin-left: 100px;			/* fake margin for IE5win only simulates auto centering */
               	_marg\in-left: auto;			/* real margin for IE6 */
                  }
               
               * html #postForm textarea, 
					* html #postForm input#gbname, 
					* html #postForm input#gbadress { 		
               	_margin-left: 20px;			/* fake margin for IE5win only simulates auto centering */
               	_marg\in-left: auto;			/* real margin for IE6 */
                  }
		

         .index #content p, .home #content p, .list #content p, .list #content form, .links dl, .links h2, .photos dl, .photos h2, .press h2 {
         	margin: 1em 40px 1em 0;		/* NEW!! Reduced margin-left by 40px; now using content padding. */
         }
			
			/* NEW!! This is overridden later, anyway
         .music .details {
         	margin: 0 40px;
         }
			*/

.music h2 {
	margin: 2em 40px -1em 30px;
}

         .music h3 {
         	margin: 2em 40px 0 0;		/* NEW!! Reduced margin-left by 40px; now using content padding. */
         }

         .music .details {
         	margin: 0 30px 15px -10px;		/* NEW!! Reduced margin-left by 40px; now using content padding. */
         	background: url(/shared/barbiegirl/guestbook-bottom.gif) bottom left no-repeat;
         }

/* hide from ie5/mac \*/
.music .details {
	padding-bottom: 1px;
}
* html .music .details {
	padding-bottom: 7px;
}

/* end hide */
.music .details ul {
	margin-bottom: 0;
}
.music .artist {
	color: #fff;
	padding-left: 16px;
}
.music .artist, .music .caption {
	display: inline;
	padding-right: 10px;
}
.music .description {
	line-height: 150%;
	background: #FD8BC8;
	margin: -1em 0;
}
html>body .music .description {
	font-style: italic;
}
.music #content ul {
	background: #FFB4DC url(/shared/barbiegirl/guestbook-top.gif) 0 0 no-repeat;
	list-style-type: none;
	margin: 10px 0;
	padding: 15px 20px 5px 20px;
	width: 400px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 360px;
}
.music #content li a {
	font-weight: normal;
	color: #0600A0;
}
.music #content li a:hover {
	color: #fff;
}
.music .mp3_hifi_download, .music .mp3_lofi_download {
	padding: 6px 0 6px 25px;
	background: url(/shared/barbiegirl/ico-cd.gif) no-repeat;
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 6px 0 6px 25px;
	background: url(/shared/barbiegirl/ico-play.gif) no-repeat;
	display: block;
}
.music blockquote {
	background: #FFB4DC;
	margin: 0;
	padding: 10px 40px;
	width: 400px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 320px;
}
.music blockquote p {
	margin: 0 0 1em 0;
}
.music blockquote.lyrics {
	margin-bottom: 6px;
}

			/* NEW!! A few changes to how photos are displayed, replacing white rectangle with a simple border. */
			
         .photos dt {
         	font-weight: bold;
         	font-size: 1.1em;
         	font-style: italic;
         	color: #fff;
         }
         .photos dd {
         	margin: 0 0 20px 0;
         /*	padding: 2px;				NEW!! removed to improve appearance of photos
         	background: #fff;			NEW!! removed to improve appearance of photos */
         }
         .photos img {
				border: 2px solid white;	/* NEW!! added to improve appearance of photos */
         	max-width: 416px;
         }

         .press h2 {
         	margin-left: 40px;			/* NEW!! Reduced margin-left by 40px; now using content padding. */
         	margin-right: 40px;
         	margin-top: 10px;
         }
			
.press .caption {
	margin: 0 40px 40px;
	padding: 5px 5px 5px 30px;
	background: url(/shared/barbiegirl/ico-speech.gif) no-repeat;
}
#footer {
	background: url(/shared/barbiegirl/footer-bg.gif) 0 0 repeat-y;
	padding: 0;
	margin: 0;
}
#footer p {
	color: #fff;
	text-align: center;
	background: url(/shared/barbiegirl/footer-p-bg.gif) bottom left no-repeat;
	margin: 0;
	padding: 17px 290px 23px 40px;
	width: 730px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 400px;
}

.products .caption {
	padding-right: 10px;
	margin: 0 15px 10px 10px;
}

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

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

.products h2 {
	margin: 0 0 10px 10px;
}
/* -- selected links --*/
.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: #0600A0;
}

/* accessibility tweaks */
#accessibility {
	position: absolute;
	left: -9999px;
}

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