/* -------------------------------------------------------

   Filename: layout-design.css

   Description: Template Styles

   Version: v1.0.0 (Novemeber 2009)

   Website: www.hartandcooley.com

   Authoer: Walter S.

-------------------------------------------------------

------------------------------------------------------- */


hr.clear
{
	display:block;
	clear:both;
	visibility:hidden;
	height:0;
	border-width:0;
	margin:0;
	padding:0;
}

sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

html { background:#171516; }

* a
{
	outline: none !Important; 
}

body *,
body
{
	/* Font Styles: -> layout-fonts.css */				
}

/* Used to Center Entire Site */	
.centerContainer
{
	margin: 0px auto;	
	text-align: left;
	width: 966px;
}

/* DHTML DropDown Menu */
.topNavigation
{
	display: block;
	height: 30px;	
	overflow: visible;
	position: relative;	
	z-index: 999;
}

	ul.dropdown
	{
		position: relative; 
	}
	
		/* First Level */
		ul.dropdown li
		{ 		
			/* Background: -> layout-skin.css */
			/* Font Styles: -> layout-fonts.css */	
			float: left; 
			zoom: 1; 
			height: 30px;	
			padding-right: 15px;			
		}
		
			/* Used for H&C Corporate Website Links */
			/* Added: Dec 29, 2009 */
			ul.dropdown li.alignTopRight	
			{
				background-position: left;
				float: right;
				padding-left: 15px;
				padding-right: 0px;
			}
			
			/* First Level: Hover Effects */
			ul.dropdown a:hover {}
		
			ul.dropdown a:active {}

			/* First Level Positioning */
			ul.dropdown li a
			{
				/* Font Styles: -> layout-fonts.css */	
				 display: block; 
				 height: 22px;
				 padding-top: 8px;
				 padding-left: 5px;
				 padding-right: 5px;
			}
		

		ul.dropdown li:last-child a
		{ 
			border-right: none; /* Doesn't work in IE */
		} 
		
		ul.dropdown li.hover,
		ul.dropdown li:hover
		{ 
			position: relative; 
		}
		
		
		ul.dropdown li.hover a
		{
			/* Font Styles: -> layout-fonts.css */			 
		}

		/* Second Level */
		ul.dropdown ul
		{ 			
			border-top: 1px solid #ccc;	
			width: 200px; 
			visibility: hidden; 
			position: absolute; 
			top: 100%; 
			left: 0px; 
			margin-top: -1px;
			margin-left: 0px !Important;		
		}
			
			ul.dropdown ul li 
			{
				/* Font Styles: -> layout-fonts.css */
				height: auto;
				background: #f6f6f6; 
				border-left: 1px solid #ccc;			
				border-right: 1px solid #ccc;			
				border-bottom: 1px solid #ccc;			
				float: none; 
				padding: 0px;		
				margin-left: 0px !Important;		
			}
										  
				/* IE 6 & 7 Needs Inline Block */
				ul.dropdown ul li a
				{
					/* Font Styles: -> layout-fonts.css */
					border-right: none; 
					width: 100%; 
					display: inline-block; 
				} 
				
				ul.dropdown ul li.subMenu
				{
					/* Background: -> layout-skin.css */
				}
				
		/* Third Level */
		ul.dropdown ul ul
		{ 
			left: 100%; 
			top: 0; 
		}

			ul.dropdown li:hover > ul 
			{
				visibility: visible; 
			}

							
		.homepageContainer .header
		{
			height: 142px;
			position: relative;
		}
		
		.internalContainer .header
		{
			height: 109px;
			position: relative;
		}
		
	/* Header Wrapper & Element Styles 	*/
	.header .logo
	{	
		float: left;
		padding: 4px 0 0 7px;		
	}
							
	.header .search 
	{
		display: block;
		overflow: hidden;
		position: absolute;
		right: 0px;	
		top: 25px;
		height: 33px;						
		width: 255px;
	}
	
		/* Offset the Header Search Boxer on Internal Pages */
		.internalContainer .header .search
		{
			right: 15px;
		}

		.header .search .search-form
		{							
			background: url('/App_Themes/Commerical Products Group/Images/backgrounds/search-bg.jpg') transparent no-repeat left top;
			height:28px;
			padding:5px 0 0 0;
			width:256px;
			float:left;
		}	
									
			.header .search .search-form label
			{
				display: none;
			}
									
		.header .search div.searchText
		{
			float:left;
			padding:4px 5px 0 10px;
		}
		
		.header .search div.search-form span
		{
			/* Font Styles: -> layout-fonts.css */
		}
											
		.header .search .search-box, 
		.header .search .search-box *
		{
			height: 23px;
			display: block;
			float: left;
		}
		
	.header .brandJumpTo
	{
		background: url('/images/template/header/jumpTo-bg.jpg') top right repeat-y;
		display: block;
		right: 0px;
		top: 3px;
		position: absolute;
		width: 725px;
		height: 16px;
		padding-top: 2px;
	}
	
	.header .brandJumpTo ul { float: right; }
	.header .brandJumpTo ul li 
	{
		display: block;
		float: left;
	}

	.header .brandJumpTo ul li a	
	{
		color: #000;
		text-decoration: none;
		margin: 0px 0px 0px 4px;
		padding: 0px 4px 0px 0px;
		border-right: 1px solid #000;
	}
	
	.header .brandJumpTo ul li a:hover
	{
		text-decoration: underline;
	}
	
	.header .brandJumpTo ul li.lastItem a	
	{
		border-right: none;
	}
		
	.header .brandSectionTabs										
	{
		position: absolute;
		right: 5px;
		bottom: 0px;
		display: block;
		width: 960px;	
	}
	
		.header .brandSectionTabs ul 
		{
			float: right;
		}
		
			.header .brandSectionTabs ul li
			{		
				/* Font Styles: -> layout-skin.css */
				width:145px;
				height:30px;
				float:left;
				overflow: hidden;
				margin-left: 2px;
			}
				
				.header .brandSectionTabs ul li a
				{
					/* Font Styles: -> layout-fonts.css */					
					display: block;
					margin: 5px 0 0 0;
					width:131px;
					height: 20px;
					outline: none;
					padding-right: 6px;
					padding-top: 5px;
					padding-left: 6px;
				}
				
				.header .brandSectionTabs ul li.multiLine a
				{
					padding-top: 2px;
					line-height: 11px;	
				}
					
					.header .brandSectionTabs ul li a.active
					{		
						/* Font Styles: -> layout-fonts.css */
						/* Font Styles: -> layout-skin.css */
					}	
					
					.header .brandSectionTabs ul li.multiLine a.active
					{
						padding-bottom: 3px;
					}
					
					.header .brandSectionTabs ul li a:hover
					{
						/* Font Styles: -> layout-fonts.css */						
					}
																													
		.header .brandNav
		{
			position: absolute;
			bottom: 5px;
			width:100%;
			height:55px;		
			clear:both;
		}
							
			.header .brandNav ul
			{
				padding: 0px !Important;
				margin: 0px !Important;
				height:55px;
				overflow:hidden;
			}
			
				.header .brandNav ul li
				{
					padding: 0px !Important;
					margin: 0px !Important;
					float:left;
				}
				
						.header .brandNav ul li a
						{
							height:55px;
							display:block;
							text-indent:-999px;
							overflow:hidden;
						}
				
						.header .brandNav ul li a.brandLink1
						{
							/* Background: -> layout-skin.css */
							width: 129px;
						}						
						.header .brandNav ul li a.brandLink2
						{
							/* Background: -> layout-skin.css */
							width: 71px;
						}
						.header .brandNav ul li a.brandLink3
						{
							/* Background: -> layout-skin.css */
							width: 70px;	
						}
						.header .brandNav ul li a.brandLink4
						{
							/* Background: -> layout-skin.css */
							width: 117px;
						}
						.header .brandNav ul li a.brandLink5
						{
							/* Background: -> layout-skin.css */
							width: 135px;
						}
						.header .brandNav ul li a.brandLink6
						{
							/* Background: -> layout-skin.css */
							width: 142px;
						}
						.header .brandNav ul li a.brandLink7
						{
							/* Background: -> layout-skin.css */
							width: 141px;
						}

						.header .brandNav ul li a.brandLink8
						{
							/* Background: -> layout-skin.css */
							width: 157px;
						}

						.header .brandNav ul li a:hover
						{
							background-position: 0px 0px !Important;
						}
							
									
	/* Sliding Banner Styles */
	.bannerContent
	{
		height:189px;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
		margin-bottom: 14px;
	}

		.#slider 
		{
			width: 964px;
			margin: 0 auto;
			overflow:hidden!important;
			float:left;
		}
			
			.scroll {
				height: 189px;
				width: 820px;
				position: relative;
				margin-left:-55px;
				background: #FFFFFF;
			}
				
				#buttons
				{
					float:left;
					width:199px;
				}
					
					#buttons ul
					{
						background: url('/App_Themes/Commerical Products Group/Images/backgrounds/banner-ul-bg.png') no-repeat top left !important;
						z-index:900;
						position:relative;
						height:189px;
						margin: 0px !Important;
						padding: 0px !Important;;
					}

						#buttons ul li
						{
							width:199px !important;
							margin: 0px !Important;
							padding: 0px !Important;
						}

								#buttons ul li a
								{
									/* Font Styles: -> layout-fonts.css */	
								}
																					
								#buttons ul li a.cat1
								{
									/* Background: -> layout-skin.css */
									width:125px;
									height:30px;
									padding:8px 18px 0 15px;
									display:block;									
								}
								
								#buttons ul li a.cat2
								{
									/* Background: -> layout-skin.css */
									width:168px;
									height:30px;
									padding:8px 0 0 15px;
									display:block;
								}
								
								#buttons ul li a.cat3
								{
									/* Background: -> layout-skin.css */
									width:168px;
									height:22px;
									padding:15px 0 0 15px;
									display:block;
								}

								#buttons ul li a.cat4
								{
									/* Background: -> layout-skin.css */
									width:168px;
									height:29px;
									padding:10px 0 0 15px;
									display:block;
								}
								
								#buttons ul li a.cat5
								{
									/* Background: -> layout-skin.css */
									width:168px;
									height:29px;
									padding:8px 0 0 15px;
									display:block;
								}
								
								#buttons ul li a:hover
								{
									padding-left: 20px !important;
									background-position:0 0;
									
								}
								
					
					.scroll
					{
						float:left;
						width:820px;
					}
				
				.scrollContainer div.panel 
				{					
					height: 189px;
					width: 820px;
					background:#000000;
				}
		
			/* End of Sliding Banner Styles */
	
		
	.mainWrapper
	{				
		overflow: hidden;
		width: 1003px;
		height: auto !Important;
		clear: both;
		margin: 0px;
	}
		
		.mainWrapper .leftColumn
		{
			width:199px;
			float:left;
			padding:0 0 20px 0;
		}
				
			.leftColumn h5
			{
				/* Font Styles: -> layout-fonts.css */	
				height:20px;
				padding:5px 0 0 8px;
				margin-left: -5px;
			}
			
				.leftColumn h5.menuTitle
				{
					/* Font Styles: -> layout-fonts.css */
					display: block;
					height:20px;
					padding: 10px 0 0 8px;
				}
			
				
			.leftColumn .featuredProduct
			{
				clear: both;
				background: #FFFFFF;
				margin: 0px;
				margin-bottom: 15px;
				margin-top: 3px;
				padding: 10px 10px 40px 10px;				
				position: relative;												
				width: 165px;
			}
			
				.leftColumn .featuredProduct img
				{
					border: none;
					margin-bottom: 10px;
				} 
			
				.leftColumn .featuredProduct a
				{			
					/* Font Styles: -> layout-fonts.css */	
					position: absolute;
					bottom: 15px;
					right: 10px;					
				}
				
					.leftColumn .featuredProduct a:hover
					{
						/* Font Styles: -> layout-fonts.css */	
					}
					
			
			.leftColumn .CTA
			{	
				display: block;
				width: 183px;
				height: 107px;
				overflow: hidden;
				position: relative;
				margin-bottom: 15px;
			}
				
				.leftColumn .CTA a
				{
					position: absolute;
					display: block;
				}
				
					/* Allows the image to 'flip' on rollovers */
					.leftColumn .CTA a:hover
					{
						margin-top: -107px;
					}
					
			.leftColumn .leftBtns
			{
				padding:10px 0 0px 0;
			}
							
							
							
							
/* Internal Left Menu */
.internalSideNavWrapper
{
	width:177px;
	background: url('/App_Themes/Commerical Products Group/Images/backgrounds/internal-sidenav-bg.gif') repeat-x #ededed;
	padding:15px 3px 25px 3px;
	margin-left:4px;
	margin-top: 5px;
	margin-bottom: 15px;
}

.menu_list 
{
	width: 177px;
	margin-top: 0px;
}

/* 1st Level of Navigation */
a.menu_head 
{
	/* Font Styles: -> layout-fonts.css */
	/* Background: -> layout-skin.css */
	width:160px;
	display:block;
	padding: 5px 10px 5px 7px;
	border-bottom: 1px solid #cacaca;
	border-top: 1px solid #ffffff;
}



a.menu_head:hover, a.selected
{
	/* Font Styles: -> layout-fonts.css */
	/* Background: -> layout-skin.css */	
	width:160px;
	margin-left: -11px;				
	position: relative;
	z-index: 900;
	display:block;
	padding: 6px 35px 6px 12px !Important;	
	border: none;
	
}

	.menu_body 
	{
		display:none;
	}
		
		/* 2nd Level of Navigation */
		.menu_body a 
		{
			/* Font Styles: -> layout-fonts.css */
			/* Background-color: -> layout-skin.css */
			width:147px;
			display:block;
			padding:6px 15px 6px 18px;
			margin-left:-1px;
			background-image: url('/App_Themes/Commerical Products Group/Images/backgrounds/menu-internal-item.png');
			background-repeat: no-repeat;
			background-position: 0px 3px ;
			position:relative;
			z-index:1;
			border-bottom:1px solid white;
		}
		
			.menu_body a.activePage
			{			
				/* Background: -> layout-skin.css */
			}
			
			.menu_body a:hover 
			{			
				background: url('/App_Themes/Commerical Products Group/Images/backgrounds/menu-internal-item-hover.png') no-repeat #cccccc 0px 3px ;	
			}
								
												
												
		.mainWrapper .contentWrapper
		{
			/*Curvey Corners styles*/
			-moz-border-radius-topright:1ex;
			-webkit-border-radius-topright:1ex;
			-moz-border-radius-topleft:1ex;
			-webkit-border-radius-topleft:1ex;
			/*Curvey end*/
			position: relative;
			background: url('/App_Themes/Commerical Products Group/Images/backgrounds/mainContent-bg.gif') #fff repeat-y;
			width: 100%;		
		}
			
		.mainWrapper .landingBanner
		{
			background: black;
			display: block;
			width: 100%;
			height: 185px;
			overflow: hidden;
			padding-top: 5px;			
			padding-bottom: 8px;			
		}
		
		.breadCrumb
		{
			/* Font Styles: -> layout-fonts.css */			
			padding-top: 10px;
			display: block;
			width: 100%;
			height: 25px;
		}
			
			.breadCrumb a
			{
				/* Font Styles: -> layout-fonts.css */	
				margin-left: 2px;
				margin-right: 2px;				
			}	
			
				.breadCrumb a:hover
				{
					/* Font Styles: -> layout-fonts.css */	
				}
				
		.mainWrapper .sectionTitle
		{
			/*Curvey Corners styles*/
			-moz-border-radius-topright:1ex;
			-webkit-border-radius-topright:1ex;
			-moz-border-radius-topleft:1ex;
			-webkit-border-radius-topleft:1ex;
			/*Curvey end*/
			height: 27px;
			width: 100%;
		}
			
			.mainWrapper .sectionTitle h3
			{
				/* Font Styles: -> layout-fonts.css */
				padding: 5px 0 0 10px;
			}		
						
			.content
			{
				background: #fff;
				padding: 10px;
			}
			
				/* Used by the Main Template */
				.mainWrapper .content img
				{
					border: 0px;
					display: block;				
					margin: 10px;
				}
				
				/* Sitefinity Editor Created UL (The UL gets an ID of 'False' when created by the editor) */
				.content ol#false,
				.content ul#false
				{
					margin: 20px 20px 20px 20px !Important;
				}
	
					.content ol#false li,
					.content ul#false li
					{
						margin-left: 20px !Important;
						margin-bottom: 5px !Important;
					}
			
						.content ul#false li
						{
							list-style-type: disc;
						}
						
						.content ol#false li
						{
							margin-left: 20px;
							list-style-type: decimal;
							}
		
				
				
				/* used on Product Pages */
				.content .contentCopy
				{
					display: block;
					width: 100%;
					position: relative;
					min-height: 325px;			
					padding-right: 0px;
					padding-left: 0px;
				}
				

					.findARep
					{
						position: absolute;
						height: 20px;
						padding-top: 7px;
						width: 165px;
						z-index: 1;
						overflow: hidden;
						right: 0px;
						margin-top: -27px;
						
						/*Curvey Corners styles*/
						-moz-border-radius-topright:1ex;
						-webkit-border-radius-topright:1ex;
						/*Curvey end*/
						
					}
					
						.findARep a
						{
							color: #000;
							text-decoration: none;
							margin-left: 55px;
						}
						
							.findARep a:hover
							{
								text-decoration: underline;
							}
				
					.content .contentCopy #contentDocumentsWrapper
					{
						margin-top: 20px;
					}
					
					.content .contentCopy .imageWrapper
					{
						float: left;
						margin-top: -10px;	
					}
				
				/* Used on landing pages */
				.content .landingPageCopy
				{
					display: block;
					width: 495px;
					float: left;
					position: relative;
					min-height: 325px;
					border-right: 1px solid #c0c0c0;
					padding-right: 0px;
					padding-left: 0px;
				}
				
				
					/* Landing Page Buttons Styles */
					.content .landingPageCopy .landing_btn,
					.content .content_button
					{        
				        position: relative;
						width: 234px;
						height: 102px;
						cursor:hand;
						float:left;	
						margin-right: 12px;		
						margin-bottom: 10px;			
				        
					}
				    
						.content .landingPageCopy .landing_btn a,
						.content .content_button a
						{
							/* Font Styles: -> layout-fonts.css */
							display: block;
							height: 102px;							
							background: url('/App_Themes/Commerical Products Group/Images/backgrounds/landinpage-button-bg.gif') no-repeat 0 0;
						}
						
							.content .landingPageCopy .landing_btn a:hover,
							.content .content_button a:hover
							{
								/* Font Styles: -> layout-fonts.css */
								background-position:0 -102px;      	
							}
				    				    
						.content .landingPageCopy .landing_btn strong,
						.content .content_button strong
						{
							/* Font Styles: -> layout-fonts.css */
							position: absolute;
							margin-left: 100px;
							width: 124px;
							padding-top: 8px;
							cursor:hand;
						}
						
						.content .landingPageCopy .landing_btn img,
						.content .content_button img
						{
							margin: 0px;
							padding: 0px;
							position: absolute;
							margin-left: 10px !important;
							margin-top: 10px !important;
						}
				    
						.content .landingPageCopy .landing_btn em,
						.content .content_button em						
						{
							/* Font Styles: -> layout-fonts.css */
							position: absolute;
							right: 0px;
							line-height: 12px;
							width: 132px;
							padding-top:10px;					
							cursor:hand;
						}
				    
						.content .landingPageCopy .landing_btn  h6,
						.content .content_button h6
						{						
							/* Font Styles: -> layout-fonts.css */
							position: absolute;
							margin-left: 100px;
							width: 110px;
							padding-top:13px;
						}
				    
						.content .landingPageCopy .landing_btn span,
						.content .landingPageCopy .landing_btn u,
						.content .content_button span,
						.content .content_button u
						{
							/* Font Styles: -> layout-fonts.css */
							position: absolute;
							right: 10px;
							bottom: 3px;
							cursor:hand;				        
						}
				    
				        						
				.content .landingPageNews
				{
					min-height: 325px;
					position: relative;					
					display: block;
					width: 220px;
					float: left;
					padding-left: 10px;
					margin-left: 10px;	
					overflow: hidden;			
				}
				
			.mainWrapper .contentFooter
			{
				display: block;
				height:24px;
				width:765px;
				clear:both;
			}
		
/****************************************************/
/* FOOTER STYLES									*/
/****************************************************/

	.footer
	{
		/* Font Styles: -> layout-fonts.css */
		height:85px;
		background:white;
		width: 955px;
		clear:both;
		margin-top: 20px;	
		padding: 10px;
		padding-right: 0px;
		position:relative;
		
	}	
			
		.footer div.siteInformation
		{			
			width: 525px;
			float: left;						
		}
		
		.footer div.siteInformation img
		{			
			margin-left:15px;						
		}
			
			.footer div.siteInformation ul.footerSiteMap
			{
				display: block;
				height: 10px;
				margin-left: -5px;
			}
				.footer div.siteInformation ul.footerSiteMap li
				{
					float: left;
					padding-left: 6px;
					padding-right: 6px;		
				}
					.footer div.siteInformation ul.footerSiteMap li.lastItem
					{
						border-right: none;
					}
				
					.footer div.siteInformation ul.footerSiteMap li a
					{
						/* Font Styles: -> layout-fonts.css */
					}
					
						.footer div.siteInformation ul.footerSiteMap li a:hover
						{
							/* Font Styles: -> layout-fonts.css */
						}
	
			.footer div.siteInformation ul.footerTerms
			{				
				display: block;
			}
			
				.footer div.siteInformation ul.footerTerms li
				{
					/* Font Styles: -> layout-fonts.css */
					padding-left: 5px;
					padding-right: 10px;
					float: left;		
					width: 525px;	
						
					margin-bottom: 5px;				
				}
				
					.footer div.siteInformation ul.footerTerms li a
					{
						/* Font Styles: -> layout-fonts.css */						
					}
						
						.footer div.siteInformation ul.footerTerms li a:hover
						{
							/* Font Styles: -> layout-fonts.css */							
						}
						
		div.siteBrandNetwork
		{
			/* Font Styles: -> layout-fonts.css */
			width: 550px;
			right:10px;
			margin-left: 10px;
			margin-top: 2px;
			position:absolute;
			z-index:999;
		}
		
			div.siteBrandNetwork ul
			{				
				margin-top: 8px;
				display: block;
				float:right;
			}
			
				div.siteBrandNetwork ul li
				{				
					display: block;
					overflow: hidden;
					height: 30px;
					float: left;
					margin-right: 10px;
					position: relative;
				}
				
					div.siteBrandNetwork ul li.lastItem
					{
						margin-right: 0px;
					}
					
				/* Icon roll over OFF state */					
				div.siteBrandNetwork ul li a
				{
					display: block;
					height: 60px;
				}
					/* Icon roll over ON state */
					div.siteBrandNetwork ul li a:hover img
					{
						margin-top: -30px;
					}
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .tabs-nav {
        display: none;
    }
}

/* Skin */
.tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
}

.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.tabs-nav li {
    float: left;
    margin: 0 0 0 5px;
    min-width: 84px; /* be nice to Opera */
    
    list-style-type: none !Important;
    margin: 0px !Important;
    margin-left: 5px !Important;    
}

.tabs-nav a, .tabs-nav a span {
    display: block;
    padding: 0 10px;
    background: url('/App_Themes/Commerical Products Group/Images/backgrounds/tab.png') no-repeat;
}
.tabs-nav a 
{
    position: relative;
    top: 1px;
    z-index: 2;
    padding-left: 0;   
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap; /* required in IE 6 */    
    color: #b1b1b1 !Important; 
}
.tabs-nav .tabs-selected a {
    color: #FFFFFF !Important;
    text-transform: uppercase;
}
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
    background-position: 100% -150px;
    outline: 0; /* prevent dotted border in Firefox */
}
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
    background-position: 100% -100px;
}
.tabs-nav a span {
    width: 64px; /* IE 6 treats width as min-width */
    min-width: 64px;
    height: 18px; /* IE 6 treats height as min-height */
    min-height: 18px;
    padding-top: 6px;
    padding-right: 0;
}
*>.tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.tabs-nav .tabs-selected a span {
    padding-top: 7px;
}
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
    background-position: 0 -50px;
}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
    background-position: 0 0;
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;    
}
.tabs-nav .tabs-disabled {
    opacity: .4;
}

.tabs-container 
{
    border-top: 3px solid #000;
    padding: 1em 8px;
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.tabs-loading em {
    padding: 0 0 0 20px;
    background: url('/App_Themes/Commerical Products Group/Images/backgrounds/tab-loading.gif') no-repeat 0 50%;
}					

ul.tablist 
{	
	/* Used to override Generic List Style in '.content UL LI' */
	margin: 0px !Important;	
}

#panel-1
{
}				

	#panel-1 table
	{
		display: block;
	}
				
table.documentDownloads
{
	position: relative;
	margin-top: -11px;
	margin-left: -8px;	
	width: 740px;
	*width: 730px; /* IE 7 Fixes */
}
 
	table.documentDownloads th,
	table.documentDownloads td
	{
		background: #f8f8f8;
		border: 1px solid #c4c4c4;
		padding: 5px;
		vertical-align: top;
	}
	
	table.documentDownloads td
	{
		color: #9d9d9d;		
	}
	
	table.documentDownloads td a
	{	
		color: #9d9d9d;		
		text-decoration: none;
	}
	
		table.documentDownloads td a:hover
		{
			text-decoration: underline;
		}
		
		table.documentDownloads th
		{
			background: #fff;
			font-weight: bold;
		}
		
			table.documentDownloads th.column1
			{
				width: 125px;
			}
			table.documentDownloads th.column2
			{
				width: 165px;
			}
			
			table.documentDownloads th.column3
			{
				width: 370px;
			}
			
			table.documentDownloads th.column4
			{
				text-align: center;
				width: 80px;
			}
	
		table.documentDownloads .first
		{
			border-left: none;
			text-align: center;
		}
		
		table.documentDownloads .last
		{
			border-right: none;
		}
		
		
		table.documentDownloads td span.noDocuments
		{
			color: #AAA;
			width: 100%;
			text-transform: uppercase;
			font-weight: bold;
		}
		
		
		
		
		
		
		
		
		
		
		
		
		
		
/*******************************/		
/* DEALER LOCATOR */		
/*******************************/				
.mapBox,
.mapBox *
{
    z-index: 0px;
}

.mapBox,
.resultsBox
{
    float: left;
    position: relative;
    display: block;
}

.mapBox
{
    width: 480px;
    height: 400px;
}

.resultsBox
{
    width: 240px;
}

.boxWrapper
{
    display: block;
    padding-bottom: 25px;
}

/* All results use this class, it is also used for pagination. */
div.resultItem
{
	display: block;
	width: 222px;
	overflow: hidden;	
	padding: 5px 10px 0px 15px;
	margin-bottom: 6px;	
	line-height: 12px;
}

	/* Bold Rep Type Title */
	div.resultItem b
	{
		text-align: center;
		display: block;
		width: 205px;
		text-decoration: none;
	}
	
	div.repContent
	{
		width: 205px;		
	}
	
	/* Rep Content */
	div.resultItem div.repContent,
	div.resultItem div.repContent *
	{
		line-height: 12px;
		margin: 0px;
		padding: 0px;
	}	
			
.regionalRep
{
	text-align: center;
	background: url('/App_Themes/Commerical Products Group/Images/backgrounds/rep-locator-regional-bg.jpg') top left no-repeat;
	height: 50px;
}

.territoryRep
{	
	background: url('/App_Themes/Commerical Products Group/Images/backgrounds/rep-locator-territory-bg.jpg') top left no-repeat;
	height: 100px;
}

.customerRep
{	
	background: url('/App_Themes/Commerical Products Group/Images/backgrounds/rep-locator-customer-bg.jpg') top left no-repeat;
	height: 100px;
}


.wardRepBG
{	
	background: url('/App_Themes/Commerical Products Group/Images/backgrounds/rep-locator-ward-bg.jpg') top left no-repeat;
	height: 100px;
}

.ampcoRepBG
{	
	background: url('/App_Themes/Commerical Products Group/Images/backgrounds/rep-locator-ampco-bg.jpg') top left no-repeat;
	height: 100px;
}

.rpsRepBG
{	
	background: url('/App_Themes/Commerical Products Group/Images/backgrounds/rep-locator-rps-bg.jpg') top left no-repeat;
	height: 100px;
}

.milcorRepBG
{	
	background: url('/App_Themes/Commerical Products Group/Images/backgrounds/rep-locator-milcor-bg.jpg') top left no-repeat;
	height: 100px;
}

.portalsRepBG
{	
	background: url('/App_Themes/Commerical Products Group/Images/backgrounds/rep-locator-portals-bg.jpg') top left no-repeat;
	height: 100px;
}

.selkirkRepBG
{	
	background: url('/App_Themes/Commerical Products Group/Images/backgrounds/rep-locator-selkirk-bg.jpg') top left no-repeat;
	height: 100px;
}

.heatfabRepBG
{	
	background: url('/App_Themes/Commerical Products Group/Images/backgrounds/rep-locator-heatfab-bg.jpg') top left no-repeat;
	height: 100px;
}

	.territoryRep b,
	.customerRep b
	{
		margin-top: 5px;
		margin-bottom: 5px;
	}
	

/* Download Literature Custom Control */
	
h3.documentTitle
{
    background: url('/App_Themes/Commerical Products Group/Images/backgrounds/icon-documentList-Closed.gif') 0px 5px no-repeat #FFFFFF;
    padding-left: 30px;
    padding-right: 5px;
    border-bottom: 1px solid #adadd7;
    padding-top: 5px;
    padding-bottom: 5px;
}	

	h3.openProduct
	{
		background: url('/App_Themes/Commerical Products Group/Images/backgrounds/icon-documentList-Open.gif') 3px 5px no-repeat #676990;	
		border-bottom: none;
	}
	
	.documentTitle:hover
	{
		cursor: pointer;
	}
	
.documentsWrapper
{
    display: block;
    margin-bottom: 10px;    
}

	/* Class Applied on Open of Document List Drop Down */
	.openWrapper
	{   
		border-bottom: 5px solid #676990;
	}
	




ul
{
    margin-left: 10px !Important;
}


span.documentCount
{
    color: #000;
    float: right;
    font-weight: normal;
    font-size: 11px;
}

.openProduct
{
    color: #FFF !Important;
    background: #676990;
}
.openProduct span.documentCount
{
    color: #FFF;
}


/* jQuery - Quick Pagination (Used on inline Document List) */

#document_counter 
{
	margin-top: 20px;
	text-align: center;
}

	#document_counter a
	{
		display: inline;
		padding: 10px;
		background: #F8F8F8;
		margin-left: 10px;
		margin-right: 10px;
		border: 1px solid #C4C4C4;
		text-decoration: none;
		font-weight: bold;
	}
	
		#document_counter a:hover
		{
			background: #EFEFEF;
		}
		
ul.categoryProductList 
{
	margin: 0px !Important;
	padding: 0px !Important;
}

	ul.categoryProductList li
	{
		margin: 0px;
		padding: 0px;
		background: url('/App_Themes/Commerical Products Group/Images/backgrounds/newItem-bg.gif') repeat-x bottom left;
		padding: 10px;
	}
	
		ul.categoryProductList li a
		{
			font-weight: bold;
		}
			
			ul.categoryProductList li a:Hover
			{
				text-decoration: none;
			}
			
.submittalSearch			
{
	background: url("/images/tmp-submittal-search.jpg") top left no-repeat;
	display: block;
	width: 171px;
	height: 33px;
	position: absolute;
	top: 25px;
	left: 520px;
}

.submittalSearch a
{
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	display: block;
	padding-top: 10px;	
	padding-left: 10px;
	width: 161px;
	height: 23px;
	color: #000;
	text-decoration: none;
}

	.submittalSearch a:hover
	{
		text-decoration: underline;
	}
	
div.warningWrapper
{
	position: absolute;
	margin: 0px auto;
	margin-top: 15px;
	height: 25px;
	width: 230px;
	background: #FFFABF;
	padding: 5px;
	padding-top: 8px;
	padding-bottom: 8px;
	
	border: 2px solid #FF3F3F;
	margin-left: 260px;
}	

div.warningWrapper strong
{
	color: Red;
}



/* Three Column Layout	*/
/* Date: Jan 12, 2010.	*/

/* Set container css properties. */
.leftColumn,
.centerColumn,
.rightColumn
{
	display: block;
	float: left;
	margin: 0px;
	overflow: hidden;
	padding: 0px;
	position: relative;
	
}

/* One Column Layout */
.Layout1Column .leftColumn		{ width: 960px; }

	.Layout1Column .content 
	{  
		background: none !Important; 

	}

/* Two Column Layout */
.Layout2Column .leftColumn		{ width: 200px; }
.Layout2Column .centerColumn	{ width: 760px; }

/* Three Column Layout */
.Layout3Column .leftColumn		{ width: 200px; }
.Layout3Column .centerColumn	{ width: 560px; }
.Layout3Column .rightColumn		{ width: 200px; }

/* Testing Colours */
/*
	.leftColumn		{ background: lime; }
	.centerColumn	{ background: yellow; }
	.rightColumn	{ background: orange; }
*/

/* Homepage Internal Layout */
.homepageContentLeft
{
	background: #fff;
	border-right: 1px solid #d5d5d5;
	display: block;
	float: left;
	padding-right: 10px;
	width: 520px;
}

.homepageContentRight
{	
	display: block;
	float: left;
	margin-left: 5px;
	padding: 0px;
	width: 200px;	
}

	.homepageContentRight img
	{
		padding: 0px;
		margin: 0px;
	}


.submittalHomepageCTA
{
	display: block;	
	width: 198px;
	margin-left: 8px;
}

	.landingPageNews .submittalHomepageCTA
	{
		border-top: 1px solid #dedede;
		padding-top: 10px;
	}
	
	.submittalHomepageCTA h4
	{
		background: url('/App_Themes/Commerical Products Group/Images/backgrounds/submittal-drawings-cta.jpg') top left no-repeat;
		display: block;
		height: 53px;
		width: 125px;	
		overflow: hidden;
		font-size: 18px;
		font-family: Arial;
		padding-right: 60px;
		padding-left: 10px;
		padding-top: 20px;
		line-height: 22px;
	}
	
	.submittalHomepageCTA ul
	{
		display: block;
		width: 198px;
		background: orange;
		margin: 0px !Important;
		padding: 0px !Important;
		background: url('/App_Themes/Commerical Products Group/Images/backgrounds/submittal-drawings-cta.jpg') bottom left no-repeat;
		padding-bottom: 18px !Important;
	}
	
		.submittalHomepageCTA ul li
		{
	
			background: url('/App_Themes/Commerical Products Group/Images/backgrounds/submittal-drawings-cta.jpg') 0px -101px no-repeat;
		
			list-style: none;
			width: 198px;
			height:  26px;
			margin: 0px !Important;
			padding: 0px !Important;			
		}
		
			.submittalHomepageCTA ul li a
			{
				color: #000;
				text-decoration: none;
				font-weight: bold;
				display: block;
				width: 168px;
				height: 25px;
				padding-left: 30px;
				padding-top: 1px;
			}
			
				.submittalHomepageCTA ul li a:hover
				{
					background: url('/App_Themes/Commerical Products Group/Images/backgrounds/submittal-drawings-cta.jpg') 0px -75px no-repeat;
				}
				
				
	/* Video Section Styles */
	
	div#youtubeDiv
	{
		width:90%;
		margin:25px 0 30px 15px;
		line-height:1.6em !important;
	}

	div#youtubeDiv ul#youtubelist li {
	border-bottom:1px dotted #CCCCCC;
	margin-bottom:20px;
	padding-bottom:10px;
	list-style:none;
	list-style-image:none;
	}

	table.youtubeTable h3 a
	{
		
		display:block;
		font-size:14px !important;
		line-height:16px !important;		 
	}

	 table.youtubeTable span.youtubeDesc
	{
		font-family:Arial!important;
		font-size:12px!important;
		line-height:16px!important;
	}
			 
	table.youtubeTable img
	{
		border-color:#9325B2 !important;
		margin:0px!important;
	}