/* BASIC TYPOGRAPHY AND DEFAULT STYLES */

html, body, p, ol, ul { /* reset browser-specific defaults */
	border: 0;
	margin: 0;
	padding: 0;
}
html {
  overflow-y: scroll; /* FF fix for scrollbar jump */
}
body { /* set base characteristics of text */
	font-size: 0.875em; /* scale down from browser default (normally 16px) -> 15px?? */
	font-family: 'Times New Roman', Times, Serif; /* TNR has better Greek symbols! CHECK! */
	color: #000; /* default is black text on white background */
	background-color: #fff;
	line-height: 1.33em; /* make room for sub/super scripts */
	text-align: center; /* this centres the container in IE 5* browsers. Text is then set to the left aligned default in the #container div */
}
p { /* Standard (first) paragraph */
  font-size: inherit;
  line-height: inherit;
	margin: 0 0 0 0;
	padding: 0 0;
  text-align: left; /*justify; /* *********************************************** */
/*	border: 1px dotted #666; /* DEBUG */
/*  overflow:hidden; /* stops content overlapping RH floated object TEST */
/*  position:relative; */
}

 /* Increase spacing between particular types of objects */
p + p, table + p, p + div.figure, div.figure + div.figure, div + div.figure {
	margin-top: 0.67em;
}

table + div.figure, div + p, p + div.figure, p + table, div.answer + div.figure, table + table {
  margin-top: 0.67em; /* was 1em */
}


p.answer-label + div.figure, div.answer + p {
  margin-top: 0em; /* was 1em */
}

.bullet {
  position: relative;
  top: 10px; /* shift down to compensate for increased size */
  font-size: 300%;
  color: green;
  vertical-align:baseline;
  padding-top: 2em;
}

input[type=submit],label,select,.pointer {cursor: pointer;}

.MathJax .mtext {font-family: 'Times New Roman', Times, Serif !important}


/* p { border: 1px dashed #000; margin: 1.12em 0 line-height: 1.12em;} */

/* Tips for Elastic layouts 
1. Since the elastic layouts overall sizing is based on the user's default font size, they are more unpredictable. Used correctly, they are also more accessible for those
   that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or
   the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #navigation is given a 70% font size and #moduleContent is given an 85%
   font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/

/* BOUNDING DIV TO ENCLOSE MAIN LAYOUT DIVS */

#container {
	width: 965px; /* set explicit width */
	background: inherit;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}
/* HEADER LAYOUT AND HEADER-SPECIFIC CLASSES */

#header {
  font-family:Arial, Helvetica, sans-serif;
	background: inherit;
	padding: 0.5em 0 0.5em 0;
	border-bottom: 1px solid black;
}
#header h1, #header h2 {
	text-align: center;
	color: purple; /* #666; */
	font-size: 1.5em;
	font-weight: bold;
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplicable space between divs. (A border around the div also works) */
	padding: 10px 0; /* using padding instead of margin keeps the element away from the edges of the header div */
   text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
#header h2 {
	font-size: 1em;
	font-style: italic;
}
#header a, #header a:link, #header a:active, #header a:visited { /* for image & text links to UoR and MMS: don't highlight, except when hovering! */
	text-decoration: none;
	color: inherit;
	border: 0;
}
#header a:hover {
	color: inherit;
}
#header h2 a:hover {
	color: inherit;
	text-decoration: underline;
}
#header table { /* for laying out header titles and images */
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

/* Header menu bar (table version) */
#mainMenu {
	text-align: center;
	background: inherit;/*  border: 1px solid blue;  /* DEBUG */
}

#mainMenu td a {
	background: #bbb;
	color: #000;
	font-weight: bold;
	margin: 0 0 0 4px;
  padding: 2px 10px;
/* text-decoration: none;
	line-height: 1.3em; */
	border: 1px solid black;
}
#mainMenu td a:hover {
	color: #fff;
	background: #369;
/*	border: 1px solid black; */
}
/* NAVIGATION LAYOUT AND NAVIGATION-SPECIFIC CLASSES */

/* Tips for navigation:
1. Be aware that if you set a font-size value on this div, the overall width of the div will be adjusted accordingly.
2. Since we are working in ems, it's best not to use padding on the sidebar itself. It will be added to the width for standards compliant browsers creating an unknown
   actual width. 
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the
   ".twoColElsLtHdr #navigation p" rule.
*/

#sidebar { /* Set base characteristics for sidebar (=margin) */
	font-size: 0.875em; /*0.875em;*/
	line-height: 1.00em; /* assume no sub/superscripts */
	float: left;
	width: 235px; /* was 255 */
  margin: 0px 0 0 0; /* was 0 0 0 5px */
	padding: 0px 5px 5px 5px;
}
#sidebar h1, #sidebar h2, #sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight:300;
	font-size: 1em; /*0.875em;*/
	color: purple;
	line-height: 1.25em;
	margin: 0em 0.5em 0.25em 0;
}
#sidebar h2 {	
  font-size: 0.9375em;
  padding-left: 2ex;
  text-indent: -2ex ;
  margin: 0.5em 0.5em 0.15em 0em;
}
#sidebar h3 {	
  font-size: 0.9375em;
  padding-left: 4ex;
  text-indent: -4ex ;
  margin: 0em 0.5em 0.15em 1.2em;
}

#sidebar ul, #sidebar ol {
	font-size: inherit;
	list-style-position: outside;
	list-style-type: decimal;
	padding: 0 0 0 2em; /* was 2 */
	margin: 0 0 0.5em 0em; /*was 1 */
}
#sidebar ul {
  padding: 0 0 0 1em; /* was 2 */
	margin: 0 0 0.5em 0em; /*was 1 */
	list-style-position: inside; /* was outside */
	list-style-type: none; /* was square */
}
#sidebar a, #sidebar a:link, #sidebar a:visited {
	color: #333;
	text-decoration: none;
}
#sidebar a:hover {
	color: #fff;
	text-decoration: none;
	background: purple;
}
#sidebar img a {
	text-decoration: none;
	border-width:0;
}

#sidebar h1 a, #sidebar h1 a:link, #sidebar h1 a:visited {
	color: purple;
	text-decoration: none;
}
#sidebar h1 a:hover {
	color: white;
	text-decoration: none;
  background: purple;
}

#sidebar #contents-list {overflow-y: auto;}

/*** FOOTER LAYOUT CLASSES = NOT NEEDED NOW ***/

#footer {
/*	display:  none; disable for now */
	/*border-top: 1px solid #000;*/
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	/*background:#DDDDDD;*/
}
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}


/*** INDEX PAGE SPECIFIC CLASSES (put into separate file?) ***/

#indexContent {
  font-family:Arial, Helvetica, sans-serif;
	font-size: 0.875em; /* reduce index area font size for better fit */
	margin: 0px 5px 0 260px; /* offset is 260px = width of sidebar (245px) + 5px left margin + 10px right margin */
	padding: 0;
}
/* Index table controls */

#indexContent .menu-controls { /* wrapper */
	display:none; /* initially hide in case JS not enabled */
	font-size: 0.875em;
	font-weight: bold;
	vertical-align: bottom;
	padding: 0 0 0 0;
	margin: 4px 0;
	width: 100%;
	overflow: hidden; /* to avoid line wrapping */
}
#indexContent .expand-menus, #indexContent .collapse-menus {
	float:right;
	text-align: center;
	color: #006;
	background: #eee;
/*	border: 1px solid #666; */
	padding: 0px 0.5em;
	margin: 0 4px 0 4px;
  
  /* test */
  background: #ffb515 url(../images/overlay.png) repeat-x;
  background: purple url(../images/overlay.png) repeat-x;

	display: inline-block;
	padding: 5px 10px 6px;
  padding: 1px 6px;

/*  font-size: 14px;
	font-weight: bold; */
	margin-right: 2px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer
}
#indexContent .expand-menus:hover, #indexContent .collapse-menus:hover { /* invert colours */
  color: #000; background-color: #96F;

}
#indexContent .info-menus {
	margin: 0 0 0 4px;
	color: #006;
}
/* Index table styles */

#indexTable table {
	width: 100%;
	border: 0;
	padding: 2px;
	margin: 0;
}
#indexTable td, #indexTable th {
	font-size: inherit;
	text-align: left;
	padding: 3px 4px 3px 8px;
	background: #ddf0dd; /* was ddf9dd */
}
#indexTable th {
	background: #CAE8EA;
}
#indexTable .menu-title td {
	font-weight: bold;
	background: #00f;
	color: white;
}
#indexTable a {
	text-decoration: none;
	color: blue;
}
#indexTable a:hover {
	text-decoration: underline;
}
#indexTable .menu-spacer td {
	background: #ffffff;
}
#indexTable .menu-subject td {
	font-size: 1.2em;
	font-weight: bold;
	color: #fff;
	text-align: center;
	background: #009;
}
/* Module link colours */

.hf {
  margin-left: 1em; /* BODGE */
	color:#ee00ee;
}
.ht {
	color:#ee0000;
}
.im {
	color:#dd7700;
}
.mfs {
	color:#0000ee;
}


/*** MODULE CONTENT LAYOUT CLASSES ***/

/* Tips for moduleContent:
1. If you give this #moduleContent div a font-size value different than the #navigation div, the margins of the #moduleContent div will be based on its font-size and the width of the #navigation div will be based on its font-size. You may wish to adjust the values of these divs.
2. The space between the mainContent and navigation is created with the left margin on the mainContent div.  No matter how much content the navigation div contains, the column space will remain. You can remove this left margin if you want the #moduleContent div's text to fill the #navigation space when the content in #navigation ends.
3. To avoid float drop, you may need to test to determine the approximate maximum image/element size since this layout is based on the user's font sizing combined with the values you set. However, if the user has their browser font size set lower than normal, less space will be available in the #moduleContent div than you may see on testing.
4. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs that may occur.
*/

#moduleContent {
	margin: 0px 5px 0 260px; /* offset is 260px = width of sidebar (245px) + 5px left margin + 10px right margin */
	padding: 0 0 0 0;
	font-family: 'Times New Roman', Times, Serif; /* TNR has better Greek symbols! CHECK! */
}

#moduleContent h1, #moduleContent h2, #moduleContent h3, #moduleContent h4, #moduleContent h5 {
  font-family: Arial, Helvetica, Sans-Serif;
  font-weight: bold;
  color: purple;
	line-height: 1.15em;
	margin: 10px 0 10px 0;
	padding: 10px 0 2px 0;
}

#moduleContent h1 {
  clear: right;
	color: #fff;
	background: purple;
	font-size: 1.25em;
	padding: 3px 6px;
/*  border-style: solid;
  border-color: #909 #000 #000 #909; /* lightpurple black black lightpurple */
/*  border-width: 2px; */
  
  -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.6);
	text-shadow: -1px -1px 2px rgba(0,0,0,0.6);
	border-bottom: 1px solid rgba(0,0,0,0.6);
  
  -moz-border-radius: 4px;
	-webkit-border-radius: 4px;

}
#moduleContent h2 {
  /* clear: right;*/
	font-size: 1.1em;
}
#moduleContent h3 {
	font-size: 1em;
	font-style: italic;
}
#moduleContent h4 {
	font-size: 0.9em;
	font-style: italic;
}
#moduleContent h5 {
  color: black;
	font-size: 0.9em;
	font-style: italic;
}




/*** GENERAL MODULE CLASSES (drop #moduleContent ID selector for convenience???) ***/



/* KEEP THESE FROM OLD STUFF */

/* SUB/SUPERSCRIPTS STYLING

- cures line spacing problem (hopefully)

SOURCE = http://www.cs.tut.fi/~jkorpela/www/linespacing.html
*/

sup, sub {
  font-size: 0.7071em; /* default MJ ratio */
  vertical-align: 0;
  position: relative;
/*  background-color:#9999FF;*/
/*  margin: 0 0.33ex;  /* use kerning instead??? */
}
sup { bottom: 1.2ex; }
sub { top: 0.8ex; }

.nabla { 
  font-family: Arial Unicode MS, DejaVu Serif, Linux Libertine, Lucida Sans Unicode;
  font-weight: bold;
}

.there4 { 
  font-family: Arial Unicode MS, DejaVu Serif, Linux Libertine, Lucida Sans Unicode;
  font-size: 1.15em;
  font-weight: bold;
}
 


/* NEW FLAP-SPECIFIC STUFF - TO BE MERGED/OVERRIDE WITH ABOVE */

/* COLOUR MEANINGS

#fe31fb (pink) = TOC internal links and internal links within comments + margin note hand pointer
#ff1213 (red) = Comments
#2d2cfa (blue) = Glossary external link

#2d3030 = (dark greyish) =  equations? IGNORE
#030303 = (v dark grey) = equations IGNORE
#da1354 = (dark red) = atomic weights IGNORE
*/

/* body {width: 700px;}*/

.todo {background-color:#F0F}

/* For labelling stuff in LH margin, like Summary & Acheivements - neat, huh? */
/* NB: doesn't work with right floated figs, etc */

dl.one, dl.dl1 {;}
.one dt, .dl1 dt { font-weight:normal; float: left; width: 1.5em;}
.one dd, .dl1 dd { margin-left: 1.5em; margin-bottom: 0.67em;}

dl.two, dl.dl2 {;}
.two dt, .dl2 dt { font-weight:normal; float: left; width: 1.75em; display:inline}
.two dd, .dl2 dd { margin-left: 1.75em; margin-bottom: 0.67em;}

dl.three, dl.dl3 {;}
.three dt, .dl3 dt { font-weight:normal; float: left; width: 2.5em; display:inline}
.three dd, .dl3 dd { margin-left: 2.5em; margin-bottom: 0.67em;}

dl.four, dl.dl4 {;}
.four dt, dl4 dt { font-weight:normal; float: left; width: 3.5em;}
.four dd, dl4 dd { margin-left: 3.5em; margin-bottom: 0.67em;}

dl.five, dl.dl5 {;}
.four dt, .dl5 dt { font-weight:normal; float: left; width: 5.5em;}
.four dd, .dl5 dd { margin-left: 5.5em; margin-bottom: 0.67em;}

dl.dl12 {;}
.dl12 dt { font-weight:normal; float: left; width: 7em;}
.dl12 dd { margin-left: 7em; margin-bottom: 0.67em;}

ul.none {list-style-type:none;}
ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}
ol.lroman {list-style-type:lower-roman;}
ol.uroman {list-style-type:upper-roman;}
ol.lalpha {list-style-type:lower-alpha;}
ol.ualpha {list-style-type:upper-alpha;}

ul {
  list-style-type:square;
  margin-left:1em; padding-left:1em;
  margin-top: 0.67em;
  margin-bottom:0.67em;
}
ul li {margin-bottom:0.33em;} /* TEST was 0.67em */

ol {margin:0 2em; padding-left:0em;  margin-top: 0.67em; 
  margin-bottom:0.67em; }
ol li {;}

/* REPLACE BY DL method */
p.hang1 { padding-left: 1em; text-indent: -1em;} /* 2 chars, e.g. 13 Blah.. */
p.hang1 .label {float:left; width: 1em;}

p.hang2 { padding-left: 2em; text-indent: -2em;} /* 2 chars, e.g. 13 Blah.. */
p.hang2 .label {float:left; width: 2em;}

p.hang3 { padding-left:3em; text-indent: -3em;} /* 3 chars, e.g. A12 Blah... */
p.hang3 .label {float:left; width: 3em;}

/* LINKS */
/* NB: these use JQuery methods to perform link actions */

.internal-link  {color:#936; font-style:inherited} /* allow bold and/or italic to be used */
.glossary-link  {color:#090; font-style:inherited}
.wikipedia-link {color:#600; font-style:inherited}

/*.internal-link a:link, .internal-link a:visited, .glossary-link a:link, .glossary-link a:visited {text-decoration: none}
.internal-link a:hover, .internal-link a:active, .glossary-link a:hover, .glossary-link a:active {text-decoration: underline} /* THESE WON'T WORK - links are generated by JQ */

.key { /* for disambiguating glossary refs (singular/plural refs should be added as extra anchor names to existing term in Glossary file) */
  background-color:#00FF66; /* DEBUG */
  display: none}
  
/* COSMETIC STYLING */  

.indent {padding-left: 2em;!important} /* default, matches default for equations */
/* for arbitrary indents use  +preambleN span */
.indent1 {padding-left: 1em;!important}
.indent2 {padding-left: 4em;!important} /*CHANGE all instances in html files to (new) indent2 */
.indent3 {padding-left: 3em;!important}
.indent4 {padding-left: 4em;!important}
.indent5 {padding-left: 5em;!important}
.indent6 {padding-left: 6em;!important}
.indent8 {padding-left: 8em;!important}
.indent10 {padding-left: 10em;!important}
.indent12 {padding-left: 12em;!important}
.indent-both {padding-left: 2em;!important; padding-right: 2em;!important;}
.indent2-both {padding-left: 4em;!important; padding-right: 4em;!important;} /* CHANGE as above */

.equation, .equation0 { /* for styling TAGGED html & MathJax equations, else just use .indent */
  display: table;
  max-width: 100%;
/*  background-color: #CF3; DEBUG */
  width: 66%; /*default - override with w25, w33, w50, w75 or w100 as necessary */
 /* padding: 0 2em; /* ADD .noindent when preamble text present - SUPERCEEDED BY EQUATION0 */
 padding-left: 2em;
 margin-right: 2em; /*TEST*/
}
/*div.definition .equation {width: 75%; padding-left:0;} /* to balance space lost on LHS */
.equation0 {padding-left: 0} /* for eqns with preamble text - NEW! */
.noindent { padding-left: 0!important;} /* ADD to .equation when preamble text is present REPLACE BY equation0 */

.preamble1, .preamble, .preamble3, .preamble4, .preamble5, .preamble6, .preamble7,.preamble8, .preamble9,
.preamble10, .preamble11, .preamble12, .preamble13, .preamble14, .preamble15,.preamble16, .preamble17, 
.preamble18, .preamble19, .preamble20, .preamble21, .preamble22, .preamble23, .preamble24, .preamble25 { /* for v aligning introductory text, e.g. 'so ', 'hence', etc. in eqns with neighbouring eqns. or expressions - ONLY FOR P & DIVs [NB DOESN'T WORK WITH IE!!!!] */
  display: inline-block;
 /* background-color:#FC0; */
  min-width: 2em; /* default (to match default .indent) use for 'so' & i.e.', etc */  
}
.preamble1 { min-width: 1em; } /* not used much? */
.preamble3 { min-width: 3em; } /* use for 'and', 'with', 'hence', etc */
.preamble4 { min-width: 4em; } /* use for ? */
.preamble5 { min-width: 5em; } /* use for 'therefore' */
.preamble6 { min-width: 6em; }
.preamble7 { min-width: 7em; }
.preamble8 { min-width: 8em; }
.preamble9 { min-width: 9em; }
.preamble10 { min-width: 10em; }
.preamble11 { min-width: 11em; }
.preamble12 { min-width: 12em; }
.preamble13 { min-width: 13em; }
.preamble14 { min-width: 14em; }
.preamble15 { min-width: 15em; }
.preamble16 { min-width: 16em; }
.preamble17 { min-width: 17em; }
.preamble18 { min-width: 18em; }
.preamble19 { min-width: 19em; }
.preamble20 { min-width: 20em; }
.preamble21 { min-width: 21em; }
.preamble22 { min-width: 22em; }
.preamble23 { min-width: 23em; }
.preamble24 { min-width: 24em; }
.preamble25 { min-width: 25em; }

li span.preamble16 { display: inline-block; width: 16em;} /* TEST */
li span.preamble18 { display: inline-block; width: 18em;} /* TEST */

.spacer, .phantom {white-space:pre-wrap;background:#FF9900;visibility:hidden} /* hides custom spacing elements ( */ 

.tag { /* right-shifts eqn label. Replaces  MathJax \tag{}, which has overlap float bug */
/*  background-color:#CCFF00; */
 display: table-cell;
 text-align: right;
 vertical-align: middle;
 margin: 0 15px; /* TEST was padding */
 white-space: nowrap; /* for e.g. (Eqn 12) */
}

.collect, .consist { /* for things that should be on one line, e.g. question & answers in list form */
/* NB: only needed for stuff that is in danger of being split over a line, so only use as necessary */ 
  white-space: nowrap;
/*  background-color: #9C9; */
}

.half { /* for empty spacer lines in tables */
  text-height: 0em;
}
p.half { /* used to add subtle separation spacing to subsections in answers */
  line-height: 0em; 
}

p.new {padding-top: 2em;} /* adds space above para - for cases where + rules don't apply DOESN'T WORK! */


/*
.maths i, .equation i { /* for simple symbols & equations */
/*  font-family: 'STIXGeneral-Italic', 'Times New Roman', Helvetica;
  font-style:italic;
  font-weight: thinner;
  letter-spacing:0px;
}*/

.question-list2, .question-list3, .question-list4, .question-list5, .question-list6,
.column2, .column3, .column4, .column5, .column6 { /* EXPERIMENT QLx=>>>columnx */
/* For placing multiple objects on same line in columns. NB: may need to follow with <br clear="left">  or add 'cl' to class of following element */
  float: left;
  width: 49%;!important
 /* min-height 1em;  assume single line, mod by adding nl2, etc */
/*  border: thin solid green;*/
  overflow:hidden;
  height: auto;
}
.question-list3, .column3 {
  width: 33%;!important
}
.question-list4, .column4 {
  width: 23%;!important
}
.question-list5, .column5 {
  width: 19%;!important
}
.question-list6, .column6 {
  width: 16%;!important
}

/* bodges to vertical align contents of columns with differing heights */
.nl2 {display: table-cell; vertical-align: middle; height: 3em;} /* empirical values */
.nl3 {display: table-cell; vertical-align: middle; height: 4em;}

/* p don't have top or bottom margins, unless they follow another p, div or table */

.comment, .note { /* Study comment, notes, aside, etc. styling */
  padding: 12px 15px 10px 15px;
  border: 1px solid #CCC;
  background-color:#FFEEEE;
  overflow:hidden; /* stops content overlapping RH floated object */
  position:relative;
  -moz-border-radius: 0 12px 12px 0; /* round corners */
  border-radius: 0 12px 12px 0;
  -moz-border-radius: 12px; /* round ALL corners */
  border-radius: 12px;
  margin: 10px 0;
  /* test */
  -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
.note { /* Notes */
  background-color:#FFC;
}

.head {
  font-style:italic;
	font-weight: bold;
	margin-right: 4px;
	position: relative; 
/*  padding: 2px 6px;
  -moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-box-shadow: -1px -1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: -1px -1px 3px rgba(0,0,0,0.6);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);*/
}
.comment .head { color: #600;}
.example .head { color:purple;}
.note .head { color:#600;}
.margin-note .head { color:#000099;}

div.question .comment, div.answer .comment, div.example .comment { /* modify when in Q or A div */
  border-left: 1px solid #CCC; 
  -moz-border-radius: 6px;
  border-radius: 6px;
}




p2.definition, div2.definition { /* New definition & note style - use for grey boxed stuff, etc. */
  padding: 10px 15px;
  border: 0px solid #CCC;
  border-left: 8px solid purple;
  background-color:#EEE;
  margin: 0.5em 0;
  overflow:hidden; /* stops content overlapping RH floated object */
  position:relative;
  -moz-border-radius: 0 12px 12px 0; /* round corners */
  border-radius: 0 12px 12px 0;
  margin: 10px 0;
  /* test */
  -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

p.definition, div.definition, ul.definition, p.definition2, div.definition2 { /* TEST */
  padding: 10px 15px;
  border: 1px solid #CCC;
  background-color:#EFF;
  margin: 0.5em 0;
  overflow:hidden; /* stops content overlapping RH floated object? */
  position:relative;
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
p.definition2, div.definition2, ul.definition, ol.definition, dd.definition { /* used when embedded in lists, etc */
   margin-left: 2em;
}


div.question .definition, div.answer .definition, div.example .definition { /* modify LH edge when in Q or A div */
  border-left: 1px solid purple; 
/*  -moz-border-radius: 12px;
  border-radius: 12px;*/
}



div.question .note, div.answer .note, div.example .note { /* modify when in Q or A div */
  border-left: 1px solid #600; 
  -moz-border-radius: 6px;
  border-radius: 6px;
}

p.reference, div.reference { /* not used? */
  font-style: italic;
  padding: 10px 15px;  
  border-left: 8px solid #093;
  background-color: #FF9;
  margin: 0.5em 0;
  overflow:hidden; /* stops content overlapping RH floated object */
  position:relative;
  -moz-border-radius: 0 15px 15px 0; /* round corners at TL & TR */
  border-radius: 0 15px 15px 0;
  margin: 10px 0;  
}
p.reference {;} /*  4 future tuning */

/*span.question-label*/

.grey-box2 /* SUPERCEEDED BY DEFINITION */
{
  border: #999 2px solid;
  margin: 0.5em 0;
  padding: 0.5em 1em; 
}



.flape { /* for formatting FLAP equations NOT USED */ 
  font-family: STIXGeneral, Times, Serif;
  margin: 1em 6em 1em 4.5em;
  color:purple; /* for debugging */
}

p.module-title {color:purple;}

/* NB: 'pop' is actually 'seed'! */

div.question, div.exit-question, div.pop-question,
div.answer,   div.exit-answer,   div.pop-answer,   div.example { /* 4 future use */
/* BUG! adding cn, cr etc to questions causes jsquery triggers to stop working. Dunno why.. FIXED */
  clear: both; /* REMOVE THIS? */
  font-size: 0.975em; /* was 0.9em */
  line-height: 1.25em;
  padding: 5px 15px 10px 15px; /* was 10 15 */
  margin: 10px 0;
  border: 2px solid #333;
  -moz-border-radius: 15px 15px 0 0; /* round corners at TL & TR */
  border-radius: 15px 15px 0 0;
  -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
	-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
  
  overflow: hidden; /* force wrap of all content DNHIW */
  width: auto; /* TEST */
  height: auto; /*TEST*/
}

div.answer, div.exit-answer, div.pop-answer { /* invert border */
  border-top: 2px solid #333;
  margin: -12px 0 10px 0; /* overlap bottom border of question by 1 pix */
  -moz-border-radius: 0 0 15px 15px;  /* round corners at BL & BR */
  border-radius: 0 0 15px 15px;
}

div.question p, div.exit-question p, div.pop-question p,
div.answer p,  div.exit-answer p,   div.pop-answer p,   div.example p {
  margin: 0.5em 0; 
  line-height: inherit;
}

div.pop-question, div.pop-answer { /* enables star symbols to be placed in first line */
  padding-left: 2.23em; /*value determined empirically */
}
p.star {text-indent: -1.13em;} /* for first line of pop question & answers */

.peekaboo { /* for quiz items. Initially hidden by setting text colour to default table b/g */
color:#f6f6f6;
background-color:#f6f6f6;
}
div.example {
  border: 2px solid purple;
  -moz-border-radius: 15px 15px 15px 15px; /* round all corners */
  border-radius: 15px 15px 15px 15px;
  -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
	-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}
#moduleContent div.example h3 {margin-top: 0}

div.margin-note {
  width: 220px;
  float: left; /* force div to expand to fully contain contents, esp. figures */
  padding: 6px;
  margin: 10px 0;
  border: #00F solid 1px;
/*  border-right:#00F solid 4px; */
  -moz-border-radius: 5px 5px 5px 5px; /* round corners at TR & BR */
  border-radius: 5px 5px 5px 5px;
  -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
	-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);

}
div.margin-note p {margin: 0; text-align:left;}
div.margin-note p+p {margin-top: 6px; text-align:left;}

div.margin-note .indent {padding-left:1em;}

.question-label, .answer-label {
  position: relative;
  top:0;left:0;
  font-weight:bold;
  margin-right:0.33em; /* for future tuning */
}


p.flap-toc {font-size: 9pt; color: purple; margin:3px 0} /* replaced by h1/h2 in composite */
p.flap-toc a:link {text-decoration:none; color: purple}
p.flap-toc a:hover {text-decoration:underline; color: red}

/* Figures and captions */
/* Set figure div width/alignment as appropriate, image will auto scale to fit within it */ 
/* NB: figure div width <= 678 to fit into module div, <= 645 to fit into example etc. box div, and <= 644 to fit into answer div (allows for image border=1px) - REDUCE BY 20px to allow for padding */

.figlet { /* for small borderless figures in paras (located at bottom) */
  display:inline;
  margin: 0 0 0 0;
  background-color:#0FF;
  background:transparent;
}

div.figpopout { /*  for popout figures */
margin:10px;
overflow: hidden;

}
div.figpopout img {max-width:100%; max-height:100%; margin:0; margin-bottom:10px;}
div.figpopout p {text-align:left;font-size:normal; margin:0; margin-bottom: 0; border-top:thin dotted #999;
}

div.figure, div.figr { /* Normal figures: adjust alignment using figl/figc/figleaf */
  clear: right; /* default: can be overridden with cn, cb, cl, e.g. class="figure figl cn" */
  float: right; /* default: can be overridden with fn, fr */
  width: 200px; /* overridable in HTML code using style (MAX = 678, 645 in boxes?) */
  margin: 6px 0 6px 16px; /* override using figl/figc/figleaf */
  padding: 10px;
  border: 1px solid #666;
  background-color:#FFF;
  background:transparent;
  -moz-border-radius: 5px;
  border-radius: 5px;
 	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
div.figl {
  float:left!important;
  margin: 6px 16px 6px 0px!important;
}
div.figc { /* intermediate figure divs */
  float:left!important; /* must be floated to remain an in-line element */
  margin: 6px 0!important; /* was 6px auto* SET MARGIN EXPLICITLY style="margin-right: xpx!important */
}
.figleaf {margin: 6px 0px!important;} /* for putting horiz figs next to each other */
.figleaf6 {margin: 6px 6px!important;} /* for putting horiz figs close to each other */

div.figure img {max-width:100%; max-height:100%; margin-bottom:5px;}
div.figure p {text-align:left;font-size:smaller; margin-bottom: 0; border-top:thin dotted #999;
}
div.figure.centred { /* not sure this works */
  float:none!important; /* (can't centre floated objects!) */
  margin-left:auto!important; 
  margin-right:auto!important;
}

.flap-table
{
background-color: #f6f6f6;
/* background:transparent;*/
clear: right; /* defaults: can be overridden with cn, fr, centred, etc*/
float: right;
width:1%;
border: 1px solid  #999;

border-collapse:collapse;
white-space:nowrap;
/* border-bottom: #999 thin solid;*/
text-align: center;
margin: 4px 0 10px 20px; /* was 8px 0 10px 20px; */
	    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
	    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
      
margin: 0.67em 0 0.67em 16px; /*TEST*/      
}

.flap-table.fl {float: left; margin: 0.67em 16px 0.67em 0; clear: left;}

table.centre {
    margin-left:auto; 
    margin-right:auto;
}

.wrap {white-space:normal;!important}
.nw {white-space:nowrap;!important}

.flap-table caption
{
  background-color: #fff;
  background:transparent; 
/*  border: 0px solid  #999; */
  font-size:small; /* was 0.9em */
  text-align: left;
  white-space: normal; /*TEST fits text according to width of table data - override by nw???? */
  padding: 0px 6px 2px 6px;
  /*	    -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.6);
	    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.6);*/
}
.flap-table caption .nw {white-space:nowrap;!important} /* DOESN'T WORK! (Use nw span around contents) */

.flap-table td, .flap-table th 
{
font-size: small; /* was 0.8em */
padding:2px 6px 2px 6px; /* was 0 6 0 6 EXPT */
vertical-align:top; /*CHECK*/
}
.flap-table th 
{
font-weight:normal;
padding-top:4px;
padding-bottom:3px;
border-top: #999 thin solid;
border-bottom: #999 thin solid;
}
.flap-table .top-bar {
  border-top: #999 thin solid;
}
.flap-table .bottom-bar {
  border-bottom: #999 thin solid;
}
.flap-table .bottom-bar2 {
  border-bottom: #999 2.5px solid;
}
.flap-table .left-bar {
  border-left: #999 thin solid;
}
.flap-table .left-bar2 {
  border-left: #999 2.5px solid;
}
.flap-table .right-bar {
  border-right: #999 thin solid;
}
.flap-table .middle 
{
  vertical-align:middle;!important
}

.simple .middle{
  vertical-align:middle;!important
}

/* Need !important to override specificity when added to existing classes */
.cb {clear:both;!important}
.cr {clear:right;!important}
.cl {clear:left;!important}
.cn {clear:none!important;}
.fl {float:left;!important}
.fr {float:right;!important}
.fn {float:none;!important}

/* ARE THESE ACTUALLY NEEDED? YES, if fig floated on right */
.w10 {width: 10%;!important}
.w20 {width: 20%;!important}
.w25 {width: 24%;!important}
.w30 {width: 30%;!important}
.w33 {width: 32%;!important}
.w40 {width: 39%;!important}
.w45 {width: 44%;!important}
.w50 {width: 49%;!important}
.w55 {width: 54%;!important}
.w60 {width: 60%;!important}
.w67 {width: 66%;!important} /*DEFAULT */
.w70 {width: 70%;!important}
.w75 {width: 74%;!important}
.w80 {width: 79%;!important}
.w90 {width: 89%;!important}
.w100 {width: 99%;!important}

.clear-floats { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.link-mn, .link-mn:visited { /* replaced margin note hand pointer symbol by styled 'i' */
  color: white;
  background-color: #0033CC;
  font-size: larger;
  font-style:italic;
  font-weight: bold;
  padding: 0px 6px;
  -moz-border-radius: 5px 5px 5px 5px; /* round corners */
  border-radius: 5px 5px 5px 5px;
  
  /* TEST */
  
  	background: #0033CC url(../images/overlay.png) repeat-x;
	    display: inline-block;
	 /*   padding: 5px 10px 6px; */
	/*	font-size: 14px; */
		font-weight: bold;
		margin-right: 4px;
	    color: #fff;
	    text-decoration: none;
	    -moz-border-radius: 6px;
	    -webkit-border-radius: 6px;
	    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	    text-shadow: -1px -1px 1px rgba(0,0,0,0.25);
	    border-bottom: 1px solid rgba(0,0,0,0.25);
	    position: relative;
	    cursor: pointer;
      text-indent: 0; /* necessary if on 1st line of seed questions */
  
}
.link-mn:hover { color: #fff; background-color: #0099ee; }
.tag .link-mn { /* move right when in tag span */
 margin-right:-1.2em;  /* empirically derived value */
}

.home, .home:visited {
  float: right;
  color: white;
  text-decoration: none;
  text-shadow: -1px -1px 2px rgba(0,0,0,0.5);
	position: relative;
  cursor: pointer
}
.home:hover {
  color:#FF0;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* specific stuff for m1_4 */
table.simple {border-collapse:collapse; margin:0.67em 0; margin-left:2em;}
table.simple td {text-align:left; vertical-align:top; padding:2px 4px}

table.long-division {border-collapse:collapse; margin:0.67em 0;}
table.long-division td {text-align:center; padding:2px 4px}
table.long-division td.al {text-align:left;}
table.long-division td.ar {text-align:right;}
table.long-division td.ul {border-bottom:1px solid grey;}
table.long-division td.dividend {border-left:1px solid grey;border-top:1px solid grey}

/* other table stuff */
table.centred, table.ac {
  margin-left:auto; 
  margin-right:auto;
}
  
table td.al {text-align:left;}
table td.ar {text-align:right;}

.ac {text-align:center;} /* does other content, not just tables? */
.al {text-align:left;}
.ar {text-align:right;}

table .bl {border-left:1px solid grey;}

p.P14 {margin: 4.0px 0.0px 4.0px 0.0px; font: 12.0pt Times; background-color:#CCCC66} /* Loose figure captions & Tables + dross */

/* STICKY DIV STYLING */

#sticky-anchor.stick  {
	position:fixed;
	top:0;
}

.highlighted {
  background-color:#eeF;
}

.underlined {
  text-decoration:underline;
}

.underdotted {
  border-bottom-style:dotted;
  border-bottom-width:thin;
}

/* Used in styling component files */
h1 {font-size: 14pt; font-weight: bold; margin: 10px 0 2px 0}
h2 {font-size: 13pt; font-weight: bold; color: purple;  margin: 10px 0 2px 0}
h3 {font-size: 12pt; font-weight: bold; color: purple; margin: 10px 0 2px 0}
h4 {font-size: 10pt; font-weight: bold; color: brown; margin: 10px 0 2px 0}

.times {font: "Times"; color: red;}

.button, .button:visited { /* Nice buttons! */
  background: #ffb515 url(../images/overlay.png) repeat-x;
  background: #60F url(../images/overlay.png) repeat-x;

	display: inline-block;
	padding: 0.33em 0.75em 0.4em; /* was 5 10 6px */
  padding: 0.1em 0.75em; /* was 2 10px */

  font-size: inherit; /* was 14pt */
	font-weight: bold;
	margin: 0.2em 0.75em; /* was R=10px */
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer
}
	
.button:visited:hover, .button:hover {
   color: #fff; background-color: #fc9200;background-color: #93F;
}
  
.copyright {
    font-size: 0.67em; 
}
#logos {
margin: 10px 0;
}

.hidden {display: none;}
.query {background-color: #F6F;}

.p11 {background-color: #FF0;}

.greybg { background-color: #CCC}

.hint { color:#630}

.preambledefunct { /* for introductory text, e.g. 'so ', 'therefore ' on same line as eqn. */
/* CHECK THIS IS ACTUALLY DEFUNCT - MIGHT BE USED IN MULTILINE EQNS? */
  display: table-cell;
  text-align: left;
  vertical-align:middle;
  white-space:nowrap;
  width: 2em;
  max-width: 20em;
  min-width: 2em; /* try to force eqn to mimic normal indent */  
}

sup.hat { /* for upright capitals, e.g. angle symbols */
   font-weight:bold;
   text-align:center; /*TEST*/
   margin-left: -1.6667ex;
   margin-right:0.5ex;
   vertical-align : 0.3333em;
}
sup.unit-vector { /* unit vectors (bold italicised lc) */
   font-weight:normal;
   text-align:center; /*TEST*/
   margin-left: -1ex;
   margin-right:0.5ex;
   vertical-align : 0em;
}
sub.tilde { /* twiddle vector symbol (italicised lc NO DESCENDER) (use for over-bar too?) */
   font-weight:bold;
   text-align:center; /*TEST*/
   margin-left: -1.5ex;
   margin-right:0.5ex;
   vertical-align : -0.25em;
}
sup.bar { /* over bar symbol (italicised lc NO DESCENDER use _) */
   font-weight:bold;
   text-align:center; /*TEST*/
   margin-left: -1.5ex;
   margin-right:0.5ex;
   vertical-align : 0.25em;
}

sub.z {left:-1.2ex; margin-right: -1.2ex; vertical-align : -0.25em;} /* for atomic numbers */
sub.zz {left:-2.4ex; margin-right: -2.4ex; vertical-align : -0.25em;}
sub.zzz {left:-3.6ex; margin-right: -3.6ex; vertical-align : -0.25em;}


.red {color:#FF0000;}
.smaller {font-size: smaller;}
.wee {font-size: 1px;}
.big0 { font-size:large;vertical-align:0%} /* for brackets */
.big { font-size:large;vertical-align:-15%} /* for descenders? */
.bigger { font-size:x-large;vertical-align:-15%}
sup.left {left:-0.4em; margin-right: -0.33em} /* bodge to shift (superscript) leftwards when subscript also present to mimic MathJax style - for ITALICISED parent char */
sup.leftup {left:-0.5em; margin-right: -0.33em} /* bodge to shift (superscript) leftwards when subscript also present to mimic MathJax style - for UPRIGHT parent char */

.arial {font-family:Arial, Helvetica, sans-serif}