﻿

*{ margin:0; padding:0; list-style: none; }
img{border:0;}
.hideme { display: none; } /* visibility: hidden; could be used here instead depends what you need */

body{ font-family: Arial; font-size: 11px; color: #000000;}

h2
{
	margin: 0px 0;
	font-size: 160%; color: #036A8D;
}

h2.thin-blue { color: #013B5B; font-weight: normal; }

h3 { color: #036A8D; font-size: 140%; }

h4 { margin: 0 0 -15px 0; color: #036A8D; font-size: 120%; }

h5, h6 {}

.mainBodyDiv{ width: 964px; margin: auto; position: relative; }
    .headerDiv
    {
        background-color: #ffffff;
        background-image:url(/img/header/headerbg.gif); 
	    background-position:right top; 
	    background-repeat:no-repeat;
	    height: 128px; /*33px for menu*/
	    position: relative;
	    margin-bottom: 5px;
	}
	    /*we can set the image where needed as the parent div is position relative!*/
	    .headerImageDiv{ width: 240px; height: 75px; position: absolute; top: 10px; left: 20px;}
	    .headerTitleDiv{ width: 470px; height: 45px; position: absolute; bottom: 40px; right: 20px; text-align:right;}
	        .headerTitleDiv h3{ color: #003b5a; font-weight: 300; font-size: 28px;}
	    .BWSWLogo { position: absolute; top: 10px; right: 40px;}

	    .headerMenuDiv
	    {	        
            background-image:url(/img/header/menubg.gif); 
	        background-position:left top; 
	        background-repeat:no-repeat;
	        height: 33px;
	        position: absolute;
	        bottom:0;
	        width: 100%;
	        color: #ffffff;
	    }
	    .headerMenuDiv a{ color: #ffffff; text-decoration: none;}
	    .headerMenuDiv a:hover{ color: #ffffff; text-decoration: underline;}
	        .headerMenuDiv ul{ display: inline;}
	        .headerMenuDiv ul li{ float: left; margin: 8px 11px 0 20px;}
	 
	    
    .homeHeaderDiv{ margin-bottom: -10px; height: 140px;}
    
    .noneFlash img { margin: 15px 3px 0 3px; float: left;}
    .noneFlash span{ display: none;}
    
     .leftMenuDivHome{ width: 217px;  margin-top: 15px; position: absolute; top: 260px; left: 0;}
    .leftMenuDiv{ width: 217px;  margin-top: 15px; position: absolute; top: 135px; left: 0;}
	
        .leftMenuDiv .menu,
		.leftMenuDivHome .menu { display: block; margin-bottom: 16px;}

        .leftMenuDiv .menu li,
		.leftMenuDivHome .menu li{ height: 30px; width: 197px;  margin-bottom: 0px;background: url(/img/quoteBG_v2.gif) no-repeat top left;}		
		   
        .leftMenuDiv .menu li a,
		.leftMenuDivHome .menu li a{ display: block; height: 20px; padding: 9px 0 0 10px; color: #ffffff; text-decoration: none;  } 

		/*.leftMenuDiv .menu li a:hover,
		.leftMenuDivHome .menu li a:hover{ background: url(/img/quoteBG_v2_on.gif) no-repeat top left; }*/

		.leftMenuDiv .menu li.start,
		.leftMenuDivHome .menu li.start{height: 34px; background: url(/img/quoteBG_v2_start.gif) no-repeat top left;} 
		.leftMenuDiv .menu li.start a,
		.leftMenuDivHome .menu li.start a{ height: 34px;}
		/*.leftMenuDiv .menu li.start a:hover,
		.leftMenuDivHome .menu li.start a:hover{background: url(/img/quoteBG_v2_start_on.gif) no-repeat top left; height: 34px;}*/

		.leftMenuDiv .menu li.end,
		.leftMenuDivHome .menu li.end{height: 33px; margin-bottom: 6px; background: url(/img/quoteBG_v2_end.gif) no-repeat top left; } 
		.leftMenuDiv .menu li.end a,
		.leftMenuDivHome .menu li.end a{height: 33px;} 
		/*.leftMenuDiv .menu li.end a:hover,
		.leftMenuDivHome .menu li.end a:hover{background: url(/img/quoteBG_v2_end_on.gif) no-repeat top left; height: 34px;} */


        .leftMenuDiv .menu li.twoLine a,
		.leftMenuDivHome .menu li.twoLine a{padding: 1px 0 0 10px;}
    
    .mainContentDivQuote{ width: 535px; height: 547px; background: white url(/img/temp/bodyBG.gif) no-repeat top right; float: left; margin: 15px 0px 0 237px;}
    .quoteHeader{ height: 38px; background: #ef3e36 url(/img/quoteHeaderBG.gif) no-repeat top right; color: #ffffff; width: 514px;}
        .QuotationHeader h2{ font-size: 18px; padding: 8px 0 6px 10px; color: #ffffff;}
	.QuotationHeader h2 a { color: #ffffff;}
    
    .mainContentDivInner { width: 493px; height: 480px; overflow: auto; overflow-x: hidden; padding: 10px 10px 0 10px; }
        .content { color: #013B5B; font-size: 110%; }
        .content p { margin: 10px 10px 5px 0; }
        .content p span.BIGWORD { font-size: 120%; font-weight: bold; }
        .content a { color: #013B5B; text-decoration: underline; }
        .content ul { margin: 0 0 0 30px; }
        .content ol { margin: 0 0 0 37px; }
        
        
        .mainContentDivInner .left{ width: 241px; float: left;}
        .mainContentDivInner .right{ width: 241px; float: right;}
        .mainContentDivInner .clear{ float: left; clear: both;}
    
    .rightTilesDiv{ width: 175px; float: right; margin-top: 14px;}
        .rightTilesDiv img{ margin-bottom: 11px;}
    
    .subFooterDiv{ clear: both; height:43px; padding: 4px 0 4px 0; margin: -00px 0 0 0;}
        .subFooterLeft{ float: left;}
        .subFooterRight{ float: right;}
    .footerDiv{ clear: both; background-color: #00718f; color: #ffffff; clear: both; padding: 2px 14px 4px; font-size: 9px; margin: 0 0 10px;}
        .footerDiv a{color: #ffffff;}
        
     .premium	{ font-size:110%; margin: 16px 0 16px 0; }
.premium th	{ text-align:left; font-weight:normal; color: #428391; padding-right:16px; padding-bottom:8px;}
.premium td.header	{ font-weight:bold; text-align:left; padding: 8px 0 8px 0;}
.premium td.cost	{ text-align:right; padding-bottom:8px; }
.premium th.price	{ font-size:130%; font-weight:bold; border-bottom:1px solid #428391;  }
.premium td.price	{ text-align:right; padding-bottom:8px; font-size:130%; font-weight:bold; border-bottom:1px solid #428391;}

/* = Freeform template
--------------------------------------------------------------------------*/
	.mainContentDiv{ float:left; min-height: 535px; height: auto !important; height: 535px;}
    .mainContentDivHome{ float:left; min-height: 325px; height: auto !important; height: 325px; }
    
  
    .mainContentDivFreeform{ width: 725px; float: left; margin: 8px 0px 0 237px;}
    
  .homepageContentDivFreeform{ width: 504px; float: left; margin: 15px 0px 0 237px;} 
		.homepageTitle { width: 525px; height: 113px; float: left; background: url(/img/homepageTitleBG.gif) no-repeat top right; color: #ffffff; font-weight: bold; font-size: 210%; text-align: center; }       
		.homepageTitleInner{  width: 504px; padding: 10px 35px 20px 0;}
		.homepagemainContent{ width: 525px; height: 647px; background: white url(/img/homepagebodyBG.gif) no-repeat bottom right; float: left; }
		.homeInnerContent{ float: left; width: 474px; padding: 0 10px 0 20px; background: white url(/img/homepageContentBG.gif) no-repeat top left; text-align: center;}
		.homeInnerContent h3{ margin: 15px 0 -5px 0px; font-size: 120%; color: #003b5a;}
    
	/*General With Small Right  / 500 - 180*/
    .GeneralSmallRight{ float: left; width: 725px;}
		.GeneralSmallRight .left{ float: left; width: 500px;}
		.GeneralSmallRight .right{ float: right; width: 180px;}
	
	/*General Two Columns  / 352 / 352*/
	.GeneralTwoColumns{ float: left; width: 725px;}
		.GeneralTwoColumns .left{ float: left; width: 352px;}
		.GeneralTwoColumns .right{ float: right; width: 352px;}
	
	/*General With Three Columns  231 - 12 padding*/
	.GeneralThreeColumns{ float: left; width: 725px; margin-top: 10px;}
		.GeneralThreeColumns .left{ float: left; width: 231px;}
		.GeneralThreeColumns .middle{ float: left; width: 231px; margin-left:12px;}
		.GeneralThreeColumns .right{ float: right; width: 231px;}
		
	/*General with background*/
	.GJWbackground{ background: #ffffff url(/img/background.gif) no-repeat 0px 8px; padding: 10px 0 10px 20px; width: 705px; height: 520px; float: left;}
	.GeneralBackground{float: left; width: 725px; margin-top: 10px;}
		.GeneralBackground .left{ float: left; width: 402px; margin-left: 0px; padding: 6px; background-color: #ffffff; border: 1px solid #276e95;}
		.GeneralBackground .right{ float: left; width: 234px; margin-left: 20px;}
		
	/*Quote Premium Page*/
	.QutoePremium{ width: 480px; float: left;}
		.QutoePremium .twoCols{ float: left; clear: both; width: 480px;}
			.QutoePremium .twoCols .left{ float: left; width: 235px;}
			
				.QutoePremium .twoCols .left .small{ font-size: 95%; font-weight: bold;}
				
				.QutoePremium .twoCols .left .callUs,
				.QutoePremium .twoCols .right .callUs
				{ padding: 5px; text-align: right; color: #224960; font-weight: bold;}
					.QutoePremium .twoCols .left .callUs .title,
					.QutoePremium .twoCols .right .callUs .title{ font-size: 190%; color: #5ca7bf;}
					
			.QutoePremium .twoCols .right{ float: right; width: 215px; padding: 5px;}
			.QutoePremium .twoCols .right.colour{background-color: #00718f; color: #ffffff; }
				.QutoePremium .twoCols .right ul{ margin: 0px;}
				.QutoePremium .twoCols .right ul li{ padding: 3px 0 3px 23px;  background: #00718f url(/img/tick.gif) no-repeat 4px 4px;}
		.QutoePremium .oneColBg { float: left; width: 470px; clear: both; padding: 5px; margin: 0px 0 0 0;background-color: #ddecf1;}
		.QutoePremium .oneCol { float: left; width: 470px; clear: both; margin: 0px 0 0 0; padding: 5px;}
			.QutoePremium .oneColBg .document,
			.QutoePremium .oneCol .document{ width: 195px; float: left;  margin-left: 40px;}
				.QutoePremium .oneColBg .document img,
				.QutoePremium .oneCol .document img{ float: left;}
				.QutoePremium .oneColBg .document a,
				.QutoePremium .oneCol .document a{ font-weight: bold; text-decoration: none;}
		
		.QutoePremium .premium	{ font-size:110%; margin: 0px 0 16px 0; font-weight: bold; }
		.QutoePremium .premium th	{ text-align:left;  padding-right:16px; padding-bottom:3px;}
		.QutoePremium .premium td.header	{ font-weight:bold; text-align:left; padding: 3px 0 3px 0;}
		.QutoePremium .premium td.cost	{ text-align:right; padding-bottom:8px; font-weight: normal; }
		.QutoePremium .premium th.price	{ font-size:130%; color: Red; font-weight:bold; border-bottom:2px solid #428391;  }
		.QutoePremium .premium td.price	{ text-align:right; padding-bottom:8px; color: Red; font-size:130%; font-weight:bold; border-bottom:2px solid #428391;}
			




/* = Nuggets
--------------------------------------------------------------------------*/

.nuggetDiv{ width: 149px; padding: 13px 13px 0 13px; position: relative; background: #ffffff url(/img/nuggetBG.gif) no-repeat bottom right; margin-bottom: 16px; color: #003b5a; font-size: 11px; font-weight: bold; border-top: 1px solid #c5dcd6; border-left: 1px solid #c5dcd6;}
    .nuggetDiv h2{ margin: 0; padding: 0;}
	.nuggetDiv h4{ font-size: 18px; color: #003b5a; padding: 0 0 8px 0;  }
    .nuggetDiv ul{ padding: 8px 8px 8px 26px; }
    .nuggetDiv ul li{ list-style: disc;}
    .nuggetDiv p{ padding: 8px 0 0 0;}
    .nuggetDiv a{ color: #ffffff; text-decoration: none;}
    .nuggetDiv .nuggetMore{ height: 17px; padding: 0px 16px 0px 0px; margin: 13px 0px 0px 0px; text-align: right; }

.nuggetDivWhite{ width: 149px; padding: 13px; background: #ffffff url(/img/nuggetBGWhite.gif) no-repeat bottom right; margin-bottom: 16px; color: #003b5a; font-size: 11px; font-weight: bold;}

.speedboatNugget{ position: relative; width: 175px; height: 404px; background: #ffffff url(/img/panel/speedboat/BG.gif) no-repeat bottom right; margin-bottom: 10px; color: #003b5a; font-size: 11px; font-weight: bold; border-top: 1px solid #c5dcd6; border-left: 1px solid #c5dcd6;}
	.speedboatNugget h4{ padding: 8px 8px 18px 8px; font-size: 18px; color: #003b5a;}
	.speedboatNugget p{ padding: 0px 8px 0px 8px; }
	.speedboatNugget .tabs{ position: relative; background: url(/img/panel/speedboat/tabs.gif) no-repeat top left; width: 155px; height: 271px; margin: 5px 10px 10px 10px; }
		.speedboatNugget .tabs .sponsored{ position: absolute; left: 12px; top: 5px; font-size: 100%;}		
		.speedboatNugget .tabs .supported{ position: absolute; left: 12px; top: 105px; font-size: 100%;}
		.speedboatNugget .tabs .organised{ position: absolute; left: 12px; top: 185px; font-size: 100%;}
		.speedboatNugget .tabs .logoGJW			{ position: absolute; left: 20px; top: 25px;}
		.speedboatNugget .tabs .logoMasterCraft	{ position: absolute; left: 20px; top: 75px;}
		.speedboatNugget .tabs .logoLottery		{ position: absolute; left: 20px; top: 130px;}
		.speedboatNugget .tabs .logoBWSW		{ position: absolute; left: 20px; top: 202px;}
		.speedboatNugget a{ color: #ffffff; text-decoration: none;}
	.speedboatNugget .nuggetMore{ position: absolute; bottom: 4px; right: 28px; padding: 0; }

.boatshowNugget{ position: relative;padding: 13px 13px 0 13px; width: 149px; height: 300px; background: #ffffff url(/img/nuggetBGWhite.gif) no-repeat bottom right; margin-bottom: 10px; color: #003b5a; font-size: 11px; font-weight: bold; border-top: 1px solid #c5dcd6; border-left: 1px solid #c5dcd6;}
	.boatshowNugget h4{ font-size: 18px; color: #003b5a; margin: 0 0 8px 0;  }
	.boatshowNugget h5{ font-size: 16px; color: #003b5a; padding: 0 0 8px 0;  }
	.boatshowNugget p{ padding: 0px; }
    
/* =Forms
--------------------------------------------------------------------------*/

fieldset { margin: 0 0 10px 0px; padding: 5px; width: 470px; display: block; border: 0;  }
legend { padding: 5px; border: 1px solid #CCC; }

input.textbox { padding: 2px; width: 200px; border: 1px solid #C5C5C6; font-size: 95%; }
.indent label{text-align: right;}

input.textbox_small { padding: 2px; width: 100px; border: 1px solid #C5C5C6; font-size: 95%; }

textarea { padding: 2px; width: 180px; height: 50px; border: 1px solid #C5C5C6; font-family: Arial; font-size: 95%; }

.DropDownSmall {min-width: 80px; width: 80px !important;}

select { min-width: 200px; font-size: 95%; }

fieldset ol { margin: 10px 0 !important; list-style: none; }

input.submit {float:right; color:White; background-color:#013B5B; width:100px; }
input.back {float:left; color:White; background-color:#013B5B; width:100px; }
input.submit_200 {float:right; color:White; background-color:#013B5B; width:200px; }
input.submit_200_left {color:White; background-color:#013B5B; width:200px; margin-left: 200px; }


.sameline li { margin: 0 0 5px 0; clear: both;}
.sameline .radio input { margin-right: 5px; }
.sameline .checkbox { display:inline; float:none; }

.sameline label
{
	margin: 0 10px 5px 10px;
	display: block;
	float: left;	
	/* For some odd reason firefox dont support inline-block which in this case would be ideal :/
	display: inline-block;
	display: -moz-inline-box;
	*/
	width: 180px;
	/*line-height: 20px;*/
	font-size: 95%; color: #013B5B;
}

.abovebelow{ padding: 5px 0 5px 0; float: left;}

.sameline input, .abovebelow input { vertical-align: middle; }

.abovebelow label { display: block; width: 450px; }
.abovebelow textarea { width: 340px; margin: 0 0 0 60px; }
.abovebelow select,
.abovebelow input { width: auto; margin: 0 0 0 10px;}
.withindent .textbox, .withindent select, .withindent .checkbox { margin-left: 200px; }

.compulsary { margin: 0 4px 0 0 !important; font-style: italic; font-size: 95%; color: #E8515A; }
.error { color: red; }

ol.text		{	list-style-type:decimal;	padding-left:30px;	}
ol.text li	{	margin-bottom:2px;	}

li.flow label
{
	display:inline;
	float:none;
	width:auto;
}

.other { padding: 2px 0 0 0; clear: both; }
.other label { padding-left: 60px; width: 120px; }
.selectinline select, .selectnewline select { margin-right: 14px; margin-bottom: 2px; float: right; }
.selectinline label { width: auto; }
.selectnewline label { float: none; width: auto; }



.confirmDetails th	{text-align:left; padding-bottom:4px; color: #428391; vertical-align:top; padding-right:16px;}
.confirmDetails th.section {font-size:110%; padding-top:16px; color: #013B5B; vertical-align:top;}
.confirmDetails td	{padding-bottom:4px;}

.tooltip { width: 270px; float: right; font-style: italic; clear: both; font-size: 11px;}

.buttonBack{ float: left; background-color: Red;}
.buttonNext{ float: right; background-color: Gray;}

/* for form summary information */
.formSummary {}
.formSummary span{ float: right; width: 200px; font-weight: bold; }





/* link  summary */
.linkItem { background-color: #00718f; width: 231px; margin-right: 10px; color: #ffffff; padding-bottom: 5px; float: left; height: 120px; }
.linkItemEnd { background-color: #00718f; float: left; width: 231px; color: #ffffff; padding-bottom: 5px; margin-bottom: 10px; height: 120px;}
.linkItem a, .linkItemEnd a{color: #ffffff; text-decoration:none;}
.linkItem a:hover, .linkItemEnd a:hover{ color: #ffffff; text-decoration: underline;}
	.linkItemTitle {background-color: #51a2b9; color: #ffffff; padding: 5px 5px 1px 5px;}
	.linkItemTitle h4{color: #ffffff; margin-bottom: 5px;}
	.linkItemBody{margin: 5px 5px 5px 5px; margin-bottom: 5px; color: #ffffff;}
	
	

.poundSymbol{padding: 2px 2px 2px 15px; width: 187px; border: 1px solid #C5C5C6; font-size: 95%; background: #ffffff url(/img/pound.gif) no-repeat top left;}	


.left { float: left; padding: 5px 5px 5px 0; }
.right { float: right; padding: 5px 0px 5px 5px;  }
.clearme{clear: both; width: 480px;}

.dateArea{  clear: both; padding-left: 200px; }
.dateArea .dateInput{ width: 60px; min-width:60px; margin:0; padding: 0; }
.dateArea .dateInput option{ width: 60px;}



.paymentArea{ padding-top: 40px; float: left; }
	.paymentArea .button{ margin: 0 0 0 -5px;}
	.paymentArea .content {float: left; width: 500px;}
	.paymentArea .content img{ float: right; padding: 0 60px 0 20px;}


/*BWSW Area*/
.bwswLeftArea { float: left;}
.bwswLeftArea h3{height: 55px; width: 182px; background: url(/img/bwsw/leftHeader.gif) no-repeat top left; color: #ffffff; padding: 13px 10px 0 10px; font-size: 120%;}
.bwswLeftArea ul{background: url(/img/bwsw/leftBG.gif) repeat-y; width: 182px; padding: 0 10px 0 10px; color: #00718f; font-size: 11px; font-weight: bold;}
.bwswLeftArea ul li{padding: 0px 0 3px 0px; margin: 0 0 0 10px; list-style-type: disc;}
.bwswLeftArea .footer {height: 25px; width: 202px; background: red url(/img/bwsw/leftFooter.gif) no-repeat top left; color: #ffffff; margin-bottom: 10px;}

.BWSWLogo { position: absolute; top: 10px; right: 40px;}




/*Our Commitemnt*/
.ourCommitment		{ background: url(/img/commitment/redBG.gif) no-repeat top left; height: 274px; width: 155px; padding: 10px;}
.ourCommitment h2	{ width: 152px; height: 69px; text-indent: -99999px; background: url(/img/commitment/ourcommitment.png) no-repeat 50% 50%; margin-bottom: 10px;}
.ourCommitment .hr	{ display: block; width: 155px; height: 20px; border: 5px; background: url(/img/commitment/hr.png) no-repeat top left;}
.ourCommitment p	{ color: #ffffff; font-size: 120%; line-height: 18px;}


/*comparison*/
.comparisonLeft		{ width: 198px; height: 148px; background: url(/img/comparison/left.gif) no-repeat top left; border-bottom: 15px solid #ffffff; border-top: 16px solid #ffffff; position: relative;}
	.comparisonLeft h4	{ height: 50px; width: 165px; background: url(/img/comparison/leftTitle.png) no-repeat 50% 50%; text-indent: -99999px; position: absolute; top: 21px; left: 13px; }
	.comparisonLeft p	{ color: #ffffff; margin: 95px 15px 0 15px; font-size: 120%;}

.comparisonRight	{ width: 175px; height: 116px; background: url(/img/comparison/right.gif) no-repeat top left; border-bottom: 15px solid #ffffff; position: relative;}
	.comparisonRight h4	{ height: 47px; width: 154px; background: url(/img/comparison/rightTitle.png) no-repeat 50% 50%; text-indent: -99999px; position: absolute; top: 10px; left: 10px; }
	.comparisonRight p	{ color: #ffffff; margin: 5px 5px 0 12px; font-size: 105%; position: absolute; bottom: 12px;}