﻿@import url("");

ul.clean
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

body
{
    background-image: url(/Images/background.gif);
    background-color:#04315e;/* #084F78;*/
    /*background-repeat: no-repeat;*/
    background-repeat: repeat-x;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .75em;
    margin:0px;
}

p
{
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top:1px;
}

#HeaderWrapper 
{
    /*background-image:url('/Images/Menu/top_tile.jpg');
    background-repeat: repeat-x;*/
    width:100%;
    margin: 0 auto;
    text-align: left;
    z-index:1000;
    padding: 0px;
}

#Wrapper 
{
    width: 1230px;
    margin: 0 auto;
    text-align: left;
    padding: 0px;
}

#TopNav
{
    width: 1230px;
    margin: 0 auto;
    z-index:1000;
}

#LeftGutter
{
    width: 220px;
    float: left;
    margin: 0px;
    padding: 0px; 
}

#Body
{
    width: 990px;
    float: right;
    margin: 0px;
    padding: 0px;
}

#LeftBody
{
    width: 730px;
    float: left;
    margin: 0px;
    padding: 0px; 
}

#RightBody
{
    width: 230px;
    float: right;
    margin: 0px;
    padding: 0px;
}

#BottomBody
{
    clear: both;
    margin: 0px;
    padding: 0px;
}

h1.SectionHeader
{
    font-size: 1.25em;
    font-weight: bold;
    padding: 0px 0px 3px 0px;
    margin: 0px;
    color:#19324B;    
}

h2.SectionHeader
{
    font-size: 1.25em;
    font-weight: bold;
    padding: 0px 0px 3px 0px;
    margin: 0px;
    color:#19324B;    
}

h2.SectionHeader a:link    {color: #FFF; text-decoration:none;}
h2.SectionHeader a:visited {color: #FFF; text-decoration:none;}
h2.SectionHeader a:hover   {color: #999; text-decoration:none;}
h2.SectionHeader a:active  {color: #FFF; text-decoration:none;}

h2.SectionHeader img
{
    border: 0px;
}

div.SectionHeader a:link    {color: #FFF; text-decoration:none;}
div.SectionHeader a:visited {color: #FFF; text-decoration:none;}
div.SectionHeader a:hover   {color: #FFF; text-decoration:none;}
div.SectionHeader a:active  {color: #FFF; text-decoration:none;}


div.SectionHeader img {border:0px;}

div.SectionHeader
{
    padding: 0px;
    margin: 0px;
}

h1.Information
{
    font-size: 1.25em;
    font-weight: bold;
    padding: 0px 0px 3px 0px;
    margin: 0px;
    color:#19324B;    
}

h2.Information
{
    font-size: 1.25em;
    font-weight: bold;
    padding: 0px 0px 3px 0px;
    margin: 0px;
    color:#19324B;    
}

h2.Information a:link    {color: #19324B; text-decoration:none;}
h2.Information a:visited {color: #19324B; text-decoration:none;}
h2.Information a:hover   {color: #19324B; text-decoration:none;}
h2.Information a:active  {color: #19324B; text-decoration:none;}

h2.Information img
{
    border: 0px;
}

div.Information a:link    {color: Black; text-decoration:none;}
div.Information a:visited {color: Black; text-decoration:none;}
div.Information a:hover   {color: Black; text-decoration:none;}
div.Information a:active  {color: Black; text-decoration:none;}

div.Information img {border:0px;}

div.Information
{
    padding: 0px;
    margin: 0px;
}

hr.short
{
    padding: 0;
    margin: 0px 0px 0px 0px;
}

.hr 
{
    border: 0px;
    width: 100%;
    color: #222;
    background-color: #222;
    height: 1px;
    overflow:hidden;
}

h2.RedGutter
{
    font-size: 1.25em;
    font-weight: bold;
    color:#C80000;
    padding: 8px 0px 3px 0px;
    margin: 0px;
}

h2.RedGutter a:link    {color: #C80000; text-decoration:none;}
h2.RedGutter a:visited {color: #C80000; text-decoration:none;}
h2.RedGutter a:hover   {color: #C80000; text-decoration:none;}
h2.RedGutter a:active  {color: #C80000; text-decoration:none;}

div .ItemContent
{
    width: 665px;
    position:relative;
    float:left;
    margin: 0px;
    padding: 0px;
}

div .ItemContent_Op1
{
    width: 700px;
    position:relative;
    float:left;
    margin: 0px;
    padding: 0px;
}

div .ItemImage
{
    position:relative;
    float:right;
    margin:0px;
}

div.Rounded,
div.LeftGutterWidget,
div.ContentSliderWidget,
div.LeftGutterGreyWidget,
div.ContentSliderWidget_Op1,
div.ContentSliderWidget_Op2
{
    background-color:White;
    padding:10px;
    position:relative;
    margin:20px 0px 20px 0px;
}

div.ContentSliderWidget
{
    overflow:hidden;
    width:720px;
    height:551px;
}

div.ContentSliderWidget_Op1
{
    overflow:hidden;
    width:720px;
    height:429px;
}

div.ContentSliderWidget_Op2
{
    overflow:hidden;
    width:980px;
    height:200px;
}

div.RoundedContentHolder
{
    background-color:White;
    position:relative;
    margin:20px 0px 20px 0px;
    font-size:13px;/*Added for size increase*/
}

div.RoundedContentHolder li /*Added for size increase*/
{
    padding:1px;
}

div.RoundedContentHolder p /*Added for size increase*/
{
    line-height:17px;
}

div.ContentHolder
{
    padding:10px;
}

div.LeftGutterWidget
{
    width:200px;
}


div.LeftGutterGreyWidget
{
    width: 200px;
    background-color: #EEEEEE;
}

.WaterMarkedTextBox
{
    width: 130px;
    color: gray;
}

.NormalTextBox
{
    width: 130px;
    color: Black;
}

.title {
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
display: block;
margin: 17px 0 5px 0;
}

.contentText {
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

#LoginWidget 
{
    background-image:url('/images/Menu/login_background.jpg'); 
    position: absolute; 
    left: 785px; 
    width: 258px; 
    height: 95px; 
    top: 99px;
    color: #FFFFFF;
    font-size:15px;
}

#LoginWidget table
{
    margin: 3px 7px 7px 7px;
    border: 0px;
    border-collapse: collapse;
}

#LoginWidget a:link    {color: #FFFFFF; text-decoration:none; font-size:10px;}
#LoginWidget a:visited {color: #FFFFFF; text-decoration:none; font-size:10px;}
#LoginWidget a:hover   {color: #FFFFFF; text-decoration:none; font-size:10px;}
#LoginWidget a:active  {color: #FFFFFF; text-decoration:none; font-size:10px;}

.important
{
    color:Red;
}

#ProductTabs a
{
    padding: 3px 0px 3px 0px;
    font-size:15px;
    display:block;
}
#ProductTabs a:link    {color: #000; text-decoration:none; font-size:14px;}
#ProductTabs a:visited {color: #000; text-decoration:none; font-size:14px;}
#ProductTabs a:hover   {color: #000; text-decoration:none; font-size:14px;}
#ProductTabs a:active  {color: #000; text-decoration:none; font-size:14px;}

table.Data
{
    border-collapse:collapse;
}
table.Data td,table.Data th
{
    border:1px solid black;
    padding: 3px;
}

table.Data td {width:478px;}

table.noBorder
{
    border-collapse:collapse;
}
table.noBorder td,table.noBorder th
{
    border:0px;
    padding: 0px;
}

table.Data th
{
    padding:10px;
    font-size:1.3em;
}

table.show_design_border
{
    border-collapse:collapse;
}
table.show_design_border td,table.show_design_border th
{
    border:1px solid black;
}

ul.TaxonomyList li
{
     margin-left:10px;
}

ul.TaxonomyList
{
    list-style:none; 
    padding-left:0px;
}

span.gray
{
    color: #555555;
}

a.BlackLink:link    {color: #000; text-decoration:none;}
a.BlackLink:visited {color: #000; text-decoration:none;}
a.BlackLink:hover   {color: #000; text-decoration:none;}
a.BlackLink:active  {color: #000; text-decoration:none;}

a.BlackUnderlineLink:link    {color: #000;}
a.BlackUnderlineLink:visited {color: #000;}
a.BlackUnderlineLink:hover   {color: #000;}
a.BlackUnderlineLink:active  {color: #000;}

a.CleanLink:link    {text-decoration:none;}
a.CleanLink:visited {text-decoration:none;}
a.CleanLink:hover   {text-decoration:none;}
a.CleanLink:active  {text-decoration:none;}

h1.fontLarge {font-size:large;font-weight:bold;}
h2.fontLarge {font-size:large;font-weight:bold;}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    padding: 0px;
}

img.ProductGrid {
    margin-top: auto;
    margin-bottom: auto;
    max-width:172px;
    max-height:140px;
    border:0px;
}

div.ProductGridLeft {
    width:170px;
    height:174px;
    position:relative;
    float:left;
    margin:5px 5px 5px 0px;
}

div.ProductGridMiddle {
    width:170px;
    height:174px;
    position:relative;
    float:left;
    margin:5px 5px 5px 5px;
}

div.ProductGridright {
    width:170px;
    height:174px;
    position:relative;
    float:left;
    margin:5px 0px 5px 5px;
}

div.ProductRelatedMiddle {
    width:296px;
    position:relative;
    float:left;
    min-height:200px;
    margin:0px 20px 20px 20px;
}

div.ProductRelatedEdge {
    width:297px;
    position:relative;
    float:left;
    min-height:200px;
    margin:0px 0px 20px 0px;
}

/*Menu CSS*/
a.ProductQuickLink:link,a.ProductQuickLink:visited
{
    background-image: url('/Images/gray-bar-tile.jpg');
    background-repeat: repeat-x;
    height:25px;
	font-weight: bold;
	color: #0055A5;
    text-decoration:none;
    display:block;
    padding:5px 26px 0px 25px;
}

a.ProductQuickLink:hover, a.ProductQuickLink:active {
	background-image: url('/Images/gray-bar-tile-over.jpg');
	background-repeat: repeat-x;
	color: #004B7D;   
    text-decoration:none;
}

.DistributorRadio label, input.radio{
  font-size:45px; 
  vertical-align:middle;
}

div.ProductQuickLinks
{
    width:980;
    height:30px;
    background-image:url(/Images/gray-bar-tile.jpg);
}

div.ProductQuickLinks div
{
    height:30px;
    float:left;
}


/*Spry Tabbed Product Page***************************************************************/
.TabbedPanels {
	width: 990px;
	margin: 20px 0px 0px 0px;
	padding: 0px;
	float: left;
	clear: none;
	/*width: 100%;  IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

.TabbedPanelsTab {
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	background-image: url(/Images/ProductTabs/product_tab_2.png);
	width:104px;
	height:17px;
	position: relative;
	top: 1px;
	float: left;
	padding: 4px 10px;
	margin: 0px 0px 0px 0px;
	font-size:1em;
	font-weight:bold;
	list-style: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
}

.TabbedPanelsTabHover {
	background-image: url(/Images/ProductTabs/product_tab_over_2.png);
	background-color:Transparent;
}
.TabbedPanelsTabSelected {
	background-image: url(/Images/ProductTabs/product_tab_on_2.png);
	background-color:Transparent;
}

.TabbedPanelsContentGroup
{
    background-color:White;
    border-style:none;
    background-image:url(/Images/ProductTabs/product_body_tile.png);
    clear: both;
    font-size: 13px;/*Added for size increase*/
}

.TabbedPanelsContentGroup li { /*Added for size increase*/
    padding:1px;
}

.TabbedPanelsContentGroup p { /*Added for size increase*/
    line-height:17px;
}

.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}

.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
}


.TabbedPanelsContent {
	padding: 10px;
}

.TellUseHowWeAreDoingWidget{
    height:245px;
    overflow:hidden;
}

/*Menu CSS*/
#MenuBar li a.MenuBarTop 
{
    background-image: url('/images/Menu/topnav_tile.jpg');
    background-repeat: repeat-x;
	height:20px;
	font-size:1.2em;
	font-weight: bold;
	text-align: center;
	color: #0055A5;
}

#MenuBar a.MenuBarTop:hover, #MenuBar a.MenuBarTop:focus {
	background-image: url('/images/Menu/topnav_over.jpg');
	background-repeat: repeat-x;
	color: #004B7D;
}

#MenuBar ul li a{
	background-color:#E1E1E1;
    color: #0055A5;
    border-width: 1px;
    border-style: solid;
    border-color: #999999;
    text-align: left;
}

#MenuBar ul li a:hover{
    color: #004B7D;
    background-color: #9CD2F6;
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
}

/* SpryMenuBarHorizontal.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, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
}
/* 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 a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: center;
	cursor: pointer;
	width: 240px;/*8.2em;*/
	float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 240px;/*WBH 8.2*/
	position: absolute;
	left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 240px;/*20em;/*WBH 18*/
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
/*ul.MenuBarHorizontal ul
{
	border: 1px solid #CCC;
}*/
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #EEE;
	padding: 10px 10px;
	color: #333;
	text-decoration: none;
}
/*WBH Added*/
ul.MenuBarHorizontal ul a
{
	padding: 3px 3px;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #33C;
	color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #33C;
	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.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(/Images/Menu/SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* 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.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(/Images/Menu/SpryMenuBarRight.gif);
	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.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(/Images/Menu/SpryMenuBarDownHover.gif);
	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.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(/Images/Menu/SpryMenuBarRightHover.gif);
	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.MenuBarHorizontal 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.MenuBarHorizontal li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
}
