/************************************************************************/
/* 									*/
/* 	STYLES FOR CONTENT (P, UL, OL, LI, etc) IN VARIOUS SUBDIVS	*/
/* 									*/
/* 									*/
/* 	This sheet possibly needs a complete re-working to make it 	*/
/*	more transparent - miks						*/
/************************************************************************/



a 	{ text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- generic classes ----- */
/* .subtext MAY BE UNNEC ??? [ what is it for?? - miks - 08/2007 ] */
.subtext			{ text-align: right; }
.right, .subPanel img.right 	{ float: right; }
img.right 			{ padding: 0px 0px 5px 10px; }
.left, .subPanel img.left 	{ float: left; }
img.left 			{ padding: 0px 10px 5px 0px; }
.text-right 			{ text-align: right; }
.text-left 			{ text-align: left; }

.fTaxon						/* italic format for taxon names */
{
	font-style: italic;
}
.keyword					/* bold format for keywords in text, as per Sticky Content guidelines */
{
	font-weight: bold;
}

/* panel styles - applied to both subPanels and contentRows */
.panel ul, .panel ol
{
	margin: 10px 0px 10px 20px;
}
.panel li
{
	padding: 2px 0px;
}
.panel p, .panel h3
{
	margin-bottom: 10px;
}

/* subPanel styles */
div.subPanel
{
	border-bottom: 1px solid white;		/* create seperator */
	padding: 10px 10px 0px 10px;		/* allow content bottom padding/margin to create space, otherwise get both */
						/* SO why not do the same for content-rows? - because they have bottom pointRights? - well, so do subPanels... */
	  /* hide from mac ie5 \*/
	 clear: both; /* we are hiding this from mac ie as it incorrectly applys the rule to this elements children */
 	/* end hide from mac ie5 */						
}
/* star7 hack - hides from Opera 7+ */
html*.subPanel { display: inline-block; }		/* required to force correct enclosure of floated content in IE7 (triggers hasLayout=true) - see: http://www.tanfa.co.uk/ - "EasyClearing, the Aslett/PIE way is NOT broken in IE7!" */

.subPanel:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both;
    margin-bottom:10px;
    visibility: hidden;
}
div.subPanel h4
{
	padding-bottom:15px;
}
div.subPanel h6
{
	padding-bottom:5px;
}
span.date	/* this is a BAD idea - do we want dates always in bold?? - there are much better ways to achieve the desired affect - miks */
{
	font-size:0.9em;
	color:#000;
}
.subPanel .imageContainer 			/* this is for images with no caption (really?? - gets applied to images with captions too - miks)  */
{
	float: right;
	padding: 0px 0px 5px 10px;		/* the left-padding causes alignment probs in IE/Opera with wide images - miks */
}

 
.subPanel img 			/* this is for images with no caption */
/* actually it's a very bad idea as not all subPanel images should float - needs correcting (see tempFix below) - miks - 05/2006 */
{
	float: right;
	padding-left:10px;

}
div.noSeparator
{
	border-color:#f2f2f2;
}
.imageContainer img, .banner img, img.tempFix
{
	float:none;
	padding:0;
}
/* above rule causes dodgy behaviour of floated divs containing images - following rule fixes it - miks */
div.right img
{
	float: none;
	display: inline;
	vertical-align: middle;		/* for events calendar event-type icon [still relevant?? - miks] - watch for probs elsewhere - miks */
}




div.subPanel a.pointRight
{
	margin-bottom: 10px;
}

div.noFooterLinks
{
	background-image: url(generic/images/curve-bot.gif); 	/* because of the way that panels interact with their footerLinks bars, this would seem the best way to implement a curve when there are no footerLinks bars - pats */
	background-position: bottom left;	
}

/****************************************************************************************/
/*	contentRow 	- for rows without alternating background-colours 		*/
/*		 	- MUST have lastitem class for last row 			*/
/*	contentRow0 	- for even-numbered rows with alternating background-colours 	*/
/*	contentRow1 	- for odd-numbered rows with alternating background-colours 	*/
/****************************************************************************************/

.contentRow, .contentRow0, .contentRow1
{
	  /* hide from mac ie5 \*/
	 clear: both; /* we are hiding this from mac ie as it incorrectly applys the rule to this elements children */
 	/* end hide from mac ie5 */
	
	padding: 10px;

}

/* can these content-specific styles be specified at a higher level - eg, as panel defaults ?? - prob yes */
/* REMOVE contentRow0 AND contentRow1 - use .EVEN instead */
.contentRow h5, .contentRow p, .contentRow ul,
.contentRow0 h5, .contentRow0 p, .contentRow0 ul,
.contentRow1 h5, .contentRow1 p, .contentRow1 ul
{
	/* have removed this beneath does it make any difference - pats */
	/*margin-left: 70px;	 this ain't gonna work - the left-floated images vary in width - prob need 2 classes - OR BETTER - contextual rules in LAYOUT.css !! - miks */
}
.contentRow img, .contentRow0 img, .contentRow1 img
{
	float: left;
	padding-right: 10px;	/* temp FIX for above problem - miks */
}
.accent1 .contentRow
{
	padding-bottom: 0px;	/* remove 2x padding between rows */
}

.contentRow a.pointRight	
{
	/* is this a good idea?? it does fix the spacing issues without requiring a lastItem class - miks
	position: relative;
	top: -10px; 
	*/
	padding-bottom: 2px;	/* extra padding improves look when alternating background colours */
}
.contentRow a
{
	font-weight: bold;
}
.contentRow p
{
	margin-bottom: 0px;	/* so content can't pad container - fine as long as we don't need two paras... so prob dodgy! - miks */
				/* but if NEVER have 2 paras, can do it all with bottom padding and don't need bottom-padding on p at all - miks */
}
.contentRow0, .even
{
	background-color:#E4E4E4;	/* alternate bg colours */
}
div.contentRow.seperateItem
{
	padding-bottom: 10px;
	border-top: 1px solid #FFF;
	margin-top: 10px;
}
div.contentRow.lastItem		/* maybe don't need this if using relatively positioned pointRight links - see above - miks */
{
	padding-bottom: 10px;
}

div.subContentRow
{
	float: right;
	width: 100px;
	/* height: 96px;	- this sort-of FIXES the bottom of content rows prob because it is 10px taller than the image (although given that it's floated, that shoulnd't really make a diff...? - miks */
}
div.subContentRow p
{
	text-align: right;
	/* margin-bottom: 5px; */

}
div.subContentRow img
{
	float: right;
	margin: 5px 0px;
	padding: 5px 0px;

}



/* banner styles */
/* banners behave differently as not internally padded - would it be better to do panels etc without padding too?? - miks */
.banner ul 
{
	margin-left: 30px;
}
.banner p 
{
	padding: 10px;
	margin: 0px;
}

p.caption 	/* is this specific to banners ?? - miks - I doubt it... - miks */
{
	background-color: #737373;
	color: #FFF;
	border: 1px solid #FFF;
	border-width: 1px 0px;
	/* margin: 0px 0px 10px 0px;	add space before following para - maybe bad idea in case not always folloiwng para... - miks */
	padding: 4px 10px;
}



/* New caption styles for the various widths of images usage <p class="caption imageCaptionWidth180"></p> */
/* Oh the pain of semantically poor markup. Maybe if we're quiet about it no-one will notice :) */ 
/* ======================= */
p.imageCaptionWidth250
{
	width:230px;
}
p.imageCaptionWidth200
{
	width:180px;
}
p.imageCaptionWidth190
{
	width:170px;
}
p.imageCaptionWidth170
{
	width:150px;
}
p.imageCaptionWidth160
{
	width:140px;
}
p.imageCaptionWidth150
{
	width:130px;
}
p.imageCaptionWidth140
{
	width:120px;
}

p.imageCaptionWidth150
{
	width:130px;
}
p.imageCaptionWidth122
{
	width:102px;		
}
p.imageCaptionWidth120
{
	width:100px;		
}
p.imageCaptionWidth100
{
	width:80px;		
}



address
{
	padding: 0px 10px 10px 10px;
	font-style: normal;
}

/* CITE and BLOCKQUOTE - added 03.2007 - miks */
cite
{
	font-style: italic;
	display: inline;
	text-align: left;
}
blockquote p.reference
{
	text-align: right;
	margin-left: 0px;	
}
p.reference
{
	margin-left: 15px;
}

/* OL numbering variations - added 03.2007 - miks */
ol.roman-upper	{ list-style-type: upper-roman; }
ol.roman-lower	{ list-style-type: lower-roman; }
ol.alpha-upper	{ list-style-type: upper-alpha; }
ol.alpha-lower	{ list-style-type: lower-alpha; }


/******** FIXES ********/
.panel img
{	
	/* 
	next two rules are to get around prob of having reset img vertical-align:baseline
	(in basic.css - removes extra space below image, but triggers float/margin bug 
	of some kind in IE6) - could use display:block instead, but causes strange issues.
	not sure this doesn't cause additional probs itself...
	*/
	display: block;
	vertical-align: baseline; 
}
/**********/


/* video */
.streamChoice
{
  float:left;
  width:170px;
  font-size:0.9em;
}
.streamChoice p
{
  padding:3px 0 0 7px;
}

.streamChoice ul
{
  margin-top:2px;
  margin-bottom:2px;
}

.streamChoice li a:link, .streamChoice li a:visited
{
  color:#000;
  font-weight:bold;
}
/* Video content row */
div.video
{
	background-position: top right;
}


/* these following should prob be in nhm.css - not that it makes much diff - need to standardise probably... - miks */
img.imageLeft
{
  float:left;
}
p.caption
{
	  /* hide from mac ie5 \*/
	 clear: both; /* we are hiding this from mac ie as it incorrectly applys the rule to this elements children */
 	/* end hide from mac ie5 */
}


/******** ADDED from other sheets ************/

.contentRow a.pointRight:link, .contentRow a.pointRight:visited, .contentRow a.pointRight:active,  
.contentRow1 a.pointRight:link, .contentRow1 a.pointRight:visited, .contentRow1 a.pointRight:active,  
.contentRow0 a.pointRight:link, .contentRow0 a.pointRight:visited, .contentRow0 a.pointRight:active,  
.subPanel a.pointRight:link, .subPanel a.pointRight:visited, .subPanel a.pointRight:active,  
.banner a.pointRight:link, .banner a.pointRight:visited, .banner a.pointRight:active  
{
	display: block;
	text-align: right;
	  /* hide from mac ie5 \*/
	 clear: both; /* we are hiding this from mac ie as it incorrectly applys the rule to this elements children */
 	/* end hide from mac ie5 */
}
.banner a.pointRight 
{
	margin: 10px;
}

.banner
{
	border-bottom: 1px solid #FFF;	/* CHECK !! NEED THIS - but dodgy space issue in FF/IE - miks */
}

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

h4 img.icon		/* ??? */
{
	float: none;
	display: inline;
}

/******************* START REMOVE FOR INTERNT */

/* ----- basic table styles ----- */
table
{
	/* width: 100%; 	cannot do this while microsites linked to this stylesheet - need an alternative? */
}
th
{
	font-weight: bold;
}
thead th
{
	background-color: #747474;
	color: #fff;
}
tbody th
{
	text-align: right;
	white-space: nowrap; 
}
th, td
{
	text-align: left;
	vertical-align: top;
	padding: 3px;
}

.groupHeader th			/* deprecated - and arguably unnecessary here anyway... - miks - 08/2007 */
{
	color: #000;
}
.groupSubHeader th		/* deprecated - and arguably unnecessary here anyway... - miks - 08/2007 */
{
	color: #000;
	background-color: #F2F2F2;
}

.column table img		/* why?? */
{
	float: none;
	padding: 0;
	margin: 0;
}

/******************* END REMOVE FOR INTERNT */


/* fix table styles for microsites */
#microsite-holder th		/* remove TH styles from microsites */ 
{
	background-color: transparent;
	color: #000;
}


/******************************
styles for slideshows

!!! 
this css has been added to content.css temporarily - it needs to be re-instated as a 
seperate stylesheet - miks
!!!

1)	strangely, IE needs both the following selectors to implement hover styles on images within links: 
	#ssTileSelector a.ssTileLink:hover, #ssTileSelector a.ssTileLink:hover img (also in sectional stylesheets)
2)	cursor: default; on current tile - so link which cannot be followed LOOKS like it cannot be followed

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

#ssSlideshow
{
	width: 100%;
}
#ssIntro
{
	background-image: url(generic/images/curve-top.gif);
	background-position: top right;
}

#ssTileSelector 
{  
	width: 100%;
	text-align: center;
	padding: 5px 0px;
	background-color: #DBDADA;
}
#ssTileSelector img {
	display: inline;
	margin: 3px;
	border-width: 2px;
	border-color: #DBDADA;		/* same as bg so not visible */
	width: 62px;
	height: 62px;
}
#ssControls
{
	float: right;
	padding: 3px 0px;
	background-color: #DBDADA;
}
.ssSlide 
{
	clear: both;
	margin-bottom: 10px;
}
.ssSlide p
{
	padding: 10px;
	margin-top: 0px;
}
.ssSlide img
{
	padding: 0px;
	margin: 0px;
}



/* ----- hover styles (Note 1) ----- */
#ssTileSelector a.ssCurrTileLink:hover, #ssTileSelector a.ssTileLink:hover img.ssCurrTileImage
{
	cursor: default;		/* see Note 2 */
}

/* ----- menubar ----- */
div.ssMenubar {   
	overflow: auto;		/* MACs need this - without it, in safari the menu bg collapses, and in IE5 content migrates out of the container! - CHECK THIS STILL TRUE (comes from page.css) */	
	width: 100%;
}
div.ssMenubar ul 
{
	display: inline; 
	margin: 0px;
}
div.ssMenubar ul li 
{
	float: right;
	display: block;
	margin: 0px 5px 0px 10px;
	list-style: none;
}
div.ssMenubar ul li a:hover
{
	text-decoration: underline;
}

/* next rule does A-tag without href - ID gives greater specificity */
#ssControls.ssMenubar ul li a.disabled, #ssControls.ssMenubar ul li a.disabled:hover
{
	color: #000;
	cursor: default;
	text-decoration: none;
	background-image: url(generic/images/circle-right.gif); 
}
/* over-ride above for previous link */
#ssControls.ssMenubar ul li a#ssPrevLink.disabled, #ssControls.ssMenubar ul li a#ssPrevLink.disabled:hover
{
	background-image: url(generic/images/circle-left.gif); 
}


/* block for collaborarive sites - SUPERCEDED BY NEW STYLES?? - CHECK - miks - 08/2007 */
div.collaborators
{
			background-position:bottom left;
			background-repeat: no-repeat;
background-color:#fff;
			width:221px;
			clear:both;
}
ul.collaborators-list
{
			list-style:none;
			background-position:top left;
			background-repeat: no-repeat;
			width:221px;
			margin-bottom:15px;
}
ul.collaborators-list li
{
			float:left;
			margin:5px 0 5px 5px;
} 

/* Formatting for lists sorted by date - should prob be in context of div.calendar rather than using additional classes - may even be redundant? - miks */
.panel h3.yearHeader
{
	padding:5px 0 5px 10px;
	color:white;
	margin-bottom:0;
}
.panel h4.monthHeader
{
	display:block;
	padding-left:10px;
	padding-top:5px;
	padding-bottom:5px;
	color:black;
	width:auto;
	font-size:1em;
	border-top:1px solid white;

}
div.monthYearList .contentRow
{
	padding-left:40px;
}

/* CVs */
.cv th { white-space: nowrap; }		/* this SHOULD be handled by more generic rule when reinstated - miks - 08/2007 */


/* Pull out bar for content area. For important info that needs to be pulled out into mini panel */
/* why an H3 ?? - miks */
div.pullout
{
	display:block;
	float:right;
	width:180px;
	background-color: #fff;
	border: 1px solid #E4E4E4;
	margin-left:10px;
}
/* this is inconsistent with our left-to-right, top-to-bottom spacing attitude - but maybe that's not a prob... although it might be when someone wants to put UL or similar into a pullout - prob best to fix */
/* h3 is DEPRECATED - should be H5 */
div.pullout h3
{
	padding:5px 5px 5px 10px;
	font-size:1em;
}
div.pullout p
{
	padding:0 10px 0 10px;
}
div.generic h3
{
	color:#000;
	background-color:#E4E4E4;
}
/* END DEPRECATED */

/* new pullout header styles - added 03/2007 - miks */
div.pullout { margin-bottom: 10px; }
div.pullout h5
{
	padding:5px 5px 5px 10px;
	margin-bottom: 10px;
}
div.pullout-generic h5		/* not nice (should be div.pullout.generic) - but IE cannot deal with multiple class selectors */
{
	color:#000;		/* #747474 better ?? */
	background-color: #E4E4E4;
}



/* added 03/2006 - miks - CHECK ECHINOIDS AND OTHER LEGACY CONTENT OK */
blockquote { margin: 0 30px 10px 30px; }
cite 
{
	display: block;
	text-align: right;
	font-style: normal;
}


.error-message, warning
{
	color: #AA0000;
}



/* ---- TEMP - for user-survey-2010 - miks - 12/2010 ----- */
/* remove when survey done */
#survey-invitation
{
	background-color: #EEE;
	border: 1px solid #747474;
	height: 170px;
	outline: 5px solid #FFF;
	padding: 15px;
	position: absolute;
	text-align: left;
	width: 400px;
	z-index: 100;
}