@charset 'utf-8';
/* CSS Document */

/* RESETS */

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td {
	margin: 0;
	padding: 0;
	border: 0;
}
/* END RESETS */
/* CONTROL PAGE WIDTH HERE: */
#contentBox, #footerNavContainer {
	width:865px;
}
/* END CONTROL PAGE WIDTH */

html {
	min-height: 101%;
	margin-bottom: 1px;
}
/* the min-height and margin-bottom attributes on the HTML selector above add an empty scroll bar to the side of non-IE browsers so that a center-aligned design doesn't shift left when the user navigates to a long page, featuring a scrollbar.  IE already has the scroll bar built in */

body {
	margin:7px 25px;
}
/* #entirePage can be a DIV that centers the design, and applies any other top-level attributes that aren't appropriate for the BODY selector */
#entirePage {
	width:100%;
	text-align:center;
}
/* #outerFrame can be a table that houses image-based border corners and repeating background images for the sides, for an effect such as a drop shadow. */
#outerFrame {
	margin:auto;
}
.frameCorner {
	width:10px;
}
.frameTopBorder, .frameBottomBorder {
	background-repeat: repeat-x;
}
.frameLeftBorder, .frameRightBorder {
	background-repeat: repeat-y;
}
#outerFrame TD.frameTopBorder {
	background-image: url(/images/outerFrameTopBorder.gif);
}
#outerFrame TD.frameLeftBorder {
	background-image: url(/images/outerFrameLeftBorder.gif);
}
#outerFrame TD.frameRightBorder {
	background-image: url(/images/outerFrameRightBorder.gif);
}
#outerFrame TD.frameBottomBorder {
	background-image: url(/images/outerFrameBottomBorder.gif);
}
/* pageDesignCell, (a TD), and pageDesignBox, (a DIV within the TD), contain everything within the outermost border frame We use a TD and a DIV in case we need to layer single-option attributes, such as background images */
#pageDesignCell {
	background-color:#eaf5f7;
	border:1px solid #c9c5c5;
/*	background-image:url(/images/bottomGradient.gif);
*/	background-position:bottom;
	background-repeat:repeat-x;
}
#pageDesignBoxContainer {
	position:relative;
/*	background-image:url(/images/pageBackground.jpg);*/
	background-position:right top;
	background-repeat:no-repeat;
}
#pageDesignBox {
	padding:73px 33px 47px 33px;
}
/* ourLogo may contain a logo that sits on top of the page design (it should have the highest z-index, and should not overlap any movies).  We name it 'ourLogo' to be safe, because we think Amazon stores already have a 'Logo' id. */
#ourLogo {
	position:absolute;
	top:13px;
	left:12px;
	z-index:500;
	_left:-467px;/* the underscored styles are read by IE 6 only, which had been displaying the logo in the middle of the page */
}
#ourLogo IMG {
	border:0px;
}
#topHomeMenu {
	position:absolute;
	right:56px;
	top:42px;
}
#poweredByAmazon {
	position:absolute;
	right:43px;
	bottom:11px;
}
#contentBoxTopLeftCorner {
	position:absolute;
	left:33px;
	display:none;
	_left:-448px;
	_top: 73px;/* the underscored style is read by IE 6 only, which had been displaying the image in the middle of the page */
}
#contentBoxTopRightCorner {
	position:absolute;
	right:32px;
	_right:31px;/* the underscored styles are read by IE 6 only, which had been displaying the logo in the middle of the page */
	top:73px;
	display:none;
}
#contentBoxBottomLeftCorner {
	position:absolute;
	left:33px;
	bottom:47px;
	_left:-448px;
	_bottom:46px;/* the underscored styles are read by IE 6 only, which had been displaying the logo in the middle of the page */
	display:none;
}
#contentBoxBottomRightCorner {
	position:absolute;
	right:32px;
	_right:31px;
	bottom:47px;
	_bottom:46px;/* the underscored styles are read by IE 6 only, which had been displaying the logo in the middle of the page *//*	display:none;*/
}
#contentBoxOuterBorders {
	border:1px solid #010100;
	background-color:#026699;
	padding:14px;
}
A.articleLinks, A.articleLinks:visited {
	color:#062d9d;
	font-weight:bold;
	text-decoration:underline;
	font-size:12px;
	padding-left:14px;
}
A.articleLinks:hover, A.articleLinks:visited:hover {
	color:#01669a;
}
#contentBox {
	display:block; /*padding:50px;*/
	min-height:456px;
	background-color:#FFFFFF;
	border:1px solid #010100;
}
#contentBoxNavAndDate {
	margin-top:5px;
	border:1px solid #b2b2b2;
	border-left:0px;
	border-right:0px;
	height:17px;
	width:100%;
}
#ourDate TD {
	height:17px;
	vertical-align:middle;
}
iframe, DIV.nonarticlepage {
	margin-bottom:27px;
}
DIV.nonarticlepage {
	padding:30px 70px;
	text-align:left;
}
/* archives style */
DIV.excerpt {
	margin-bottom:15px;
}
H1.topHeader {
	margin-top:30px;
}
#footerNavContainer {
	position:absolute;
	bottom:67px;
	left:50px;
	_left:-439px;
}
#footerNav {
	width:100%;
}
/* PAGE-SPECIFIC STYLES */
#textContent {
	padding:30px 40px 50px;
	text-align:left;
}
#articlePage TD {
	padding:9px 18px 55px;
	text-align:left;
}
/* articleColumn, leftColumn, and rightColumn float left or right  */
#articleColumn {
	width:450px;
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding-right:27px;
	float:left;
	padding-top:14px;
}
#articleColumn UL {
	margin:15px;
}
#articleColumn LI {
	margin:7px 0px 7px 0px;
}
/* Change the color for the H1 to match the site. */
H1 {
	color:#485794;
	text-transform:uppercase;
	font-size:18px;
	margin-bottom:18px;
}
H2 {
	font-size:14px;
	color:#485794;
	text-transform:uppercase;
	margin-bottom:18px;
	font-weight:bold;
}
P {
	margin-top:10px;
	margin-bottom:10px;
}
#leftColumn {
	width:160px;
	padding-right:30px;
	float:left;
	padding-top:14px;
}
.leftColumnAd {
}
.leftColumnAd IMG {
	border:1px solid #b2b2b2;
	margin-top:4px;
}
#rightColumn {
	width:160px;
	float:right;
	text-align:center;
}
#adCategory {
	color:#bbbbbb;
	font-style:italic;
	font-weight:bold;
	height:12px;
	font-size:10px;
	text-transform:capitalize;
	letter-spacing:.1em;
	padding-top:4px;
	text-align:center;
}
#storePage {
	padding:23px 5px 4px 7px;
	height:100%;
}
#storePage DIV {
	border:1px solid #999999;
	float:left;
	/*	display:inline-block;*/
	margin:0px 3px 3px 0px;
}
#storePage DIV IMG {
	border:0px;
}
#photoPanel1 {
}
#photoPanel2 {
}
#photoPanel3 {
}
#photoPanel4 {
}
#photoPanelMain {
}
/* The HTML for the brand page sets up the brand images each within its own table, within its own div, within a master table.  The divs float left, so the layout is flexible for when the page gets wider, or if the brand images should get smaller.  Floating divs produced the desired layout in IE, which would not put the "inline-block" elements inline, while inline-block divs produced the desired layout in FireFox, which would not increase the height of the contentBox for extra content--only the height of the pageDesignCell, which is a TD.  To make it work on both browsers, I put all the divs inside a master table (#brandPage), so the table, which would grow with extra divs, would stretch the contentBox div longer. The single-cell tables inside each div are there to apply a vertical-align:middle style, which won't work on an element other than a TD. */
#brandPage {
	margin:5px 0px 28px;
	border:0px;
	padding:0px;
	width:100%;
}
#brandPage TD {
	vertical-align:middle;
	text-align:center;
	padding:5px;
}
#brandPage DIV {
	border:1px solid #cccccc;
	float:left;
	display:table-cell;
	margin:2px;
	text-align:center;
	vertical-align:middle;
	width:207px;
	height:72px;
}
#brandPage TABLE {
	border:0px;
	width:100%;
	height:100%;
}
#brandPage IMG {
	border:0px;
	margin:auto;
}
/* END PAGE-SPECIFIC STYLES */

/* STYLES USED BY AMAZON SELLER CENTRAL -- should we replace these?  I'd like to avoid using hyphens or underscores in class and id names so as not to get into a mess with javascript later on. */
#top-navigation {
}
.topNav {
}
.navDots {
}
/* LEFT NAVIGATION ARTICLE PAGES */

.leftNavMenuItem DIV.header {
	border-color:#333333;
	background-color:#01669a;
	color:#fbfbfa;
}
.leftNavMenuItem DIV.header a:link, .leftNavMenuItem DIV.header a:visited {
	color: #fbfbfa;
	text-decoration:none;
}
.leftNavMenuItem DIV {
	display:block;
	padding:3px 6px 3px 6px;
	text-transform:capitalize;
	font-size:14px;
	border : 1px solid #afafaf;
	border-bottom-color:#595959;
	width:146px; /* 146px plus 2x6px padding plus 2x1px border = 160px total, matching leftColumn */
	margin-bottom : 0px;
}


.nav DIV /* these are the DIVs with menu links in them */ {
	background-color:#cbd8ba;
	color:#585858;
	font-size:12px;
}
.nav LI LI DIV /* This applies to the DIVs for the second tier of menu items, (the first ones that branch to the right) */ {
	background-color:#dee7d2;
}
.nav LI LI LI DIV/* This applies to the DIVs for the third tier of menu items */, .nav LI LI.topLevelArticle DIV /* This applies to the DIVs for the second tier of menu items that contain article links instead of subcategories. */ {
	background-color:#eff79a;
}
.nav DIV:hover, .nav LI LI DIV:hover {
	/*	We create the highlight using a background image so we can save background color to affect the selected menu item trail.  QUESTION: Why does the top-tier highlight disappear when I remove the .nav LI LI DIV:hover selector? */
	background-image:url(/images/menu-highlight-bg.gif);
	background-repeat:repeat;
	color:#585858;

}






/* Testing ground for keeping third tier menu items yellow in background on hover, and with bold text */
.nav LI LI LI DIV:hover {
	background-color:#eff79a;}

.nav LI LI LI DIV a:hover {color:#000000;	/*font-weight:bold;*/}


/* END testing ground */






.menuArrow /* This is a class for a span containing an arrow character.  This HTML element is present for all parent categories based on php instructions, but it is hidden by default */{
	position:absolute;
	right:0px;
	display:none;
}


.nav LI:hover DIV .menuArrow /* any menu item containing an arrow or child list with arrows shows the arrow on hover of the list item or parent list item */{
	display:inline;
}
.nav LI LI DIV .menuArrow /* second tier items not hovered get arrow hidden by zero font size */{
font-size:0px;

}
.nav LI LI:hover DIV .menuArrow /* second tier items show arrow via inherited font size on hover */{
	font-size:inherit;
}

.nav LI LI:hover DIV /* second tier menu items light up via a background image on hover of themselves or their children, since the children ARE part of their LI */{
	background-image:url(/images/menu-highlight-bg.gif);
	background-repeat:repeat;
}
.nav LI LI:hover LI DIV /* children of second-tier LI get background-image highlight removed*/{
	background-image:none;
}

.nav LI LI DIV:hover /* children of second-tier LI get highlight via background color on hover */{
	background-image:none;
	background-color:#f3f5e1;
}
/*********** Suckerfish **************/

#leftColumn LI, /* Ruth added this top level list which contains the headers, which are not linked */ .nav, .nav ul { /* all lists */
	padding: 0px;
	margin: 0px;
	list-style: none;
	float : left;/*	width : 11em;*/ /* we don't need to set this width like Suckerfish does, since we have the width defined by the containing DIV */
}
.nav li { /* all list items */
	position : relative;
	float : left;
	line-height : 1.25em;
	margin-bottom : -1px;/*	width: 11em;*/ /* we don't need to set this width like Suckerfish does, since we have the width defined by the containing DIV */
}
.nav li ul { /* second-level lists */
	position : absolute;
	left: -999em;
	margin-left:159px; /*(setting this to the width of the parent with one of its borders puts it flush against the right side of the parent, letting the right border of the parnet overlap with the left border of the child)*/
	margin-top:-23px; /* setting this to the height of the parent DIV + its border and margin keeps the second-level menu item at the same vertical position as its parent */
}
.nav li ul ul { /* third-and-above-level lists */
	left: -999em;
}
.nav li a {
	text-decoration:none;/*	background-color:#cbd8ba;
	color:#585858;
	width: 11em;
	w\idth : 10em;
	display : block;
	border : 1px solid black; *//* Ruth wants these attributes set for the surrounding DIV, not the link itself.  We should look up what the w\idth is for */
}
.nav li a:hover {
/*	background-color:#ebeecc;
	color:#585858;*/
}
.nav li:hover ul ul, .nav li:hover ul ul ul, .nav li.sfhover ul ul, .nav li.sfhover ul ul ul {
	left: -999em;
}
.nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li.sfhover ul, .nav li li.sfhover ul, .nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}
#content {
	margin-left : 12em;
}