/****************************************************************/
/*	PAGE LAYOUT, BRAND IMAGERY AND MENUBAR STYLES		*/
/****************************************************************/

/* search-site ID should more meaningfully be attached to the form rather than an LI - miks */



/* remove padding and margin from all elements and then reset so that everyone's the same */
/* see Global whitespace reset http://leftjustified.net/journal/2004/10/19/global-ws-reset/ */
* 
{
	padding:0;
	margin:0;
}
/* rule above adversely affects SELECTS in FireFox (they become a little too narrow) - this re-instates the browser default rule */
select > option
{
	padding-right: 5px;
	padding-left: 3px;
}

img 
{
	border-width: 0px;
	vertical-align: bottom; 		/* override browser default 'baseline' which leaves space beneath the image ( display: block; works too)*/
}
a, a:hover 	 		
{ 
	text-decoration: underline;
} 

/* NOTE: assistiveText is deprecated */
.assistiveText, .assistive-text			/* class applied to screen-reader messages and similar */
{ 
	display: none; 				/* DOES THIS NEED TO BE MADE VISIBLE SOMEWHERE ??? */
}



/****************************************************************/
/*	MAY make sense to put some of following in basic.css	*/
/*	(eg - body styles?)					*/
/****************************************************************/

/****************************************************************/
/*	EDIT 							*/
/*	???? - add missing sectional menubar styles 		*/
/****************************************************************/

/****************************************************************/
/*	CHECK !!						*/
/*	alignment of search dubious x-browser			*/
/****************************************************************/


body 
{
	background-color: #B3B3B3;
	background-image: url(generic/images/backgrounds/body_bg.gif);
	background-repeat: repeat-x;
	text-align: center;				/* needed for IE5 - see #page-container */
}

/* ----- main page sections ----- */
#page-container 				/* encloses ALL content */
{
	position: relative;				/* so bottom image can be absolutely positioned within container */
	width: 762px;
	background-color: #FFFFFF;
	border-right: 1px solid #737173;
	border-left: 1px solid #737173;
	margin: auto;
	text-align: left;				/* needed for IE5 */
}
#page-header 
{
	background-image: url(generic/images/backgrounds/bg_menubar_shadow.gif);	
	background-position: bottom;
	background-repeat: repeat-x;
	padding-bottom: 5px;			/* make space for site menu shadow */
}
#page-body 		/* encloses everything between header and footer, including breadcrumbs */
{
	padding: 10px 0px 10px 15px;
}

/* adjustments for 'legitimate' microsite - miks - 03/11/2005 */
/* if this is a good way to do this can make temporary-exhibitions similar */
/* ACTUALLY IT'S NOT A GOOD WAY - REMOVE THIS AND RELATED RULES WHEN div#container implemented */
/* don't usually use div#microsite actually (except 1 microsite format) - these rules are prob completely irrelevant - miks - 09/2006 */
div#page-body.microsite
{
	padding-left: 0px;

}
div#page-body.microsite h1
{
	float: none;
}
div#page-body.microsite #microsite-nav-backToSection
{
	float: left;
	margin: 0 10px 0px 10px;	/* shouldn't this have some bottom padding? */
}
div#page-body.microsite #nav-breadcrumbs
{
	margin: 0 10px 0px 10px;
}
/* END adjustments for 'legitimate' microsite */

#page-footer 
{
	clear:both;
	padding: 20px 0px;
	display: inline-block;		/* why??? - miks - 08/2007 */
	width: 100%;
}


/* legitimate microsite container */
div#container
{
	padding: 5px 15px 15px 15px; /* */
	margin-bottom: -10px;
	margin-left: -15px;
	/* width: 100%;		does this need hacking? - miks - value looks wrong anyway, and 100% would prob work too... */
}

/* do we need to stop H1 floating in div#container ??? */


/* ----- standard header elements ----- */
img#page-logo 
{
	margin: 15px 0px 14px 15px;
}





/* ----- page images - SPLIT INTO SEPERATE STYLESHEET, and @import here -----  */
/* top right image */
.pageImage 		/* deprecated 12/2006 - do not use */
{
	position: absolute;
	display: block;		/* show page imagery (hidden for NN4) */
	z-index:0;
}


.page-image			/* added for new headers - 12/2006 */
{
	position: absolute;
	display: block;		/* show page imagery (hidden for NN4) */
	/* z-index:0; */
	right: 0;
	top: 0;			/* bottom drape will need different */
	/* border: 1px solid red; */
}




/* top-right decorative image footprints */
/* width/height necessary in case images break (IE fine, but FF breaks layout) */
#page-image-top-1
{
	z-index:20; 	/* */
	width: 300px;
	height: 128px;
}
#page-image-top-2
{
	z-index: 5; 	/* could have similar UNDER menubar too? */
	width: 183px;
	height: 167px;
	/* display: none; */
}
#page-image-top-3
{
	z-index:20; 	/* could have similar UNDER menubar too? */
	width: 183px;
	height: 167px;
	/* display: none; */
}


/*********************************************************/
/* this was added to fix the shortened special/events icerink drape, the fixed height is present in the
custom ice rink front page but only in that custom local icerink.css, have added a new id here as importing
that local css may effect other parts of the page and obviously changing the height on the normal page-image-top-3
would effect other pages, header_TEMP_icerink.txt include file has been updated to use this id - dhis 18/12/06 */

#page-image-top-3-long
{
	z-index:20; 	/* could have similar UNDER menubar too? */
	width: 183px;
	height: 310px;
	/* display: none; */
}

/**********************************************************/



#page-image-top-4
{
	width: 93px;
	height: 500px;
	z-index: 0; 	/* */
}



/* deprecated 12/2006 */
#page-image-skull 
{
	width:300px;
	height: 88px;
	margin-top: -82px;
	margin-left: 461px; 
}
#page-image-acer 
{
	width:154px;
	height: 88px;
	margin-top: -96px;
	margin-left: 608px; 
}
#page-image-butterfly 
{
	width:300px;
	height: 88px;
	margin-top: -88px;
	margin-left: 592px; 
}
#page-image-caterpillar 
{
	width:300px;
	height: 88px;
	margin-top: -59px;
	margin-left: 562px; 
}
#page-image-claw 
{
	width:300px;
	height: 88px;
	margin-top: -76px;
	margin-left: 562px; 
}
#page-image-croc-skull 
{
	width:300px;
	height: 88px;
	margin-top: -57px;
	margin-left: 534px; 
}
#page-image-crystal 
{
	width:300px;
	height: 88px;
	margin-top: -99px;
	margin-left: 635px; 
}
#page-image-fossil-bird 
{
	width:300px;
	height: 88px;
	margin-top: -59px;
	margin-left: 600px; 
}
#page-image-live-croc 
{
	width:300px;
	height: 88px;
	margin-top: -45px;
	margin-left: 489px; 
}
#page-image-mouse 
{
	width:300px;
	height: 88px;
	margin-top: -81px;
	margin-left: 582px; 
}
#page-image-pollen 
{
	width:300px;
	height: 88px;
	margin-top: -93px;
	margin-left: 608px; 
}
#page-image-seal 
{
	width:300px;
	height: 88px;
	margin-top: -72px;
	margin-left: 585px; 
}
#page-image-seal 
{
	width:300px;
	height: 88px;
	margin-top: -72px;
	margin-left: 585px; 
}
#page-image-slug 
{
	width:300px;
	height: 88px;
	margin-top: -30px;
	margin-left: 587px; 
}
#page-image-small-frog 
{
	width:300px;
	height: 88px;
	margin-top: -56px;
	margin-left: 607px; 
}
#page-image-trunk 
{
	width:300px;
	height: 88px;
	margin-top: -48px;
	margin-left: 608px; 
}
#page-image-two-birds 
{
	width:300px;
	height: 88px;
	margin-top: -81px;
	margin-left: 573px; 
}
/* Drapes */
#page-image-frog-top 
{
	z-index:20;
	width:180px;
	height: 95px;
	margin-top: -49px;
	margin-left: 585px;
}
#page-image-frog-drape
{
	z-index: 10;
	width: 100px;
	height: 420px;
	padding-top: 73px;
	margin-top: -50px;
	margin-left: 669px;
}
#page-image-ivy-top 
{
	z-index:20;
	width:180px;
	height: 95px;
	margin-top: -69px;
	margin-left: 549px;
}
#page-image-ivy-drape
{
	z-index: 10;
	width: 100px;
	height: 420px;
	padding-top: 50px;
	margin-top: -50px;
	margin-left: 672px;
}
#page-image-snake-top 
{
	z-index:20;
	width:180px;
	height: 95px;
	margin-top: -39px;
	margin-left: 645px;
}
#page-image-snake-drape
{
	z-index: 10;
	width: 100px;
	height: 420px;
	padding-top: 50px;
	margin-top: -50px;
	margin-left: 643px;
}
/* END deprecated 12/2006 */



/* bottom image */
#page-image-bottom
{
	bottom: 4em;
}
/* ----- END SPLIT INTO SEPERATE STYLESHEET -----  */





/* ----- natureplus login links iframe ------- */
/* added Nov 2009 so iframe works correctly for older content using original CSS */
#page-np-login
{
	border: 0px solid red;
	width: 320px;
	height: 50px;
	position: absolute;
	top: 70px;
	left: 230px;
	overflow: hidden;
}




/* ----- standard site navigation link styles ----- */
/* ----- hover styles ----- */
.menubar .aboutUs a:hover 		{ color: #286DA8; }
.menubar .businessCentre a:hover 	{ color: #000177; }
.menubar .home a:hover 			{ color: #286DA8; }
.menubar .buyOnline a:hover 		{ color: #E84300; }
.menubar .education a:hover 		{ color: #AF5200; }
.menubar .kidsOnly a:hover 		{ color: #6E3DDD; }
.menubar .natureOnline a:hover 		{ color: #228900; }
.menubar .natureplus a:hover 		{ color: #228900; }
.menubar .researchCuration a:hover 	{ color: #015B28; }
.menubar .takePart a:hover 		{ color: #0085BC; }
.menubar .tring a:hover 		{ color: #232428; }
.menubar .visitUs a:hover 		{ color: #B40000; }

/* ----- hover styles for top-menu item arrows ----- */
#nav-site-supplementary li.aboutUs a:hover 		{ background-image: url(about-us/images/circle-right.gif); }
#nav-site-supplementary li.researchCuration a:hover 	{ background-image: url(research-curation/images/circle-right.gif); }
#nav-site-supplementary li.businessCentre a:hover 	{ background-image: url(business-centre/images/circle-right.gif); }


/* ----- ADDED 08/2008 - for forwards compatibility ----- */
/* ----- hover styles ----- */
.menubar .about-us a:hover 		{ color: #286DA8; }
.menubar .business-centre a:hover 	{ color: #000177; }
.menubar .buy-online a:hover 		{ color: #E84300; }
.menubar .kids-only a:hover 		{ color: #6E3DDD; }
.menubar .nature-online a:hover 		{ color: #228900; }
.menubar .natureplus a:hover 		{ color: #228900; }
.menubar .research-curation a:hover 	{ color: #015B28; }
.menubar .take-part a:hover 		{ color: #0085BC; }
.menubar .visit-us a:hover 		{ color: #B40000; }
/* ----- hover styles for top-menu item arrows ----- */
#nav-site-supplementary li.about-us a:hover 		{ background-image: url(about-us/images/circle-right.gif); }
#nav-site-supplementary li.research-curation a:hover 	{ background-image: url(research-curation/images/circle-right.gif); }
#nav-site-supplementary li.business-centre a:hover 	{ background-image: url(business-centre/images/circle-right.gif); }



/* ----- 'on' styles ----- */
/* IN SECTIONAL STYLESHETS */

/* ----- standard menubar styles ----- */
div.menubar {   
	overflow: auto;		/* MACs need this - without it, in safari the menu bg collapses, and in IE5 content migrates out of the container! */	
	width: 100%;
	color: #747474;
	background-color:#FFF;
	background-image: url(generic/images/backgrounds/bg_menubar_bar.gif);
	background-repeat: repeat-x;
	border-bottom: 1px solid #DADADA;
	font-weight: bold;
}
.menubar ul li 
{
	float: left;
	display: block;
	padding-right: 15px;
	border-right: 1px solid #CACACA;
	list-style: none;

}
.menubar ul 
{
	display: inline; 
	margin: 0px;
}
.menubar a:link, .menubar a:active, .menubar a:visited 
{
	color: #747474;
	text-decoration: none;
	/*whitespace: nowrap; these invalidate the css and I don't think they do anything anyways - pats */
}
.menubar a:hover 	 	/* default hover style for menubar links - eg: footer nav gets this as has no more specific style applied  */
{
	color: #377FBD;
	text-decoration:underline;
}


/* ----- specific menubar styles ----- */
/* ----- top menubar ----- */
div#nav-site-supplementary 
{
	position: absolute;
	top: 18px;
	right: 0;				/* added for new headers - 12/2006 */
	z-index: 25;			/* changed for new headers - 12/2006 */
	width: 525px;			/* Adjusted for Google-supplied search box - 24/03/2011 - Plus 5px more than ideally needed - for some IE8s */
	background-color: transparent;
	background-image: none;
	border-width: 0px;		/* remove bottom border (from menubar class) */
	overflow: visible;		/* overwrite rule from .menubar class - added to fix  scrollbar and wrapping on top menu in IE8 - miks - 09/2009 */
}
#nav-site-supplementary li 
{
	white-space: nowrap;
	padding: 0px 5px 0px 5px;
	margin: 2px 0px;
	vertical-align: middle;
}
#nav-site-supplementary li a 
{
	display: block;
	background-image: url(generic/images/circle-right.gif);
	background-position: center right;
	background-repeat: no-repeat;
	padding-right: 15px;
}
#search-site 				/* top menubar search LI */
{
	border-right: none;
 	vertical-align: middle;
}

#search-site-box			/* top menubar Search input */ 
{
	height: 1.5em;
	border: 1px solid #DBDADA;
	margin: 0px 3px;	/* seperate box from 'Search' label and container */
	font-size: 0.75em; 
}
#search-site-go, .searchGo 		/* CHECK !! why the class?? -  miks - because it does fix the aligment! */
{
 	vertical-align: middle;		/* CHECK !! why is this necessary - LI rule should do this?? */
}
/* added to fix conflicts with rules from forms.css */
#search-site label
{

	float: none;
	display: inline;	/* prevent conflict with style in forms-2007.css - miks - May 2007 */
	width: auto;
	font-weight: bold;	/* typography.css */
	padding: 0;
	line-height: 1.2em;	/* or rule in forms[-2007].css moves text downwards */
}
#search-site form, #search-site label, #search-site input
{
	vertical-align: top;
}
#search-site fieldset
{
	border-width: 0px;
}
/* end added */


/* ----- additional CSS for google-provided search box - 24/03/2011 ----- */
div#nav-site-supplementary #q		/* google searchterm textbox in top menubar */
{
	position: relative;
	top: -3px;
	width: 85px;
}
#cse-search-box-top div
{
	display: inline;
}



/* ----- main menubar ----- */
#nav-site 
{
	clear: both;
	position: relative;		/* added for new headers - 12/2006 */
	z-index: 10;			/* changed for new headers - 12/2006 */
	background-image: url(generic/images/backgrounds/bg_menubar_bar.gif); /* moved from the class because it is specific */
	padding: 4px 0px 3px 0px;
	border-bottom: 1px solid #BFBFBF;
}
#nav-site ul
{
	display:block;
	z-index:25;
	width:570px;
}
#nav-site li 
{
	display:block;
	padding: 0px 5px;	/* was 12px - changed to 10 when tring added, then 9 due to menu wrapping on Macs */
}

/* ----- bread crumbs ----- */
#nav-breadcrumbs 
{
	font-size: 0.9em; 
	color: #000;
	padding: 0 0px 8px 0;
}

#nav-breadcrumbs a:link, #nav-breadcrumbs a:active, #nav-breadcrumbs a:visited 
{
	color: #000;
	text-decoration : underline;
}
#nav-breadcrumbs ul {
	display:inline;
	padding: 0px 0px 0px 2px;
	margin:0px;
}
#nav-breadcrumbs ul li {
	display:inline;
	list-style:none;
}



/* ----- footer menubar ----- */
#nav-footer 
{
	font-size: 0.8em;
}
div#nav-footer 
{
	font-weight: normal;
	padding: 3px 0px 4px 0px;
	margin: 0px;
}
div#nav-footer ul li 
{
	padding: 0px 10px;
}
div#nav-footer ul li#page-copyright 
{
	float: right;
	padding-right:40px; 	
	border-right:none;
}
#nav-footer-menu li.firstItem 		/* no other way to centre menu without additional unnecessary div */
{
	padding-left:40px;
}

div#nav-footer ul li#page-cookies
{
	display: none;				/* ----- hide cookies footer link - 2012/05 ----- */
}


/* "text-only" menu style (ie - plain text, pipe-seperated) */
/* centered version */
div.textmenu
{
	margin-top: 10px;
}
div.textmenu ul
{
	padding:  0;	
	margin: 0;
	list-style-type: none;
	text-align: center;
	width: 100%;	/* can cause probs in IE - eg - British Fleas search form - hence hack on next line - FIX THIS - ideally remove need for width:100% ?? - miks - June 2007 */
	_width: 90%;	/* but this is not good either... */
}
div.textmenu ul li { 
	display: inline; 
	white-space: nowrap;
}
div.textmenu ul li a
{
	text-decoration: none;
	padding: 0 5px;
	border-right: 1px solid #747474;
}
div.textmenu ul li a
{
	text-decoration: none;
	padding: 0 5px;
	border-right: 1px solid #747474;
}
div.textmenu ul li a:hover
{
	text-decoration: underline;
}
div.textmenu ul li.firstItem a
{
	padding-left: 0px;
}
div.textmenu ul li.lastItem  a
{
	border-right-width: 0px;
	padding-right: 0px;
}


/* careful use of padding and margin on various elements means menu can be aligned right to the left margin and that both rows align when wrapped */
/* left-aligned version
div.textmenu {   
	overflow: auto;		
	background-color:#FFF;
	text-align: center;
}
div.textmenu ul 
{
	text-align: center;
	display: inline; 
	margin: 0px;
}

div.textmenu ul li 
{
	float: left;
	display: block;
	padding: 0px 5px 0px 0px;
	margin-right: 5px;
	border-right: 1px solid #747474;
	list-style: none;
	white-space: nowrap;
}
div.textmenu ul li.lastItem 
{
	border-right-width: 0px;
	padding-right: 0px;		
}
*/

/***** contextual pointRight and pointLeft rules moved to panels.css *****/