/* Cocoamotion CSS */

* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
	height: 100%;
	margin-bottom: 1px;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #41110F;
	background-color: #F4EAC4;
	font-size: 12px;
	line-height: 14px;
	margin: 0;
	border: 0;
	padding: 5px 0;
}

/* Wrappers */
#wpr1 { /* Wrapper for a cross-browser compatible outer border */
	position: relative;
	width: 770px;
	margin: 0 auto;
	border: 0;
	background-color: #41110F; /* Outer border */
	padding-bottom: 1px; /* Required to see #wpr1-bb in Mozilla */
}
#wpr1-bb {/* wpr1 bottom border */
	width: 100%;
	height: 1px;
	font-size: 0px; line-height: 0px;
	background-color: #41110F;
}
#wpr2 { /* The main wrapper */
	position: relative;
	top: 1px; left: 1px; /* Space for border defined by wpr1 */
	width: 768px; /* wpr2 width less L & R border */
	border: 0;
	background: 0 0 url(../images-design/wpr-bg.gif) repeat-y #FEF5D7;
	text-align: left;
}

#content {
	position: relative;	
	width: 600px; /*  */
	height: 430px;	/* IE takes this as the height and then incorrectly re-sizes if required */
	text-align: left;
	margin: 0 0 10px 168px; /* margin at bottom is distance between end of content and footer */
	border: 0;
	padding: 106px 0 0 0; /* padding top set rather than margin-top for Firefox */
}
/* Standards compliant browsers recognise this height setting */
html>body div#content {
  height: auto;
  min-height: 430px;
}

/* Add right padding and a bit of space between points in lists within the content area */
div#content ol, div#content ul {padding: 10px 20px 4px 50px;}
div#content li {
	margin-bottom: 0.5em;
	font-size: 12px; /* Set font size and color same as for p */
	line-height: 14px;
	color: #41110F;
}

#content ul ul, #content ul ul ul, #content ul ul ul ul {margin-top: 8px;} /* Add space before lists for each sub-menu level - used by site map */

p {
	text-align: left;
	font-size: 12px; 
	line-height: 14px;
	padding: 10px 20px 4px 20px;
}

/* Standard headings */

h1, h2, h3, .h1, .h2, .h3 {
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	font-style: italic;
	color: #41110F;
	padding: 14px 20px 0 20px;
}


h1, .h1 {
	font-size: 24px;
	line-height: 25px;
}

h2, .h2 {
	font-size: 19px;
	line-height: 21px;
}

h3, .h3 {
	font-size: 17px;
	line-height: 19px;
}

/* Additional styles for content */
.centrealign {text-align: center;}
.rightalign {text-align: right;}
.nobold {font-weight: normal;}

hr {
	color: #41110F;
	background-color: #41110F;
	height: 1px;
	margin: 10px 20px 10px 40px; /* Margin left/right is as for p padding */
}

/* Image styles */
img.right, img.right-no-border {
	float: right;
	margin: 0 0 3px 10px;
	border: 1px solid #000000;
	padding: 0;
}

img.left, img.left-no-border {
	float: left;
	margin: 0 10px 3px 0;
	border: 1px solid #000000;
	padding: 0;
}
img.space-for-list {margin-right: 20px;} /* Optional class to push li bullets off edge of a left-aligned img */

img.right-no-border, img.left-no-border, img.nb {border: 0;} /* No border option */

/* Photo gallery preview image */
img.gallery {
	float: none;
	margin: 10px 10px 0 0;
}
/* Class to hide elements so they can be pre-loaded */
.hdn {display: none;}

/* Basic links */
a {
	color: #001B35;
	text-decoration: underline;
    font-weight: bold;
}
a:hover {color: #9A6600;}

a img {border: 0;}

/* Header */
div#hd {
	position: absolute;
	width: 600px;
	height: 73px;
	top: 0;
	left: 0;
	background-color: #41110F;
	margin: 0 0 0 168px;
	border: 0;
}
div#hd p {
	font-weight: bold;
	font-style: italic;
	font-family: "Times New Roman", Times, serif;
	color: #FEF5D7;
	font-size: 21px;
	line-height: 21px;
	margin: 29px 0 0 43px;
	padding: 0;
}

/* Left hand bar */
div#lhb {
	position: absolute;
	top: 0; left: 0;
	width: 167px;
	height: 600px;
	background: 0 0 url(../images-design/chocolate-fountain.jpg) no-repeat;
}
p#lhb-ctxt { /* LH bar contact text */
	color: #41110F;
	font-size: 13px;
	font-weight: bold;
	line-height: 18px;
	margin: 457px 0 0 0;
	padding: 0;
	text-align: center;
}

p#lhb-ctxt a {color: #41110F;}
p#lhb-ctxt a:hover {color: #6F4600;}

/* Main menu */
div#nav {/* Menu (navigation) panel */
	position: absolute;
	top: 74px;
	left: 168px;
	height: 22px; /* Matches div#nav a line-height. IE will re-size this if more menu options are added */
	width: 600px;
	background-color: #C5B7A0; /* Required only in case an extra top-level link is added which spills over to a second line */
}
/* Standards compliant browsers recognise this height setting
This will allow new top-level menu options to be displayed if added without updating style sheet to increase width of #nav */
html>body div#nav {
  height: auto; 
  min-height: 22px;
}

div#nav ul {margin: 0; border: 0; padding: 0;}

div#nav ul li {
	list-style: none;
	margin: 0; border: 0; padding: 0;
	width: 100px; /* Min top level menu width. Would be better not have to set this and leave it as auto but the IE hover fix requires it to be set */
	float: left; /* Lines up the top level menu options from left to right */
}
div#nav ul li li {
	width: 100px; /* Required to set width of secondary menu levels, if different, in IE. Must also set on div#nav ul ul for Mozilla */
	border-bottom: 1px solid #EFE2C2;
}

/* Set background image at top level only - note if set on hover set on "li a" not "li" or it breaks hover behaviour for sub-menus in IE and Mozilla */
div#nav ul li a {background: url(../images-design/nav-li-bg.gif) 0 0;}
div#nav ul li a:hover {background-image: url(../images-design/nav-li-bg-hvr.gif);}
div#nav ul li li a {background-image: none;}

/* Options to set individual top-level menu nodes widths. Would be easier to leave these as auto but the IE hover fix requires a defined width */
/* Note: the full 'div#nav ul li#mn1' rather than just '#mn1' is required by IE */
div#nav ul li#mn1 a {border: 0;} /* Remove left border from first in list */

/* Background colour to drop-down options */
div#nav ul ul li {
	background-color: #D0C3A3;
	/* filter: alpha(opacity=95);  - Cannot set opcacity in IE, the opacity works but is breaks the pop-out functionality! For IE, 0 to 100 */
	opacity: 0.95;              /* CSS3 standard (not yet supported), 0 to 1 */
	-moz-opacity: 0.95;         /* for Mozilla, 0 to 1 */
} 
/* Remove opacity on hover 
div#nav ul ul li:hover {
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
}
*/

div#nav a {
	font-family: 'Times New Roman', Times, serif;
	font-size: 13px;
	line-height: 22px; /* Reset as 22px for sub-level options */
	font-weight: bold;
	text-align: center;
	display: block;
	margin: 0;
	border: 0;
	border-left: 1px solid #EFE2C2;
	padding: 0;
	color: #612531;
	text-decoration: none;
}
div#nav ul li li a {line-height: 23px;}
div#nav ul li a:hover {color: #FEF5D7;}

div#nav ul li li a {
	color: #41110F;
	border: 0; /* Remove border from sub-options - replaced for div#nav ul ul */
}
div#nav ul li li a:hover {color: #FEF5D7; background-color: #41110F;}
div#nav ul ul {
	border: 1px solid #EFE2C2; /* Border around pop-out menus */
	width: 100px; /* Same as div#nav ul li li to fix phantom border at same width as parent ul in Mozilla */
} 

/* Position pop-out menus */
div#nav li {position: relative;}

div#nav ul ul {
	position: absolute;
	z-index: 500;
}

div#nav ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}

/* Show/Hide on hover */
div#nav ul ul,
div#nav ul li:hover ul ul,
div#nav ul ul li:hover ul ul
{display: none;}


div#nav ul li:hover ul,
div#nav ul ul li:hover ul,
div#nav ul ul ul li:hover ul
{display: block;}

/* CSS to replace tables - used for web enquiry forms */

/* The div with class tbl-out centres correctly in standards compliant browsers (as left and right margin set to auto). IE doesn't recognise auto. Div (centrefix) fixes this as IE incorrectly centres an element with text-align:center; */
.centrefix {
	text-align: center; /* IE centre fix */
	clear: both;
} 

/* Width and margin set on a containing table wrapper (tbl-out) and not inner table div (tbl-in) to fix the IE width bug */
.tbl-out {
	width: 490px; 
	margin: 0 auto;
	border: 0;
	padding: 0;
	text-align: left;
	/*background: 0 0 url(../images-design/webform-bg.jpg) repeat-y #CCCCCC;*/
	background-color: #C5B7A0;
}

.tbl-in {
	margin: 0;
	border: 1px solid #CFC98E;
	padding: 5px;
}

div.row {
  clear: both;
  margin: 0;
  border: 0;
  padding: 0;
}
/* Standards compliant browsers don't add their own spacing so need top padding */
html>body div.row {padding: 2px 0 0 0;}

div.half-space, div.third-space {
  clear: both;
  height: 6px;
  line-height: 6px;
  margin: 0; border: 0; padding: 0;
}

div.third-space {height: 4px; line-height: 4px;}

div.row label {
  float: left;
  width: 175px;
  text-align: right;
}

/* Class fld (field) defines data input fields */
div.row span.fld {
  float: right;
  width: 275px;
  text-align: left;
  margin-right: 2px;	/* Required to stop right side touching the fieldset border in IE */
}


/* Left align labels in the field area - used for labels that contain check boxes */
span.fld label {text-align: left;}

/* Classes to define 2 field columns (left and right) */
div.row span.fld-coll {
  float: left;
  width: 170px;
  text-align: left;
}
div.row span.fld-colr {
  float: right;
  width: 190px;
  text-align: left;
}

div.row span.fld-full-width {
  float: left;
  width: 454px;
  text-align: left;
  margin: 0;
}

/* The spacer is user to ensure the table-div clears the last field. Note not required if fields are enclosed in a fieldset tag */
div.spacer {
  clear: both;
}

/* Class full (full width) ensures fields fill their containing element */
.full {width: 100%;}

.bld {font-weight: bold;}  /* Set bold text in selects */

fieldset {
	border:1px solid #7F7047;
	padding: 0 8px 10px 5px;	/* Can't add padding to top as IE incorrectly puts this outside the fieldset so have added a bottom margin on the legend */
}

legend {
	border:1px solid #7F7047;
	padding: 2px 5px;
	margin: 0 0 10px 0;
	font-weight: bold;
	color: #41110F;
	background-color: #FFFABF;
}

form {border: 0; margin: 0; padding: 0;}	/* Stops IE adding space around a form */

/* Style for the input boxes */
input, select, textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	color: #222222;
	margin: 0; padding: 0;
}

/* Buttons */
input.btn {
	font-size: 12px;
	line-height: 16px; /* Required to vertically centre text in button in IE */
	width: 120px;
}

/* Footer */
div#ft1 {
	position: relative;
	clear: both;
	width: 768px;
	height: 50px;
	background-color: #41110F;
}

/* Privacy, Terms, etc, see below for styling of #ft1 links */
#ftl, #ftr {
	border: 0; padding: 0 10px;
	color: #FEF5D7;
}
#ftl {
	margin: 9px 0 0 0;
	float: left;
	text-align: left;
	font-size: 13px;
	line-height: 13px;
	font-weight: bold;
}
#ftr {
	margin: 6px 0 0 0; 
	float: right;
	text-align: right;
	font-size: 13px;
	line-height: 19px;
}

/* Footer1 links */
#ft1 a {color: #FEF5D7; font-weight: normal;}
#ft1 a:hover {color: #FFD02F;}

#ft1 a.txt, #ft1 a.txt:hover { /* Normal text credit link */
	color: #FEF5D7;
	text-decoration: none;
    font-weight: normal;
}

/* Footer2 links */
div#ft2 {
	position: relative;
	width: 768px;
	height: 54px;
	background-color: #C5B7A0;
}

div#ft2 ul {
	width: 384px;
	float: left;
	text-align: center;
	margin: 8px 0 0 0;
}
div#ft2 ul li {list-style: none;}
div#ft2 ul li a {
	color: #41110F;
	font-size: 11px;
	line-height: 18px;
}