@import url("/includes/css/page.css");
@import url("/includes/css/nhm.css");
@import url("/css/research-curation/section.css");
@import url("/includes/css/typography.css");
@import url("/includes/css/content.css");

@import url("/includes/css/hacks/IE5win.css");
@import url("/includes/css/hacks/IE5mac.css");

/*
ARGUABLY, RATHER THAN CONTENT-identifier, CONTENT DIVs SHOULD SIMPLY BE CALLED "CONTENT"
THIS MAKES IT LESS EASY TO DEFINE BEHAVIOUR FOR DIFF TYPES OF CONTENT, BUT THE CONSISTENCY IS PROBABLY MORE WORTHWHILE
*/

/*
REMOVED AS THIS AFFECTS APPEARANCE IN FIREFOX 
div#container
{
	display: inherit;
}
*/


/* LINK VISISBILITY FIXING */

div#container a:link, div#container a:visited, div#container a:active

{
	text-decoration: underline;
}
div#container th a:link, div#container th a:visited, div#container th a:active, 
div#container .mainIndex a:link, div#container .mainIndex a:visited, div#container .mainIndex a:active
{
	text-decoration: none;
}
div#container th a:hover
{
	text-decoration: underline;
}

/* END link visisbility fixing */


table.mainIndex img		/* bimages on Index to Taxa page */
{
	border: 5px solid #000;
	margin: 0;
	padding: 0;
}



div#container
{
	background-color: #747474;
	/* need IE hack to force correct width?? - static pages only - miks */
}

div#container h1 {
	float: none;		
	width: 12em;
	color: #fff;
	font-size: 1.5em;
	padding: 10px 15px 5px 0px;
	margin-bottom: 10px;r
}
#container h2 {
	background-color: #fff;
	background-image: none;
	font-size: 1.5em;
	clear: both;
	text-align: center;
	padding: 5px 0px;

}
/* ignore specified literal heights for table elements in legacy HTML */
#container td, #container tr { height: auto; }

div#container  #ech-key-container h2		/* div#container needed for greater specificity - miks */
{
	margin-top: 0px;
	margin-bottom: 0px;
}

#ech-key-container td h2
{
	margin: -3px;			/* hide cell padding */
}

/* local navigation */
/* adjusted from microsite-legacy.css */
/* possible the "microsite" prefix should be reserved for "legacy" microsites - or possibly not? - miks */
div#microsite-nav-local
{
	/*float: right;*/
	text-align: center;
	margin-top: 5px;
	margin-bottom: 15px;
}
#microsite-nav-local-menu li 
{
	list-style: none;
	display: inline;
	padding: 3px 5px 3px 5px;
	background-repeat: no-repeat;
	background-color: #D4EDDF;
	margin: 0px 1px 0px 0px;
}
div#container #microsite-nav-local-menu li a:link,
div#container #microsite-nav-local-menu li a:visited, 
div#container #microsite-nav-local-menu li a:active  		/* div#container for greater specificity - miks */
{
	width: 100%;
	color: #000;
	background-color: transparent;
	font-weight: bold;
	text-decoration: none;
}
div#container #microsite-nav-local-menu li a:hover
{
	text-decoration: underline;
}

/* DATA HEADER AREA */
#ech-data-header
{
	background-color: #fff;
	clear: both;
	display: inline-block;
}
#ech-data-header p
{
	padding: 10px;
	text-align: center;
}

/* IMAGES */
#ech-image-container
{
	clear: both;
	background-color: #000;
	width: 100%;
	text-align: center;
	vertical-align: middle;
}
#ech-image-container img
{
	margin: 10px;
	vertical-align: middle;
}

/* DATA */
#ech-data-container
{
	background-color: #fff;
	width: 100%;
	text-align: center;
	padding: 0px;
	clear: both;
}

/*, #ech-data-container blockquote  - can't do this - screws data cells... */
#ech-data-container p
{
	text-align: left;
	padding: 0;
	margin: 10px;				/* 01/2006 */
}
#ech-data-container p p
{
	margin-top: -10px;
}
#ech-data-container table td
{
	padding: 5px 10px 5px 5px;
	border-top: 1px solid #015B28;
}
#ech-data-container th
{
	border-top: 1px solid #015B28;
	background-color: #D4EDDF;
	padding: 5px 3px 5px 10px;
	text-align: right;
}
#ech-data-container th center
{
	text-align: right;
}
#ech-data-container td p
{
	margin: 0px 10px 10px 0px;
}
#ech-data-container ul
{
	margin: 0px 10px 10px 25px;
}
#ech-data-container table
{
	width: 100%
}
#ech-data-container h2
{
	background-color: #D4EDDF; 
}

#container #ech-data-container td img
{
	float: none;
	margin: auto;		/* WHY NOT ??!! - miks */
}



/* KEYS */
#ech-key-container
{
	clear: both;
}
#ech-key-container td
{
	border: 1px solid black;
	width: 50%;					/* ?????? - should make cols equal widths, but may be dodgy... */
}
#ech-key-container table
{
	margin: auto;
	/* margin-left: 35px;	Safari doesn't seem to understand "margin:auto" - miks */
	width: 650px;
}
#ech-key-container h2
{
	margin: auto;
	width: 650px;
}

#ech-key-container table h2
{
	margin: 0;
	width: 650px;
}

/* SPECIES KEY - there is only one - and this CSS is not very good... - miks - 01/2006 */
#ech-key-container table.keySpecies td
{
	padding: 15px;
	background-color: #fff;
	border-width: 0;
}
#ech-key-container table.keySpecies td p
{
	margin-bottom: 5px;
	white-space: normal;
}
#ech-key-container table.keySpecies td h3
{
	margin-bottom: 15px;
}

/* END species key */


#ech-key-container img
{
	margin: auto 0;
	vertical-align: middle;
	margin-top: 3px;			/* sort-of fix vertical centering - miks */
}
#ech-key-container td a
/* THIS IS MEANT TO SEPERATE LINKS FROM TEXT, BUT "GO TO"S AREN'T LINKS... - miks */
{
	display: block;
	margin-top: 10px;
	border: 0px solid blue;
}

#ech-key-container dl, #ech-key-container dt, #ech-key-container dd
{
	margin-top: 0;		/* remove styles from unnecessary markup */
}


#ech-key-container #pointless		/* needed?? */
{
	padding: 0;
	margin: 0;
	border-width: 0;
}



/* MATRICES */
#ech-matrix-container
{
	width: 730px;
	clear: both;
	overflow: scroll;
	margin: auto;
}
#ech-matrix-container td
{
	border: 1px solid #747474;
}
#ech-matrix-container h2
{
	background-color: #D4EDDF; 	/* needed because #ech-matrix-container is being used inappropriately at /echinoid-directory/morphology/hearts/plastron2.html - ideally the images on this page should be resized */
}


/* STATIC INTRO PAGE CONTAINER -- robes */
/* ideally change -stat- to -static- - miks */
#ech-stat-container
{
	clear: both;
	width: 680px;
	margin: auto;
}
#ech-stat-container.width720
{
	width: 720px;
}
#ech-stat-container table
{
	margin: auto;
	border-width: 0px;
}
#ech-stat-container td
{
	border-width: 0px;
	/* padding: 15px;	 */
	background-color: #fff;
	vertical-align: middle;
}
#ech-stat-container table#main
{
	margin: auto;
	width: 680px;
}
#ech-stat-container table#main p
{
	margin: 15px;
}

#ech-stat-container h2
{
	background-color: #D4EDDF; 
	width: 676px;
	margin-left: 2px;
}
#ech-stat-container table#main h2
{
	background-color: #fff; 	/* for search page - check consistent elsewhere - miks - 01/2006 */
}
/*
#ech-stat-container table#main th
{
	width: 10em;
	background-color: #D4EDDF; 
}
*/
#ech-stat-container p, dl
{
	margin-top: 15px;
}



/* this CSS produces a horizontal centred menubar */
div.navMenubar
{
	margin-top: 15px;
	text-align: center;
}
div.navMenubar ul li {
	list-style: none;
	display: inline;
	background-color: #D4EDDF;
	margin: 0px 1px 0px 0px;
	font-weight: bold;
}
div.navMenubar ul li a {
	color: #000;
	padding: 3px 8px 3px 8px;	/* this doesn't work in IE - only the left and right sides get padding */
	background-color: #D4EDDF;
}
div.navMenubar ul li a:hover {
	color: #015B28;
}



/* Quick bits to clean up static pages -- robes */
h3.echIndexTitle {
	margin-top: 10px;
}
p.echIndexTitle {
	margin-top: 10px;
	color: #000;
}
table#ech-main-menu 
{
	border: 0px solid black;
}
table#ech-main-menu tr td
{
	border-width: 0px;
	background-color: #fff;
}
table#ech-main-menu tr td, table#ech-main-menu tr th 
{
	border-top: 1px solid #015B28;
}
table#ech-main-menu th 
{
	border-width: 0px;
	text-align: center;
	background-color: #D4EDDF;
}
table#ech-main-menu td, table#ech-main-menu th
{
	background-color: #D4EDDF;
	padding: 10px;
	vertical-align: middle;
}
table#ech-main-menu a 
{
	font-weight: bold;
}
ul#ech-index-list 
{
	margin: 3px auto;
}
ul#ech-index-list li 
{
	list-style: none;
	padding: 2px;
	display: inline;
	font-size: 120%;
}
.echCentered 
{
	margin: auto;
	text-align: center;
}


/* more for static pages - miks */
table#menu
{
	background-color: #747474;
	margin: 15px 10px 25px 25px;
	float: right;
}
	

table#menu td
{
	background-color: #D4EDDF;
	padding: 10px;
	text-align: center;
}
table#menu
{
	border: 1px solid #747474;
}
#ech-stat-container tr.background td
{
	background-color: #D4EDDF;

}
#ech-stat-container tr.black td
{
	background-color: #000;

}
#ech-stat-container tr.top td
{
	vertical-align: top;

}

#ech-stat-container td img
{
	margin: auto;		/* does nothing... - <center> used instead where necessary - miks */
}

/* index page */
table#ech-header
{
	clear: both;
	margin: auto;
	border: 1px solid #000;
	
}

table#ech-header td#mid
{
	background-color: #fff;
	margin: 10px;
}

td#mid img
{
	margin: 5px;
}


/* galleries */
#ech-gallery h2
{
	background-color: #fff;
}
table.echGallery 
{
	width: 100%;
	border-width: 0px;
	background-color: #000;
}

.echGallery td
{
	width: 25%;
	text-align: center;
	background-color: #000;
	border-width: 0px;
	padding-top: 15px;
	/* border-top: 15px solid #000; */
	
	padding-bottom: 15px;

}
.echGallery td a
{
	color: #fff;
	font-style: italic;
}
.echGallery td img
{
	display: block;
	margin: auto;
}


th { white-space: nowrap; }


/* for plastron2.html */
#ech-stat-container-special h2
{
	margin-left: 2px;
	background-color: #D4EDDF;
	
}


/* added 04/2008 */
#key-to-colours
{
	margin: 10px 0 20px 10px;
	border-bottom: 1px solid #015B28;
}

td.image 
{
	text-align: center;
	vertical-align: middle;
	background-color: #000;
}