/*This is a link to a ccs with this info: <link rel="stylesheet" href="path/to/css/hlsm.css">*/
/* this is a comment tag */
/*em is a mesurement of times of the cuurent font size*/
/*Any setting within the tag it's self will over ride any seting by a style*/
a {
    color: blue;
}

a:hover {
    color: red;
}

body {
    background: #ffffff;
    font-family: Arial, Helvetica, Sans-serif, serif;
    color: #444444;
    text-align: center;
}

body.selectyear { /* This is the page you select a year to get started */
    font-family: Arial, Helvetica, Sans-serif, serif;
    color: black;
    font-size: 8pt;
    background-color: #FFFFFF;
    margin: 0;
    text-align: center
}

div.selectyear { /* this encases the entire page, this allows a center for the entire page */
    text-align: center;
}

body.selectmodel { /* this page shows a selected year of models to choose from */
    font-family: Arial, Helvetica, Sans-serif, serif;
    color: black;
    font-size: 8pt;
    background-color: #FFFFFF;
    margin: 0;
    text-align: center;
}

div.selectmodel { /* this encases the entire page, this allows a center for the entire page */
    text-align: center;
}

body.viewallmodels { /* This page shows all models of a given line */
    font-family: Arial, Helvetica, Sans-serif, serif;
    color: black;
    font-size: 8pt;
    background-color: #FFFFFF;
    margin: 0;
    text-align: center
}

div.viewallmodels { /* this encases the entire page, this allows a center for the entire page */
    text-align: center;
}

body.selectsection { /* This page shows the sections of a selected model */
    font-family: Arial, Helvetica, Sans-serif, serif;
    color: black;
    font-size: 8pt;
    background-color: #FFFFFF;
    margin: 0;
}

div.selectsection { /* this encases the entire page, this allows a center for the entire page */
    text-align: center;
}

body.navigation { /* This page is the navigation  shown with the diagram and parts list */
    font-family: Arial, Helvetica, Sans-serif, serif;
    color: black;
    font-size: 8pt;
    background-color: #FFFFFF;
    margin: 0;
}

div.navigation { /* this encases the entire page, this allows a center for the entire page */
    text-align: center;
}

body.partslist { /* This page is the parts list */
    font-family: Arial, Helvetica, Sans-serif, serif;
    color: black;
    font-size: 8pt;
    background-color: #FFFFFF;
    margin: 0;
}

div.partslist { /* this encases the entire page, this allows a center for the entire page */
    text-align: center;
}

/* ========== This covers the select year dropdown table a select object ==================*/
table.selectyeartable {
    font-size: 10pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    background-color: #FFFFFF;
    width: 100%;
    padding: 0;
    border: 0;
}

td.selectyeartableheader {
    font-family: Arial, Helvetica, Sans-serif, serif;
    font-size: 20pt;
    font-weight: bold;
}

select.SelectModelYear {
    font-size: 10pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
}

input.SelectModelYear {
    font-size: 10pt;
    font-family: Arial, Helvetica, Sans-serif, serif;

}

/* ========== This covers the model list, both a specific year or all models ==================*/
table.modellist { /*This is the table for the model list */
    font-size: 10pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    background-color: white;
    border: 0;
    margin: auto;
    border-collapse: collapse;
}

tr.year_line { /*This is the header that appears above the list, example: 1999 ATV Model List. This will span 2 columns, the year and model columns */
    font-size: 10pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    color: Black;
    font-weight: bold;
    padding: 0;
    text-align: center;
}

td.year_col {
    text-align: center;
}

tr.year_model { /*This is the Year and Model Header of the list */
    font-size: 10pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    color: #FFFFFF;
    background-color: #38386a;
    font-weight: 900;
    height: 25px;
}

td.year_model_Year { /*This is the cell that has "Year" in it.  This is used to set the width of this column */
    width: 100px;
    text-align: center;
}

td.year_model_Model { /*This is the cell that has "Model" in it.  This is used to set the width of this column */
    width: 400px;
    text-align: center;
}

/*==== This three are the class for the sub models in the model list. Such as Motocross, Dual Purpose, Touring ect. =========== */
tr.Model_SubModel_Row { /* This is the Sub Model Classification */
    color: #ffffff;
    background-color: #888888;
    height: 25px;
}

td.Model_SubModel_Col1 {
    text-align: center;
}

td.Model_SubModel_Col2 {
    color: white;
    font-weight: Bold;
    text-align: left;
}

/*==== This three are the class for the odd numbered rows in the model list =========== */
tr.Model_Line_odd { /* This is the odd rows of the model list */
    background-color: #FFFFFF;
    height: 20px;
}

td.Model_LineYear_odd {
    font-weight: Normal;
    color: #000000;
    text-align: center;
}

td.Model_LineModel_odd {
    font-weight: Normal;
    color: rgb(0, 0, 0);
    text-align: left;
}

/*==== This three are the class for the even numbered rows in the model list =========== */
tr.Model_Line_even { /* This is the even rows of the model list */
    background-color: #C8C8C8;
}

td.Model_LineYear_even {
    font-weight: Normal;
    color: #000000;
    text-align: center;
    height: 20px;
}

td.Model_LineModel_even {
    font-weight: Normal;
    color: #000000;
    text-align: left;
}

/* ========== This is for the selecting a section of a model ==================
There are two tables, 
1.0 Table 1 is the year and model of the unit you are viewing, Refered to as the sel_sec__model
	The first row, refered to as sel_sec__model_row1
		First column is "Year", refered to as sel_sec__model_header_year
		Second column is "Model, refered to as sel_sec__model_header_Model
	The second row, refered to as sel_sec__model_row2
		First column is the actual year of the unit, refered to as sel_sec__model_Year
		Second column is the actual model name, refered to as sel_sec__model_Name
	The third row reads "Sections".  Refered to as sel_sec__model_row3
		One column spanning two columns. Refered to as sel_sec__model_section
2.0 Table 2 is the sections refered to as the section_list. 
	There are 2 types of rows withing this table, sections and subsections.
		Sections are those that contain subsections. ENGINE would be a section, Crankcase would be a subsection.
		Sections rows span 2 columns. Subsections are 2 column rows.
		Sections rows are refered to as sel_sec_main_section
		The column is refered to as sel_sec_main_section_Col
		Subsections rows are refered to as sel_sec_sub_section_even_row and sel_sec_sub_section_odd_row
		Sub_section_odd columns:
			The column one of sub_section_odd is refered to as sel_sec_sub_section_odd_col_1
			The column two of sub_section_odd is refered to as sel_sec_sub_section_odd_col_2
		Sub_section_even columns:
			The column one of sub_section_even is refered to as sel_sec_sub_section_even_col_1
			The column two of sub_section_even is refered to as sel_sec_sub_section_even_col_2
*/

table.sel_sec_model {
    font-size: 10pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    background-color: #ffffff;
    width: 415px;
    border: 0;
    border-collapse: collapse;
    margin: auto;
}

tr.sel_sec_model_row1 {
    background-color: #38386a
}

td.sel_sec_model_header_year {
    font-weight: bold;
    color: white;
    padding: 5px;
    width: 50px;
}

td.sel_sec_model_header_Model {
    font-weight: bold;
    color: white;
    padding: 5px;
}

tr.sel_sec_model_row2 {
    background-color: white;
}

td.sel_sec_model_Year {
    font-weight: bold;
    color: blue;
    padding: 5px;
}

td.sel_sec_model_Name {
    font-weight: bold;
    color: blue;
    padding: 5px;
}

tr.sel_sec_model_row3 {
    background-color: #38386a;
}

td.sel_sec_model_section {
    font-weight: bold;
    color: white;
    text-align: center;
    height: 22px;
}

table.sel_sec_list {
    font-size: 10pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    border: 0;
    border-collapse: collapse;
    margin: auto;
}

tr.sel_sec_main_section {
    color: #ffffff;
    background-color: #888888;
    height: 25px;
}

td.sel_sec_main_section_Col {
    font-size: 10pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    font-weight: bold;
    text-align: left;
}

tr.sel_sec_sub_section_odd_row {
    background-color: #ffffff;
    font-family: Arial, Helvetica, Sans-serif, serif;
    height: 25px;
}

td.sel_sec_sub_section_odd_col_1 {
    width: 10px;
}

td.sel_sec_sub_section_odd_col_2 {
    width: 400px;
    font-weight: normal;
    text-align: left;
    color: white;
}

tr.sel_sec_sub_section_even_row {
    background-color: #C8C8C8;
    height: 25px;
}

td.sel_sec_sub_section_even_col_1 {
}

td.sel_sec_sub_section_even_col_2 {
    text-align: left;
    color: black;
}

/* This is the Navigation page, This shows up on the side of the image
There is less control over this due to the room.  The body is set to 0 margins.


*/
/* This is the table with the general links. It has three rows.
   1. parts finder page
   2. parts list page
   3. manufacturer model page
*/
table.nav_general_links {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, Helvetica, Sans-serif, serif;
    font-size: 8pt;
    border: 0;
    background-color: #ffffff;

}

tr.nav_general_links_partsfinder { /* This is the parts finder row */
    background-color: #ffffff;
    height: 15px;
}

td.nav_general_links_partsfinder {
    text-align: center;
}

tr.nav_general_links_view_parts_list { /* This is the parts finder row */
    background-color: #ffffff;
    height: 15px;
}

td.nav_general_links_view_parts_list {
    text-align: center;
}

tr.nav_general_links_view_model_list { /* This is the parts finder row */
    background-color: #FFFFFF;
}

td.nav_general_links_view_model_list {
    text-align: center;
}

/* This is for the image that explains the popup */

table.nav_popup {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    font-family: Arial, Helvetica, Sans-serif, serif;
    font-size: 8pt;
    border: 0;
    background-color: #ffffff;
}

td.nav_popup {
    text-align: left;
    font-size: 8pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
}

/* This is the model information header table on the page.
	The table is set to 100%, align center, 
	This tablke has four rows
	1. The year and model currently shown
	2. The words "Current Selection:"
	2. The section shown
	3. The word "SECTION"
*/
table.nav_model_info {
    font-size: 8pt;
    border-collapse: collapse;
    width: 100%
}

tr.nav_model_info_yr_md {
    height: 20px;
}

td.nav_model_info_yr_md {
    text-align: center;
    color: #100A8B;
    font-weight: bold;
    padding: 0;

}

tr.nav_model_info_cur_sel {
    height: 10px;
}

td.nav_model_info_cur_sel {
    text-align: center;
    color: black;
}

tr.nav_model_info_sec_shown {
    height: 15px;
}

td.nav_model_info_sec_shown { /*This shows the name of the current section */
    text-align: center;
    color: #100A8B;
    font-weight: bold;
}

tr.nav_model_info_sec {
    height: 10px;
    background-color: #00008b;
}

td.nav_model_info_sec {
    text-align: center;
    font-weight: bold;
    color: white;
}

/* This is the sections table for the unit shown in the navigation page.
	There are 2 types of rows withing this table, sections and subsections.
		Sections are those that contain subsections. ENGINE would be a section, Crankcase would be a subsection.
		Sections rows span 2 columns. Subsections are 2 column rows.
		Sections rows are refered to as main_section
		The column is refered to as main_section_Col
		Subsections rows are refered to as sub_section_even and sub_section_odd
		Sub_section_odd columns:
			The column one of sub_section_odd is refered to as sub_section_odd_col_1
			The column two of sub_section_odd is refered to as sub_section_odd_col_2
		Sub_section_even columns:
			The column one of sub_section_even is refered to as sub_section_even_col_1
			The column two of sub_section_even is refered to as sub_section_even_col_2
*/
table.nav_section_list {
    font-size: 8pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    border: 0;
    border-collapse: collapse;
    width: 100%;
}

tr.nav_main_section {
    background-color: #888888;
    height: 22px;
}

td.nav_main_section_Col {
    color: white;
    font-family: Arial, Helvetica, Sans-serif, serif;
    font-weight: bold;
    text-align: left;
}

tr.nav_sub_section_odd_row {
    background-color: #ffffff;
    height: 15px;
}

td.nav_sub_section_odd_col_1 {
    width: 10px;
}

td.nav_sub_section_odd_col_2 {
    font-weight: normal;
    text-align: left;
    color: #000000;
}

tr.nav_sub_section_even_row {
    background-color: #d8d8d8;
    height: 15px;
}

td.nav_sub_section_even_col_1 {
    width: 10px;

}

td.nav_sub_section_even_col_2 {
    text-align: left;
    color: #000000;
}

/* This is the parts list page.
	This page has a table refered to as the parts_list_price_warning
		This table informs the user the pricing is for internet orders only
	This page has 2 submit buttons refered to as parts_list_submit

	There is a table containing the parts list, refered to as parts_list.
		This table will have limited custom ability due to the data shown. The individual columns will not be referanced. The rows will be rederanced.
		The first row is refered to as parts_list_header
		The remaining rows are refered to as parts_list_odd_row, and parts_list_even_row.
		The parts_list_selected_part is where a user has selected a part from the search description window.  We chcnge the color of the row
	The inputs QTY Text objects are refered to as parts_list_qty
	There is a table which is shown if superseded part numbers are used, refered to as parts_list_sspn
	There is a table for Powered by HLSM. It is refered to as part_list_hlsm.
*/

/*== Input on the form ==*/
input.parts_list_submit { /* This is for the submit buttons*/
    font-size: 8pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
}

input.parts_list_qty { /* This is for the qty text objects*/
    font-size: 8pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
}

/*== this is the internet price warning ==*/
table.parts_list_price_warning {
    width: 100%;
    background-color: #ffffff;
    margin: auto;
}

tr.parts_list_price_warning {
    height: 10px;
}

td.parts_list_price_warning {
    font-size: 8pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    text-align: center;
    color: #FF0033;
    font-weight: bold;
}

/*== Parts list table ==*/
table.parts_list {
    font-size: 8pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    border: 1px;
    margin: auto;
}

tr.parts_list_header {
    color: #FFFFFF;
    background-color: #38386a;
    font-weight: bold;
}

tr.parts_list_odd_row {
    font-size: 8pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    color: #000000;
    background-color: #ffffff;
}

tr.parts_list_even_row {
    font-size: 8pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    color: #000000;
    background-color: #d8d8d8;
}

tr.parts_list_selected_part {
    font-size: 8pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    color: #000000;
    background-color: #FFFF66;
}

/*== (*) Superseded part numbers are substituted. ==*/
table.parts_list_sspn {
    font-size: 8pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    width: 100%;
}

tr.parts_list_sspn {

}

td.parts_list_sspn {
    text-align: center;
}

/*== Powered by HLSM ==*/
table.parts_list_hlsm {
    font-size: 8pt;
    font-family: Arial, Helvetica, Sans-serif, serif;
    margin: auto;
}

tr.parts_list_hlsm {

}

td.parts_list_hlsm {
    font-weight: bold;
    text-align: center;
}

@media (max-width: 650px) {

}

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