/*
		Site: 		Infant Toys
		File: 		Product Page CSS
		Author:		Eric Shepherd
		Date:		March 2006
*/


/* DIVS */

html, body {
}

#site-container {
	width: 773px;
	background-color: #fff;
}

#product-info {
	font-size: 1em/1.2;
}

/* ACCESSIBILITY */

p#breadcrumbs {
	top: 38px;
}

/* HEADINGS */

h1 {
	position: relative;
	width: 773px;
	height: 70px;
	padding-top: 64px;
	overflow: hidden;
}

		h1 span {
			position: absolute;
			width: 773px;
			height: 134px;
			top: 0;
		}
		
h2#product-name {
	margin-left: 30px;
	width: 360px;
	font-size: 1.4em;
	padding-bottom: 8px;
}

/* PRODUCT INFO */

#product-info { 
	width: 773px; 
	padding: 0;
	color: #fff;
	float: left;
	margin-bottom: 1em;
}


div#product-header-container, dl#product-meta {
	position: relative;
	width: 410px;
	left: 18px;
}

div#product-header-container {
	display: block;
	margin-bottom: 1.44em;
}

dl#product-header {
	margin: 1em 0 .8em 12px;
}

dl#product-header dd.video a,
dl#product-header dd.sasvideo a
 /*,
dl#product-meta dd.award a*/ {
	color: #fff;
}

dl#product-header dd.demo a,
dl#product-header dd.sasdemo a
 /*,
dl#product-meta dd.award a*/ {
	color: #fff;
}


		/* product meta information */
		
		dt.product-number, 
		dt.product-ages, 
		dt.product-price,
		dt.product-maximum-weight,
		dt.product-maximum-height {
			padding: 0 .3em 0 0px;
			float: left;
			clear: both;
		}
		
		dt.product-ages, dd.product-ages { 
			padding-top: 0; /*  allow for rounded corners */
		}
		
		dd.product-number, 
		dd.product-ages, 
		dd.product-price,
		dd.product-maximum-weight,
		dd.product-maximum-height {
			padding-right: 100px; /* at least it keeps stuff from hiding behind demo button  was 170*/
		}
		
		dd.product-ages {
			/*padding-right: 10px;*/
		}
		
				dt.product-price, dd.product-price {
					margin-bottom: 0; /* space below rounded corner box */
				}
		
		dl#product-meta dd.product-description,
		dl#product-meta dd#social-container,
		dl#product-meta dd#ratings,
		dl#product-meta dt.product-developmental-guidelines,
		dl#product-meta dd.product-developmental-guidelines {
			background: #fff;
			padding: 1em 340px 1em 30px;
			line-height: 1.4;
			margin: 0;
			width: 403px;
			position: relative;
			left: -18px;
		}
		
		dl#product-meta dd#social-container {
			/*padding: 1em 340px 0em 30px;*/
			height: 10px;
			/*clear: both;*/
		}
		
		#email-to-friend {
			margin-bottom:-13px;
		}
		
		#email-to-friend img{
			padding-right:2px;
			margin-bottom:-1px;
		}
		
		dl#product-meta dt.product-developmental-guidelines {
			padding: 1em 340px 0 30px;
			font-weight: bold;
		}
		
		dl#product-meta dd.product-developmental-guidelines {
			padding: 0 340px 1em 30px;
		}
		
				dl#product-meta dd.product-description li {
					margin-left: 1.2em;
				}
		
		/* learn more */
		
		dl#product-header dt.product-more, dl#product-meta dt.product-description {
			position: absolute;
			left: -9999px;
		}
		
		dl#product-header dd.demo,dl#product-header dd.sasdemo, dl#product-header dd.commercial, dl#product-header dd.commercial-with-demo /*, dl#product-meta dd.award */ {
			position: absolute;
		}
		
				dl#product-meta dd.where-to-buy {
					/*top: 8px;
					left: 205px;
					position: absolute;*/
					position: relative;
					width: 740px;
					left: -18px;
					background-color: #fff;
					height: 1.3em;
					padding: 1em 0 0 30px;
				}
				
				dl#product-meta dd.product-buy-now {
					background-color: #fff;
					width: 770px;
					position: relative;
					left: -18px;
					height: 38px;
					padding-top: 1em;
				}
				
					dl#product-meta dd.product-buy-now a {
						width: 100px;
						height: 26px;
						position: relative;
						display: block;
						overflow: hidden;
						margin: 0 .5em 1em 30px;
						cursor: hand;
					}
					
						dl#product-meta dd.product-buy-now span {
							position: absolute;
							top: 0;
							left: 0;
							width: 100px;
							height: 26px;
							display: block;
							/* the background image is in base.css.aspx because it was easy */
						}
				
				dl#product-meta dd.find-a-retailer {
					background-color: #fff;
					margin: -25px 0 0 100px;
					position: relative;
					font-size: 80%;
					z-index: 900;
				}
				dl#product-header dd.video {
					top: 5px;
					left: 314px;
					position: absolute;
					background-color: transparent;
				}
				dl#product-header dd.sasvideo {
					bottom: .5em;
					left: 290px;
				}
				
						dl#product-header dd.video a {
							display: block;
							width: 88px;
							height: 30px;
							overflow: hidden;
							cursor: pointer;
						}
						dl#product-header dd.sasvideo a {
							display: block;
							width: 116px;
							height: 30px;
							overflow: hidden;
							cursor: pointer;
						}
				
						dl#product-header dd.video a span,
						dl#product-header dd.sasvideo a span {
							position: absolute;
							width: 88px;
							height: 30px;
							background-repeat: no-repeat;
							background-position: top left;
							
						}
						
								dl#product-header dd.video a:hover span,
								dl#product-header dd.sasvideo a:hover span {
									background-position: 0 -30px;
								}
				
				dl#product-header dd.demo {
					bottom: .5em;
					left: 314px;
				}
				dl#product-header dd.sasdemo {
					bottom: .5em;
					left: 290px;
				}
				
						dl#product-header dd.demo a {
							display: block;
							width: 88px;
							height: 30px;
							overflow: hidden;
							cursor: pointer;
						}
						dl#product-header dd.sasdemo a {
							display: block;
							width: 116px;
							height: 30px;
							overflow: hidden;
							cursor: pointer;
						}
				
						dl#product-header dd.demo a span,
						dl#product-header dd.sasdemo a span {
							position: absolute;
							width: 100%;
							height: 100%;
							background-repeat: no-repeat;
							background-position: top left;
						}
						
								dl#product-header dd.demo a:hover span,
								dl#product-header dd.sasdemo a:hover span {
									background-position: 0 -30px;
								}
				
				dl#product-meta dd.award {	
					float: right;
					position: relative;
					background: #fff;
					z-index: 1000;
					margin-top: -1.2em;
				}
				
				dl#product-meta dd.award {
					/*top: 2.7em;
					left: 295px;*/
				}
		
						dl#product-meta dd.award a {
							/*display: block;
							width: 104px;
							height: 30px;
							overflow: hidden;
							cursor: pointer;
						*/}
				
						dl#product-meta dd.award a span {
							/*position: absolute;
							width: 100%;
							height: 100%;
							background-repeat: no-repeat;
							background-position: top left;
						*/}
						
								dl#product-meta dd.award a:hover span {
									/*background-position: 0 -30px;
								*/}
									
					dl#product-header dd.commercial {
						bottom: .5em;
						left: 287px;
					}
					
					dl#product-header dd.commercial-with-demo {
						bottom: .5em;
						left: 190px;
					}
					
						dl#product-header dd.commercial a,
						dl#product-header dd.commercial-with-demo a {
							display: block;
							width: 116px;
							height: 30px;
							overflow: hidden;
							cursor: pointer;
						}
						
						dl#product-header dd.commercial a span,
						dl#product-header dd.commercial-with-demo a span {
							position: absolute;
							width: 100%;
							height: 100%;
							background-repeat: no-repeat;
							background-position: top left;
							}
						
							dl#product-header dd.commercial a:hover span,
							dl#product-header dd.commercial-with-demo a:hover span {
								background-position: 0 -30px;
								display: block;
								}

/* INSTRUCTIONS */

#instructions {
	padding: 0 335px 1em 30px;
	background: #fff;
}

#instructions div h3, #instructions div dl {
	margin: .5em 1em;
}

		#instructions div dt {
			margin: .4em 0 .7em 0;
		}

		#instructions div h3#instruction-intro {
			font-weight: bold;
			cursor: pointer;
			font-size: 1em;
		}
		
/* PRODUCT MEDIA */

#product-media {
	float: left;
	width: 263px;
	margin: -100px 0 2em -300px;
	position: relative;
	z-index: 10;
	background: #fff;
}

		dt#product-image {
			height: 263px; /* need to maintain height when image switches in and out - add to fpdev/frontend styles sometime */
		}

				dt#product-image img {
					border: 10px solid;
				}
		
		
#product-media ul {
	list-style: none;
	width: 263px;
	margin-left: 1px;
}

		#product-media li {
			float: left;
			margin: .3em 9px 11px 10px;
			border: 0;
		}
		
				#product-media li img {
					display: block;
					border: 4px solid;
				}
		
				#product-media li a {
					display: block;
				}
						
dd#product-caption {
	text-align: center;
	font-weight: bold;
	font-size: 1.1em;
	margin: .5em;
}

/* DEV BENEFITS */

#dev-benefits {
	clear: both;
	width: 696px;
	margin: 0 0 2em 26px;
	color: #fff;
	padding: 0 5px 10px 5px;
}

		#dev-benefits h3 {
			text-align: center;
			margin-top: .5em;
			font-size: 1.5em;
		}
		
		#dev-benefits div div {
			margin: 10px;
			width: 212px;
			float: left;
			color: #fff;
		}
		
		#dev-benefits h4 {
			font-weight: bold;
			width: 182px;
			font-size: 1.1em;
			padding: 10px 15px;
		}
				
				#dev-benefits li {
					padding: 0 1em .7em .2em;
					margin-left: 25px;
				}
				
						#dev-benefits li li { /* in case we get nested lists */
							margin: 0;
							padding: 0;
						}

/* BACK */

p#back {
	clear: both;
	margin-left: 30px;
	margin-bottom: 1.6em;
	position: relative;
	top: .5em;
}

/* TESTIMONIALS */
.product-testimonials a {
	clear: both;
	margin: -10px 0 -10px -4px;
	position: relative;
	background: url(/content/v4/US/infanttoys/img/btn-product-ravereviews-ls.gif) repeat-y;
	width:278px;
	height:32px;
	text-indent: -9999px;
	display:block;
}

/* MORE PRODUCTS */

#more-products {
	clear: both;
	width: 706px;
	margin: 0 0 2em 26px;
	padding-bottom: 10px;
}

#more-products h2 {
	width: 620px;
	text-align: center;
	margin: .5em 1em;
	font-weight: normal;
	padding: .3em 1em;
	letter-spacing: .1em;
}

		/* SIFR DECOY STYLES */
		
		.sIFR-hasFlash #more-products h2 {
			visibility: hidden;
		}
		
/* MORE PRODUCT THUMBNAILS */

#more-products #thumbs {
	margin-left: 8px;
	width: 698px;
}

#more-products #thumbs div {
	float: left;
	width: 14em;
	position: relative;
	padding: 0;
	margin: 0 0 .5em 0;
}

#more-products #thumbs dl {
	position: relative;
	padding-top: 120px;
	text-align: center;
	padding-bottom: 1em;
	height: 3em;
}

		#more-products #thumbs dd.product-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 15em;
			margin: 0;
		}
		
				#more-products #thumbs dd.product-image a {
					width: 118px;
					display: block;
					margin: 0 auto;
				}
		
						#more-products #thumbs dd img { 
							display: block;
							width: 110px;
							margin: 0 auto;
							border: 4px solid;
						}
				
		#more-products #thumbs dt.product-name {
			padding: 7px 10px 8px 16px;
			font-size: .95em;
		}


/*styles to add viewlarger graphic link to prod page */
#product-shot {
	position: relative;
}

#product-shot dd.product-view-larger a {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 243px;
	height: 243px;
	display: block;
	background: url(/content/v4/us/img/viewlarger.gif) no-repeat;
	background-position: -370px 100%;
	/* needs to be -400px for Safari - hack? */
	opacity: 0.45;
	filter: alpha(opacity=45);
	text-indent: -9999px;
	overflow: hidden;
}

	#product-shot dd.product-view-larger a:hover,
	#product-shot dd.product-view-larger a:focus {
		opacity: 1.0;
		filter: alpha(opacity=100);
		background-position: 0% 100%;
	}

/* brand specific bazaarvoice */
#ratings {
	*padding-bottom: 5px;
}

#ratings-container {
	width: 395px;
	border: 1px solid #5175c4;	
}

#reviews-container {
	clear: both;
	width: 706px;
	margin: 0 0 2em 26px;
}

#reviews-heading {
	background-color: #5175c4;
}

#add-this-container {
	float: right;
	height: 16px;
}
		
/* LEGAL FOOTER */
/* we can't use margin bottom, because then the body bk will show */

#footer {
	padding: 0 20px 1em 0;
}
		
/* MISCELLANEOUS HACKS */

/*
	These hacks involve duplication of rules found above. This ensures that when the hack is 
	no longer needed, it can be removed completely without interfering with the original rule
*/

h1 { /* for mac ie5, but it's stopped working apparently... */
	height: 134px;
	padding: 0;
}

/* hide from mac ie5 \*/
	h1 {
		height: 70px;
		padding-top: 64px;
	}
/* end hiding from mac ie5 */

		
/* SAFARI HACKS - let's all invalidate the stylesheet and have a good time */
/* Note that the # before the closing bracket causes Safari to ignore the rule
/* and every other rule after it, so those rules must come at the end of the stylesheet */

/*
	Safari mysteriously overlaps the h2 and the product-meta box. Almost looks like a float clearing problem,
	but nothing's floated. Could be sIFR-related, but the fix of a top margin is quick and dirty.
*/

dl#product-meta {
	margin-top: 15px;
}

/*
	Safari seems to need an additional em of spacing before the price at least at this font size.
	We'll give it what it wants.
*/

dl#product-meta dd.product-price {
	/*margin-left: 10.6em;*/
}
				
dl#product-meta {
	margin-top: 0;
#}

dl#product-meta dd.product-price {
	/*margin-left: 9.6em;*/
#}