/* Reset and default */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}
html, body { 
/*	background: #ffffff url(../images/page-background.jpg) no-repeat top center;  */
	line-height: 1; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	height: 100%;
}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
h1, h2, h3, h4, h5, h6 { font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', 'Times New Roman', serif; line-height: 1.2; }
a { color: #315880; }
a img { border: 0 none; font-size: 115%; }
p { color: #252525; font-size: 115%; line-height: 1.3; }
sup { font-size: 75%; vertical-align: text-top; }
a sup { text-decoration: none; } /* only IE6 and IE7 pay attention to this style; IE8, FF, Safari, and Chrome just ignore it */

/* -----------------------------------------------------------------------------
	MAIN BLOCKS
----------------------------------------------------------------------------- */
#masthead {
	margin: 0 auto 2px auto;
	padding: 11px 19px 0px 24px;
	position: relative;
	height: 114px; /* 125 - pt - pb */
	width: 920px;  /* 963 - pl - pr */
	background: url(../images/masthead-background.gif) no-repeat left top;
	z-index: 3;
}

#content-body {
	clear: both;
	margin: 0 auto 0 auto;
	position: relative;
	width: 960px;
	z-index: 2;
}

#footer { /* see IE fixes */
	clear: both;
	margin: 5px auto 0 auto;
	padding: 16px 14px 0px 21px;
	position: relative;
	height: 65px;
	width: 924px;  /* 959 - pl - pr */
	background: url(../images/footer-background.gif) repeat-x left top;
	z-index: 2;
}
#flashcontent{ width:960px; display:block; }
.get-flash{ display:none; background: url('/images/GetFlash.jpg') no-repeat top left; height:32px; margin-bottom:5px; text-align:center; }
.get-flash h2{padding-top: 5px;}
.marquee-image{ display:none; background: url('/images/Marquee_NoFlash.jpg') no-repeat top left; height:330px; position:relative;}
.marquee-image a{ display:block; width:238px; height:100px; position:absolute; bottom:0; left:0;}


/* -----------------------------------------------------------------------------
	MASTHEAD elements.
----------------------------------------------------------------------------- */
/* Thompson's WaterSeal logo */
#logo { display: block; float: left; margin: 5px 48px 0 0; width: 171px; height: 83px; }

/* See superfish.css for the main navigation menu's style rules. */

/* Search and social links. */
#search-social-wrapper { display: block; float: right; text-align: left; }

	/* Apply the clearing fix to this element.
	   .search-box width = 214 - pLeft- pRight - bLeft - bRight */
	.search-box:after {
	    content: "."; 
	    display: block; 
	    height: 0; 
	    clear: both; 
	    visibility: hidden;
	}
	.search-box { 
		display: inline-block; 
		position: relative; 
		padding: 2px 2px 2px 5px; 
		width: 205px; 
		background-color: #FFFFFF; 
		border: 1px solid #3d3d3d; 
		text-align: left; 
	}
	/* Hides from IE-mac \*/
	* html .search-box { height: 1%; }
	.search-box { display: block; }
	/* End hide from IE-mac */

		input.search-textbox { float: left; padding-top: 3px; width: 175px; border: 0 none; color: #8f8e8e; font-size: 10px; }
		.search-button { float: right; }

	.social-links { position: relative; margin-top: 15px; }
		.social-links a { display: block; margin: 8px 0 0; color: #315880; font-size: 100%; font-weight: bold; text-decoration: none; }
		.social-links a:hover { text-decoration: underline; }

		#share { position: absolute; top: 0px; right: 0px; }
		#share a { margin: 0; padding-left: 15px; background: url(../images/sharethis.gif) no-repeat left center; color: #00893d; font-size: 75%; line-height: 11px; }


/* -----------------------------------------------------------------------------
	FOOTER elements
----------------------------------------------------------------------------- */
#footer a { color: #4280b4; text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer p { clear: both; width: 100%; color: #38536f; font-size: 90%; text-align: right; }
#footer ul { margin: 0 0 14px; padding: 0; list-style: none; }
#footer ul li { display: inline; list-style: none; }
	#footer .left { float: left; }
	#footer .left li  { padding-right: 10px; }
	#footer .right { float: right; }
	#footer .right li { padding-left: 7px; }


/* -----------------------------------------------------------------------------
	Page elements
----------------------------------------------------------------------------- */
/* Page Background, see IE fixes */
#page-background { position: fixed; top: 0; left: 0; height: 100%; width: 100%; }



/* ----- Types of banner display bodies. ----- */
#banner-display-body, #banner-display-body2 { position: relative; background-color: #ffffff; overflow:hidden; }

	/* Full-width layout. */
	.full { padding: 9px 0 0 20px; width: 939px;/* 959 - pL */ }

	/* Full-width layout. */
	.homepage { height: 151px;/* 160 - pTop */ }

	/* Add if you need striped background. */
	.stripes { background: url(../images/stripes.gif) repeat 0 0; }

	/* Add a sublevel. 
	   Note: account for the 20px padding-right on .full layouts. */
	.sublevel { margin: 14px 0 0 -20px; padding: 14px 0 0 20px; background: #f2f2f2; border-top: 1px dashed #c3c3c3; overflow:hidden;}

	/* If the page is short, make some space. */
	.s { margin-top: 200px; }

	/* Highlighting box; don't forget to add HTML and background image. */
	/* See IE fixes for the 100% height alternative. Only use where there are no links in content. */
	.highlight { position: relative; padding: 9px 0 0 15px; height: 100%; width: 944px;/* 959 - pL */ }
	.highlight-bg { display: block; position: absolute; top: 0; left: 0; height: 100%; z-index: 1; }

		.highlight-block { position: relative; z-index: 3; }
			.hl-intro, .hl-content { float: left; position: relative; }
			.hl-intro { margin-bottom: 30px; width: 220px; } /*  margin-right rule removed do to an IE6 bug with the tabs system */
			.hl-content { width: 685px; }

			h2.blocked { float: left; margin: 15px 0 2px 0; font-size: 220%; line-height: 32px; font-style:italic;}
				.line-one, .line-two { display: block; font-weight: normal; margin-bottom: 2px; padding: 3px 10px 1px; background-color: #013666; color: #ffffff; }
				.line-two { margin-bottom: .75em; }

			.hl-intro p { clear: left; position: relative; margin: 10px 0 0 10px; padding-bottom: 1em; width: 195px; color: #fff; font-size: 120%; line-height: 16px; }
			.hl-content p { margin: 0 0 1em; font-size: 110%; }

#banner-display-cap, #banner-display-cap-2 {  height: 12px; }

#banner-display-shoe,
#banner-display-shoe-2 { margin: 0 0 4px; height: 5px; }
	.full-cap { width: 959px; background: transparent url(../images/banner-display-background-cap.png) no-repeat 0 0; }
	.full-shoe { width: 959px; background: url(../images/banner-display-background-shoe.jpg) no-repeat 0 0; }

#flashcontent { margin-bottom:5px; }

.banner { float: left; width: 445px; }
.trim { margin-right: 33px; padding-right: 15px; border-right: 1px dashed #C6C6C6; } /* Extend and add border to .banner i.e. home page. */
	.banner img { float: left; padding: 0 12px 12px 0; }
	.banner h2 { margin: 0px 0 5px 0; color: #00529a; font-style: italic; font-size: 160%;font-weight:normal; }
	.banner p { margin: 0 0 1em; font-size: 115%; line-height: 1.3; }


/* ----- Breadcrumbs ----- */
#Breadcrumbs {
	height: 22px;
	width: auto;
	margin: 0 20px 0 0;
	padding: 5px 0 0 0;
	color: #00549b;
	font-size: 10px;
	text-transform: uppercase;
}

#Breadcrumbs 
	a {
	color: #4c9bde;
	font-size:10px;
	text-decoration: none;
}
#Breadcrumbs 
	a:hover {
	color: #4c9bde;
	text-decoration: underline;
}



/* ----- The CTA "+" icon anchor style; a.cta ----- */
.cta { background: transparent url(../images/icon-cta.gif) no-repeat scroll 0 0; display: block; font-size: 11px; font-weight: bold; line-height: 15px; padding-left: 22px; text-decoration: none; }
.cta:hover { text-decoration: underline; }
	.lite { color: #fff; }

/* ----- The Printer icon anchor style; a.printer ----- */
.printer { padding-left: 26px; background: url(../images/icon-printer.gif) no-repeat left center; font-weight: bold; line-height: 15px; text-decoration: none; }
.printer:hover { text-decoration: underline; }

/* ----- The Printer icon anchor style; a.printer ----- */
.pdf { padding: 2px 20px 2px 0; background: url(../images/icon-pdf.gif) no-repeat right center; text-decoration: none; }
.pdf:hover { text-decoration: underline; }


/* ----- Tabs ----- */
.tab-nav { margin: 0; padding: 0; list-style: none; display: none; }
/* Do not show if there is no JS support. Use on page JS to show. */
ul.tab-nav , div.tab-nav { display: none; }
.tab-nav li { display: inline;  list-style: none; }
.tab-nav li a { 
	float: left; 
	display: block; 
	overflow: hidden;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}
.tab-nav li a:hover, 
.tab-nav li a.selected { background-position: 0 0; color: #fff; }
	/* Promotions extension */
	.promotions { margin:0 0 0 -22px; padding:0; width:724px; }
	.promotions li a { width: 181px; line-height: 38px; background: url(../images/tab-promotions-background.gif) no-repeat -181px 0; color: #013666; }
	/* Advice extension */
	.advice li a { width: 229px; line-height: 28px; background: url(../images/tab-advice-background.gif) no-repeat -229px 0; color: #013666; }
	/* How-to: Step-By-Step extension */
	.how-to li a { width: 211px; line-height: 26px; background: url(../images/tab-diy-background.gif) no-repeat -211px 0; color: #013666; }

.hiddencontent { display: none; }

/* ----- Tabs Set 2 for Secondary Tab UI -----
  If using target "hiddencontent2"
*/
.tab-nav2 { margin: 0; padding: 0; list-style: none; }
.tab-nav2 li { display: inline;  list-style: none; }
.tab-nav2 li a { 
	float: left; 
	display: block; 
	overflow: hidden;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}
.tab-nav2 li a:hover, 
.tab-nav2 li a.selected { background-position: 0 0; color: #fff; }

.hiddencontent2 { display: none; }
/* ----- Tabs Set 2 for Secondary Tab UI ----- */



/* -----------------------------------------------------------------------------
	BLOCKED HEADLINES: (Yeah I know, I should have made this sooner, sorries.)
	If it is page independant you can here here. If it is page dependant keep it 
	in the individualized css files.

	e.g.
	<div class="h-wrapper"><h1>PAGE TITLE HERE</h1></div>
	<div class="h-wrapper spacing"><h2>PAGE TITLE WITH SPACING BELOW</h2></div>

	Consider h2.blocked{}, .line-one{}, and .line-two{} deprecated.    ^_^
----------------------------------------------------------------------------- */
.h-wrapper { margin: 10px 0 5px; }
	/* h-wrapper modifier */
	.spacing { margin-bottom: 11px; }

#banner-display-body .h-wrapper h1,
#banner-display-body .h-wrapper h2 { display: inline; padding: 3px 10px 3px; background-color: #013666; color: #ffffff; font-style: italic; }
	#banner-display-body .h-wrapper h1 { font-size: 220%; font-weight: normal; }
	#banner-display-body .h-wrapper h2 { font-size: 160%; font-weight: normal; }

/* ----- blocked headlines ----- */



/* -----------------------------------------------------------------------------
   Global styles
----------------------------------------------------------------------------- */

h2{font-size:160% !important;}
.get-flash a {font-size: 16px !important;}
h2.blocked, #banner-display-body h1, #banner-display-body2 h1 {
	font-size:220% !important; 
	font-style: italic;
	font-weight: normal;
}
#banner-display-body h2, #banner-display-body h4, #banner-display-body2 h2, #banner-display-body2 h4, .get-flash h2, .get-flash a{
	color:#00549B;
	font-size:17px;
	font-style:italic;
	font-weight:normal;
}
h4.promo_SideBar_Title{
	color:#FFFFFF !important;
	font-size:14px !important;
}
.products-content h2.products-header{ font-weight:bold !important; }
.promo_SideBar p{
	font-size:11px;
	line-height:1.25em;
}

.sitemapHead a{font-size:16px !important; }
ul.tab-nav li, .ht_BulletList li, .ht_BulletListSub li { font-size: 115%; }

ul.promotions li a{font-size:10px;}
ul.four-tab li a{ font-size:10.5px; }
#footer a { font-size:10px; }
div.main-copy p { padding-top: 5px; color:#ffffff; }

.category-intro h2 {font-size:17px !important;}
.category-notes ul li {font-size:115%; line-height:1.3em;}



/* -----------------------------------------------------------------------------
   Clearfix
----------------------------------------------------------------------------- */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */



/* Bottom Links */
.BottomPanel_Links {float:left;}



.dotted-border{
	background:url("/images/imgFrame_136x126.gif") no-repeat scroll 0 0 transparent;
	float:left;
	min-height:126px;
	width:140px;
	
}