/* ===== GLOBAL, OVERRIDING STYLES ==================================================================================================== */

body {
	behavior: url(http://www.larsonsystems.com/site_support/css/csshover.htc);
	text-align: center; /* IE hack (part 1 of 2) for forcing all content to be centered */
	margin: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #555555;
}

table {
	background-color: #FFFFFF;
}

h1 {
	font-family: Trebuchet MS, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #AA0000;
	margin: 0;
	padding: 0 0 10px 0;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	margin: 0;
	padding: 0 0 10px 0;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	margin: 0;
	padding: 0 0 10px 0;
}

h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	margin: 0;
	padding: 0 0 10px 0;
}

p {
	margin: 0 0 10px 0;
}

a {
	font-weight: bold;
	color: #0066CC;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:active {
	color: #666666;
	text-decoration: underline;
}

ul {
	margin-top: 3px;
}

/* ===== IE6 WARNING BIT ==================================================================================================== */

.ie6_alert {
	clear: both;
	padding: 5px;
	background-color: #FF0000;
	background-image: url(../../images/red_bar_tall.gif);
	border: 1px solid #333333;
	color: #FFFFFF;
}

.ie6_alert a {
	font-weight: bold;
	color: #FFFF00;
	text-decoration: none;
}

.ie6_alert a:hover {
	text-decoration: underline;
}

.ie6_alert a:active {
	color: #FFFFFF;
	text-decoration: underline;
}

/* ===== BROWSER DETECTION TEST ==================================================================================================== */

.browser_detection_test {
	height: 128px;
	background: url(../../browser_support/images/unknown_browser.jpg) no-repeat center center;
	[if IE] background: url(../../browser_support/images/internet_explorer.png) no-repeat center center;
	[if IEMac] background: url(../../browser_support/images/internet_explorer_mac.jpg) no-repeat center center;
	[if Gecko] background: url(../../browser_support/images/gecko.png) no-repeat center center;
	[if Webkit] background: url(../../browser_support/images/webkit.png) no-repeat center center;
	[if Opera] background: url(../../browser_support/images/opera.png) no-repeat center center;
	[if Konq] background: url(../../browser_support/images/konqueror.png) no-repeat center center;
	[if SafMob] background: url(../../browser_support/images/safari_mobile.png) no-repeat center center;
	[if IEmob] background: url(../../browser_support/images/windows_mobile.jpg) no-repeat center center;
	[if PSP] background: url(../../browser_support/images/psp_web_browser.png) no-repeat center center;
	[if NetF] background: url(../../browser_support/images/netfront.jpg) no-repeat center center;
}

/* ===== PAGE LAYOUT ==================================================================================================== */

.wrapper {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: left; /* IE hack (part 2 of 2) for forcing all content to be centered */
	background-color: #FFFFFF;
	border-width: 1px;
	border-style: solid;
	border-color: #aaa #777 #444 #aaa;
}

.wrapper_option {
	margin-left: auto;
	margin-right: auto;
	text-align: left; /* IE hack (part 2 of 2) for forcing all content to be centered */
	background-color: #FFFFFF;
}

.side_nav {
	float: left;
	width: 150px; /* Make sure the #menu style matches this dimension */
	margin: 15px 15px 0 0;
}

.body {
	float: left;
	width: 720px; /* This dimension should be .wrapper - .side_nav - all margins */
	margin: 15px 10px 0 0;
}

.breadcrumb {
	font-family: Trebuchet MS, sans-serif;
	font-size: 11px;
	font-weight: bold;
	margin-bottom: 10px;
}

.crumb { /* OBSOLETE 2010-02-01; PLEASE PHASE OUT */
	text-align: left;
	margin-left: 10px;
	font-family: Trebuchet MS, sans-serif;
	font-size: 11px;
	font-weight: bold;
}

.page_title {
	margin-bottom: 15px;
	background-image: url(../../images/silver_bar.gif);
	background-repeat: repeat-x;
	font-family: Trebuchet MS, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	border-color: #aaa #777 #444 #aaa;
}

/* ===== MAIN CONTENT FORMATTING ==================================================================================================== */

.content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.content table {
/*	margin: 0 auto;*/
	border: 1px solid #AAAAAA;
	border-collapse: collapse;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

.table_subhead {
	background-color: #C7DAEB;
	font-weight: bold;
}

.content th {
	padding: 4px;
	border: 1px solid #666666;
	text-align: left;
	background-color: #0066CC;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
	color: #FFFFFF;
}

.content td {
	padding: 4px;
	border: 1px solid #AAAAAA;
}

.alt_table_bg { /* this style can be used for any table to help differentiate rows or row sections from other rows; like even / odd row highlighting */
	background-color: #EBEBEB;
}

.close_window {
	text-align: center;
}

/* ===== PRODUCT MENU PAGE LAYOUT ==================================================================================================== */

.product_category {
	float: left;
	width: 220px;
	margin: 0 9px 20px;
	[if IE 6] margin: 0 4px 20px;
	border-width: 1px;
	border-style: solid;
	border-color: #aaa #777 #444 #aaa;
}

.product_category a {
	display: block;
	font-size: 11px;
	text-decoration: none;
	background-color: #EFEFEF;
}

.product_category a:hover {
	text-decoration: none;
	background-color: #BFD4E8;
}

.product_category img {
	margin: 10px;
	border: none;
}

.product_category_header {
	display: block;
	margin: 0;
	padding: 10px 10px 0 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

.product_category_short_desc {
	display: block;
	margin: 0;
	padding: 0 10px 10px 10px;
	color: #666666;
	font-weight: normal;
/*	text-align: justify;*/
}

.product_category_link {
	display: block;
	margin: 0;
	padding: 0 10px 10px 10px;
}

.product_category ul { /* This is a block element and as such should not be placed within an <a> tag; FireFox gets confused by it */
	margin: 0 10px 0 12px;
	padding: 0 10px 0 12px;
	color: #666666;
	font-weight: normal;
}

/* ===== PRODUCT SPECIFIC PAGE LAYOUT ==================================================================================================== */

.product_header {
	overflow: auto;
}

.product_image_wide { /* for product images that would look best spread across the top of the content area; maximum dimensions of image should be 720px wide (width of .body) by about 300px tall */
	text-align: center;
	z-index: 8;
}

.product_image_tall { /* for product images that would look best against the edge of the content area; maximum dimensions of image should be about 300px wide by about 400px tall */
	float: right;
	z-index: 8;
}

#order_info, #force_specs, #length_specs, #torque_specs, #angle_specs {
	clear: both;
/*	margin-bottom: 15px;*/
}

#order_info table, #force_specs table, #length_specs table, #torque_specs table, #angle_specs table {
/*	margin: 0 auto; (this will center tables) */
}

#force_specs td, #length_specs td, #torque_specs td, #angle_specs td {
	text-align: center;
}

.important_notice, .video_center, .download_center {
	clear: both;
	overflow: auto;
	border-width: 1px;
	border-style: solid;
	border-color: #aaa #777 #444 #aaa;
	margin-bottom: 15px;
	padding: 5px;
	background-image: url(../../images/silver_bar_tall.gif); /* this image is 65px tall */
	background-repeat: repeat-x;
	background-color: #939393;
}

.important_notice_badge, .video_center_badge, .download_center_badge {
	float: left;
	margin-right: 10px;
}

.important_notice p {
	margin: 7px 0 0 0;
}

.video_center ul, .download_center ul { /* remove bullets and list indents */
	list-style: none;
	padding: 0;
	margin: 7px 0 0 0;
}

.video_center li, .download_center li {
	display: inline;
	padding: 0;
	margin-right: 10px;
	white-space: nowrap;
}

.video_center img, .download_center img {
	margin-right: 3px;
	margin-bottom: 3px;
}

/* ===== PRODUCT OPTION SPECIFIC PAGE LAYOUT ==================================================================================================== */

.product_option_image {
	text-align: center;
	margin-bottom: 15px;
}

.product_option_description {
	margin-bottom: 15px;
}

.product_option_order_info table {
	margin: 0 auto;
	margin-bottom: 15px;
}

/* ===== IMAGE POSITIONING ==================================================================================================== */

.image {
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 10px 0px;
}

.image-left {
	float: left;
	margin: 0px 10px 10px 0px;
	padding: 0px 10px 10px 0px;
}

.image-right {
	float: right;
	margin: 0px 0px 10px 10px;
	padding: 0px 0px 10px 10px;
}

.image-caption {
	margin-top: 2px;
	text-align: center;
	font-size: 90%;
	font-style: italic;
}

/* ===== TOP NAVIGATION ==================================================================================================== */

.nav_top_container {
	text-align: center;
	padding: 2px 5px 0 5px;
}

.nav_top_link {
	font-family: Trebuchet MS, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}

.nav_top_link:hover {
	text-decoration: underline;
}

.nav_top_link:active {
	color: #666666;
	text-decoration: underline;
}

/* ===== SIDE NAVIGATION ==================================================================================================== */

#menu {
	width: 150px; /* set width of menu */
	background: #eee;
}

#menu ul { /* remove bullets and list indents */
	list-style: none;
	margin: 0;
	padding: 0;
}

#menu h2, #menu a { /* style, color and size links and headings to suit */
	display: block;
	margin: 0;
	padding: 2px 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #aaa #777 #444 #aaa;
	font: bold 11px/16px Arial, Helvetica, sans-serif;
}

#menu h2 {
	color: #FFFFFF;
	background: #0066CC;
	text-transform: uppercase;
}

#menu a {
	color: #000;
	background: #efefef;
	text-decoration: none;
}

#menu a:hover {
	color: #0066CC;
	background: #fff;
	text-decoration: underline;
}

#menu a:active {
	color: #000000;
	background: #fff;
	text-decoration: underline;
}

#menu li { /* make the list elements a containing block for the nested lists */
	position: relative;
} 

#menu ul ul ul {
	position: absolute;
	top: 1;
	left: 100%; /* to position them to the right of their containing block */
	width: 100%; /* width is based on the containing block */
	z-index: 9; /* these should appear over anything on the page, except for the Lightbox stuff */
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

<!--[if IE]>
<style type="text/css" media="screen">
body {
	font-size: 100%; /* enable IE to resize em fonts */
} 
#menu ul li {
	float: left; /* cure IE5.x "whitespace in lists" problem */
	width: 100%;
}
#menu ul li a {
	height: 1%; /* make links honour display: block; properly */
} 

#menu a, #menu h2 {
	font: bold 0.7em/1.4em Arial, Helvetica, sans-serif; 
	/* if required use em's for IE as it won't resize pixels */
} 
</style>
<![endif]-->

.dummy_style { /* for some reason this doesn't show up for other pages... probably has something to do with the IE if statement above? */
}

/* ===== SIDE HELPER ==================================================================================================== */

#side_nav_helper {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: italic;
	color: #999999;
	margin-left: 10px;
}

#side_nav_helper img {
	border: 0;
	vertical-align: middle;
}

#side_nav_helper a {
	font-size: 12px;
	font-style: normal;
	color: #333333;
	text-decoration: none;
}

#side_nav_helper a:hover {
	color: #0066CC;
	text-decoration: none;
}

#side_nav_helper a:active {
	color: #666666;
	text-decoration: none;
}


/* ===== NEW UNCATEGORIZED STYLES ==================================================================================================== */

.link_icon {
	border: 0;
	vertical-align: middle;
}

.unit_converter_icon {
	float: right;
	margin-left: 10px;
	border: 0;
	vertical-align: middle;
}


/* ===== ????????????? ==================================================================================================== */

.subhead {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

.title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}

.copy {
	text-align: left; /* IE hack (part 2 of 2) for forcing all content to be centered */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.copy_red {
	font-family: Arial, Helvetica, sans-serif;
	color: #FF0000;
}

.border {
	border-width:1px;
	border-style:solid;
	border-color:#000000;
}

.border_right {
/*	border-left-width:0px;
	border-bottom-width:0px;
	border-top-width:0px;
	border-right-width:1px;
	border-style:solid;
	border-color:#666666;*/
}

.border_left {
	border-left-width:1px;
	border-bottom-width:0px;
	border-top-width:0px;
	border-right-width:0px;
	border-style:solid;
	border-color:#666666;
}

.aqua {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #9FD0F3;
}

.aqua_bold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #9FD0F3;
	font-weight: bold;
}

.grey {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #EEEEEE;
}