/*
    CSS - style.css
    Author: Scott Rymer
    Company: Trackless Vehicles Limited
    Date: July 2, 2008
*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
    MASTER PAGE DIVS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Top of the content section - rounded top */
#pagetop {
    background: transparent url('images/header.png') no-repeat bottom center;
    height: 50px;
    margin: 0px auto;
}

/* Main Page DIV - centered on screen and set width */
#main
{
    background: transparent url('images/main_back.png') repeat-y top center;
    width: 941px;
    margin: 0px auto;
    text-align: left;
    overflow: auto;
}

/* Header section */
#header {height: 80px; padding: 0px 10px;}

/* Name of Company within the header */
#name
{
    background-image: url('images/trackless.png');
    width: 344px;
    height: 67px;
    position: relative;
    margin: 0px 15px;
    float: left;
}

/* Logo of Company within the header */
#logo, #footerlogo
{
    background-image: url('images/logo.png');
    width: 131px;
    height: 50px;
    position: relative;
}

#logo {float:right; margin: 10px 15px;}
#footerlogo {float:left; margin-left: 30px;}

/* Navigation Bar and Footer section backgrounding */
#nav, #footer
{
    background-image: url('images/nav_back.png');
    width: 921px;
    margin: 0px auto;
    height: 32px;
    clear: both;
}

/* Make sure no image borders exist in the navigation bar */
#nav img {border-style: none; margin: 0px;}

/* Stripe just below the navigation bar */
#pinstripe
{
    background-image: url('images/pinstripe.png' );
    width: 921px;
    margin: 5px auto;
    height: 30px;
}

/* Bottom Navigation Bar containing simple links */
#footer
{
    font-size: smaller;
    color: White;
    text-align: center;
    padding-top: 10px;
    height: 22px;
}
/* Footer Hyperlink Styles */
#footer a:link {text-decoration: none; font-weight: bold; color: White;}
#footer a:visited {text-decoration: none; font-weight: bold; color: White;}
#footer a:hover {text-decoration: underline;}
#footer a:active {text-decoration: none; font-weight: bold; color: White;}

/* Subfooter section - provides shadow look to page */
#subfooter
{
    background: transparent url('images/footer.png') no-repeat bottom center;
    width: 965px;
    height: 210px;
    margin: 0px auto;
    text-align:right; 
    font-style:normal; 
    font-variant:normal; 
    font-weight:bold; 
    font-size:larger; 
    font-family:Verdana;
    padding-top: 10px;
}
#subfooter img {margin: 0px;}

#copyright {
    margin-top: 15px;
    padding-left: 35px;
    text-align: left;
    font-size: xx-small;
    color: #666666;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	CONTENT CONTAINERS - MAIN PAGE LAYOUTS - FIXED SIZES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Main Content Container for pages */
#content-container
{
	margin: 10px auto 10px auto;
	padding: 0px 20px;
    text-align: left;
    position: relative;
}

/*~~~~~~ TWO COLUMN CONFIGURATION ~~~~~~~*/

/* Left or Right Panel */
#content-two-column-left, #content-two-column-right
{
    background: #444444 url('images/title_bar.png') repeat-x top;
    width: 192px;
    padding: 5px 7px 0px 7px;
    border: solid 1px #666666;
    margin-bottom: 10px;
}

#content-two-column-left a:link {text-decoration: none; font-size: 0.9em; color: silver;}
#content-two-column-left a:visited {text-decoration: none; font-size: 0.9em; color: silver;}
#content-two-column-left a:hover {text-decoration: underline;}
#content-two-column-left a:active {text-decoration: none; font-size: 0.9em; color: silver;}
#content-two-column-right a:link {text-decoration: none; font-size: 0.9em; color: silver;}
#content-two-column-right a:visited {text-decoration: none; font-size: 0.9em; color: silver;}
#content-two-column-right a:hover {text-decoration: underline;}
#content-two-column-right a:active {text-decoration: none; font-size: 0.9em; color: silver;}

#content-two-column-left, #content-two-column-right li {
    font-size: 0.9em;
}

/* Panel Positioned Left */
#content-two-column-left {
    float: left;
    margin-right: 10px;
}

/* Panel Positioned Right */
#content-two-column-right {
    float: right;
    margin-left: 10px;
}

/* Main Panel */
#content-two-column-main
{
    width: 680px;
    float: left;
}

/*~~~~~~ THREE COLUMN CONFIGURATION ~~~~~~~*/

/* Left and Right Panel */
#content-three-column-left, #content-three-column-right {
    background: #444444 url('images/title_bar.png') repeat-x top;
    width:170px;
    padding: 5px;
}

/* Panel Positioned Left */
#content-three-column-left {
    float: left;
}

/* Panel Positioned Right */
#content-three-column-right {
    float: right;
}

/* Main Panel */
#content-three-column-main {
	width: 510px;
	margin: 0px auto;
	padding: 10px;
	}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	CONTENT CLASSES - VARIABLE SIZES (Percentage Based)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Single Column on the Page */
.single-column {
    width: 100%;
    clear: both;
}

/* Two Columns */
.two-column-left, .two-column-right {
    width: 47%;
}
.two-column-left {float: left;}
.two-column-right {float: right;}

/* Three Columns */
.three-column-left, .three-column-right, .three-column-middle {
    width: 31%;
    padding: 5px;
}

.three-column-left {float: left;}
.three-column-right {float: right;}
.three-column-middle {margin: auto;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
    MISCELLANEOUS DIVS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* The three column section on the home page */
#three-column-home {
    background-color: #373634;
    border: solid 1px #555555;
    padding: 10px;
    margin-bottom: 10px;
}
#three-column-home img {border-color: #666666;}

/* Used on the tractor page to show the mirrored MT at the top */
#mt 
{
    padding-top: 550px;
    background: black url('images/tractor/mt_mirror.jpg') no-repeat top;
    margin: 0px 10px 10px 10px;
}

/* title elements used for header on attachment pages */
#title {
    background: black url('images/title_line.png') repeat-x center;
    text-align: center;
    font-family: 'Arial Black';
    font-size: 1.8em;
    color: #be0013;
    margin-bottom: 10px;
}

#title span {
    display: inline-block;
    background-color: Black;
    padding: 0px 15px;
}

/* Used for Specifications sections in Attachment pages */
#specs {
    margin-bottom: 15px;
    background-color: #373634;
    text-align: left;
    padding: 4px;
    border: dashed 1px #555555;
}

/* Don't pad the h2 header in the Specs Div */
#specs h2 {margin: 0px; padding: 0px;}
#specs p {
    padding: 0px;
    margin: 3px 6px;
    font-size: smaller;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	HEADINGS 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.8em;
    font-family: Calibri Verdana, Arial, Helvetica, sans-serif;
    line-height: 1.1em;
    margin: 5px 0;
}

h1, h2
{
    color: #e6b814;
    margin-top: 0px;
}

/* Main Page Headings */
h1 {margin-bottom: 3px;}

/* Sub Heading 1 within body of Page */
h2 {
    font-size: 1.4em;
    margin: 15px 0px 5px 0px;
}

/* Sub Heading 2 within body of Page - Red */
h3
{
    font-family: 'Arial Black';
    color: #be0013;
    font-size: 1.1em;
    margin: 40px 0px 0px 0px;
}

/* Sub Heading 3 within body of Page - Gold */
h4
{
    font-size: 1em;
    color: #f7e400;
    margin-top: 15px;
}

/* Used in Title Bars */
h5
{
    font-size: 1.25em;
    font-weight: bolder;
    color: #111111;
    padding-top: 2px;
    margin: 0px 0px 10px 0px;
}


h6
{
    font-size: 1em;
}

/* Legal Script */
h6.legal
{
    padding: 3px;
    background-color: #555555;
    font-weight: normal;
    font-size: 0.9em;
    font-style: italic;
    border: solid 1px #666666;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	HTML TAGS 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body, input, textarea, table, td, select
{
    font-family: Calibri Verdana, Arial, Helvetica, sans-serif;
    font-size: 9pt;
}

body, table, td {
	color: #ebebeb;
}

body
{
    margin: 0px;
    background: #363636 url('images/pg_back.png') repeat;
    text-align: center;
}

p {margin-bottom: 10px;}

.no-padding-no-margin, .right
{
    padding: 0px;
    margin: 0px;
}

.no-top-margin {
    padding-top: 0px;
    margin-top: 0px;
}

.right {text-align: right;}
.fullwidth {width: 100%;}

td.fieldlabel 
{
    text-align: right;
    padding-right: 5px;
}

.centered {
    text-align: center;
}

hr {
    color: #be0013;
    background-color: #be0013;
    display: block;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	LINKS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a:link {color: #f7e400; text-decoration: none;}
a:visited {color: #f7e400; text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {color: #f7e400;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	LISTS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

ul {
	margin: 0px;
	padding: 0px;
	}

ul.none li {
    list-style: none;
}

ol {
    margin: 0px 10px;
    padding: 0px 10px;
}

li {
	padding: 1px;
	margin-left:15px;
}

ul li {
    list-style:disc;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	IMAGES & PHOTOS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

img.noborder {
    border-style: none;
}

img
{
    margin-bottom: 10px;
    border: solid 1px yellow;
}