html { height: 100%;}
body { top: 0px; bottom: 0px; max-height: 100%; height: 100%; margin: 0px; }
#header { display: block; height: 75px;font-size: 12pt; color: white; font-family: Verdana, Arial, Sanserif;  background-color: #AABBBB; }
#footer { position: absolute; bottom: 0; left: 0; right: 0; display: inline; overflow: hidden; font-family: Verdana, Arial, Sanserif; height: 160px; background-color: #40392e; }
div.mode { display: flex; justify-content: flex-start; align-items: flex-start;    background-color: #60594e; }
div.tab { display: table-cell; vertical-align: middle; margin: 0px; border-top: none; border-bottom: none; border-left: none; border-right: solid; border-width: 1px; border-color: black; text-align: center; float: left; height: 23px; width: 97px;font-family: Verdana, Arial, Sanserif; font-size: 12pt; background-color: #777777; }
div.error { font-family: Verdana, Arial, Sanserif; font-size: 12pt; float: left; margin-left: 10px; margin-top: 6px; color: red; }
div.selectedtab { border-top: none; border-bottom: none; border-left: none; border-right: solid; border-width: 1px; border-color: black; margin: 0px; text-align: center; float: left; height: 23px; width: 97px;font-family: Verdana, Arial, Sanserif; font-color: black;    background-color: #dddddd; }
#main { height: 100%; font-family: Verdana, Arial, Sanserif; display: block; color: #333333; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; overflow: auto;    background-color: #dddddd; }
a.tablink {   font-family: Verdana, Arial, Sanserif; text-decoration: none; color: black; font-size: 12pt}
a {   font-family: Verdana, Arial, Sanserif; color: #4444bb; font-size: 12pt}
th { background-color: #CCCCCC; padding: 4px 10px 4px 10px; margin: 0px; border: none; border-width: 0px; }
td { border-bottom: solid; border-width: 2px; border-color: #CCCCCC; padding: 4px 10px 4px 10px; margin: 0px; }
h1 { font-family: Verdana, Arial, Sanserif; color: #c0b098; font-size: 18pt}
h1.title { margin-left: 20px; }
h2 { font-family: Verdana, Arial, Sanserif; color: #333333; font-size: 18pt; font-weight: bold; }
h3 { font-family: Verdana, Arial, Sanserif; color: #333333; font-size: 14pt; }
input.button { margin-top: 7px; margin-left: 5px; }
div.links { position: relative; top: -48px; height: 23px; opacity: 1.0; padding-right: 10px; text-align: right; white-space: nowrap; }
div.linkbar { position: relative; top: -26px; height: 23px; opacity: 0.7; padding-right: 10px; text-align: right; white-space: nowrap;    background-color: #c0b098; }
img.titleimage { margin: 0px; padding: 0px;    height: 75px; }
div.row { display: table-row; }
div.label { display: table-cell; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; text-align: right; width: 150px; float: left; }
div.input { display: table-cell; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; text-align: left; float: left; }
select { width: 150px; }

 jaclradio { float: left; }
div.bottompad { min-height: 100px; }
div.powerhead_map { background-image: url('images/outboard/powerhead_map.jpg'); background-position: center center; background-repeat: no-repeat; background-size: contain; width: 200vw; height: 100vw; }
div.powerhead_map_mobile { background-image: url('images/outboard/powerhead_map.jpg'); background-position: center center; background-repeat: no-repeat; background-size: contain; width: 200vw; height: 100vw; }
span.breadcrumbs { font-family: Verdana, Arial, Sanserif; text-decoration: none; font-size: 12pt; }
a.breadcrumbs { font-family: Verdana, Arial, Sanserif; text-decoration: none; font-size: 12pt; }
div.breadcrumbs { width: 95%; padding: 10px; border-width: 4px; border-left-style: solid; border-right-style: solid; background-color: #e8e8e8; font-family: Verdana, Arial, Sanserif; text-decoration: none; border-radius: 10px; font-size: 10pt; }
div.look { clear: both; display: block; margin-left: 10px; margin-top: 15px; margin-bottom: 10px; overflow: auto; }
div.paragraph { width: 90%; margin-bottom: 50px; margin-left: 5%; overflow: auto; }
img.logo { max-width: 50%; float: left; margin-right: 10px; }
img.profile { float: right; max-width: 50%; margin-left: 20px; border-radius: 10%; }
img.rightarrow { margin-top: 5px; cursor: pointer; float: right; }
img.donate { margin-top: 3px; margin-right: 4px; clear: right; }
a.restart { float: right; clear: right; }
a.powerhead { background: transparent url('images/outboard/Powerhead.png') center top no-repeat; position: absolute; left: 0px; top: 7px; width: 253px; height: 151px; }
a.powerhead:hover, a.powerhead:active { background-image: url('images/outboard/Powerhead_Hover.png'); }
#swivel-bracket_img { background: transparent url('images/outboard/SwivelBracket.png') center top no-repeat; position: absolute; left: 5px; top: 158px; width: 88px; height: 191px; }
#swivel-bracket_img:hover { background-image: url('images/outboard/SwivelBracket_Hover.png'); }
#mid-section_img { background: transparent url('images/outboard/Midsection.png') center top no-repeat; position: absolute; left: 93px; top: 158px; width: 160px; height: 190px; }
#mid-section_img:hover { background-image: url('images/outboard/Midsection_Hover.png'); }
#lower-unit_img { background: transparent url('images/outboard/Lowerunit.png') center top no-repeat; position: absolute; left: 55px; top: 346px; width: 185px; height: 143px; }
#lower-unit_img:hover { background-image: url('images/outboard/Lowerunit_Hover.png'); }
#propeller_img { background: transparent url('images/outboard/Propeller.png') center top no-repeat; position: absolute; left: 155px; top: 380px; width: 100px; height: 120px; }
#propeller_img:hover { background-image: url('images/outboard/Propeller_Hover.png'); }
img.topic { border-radius: 20px; border: 5px solid #60594e; width: 100%; height: 100%; }
div.photo { max-width: 560px; max-height: 315px; display: inline-block; position: relative; margin-right: 20px; }
div.photo_mobile { max-width: 360px; max-height: 210px; display: inline-block; position: relative; margin-bottom: 20px; }
div.video { display: inline-block; position: relative; margin-right: 20px; }
div.video_mobile { display: inline-block; position: relative; margin-bottom: 20px; }
div.options { margin-top: 0px; display: inline-block; max-width: 580px; min-width: 300px; }
div.outboard { margin-bottom: 20px; display: inline-block; position: relative; min-width: 262px; max-width: 262px; width: 262px; margin-right: 20px; height: 500px; background-color: #555555; border-radius: 20px; border: 5px solid #c0b098; }
div.desktop_flexbox { display: flex; flex-direction: row; align-items: flex-start; }
div.mobile_flexbox { display: flex; flex-direction: column; align-items: center; }
div.main { width: 100%; margin: auto; padding: 10px; }
div.description { position: relative; float: left; width: 400px; height: 484px; background-color: lightblue; padding: 10px; margin: 10px; border: 3px solid #666666; }
#render_topic_map { width: 100%; overflow: auto; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
img.rightarrow { margin-top: unset; cursor: unset; float: unset;}
div.accordion_option_desc { overflow: hidden; /* prevent text wrapping under next btn icon */  }
a.accordion_option_next { float: right; margin-left: 10px; }
a.accordion_option_next:hover img { background: #EEE; border-radius: 6px; }
#powerhead_img { background: transparent url('images/outboard/Powerhead.png') center top no-repeat; position: absolute; left: 0px; top: 7px; width: 253px; height: 151px; }
#powerhead_img:hover, #powerhead_img.active { background-image: url('images/outboard/Powerhead_Hover.png'); }
#swivel-bracket_img { background: transparent url('images/outboard/SwivelBracket.png') center top no-repeat; position: absolute; left: 5px; top: 158px; width: 88px; height: 191px; }
#swivel-bracket_img:hover, #swivel-bracket_img.active { background-image: url('images/outboard/SwivelBracket_Hover.png'); }
#mid-section_img { background: transparent url('images/outboard/Midsection.png') center top no-repeat; position: absolute; left: 93px; top: 158px; width: 160px; height: 190px; }
#mid-section_img:hover, #mid-section_img.active { background-image: url('images/outboard/Midsection_Hover.png'); }
#lower-unit_img { background: transparent url('images/outboard/Lowerunit.png') center top no-repeat; position: absolute; left: 55px; top: 346px; width: 185px; height: 143px; }
#lower-unit_img:hover, #lower-unit_img.active { background-image: url('images/outboard/Lowerunit_Hover.png'); }
#propeller_img { background: transparent url('images/outboard/Propeller.png') center top no-repeat; position: absolute; left: 155px; top: 380px; width: 100px; height: 120px; }
#propeller_img:hover, #propeller_img.active { background-image: url('images/outboard/Propeller_Hover.png'); }
div.outboard a:hover { cursor: pointer; }
div.video_preload { cursor: pointer; background: #000; width: 100%; height: 100%; background-color: #000; background-size: contain; background-position: center center; background-repeat: no-repeat; }
div.video_preload:after { cursor: pointer; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0.9; width: 68px; height: 54px; background: url('images/outboard/play_icon_red.png'); background-size: cover; content: ''; }
div.video_preload:hover:after { background: url('images/outboard/play_icon_white.png'); }
div.photo { width: 100%; height: 210px; border: 5px solid #60594e; border-radius: 6px; overflow: hidden; background: #60594e; background-repeat: no-repeat; background-position: center top; background-size: contain; margin-bottom: 20px; margin-right: 0px; }
@media screen and (min-width: 1000px) { div.photo { width: 560px; height: 315px; margin-right: 20px; }
}
div.photo div.photo_caption { position: absolute; bottom: 0%; width: 100%; height: auto; background: rgba(0,0,0,.7); color: #FFF; font-size: 0.8em; }
div.photo div.photo_caption_inner span { font-weight: bold; }
div.photo_caption_inner { padding: 12px; }
div.photo img { border-radius: 6px;}
div.ui-accordion .ui-accordion-content { padding: 0.7em 1em; }
p { line-height: 1.3em; }
div.breadcrumbs { width: 100%; box-sizing: border-box; border-color: #555; border-radius: 5px; line-height: 24px; }
div.breadcrumbs a.breadcrumbs { color: #222; }
div.breadcrumbs a.breadcrumbs:hover { color: #0000FF; }
div.breadcrumbs span.breadcrumbs { font-weight: bold; color: #555; }
div.links { color: #333; }
div.links a { color: #FFF; text-decoration: none; font-weight: bold; }
div.links a:hover { color: #000; }
div.mode { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; margin: 0px auto; }
div.mode, div.mode div.tab, div.mode div.selectedtab { height: 34px; line-height: 34px; }
div.mode div.tab:hover { background: #555; cursor: pointer; }
div.mode div.tab:hover a.tablink { color: #FFF; }
#header img.titleimage { max-width: 100% !important; }
a.rightimage { height: 50px; float: right; }
img.rightimage { height: 50px; float: right; }
div.paragraph { overflow: unset; width: unset; margin-left: unset; margin-bottom: unset; }
#main { overflow: unset; height: unset; background-color: unset; padding-top: unset; padding-bottom: unset; padding-left: unset; padding-right: unset; width: 90%; margin: 0px auto; margin-top: 15px; }
html,body { background: #dddddd; }

/* Added by tools/build_html.py: desktop/mobile switching, see DEVICE_CSS. */
.jacl_mobile { display: none; }
@media screen and (min-width: 768px) {
   body { min-width: 960px; }
}
@media screen and (max-width: 767px) {
   .jacl_desktop { display: none; }
   .jacl_mobile { display: block; }
   div.desktop_flexbox { flex-direction: column; align-items: center; }
   div.video { margin-right: 0px; margin-bottom: 20px; }
   div.video iframe { width: 360px; height: 210px; }
}
div.boat_diagram { max-width: 900px; margin-bottom: 20px; padding: 10px; background-color: #555555; border-radius: 20px; border: 5px solid #c0b098; }
div.boat_diagram svg { display: block; width: 100%; height: auto; }
div.boat_diagram .hover { opacity: 0; transition: opacity 0.15s; }
div.boat_diagram a.area:hover .hover, div.boat_diagram a.area.active .hover { opacity: 1; }
div.boat_diagram .hit { fill: transparent; cursor: pointer; }
img.rightimage.raymarine { height: 20px; margin: 15px 25px 0 0; }