/* PRINT LAYOUT STYLE SHEET */

/* ----------------- body , wrap & workspace ----------------- */

html { min-height: 100%; margin-bottom: 0.01em; } /* hack to force a vertical scroll on mozilla */
/* html { height: 100%; margin-bottom: 1px; } */

body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	background: #ffffff;
}

select, input, textarea, button, label { font-family: Verdana, Tahoma, Arial, sans-serif; }

body {
	/* font-size: x-small;			Font size value for IE4/5 on Windows (where x-small maps to today's small) */
	/* voice-family: "\"}\"";		IE4/5 in Windows will not understand this and believe the rule is over. This is the basis of the box model hack */
	/* voice-family: inherit;		Allows the rest of browsers to get on with rule */
	font-size: 85%;				/* proper value for browsers that implement keywords correctly */
}

.article { font-size: 0.9em; }  /* our default size for the bulk of the site */



/* --------------------------------------------------- */
/* ---------------------- PAGE ----------------------- */
/* --------------------------------------------------- */

/* for all browsers that understand min-width */
#outerwrap { }
/* -sigh- #outerwrap { } */

/* the workarounds for IE6 browsers */
* html #innerwrap { }
* html #workspace { }

#workspace { }

#admin { display: none; }


/* --------------------------------------------------- */
/* --------------------- BANNER ---------------------- */
/* --------------------------------------------------- */

#header img { display: none; }	
#banner { display: none; }

#workspaceBody { }

#printHeading { color: #566292; }

/* --------------------------------------------------- */
/* ------------------- NAVIGATION -------------------- */
/* --------------------------------------------------- */

#navColumn { display: none; }	

/* --------------------------------------------------- */
/* -------------- contentBox POSITIONING ------------- */
/* --------------------------------------------------- */

#contentBox { }

#contentBoxSingle { }

#contentBoxDoubleA { }

#contentBoxDoubleB { }

td#navCell { display: none; } /* ADDED TO OVERCOME TABLE SPACING FOR MENU */


/* --------------------------------------------------- */
/* ---------------- ARTICLE FORMATTING --------------- */
/* --------------------------------------------------- */

/* FOR PRINT, NOTE THE FOLLOWING 2 REQUIREMENTS: */
/* .article - text-align: justify;    YOU MUST COMMENT THIS OUT AS JUSTIFIED TEXT WON'T WRAP WHEN PRINTED!!!!! */



.article {
	clear: both;
	padding-bottom: 20px;
	line-height: 1.55em; /*1.4*/
	/* text-align: justify;    YOU MUST COMMENT THIS OUT AS JUSTIFIED TEXT WON'T WRAP WHEN PRINTED!!!!! */

	overflow: visible;	/* to fix IE's problem with italics widening the block */
	width: 100%;		/* to fix IE's problem with italics widening the block */
}

.article p { margin: 10px 0 10px 0; }  /* smaller paragraph spaces look better */

.newsBar p { font-size: 0.87em; line-height: 1.5em; }

/* ------------------------ */
/* -- special paragraphs -- */
/* ------------------------ */

p.intro {  /* the green introductory paragraph as seen on the front page */
	color: #8eaa43;
	margin: 0 0 10px 0;
	font-size: 1.2em;
	font-weight: 500;
	text-align: left;
}

p.more {  /* the green "more" link as seen on the front page */
	margin: -10px 0 10px 0;
	color: #8eaa43;
	font-weight: bold;
}
p.more a { color: #8eaa43; text-decoration: none; }
p.more a:hover { text-decoration: none; }


p.totop {  /* the green "return to top" link as seen on the bottom of some pages */
	margin: 20px 0 0 0;
	color: #8eaa43;
	font-weight: bold;
	text-align: right;
}
p.totop a { color: #8eaa43; text-decoration: none; }
p.totop a:hover { text-decoration: none; }


p.date {  /* the dates below the media statements */
	font-weight: bold;
	font-style: italic;
	margin-top: -5px;
}

p.footnote { /* used for the smaller text listing the researchers in each group on the focus page */
	margin-top: 3px;
	font-style: italic;
	font-size: 0.9em;
	line-height: 1.4em;
}

p.role { /* used for the smaller text listing the researcher's research on the Team page */
	margin-top: 0px;
	margin-bottom: 5px;
	line-height: 1.3em;
}

p.contents { /* used for the smaller text listing the researcher's research on the Team page */
	margin-top: 5px;
	line-height: 1.3em;
}

.bigtext { font-size: 1.3em; } /* used mainly to increase the size of a link that is also a heading */
.ref { font-size: 0.8em; font-style: italic; } /* used for the PubMed links and Impact Factors */


/* ------------------------ */
/* --------- lists -------- */
/* ------------------------ */

.article ol, .article ul {
	margin-top: 10px;
	margin-bottom: 20px;
}

.article li {
	margin-bottom: 10px;
}

.article ol ol {
	margin-top: 10px;
	list-style-type: lower-alpha;
}

.article ol ul {
	margin-top: 10px;
	list-style-type: disc;
	margin-left: 16px;
	padding: 0;
}

/* ------------------------ */
/* ------- headings ------- */
/* ------------------------ */

h2 {  /* this is our big blue heading style */
	padding: 0px 4px 1px 0;
	margin: 20px 0 10px 0;
	color: #556293;
	text-align: left;
	font-weight: 500;
	line-height: 1.3em;
	font-size: 2.2em;
}

.newsBar h2 {  /* this is our big green heading style for the news bar */
	color: #9fab17;
}

/* --------- */

h3 {  /* this is our smaller blue heading style */
	margin: 20px 0 10px 0;
	color: #556293; /* had tried blue (color: #556293;) but used it on h4 instead */
	text-align: left;
	font-weight: 500;
	line-height: 1.8em;
	font-size: 1.55em;
	/* border-bottom: 1px solid #dddddd; */
}

.newsBar h3 {  /* this is our smaller blue heading style for the news bar */
	color: #556293;
	font-size: 1.1em;
	line-height: 1.2em;
	margin-bottom: -5px;
	font-weight: bold;
}

h3.spacier { margin-top: 35px; } /* used to make spacier sections, as with publications, careers, events etc */
h3.subheaded { margin-bottom: -20px; } /* used to make a h3 with text below it on the contacts page */

h3.profile { /* used as the name for short profiles */
	margin-top: 15px;
	margin-bottom: -15px;
	clear: both;
}
h3.profile img { /* used as the image for short profiles */
	margin-top: 10px;
}

h3.underlined		{ border-bottom: 1px solid #cccccc; text-align: right; }


/* --------- */

h4 {  /* this is our even smaller blue (was green) heading style */
	margin: 15px 0 0 0;
	color: #556293; /* had tried green (color: #9fab17;) but with a 500 weight */
	text-align: left;
	font-weight: 500;
	font-size: 1.25em;
	line-height: 1.2em;
}

h4.subheading { /* used as a subheading to the h3 above (on the contacts page) */
	margin-bottom: 10px;
	font-size: 0.9em;
	font-style: italic;
}




/* --------- */

h5 {  /* used as the heading within the upcoming seminars table */
	margin: 2px 0 -15px 0;
	color: #556293; /* had tried green (color: #9fab17;) but with a 500 weight */
	text-align: left;
	font-weight: 500;
	font-size: 1.25em;
	line-height: 1.2em;
}
p.closer { margin-top: 5px; } /* used to move the first paragraph a bit closer to the heading or location */


/* ------------------------ */
/* --------- links -------- */
/* ------------------------ */

abbr, acronym, dfn {
	cursor: help;
	border-bottom: 1px dashed #556293;
}

a { color: #3333ff; text-decoration: none; }
a:hover { text-decoration: underline; }
a img { border: 0; }


/* ------------------------ */
/* -------- tables -------- */
/* ------------------------ */

td { line-height: 1.3em; }

table.contactTable { margin-top:-15px; width: 100%; } /* used for the staff directory */

/* table.profileTable is being used for the tables within profiles (qualifications, awards) */
table.profileTable { margin-top: 10px; width: 100%; }
table.profileTable th {
	background :#f1f1f1;
	padding: 4px;
	vertical-align: top;
	font-weight: bold;
}
table.profileTable td {
	background :#f8f8f8;
	padding: 4px;
	vertical-align: top;
	text-align: left;
}
table.justified td { /* this is used for the table of events and seminars */
	padding: 4px 12px 4px 8px;
	text-align: justify;
}



/* table.miniProfiles is being used for the table of people pics */
table.miniProfiles { margin-top: 10px; width: 100%; }
table.miniProfiles td {
	width: 50%;
	padding-right: 20px;
	vertical-align: top;
	text-align: left;
	line-height: 1.5em;
	background: #fcfcfc;
	font-size: 0.9em;

	/* the solution for taller cells in IE is as follows. For mozilla, just add the image's bottom margin as below */
	min-height:90px;
	height:auto !important;
	height:90px;
}
table.miniProfiles td img { margin: 3px 5px 10px 3px; }


/* table.media is being used for tables of downloadable content like pdf's */
table.media { margin: 0 10px 0 10px; }
table.media td { padding: 5px 5px 5px 5px; }


table.magnify { /* used to make the anchor links a bit bigger at the top of the research focus page */
	font-size: 1.2em;
}

table.contact { margin-top: 10px; }
table.contact td {
	padding: 10px 14px 10px 4px;
	vertical-align: top;
	text-align: left;
}
table.contact td h3 {
	margin: 0px 0px 8px 0px;
	line-height: 1.0em;
}



/* ------------------------ */
/* ------- dividers ------- */
/* ------------------------ */

div.hr hr { 
	clear: both;
	margin: 0 auto;
	width: 98%;
	text-align: center;
	height: 1px;
	background: #e4b580;
	color: #e4b580;
	border: 0px;
	padding: 0px;
} 

/* --------------------------------------------------- */
/* ----------------- IMAGE SELECTORS ----------------- */
/* --------------------------------------------------- */

.right { /* used on plain img's and on framed div's */
	clear: right;
	float: right;
	margin: 5px 0px 2px 10px;
	/* display: inline; don't need to fix IE double margin problem if no right margin */
}

.left { /* used on plain img's and on framed div's */
	clear: left;
	float: left;
	margin: 5px 10px 2px 0px;
	/* display: inline; don't need to fix IE double margin problem if no left margin */
}

.middle { /* used on plain img's and on framed div's */
	clear: both;
	display: block;
	margin: 5px auto 5px auto;
}

/* ------------------------ */

img { border: none; } /* make images default to borderless unless specified */

img.bordered { border: 1px solid #555555; }

img.framed { /* my old framing technique */
	padding: 1px; background: #aaaaaa;
	border: 2px solid #e0e0e0;
}

img.icon { padding: 2px 4px 0 0; }
img.icon-ref { padding: 5px 4px 0 0; } /* increase padding for icons that appear in a publication reference eg luba */

/* ------------------------ */

.captioned { /* a special div will be created in order to group the img and its p caption */
	padding: 1px; background: #eeeeee;
	border: 1px solid #cccccc;
	text-align: center;
	/* display: inline; don't need to fix IE double margin problem if no left margin */
}

.captioned img { /* the properties of the framed image */
	padding: 1px; background: #aaaaaa;
	border: 1px solid #e0e0e0;
}

.captioned p { /* the properties of the caption */
	margin: 0px 4px 2px 4px;
	color: #444444;
	line-height: 1.4em;
	font-size: 0.7em;
}


/* ----------------------------------------- */
/* ----------------- FORMS ----------------- */
/* ----------------------------------------- */

#username_formId, #identifier_formId { style="width:300"; }


/* --------------------------------------------------- */
/* --------------------- FOOTER ---------------------- */
/* --------------------------------------------------- */

#footer {
	clear: both;
	margin: 0 0 0 0;
	line-height: 2.0em;
	text-align: center;
	font-size: 0.8em;
}

#footer a { color: #555555; }
#footer a:hover { text-decoration: none; }


/* --------------------------------------------------- */
/* -------------------- SPECIALS --------------------- */
/* --------------------------------------------------- */

.hide { }	/* remove for print style sheet */


/* --------------------------------------------------- */
/* ----------------- USEFUL SNIPPETS ----------------- */
/* --------------------------------------------------- */

/* -- setting a minimum height (eg for profiles to ensure the text doesn't creep up) -- */
/* min-height:159px; */
/* height:auto !important; */
/* height:159px; */

/* -- to fix IE's problem with italics widening some block elements -- */
/* -- seemed to be a problem when a profile didn't have an image associated with it -- */
/* overflow: visible; */
/* width: 100%; */

/* -- fix for IE double margin problem ( see http://www.positioniseverything.net/explorer/doubled-margin.html )-- */
/* display: inline; */

img.endIcon { /* used to position the icon (and icons are always floated left) now just used in my demo section */
	padding: 4px 2px 0 8px;
}