/* Turtle CSS */

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	font-size: 14px;
	line-height: 16px;
	margin: 9px 0; border: 0; padding: 0;
	background: 0 0 repeat url(../images-design/body.jpg) #A8EFE9;
}

/* Wrapper */
div#wpr {/* Outer wrapper for site */
	position: relative;
	width: 980px;
	margin: 0 auto;
	border: 2px solid #8E8D23; /* Used css border as can't use nested divs for borders with transparency */
	padding: 0;
	/* No background colour. Semi-transparent background set by #wpr-bg */
}

div#wpr-bg {/* Transparent background within #wpr */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; /* Doesn't work in IE6. Works in all  others (IE7, Firefox, Chrome, Opera, Netscape). In IE6 the html [if lte IE 6] condition adds iefix.css which sets #wpr to have a solid background colour */
	margin: 0; border: 0; padding: 0;
	background-color: #E8FAFA;
	filter: alpha(opacity=75);  /* IE, 0 to 100 */
	opacity: 0.75;              /* CSS3 standard (not yet supported), 0 to 1 */
	-moz-opacity: 0.75;         /* Mozilla, 0 to 1 */
}

/* Content wrapper divs for curved borders and L and R bars */
div#ct-wpr1, div#ct-wpr2, div#ct-wpr3, div#ct-wpr4, div#ct-wpr5, div.ct-tb-spr {
	position: relative;
	width: 960px;
	margin: 0; border: 0; padding: 0;
}

div#ct-wpr1 { /* Content wrapper. Positions outer content box */
	margin: 0 0 0 10px; /* margin-top doesn't work in IE so set as padding-top */
	padding: 93px 0 0 0; /* distance above content area = 85 + content top border (8) = 93 */
}

div#ct-wpr2 { /* Left hand menu background */
	background: 8px 0 repeat-y url(../images-design/lh-menu-bar-bg.jpg);
}

div#ct-wpr3 { /* Right hand bar background */
	background: 800px 0 repeat-y url(../images-design/rh-bar-bg.jpg); /* background right = 960 - 152 (image width) - 8 (RH border width) = 800*/
}

div.ct-tb-spr { /* Content top and bottom spacer for top and bottom horizontal border */
	height: 13px;
	line-height: 13px;
}

div#ct-wpr4 { /* Left hand border */
	background: 0 0 repeat-y url(../images-design/ct-bdr-bg.gif); /* ct-bdr-bg = content border background */
}

div#ct-wpr5 { /* Right hand border */
	background: right 0 repeat-y url(../images-design/ct-bdr-bg.gif);
}

div.cnr { /* Content corners - within div#ct-wpr5 */
	position: absolute;
	width: 18px;
	height: 21px;
	margin: 0; border: 0; padding: 0;
}
div.cnr-tl { /* Corner top left */
	top: -21px;
	left: 0;
	background: 0 0 no-repeat url(../images-design/ct-cnr-tl-green.gif);
}
div.cnr-tr { /* Corner top right */
	top: -21px;
	right: 0;
	background: 0 0 no-repeat url(../images-design/ct-cnr-tr-green.gif);
}
div.cnr-bl { /* Corner bottom left */
	bottom: -21px;
	left: 0;
	background: 0 0 no-repeat url(../images-design/ct-cnr-bl-green.gif);
}
div.cnr-br { /* Corner bottom right */
	bottom: -21px;
	right: 0;
	background: 0 0 no-repeat url(../images-design/ct-cnr-br-green.gif);
}

/* Site icon image - within div#ct-wpr5 */
div#icon-out { /* Site icon outer */
	position: absolute;
	top: -96px;
	left: 18px;
	width: 126px;
	height: 105px;
	background: 0 0 no-repeat url(../images-design/icon-out.gif); /* gif for transparency */
}
div#icon-in { /* Site icon inner - within div#icon-out */
	position: absolute;
	top: 6px;
	left: 6px;
	width: 114px;
	height: 93px;
	background: 0 0 no-repeat url(../images-design/icon-in.jpg); /* jpg for quality */
}

img#turtle-care-txt { /* Header text */
	position: absolute;
	top: -86px;
	left: 164px;
	width: 193px;
	height: 57px;
	border: 0;
}

/* Tabs */
/* A different style sheet for each tab changes div#tabs>background and div.?tab?>width */
div#tabs {/* tab wrapper */
	position: absolute;
	top: -56px;
	left: 392px;
	width: 530px;
	height: 35px;
	margin: 0; border: 0; padding: 0;
}
div#tabs {background: 0 0 no-repeat url(../images-design/tab-welcome.gif);}

div#tabs div {/* Individual tabs */
	height: 35px;
	width: 55px;
	float: left;
	margin: 0; border: 0; padding: 0;
}
div#tabs div:hover {cursor: pointer;}

div#tabs div.welcome {width: 200px;}
/*
div#tabs div.turtles {width: 200px;}
div#tabs div.threats {width: 200px;}
div#tabs div.kids    {width: 200px;}
div#tabs div.schools {width: 200px;}
div#tabs div.vols    {width: 200px;}
div#tabs div.contact {width: 200px;}
*/

div#ct-bdr-top, div#ct-bdr-btm { /* Content borders top & bottom */
	position: absolute;
	width: 924px; /* 980 - 2 x 18 (div.cnr width) */
	height: 8px; /* Border width */
	line-height: 2px; font-size: 2px;
	background-color: #8E8D23;
	margin: 0; border: 0; padding: 0;
}
div#ct-bdr-top {
	top: -21px;
	left: 18px;
}
div#ct-bdr-btm {
	bottom: -21px;
	left: 18px
}

/* Right hand links */
div#rhl-wpr { /* RH links wrapper */
	position: absolute;
	top: 8px;
	left: 810px;
	width: 140px;
	height: 685px; /* 5 links x 137 */
	margin: 0; border: 0; padding: 0;
}
html>body div#rhl-wpr {
  height: auto; 
  min-height: 685px;
}

div.rhl {
	position: relative;
	width: 140px;
	height: 137px;
	margin: 0; border: 0; padding: 0;
}
div.rhl:hover {cursor: pointer;}
div.rhl1 {background: 0 0 no-repeat url(../images-design/rhl1.jpg);}
div.rhl1:hover {background: 0 0 no-repeat url(../images-design/rhl1-hvr.jpg);}
div.rhl2 {background: 0 0 no-repeat url(../images-design/rhl2.jpg);}
div.rhl2:hover {background: 0 0 no-repeat url(../images-design/rhl2-hvr.jpg);}
div.rhl3 {background: 0 0 no-repeat url(../images-design/rhl3.jpg);}
div.rhl3:hover {background: 0 0 no-repeat url(../images-design/rhl3-hvr.jpg);}
div.rhl4 {background: 0 0 no-repeat url(../images-design/rhl4.jpg);}
div.rhl4:hover {background: 0 0 no-repeat url(../images-design/rhl4-hvr.jpg);}
div.rhl5 {background: 0 0 no-repeat url(../images-design/rhl5.jpg);}
div.rhl5:hover {background: 0 0 no-repeat url(../images-design/rhl5-hvr.jpg);}

div#content {
	position: relative;	
	width: 597px; /* 612 (between LH & RH bars) - 15 = 597 */
	height: 685px;	/* IE takes this as the height and then incorrectly re-sizes if required */
	text-align: left;
	margin: 0 0 0 203px; /* LH border (8) menu bar (180) & content border (15) = 195 */
	border: 0; padding: 0 0 0 0;
}
/* Standards compliant browsers recognise this height setting */
html>body div#content {
  height: auto; 
  min-height: 685px;
}

/* Add right padding and a bit of space between points in lists within the content area */
div#content ol, div#content ul {margin: 0; border: 0; padding: 0 10px 5px 40px;}
div#content li {
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 16px; /* Set font size and color same as for p */
	line-height: 19px;
}

/* Standard headings */

h1, h2, h3, .h1, .h2, .h3 {
	font-family: Arial, Helvetica, sans-serif;
	color: #000B40;
	font-weight: bold;
	margin: 0 0 14px 0;
	border: 0;
	padding: 6px 0;
}
h2, h3, .h2, .h3 {margin: 0 5px 5px 0;}

h1, .h1 {
	font-size: 25px;
	line-height: 27px;
	border-bottom: 2px solid #8E8D23;
	margin-right: 15px; /* Space between border-bottom and right edge */
}

h2, .h2 {
	color: #000B40;
	font-size: 20px;
	line-height: 22px;
}

h3, .h3 {
	color: #000B40;
	font-size: 18px;
	line-height: 20px;
}

p, pre.p { /* Style pre.p as for p, NB p pre with inherit doesn't work */
	text-align: left;
	font-size: 16px; 
	line-height: 19px;
	margin: 0; /* No margin-bottom on p or will extend below div#content */
	border: 0;
	padding: 0 16px 10px 0;
	color: #333333;
}

pre {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0; border: 0; padding: 0;
}

/* Make text wrap within pre tag, after http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/ */
pre {
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
	/* SWZ: Works in Opera 9 without the CSS for Opera 4-6 & 7 below but left in place as these don't break IE or Mozilla */
	white-space: -pre-wrap;       /* Opera 4-6 */
	white-space: -o-pre-wrap;     /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}


table {
	color: #333333; /* Same as p */
	padding: 0 16px 10px 0; /* Space outside table, same as p. If width is 100% it will overspill #content on right by 14px */
}
table caption {font-weight: bold; margin: 10px 0 0 0;}

th {border-bottom: 2px solid #000000;}

th p, tr p { /* WPro inserts cell contents within a p by default */
	text-align: left;
	font-size: 14px; 
	line-height: 18px;
	margin: 0;
	border: 0;
	padding: 10px 5px 10px 5px;
}

div.tblwrp1 { /* Table wrapper type 1 */
	background-color: #AADADC;
	margin: 15px 0 15px 0;
	border: 1px solid #90ABBC;
	padding: 0 6px 8px 6px;
}

hr {
	color: #CCCCCC;
	background-color: #CCCCCC;
	height: 1px;
	margin: 10px;
}

/* Addition styles */
.centrealign {text-align: center;}
.rightalign {text-align: right;}
.red {color: #FF0000;}
.bred {color: #FF0000; font-weight: bold;} /* Bold red */

/* Image styles - also applied to object for flash */
img.right, img.right-border, object.right, object.right-border {
	/*background: #FFFFFF;*/
	margin: 5px 0 5px 10px;
	float: right;
	border: 0; padding: 0;
}

img.left, img.left-border, object.left, object.left-border {
	margin: 5px 10px 5px 0;
	float: left;
	border: 0; padding: 0;
}
img.right-border, img.left-border, object.right-border, object.left-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;}

.notbold {font-weight: normal;}

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

/* Basic links */
a {
	color: #005A6F;
	font-weight: bold;
	text-decoration: underline;
}
a:hover {color: #13849F;}

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

/* Main menu */
#nav {
	position: absolute;
	left: 15px; /* Border (8) plus indent (7) */
	top: 47px;
	width: 164px;
	height: 260px; /* IE5/6 takes this as the height and then incorrectly re-sizes if required */
	margin: 0; border: 0; padding: 0;
	z-index: 500; /* Required in IE to make pop-out appear over footer, in Mozilla the z-index set on '#nav ul' is sufficient */
}

/* Standards compliant browsers recognise this height setting */
html>body div#nav {
  height: auto; 
  min-height: 260px;
}

/* Remove list bullets */
#nav li {
	list-style-type: none;
	background: 0 center no-repeat url(../images-design/nav-li-top.gif);
}
#nav ul ul li {background-image: none;}

/* Remove sub-list indents */
#nav ul {
	margin: 0; border: 0; padding: 0;
	width: 164px;	/* Top level width */
	z-index: 500;
}
#nav ul ul {width: 175px;} /* Sub-level width */

/* Fix position of menu list */
#nav li {position: relative;}

/* Fix position of sub-menus */
#nav ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}

/* Hide sub menus by default */
/* This show/hides down to menu sub-level 6 (where the top is level 1). Beyond that the menu functions fine but sub-levels are not hidden */
#nav ul ul,
#nav ul ul ul,
#nav ul ul ul ul,
#nav ul ul ul ul ul {display: none;}

#nav ul li:hover ul ul,
#nav ul li:hover ul ul ul,
#nav ul li:hover ul ul ul ul,
#nav ul li:hover ul ul ul ul ul {display: none;}

/* Show submenus on rollover */
#nav ul li:hover ul,
#nav ul ul li:hover ul,
#nav ul ul ul li:hover ul,
#nav ul ul ul ul li:hover ul,
#nav ul ul ul ul ul li:hover ul {display: block;}

/* Menu colour options, menu link display defaults, and menu link font colour on hover */
#nav ul a:hover, #nav ul a:active {
	display: block;
	color: #FFFFFF;
}
	
#nav ul a { /* Note ul a:visited is not styled here to be the same as 'ul a' because a Firefox bug then prevents a:hover from working */
	display: block;
	color: #FFEEBB;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	font-weight: bold;
	margin: 0; border: 0;
	padding: 7px 1px 7px 33px;
	background: 4px center no-repeat url(../images-design/nav-blt.gif);
}
#nav ul a:hover {background: 6px center no-repeat url(../images-design/nav-blt-hvr.gif);}
#nav ul ul a, #nav ul ul a:hover {background-image: none;}

/* Add bottom border to top level menu options */
/* #nav ul li {border-bottom: 1px solid #42BDF6;} */

/* Remove border from sub level menu options */
/*#nav ul ul li, #nav ul ul ul li {border: 0;}*/

/* Opacity settings */
#nav ul ul li {
	/* filter: alpha(opacity=95);  - Cannot set opcacity in IE, the opacity works but it 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;         /* Mozilla, 0 to 1 */
} 
/* Remove opacity on hover */
#nav ul ul li:hover {
	/*filter: alpha(opacity=100);*/
	opacity: 1;
	-moz-opacity: 1;
}

/* Set sub-menu display property defaults */

/* Set menu level 2 font colour default */
#nav ul ul a {
	display: block;
	color: #172F2D;
    background-color: #6DAFAB;
	margin: 0; border: 0;
	padding: 8px 1px 8px 14px;	
	/* background: #438F8B bottom left repeat-x url(../images-design/nav-sub-bg.gif); img method for bottom border */
}
#nav ul ul li {border-bottom: 1px solid #274F47;}

/* Set menu level 2 font colour on hover */
#nav ul ul a:hover, #nav ul ul a:active {
	color: #FFFFFF;
	background-color: #274F47;
}

/* Set menu level 3 font colour default */
#nav ul ul ul a {
	color: #2F0C2A;
	background-color: #BEBF53;
}
#nav ul ul ul li {border-bottom: 1px solid #7E7F37;}

/* Set menu level 3 font colour on hover */
#nav ul ul ul a:hover, #nav ul ul ul a:active {
	color: #FFFFFF;
	background-color: #7E7F37;
}

/* Set menu level 4 */
#nav ul ul ul ul a {
	color: #3F320C;
	background-color: #FFE38F;
}
#nav ul ul ul ul li {border-bottom: 1px solid #9F8B4F;}

/* Set menu level 4 on hover */
#nav ul ul ul ul a:hover, #nav ul ul ul ul a:active {
	color: #FFF7DF;
	background-color: #9F8B4F;
}
/* Menu levels beyond 4 will have menu level 4 styling unless further styles added here */

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

.tbl-in {
	margin: 0;
	border: 1px solid #D1DFDF;
	padding: 5px;
	background-color: #D1EFEF;
}

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.space {
  clear: both;
  height: 6px;
  line-height: 6px;
  margin: 0; border: 0; padding: 0;
}
div.space {height: 12px; line-height: 12px;}

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

span.fixed-txt { /* Option to replace an input with fixed text, styled the same as its label */
	font-size: 14px;
	line-height: 18px;
	margin: 2px 0 0 0;
	padding: 0;
	color: #222222;
}

/* Class fld (field) defines data input fields */
div.row span.fld {
  float: right;
  width: 335px;
  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: 550px;
  text-align: left;
  margin: 0;
}

/* 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 #9BCFCF;
	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 #9BCFCF;
	padding: 2px 5px;
	margin: 0 0 10px 0;
	font-weight: bold;
	color: #000B40;
	background-color: #AADADC;
}

form {border: 0; margin: 0; padding: 0;}	/* 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: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #222222;
	margin: 2px 0 0 0; padding: 0; 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 */
}

div.inputs input.checkbox, div.inputs input.radio {background-color: #ECEAEB !important; border: 0} /* IE fix: Remove "div.inputs input" styling applied to radio buttons */

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

/* Roster login icon */
img#vol-login {
	position: absolute;
	top: 0; right: 20px;
	width: 94px; height: 34px;
	border: 0;
}
img#vol-login:hover {cursor: pointer;}

/* Footer */
div#ft1, div#ft2 {
	position: relative;
	width: 100%;
	margin: 0; border: 0; padding: 0;
}
div#ft1 {
	height: 106px; /*  83px = 8px space for content bottom border + 75px high */
	
}
div#ft2 { /* Dark band */
	top: 22px;
	height: 33px;
	background-color: #000C40;
}

/* Privacy, terms, footer links */
#ftl, #ftr {
	margin: 3px 0 0 0; border: 0; padding: 0 10px;
	font-size: 10px;
	line-height: 13px;
	color: #C1E8EE;
	float: left;
	text-align: left;
}
#ftr {float: right; text-align: right;}

/* Footer links */
#ft2 a {color: #C1E8EE; font-weight: normal;}
#ft2 a:hover {color: #FFFFFF;}

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

/* Footer logos */
#ft1 img.scrc { /* SCRC */
	width: 198px; height: 40px;
	margin: 28px 0 0 10px;
	border: 0;
}
#ft1 img.cfoc { /* Caring for our country */
	width: 207px; height: 40px;
	margin: 26px 0 0 10px;
	border: 0;
}

/* News/Event items */
p.news-event-info {
	/* Currently left unstyled, .h3 applied instead */
}

p.news-event-info span.label {
  float: left;
  width: 80px;
  text-align: left;
  margin-right: 10px;
  padding: 0;
}

div.news-event-info-spacer {clear: both; height: 18px;}

/* Remove bold font weight - used for dates within headings for the dynamically generated list of news items */
/*.nobold {font-weight: normal;} - already defined */
h3.news-event a {
	color: #005A6F;
	font-weight: bold;
	text-decoration: none;
}
h3.news-event a:hover {color: #13849F;}

h3.news-event .nobold {
	font-weight: normal;
	font-size: 12px; /* Smaller than h3 */
}
p.news-event-hidden {
	color: red;
	font-weight: bold;
}