#navigationC {border:none; text-align:left; font-family:Arial, Helvetica, sans-serif; width:150px; font-size:small; margin-top:5px; float:left; }
#navigationB {border:none; text-align:left; font-family:Arial, Helvetica, sans-serif; width:150px; font-size:small; margin-top:5px;  }
#navigationB li {background-color:#fff; border-bottom:1px solid #ccc; border:none;}
#navigationB ul {background-color:#fff; text-align:left; margin:0px; padding:2px; border-bottom:none; background-image:url(gray_gradientgif.gif); background-position:bottom; background-repeat:repeat-x; font-size:10px; font-weight:bold; text-transform:uppercase; color:#666; }
#navigationB a {text-decoration:none; color:#666;}
#navigationB a:hover {color:#000;}


#navigation {border:none; text-align:left; font-family:Arial, Helvetica, sans-serif;  width:150px; font-size:small; margin-top:5px; float:left; }
/*#navigation li {background-color:#fff; border-bottom:1px solid #ccc; border:none;}
#navigation ul {background-color:#fff; text-align:left; margin:0px; padding:2px; border-bottom:none; background-image:url(gray_gradientgif.gif); background-position:bottom; background-repeat:repeat-x; font-size:10px; font-weight:bold; text-transform:uppercase; color:#666; border-left:1px solid #ffbe01; border-right:1px solid #ffbe01;}*/
#navigation a {text-decoration:none; color:#666;}
#navigation a:hover {color:#000;}


#topnav {color:#fff; width:700px; text-align:right; float:right; font-size:70%; font-weight:bold; }
#topnav a {color:#fff; text-decoration:none;}
#topnav a:hover {color:#000; text-decoration:underline; }

#heading {background-color:#ffbe01; color:#FFF;  float:left; width:150px; font-weight:bold; clear:both; padding:0px; margin-top:5px; background-image:url(tab_background.gif); background-repeat:no-repeat; background-position:top;}

#heading h3 {padding:4px 3px 2px 5px; font-size:90%; font-stretch:condensed; margin-bottom:0px;}


body {font-family: Arial, Helvetica, sans-serif; font-size:medium; margin:0px;}
h1 {
	font-size:120%;
	margin-bottom:3px;
	color:#ffbe01;
}
h2 {font-size:100%; margin-bottom:2px; color:#666;}
h3 {font-size:75%; margin-bottom:2px;}
h2,.color_name, body {color:#666;}
ul {margin-left:2px;}
li {margin-left:15px;}


#thumbs {float:left; width:100%; vertical-align:top;  text-align:center; padding-top:0px; padding-bottom:5px; border-bottom:1px solid #ffbe01;  margin-top:10px;} 
#thumbs_label { width:100%; text-align:left; padding-left:10px;}
#thumbs_phto { width:120px; padding-left:20px; text-align:left; margin-left:10px; float:left;}
#thumbs_desc { width:140px; padding-top:10px; color:#666;  font-size:75%; text-align:left; float:left; margin-left:15px; }
#thumbs_prc { width:250px; padding:10px; padding-top:12px; color:#666; vertical-align:middle; font-weight:bold; margin:auto; text-align:center; float:left; }
#thumbsRight { width:150px; text-align:center; padding:10px; float:left; }



#prcCont {float:right; padding:0px; padding-left:0px;  width:100%; text-align:left;}
#prcTable {width:100%; font-size:10px; text-align:center; border:1px solid #003399; margin:auto;}
#prcTableQtyRow {background-color:#003399; color:#FFF; }
#prcTablePrcRow {border-bottom:1px solid #003399; font-size:12px; font-weight:bold;}


#iconsCont {float:right; padding:0px;  width:100%; text-align:center;}



#btnCont {width:100%; text-align:left; border-bottom:1px solid #ffbe01; padding-bottom:5px; margin-bottom:5px;}
#btnPage a {background-image:url(button_bg_gray.gif); background-position:left; background-repeat:no-repeat; height:18px; border:1px solid #666; font-size:11px; text-align:center; padding-left:17px; padding-top:2px; font-weight:bold; color:#666; vertical-align:middle; text-decoration:none; display: block; width:111px; margin:auto; margin-top:2px; float:left; margin-right:2px;}

#btnPage a:hover {background-image:url(button_bg_orange.gif); background-position:left; background-repeat:no-repeat; border:1px solid #ffbe01;  font-weight:bold; color:#fff; vertical-align:middle;  }

#btnPage2 a {background-image:url(button_bg_gray.gif); background-position:left; background-repeat:no-repeat; height:18px; border:1px solid #666; font-size:11px; text-align:center; padding-left:17px; padding-top:2px; font-weight:bold; color:#666; vertical-align:middle; text-decoration:none; display: block; width:160px; margin:auto; margin-top:2px; float:left; margin-right:2px;}

#btnPage2 a:hover {background-image:url(button_bg_orange.gif); background-position:left; background-repeat:no-repeat; border:1px solid #ffbe01;  font-weight:bold; color:#fff; vertical-align:middle;  }


#ppage_container {margin:auto; margin-left:3px; width:795px; float:right;  padding:5px; z-index: 500 }
#ppage_left_col {width:48%;	float:left;}
#ppage_right_col {width:50%; float:right; }


#identity,  {border-color:#ffbe01;}


#detail {margin-top:40px;}

#attributes, #at_a_glance table {border-color:#999; }

#content, #localbranding {width:1050px;}

#attributes { margin:auto; float:left; margin-top:10px; }

#content {margin:auto; margin-top:0px; padding-top:0px}
#identity {float:left; border-bottom:1px solid ; margin-bottom:3px; margin-top:10px; width:100%; clear:both;}
#at_a_glance {width:30%; float:left; font-size:small;}
#prod_phto {float:left;	width:100%;	padding-bottom:15px;	text-align:center;}
#prod_clrs {float:right; padding-left:5px; margin-bottom:10px;  width:100%;}



.color_cell {height:20px; width:20px; }
.color_name {height:20px;  padding-left:5px;  font-size:10px; font-weight:bold;  vertical-align:middle; padding-top:0px;}

#footer_text a{text-decoration:underline; color:#999}
#footer_text a:hover{text-decoration:underline; color:#333}


#branding {width:100%; height:40px;  background-color:none; margin:0px; padding:5px; margin-bottom:0px; border-bottom:4px solid #ffbe01; border-bottom:1px solid #0068b3;}

#localbranding {margin:auto; }

#footer {width:100%;  background-color:#fff; margin:auto; padding:10px; margin-top:10px; border-top:0px solid #eee; font-size:x-small; text-align:center;}

#pricetag {background-image:url(color_blocks/price_tag.gif); width:148px; height:78px;  background-repeat:no-repeat; color:#039; margin-top:25px;}
.aslowasprice { height:30px; width:70px; margin-left:63px; margin-top:40px; font-size:24px; text-align:center; font-weight:bold; }

.lowasprice {background-color:#febe01; background-color:#0068b3; margin-top:10px; margin-bottom:10px;  width:128px; font-size:24px; text-align:center; font-weight:bold; color:#00C; border:1px solid #00c;}

#PriceBlockTab {background-color:#ddd; border-bottom:1px solid; font-size:x-small;}

#at_a_glance table {text-align: center; border:1px solid;}
	
#prod_clrs, #identity, #PriceBlockTab {border-color:#ffbe01;}
	

/*
#ppage_right_col, #prod_clrs, #identity, #at_a_glance, #prod_phto  #navigationC, #ppage_right_col, #ppage_left_col, #ppage_container, .prod_phto, {border:1px solid #6F3;}
*/


	
	@charset "UTF-8";

/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
 LAYOUT INFORMATION: describes box model, positioning, z-order
 *******************************************************************************/
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 80%;
	cursor: default;
	width: 148px;
	
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 148px;
	border-bottom:1px solid #ccc;
	
	
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
	margin: -5% 0 0 95%;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: absolute;
	z-index: 1020;
	cursor: default;
	width: 148px;
	left: -1000em;
	top: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
	width: 100%;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
	border: 1px solid #ffbe01; 
	border-top: none;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
	border: 1px solid #ffbe01;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
	display: block;
	cursor: pointer;
	background-color: #eeeeee;
	background-image:url(gray_gradientgif.gif);
	background-repeat:repeat-x;
/*	padding: 0.2em 0.3em;*/
	padding: 2px 3px;
	color:#000;
	text-decoration: none;
	text-transform:capitalize;
	
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{	
	background-color:#666;
	background-image:url(drkgray_gradient_no_arrow.jpg);
	color: #FFF;
	
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
	background-color:#eee;
	color: #FFF;
	
	
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{	
	
	background-image:url(gray_gradient_right_arrow.jpg);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	
	
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
	background-color:#ccc;
	/*background-image: url(SpryAssets/SpryMenuBarRightHover.gif);*/
	background-image:url(gray_gradient_white_arrow.jpg);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarVertical li.MenuBarItemIE
	{
		display: inline;
		float: left;
		background: #FFF;
	}
}






/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* Horizontal Tabbed Panels
 *
 * The default style for a TabbedPanels widget places all tab buttons
 * (left aligned) above the content panel.
 */

/* This is the selector for the main TabbedPanels container. For our
 * default style, this container does not contribute anything visually,
 * but it is floated left to make sure that any floating or clearing done
 * with any of its child elements are contained completely within the
 * TabbedPanels container, to minimize any impact or undesireable
 * interaction with other floated elements on the page that may be used
 * for layout.
 *
 * If you want to constrain the width of the TabbedPanels widget, set a
 * width on the TabbedPanels container. By default, the TabbedPanels widget
 * expands horizontally to fill up available space.
 *
 * The name of the class ("TabbedPanels") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabbedPanels container.
 */
.TabbedPanels {
	margin: 0px;
	padding: 0px;
	float: left;
	clear: none;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

/* This is the selector for the TabGroup. The TabGroup container houses
 * all of the tab buttons for each tabbed panel in the widget. This container
 * does not contribute anything visually to the look of the widget for our
 * default style.
 *
 * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabGroup container.
 */
.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the TabbedPanelsTab. This container houses
 * the title for the panel. This is also the tab "button" that the user clicks
 * on to activate the corresponding content panel so that it appears on top
 * of the other tabbed panels contained in the widget.
 *
 * For our default style, each tab is positioned relatively 1 pixel down from
 * where it wold normally render. This allows each tab to overlap the content
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom
 * border that has a color that matches the top border of the current content
 * panel. This gives the appearance that the tab is being drawn behind the
 * content panel.
 *
 * The name of the class ("TabbedPanelsTab") used in this selector is not
 * necessary to make the widget function. You can use any class name you want
 * to style this tab container.
 */
.TabbedPanelsTab {
	position: relative;
	top: 1px;
	float: left;
	padding: 4px 10px;
	margin: 0px 1px 0px 0px;
	font: bold 0.7em sans-serif;
	background-color: #eee;
	list-style: none;
	border-left: solid 1px #fff;
	border-bottom: solid 1px #ffbe01;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	color:#999;
	max-width: 111px;
}

/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.TabbedPanelsTabHover {
	background-color: #ffbe01;
	color: #FFFFFF;
	border-left: solid 1px #ffbe01;
	border-bottom: solid 1px #ffbe01;
	border-top: solid 1px #ffbe01;
	border-right: solid 1px #ffbe01;
}

/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.TabbedPanelsTabSelected {
	background-color: #ffbe01;
	border-left: solid 1px #ffbe01;
	border-bottom: solid 1px #ffbe01;
	border-top: solid 1px #ffbe01;
	border-right: solid 1px #ffbe01;
	color: #ffffff;
}

/* This selector is an example of how to make a link inside of a tab button
 * look like normal text. Users may want to use links inside of a tab button
 * so that when it gets focus, the text *inside* the tab button gets a focus
 * ring around it, instead of the focus ring around the entire tab.
 */
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
 * all of the content panels for each tabbed panel in the widget. For our
 * default style, this container provides the background color and borders that
 * surround the content.
 *
 * The name of the class ("TabbedPanelsContentGroup") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the ContentGroup container.
 */
.TabbedPanelsContentGroup {
	clear: both;
	border-left: solid 1px #ffbe01;
	border-bottom: solid 1px #ffbe01;
	border-top: solid 1px #ffbe01;
	border-right: solid 1px #ffbe01;
	background-color: #fff;
}

/* This is the selector for the Content panel. The Content panel holds the
 * content for a single tabbed panel. For our default style, this container
 * provides some padding, so that the content is not pushed up against the
 * widget borders.
 *
 * The name of the class ("TabbedPanelsContent") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the Content container.
 */
.TabbedPanelsContent {
	padding: 10px; font-size:10px;
}

/* This selector is an example of how to change the appearnce of the currently
 * active container panel. The class "TabbedPanelsContentVisible" is
 * programatically added and removed from the content element as the panel
 * is activated/deactivated.
 */
.TabbedPanelsContentVisible {
}

/* Vertical Tabbed Panels
 *
 * The following rules override some of the default rules above so that the
 * TabbedPanels widget renders with its tab buttons along the left side of
 * the currently active content panel.
 *
 * With the rules defined below, the only change that will have to be made
 * to switch a horizontal tabbed panels widget to a vertical tabbed panels
 * widget, is to use the "VTabbedPanels" class on the top-level widget
 * container element, instead of "TabbedPanels".
 */

/* This selector floats the TabGroup so that the tab buttons it contains
 * render to the left of the active content panel. A border is drawn around
 * the group container to make it look like a list container.
 */
.VTabbedPanels .TabbedPanelsTabGroup {
	float: left;
	width: 10em;
	height: 20em;
	background-color: #EEE;
	position: relative;
	border-top: solid 1px #ffbe01;
	border-right: solid 1px #ffbe01;
	border-left: solid 1px #ffbe01;
	border-bottom: solid 1px #ffbe01;

}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTab {
	float: none;
	margin: 0px;
	border-top: none;
	border-left: none;
	border-right: none;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: solid 1px #999;
}

/* This selector floats the content panels for the widget so that they
 * render to the right of the tabbed buttons.
 */
.VTabbedPanels .TabbedPanelsContentGroup {
	clear: none;
	float: left;
	padding: 0px;
	width: 30em;
	height: 20em;
}