/****************************************************************/
/*	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;
}

/****************************************************************/
/*	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(images/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(images/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#microsite implemented */
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;
}
div#page-body.microsite #nav-breadcrumbs
{
	margin: 0 10px 0px 10px;
}
/* END adjustments for 'legitimate' microsite */

#page-footer 
{
	clear:both;
	padding: 20px 0px;
}


/* legitimate microsite container */
div#container
{
	padding: 5px 15px 15px 15px;
	margin-bottom: -10px;
	margin-left: -15px;
	width: 732px;		/* does this need hacking?s */
}



/* ----- standard header elements ----- */
img#page-logo 
{
	margin: 15px 0px 14px 15px;
}
/* ----- page images - SPLIT INTO SEPERATE STYLESHEET, and @import here -----  */
/* top right image */
.pageImage 
{
	position: absolute;
	display: block;		/* show page imagery (hidden for NN4) */
	z-index:0;
}
#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;
}
/* bottom image */
#page-image-bottom
{
	bottom: 4em;
}
/* ----- END SPLIT INTO SEPERATE STYLESHEET -----  */




/* ----- 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 .researchCuration a:hover 	{ color: #015B28; }
.menubar .takePart a:hover 		{ color: #0085BC; }
.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); }

/* ----- '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(images/bg_menubar_bar.gif);
	background-repeat: repeat-x;
	border-bottom: 1px solid #DADADA;
}
.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: 19px;
	z-index: 20;
	width: 505px;
	background-color: transparent;
	background-image: none;
	border-width: 0px;		/* remove bottom border (from menubar class) */
	margin-left: 265px;
	left: -42px;
}
#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(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 0px 0px 3px;	/* seperate box from 'Search' label */
}
#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;
	width: auto;
	font-weight: bold;	/* typography.css */
	padding: 0;
}
#search-site form, #search-site label, #search-site input
{
	vertical-align: top;
}
#search-site fieldset
{
	border-width: 0px;
}
/* end added */

/* ----- main menubar ----- */
#nav-site 
{
	clear: both;
	z-index: 15;
	background-image: url(images/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 12px;
}

/* ----- bread crumbs ----- */
#nav-breadcrumbs 
{
	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 ----- */
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;
}

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