﻿body
{font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url(/images/BG_body.jpg); background-repeat: repeat-x; background-color: #405c84; margin-top: 0px; position: relative;}
.mainContentWrapper {background: url(/images/BG_seaSky.jpg) top center no-repeat; height: 750px;}
#MainContent{ width: 960px; margin-left: auto; margin-right: auto; }
.whiteBGWrapper {float: left; width: 680px; background: url(/images/BG_white75.png) top left repeat; padding: 20px; min-height:400px}
.whiteBGbottomCap {float: right;}
/*----------------------------------Global---------------------------------------*/
a:link, a:visited, a:active {color: #1A2751;}
a:hover {color: #577CA9;}
h1, h2, h3, p {margin: 0 0 10px 0}
h4, h5 {margin: 0 0 7px 0}
h1 {font-size: 25px; font-weight: bold; color: #2c3a67; }
h2 {font-weight: bold; font-size: 14px; }
h3 {font-weight: normal;font-style: italic;font-size: 11px;}
h4 {font-size: 9px;font-weight: bold;}
h5 {font-weight: bold;font-style: italic;font-size: 11px;}
p, li {text-align: left; font-size: 13px;}
p.clear {clear: both; margin: 0; padding: 0}
p.clear.seperator {border-bottom: dotted 2px #132c63}
div.whiteBGWrapper li {margin-bottom: 10px;}

/*---------------------------------Main Nav------------------------------------*/
#mainnav ul { list-style-type: none; line-height: 21px; text-transform: uppercase; padding-left: 15px; margin-left: 0;}
#mainnav li {font-size: 12px; margin: 0 0 5px 0}
#mainnav {text-align: left; width: 240px; float: left; clear: left;}

#mainnav a:link,
#mainnav a:visited,
#mainnav a:active,
#mainnav a:hover {color: white;	text-decoration: none; font-weight: bold;}
#mainnav a:hover {text-decoration: underline;}
#mainnav li.facebook {margin-top:20px;}
/*----------------------------Header-----------------------------------------*/
.header {width:960px; height: 133px; background: url(/images/BG_header.png) top left no-repeat; position: relative}
.header .logoNMPA, .header .logoAMI, .header .logoMTA, .header .fortyFiveYears, #propeller {position: absolute}
.header .logoNMPA {top: 22px; right: 475px;}
.header .logoAMI {top: 26px; right: 312px}
.header .logoMTA {top: 22px; right: 197px}
.header .fortyFiveYears {top: 13px; right: 40px}
.header img {border: none}
#propeller {top: 28px; left: 10px;}
@-moz-keyframes rotate {
  from {-moz-transform: rotate(360deg);}
  to {-moz-transform: rotate(0deg);}}

#propeller img
{-moz-animation-name:             rotate; 
    -moz-animation-duration:         35s; 
    -moz-animation-iteration-count:  infinite;
    -moz-animation-timing-function: linear;}

@-webkit-keyframes rotate {
  from {-webkit-transform: rotate(360deg);}
  to {-webkit-transform: rotate(0deg);}}

#propeller img
{-webkit-animation-name:             rotate; 
    -webkit-animation-duration:         35s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;}
    
@-ms-keyframes rotate {
  from {-ms-transform: rotate(360deg);}
  to {-ms-transform: rotate(0deg);}}

#propeller img
{-ms-animation-name:             rotate; 
    -ms-animation-duration:         35s; 
    -ms-animation-iteration-count:  infinite;
    -ms-animation-timing-function: linear;}
    
@-ie-keyframes rotate {
  from {-ie-transform: rotate(360deg);}
  to {-ie-transform: rotate(0deg);}}

#propeller img
{-ie-animation-name:             rotate; 
    -ie-animation-duration:         35s; 
    -ie-animation-iteration-count:  infinite;
    -ie-animation-timing-function: linear;}



/*-------------------------------Video--------------------------------*/
.video {padding: 10px 0}
.video div {float: right; margin: 0}
.video h1, .video h2, .video h4 { width: 290px; margin: 10px 10px 10px 30px; text-align: center; float: left;}
.video h1 { border-bottom: dotted 2px Black; padding: 20px 0 10px 0;}

/*----------------------------Home------------------------------------*/

.slideshow {float: right; margin-bottom:10px; overflow: hidden;}
.bendEmMendEm {margin: 0 0 10px 0; float: left;}

/*----------------------------Home------------------------------------*/


.PropLogos {width: 200px;border: none;}

#MarineHardware h2 {border-bottom: 1px Solid #8a98b2; padding-bottom: 10px;}

.partsInfo { text-align: right; }

.propAlt { background: url(/images/BlueTPBack.png);}

#homeGrid { clear: both; width: 660px; text-align: center; }

#homeGrid div { width: 300px; margin: 13px 0 0 25px; }
#homeGrid div.left {float: left; }
#homeGrid div.right {float: right;}
#homeGrid div {text-align: center}
#homeGrid img {margin: 0 0 10px 0}
.ZBABoxHome
{
    width: 271px;
    padding: 20px 0;
    background: url(/images/ZBA_HomeBanner.jpg);
}
.ZBABoxHome img, .ZBABox img
{
    border: none;
}

.ZBABoxHome h2
{
    margin: 0 30px 10px 30px;
}

.ZBABoxHome, .ZBABox
{
    border: outset 2px #09115a;

}

.ZBABox
{
    background: url(/images/ZBA_Banner.jpg) top left no-repeat;
    float: left;
    width: 599px;
    height:100px;
    margin: 10px 0;
    padding: 0 10px;
    clear:both;
}

.ZBABox h1
{ color: #00a2ed; margin: 5px 10px; float: left; width: 325px; font-size: 25px; text-align: left; font-weight:normal;}

.ZBABox img
{ float: right; margin-right:40px}
.links h2
{margin: 0}

.newIcon
{border: none; margin: -4px 0 0 7px;}



/*------------------------------------Footer-------------------------------------*/

#footer {width: 960px; clear: both; display: block; margin: 0 auto; text-align: center; color: #bfc7eb}
#footer a:link,
#footer a:visited,
#footer a:active {color: White; text-decoration: none; }
#footer a:hover {color: #bfc7eb; text-decoration: none;}
#footer p { text-align: center; font-size: 10px; }

/*---------------------------------------Product Catalog--------------------------------------*/
div.productDesc {float: left; min-height: 85px; clear: left; width: 206px;}
div.productDesc h2 {font-size:12px;}
div.productDesc h2 a:link, div.productDesc h2 a:active, div.productDesc h2 a:visited {text-decoration: none}
div.productDesc h2 a:hover {text-decoration: underline}
div.productImage {float: left; height: 100px; overflow: hidden; margin: 0 0 10px 0; background: white; width: 100%; text-align: center;}
div.productSerials {float: left; padding-right: 10px; clear: left}
div.productSerials h3 {color: Gray;}
div.productSerials h3 span {font-weight: bold; color:  black}
div.productWrapper {float: left; width: 196px; padding: 0 14px 10px 14px; margin: 1px; background: White; -moz-border-radius: 10px;  -webkit-border-radius: 10px; height: 220px;}
h3.partNumber {margin: 0;}

/*-----------------------------------Product Details-----------------------------------------*/
.productDetailsImage {float: left; cursor: pointer;border: outset 1px Gray}
div.productDetailsDesc {float: left;}
div.productDetailsWrapper {float: left; width: 400px; padding: 0 15px}
div.productDetailsWrapper table {width: 300px; margin-bottom: 15px;}

tr.productDetailsRow h3, tr.productDetailsAltRow h3 {margin: 5px 0 6px 10px;}
tr.productDetailsRow {background: url(/images/BG_white75.png) top left repeat;}
h3.productDetailsValue {margin-left: 0; font-weight: bold;}

/*-----------------------------------Prop Sales-----------------------------------------*/
#PropSales div.left {float: left; padding: 0 0 20px 0;}
#PropSales div.right {float: right; padding: 0 0 20px 0;}
#PropSales div div {float: left; width: 310px; padding: 10px 14px 10px 14px; margin: 1px; background: White; -moz-border-radius: 10px;  -webkit-border-radius: 10px; clear: both;}
#PropSales div li {margin: 0 0 5px -25px; font-size: 11px;}
#PropSales img {display: block; margin: 0 auto; max-width: 196px; padding: 0 0 15px 0; border: none;}
#PropSales h2 {clear: both;}
