/*** GENERAL STYLES ***/

* {margin: 0; padding: 0; border: 0; list-style: none;}
body {background: #fff; text-align: center;}
body, td, h1, h2, h3, h4, h5, h6, select, input, textarea {font-family: arial, helvetica, sans-serif; font-size: 11px; line-height: 16px; color: #000;}

input, select, textarea {border: 2px inset #fff;}
p {margin: 0 0 1.5em 0;}
a {color: #d31145; text-decoration: none;}
a:hover {text-decoration: underline;}

.hide {display: none;}
.small {font-size: 10px; font-weight: normal;}
.large {font-size: 13px;}
.button {background: #d31145; color: #fff; font-weight: bold; text-transform: uppercase;}
.required {color: #d31145; font-weight: bold;}
.spacer {clear: both;}


/*** NAV STYLES ***/

#navcontainer {height: 30px; background: url(../imgD/bkg-nav-blank.gif);}
#nav {height: 21px; position: absolute; top: 9px; padding-right: 18px; right: 0;}
#nav li {float: left; background: url(../imgD/nav-divider.gif) left bottom no-repeat; padding-left: 2px; width: 50px; white-space: nowrap;}
	html>body #nav li {width: auto; height: 19px;}
#nav li a {display: block; height: 19px; width: auto; line-height: 23px; overflow: hidden; color: #fff; text-transform: uppercase; padding: 0 8px; font-weight: bold;}
#nav li a:hover {background: #999; text-decoration: none;}
#nav li.on a, #nav li.on a:hover {background: #d31145;}

#nav li ul {display: none; position: absolute; top: 21px; width: 550px;}
#nav li.on ul {display: block;}
#nav li li {background: none; padding: 0; height: auto; border-bottom: 1px solid #000;}
#nav li li a {height: auto; line-height: 11px; overflow: visible; color: #000; padding: 5px; background: #dcddde !important; font-size: 9px; text-align: center !important; border-right: 1px solid #000;}
#nav li li a:hover {background: #999 !important; color: #fff;}
#nav li li.on a, #nav li li.on a:hover {background: #d31145 !important; color: #fff;}


/*** STRUCTURAL STYLES ***/

#outer {position: relative; width: 858px; margin: 45px auto 15px auto; text-align: left; background: repeat-y;}
body.bb #outer {background-image: url(../imgD/bkg-outer-bb.gif);} /* black + black */
body.gb #outer {background-image: url(../imgD/bkg-outer-gb.gif);} /* gray + black */
body.gr #outer {background-image: url(../imgD/bkg-outer-gg.gif);} /* gray + gray no right column */
body.gg #outer {background-image: url(../imgD/bkg-outer-gg.gif);} /* gray + gray */
body.gd #outer {background-image: url(../imgD/bkg-outer-gd.gif);} /* gray + gray divided */

#logo {position: absolute; left: 9px; top: 1px;}
#logo a {display: block; width: 265px; height: 108px; line-height: 250px; overflow: hidden; background: url(../imgD/logo.gif) 21px 15px no-repeat;}

#main {border-top: 87px solid #000; margin: 0 9px; height: 412px;}
	html>body #main {height: auto; min-height: 412px;}

#left {float: left; width: 560px; position: relative; z-index: 2;}
body.bb #left {float: none; width: 840px; padding: 0;}
body.gb #left {width: 440px; padding: 66px 60px 20px 60px;}
body.gr #left {width: 720px; padding: 66px 60px 20px 60px;}
body.gg #left {width: 440px; padding: 40px 60px 20px 60px;}
body.gd #left {width: 440px; padding: 40px 60px 20px 60px;}

#left div.grid {margin: -14px -40px 0 -40px;}
#left div.form {margin: -25px -50px 0 -30px;}
body.gr #left div.form {margin: -51px -25px 0 -30px;}
#left div.gallery {margin: -15px -30px 0 -30px;}

#left h2 {font-size: 16px; margin-bottom: 20px;}

#right {float: right; width: 280px; position: relative; z-index: 1;}
body.bb #right {float: none; width: 840px; padding: 0;}
body.gb #right {width: 276px; padding: 0 2px 2px 2px;}
body.gr #right {display: none;}
body.gg #right {width: 210px; padding: 40px 35px 0 35px;}
body.gd #right {width: 210px; padding: 40px 35px 0 35px;}

#right div.form {margin: -25px 0 0 0;}
#right div.gallery {margin: -15px -27px 0 -18px;}

#right h2 {font-size: 16px; margin-bottom: 20px;}


/*** CONTENT STYLES ***/

#homeimages {border-top: 1px solid #dcddde; border-bottom: 1px solid #a4a5a6; margin-bottom: 15px;}
#homeimages img {width: 208px; height: 253px; border-left: 1px solid #a4a5a6; border-right: 1px solid #dcddde; border-top: 1px solid #a4a5a6; border-bottom: 1px solid #dcddde;}
#homeimage1 {border-left: 1px solid #a4a5a6 !important;}

#hometagline {position: absolute; top: -50px; left: 413px; color: #bcbec0; font-weight: bold; font-size: 12px; padding-left: 70px; line-height: 18px !important;}
#hometagline strong, #hometagline b {position: relative; left: -70px; display: block; font-size: 16px;}

#homelinks div {float: left; width: 381px; padding: 0 0 15px 26px; color: #fff;}
#homelinks h2 {margin-bottom: 3px; font-size: 14px; color: #fff;}
#homelinks p {line-height: 13px; margin-bottom: 0;}

#rightphoto img {display: block;}
#prodnav {position: absolute; left: 0; top: 0; width: 840px; height: 26px; background: url(../imgD/bkg-prodnav.gif) no-repeat;}
	body.gr #prodnav {background-color: #000;}
#prodnav li {float: left; height: 24px; padding-left: 2px;}
#prodnav a {display: block; width: 170px; height: 24px; line-height: 24px; font-weight: bold; color: #000; background: #dcddde; text-transform: uppercase; text-align: center;}
#prodnav #prodnavprod {padding: 0;}
#prodnav #prodnavprod a {width: 216px;}
#prodnav li.on a {background: #d31145; color: #fff;}

#alliances {line-height: 13px;}
#alliances div {width: 180px; font-weight: bold; margin-bottom: 5px;}
.alliancesleft {float: left; clear: both;}
.alliancesright {float: right;}
#alliances a {display: block; margin-bottom: 10px;}

#linkslist {margin: 0 0 1.5em 0;}
#linkslist li {width: 100%; padding-left: 10px; background: url(../imgD/bullet.gif) 0 6px no-repeat;}

.newsimage {float: right; margin: 0 0 20px 20px;}

#newsleft, #newsright {width: 180px; padding-top: 30px;}
#newsleft {float: left; margin-right: 75px;}
#newsright {float: right;}
#newsleft h2, #newsright h2 {margin: 20px 0 5px 0;}

#newslist strong a, #newslist b a {color: #000;}
#newslist strong a:hover, #newslist b a:hover {color: #d31145;}

#right .gallery .note {position: absolute; left: 0; top: 0; font-family: tahoma, arial, helvetica, sans-serif; font-size: 10px; padding: 0 0 0 8px; text-transform: uppercase;}
#right .gallery img {float: left; margin: 0 10px 10px 0;}
#right .gallery #pagination {position: absolute; right: 18px; top: 380px; text-align: right;}
#right .gallery #pagination a {color: #000;}
#right .gallery #pagination a.on {color: #d31145;}
#right .gallery #pagination .currentpage {font-weight: bold; color: #d31145;}

#abouttech h3 {clear: left; margin-bottom: 5px;}
#abouttech img {width: 95px; height: 95px; float: left; margin: 0 15px 15px 0;}

#contactleft {float: left; width: 260px; line-height: 20px;}
#contactright {float: right; width: 235px;}
#contactleft label {float: left; clear: left; width: 75px; height: 16px; text-align: right; padding: 0 7px 8px 0; line-height: 20px; overflow: hidden;}
#contactleft input {width: 170px; margin: 0 0 8px 0; height: 16px;}
#contactright label {display: block; clear: left; padding: 15px 0 3px 0; line-height: 20px;}
#contactright select {width: 231px;}
#contactright input {border: 0; margin-left: 10px;}
#contactright textarea {width: 225px; height: 80px;}
#contactright input.button {float: right; margin: 10px 5px 20px 0; width: 80px;}
#contactright #form_marine, #contactright #form_land {padding: 5px 0 10px 5px; line-height: 20px; clear: left;}
#contactright #form_marine label, #contactright #form_land label {float: left; clear: none; padding: 0;}
#contactright #form_marine input, #contactright #form_land input {margin: 0 10px; float: left; clear: left; vertical-align: bottom;}

#dealerform {position: relative; width: 260px; margin-bottom: 1.5em;}
#dealerform label {float: left; clear: left; width: 75px; text-align: right; padding: 0 7px 8px 0; line-height: 20px;}
#dealerform input {width: 170px; margin: 0 0 8px 0; height: 16px;}
#dealerform input.button {margin: 0 5px 0 0; width: 80px; border: 0;}
#dealerform #login_error_msg {position: absolute; left: 270px; top: 0; width: 150px; font-weight: bold; color: #fff; background: #d31145; padding: 7px 10px; line-height: 14px;}
#dealerform p {text-align: right;}

.pdftable td {padding: 0 10px;}

#orderleft {float: left; width: 355px; margin-right: 25px; line-height: 20px;}
#ordermiddle {float: left; width: 180px; line-height: 20px; padding-top: 65px;}
#orderright {float: right; width: 210px;}
#orderleft label {float: left; clear: left; width: 170px; height: 16px; text-align: right; padding: 0 7px 8px 0; line-height: 20px; overflow: hidden;}
#orderleft input {width: 170px; margin: 0 0 8px 0; height: 16px;}
#ordermiddle label {float: left; clear: left; width: 116px; padding: 0 10px 8px 0; line-height: 20px; font-weight: bold; text-align: right;}
#ordermiddle select {width: 150px; margin: 0 0 10px 0;}
#ordermiddle input {width: 45px; margin: 0 0 10px 0; height: 16px;}
#ordermiddle .hr {width: 156px; border-top: 1px solid #bbb;}
#orderright textarea {width: 200px; height: 85px;}
#orderright option {padding-right: 15px;}
#orderright input.button {float: right; margin: 0 5px 20px 0; width: 80px; border: 0;}

.grid table {border-bottom: 2px solid #4d4d4f; margin-bottom: 20px;}
.grid td, .grid th {border: solid #4d4d4f; border-width: 2px 2px 0 0; padding: 5px; text-align: center; font-family: tahoma, verdana, arial, sans-serif; font-size: 9px;}
.grid th {white-space: nowrap; text-align: left;}
.grid thead td, .grid thead th {border: 0; text-transform: uppercase;}
.grid td.dot {background: url(../imgD/grid-dot.gif) center center no-repeat;}

.grid #prodvert {float: right; position: relative; left: 20px; width: 68px; padding: 0 10px 0 20px; z-index: 10;}
.grid #prodvert .hidepop, .grid #prodvert .showpop {margin-bottom: 10px;}
.grid #prodvert div img {display: block; cursor: pointer; cursor: hand;}
.grid #prodvert .pop {left: -183px;}

.grid form {font-size: 12px; width: 270px;}
.grid form p {margin: 1.5em 0;}
.grid form input {border: 0; vertical-align: middle;}
.grid form h3 {color: #d31145; font-size: 14px; margin: 10px 0 3px 0; clear: left;}
.grid form div {line-height: 20px;}
.grid form div div {float: left; height: auto; margin-bottom: 0; z-index: 3; padding-right: 20px;}
.grid form div.options {height: auto; width: 440px;}
.grid form div.options div {float: none;}
.grid form .button {width: 80px;}

div.hidepop, div.showpop {position: relative;}
div.hidepop div.pop {display: none;}
div.showpop div.pop {display: block; position: absolute !important;}
div.pop {left: 279px; top: 0; width: 155px; background: #fff !important; border: 2px solid #4d4d4f; font-family: tahoma, verdana, arial, sans-serif; font-size: 9px; line-height: 13px; z-index: 10; padding: 0 !important;}
div.pop h6 {background: #d31145; color: #fff; padding: 2px 5px;}
div.pop p {margin: 10px 5px;}


/*** FOOTER STYLES ***/

#footer {position: relative; clear: both; height: 23px; padding: 8px 19px; line-height: 13px; background: #fff url(../imgD/bkg-footer.gif) no-repeat;}
#footer ul {float: left;}
#footer li {display: inline; text-transform: uppercase; font-family: arial, helvetica, sans-serif; font-size: 9px; padding: 0 10px 0 0;}
#footer p {text-align: right; font-family: tahoma, arial, helvetica, sans-serif; font-size: 9px;}

#leftcorner, #rightcorner {position: absolute; width: 19px; height: 15px; top: -15px; overflow: hidden;}
#leftcorner {left: 0;}
#rightcorner {right: 0;}
body.gg #leftcorner, body.gb #leftcorner, body.gr #leftcorner, body.gd #leftcorner {background: url(../imgD/corner-gray-left.gif);}
body.bb #leftcorner {background: url(../imgD/corner-black-left.gif);}
body.gg #rightcorner, body.gr #rightcorner, body.gd #rightcorner {background: url(../imgD/corner-gray-right.gif);}
body.bb #rightcorner, body.gb #rightcorner {background: url(../imgD/corner-black-right.gif);}