/* Rare CSS */

/* 
Note on url paths:
To run locally use: url(../images/design/wrapper.gif)
To run on Websiter use: url(/images/design/wrapper.gif)
*/

body {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 11px;
	line-height: 12px;
	margin: 9px 0px 0px 0px; border: 0px; padding: 0px;
	background-color: #FFFFFF; /* On Websiter set as #FFFFFF and reset to #4A575F in templatestyle.css */
}

/*  The main wrapper div */
#wpr {
	position: relative;
	width: 981px;
	margin: 0px auto;
	border: 0px; padding: 0px;
	background-color: #FFFFFF;
}

/* Header divs */
#hd1, #hd2 {
	position: relative;
	margin: 0px; border: 0px; padding: 0px;
	left: 11px; top: 11px;
	height: 118px;
}
#hd1 {
	left: 11px; top: 11px;
	width: 959px;
	background: url(/images/design/hd1-bg-new.jpg) left top repeat-x;
}
#hd2 {
	left: 2px; top: 0px;
	width: 955px;
	background: url(/images/design/hd2-bg-new.jpg) left top repeat-x;
}

#hd-rare { /* Rare logo */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 28px; left: 19px;
	width: 172px; height: 76px;
	background: url(/images/design/rare-logo-new.jpg) left top no-repeat;
}

div.hd-txt { /* Header text */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 76px; left: 203px;
	width: 732px; height: 25px;
	background: url(/images/design/hd-civc.jpg) left top no-repeat;
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	/* letter-spacing: 2px; - to correct Helvetica */
	font-size: 16px;
	line-height: 25px; /* 20px OK on all but IE7 */
	text-align: right;
	color: #FFFFFF;
	visibility: hidden; /* Multiple header texts are made visible in rotation by javascript */
}
div.show {visibility: visible} /* To make a hidden div visible - used for default header text defined in template */

/* Home page boxes */
#hm-wpr { /* Wrapper for boxes */
	position: relative;	
	margin: 0px 0px 10px 0px; border: 0px; padding: 0px; /* Margin bottom sets space before other html in #content */
	width: 960px; /* #hd1 width + 1px = space for 3 x hm-boxb */
	height: 306px;
}
/* Standards compliant browsers recognise this height setting */
html>body div#hm-wpr {
  height: auto; 
  min-height: 306px;
}

div.hm-boxb { /* Box wrapper and border */
	position: relative;	
	margin:  0px 0px 1px 0px; border: 0px; padding: 0px; /* Margin-bottom = space at bottom */
	top: 0px; left: 0px;
	width: 320px;
	height: 152px;
	background: url(/images/design/hm-boxb-bg.gif) right top repeat-y #E2D9D2; /* color = border, image = space at right */
	float: left;
}

/* Clear/float left/right - additonal position options */
div.cl {clear: left;}
div.cr {clear: right;}
div.fr {float: right;}

div.hm-box { /* Box */
	position: relative;	
	margin:  0px; border: 0px; padding: 0px;
	top: 1px; left: 1px;
	width: 317px;
	height: 150px;
	background: url(/images/design/hm-box-bg.jpg) left top repeat-x #FFFFFF;
	overflow: hidden; /* Keeps boxes aligned in IE if too much content added in error */
}

div.hm-boxb-ctr2, div.hm-boxb-rhr2 { /* ctr2 = In the central column and 2 rows high, rhr2 = in right hand coloumn and 2 rows high. Has to be absolute for Mozilla */
	position: absolute;
	top: 0px;
	height: 305px;
}
div.hm-boxb-ctr2, div.hm-boxb-rhr2 div.hm-box {height: 301px; background-color: #E2D9D2;}
div.hm-boxb-ctr2 {left: 320px;} /* Central column */
div.hm-boxb-rhr2 {left: 640px;} /* Right hand column */

div.hm-box-contact {background: url(/images/design/hm-box-contact-bg.jpg) left top repeat-x #0193C2;} /* Contact box */

div.hm-box div.hd {
	position: relative;
	margin: 0px 0px 11px 0px; border: 0px; padding: 8px 0px 0px 6px;
	/*top: 10px; left: 6px;*/
	width: 305px;
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 21px; /* Has to be >font-size to fix IE7 bug, margin-bottom & padding-top adjusted accordingly */
	color: #D2007B;
}

div.hm-box p, div.hm-box div.p { /* div.p required to contain ul if required to left of an img */
	margin: 0px 2px 6px 7px; border: 0px; padding: 0px;
	font-size: 10px;
	line-height: 12px;

	color: #4B585E;
}

div.hm-box-contact div.hd {color: #FFFFFF;}
div.hm-box-contact p {color: #FFFFFF; margin: 0px 7px 3px 7px;} /* Reduced para spacing for above and below tel and fax No */
div.hm-box-contact p a {font-weight: normal; color: #FFFFFF;}
div.hm-box-contact p a:hover {color: #F3E2EC;}

/* Container for divs within a div.hm-box that are to be rotated with javascript */
div.hm-box div.hm-box-content {
	position: absolute;	
	margin:  0px; border: 0px; padding: 0px;
	top: 0px; left: 0px;
	width: 317px;
	height: 150px;
	overflow: hidden;
	visibility: hidden; /* Multiple hm-box-content divs are made visible in rotation by javascript */
	background: url(/images/design/hm-box-bg.jpg) left top repeat-x #FFFFFF; /* Repeat of div.hm-box background required to fix IE7 transparency bug */
}

#contact-e, #contact-w, #contact-t {
	position: absolute;	
	margin:  0px; border: 0px; padding: 0px;
	top: 107px;
	width: 38px;
	height: 37px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
#contact-e {background-image: url(/images/design/contact-e.gif); left: 195px;}
#contact-w {background-image: url(/images/design/contact-w.gif); left: 233px;}
#contact-t {background-image: url(/images/design/contact-t.gif); left: 271px;}
#contact-e:hover, #contact-w:hover, #contact-t:hover {
	filter: alpha(opacity=90);  /* For IE, 0 to 100 */
	opacity: 0.90;              /* CSS3 standard (not yet supported), 0 to 1 */
	-moz-opacity: 0.90;         /* for Mozilla, 0 to 1 */
}

div.hm-box-contact p.hilight, span.hilight, div.hm-box-contact a.hilight {color: #00FFFA;} /* #F3E2EC */

div.hm-box img {
	margin: 0px 7px 7px 0px; border: 0px; padding: 0px;
	float: left;
}

div.hm-box img.raregen { /* The Rare Generator */
	position: relative;
	margin: 2px 0px 8px 8px;
	border: 0px; padding: 0px;
}

div.hm-box a.more {
	position: absolute;
	margin: 0px; border: 0px; padding: 0px 0px 0px 13px;
	top: 129px;  left: 221px;
	font-size: 11px;
	line-height: 14px;
	font-weight: normal;
	color: #D2007B;
	background: url(/images/design/hm-box-more-blt.gif) left center no-repeat;
}
div.hm-box a.more:hover {color: #00B6DE; background-position: 2px center;}

div.hm-box a.more2 {top: 282px; left: 248px;} /* Single word link "More" at bottom of 2-row high box */

#hm-wpr ul.list-links {margin: 0px 7px 7px 7px; border: 0px; padding: 0px;} /* #hm-wpr required over div.hm-box to counter specificity of #content ol styling */

#hm-wpr ul.list-links li {
	margin: 0px; border: 0px; padding: 0px;
	line-height: 14px;
}
#hm-wpr ul.list-links a, #hm-wpr ul.list-links li span.no-link {
	color: #4B585E;
	font-size: 10px;
	line-height: 12px;
	text-decoration: underline;
	font-weight: normal;
}
#hm-wpr ul.list-links a:hover {background-position: 3px center; color: #00B6DE;}


#content {
	position: relative;	
	width: 470px; /* #hm-wpr width */
	height: 380px;	/* IE takes this as the height and then incorrectly re-sizes if required */
	text-align: left;
	margin: 61px 0px 20px 337px; /* margin-bottom is distance between end of content and footer #ft1 */
	border: 0px;
	padding: 0px 1px 0px 0px; /* padding-right keeps content within width of #hd1 */
	clear: both;
}
/* Standards compliant browsers recognise this height setting */
html>body div#content {
  height: auto; 
  min-height: 380px;
}

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

p {
	text-align: left;
	font-size: 10px; 
	line-height: 12px;
	margin: 0px 0px 10px 0px;
	border: 0px;
	padding: 0px;
	color: #777A7F;
}

/* Standard headings */

h1, h2, h3, .h1, .h2, .h3 {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	font-weight: normal;
	margin: 0px 0px 14px 0px;
	border: 0px;
	padding: 6px 0px 6px 0px;
}
h2, h3, .h2, .h3 {margin: 0px 0px 5px 0px;}

h1, .h1 {
	color: #D2007B;
	font-size: 24px;
	line-height: 26px;
}

h2, .h2 {
	color: #D2007B;
	font-size: 16px;
	line-height: 18px;
}

h3, .h3 {
	color: #4A575F;
	font-size: 12px;
	line-height: 14px;
}

table {margin: 10px 0px 0px 0px;}

hr {
	color: #CCCCCC;
	/*background-color: #CCCCCC; This is set in templatestyle.css so it does not appear as a 1 char high solid line in the webeditor */
	height: 1px;
	margin: 10px;
}

/* Additional styles available from Websiter editor */
.underline {text-decoration: underline;}
.centrealign {text-align: center;}
.rightalign {text-align: right;}
.rare-pink {color: #D2007B;} /* Rare pink */
.rare-grey {color: #4A575F;} /* Rare grey */

/* Bullet for magnifying glass */
span.magnify {
	padding-left: 19px;
	background: url(/images/design/magnify-blt.gif) 0 center no-repeat;
}

/* Pink box with white text - can be applied to p tags. Styling for "p.bluebox a" defined below */
.pinkbox {
	padding: 10px;
	margin: 10px;
	font-size: 14px; 
	line-height: 20px;
	color: #FFFFFF;
	background-color: #D2007B;
}

/* Image styles */
img.right {
	background: #FFFFFF;
	margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
	float: right;
	border: 0;
}

img.left {
	background: #FFFFFF;
	margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
	float: left;
	border: 0;
}

img.border {border: 1px solid #000000;}

/* Class to hide images so they can be pre-loaded. Can be used to hide any object */
.hdn {display: none;}

img {
	background-position: center;
	vertical-align: middle;
}

/* Basic links */
a { /* p.a-link styles a p to work like an a so it can be used with javascript */
	color: #532E4D;
	text-decoration: underline;
    font-weight: bold;
}
a:hover {color: #0B73B2;}
/*a:visited {color: #532E4D;}*/

h2.news a { /* Same as h2 */
	color: #D2007B;
	font-weight: normal;
	text-decoration: none;
}
h2.news a:hover {color: #00B6DE}

/* Link in pink box */
/*
p.pinkbox a {color: #00B5FA;}
p.pinkbox a:hover {color: #7FDEFF;}
*/

a img {border: 0px;} /* Remove border from image links */

/* List of links */
ul.list-links {margin: 0px; border: 0px; padding: 6px 0px 10px 12px;}

ul.list-links li {
	margin: 0px; border: 0px; padding: 0px 0px 0px 12px;
	/* width: 400px; */
	list-style: none;
	line-height: 12px;
}

/* The span.no-link styling allows text that is not a link to have the same format */
ul.list-links a, ul.list-links li span.no-link {
	margin: 0px; border: 0px; padding: 0px 0px 0px 12px;
	color: #D2007B;
	/* display: block;  Stops text wrap below bullet. Requires width to be set on ul.list-links li */
	font-size: 10px;
	line-height: 12px;
	text-decoration: underline;
	font-weight: bold;
	background: url(/images/design/list-links-blt.gif) 0 center no-repeat;
}
ul.list-links a:hover {background-position: 3px center; color: #00B6DE;} /* The active link hover styling is not applied to (ul.list-links li span.no-link) */

ul.list-links li span.no-link {text-decoration: none;}
ul.list-links li span.no-link {background: url(/images/design/list-links-no-link-blt.gif) 0 center no-repeat;} /* Different bullet to distinguish non-links */


/* Blue list link buttons */

ul.list-button-links {margin: 0px; border: 0px; padding: 6px 0px 0px 0px;}

ul.list-button-links li {
	margin: 0px; border: 0px; padding: 4px 0px 0px 0px;
	width: 137px; /* Required width of 159 minus left (20) and right (2) padding on 'a' */
	list-style: none;
}

ul.list-button-links a {
	margin: 0px; border: 0px; padding: 7px 2px 7px 20px;
	color: #FFFFFF;
	display: block; /* Keeps length as the li width */
	width: 100%; /* Fills containing table cell */
	font-size: 12px;
	line-height: 12px;
	text-decoration: none;
	font-weight: normal;
	background: url(/images/design/nav2-blt.gif) 6px center no-repeat #00B6DE; /* Background image top = 3 + 7 padding = 10px */
}
ul.list-button-links a:hover {background: url(/images/design/nav2-blt-hvr.gif) 8px center no-repeat #019BBF; color: #FFFFFF;}


/* Right panel links */
ul.rp {margin: 0px; border: 0px; padding: 0px;}

ul.rp li {
	margin: 0px; border: 0px; padding: 3px 0px;
	width: 159px;
	list-style: none;
	line-height: 12px;
}

ul.rp a {
	margin: 0px; border: 0px; padding: 0px 0px 0px 12px;






	color: #00B6DE;
	display: block; /* Stops text wrap below bullet. Requires width to be set on ul.rp li */
	font-size: 10px;
	line-height: 12px;
	text-decoration: none;
	font-weight: bold;
	background: url(/images/design/list-links-rp-blt.gif) 0 center no-repeat;
}
ul.rp a:hover {background-position: 3px center; color: #4A575F;}

ul.rp li.selected a {text-decoration: underline;}


/* Left panel */
#lp { /* Left panel wrapper */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 179px;
	left: 11px;
	width: 320px;
}

.lp-sml {  /* wrapper for each small image view */
	position: relative;
	margin: 0px; border: 0px; padding: 0px;
	width: 160px; height: 153px;
	background: url(/images/design/lp-sml-bg.jpg) 0 0 no-repeat #F6F2EF;
	float:  left;
}

.lp-lrg, .lp-lrg-content {
	position: relative;
	margin: 0px; border: 0px; padding: 0px;
	width: 319px; height: 330px;
	background: url(/images/design/lp-lrg-bg.jpg) 0 0 no-repeat;
	float:  left;
}
.lp-lrg {margin: 0px 0px 4px 0px;}         /* div.lp-lrg occcurs within #lp */
.lp-lrg-content {margin: 0px 9px 9px 0px;} /* div.lp-lrg-content occcurs within #content */

.lp-sml img, .lp-lrg img, .lp-lrg-content img {
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 8px; left: 7px;
}

#lp-lrg-txt {
	position: absolute;
	margin: 0px; border: 0px; padding: 0px 0px 0px 8px;
	top: 312px; left: 0px;
	width: 319px;
}

#lp p {
	margin: 0px; border: 0px; padding: 9px 0px 0px 10px;
	clear: left;
}

#lp p, #lp-lrg-txt {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #4A575F;
	font-weight: bold;
	font-size: 11px;
	line-height: 13px; /* Space for magnifying glass */
}

/* Right panel */
#rp { /* Right panel wrapper */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 179px;
	left: 811px;
	width: 159px;
}


/* Footer */
#ft1 {
	position: relative;
	margin: 0px;
	border: 0px; padding: 0px;
	width: 969px;
	height: 20px;
	background-color: #FFFFFF;
	clear: both;
	font-size: 11px;
	text-align: right;
	color: #777A7F;
}
#ft1 a {color: #777A7F; font-weight: normal;}
#ft1 a:hover {color: #00B6DE;}


/* Menu */

/* Menu (navigation) panel in top header - within #wpr */
#nav {/* Menu (navigation) panel */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 139px; left: 11px;
	width: 960px;
	height: 21px;	
}
/* 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: 21px;
}

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

#nav ul li {
	list-style: none;
	margin: 0px 1px 0px 0px; border: 0px; padding: 0px;
	width: 159px;
	float: left; /* Lines up the top level menu options from left to right */
}
#nav ul li li {width: 159px; border-bottom: 1px solid #FFFFFF;} /* Required to set width of secondary menu levels in IE */

/* Set background - set hover on "li a" not "li" or it breaks hover behaviour for sub-menus in IE and Mozilla */
#nav ul li a {background: url(/images/design/nav1-blt.gif) 8px center no-repeat #4A575F;}
#nav ul li a:hover {background: url(/images/design/nav1-blt-hvr.gif) 8px center no-repeat #D2007B;}
#nav ul li li a {background: url(/images/design/nav2-blt.gif) 8px center no-repeat #00B6DE;}
#nav ul li li a:hover {background: url(/images/design/nav2-blt-hvr.gif) 8px center no-repeat #019BBF;}

#nav ul li li li a {border-left: 1px solid #FFFFFF;}

/* Width of top-level menu items set individually to fix IE bug */
#nav ul li#map1, #nav ul li#map3, #nav ul li#map4, #nav ul li#map5, #nav ul li#map6, #nav ul li#map7 {width: 159px;}
#nav ul li#map8 {display: none}  /* Hide 'Pages not visible from main menu' */

/* Background colour to drop-down options */
#nav ul ul li {
	/*background-color: #FFFFFF;*/
	/* 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 
#nav ul ul li:hover {
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
}
*/

#nav a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 24px;
	text-align: left;
	display: block;
	margin: 0px;
	border: 0px;
	/* border-right: 1px solid #DCDDDF; */
	padding: 0px 0px 0px 20px;
	color: #FFFFFF;
	text-decoration: none;
}
#nav ul li a {font-weight: bold;} /* Bold at top level only */
#nav ul li li a {font-weight: normal;}

/* #nav ul li#map9 a {border: 0px;}  Remove right border from 'Contact Us' - the right-most option in the list */

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

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

#nav ul ul ul {
	position: absolute;
	top: 0px;
	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;} 

/* 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: 550px; 
	margin: 0px auto;
	border: 0px;
	padding: 0px;
	text-align: left;
}

.tbl-in {
	margin: 0px;
	border: 1px solid #DFB5DA;
	padding: 5px;
	background: url(/images/design/hm-box-bg.jpg) left top repeat-x #E2D9D2;
}

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

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

div.row label {
	float: left;
	width: 207px;
	text-align: right;
	font-size: 14px; 
	line-height: 18px;
	margin: 2px 0px 0px 0px;
	padding: 0px;
}
span.fld label {width: 80px;} /* Email & Phone radio labels */

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

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

/* The spacer is used 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 #DFB5DA;
	padding: 0px 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 #4A575F;
	padding: 2px 5px;
	margin: 0px 0px 10px 0px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #4A575F;
}

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

/* Style for the input boxes */
/* applied only to inputs within div class inputs so does not have to apply to inputs that are buttons (as cannot be undone with a specific input.btn class). */
div.inputs input, div.inputs select, div.inputs textarea {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #222222;
	margin: 2px 0px 0px 0px; padding: 0px; border: 1px solid #7F9DB9; /* Remove border style to stick with sunken default */
	background-color: #FFFFFF !important;   /* Removes yellow background added by Google toolbar and other browser style sheets */
}

/* Buttons */
input.btn {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px; /* Required to vertically centre text in button in IE */
	color: #222222;
	width: 100px;
	margin: 0px; padding: 0px;
}

/* Site map */
#content #map8 {display: none;}  /* Hide from site map: Pages not on main menu */
#content ul ul, #content ul ul ul, #content ul ul ul ul {margin-top: 8px;} /* Add space before lists for each sub-menu level */