/*************************************************************************
*	stats-common.css - presentation style sheet
* ------------------------------------------------------------------------
*	D.C.Stone September 30th 2011
* ------------------------------------------------------------------------
*	This style sheet is used for presentation.  It (or its equivalent)
*	should be imported immediately after any layout or menu style sheets.
*	Use this to overide defaults in layout or menu style sheets, and add
*	any additional presentational rules for the web page
**************************************************************************/

/**	Change the appearance of heading elements **/

h1, h2, h3, h4 {
	font-family: Arial, Helvetica, sans-serif;
	border: 0;
	padding: 0.3em 0;
	margin: 1px;
}
h2, h3, h4 { font-style: italic; }
h1 { 
	font-size: 150%;
	padding: 0.5em;
}
h2 { font-size: 125%; }
h3 { font-size: 110%; }

div.page-content h3 {
	border-top: 1px solid #cccccc;
	padding-top: 0.5em;
	margin-top: 0;
}
div.page-sidebar-right h3 {
	padding-bottom: 0.3em;
}

/** Change the appearance of definition lists etc **/

dt { 
	font-weight: bold;
	font-size: 100%;
 }
dd {
	font-size: 95%;			/** Slightly smaller than the term **/
	padding-bottom: 0.5em;	/** Leave some space before the next term **/
}

.page-content ol, .page-content ul {
	overflow: hidden;		/** ensures that list item markers don't overlap floats **/
}
li { padding-bottom: 0.3em }	/** force some list item separation **/

/** Image definitions **/
img {
	border: 0;
	margin: 0;
	padding: 0;
}

/** Float an img left within an enclosing div, p, etc. **/
img.image-left {
	border-right: 0.5em solid #FFFFFF;
	border-bottom: 0.5em solid #FFFFFF;
	float: left;
}

/** Over-ride the border colour for the footer **/
.page-footer img.image-left { border-color: #999999 }

img.image-right {
	border-left: 0.5em solid white;
	border-bottom: 0.5em solid white;
	float: right;
}

/** images used for math elements in paragraph text need to align properly! **/

.page-content p img { vertical-align: bottom }

/** Generic text alignment and decoration **/

.centred { text-align: center }
.underline { border-bottom: 1px solid }

/** Table definitions **/

/** Note: This would be easier using border-collapse: collapse.
	However, a bug in FireFox's handling means that if the table has left
		and right borders (as this does), all four borders magically end
		up thicker than specified. The following work-around is fine in
		all modern browsers, but the td+td breaks for IE <= 6 (no
		surprise there...
**/
table.centred {
	border: 2px solid #666666;
	border-spacing: 0;
	caption-side: bottom;
	margin: 0 auto;
	/*	text-align: center; is already defined for .centred */
}
th, td { 
	padding: 0.3em;
	
}
th {
	border-bottom: solid 2px #666666;
	background-color: #f9f9ff;
}



/** Define appearance of different text elements **/

sup, sub {
	position: relative;
	vertical-align: 0;
	font-size: 75%;
}
sub { top: 0.4em; }
sup { bottom: 0.4em; }

var {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
}

.equation { text-align: center }
.equation var { font-style: italic }

/** Three- and two-column layout themes/overides **/
.page-footer { 
	padding: 0.5em;
	font-size: 80%;
}

/** General-purpose class for centring content within the parent container **/
.centre-inside {
	padding: 0.5em;
	text-align: center;
}
.right-inside {
	padding: 0.5em;
	text-align: right;
}

/** General-purpose class for extra indenting **/
.indent-left { padding-left: 1em }

/** This is for side notes, foot notes, end notes, comments, etc. **/
.note-text {
	font-size: 80%;
	font-style:italic;
}

/** Suppress text decoration on links, etc. **/
.no-deco { text-decoration: none }
.no-deco img { border: 0 }

/** Section map class using definition lists to display outline of 	**/
/** the section, used on intro page for each section				**/
dl.sectionmap { padding-left: 1em }
dl.sectionmap dt { font-size: 90%; }
dl.sectionmap dd {
	font-size: 85%;
	margin-left: 1.5em
}

#beaker {
	background-color: #FFFFFF;
	background-image: url(../images/beaker.png);
	background-repeat: no-repeat;
	background-position: center;
}