@import "reset.css";

/* -------- Page Formatting ----------*/
body
{
	background: white;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
}
h1
{
	clear: both;
	width: auto;
	padding: 0 0.5em;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #FFFFFF;
	background-color: #000066;
}
h1.Current
{ background-color: #CC0000; }
h2, label
{
	font-size: 15px;
	font-weight: bold;
	color: #000066;
}
h2.Brand
{ font-weight: normal; }
h2 a
{ font-style: normal; }
h3
{ font-weight: bold; }
h4
{ 
	font-weight: bold;
	font-size: 16px;
}
h5 {font-weight: normal; font-size: 12px;}
p
{ margin: 0 0 1em 0; }
em
{ font-style: italic; }
ul
{
	margin: 0 0 0 35px;
	padding: 0;
}
a
{ color: #000099; }
a:hover
{
	text-decoration: none;
	color: #000066;
}
br.Clear
{
	float: none;
	clear: both;
}
#Page
{
	width: 733px;
	margin: 0 auto;
}
#Banner
{
	height: 109px;
	background: url("/images/TSP-Web-Header.gif") no-repeat;
	margin: 0;
}
#Navigation
{
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
	list-style-type: none;
}
#Navigation li
{
	float: left;
	border-style: solid;
	border-width: 0 1px 0 0;
	border-color: #FFFFFF;
}
#Navigation a
{
	display: block;
	width: 90px;
	padding: 5px 0;
	background-color: #CC0000;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
}
#Navigation a:hover
{ background: #000066; }
#Navigation a.Current
{
	background: #000066;
}
.SingleColumn
{
	float: left;
	margin-top: 1em;
	padding: 0 1em;
}
.Column
{
	float: left;
	width: 360px;
	padding: 1em 0;
}
.PaddedColumn
{
	width: 340px;
	float: left;
	padding: 1em;
}
.PaddedColumn ul
{
	margin: -1em 0 1em 1.5em;
	padding: 0;
}
ol {margin: -1em 0 1em 1.5em;}
ol li {list-style-type: decimal;}
.PaddedColumn ul li
{
	list-style-type: disc;
}
.PaddedColumn li strong
{ font-style: normal; }
.PaddedColumn img
{
	display: block;
	margin-left: -1em;
}
#Footer
{ clear: both; }
#Footer h1
{
	text-align: right;
	margin-bottom: 0.5em;
}
#Copyright
{
	text-align: center;
	font-size: 9px;
}
#source_form p
{ margin: 0 0 1em 0; }
/*##### TSP Smart Maps #####*/
#Addresses
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#Addresses a
{
	color: #202020;
	text-decoration: none;
}
#Addresses li
{
	float: left;
	padding: 5px;
	width: 135px;
	cursor: pointer;
}
.vcard, #coming_soon, #coming_soon span
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #000000;
	font-weight: normal;
}
.vcard .org, .vcard .latitude, .vcard .longitude
{ display: none; }
.vcard .hours {margin-top: 1em; font-style: italic;}
#Addresses .email a {color: blue; text-decoration: underline;}
#LocationMessage
{
	float: left;
	width: 280px;
	margin: 5px;
	padding: 0;
	border: solid 1px #CC0000;
}
#Addresses .Padding, #LocationMessage .BlackBox
{ padding: 5px; }
.RedBox
{
	width: 120px;
	margin: 0 1em 0 0;
	padding: 5px 5px 15px 10px;
	background-color: #CC0000;
	color: #FFFFFF;
	font-size: 12px;
}
#Addresses li.RedBox {float: left; width: 130px; padding-bottom: 3em;}
.RedBox h2 {color: white;}
#map_container
{
	float: left;
	margin: 5px;
	width: 420px;
	height: 350px;
	border: solid 1px;
}
#map_container .new
{
	border: none;
	width: auto;
}
#map_container .note
{ display: none; }
#directions_container
{
	clear: both;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
}
#directions_container b
{ color: #000066; }

/* For IE html>body */
#source_form
{
	float: left;
	width: 260px;
	height: 350px;
	padding: 8px;
	margin: 2px 5px;
	border: solid 1px #CC0000;
}
html>body #source_form
{
	float: left;
	width: 260px;
	height: 150px;
	padding: 10px;
	margin: 5px;
	border: solid 1px #CC0000;
}
form input
{
	display: block;
	font-size: 14px;
}
#source_form input
{
	width: 250px;
	margin-bottom: 0.5em;
	float: left;
}
ul.Branches
{
	margin: 0;
	padding: 0;
}
ul.Branches li
{
	list-style-type: none;
	margin: 0;
	padding: 0.5em 1em;
	border-bottom: dotted 1px #000066;
}
ul.Branches h3
{ margin-top: 0.5em; }
ul.Branches p
{
	margin: 0;
	padding: 0;
	font-style: normal;
}
ul.Branches ul
{
	display: none;
	margin: 0;
	padding: 0;
}
ul.Branches li.expanded ul
{ display: block; }
ul.Branches ul li
{
	margin: 0.5em 0;
	padding: 0;
	border: solid 1px #CC0000;
	text-align: center;
}
ul.Branches ul li h3
{
	padding: 0.5em;
	color: #CC0000;
	font-style: normal;
	border-bottom: solid 1px #CC0000;
}
ul.Branches ul li p
{
	margin: 0.5em;
}
ul.Branches ul li a
{
	display: block;
	margin: 0;
	padding: 0.5em;
	border: none;
	background-color: #CC0000;
	color: white;
	text-align: center;
	font-style: normal;
	text-decoration: none;
}
ul.Jobs
{ margin: 0.5em 0; }
ul.Jobs li
{
	list-style-type: none;
	font-style: normal;
}
#Categories 
{
	float: left;
	width: 200px;
	margin: 1em 1em 0 0;
}
#Categories h1 a, #Categories h1 a:hover
{ color: white; text-decoration: none; }
#Categories ul
{
	margin: 0 0 1em 0;
	max-height: 25em;
	overflow: scroll;
}
#Categories ul li a
{
	display: block;
	padding: 0.5em;
	text-decoration: none;
	font-style: normal;
	color: black;
	border-bottom: solid 1px rgb(0,0,102);
}
#Categories ul li a:hover
{
	color: white;
	background-color: rgb(100,100,255);
}
#Products
{
	float: left;
	width: 507px;
	margin: 1em 0;
}
h3#Notepad
{
	clear: both;
}
h3#Notepad a
{
	display: block;
	margin-bottom: 0.5em;
	padding: 0.5em;
	border: solid 1px rgb(255,128,0);
	background: rgb(255,204,102);
	text-align: center;
	color: black;
	text-decoration: none;
}
h3#Notepad a:hover
{
	background: rgb(255,128,0);
	color: white;
}
form#Notepad, form#Submit
{
	width: 100%;
	height: auto;
	margin-top: -1em;
	padding: 1em;
	border: none;
}
form#Notepad fieldset
{ margin-bottom: 2em; }
form#Notepad legend
{
	font-size: 1.5em;
	font-color: #000066;
	font-weight: bold;
}
form#Notepad label,
form#Notepad div.label
{
	display: block;
	float: left;
	margin: 0 1em 1em 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: black;
	font-weight: normal;
}
form#Notepad table {width: 456px;}
form#Notepad td.item {width: 380px;}
form#Notepad div.label label {display: inline;}
form#Notepad div.label input {width: 1em; display: inline;}
#Products fieldset#Items td {vertical-align: middle;}
form#Notepad tr:hover td.delete
{ background: url("/images/remove_from_notepad.png") left center no-repeat; }
form#Notepad input { width: 215px; }
form#Notepad td.quantity {width: 4.5em;}
form#Notepad #notepad_phone, form#Notepad #notepad_account, form#Notepad #notepad_email, form#Notepad #notepad_company {width: 98px;}
form#Notepad fieldset#Items input {width: 3em; font-size: 14px;}
form#Notepad textarea
{
	display: block;
	width: 456px;
	height: 100px;
}

#Products ul
{ margin-left: 0; }
#Products li
{ margin-bottom: 1em; }
img.GroupImage
{
	float: right;
	margin: 0.5em 0 0.5em 0.5em;
}
ul.Gallery
{ float: right; }
br.GroupsDivider
{ margin: 2em; }
#Products h2
{ color: black; }
#Products table
{
	clear: both;
	width: 100%;
	border-collapse: collapse;
}
th.CatalogNumber
{ width: 65px; }
#Products thead
{ border-bottom: solid 2px black; }
#Products td
{ vertical-align: top; }
#Products td.AddToNotepad
{
	text-align: right;
	width: 12px;
	padding-right: 6px;
	vertical-align: middle;
}
#Products tr:hover td.AddToNotepad
{ background: url("/images/add_to_notepad.png") right no-repeat; }
#Products tr.row1
{ background-color: rgb(220,220,255); }
#Products tr.Subheader
{
	border-bottom: solid 1px rgb(100,100,100);
	background: none;
}
#Products tr.Subheader td
{
	padding-top: 0.5em;
	vertical-align: bottom;
}
#Products tr.Subheader td
{ font-weight: bold; }
#Products th
{
	font-size: 10px;
	font-weight: bold;
}
#Products p.Comment
{
	font-size: 10px;
	font-style: italic;
	color: rgb(50,50,50);
}
#Products td.PseudoTable
{ padding: 1em 0 0 1em; }
#MSDS {clear: both;}
#Groups li, #MSDS li
{ float: left; }
#Groups a, #MSDS a
{
	display: block;
	width: 225px;
	padding: 0.5em;
	color: black;
	text-decoration: none;
	border: solid 4px white;
}
#MSDS a {text-align: center;}
#Groups a:hover, #MSDS a:hover
{ border-color: #CC0000; }
#Groups strong, #MSDS strong
{
	display: block;
	padding: 0.5em;
	color: white;
	font-weight: normal;
	background-color: #000066;
}
#Groups img
{
	display: block;
	margin: 0.5em auto;
}
div.pagination
{
	clear: both;
	float: none;
}
div.pagination span, div.pagination a
{
	display: block;
	float: left;
	margin: 0.5em 0.5em 0.5em 0;
	padding: 0.25em 0.5em;
}
div.pagination a
{
	background-color: #000066;
	color: white;
	text-decoration: none;
}
div.pagination span.current, div.pagination a:hover
{
	background-color: #CC0000;
	color: white;
}
/*
Trying to deal with wrapped pagination
div.pagination span.gap
{
	clear: both;
	margin-left: 50px;
}
*/
/*-------- Job Application -------------*/
em
{
	font-style: italic;
	font-size: 0.9em;
}
hr
{
	float: left;
	clear: both;
	width: 100%;
	margin: 1em 0;
	border-bottom-style: solid;
	border-bottom-width: 4px;
	border-bottom-color: black;
}
#JobApplication
{ padding: 0.5em 0; }
#JobApplication form
{
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: none;
}
#JobApplication form h1
{
	margin: 0;
	padding: 0.5em;
	line-height: 1em;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	color: white;
	background-color: black;
}
#JobApplication form fieldset
{
	margin-bottom: 1em;
	padding-top: 0.5em;
	border: solid 1px black;
}
#JobApplication form fieldset p
{ margin: 0 0.5em 1em 0.5em; }
#JobApplication form legend
{ display: none; }
#JobApplication form label,
#JobApplication form div.label
{
	display: block;
	float: none;
	clear: both;
	padding: 0.5em;
	font-size: 13px;
	color: black;
	font-weight: normal;
}
#JobApplication form div.label label
{
	display: inline;
	padding: 0.5em 1em 0.5em 0
}
#JobApplication form input
{
	width: auto;
	font-size: 14px;
}
#JobApplication form div.label input
{ display: inline; }
#JobApplication form label.Inline,
#JobApplication form div.Inline
{
	display: inline;
	margin-right: 0;
	padding-right: 0;
}
.Inline input
{ display: inline; }
#JobApplication form div.Block label
{ display: block; }
#JobApplication form div.Education
{ clear: both; }
#JobApplication form div.Names label,
#JobApplication form div.Names div.label,
#JobApplication form div.Addresses label,
#JobApplication form div.Education label,
#JobApplication form div.Education div.label
{
	float: left;
	clear: none;
}
#job_application_resume {display: inline;}
#JobApplication form div.Names label input { width: 210px; }
#JobApplication form div.Education label input { width: 165px; }
#JobApplication form div.Names div.label input, #JobApplication form div.Education div.label input { width: auto; }
#JobApplication form div.Addresses label input.Street { width: 180px; }
#JobApplication form div.Addresses label input.City { width: 130px; }
#JobApplication form div.Addresses label input.State { width: 3em; }
#JobApplication form div.Addresses label input.Zip { width: 7em; }
#JobApplication form div.Addresses label input.Date { width: 5em; }
#JobApplication form label.FloatLeft, #JobApplication form div.FloatLeft {float: left; clear: none;}
#JobApplication form div.Unemployment label {float: left; clear: none;}
#JobApplication form div.Unemployment input {width: 575px;}
#JobApplication form div.Unemployment input.Date {width: 7em;}
button {display: block; margin: 1em auto;}
#JobApplication form div.YesNoAnswer {clear: both;}
#JobApplication form div.YesNoAnswer label, #JobApplication form div.YesNoAnswer div.label {width: 300px; float: left; clear: none;}
#JobApplication form div.YesNoAnswer div.label label {display: inline; width: auto; padding: 0.5em 1em 0.5em 0;}
#JobApplication form label.Required, #JobApplication form div.Required, #ContactInformation label.Required {color: #CC0000; font-weight: bold;}
div.fieldWithErrors {display: inline;}
div.fieldWithErrors input {background-color: rgb(255,204,102);}
div#errorExplanation, div#errorExplanation h2 
{
	color: #CC0000;
	text-align: center;
	margin-bottom: 1em;
}
#ProductSearch, #MSDSSearch
{
	width: 180px;
	height: auto;
	margin: 0 0 1em 0;
	padding: 6px;
	border: solid 4px #000088;
}
#ProductSearch input, #MSDSSearch input
{
	width: 174px;
	font-size: 14px;
}
#Brands
{
	margin: 0;
	padding: 0;
}
/*#Brands > li {clear: both;}*/
#Brands ul {margin: 0 0 5em 0;}
#Brands h2 {font-size: 3em; line-height: 1em; border-bottom: solid 1px;}
#Brands li
{
	float: left;
	margin: 0.5em 1.5em 0.5em 0;
}
#Brands li a
{
	color: black;
	text-decoration: none;
}
#Brands li a:hover
{ background-color: rgb(200,200,200); }
div.Flash
{
	clear: both;
	float: left;
	width: 94%;
	margin: 1em;
	padding: 0.5em;
	border: solid 1px rgb(255,128,0);
	background: rgb(255,204,102);
	text-align: center;
}
div.Box {margin: 1em 0 1em 3em;}
.NewBar
{
	clear: both;
	margin: 0.5em 0;
	padding: 0.5em;
	line-height: 1em;
	float: left;
	width: 97%;
	font-size: 18px;
	font-weight: normal;
}
h1.NewBar {background-color: black;}
h2.NewBar {background-color: gray;}
h3.NewBar {background-color: white; border: solid 2px #006; font-size: 14px;}
h5.NewBar {background-color: white; border: solid 2px #600; font-size: 12px;}
.NewBar a
{
	display: block;
	color: white;
	text-decoration: none;
}
h3.NewBar dl, h5.NewBar dl {float: right; font-size: 10px; text-align: center;}
.NewBar a:hover
{
	text-decoration: none;
	background-image: url("/images/arrow.png");
	background-position: center right;
	background-repeat: no-repeat;
}
h3.NewBar a:hover, h5.NewBar a:hover {background: none;}
.highlight {background-color: rgb(255,204,102); font-weight: inherit;}
#SpecialSavings {margin: 2em 0;}
#Spotlight li
{
	float: left;
	width: 300px;
	height: 350px;
	margin: 0.5em;
	text-align: center;
}
#Spotlight li a
{
	display: block;
	padding: 0.5em;
	text-decoration: none;
	border: solid 2px rgb(175,175,175);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
#Spotlight li a:hover {background: rgb(225,225,225);}
#FeaturedBrands li {margin: 2em 0;}