/*
		Site: 		Infant Toys
		File: 		Base CSS
		Location:   pages\v4\default\infanttoys\css
		Author:		Eric Shepherd
		Date:		March - May 2006
*/

/*
		SITE-WIDE KNOWN ISSUES:
		
		Safari only: If the Browse All section is clicked (so that the URL has an #anchor link on the end), and the page is reloaded, 
		the Rounded Corner script will not run correctly. It is fine as long as there's no #anchor link at the end of the URL.
		
		Mac IE5, Netscape 7.1 and below: The Browse All section on thumbnail and product pages has been disabled, as these 
		browsers do not have the capability of running the script or handling the positioning.
		
		Older Gecko browsers: The entire height of the Browse All box is shown, even though the moo.fx script should handle 
		expanding and collapsing this box. The animation and toggling still works, but the expanded boxes are vertically 
		distributed rather than all positioned at the bottom of the h3 buttons. Also, there is a 20px or so gap at the top of the 
		landing and non-branded template pages.
		
		IE5/Mac: The product page header doesn't show up. Of course, the rounded corner script doesn't work and the boxes are 
		squared. The instruction manual link gets hidden, but the script to show it is broken, so the manual link is not available.
		
		Safari: The purple h2 elements on the non-branded template do not round. They show as squared boxes. ???
		
		IE5.5/PC: The Browse All box doesn't work - all links are displayed instead of toggling between the three categories. 
		The scalloped border only extends to the bottom of the window, not to the bottom of the document. Instruction manual 
		box is shown expanded. The subnavs on the landing page are indented slightly. Other small rendering glitches. All content 
		is accessible.
		
		IE5.0/PC: Strangely, the animation on the instruction box works fine in this older browser. The rounded corner script doesn't 
		run on IE5.0. Same problems as IE5.5 otherwise.
*/

/*	
		ACKNOWLEDGEMENTS
		
		Thanks to squidfingers.com for the background pixel pattern!
		Most image replacement is done via the Modified Shea method 
			(documented at http://www.mezzoblue.com/tests/revised-image-replacement/)
			Shea doesn't actually use this method, but a couple empty spans and 1k of CSS is a small price to pay for the accessibility 
			of having text on the screen in the images off/css on scenario.
		The Infant Toys logo is transparent, so this method fails, and the Phark method is used instead for this logo.
			(http://phark.typepad.com/phark/2003/08/accessible_imag.html)
			The downside to this method (the upside is that it's REALLY EASY and code-light) is that if images are off and css is on, 
			there is nothing on the screen.
*/


* {
margin:0;
padding:0;
border:0;
}

body {
	font-family: arial, helvetica, sans-serif;
	font-size: 62.5%; /* 1em = 10px at default 16px font size */
}

#container {
	font-size: 1.2em; /* default is now 12px */
}

h3.error {
	margin: .7em 3em;
	text-align: center;
	font-weight: bold;
	font-size: large;
}

p.error {
	margin: 1em 3em;
	text-align: center;
}

/* ADVERTISEMENT */

p#advertisement {
	text-align: right;
	position: absolute;
	top: 40px;
	left: 0;
	width: 745px;
	font-size: 80%;
	margin: 0;
	padding: 0;
}

/* BUY NOW FOR PRODUCT PAGE */

						dl#product-meta dd.product-buy-now span {
							background: url(/content/v4/us/img/buynow.gif) no-repeat;
						}
						
/* BUY NOW FOR THUMBNAIL PAGE */
						dd.product-buy-now a span {
							background: url(/content/v4/us/img/buynow_plaque.gif) no-repeat;
						}

/* ACCESSIBILITY */

p#breadcrumbs {
	position: absolute;
	top: 2px;
	left: 2px;
	font-size: .9em;
}

/* LINKS */

a:link {
	font-weight: bold;
	text-decoration: underline;
}

a:visited {
	font-weight: bold;
	text-decoration: underline;
}

a:hover, a.on {
	font-weight: bold;
	text-decoration: none;
}

a:active {
	font-weight: bold;
	text-decoration: underline;
}

/* LEGAL FOOTER */

div#footer {
	padding-top: 2em;
	text-align: center;
	clear: both;
    font-size:80%;
}

#legal_footer {
	font-family: arial,helvetica,sans-serif;
}

#legal_footer a {
	font-weight: normal;
}

#legal_footer ul.footer_helplinks {
	font-size: 1.1em;
}

.left-aligned #legal_footer ul.footer_helplinks {
	font-size: 1.1em;
}

#footer #legal_footer,
#footer #legal_footer a {
	color: #7f60ab;
    text-decoration: none;
}

#footer #legal_footer a:hover {
	text-decoration: underline;
}

#footer #fplegal {
	color: #7f60ab;
}

#footer #fplogolinks {
	font-size: .9em;
}

#footer li#footer_use p {
	color: #7f60ab;
}

#legal_footer #footer_legallinks ul {
	margin-left: 0;
	padding-left: 0;
}

#footer #footer_legallinks ul.footer_legallinks {
	font-size: 1em;
}

/* STANDARD SIFR STYLES - DO NOT MODIFY

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}*/

/*GLOBAL NAV*/


#globalnav {
	z-index: 1000;
}

.left-aligned #globalnav #nav-content,
.center #globalnav #nav-content {
	width: 773px;
}

#globalnav #nav-content #fphome {
	font-size: .9em;
}

/* ---------------------------------------------------- SIFR (3.436) / DON'T TOUCH ------------------------------------------ */

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }
  
  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }
  
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/* ---------------------------------------------------- END SIFR (3.436) / DON'T TOUCH ------------------------------------------ */

@media screen {
  h2.sIFR-active {
    font-family: Verdana;
    visibility: hidden;
  }
  h3.sIFR-active {
    font-family: Verdana;
    visibility: hidden;
  }
}

#content div#tryme-head {
    background: transparent none repeat scroll 0 0;
    float: none;
    margin: 0 0 -13px;
    width: 538px;
}

#content div#results-head {
    background: transparent none repeat scroll 0 0;
    float: none;
    margin: 0 0 -9px;
    width: 538px;
}

/* BROWSE ALL */

#browse-all.browse-control {
	background: #af8fd6 url(/content/v4/img/infanttoys/browseall-bottom.gif) no-repeat center bottom;
	width: 685px;
	margin: 0 0 0 37px;
	float: left;
	position: relative;
	font-size: .95em;
}

		#browse-all.browse-control h2 {
			background: #af8fd6 url(/content/v4/img/infanttoys/browseall-top.gif) no-repeat center top;
			color: #fff;
			text-align: center;
			padding-top: .3em;
		}
		
		/* buttons */
		
		.browse-control #browse-develop h3, 
		.browse-control #browse-category h3, 
		.browse-control #browse-collection h3 {
			position: absolute;
			top: 2em;
			width: 218px;
			height: 40px;
			margin: 8px 0 10px 8px;
		}
		
				.browse-control #browse-develop h3 {
					left: 1px;
				}
				
				.browse-control #browse-category h3 {
					left: 225px; /* delete the following to add dev stages */
					left: 114px;
				}
				
				.browse-control #browse-collection h3 {
					left: 449px; /* delete the following to add dev stages */
					left: 339px;
				}
		
		.browse-control #browse-develop h3 a, 
		.browse-control #browse-category h3 a, 
		.browse-control #browse-collection h3 a {
			position: relative;
			display: block;
			color: #fff;
			overflow: hidden;
			width: 218px;
			height: 40px;
		}
		
				.browse-control #browse-develop h3 a span, 
				.browse-control #browse-category h3 a span, 
				.browse-control #browse-collection h3 a span {
					position: absolute;
					width: 218px;
					height: 40px;
					background: url(/content/v4/us/infanttoys/img/btn-n-bottom.gif) no-repeat;
				}
				
						.browse-control #browse-develop h3 a span {
							background-position: 0 0;
						}
						
								.browse-control #browse-develop h3 a:hover span, 
								.browse-control #browse-develop h3 a.on span {
									background-position: 0 -40px;
								}
								
						.browse-control #browse-category h3 a span {
							background-position: -220px 0;
						}
						
								.browse-control #browse-category h3 a:hover span, 
								.browse-control #browse-category h3 a.on span {
									background-position: -220px -40px;
								}
								
						.browse-control #browse-collection h3 a span {
							background-position: -440px 0;
						}
						
								.browse-control #browse-collection h3 a:hover span, 
								.browse-control #browse-collection h3 a.on span {
									background-position: -440px -40px;
								}


/*#browse-all.browse-page {
	border: red solid 1px;
    width: 10px;
}*/

.browse-control ul {
	list-style: none;
	width: 660px;
	background: #8f6fba;
	margin: 0 0 12px 12px;
}

				/* this is kind of messed up, but i don't have time to figure out how moo.fx works. hack-o-rama */
				
				.browse-control #browse-develop ul {
					position: relative;
					top: 4.5em;
					margin-bottom: 40px;
				}
				
				.browse-control #browse-category ul {
					position: relative;
					/*top: 1em;*/ /* delete the following two lines to add dev stages */
					top: 4.5em;
					margin-bottom: 50px;
				}
				
				.browse-control #browse-collection ul {
					position: relative;
					/*top: .2em;*/ /* delete the following lines to add dev stages */
					top: .2em;
				}

		/*
				link layout - using hacks - inline-box for mozilla, inline-block for safari 
				(since mozilla doesn't support it yet!) and overriding in ie stylesheet 
				to use an inline-block/inline hack that seems to work...
		*/

		.browse-control ul>li {
			display: -moz-inline-box;
			display: inline-block;
			height: 2em;
			margin: 1em 1.5em;
			vertical-align: top;
		}
		
				.browse-control ul li>a {
					display: table;
					table-layout: fixed;
					width: 11em;
				}
		
				.browse-control ul li a {
					color: #fff;
				}

/* PHYSICAL MILESTONES */

#physical-milestones-container {
    padding-left: 30px;
    clear: both;
}

h3#headline-physical-milestones {
    display: inline;
	color: #fff;
	font-size: 1.5em;
	font-weight: bold;
	/*padding: 2px 0;*/
    margin-left: 10px;
}

h4#headline-physical-milestones {
    display: inline;
	color: #fff;
	font-size: 1.7em;
	font-weight: bold;
	padding: 2px 0;
}
.sIFR-hasFlash h4#headline-physical-milestones {
		font-size: 20px;
		line-height: 35px;
		visibility: hidden;
	}

ul#physical-milestones {
	width: 770px;
	background: #11a0db;
	color: #fff;
	list-style: none;
	border-bottom: 7px solid #11a0db;
	position: relative;
}

	ul#physical-milestones a {
		color: #fff;
	}
	
	ul#physical-milestones:after {
		content: 'this is a test';
		display: block;
		clear: both;
		visibility: hidden;
		height: 0;
	}
	
	li.physical-milestone {
		float: left;
		width: 75px;
		height: 106px;
		height: 95px;
		list-style: none;
	}
	
	li.physical-milestone a {
		display: block;
		width: 75px;
		height: 106px;
		height: 95px;
	}
	
		ul#physical-milestones li.physical-milestone ul {
			visibility: hidden;
			position: absolute;
			top: 106px;
			left: 0;
			background: #11a0db;
			z-index: 100;
			width: 720px;
			padding: 25px;
			list-style: none;
			text-align: center;
		}
		
			ul#physical-milestones li.physical-milestone ul li {
				font-size: 90%;
				display: inline;
				padding: 0 2.4em;
			}
		
li.physical-milestone a {
	background: url(/content/v4/us/infanttoys/img/physical-milestones.gif) no-repeat;
	text-indent: -9999px;
}

	ul#physical-milestones li.physical-milestone li a {
		background: #11a0db;
		text-indent: 0;
		float: none;
		display: inline;
	}

li#physical-milestone-kicking a {
	background-position: 0 0;
}
	li#physical-milestone-kicking a:hover,
	li#physical-milestone-kicking a.on {
		background-position: 0 -106px;
		background-position: 0 -95px;
	}

li#physical-milestone-pushingup a {
	background-position: -75px 0;
}
	li#physical-milestone-pushingup a:hover,
	li#physical-milestone-pushingup a.on {
		background-position: -75px -106px;
		background-position: -75px -95px;
	}

li#physical-milestone-reaching a {
	background-position: -150px 0;
}
	li#physical-milestone-reaching a:hover,
	li#physical-milestone-reaching a.on {
		background-position: -150px -106px;
		background-position: -150px -95px;
	}

li#physical-milestone-sittingup a {
	background-position: -225px 0;
}
	li#physical-milestone-sittingup a:hover,
	li#physical-milestone-sittingup a.on {
		background-position: -225px -106px;
		background-position: -225px -95px;
	}

li#physical-milestone-crawling a {
	background-position: -300px 0;
}
	li#physical-milestone-crawling a:hover,
	li#physical-milestone-crawling a.on {
		background-position: -300px -106px;
		background-position: -300px -95px;
	}

li#physical-milestone-pullingup a {
	background-position: -375px 0;
}
	li#physical-milestone-pullingup a:hover,
	li#physical-milestone-pullingup a.on {
		background-position: -375px -106px;
		background-position: -375px -95px;
	}

li#physical-milestone-cruising a {
	background-position: -450px 0;
}
	li#physical-milestone-cruising a:hover,
	li#physical-milestone-cruising a.on {
		background-position: -450px -106px;
		background-position: -450px -95px;
	}

li#physical-milestone-standing a {
	background-position: -525px 0;
}
	li#physical-milestone-standing a:hover,
	li#physical-milestone-standing a.on {
		background-position: -525px -106px;
		background-position: -525px -95px;
	}

li#physical-milestone-walking a {
	background-position: -600px 0;
}
	li#physical-milestone-walking a:hover,
	li#physical-milestone-walking a.on {
		background-position: -600px -106px;
		background-position: -600px -95px;
	}

ul#physical-milestones li#physical-milestone-riding {
	width: 95px;
}
li#physical-milestone-riding a {
	background-position: -675px 0;
}
ul#physical-milestones li#physical-milestone-riding a {
	width: 95px;
}
	li#physical-milestone-riding a:hover,
	li#physical-milestone-riding a.on {
		background-position: -675px -106px;
		background-position: -675px -95px;
	}
	
#physical-milestone-next {
	clear: both;
	float: none;
	margin: 0 0 2em 0;
	border-top: 10px solid #fff;
}
	
/* SCALLOPS */

#shameless-hack-scallops {
	height: 100%;
	position: fixed;
	top: 0;
	width: 20px;
	left: 753px;
	z-index: 200;
}

/* NIFTY CORNERS */

/* This style sheet is dynamically added by the JavaScript, so there is no CSS necessary here. */

/* EASY CLEARING */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* MISCELLANEOUS HACKS - let's all invalidate the stylesheet and feel all right */

/*	
	Hack: IE5/Mac can't do the animation on the browse-all section. So, we are going 
	to hide the entire section from Mac IE5.
*/

#browse-all.browse-control {
	display: none;
}

/* hide this rule from mac ie 5 \*/
	#browse-all.browse-control {
		display: block;
	}
/* end hiding from mac ie 5 */

/*
	This is a hack. Older Mozilla engines can't handle the Browse All animation and positioning.
	This hack hides the entire section (only when it's on thumbnail/product pages).
	The # before the closing bracket keeps Safari from seeing the rule, which it would otherwise
	follow. And Safari should be able to see this section, as it can handle the JavaScript and positioning
*/

html*#browse-all.browse-control:not(:empty) {
	display: none;
#}
<!--/* 0.0126923492286924 [10.89.198.136] */-->