@charset "UTF-8";
/* CSS Document */

html, body {margin:0; padding:0; background:url(../images/bg-water.jpg) #0053b5; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#333}

a img {border:none}

a:link a:visited {color:#d11c20; cursor:default}
a:hover {color:#d11c20; text-decoration:underline}
a {text-decoration:none; color:#d11c20; font-weight:bold}

a:active {outline:none;}
:focus {-moz-outline-style:none;}


/* -------------- Content Area ----------- */

#mainColumn {position:absolute; left:50%; top:-1px; margin-left:-480px; width:958px; background:#000; border:1px solid #ed1f24;}

#headerContainer {position:relative; float:left; margin:0 46px 0 46px; width:868px; height:49px; background:url(../images/header-bg.png) repeat-x}
#headerContainer #left {float:left; width:18px; height:49px; background:url(../images/header-left.png)}
#headerContainer #middle {float:left; width:832px; height:49px;}
#headerContainer #right {float:left; width:18px; height:49px; background:url(../images/header-right.png)}

#logo {width:360px; height:49px; background:url(../images/logo.png) no-repeat; margin:0 auto}

#bannerContainer {position:relative; float:left; width:932px; padding:0 13px 0 13px; margin-bottom:20px}
#banner {width:930px; height:250px; border:1px solid #ed1f24; overflow:hidden}
ul#bannerAds {list-style:none; margin:0; padding:0}

#contentContainer {position:relative; float:left; width:932px; background:url(../images/content-bg.png) bottom left no-repeat; margin:0px 0 0 0; padding:0 13px 40px 13px}
#column-left {float:left; width:657px; min-height:250px; margin-right:9px; padding:15px 20px 25px 20px; background:#fff}
#column-left h4 {color:#d11c20}
#column-left p {margin-left:15px}
#column-left img {margin:0 5px 15px 0x; padding-right:20px; padding-bottom:10px}
#column-right {float:left; width:226px; background:#fff}

#footer {position:relative; float:left; width:908px; height:41px; background:url(../images/footer-bg.png) repeat-x; padding:20px 0 0 50px; font-size:14px; color:#fff}
#footer a {color:#fff;}

#credit {position:absolute; bottom:-35px; left:50%; margin-left:-480px; width:910px; padding:10px 0 10px 50px; color:#83bdff}
#credit a {color:#83bdff;}

#yamaha-logo {position:absolute; top:169px; right:21px; width:276px; height:62px; z-index:10}


/* -------------- Modules ----------- */

#newsBox {position:absolute; top:10px; right:15px; width:240px; height:131px; background:url(../images/newsBox.png) 0 0; padding:10px 20px 0 18px; color:#fff; z-index:10}
#post {width:235px; height:90px; float:left}
#post h4 {color:#83bdff; margin:0}
#post p {padding-left:11px; font-size:11px; margin:5px 0 8px 0}
#post a {color:#83bdff}

#signupBox {width:240px; height:21px; float:left; position:relative}
.label {width:52px; text-align:left; float:left; padding:5px 6px 0 0; font-size:11px}
.text-input {width:154px; height:21px; float:left; border:none; padding:0 5px 0 10px; margin-right:5px; background:url(../images/signUp-field.png) no-repeat}

input.button {float:left; cursor:pointer; padding:2px 3px 1px 3px; border:2px solid #ed1f24; color:#333; background:#CCC; font-weight:bold; -moz-border-radius:5px; }

input.button:hover {background:#83bdff none repeat scroll 0% 0%; color:#333; }

#message {width:240px; height:21px; float:left; position:relative}
#message p { color:white; margin:0px 0px 0 40px; font-size:11px }
#checkmark { position:relative;top:-21px;left:5px; float:left }

label.error { font-weight:normal; color:red; font-size:10px; text-align:left; width:240px; padding-left:0px;}
label#email_error { position:absolute; top:22px; left:10px; z-index:99}

form {margin:0; padding:0}


/* -------------- Modules ----------- */

#moduleContainer {position:relative; float:left; width:931px; height:auto; margin:0 15px 15px 14px}

.module {width:226px; height:227px; float:left; margin-right:9px}
.moduleEnd {width:226px; height:227px; float:left; margin-right:0px}

.module .top, .moduleEnd .top {float:left; width:226px; height:28px;}
.module .middle, .moduleEnd .middle {float:left; width:226px; height:193px; background:url(../images/module-bg.png) 0 0 repeat-x; text-align:center}
.module .bottom, .moduleEnd .bottom {float:left; width:226px; height:6px; background:url(../images/module-btm.png) 0 0}
.module .middle .describe, .moduleEnd .middle .describe {margin:0 auto; width:186px; height:30px; padding:8px 10px 5px 10px; background:url(../images/module-desc_bg.png) no-repeat; text-align:left; color:#fff; font-size:11px}

.module .middle a img, .moduleEnd .middle a img {background-color: rgb(25,23,24);
	filter: Alpha(opacity=50);
	-khtml-opacity: 0.50;
	-moz-opacity: 0.50;		
	opacity:0.50}

.module .middle a:hover img, .moduleEnd .middle a:hover img {background-color: rgb(25,23,24);
	filter: Alpha(opacity=100);
	-khtml-opacity: 1.0;
	-moz-opacity: 1.0;		
	opacity:1.0}


/* -------------- Navigation ----------- */

#mainNav {position:relative; float:left; margin:0 106px 0 106px; width:746px; height:25px; padding-top:12px; background:url(images/nav-bar.png) no-repeat; z-index:999}

#home span {display: none;}
#about span {display: none;}
#marine span {display: none;}
#land span {display: none;}
#powerProducts span {display: none;}
#marineCare span {display: none;}
#location span {display: none;}
#news span {display: none;}

#multi-level {height:36px; position:relative; z-index:100;}
#multi-level .pad {float:left;}

/* The menud styling */
/* Remove the padding, margins and bullets from the lists */
.menu, .menu ul {list-style-type:none; padding:0; margin:0;}

/* Set up the top level list items and float left to place inline */
.menu li.top {display:block; float:left; position:relative;}

/* Style and position the table so it takes no part in the menud function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default top link link styling */
.menu li.top a.top_link {display:block; float:left; height:36px;}
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* move the link text off screen */

/* pre-load the hover images into the lists */
.menu li.p1 {width:50px; height:25px; margin:0 23px 0 0; background:url(../images/nav/home-btn.png) no-repeat 0 0}
.menu li.p2 {width:50px; height:25px; margin:0 27px 0 0; background:url(../images/nav/about-btn.png) no-repeat 0 0}
.menu li.p3 {width:58px; height:25px; margin:0 20px 0 0; background:url(../images/nav/marine-btn.png) no-repeat 0 0}
.menu li.p4 {width:53px; height:25px; margin:0 19px 0 0; background:url(../images/nav/land-btn.png) no-repeat 0 0}
.menu li.p5 {width:138px; height:25px; margin:0 29px 0 0; background:url(../images/nav/powerProducts-btn.png) no-repeat 0 0}
.menu li.p6 {width:102px; height:25px; margin:0 29px 0 0; background:url(../images/nav/marineCare-btn.png) no-repeat 0 0}
.menu li.p7 {width:75px; height:25px; margin:0 22px 0 0; background:url(../images/nav/location-btn.png) no-repeat 0 0}
.menu li.p8 {width:51px; height:25px; margin:0 0 0 0; background:url(../images/nav/news-btn.png) no-repeat 0 0}

/* set up the normal unhovered images in the links */
.menu li a#home {width:50px; height:25px; background:url(../images/nav/home-btn.png) no-repeat 0px 0;}
.menu li a#about {width:50px; height:25px; background:url(../images/nav/about-btn.png) no-repeat 0 0;}
.menu li a#marine {width:58px; height:25px; background:url(../images/nav/marine-btn.png) no-repeat 0px 0;}
.menu li a#land {width:53px; height:25px; background:url(../images/nav/land-btn.png) no-repeat 0px 0;}
.menu li a#powerProducts {width:138px; height:25px; background:url(../images/nav/powerProducts-btn.png) no-repeat 0px 0;}
.menu li a#marineCare {width:102px; height:25px; background:url(../images/nav/marineCare-btn.png)no-repeat 0px 0px;}
.menu li a#location {width:75px; height:25px; background:url(../images/nav/location-btn.png) no-repeat 0px 0px;}
.menu li a#news {width:51px; height:25px; background:url(../images/nav/news-btn.png) no-repeat 0px 0px;}

/* set up the current images in the links */
.menu li a#homeCurrent {width:50px; height:25px; background:url(../images/nav/home-btn.png) no-repeat 0 -25px;}
.menu li a#aboutCurrent {width:50px; height:25px; background:url(../images/nav/about-btn.png) no-repeat 0 -25px;}
.menu li a#marineCurrent {width:58px; height:25px; background:url(../images/nav/marine-btn.png) no-repeat 0 -25px;}
.menu li a#landCurrent {width:53px; height:25px; background:url(../images/nav/land-btn.png) no-repeat 0 -25px;}
.menu li a#powerProductsCurrent {width:138px; height:25px; background:url(../images/nav/powerProducts-btn.png) no-repeat 0 -25px;}
.menu li a#marineCareCurrent {width:102px; height:25px; background:url(../images/nav/marineCare-btn.png) top left no-repeat 0 -25px;}
.menu li a#locationCurrent {width:75px; height:25px; background:url(../images/nav/location-btn.png) no-repeat 0 -25px;}
.menu li a#newsCurrent {width:51px; height:25px; background:url(../images/nav/news-btn.png) no-repeat 0 -25px;}

/* Style the list OR link hover. Depends on which browser is used */
.menu a:hover {visibility:visible;} /* for IE6 */
.menu li:hover { position:relative; z-index:200;} /* for IE7 */

/* make the links transparent on hover so that the hover images in the lists show through (no flicker) */
.menu li a#home:hover, .menu li:hover a#home {width:50px; height:33px; background: url(../images/nav/home-btn.png) no-repeat 0 -25px;}
.menu li a#about:hover, .menu li:hover a#about {width:50px; height:33px; background:url(../images/nav/about-btn.png) no-repeat 0 -25px;}
.menu li a#marine:hover, .menu li:hover a#marine {width:58px; height:33px; background:url(../images/nav/marine-btn.png) no-repeat 0 -25px;}
.menu li a#land:hover, .menu li:hover a#land {width:53px; height:33px; background:url(../images/nav/land-btn.png) no-repeat 0 -25px;}
.menu li a#powerProducts:hover, .menu li:hover a#powerProducts {width:138px; height:33px; background:url(../images/nav/powerProducts-btn.png) no-repeat 0 -25px;}
.menu li a#marineCare:hover, .menu li:hover a#marineCare {width:102px; height:33px; background: url(../images/nav/marineCare-btn.png) no-repeat 0 -25px;}
.menu li a#location:hover, .menu li:hover a#location {width:75px; height:33px; background:url(../images/nav/location-btn.png) no-repeat 0 -25px;}
.menu li a#news:hover, .menu li:hover a#news {width:51px; height:33px; background:url(../images/nav/news-btn.png) no-repeat 0 -25px;}

/* keep the 'next' level invisible by placing it off screen. */
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

/* set up the first drop down sub level */
.menu :hover ul.sub {left:-60px; top:28px; padding:3px 0; white-space:nowrap; width:228px; height:auto;}
.menu :hover ul.sub li.top {display:block; height:13px; position:relative; float:left; width:228px; background:url(../images/dropdown-top.png) top left no-repeat;}
.menu :hover ul.sub li.bottom {display:block; height:13px; position:relative; float:left; width:228px; background:url(../images/dropdown-bottom.png) top left no-repeat;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:228px;}
.menu :hover ul.sub li a {display:block; font-size:12px; width:210px; height:19px; background: url(../images/dropdown-bg.png); line-height:19px; text-indent:0px; color:#fff; text-decoration:none; padding:1px 9px 0px 9px; float:left}

.menu :hover ul.sub li a:hover {background: url(../images/dropdown-rollover.png); color:#000; line-height:19px;}

.menu :hover ul.sub li a.fly:hover {background: url(../images/dropdown-rollover.png); color:#fff;}
.menu :hover ul li:hover > a.fly {background: url(../images/dropdown-rollover.png); color:#fff;}