@charset "UTF-8";
/*================================ LAYOUT STYLES ===============================*/
/* This set of styles doesn't require an overall wrapping container. Each of the */
/* main structural (parent) layout div's - header, content and footer are centred  */
/* relative to each other. The content divs they contain (child divs) are either */
/* positioned relative to their containing parent or absolutely. */


#header { /*  --------------- FIRST parent div id element ---------------  */
	width: 922px;
	margin-right: auto;
	margin-left: auto;
	height: 150px;
	position: relative;
	background-color: #FFFFFF;
}

#content {/* ---------- The SECOND parent div id element. --------------- */
	width: 902px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 10px;
	padding-right: 10px; /* PAdding left and right creates the margins for ALL child divs*/
	padding-left: 10px;
	background-color: #FFFFFF;
	background-image: url(../graphics/swash.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
}
*html #content { /* Content width for IE6. */
	width: 902px;
}
#footer { /* ---------- The FINAL parent div id element. --------------- */
	width: 922px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	margin-top: 5px;
}
/*================================ THE STYLES ===============================*/

#header #logotype {
	width: 271px;
	position: absolute;
	bottom: 12px;
	right: 109px;
	height: 130px;
}
#header #contact {
	position: absolute;
	left: 10px;
	top: 30px;
	font-size: 24px;
	color: #72c2b4;
	width: 320px;
	text-align: left;
	line-height: 24px;
	height: 25px;
	letter-spacing: 0.1em;
	font-weight: bold;
}
#header .bookmark {
	position: relative;
	right: 10px;
	float: right;
	top: 65px;
	width: 50px;
}
#menu { /* This menu div is "contained" in the header, but by using the basic styles from the footer could become a parent div on its own. */
	width: 608px;
	bottom: 40px;
	position: absolute;
	margin-left: 10px;
	z-index: 99;
}

.oneCol  {
	width: 294px; /* Actual width of box is 304px minus 10px margin. This added to the content padding creates the 10px gutter. */
	float: left;
	margin-bottom: 10px;
	position: relative;
}
.twoCol {
	width: 598px;
	margin-bottom: 10px;
	position: relative;
	float: left;
}
.narrowCol {
	width: 192px; /* Actual width of box is 304px minus 10px margin. This added to the content padding creates the 10px gutter. */
	float: left;
	margin-bottom: 10px;
	position: relative;
}
.threeCol {
	width: 902px;
	position: relative;
	margin-bottom: 10px;
	float: left;
}
.oneColBlueBox {  /* Box with blue border and inset type. */
	width: 282px;
	margin-bottom: 10px;
	position: relative;
	border: 1px solid #006ab2;
	padding-top: 5px;
	padding-bottom: 10px;
	float: left;
	padding-right: 5px;
	padding-left: 5px;
}
.twoColBlueBox {
	width: 586px;
	margin-bottom: 10px;
	position: relative;
	border: 1px solid #006ab2;
	padding-top: 5px;
	padding-bottom: 10px;
	float: left;
	padding-right: 5px;
	padding-left: 5px;
}
.oneColOrangeBox {
	width: 284px;
	margin-bottom: 10px;
	position: relative;
	padding-top: 5px;
	padding-bottom: 10px;
	float: left;
	padding-right: 5px;
	padding-left: 5px;
	background-color: #fcc330;
}

.break { /* Use this as a div class element to create space between it and anything to IT'S left. Basically it creates a new horizontal line of information. */
	clear: both;
}
.clearfloats { /* Use this at the very end of a containing div element to make sure that the other "relative" divs fill the containing div space. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*===================== NON STANDARD LAYOUT ELEMENTS ==================*/


.pdf { /* Used in AquaNarrowboats to offset the pdf download button inside a relative div */
	position: absolute;
	bottom: -25px;
	right: -75px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

/*======================== TEXT STYLES ======================*/

#footer  .address {
	padding-bottom: 0px;
	font-size: 10px;
	color: #FFFFFF;
	float: left;
}
#footer .address a {
	font-size: 10px;
}


/*===================== Main menu styles ==================*/

#menu ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	float: left;
	width: 608px;
	text-align: center;
}
#menu li {
	float: left;
	padding-right: 0px;
	padding-left: 0px;
	list-style-type: none;
	margin-left: 0px;
}
#menu ul a {
	display: block;
	text-decoration: none;
	width: 98px;
	height: 30px;
	margin-right: 2px;
	font-size: 11px;
	font-weight: bold;
	line-height: 20px;
	background-color: #72c2b4;
	color: #006AB2;
	text-align: center;
	padding-top: 3px;
 }

#menu a:hover {
	background-color: #006ab2;
	color: #FFFFFF;
}
#menu  .twoLine  {
	line-height: 12px;
	bottom: 5px;
}

/*===================== Other text styles styles ==================*/

#newBoats .newBoats a /* Add body id names and active list names here */
{
	color: #006AB2;
	background-color: #fcc300;
	cursor: default; /* Changes mouse pointer to avoid clicking again */
}
#boatShares .boatShares a
{
	color: #006AB2;
	background-color: #fcc300;
	cursor: default; /* Changes mouse pointer to avoid clicking again */
}
#trims .trims a
{
	color: #006AB2;
	background-color: #fcc300;
	cursor: default; /* Changes mouse pointer to avoid clicking again */
}
#gallery .gallery a
{
	color: #006AB2;
	background-color: #fcc300;
	cursor: default; /* Changes mouse pointer to avoid clicking again */
}
#repairs .repairs a
{
	color: #006AB2;
	background-color: #fcc300;
	cursor: default; /* Changes mouse pointer to avoid clicking again */
}
#theTeam .theTeam a{
	color: #006AB2;
	background-color: #fcc300;
	cursor: default; /* Changes mouse pointer to avoid clicking again */
}

.blueType { /* Apply to any text tag that needs to be kept inline */
	color: #006ab2;
	display: inline;
	float: left;
}
.spaceAboveNoBelow {
	padding-top: 15px;
	padding-bottom: 0px;
}
.large {font-size: 16px;
color: #72C2B4;
	line-height: 16px;
}
.big {font-size: 14px;
	color: #72C2B4;
		line-height: 16px;
}
.small {
	font-size: 12px;
	color: #72C2B4;
	line-height: 16px;
}
.verysmall {
	font-size: 8px;
}


/* ===================== ADDITIONAL STYLES FOR DIV ELEMENTS ========================== */
/* added to the div code to give appearance of centred, left and right boxes etc. */


.pageTop {  /* This is added to the first content div element to shift the box into the space below the menu. */
	margin-top: -25px;
}

.gutter {  /* When added to the oneCol and twoCol divs creates a 10px gutter. */
	margin-left: 10px;
}
.orange { /* Adds a coloured background to any div */
	background-color: #fcc330;
}
.right {
	float: right;
}
.oneColOrangeBox li {
	list-style-type: none;
	background-image: url(../graphics/bullet.gif); /* Change the bullet if needed */
	background-repeat: no-repeat;
	background-position: left 50%;
	padding-left: 15px;
	color: #FFFFFF;
}
.white { /* Adds a coloured background to any div */
	background-color: #FFFFFF;
}
#footer  .otherBrands {
	position: relative;
	float: right;
	margin-left: 10px;
	display: block;
}
#footer .otherBrands img {
	margin-left: 20px;
	vertical-align: middle;
}
#textStyles {
	position: absolute;
	top: 12px;
	left: 10px;
	width: 200px;
	color: #72C2B4;
	height: 25px;
}
#header #contact a {
	letter-spacing: 0em;
}