/*	======================================================
	Master Style Sheet - All browsers
	------------------------------------------------------
	You can use the talbe of contents below by using the
	Find feature of your editor and then looking for the
	relevant symbol - e.g. search for @1 to get to the
	Normalization section.
	
	TABLE OF CONTENTS:
	
		Normalization				@1
		General Elements			@2
		Branding					@3
		Navigation					@4
		Content						@5
		Site Information			@6

	======================================================	*/


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

	@1 NORMALIZATION - Stripping default browser styling
	
	======================================================	*/

body, div, dl, dt, dd, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
	margin: 0;
	padding: 0;
	}

h1, h2, h3, h4, h5, h6, th, td, table{
	font-size: 100%;
	}

ol {
	list-style: none;
	}

address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
	}

fieldset, img {
	border: 0;
	}

caption, th {
	text-align: left;
	}

q:before, q:after {
	content:'';
	}


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

	@2 GENERAL ELEMENTS - Global element styling
	
	======================================================	*/

html {
	text-align: center;
	}

body {
	position: relative;
	min-width: 780px;
	margin: 0 auto;
	text-align: left;
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
	font-size: 100%;
	line-height: 1.3em;
	background: #111;
	}

h1 {
	font-size: 170%;
	font-weight: normal;
	padding: 0 0 0.5em 0;
	}
	
h2 {
	color: #000080;
	padding: 0.2em 0 0.5em 0;
	font-size: 140%;
	font-weight: normal;
	}

h3 {
	font-size: 120%;
	padding: 0.2em 0 0.4em 0;
	font-weight: normal;
	}

h3 a {
	font-weight: normal;
	}

h3 .focus {
	color: #2a699a;
	font-size: 120%;
	}

.focus {
	color: #2a699a;
	font-size: 120%;
	}

h4 {
	font-size: 88%;
	padding: 0.2em 0 0.4em 0;
	font-weight: bold;
	}

h5 {
	color: #a30c00;
	font-size: 120%;
	padding: 0.2em 0 0.4em 0;
	font-weight: bold;
	}

p {
	padding: 0 0 1em 0;
	}

a {
	color: #00bd2e;
	padding: 0 2px;
	font-weight: bold;
	text-decoration: none;
	}


a:hover {
	color: #00ed2c;
	border-bottom: none;
	}

strong {
	font-weight: bold;
	}

em {
	font-style: italic;
	}

fieldset {
	font-size: 10pt;
	background: #ebebeb;
	padding: 5px 20px;
	border: solid 1px #d1d1d1;
	margin-bottom: 10px;
	}

legend {
	color: #000;
	font-size: 13pt;
	padding: 5px 10px;
	}

td {
	text-align: left;
	vertical-align: middle;
	}

input {
	margin-bottom: 7px;
	}

select{
	margin-bottom: 7px;
	}
	
/* 	------------------------------------------------------
	NOTE: Clearing div:
	-------------------
	The following is a clearing element used to pull the 
	container div over the content in order to add a unique 
	background color for that section. Not very semantic, 
	but a worthy sacrifice for the sake of a stretchable 
	footer, which uses the body background color so it can 
	be stretched down with larger browser windows.
	------------------------------------------------------	*/

.clear {
	clear: both;
	height: 25px;
	}

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

	@3 BRANDING - Page header and the logo
	
	======================================================	*/

#branding {
	height: 80px;
	background: url(../images/branding.gif) repeat-x #222;
	border-bottom: solid 0px #a52b1b;
	}

#branding-test {
	height: 80px;
	background: url(../images/branding-test.gif) repeat-x #222;
	border-bottom: solid 0px #a52b1b;
	}

#logo {
	width: 960px;
	height: 80px;
	margin: 0 auto;
	}

#logo a, #logo a:hover {
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	}

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

	@4 NAVIGATION - Horizontal navigation menu
	
	======================================================	*/

#navigation {
	position: relative;
	background: url(../images/tabs.gif) repeat-x #1f1f1f;
	height: 2.1em;
	border-bottom: solid 2px #000;
	}

#navigation ul {
	padding: 0;
	position: relative;
	left: 50%;
	margin: 0 0 0 -472px;
	list-style: none;
	float: left;
	}

#navigation ul li {
	float: left;
	background: transparent;
	padding-left: 13px;
	}
	
#navigation li a {
	display: block;
	text-decoration: none;
	float: left;
	background: transparent;
	padding: 0.6em 1em 0.5em 0.1em;
	font-family: "Trebuchet MS", sans-serif;
	font-size: 15px;
	color: #fff;
	text-shadow: #000 0 0 1px;
	font-weight: bold;
	border-bottom: none;
	}
	
#navigation ul li a:hover {
	color:#e87132;
	}

/* 	------------------------------------------------------
	NOTE: Automatic 'current' page tab system
	------------------------------------------
	The code below allows CSS to handle the visual tab
	styling of the current page. So on the top navigation
	menu, the page that you are currently on will have its
	link wrapped around in a tab image to indicate to the
	visitor where they currently are. This is done by
	adding three elements to each page:
	
	1) Each page body should have an id
	2) An id for each link in the navigation menu
	3) An id for each list item (<li>) in the menu
	
	You can then write out two selectors below that will
	match the body id with the link and list item id,
	thus providing the relevant left and right tab images
	that are used as a background to that link. Just add
	a comma to the last item and simply add more pages
	below each selector to complete the nav menu.
	------------------------------------------------------	*/

body#productinfo_page #productinfo_tab,
body#store_page #store_tab,
body#policies_page #policies_tab,
body#support_page #support_tab,
body#faq_page #faq_tab,
body#company_page #company_tab,
body#contact_page #contact_tab,
body#media_page #media_tab {
	background: url(../images/tab-left.gif) top left no-repeat #f5f5f5;	
	}

body#productinfo_page #productinfo_link,
body#store_page #store_link,
body#policies_page #policies_link,
body#support_page #support_link,
body#faq_page #faq_link,
body#company_page #company_link,
body#contact_page #contact_link,
body#media_page #media_link {
	background: url(../images/tab-right.gif) top right no-repeat #f5f5f5;
	color: #000;
	text-shadow: #fff 0 0 1px;
	border-bottom: solid 2px #f5f5f5;
	}

/*
	"Shopping Cart" and "Sign In" buttons
	------------------------------------------------------	*/

#nav-extras {
	margin-left: 550px;
	}

#nav-extras a {
	border-bottom: none;
	}

#nav-extras a:hover {
	background: none;
	}
	
#nav-extras a img {
	position: relative;
	top: 0.4em;
	}

* + html #nav-extras a img { 
	top: -0.2em; 
	}


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

	@5 CONTENT - Main content area and the sidebar
	
	======================================================	*/
	
#container {
	padding-top: 10px;
	position: relative;
	background: url(../images/container.gif) repeat-x bottom #f5f5f5;
	}

#content {
	position: relative;
	width: 960px;
	margin: auto;
	}

#main {
	font-size: 88%;
	position: relative;
	background: url(../images/main.gif) no-repeat transparent;
	width: 630px;
	float: left;
	padding: 20px 30px 0 32px;
	min-height: 400px;
	}

/*
	Pages with no sidebar
	------------------------------------------------------	*/

#main_full {
	font-size: 88%;
	position: relative;
	background: url(../images/main_full.gif) no-repeat transparent;
	width: 900px;
	float: left;
	padding: 20px 32px 0 32px;
	min-height: 400px;
	}
	
/*
	Sidebar
	------------------------------------------------------	*/

#sidebar {
	color: #555;
	position: relative;
	width: 245px;
	float: left;
	padding: 20px 0 0 0;
	font-size: 84%;
	}

#sidebar h2 {
	border-bottom: dashed 1px #ddd;
	padding: 0 0 0.3em 0;
	margin: 0 0 0.5em 0;
	}

#cellotape {
	position: absolute;
	left: 50%;
	margin-left: -50px;
	top: -24px;
	width: 81px;
	height: 47px;
	}

.special {
	position: relative;
	background: url(../images/special.gif) no-repeat bottom #fff6ca;
	padding: 15px 20px 10px 20px;
	margin: 5px 0 15px 0;
	line-height: 1.4em;
	width: 580px;
	}

.special a {
	border-bottom-color: #d6cda5;
	}

.special a:hover {
	color: #ff9000;
	background-color: #ffefa6;
	}

.highlight {
	background: #F8F2E6;
	padding: 15px 20px 0 20px;
	border: dashed 1px #adadad;
	margin: 5px 0 15px 0;
	}

.highlighter {
	background: #ffefa0;
	font-weight: bold;
	padding: 0 2px;
	}

/*
	Contact
	------------------------------------------------------	*/

#contact_tel {
	padding-left: 40px;
	background: url(../images/callskype.gif) no-repeat 0 2px;
	}

#contact_mobile {
	padding-left: 40px;
	background: url(../images/callmobile.png) no-repeat 0 2px;
	}

#contact_email {
	padding-left: 40px;
	background: url(../images/writeemail.gif) no-repeat 0 2px;
	}

#clientform input, textarea {
	font-size: 10pt;
	font-family: Arial, san-serif;
	padding: 3px;
	}

#clientform fieldset {
	font-size: 10pt;
	background: #ebebeb;
	padding: 5px 20px;
	border: solid 1px #d1d1d1;
	margin-bottom: 10px;
	}

#clientform legend {
	color: #000;
	font-size: 13pt;
	padding: 5px 10px;
	}

.field_description {
	color: #a5a5a5;
	font-size: 9pt;
	}

.required_field {
	color: #ff0000;
	font-weight: bold;
	}

/*
	Sidebar Navigation
	------------------------------------------------------	*/
	
#sidebar #sidenav ul {
	list-style-type: none;
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 105%;
	white-space: nowrap;
	}

#sidebar #sidenav ul li {
	display: inline;
	}

#sidebar #sidenav ul li a {
	display: block;
	margin-bottom: -10px;
	width: 241px;
	height: 1em;
	line-height: 1em;
	border-bottom: 0;
	background: url(../images/linkarrow.gif) no-repeat left center;
	text-indent: 18px;
	}

#sidebar #sidenav ul li a:hover {
	color: #00ed2c;
	background: url(../images/linkarrow.gif) no-repeat right center;
	}


#free-download {
	margin-bottom: 15px;
	background: #ffd784;
	}
	
#free-download p {
	color: #000;
	font-size: 105%;
	padding: 0 15px 10px 15px;
	background: url(../images/free-download-bottom.gif) no-repeat left bottom;
	text-align:center;
	}

#free-download a { border-bottom: none; padding: 0; }
#free-download a:hover { background: none; padding: 0; }
	
/*
	Mini Cart
	------------------------------------------------------	*/

.mini-cart {
	background: url(../images/shopping-cart-background.gif) no-repeat;
	padding: 40px 14px 0 14px;
	}

#sidebar #item-list a {
	display: block;
	background: none;
	margin-bottom: 5px;
	border-bottom: 0;
	padding: 0;
	}

#price-total {
	text-align: right;
	border-top: dashed 1px #959595;
	padding: 3px 3px 0 0;
	display: block;
	font-weight: bold;
	color: #2a8000;
	margin-bottom: 10px;
	}

/* Strip link effects from image buttons */

.image-link { border-bottom: none !important; padding: 0; }
.image-link:hover { background: none !important; padding: 0; }

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

	@6 SITE INFORMATION - Footer
	
	======================================================	*/

#footer-container {
	background: url(../images/footer.gif) repeat-x bottom #333;
	border-top: solid 2px #111;
	}
	
#footer-container p {
	padding: 0;
	}

#footer-container a {
	color: #ff7045;
	border-bottom: solid 1px #a7320e;
	}

#footer-container a:hover {
	color: #ffae00;
	background: #973000;
	border-bottom: none;
	}

#footer-container h4 {
	text-shadow: #000 0 0 2px;
	color: #ff8435;
	font-size: 1.4em;
	padding: 0.5em 0;
	font-weight: bold;
	}

#footer-content {
	color: #b8b8b8;
	width: 960px;
	margin: 0 auto;
	font-size: 88%;
	}

#footer-info {
	position: relative;
	width: 640px;
	float: left;
	margin-left: 35px;
	padding: 5px 0 1px 0;
	}

#footer-contact {
	position: relative;
	width: 250px;
	float: right;
	padding: 5px 0 1px 0;
	}

#contact-info img {
	vertical-align: middle;
	}
	
#footer-info p {
	padding-left: 0px;
	}

/*
	Legal - Copyright Message
	------------------------------------------------------	*/

#legal {
	padding: 0.3em 0;
	border-top: solid 2px #000;
	background: #111;
	}

#legal p {
	color: #555;
	font-size: 80%;
	padding: 10px 0 10px 70px;
	width: 960px;
	margin: 0 auto;
	}

#legal a {
	color: #00bd2e;
	border-bottom: none;
	}

#legal a:hover {
	color: #00ed2c;
	background: #261f06;
	border-bottom: none;
	}	
	
/*
	Product Summary
	------------------------------------------------------	*/

.product-summary {
	position: relative;
	padding: 10px;
	margin-bottom: 15px;
	min-height: 170px;
	}

.product-title {
	font-size: 120%;	
	}

.product-summary p {
	position: relative;
	padding: 0 0 5px 160px;
	}
	
.product-summary img {
	position: absolute;
	top: 10px;
	left: 0;
	}

.prod-display {
	position: relative;
	padding: 10px;
	margin-bottom: 15px;
	min-height: 220px;
	}

.prod-display p {
	position: relative;
	padding: 0 0 5px 240px;
	}
	
.prod-display img {
	position: absolute;
	top: 10px;
	left: 0;
	}


.add-to-cart img {
	position: relative;
	top: 0;
	}

.add-to-cart input {
	position: relative;
	top: 0;
	}

/* Removes underline and link effects on the "Add to cart" button */

.add-to-cart a { border-bottom: none; }
.add-to-cart a:hover { background: none; }
	
	/*	------------------------------------------------------

	DD Additional Styles
	
	======================================================	*/

SPAN.required_error_msg {
    MARGIN-LEFT: 10px; TEXT-ALIGN: left; COLOR: red; FONT: 12px Arial, Helvetica, sans-serif;
}

TD.ListHeading {
	TEXT-ALIGN: left; 
	VERTICAL-ALIGN: middle; 
	font-size: small; 
	FONT-WEIGHT: Bold; 
	padding: 2px 10px;
	background: #D7EBFF;
}

TD.AmtHeading {
	TEXT-ALIGN: right; 
	VERTICAL-ALIGN: middle; 
	font-size: small; 
	FONT-WEIGHT: Bold; 
	padding: 2px 10px;
	background: #D7EBFF;
}

TD.ListField{
	TEXT-ALIGN: left; 
	VERTICAL-ALIGN: top; 
	font-size: small; 
	padding: 2px 10px; 
	white-space: nowrap;
}

TD.AmtField {
	TEXT-ALIGN: right; 
	VERTICAL-ALIGN: top; 
	font-size: small; 
	padding: 2px 10px;
	white-space: nowrap;
}

TD.ListTopBorder{
	border-top: 1px solid #c2c2c2;
}

input.btn{
   color:#C00;
   font-size:84%;
   font-weight:bold;
}

.awards {
	background: url(../images/sidebar_lightorange.gif) no-repeat;
	padding: 14px 17px;
	min-height: 350px;
	} 

.testimonials {
	background: url(../images/sidebar_lightgreen.gif) no-repeat;
	padding: 14px 17px;
	min-height: 200px;
	} 

.news {
	background: url(../images/sidebar_lightorange.gif) no-repeat;
	padding: 14px 17px;
	min-height: 200px;
	} 

.news-summary {
	border-bottom: 1px dashed #555;
	margin-bottom: 2em;
	}
	
.storytitle {
	font-weight: bold;
	}
	
.meta {
	color: #888;
	font-size: 9pt;
	padding-bottom: 6px;
	}	

.postauthor {
	color: #000;
	font-size: 10pt;
	padding-left: 4px;
	}

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

	DD Support Styles
	
	======================================================	*/
	
	.hot_issues {
	background: url(../images/sidebar_lightorange.gif) no-repeat;
	padding: 14px 17px;
	min-height: 100px;
	} 

.related_resources {
	background: url(../images/sidebar_lightgreen.gif) no-repeat;
	padding: 14px 17px;
	min-height: 200px;
	} 

.product_price {
	color: #ff0000;
	font-weight: bold;
	}


TABLE.ShippingOptions TH {
	TEXT-ALIGN: left; 
	VERTICAL-ALIGN: middle; 
	font-size: small; 
	padding: 2px 10px;
	background: #FF8C00;
	font-weight: bold;
	white-space: nowrap;
}

TR.ShippingOptionsSubhead TH {
	TEXT-ALIGN: left; 
	VERTICAL-ALIGN: middle; 
	font-size: small; 
	padding: 2px 10px;
	background: #EBDEC2;
	white-space: nowrap;
}

TABLE.ShippingOptions TD {
	TEXT-ALIGN: center; 
	VERTICAL-ALIGN: middle; 
	font-size: small; 
	padding: 2px 10px;
	background: #FFFFFF;
}

.product_pitch {
    float: right; 
    width: 50%;
    min-height: 250px; 
}

.call_to_action {
    text-align: center;
    vertical-align: middle;
}

TABLE.default 
{
  width: 100%;
  border-collapse: collapse;
}

DIV.headerBox
{
  color: #FFFFFF;
  font-family: verdana, sans-serif;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #FFFFFF;
  border-width: 1px;
  margin: 0px;
  padding: 1px;
  padding-right: 10px;
  height: 24px;
  width: 95%;
  vertical-align: middle;
  text-align: center;
}

TD.headerLeft 
{
  background-color: #CCFFCC;
  color: #333333;
  font-family: verdana, sans-serif;
  font-size: 12px;
  font-weight: bold;
  border: 1px	 solid #006633;
  border-width: 1px;
  margin: 0px;
  padding: 1px;
  border-right-width: 0px;
  padding-left: 10px;
  height: 20px;
  vertical-align: middle;
  text-align: left;
}

TD.headerRight 
{
  background-color: #CCFFCC;
  color: #333333;
  font-family: verdana, sans-serif;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #006633;
  border-width: 1px;
  margin: 0px;
  padding: 1px;
  border-left-width: 0px;
  padding-right: 10px;
  height: 20px;
  vertical-align: middle;
  text-align: right;
  margin-left: 10px;
}

TD.rightAlign
{
  text-align:right;
}