/* ---- start boating styles ---- */

#article-centre-3col.start-sail-bg-outer
{
    background: url(images/start-sail-bg-btm.jpg) no-repeat left bottom;
    padding:24px 24px 140px;
    width:472px;
}

#article-centre-3col-outer.start-sail-bg-inner,
#article-centre-3col-outer.start-power-bg-inner,
#article-centre-3col-outer.start-blank-bg-inner
{
    background:#fff url(images/start-sail-bg-top.jpg) no-repeat 0px 213px;
    float:left;
    width:520px;
}

#article-centre-3col-outer.start-power-bg-inner
{
    background-image:url(images/start-power-bg-top.jpg);
}

#article-centre-3col-outer.start-blank-bg-inner
{
    background-image:url(images/start-blank-bg-top.jpg);
}


.start-boating-header
{
    margin:-24px 0 40px -24px;
    border-bottom:solid 1px #093d6f;
}
.start-article-panel
{
    float:left;
    clear:both;
    margin:0px 0px 40px 0px;
    padding-right:20px;
    height:123px;
    width: 450px;
    background:#ddf1f6 url(images/start-boat-article-bg.jpg) no-repeat 149px 0;
    display: inline;
}
.start-article-panel img
{
    float:left;
    clear:none;
    border:0px;
    display: inline;
}
.start-article-panel h3,
.start-article-panel p
{
    float: left;
    width: 272px;
    margin: 0 0 0 25px;
    padding: 0;
}

.start-article-panel h3
{
    font-size:13px;
    margin-top:13px;
    text-transform:none;
    color: #00204F;
}
.start-article-panel p
{
    margin-top:5px;
}


.download-panel
{
    float:left;
    clear:both;
    width:470px;
    height:123px;
    margin:10px 0px 10px -2px;
    padding:20px 15px 0px 25px;
    background:url(images/download-panel-bg.png) no-repeat left top;
}
.download-panel h3
{
    float:left;
    clear:both;
    width:100%;
    margin:0px;
    color:#fff;
    font-size:16px;
    text-transform:none;
}
.download-panel p
{
    float:left;
    clear:none;
    width:270px;
    color:#fff;
    margin: .5em 0 0 0;
}
.download-panel a
{
    float:right;
    clear:none;
    margin-right:26px;
    margin-top:12px;
}
.download-panel a img
{
    border:0px;
}
.start-boating-footer
{
    float:left;
    clear:both;
    width:100%;
    height:70px;
    background:#01909b;
    border-top:solid 1px #01143c;
}

.start-boating-footer strong
{
    text-transform:uppercase;
}
.start-boating-footer p
{
    float:left;
    clear:left;
    width:300px;
    margin:12px 0px 0px 30px;
}
.start-boating-footer a
{
    float:right;
    margin:10px 25px 0px 0px;
    *margin:40px 25px 0px 0px;
}
.start-boating-footer a img
{
    border:0px;
}

a#start-boat-option-sail img,
a#start-boat-option-power img
{
    border: 0;
}

/* add a subtle indicator to click*/
a#start-boat-option-sail:hover img,
a#start-boat-option-power:hover img
{
	opacity: .9; /*standards*/
	filter: alpha(opacity=90);/*for IE5-7*/
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /*IE8*/
}

/* use JQuery flash to replace this container element. Has a lo-fi jpg here for ppl without flash or script*/
#flash-header
{
    width: 758px;
    height: 275px;
    background: #ABDBE9 url('images/start-boat-hub-header.jpg') 0 0 no-repeat;
    margin-left: -33px;
}


.start-boat-options-column h3
{
    margin-bottom: 0 !important;
    height: 2.6em; /*for msie6*/
    min-height: 2.6em;
}
.start-boat-options-column ul
{
    height: 12.5em; /*for msie6*/
    min-height: 12.5em;
}

/*IE6 doesn't get min-height, but treats height: in the same way. this workaround resets it to auto for all other browsers*/
html>body start-boat-options-column h3,
html>body start-boat-options-column ul
{
    height:auto
} 

/* in msie8 fix pile of elements bug, msie7 flash of nonlayout on load*/
#SailContent,
#PowerContent
{
    float: left;
    width: 100%;
}



/* sort out multiline labels for checkboxes on download form*/
.brochure-list dd 
{
    text-align: left;
    height: 150px;
}

.brochure-list dd label
{
    width: 90px;
    float: right;
    display: inline;
}

.brochure-list dd input
{
    float: left;
}

.form-completion-note
{
    clear: both;
    float: left;
    width: 100%;
    height: 500px;
}