/* 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) -> 14px?? */
	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 centers 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: 1em 0 1em 0; /* adds 1em spacing at top & bottom */
	padding: 0 0;
}
 /* 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 */
}

ul, ol {
  padding: 0.25em 0 1em 3em;
  line-height: 1.66em; /* was 1.33em */
}

.edited { /* to indicate where content of HTML file differs significantly from that of PDF file, errors/typos or extra text added */
 /* background:#FDD; */
}

.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: helvetica, arial, verdana, sans-serif; !important}

.collapsibleList li{
  list-style-image:url('button.png');
  cursor:auto;
}

li.collapsibleListOpen{
  list-style-image:url('button-open.png');
  cursor:pointer;
}

li.collapsibleListClosed{
  list-style-image:url('button-closed.png');
  cursor:pointer;
}

/* 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: #FFFFFF;
	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 0;
	border-bottom: 1px solid purple;
}
#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.
*/

#scroller {
  margin: 10px 0 0 0;
  width: 245px; /* forces fixed width? */
}

#sidebar {
  font-family: Arial, Helvetica, sans-serif;
	font-size: 0.875em; /* 12pt? */
	line-height: 1.2em; /* assume no sub/superscripts */
	float: left;
	width: 235px; /* was 255 */
  margin: 0 0 0 0; /* was 0 0 0 5px */
	padding: 0px 5px 5px 5px;
}

#sidebar p { /* for blurb */
  font-size: 0.875em; /* 12pt? */
  color: #666;
}
#sidebar h1, #sidebar h2, #sidebar h3 {
	font-family: Arial, Helvetica, sans-serif;
  font-weight:300;
	font-size: 1em; /* was 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: 1em 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: 0.875em;
  color: #666;
	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: square; /* was square */
}
#sidebar ul li {line-height:1.2em; margin-bottom: 0.5em;}

#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; margin-bottom: 0.5em}
#sidebar .box { /* box to compartmentalise and highlight individual contents of sidebar USED? */
	border: thin solid #666;
	padding: 0.25em 0.5em;
}
#sticky {
	-moz-border-radius: 0.5ex; /* for 'sticky' JS code to keep navigation div always visible */
	-webkit-border-radius: 0.5ex;
	border-radius: 0.5ex;
}
#sticky.stick { /* for 'sticky' JS code to keep navigation div always visible */
	-moz-border-radius: 0 0 0.5em 0.5em;
	-webkit-border-radius: 0 0 0.5em 0.5em;
	border-radius: 0 0 0.5em 0.5em;
	position: fixed;
	top: 0;
	z-index: 10000;
}
/*** FOOTER LAYOUT CLASSES ***/

#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? YES, or put in index file...) ***/

#indexContent {
	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 p { /* wrapper */
	display:none; /* initially hide in case JS not enabled */
	font-size: 0.875em;
	font-weight: bold;
	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;
}
#indexContent .expand-menus:hover, #indexContent .collapse-menus:hover { /* invert colours */
	color: #eee;
	background: #369;
	border: 1px solid #fff;
}
#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: #66f; 
	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 {
	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: 10px 0px 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 {
	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 {
	font-size: 1.1em;
}
#moduleContent h3 {
	font-size: 1em;
	font-weight: bold;
	font-style: italic;
}
#moduleContent p, #moduleContent p.first {
	font-size: inherit; /* TEST */
  line-height: 1.3em; /*inherit; /* TEST - DOESN'T WORK  was 1.33em*/
	margin: 0.5em 0 0.5em 0;
  	margin: 0em 0 0.5em 0; /*TEST*/
	padding: 0 0 0 0; /* why not apply to margin??? */
}

#moduleContent p + p, #moduleContent div + p {
	font-size: inherit; /* TEST */
  line-height: 1.3em; /*inherit; /* TEST - DOESN'T WORK  was 1.33em*/
	margin: 0.75em 0 0.75em 0; /*TEST*/
	padding: 0 0 0 0; /* why not apply to margin??? */
}

#moduleContent p.indent {
  padding: 0 2em;
}

/* Figures and captions */
/* Set figure div width/alignment as appropriate, image will auto scale to fit within it */ 
/* NB: figure div width <= 698 to fit into module div, <= 668 to fit into example etc. box div, and <= 638 to fit into answer div (allows for image border=1px) OR USE % value!!! */
/* NNB: add right/left to class=figure to shift to left/right add 'centred' to centre figure/image ??????*/

#moduleContent .figure {
 /* text-align: center; /* centres image and caption - needed? */
  border: 0px grey solid;
  margin: 0em auto; /*TEST to centre within parent */
  padding: 0em;
  padding-bottom: 0.75em; /* to match paragraph and other divs */
}
#moduleContent .figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  margin-top: 6px;
  text-indent: 0;
}
#moduleContent .figure img  {
  vertical-align:top; /*TEST*/
 width: 100%; /*TEST auto-scales image to fit containing figure div - DOESN'T WORK! */
 border: 1px grey solid; 
 margin: 0px;
}

#moduleContent img {max-width:100%; max-height:100%; border: 1px solid #666;}

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

/*** LAYOUT ***/

/* Tables */

table { /* to match paragraphs */
  padding-bottom: 0.75em;
}

table.tabulated { /* simple decorated styles = highlighted header row, all content centred */
	border-collapse: collapse;
	background: inherit; /* was white: attempt to use parent's bg? */
	margin: 0.25em auto 0.5em auto;
	border: 1px solid black;
}
table.tabulated td, table.tabulated th {
	padding: 3px 6px;
	text-align: inherit; /*TEST*/
	border: 1px solid black;
}
table.tabulated th { /* modest highlighting on header row */
	font-weight: bold;
	text-align: inherit; /*TEST*/
	background: #faebba;
}

table.list { /* simple decorated styles = highlighted right-aligned header col, other cols left-aligned */
	border-collapse: collapse;
	background: #ffffff;
	margin: 0.25em auto 0.5em auto;
	border: 1px solid black;
	
}
table.list td, table.list th {
	padding: 3px 6px;
/*	text-align: left; */
	border: 1px solid black;
}
table.list th { /* modest highlighting on header column (=1st) */
	font-weight: bold;
	text-align: right;
	background: #faebba;
}

table.plain { /* simple table */
	border-collapse: collapse;
  margin-top: 0.25em;
  margin-bottom: 0.5em;
  /*0em auto 0.75em; */
	/*background: #DAF043; /* DEBUG */
}
table.plain td, table.plain th {
  border: 1px solid black;
	padding: 3px 6px;
	line-height: 1.5em;
/*	text-align: left; */
}
table.plain th { /* use for ordinal col */
  font-weight: bold;
	/*text-align: right;*/
}

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

.align-right {
 /* color: purple; */
   text-align: right!important;  
}
.align-left {
 /* color: purple; */
   text-align: left!important; 
}
.align-centre {
  /* background: lightgreen; */
   text-align: center!important; 
}

.centred { /* to horizontally centre anything BUT tables */
	text-align: center;
/*	background: #96F; */
}

table.centred { /* to horizontally centre tables consistently (was .centred table!!!) */
  margin-left: auto;
  margin-right: auto;
 /* text-align: center; /* default alignment for contents - is this needed? */
}


/* NB: balanced to be replaced by aligned */
table.balanced, table.aligned { /* simple plain (i.e. invisible) styles for right-aligned vs left-aligned equation sequences, min width */
	border-collapse: collapse;
	/*text-align:center;*/
  vertical-align: baseline; /*TEST was middle*/
/*	margin: 0.5em auto 0.75em; */ /*BIGGG TESTTTT */
  margin-top: 0.5em;
  margin-bottom: 0.75em;
  padding: 0; /* TEST */
/*background: #FCF; /* DEBUG */
}
table.balanced td, table.balanced th, table.aligned td, table.aligned th {
  /*border: 1px dotted green;  DEBUG */
  vertical-align: middle; /*TEST*/
	padding: 2px 0.25em 2px 0.25em;
/*  text-align: left; DISABLED*/
}
table.balanced th, table.aligned th {
  font-weight: normal; /* overrides default th style? */
/*  text-align: right; DISABLED */
	/*color: red; DEBUG*/
}

table.numbered { /* simple plain (i.e. invisible) styles for laying out numbered equations, max width */
	width: 100%; /* NUMBERED EQUATIONS MUST BE FULL WIDTH */
	border-collapse:collapse; /* single line border (if required) */
	margin: 0 0 0.75em 0;
	text-align: center;
/*	background: #EEB82C;  DEBUG */
}
table.numbered td, table.numbered th {
	text-align: center;
	padding: 0 0.25em;
	/*border: 1px black dashed;  DEBUG */
}
table.numbered th {
  width: 1em; /* make as narrow as poss. */
	text-align: right;
  vertical-align: bottom;
  font-weight: normal;
	padding-left: 3em; /* give eq no plenty of space on left */
}

table.sandbox, table.gravelbox { /* sand coloured b/g boxes - use table to get it to auto wrap around content */
	border-collapse: collapse;
  margin: 20px auto 20px; /* to centre it within containing element */
  line-height: 150%; /* increase in case multiple lines are used */
  padding: 0;
  background: #faebba;
  border-width: 1px;
  border-style: solid;
	border-color: lightgray black black lightgray; 
}

table.sandbox th, table.sandbox td { /* th = top row - used to optimise content spacing */
  font-weight: inherit;
  font-size: inherit;
  text-align: inherit;
  padding: 0.75em 2em 0.5em 2em; 
  padding: 0.5em 1em 0.25em 1em; 
}
table.sandbox td { /* all other rows */
  padding: 0.5em 2em 0.75em 2em;
  padding: 0.25em 1em 0.5em 1em;
}

table.gravelbox th, table.gravelbox td { /* th = top row - used to optimise content spacing - USE FOR ??? MODULE */
  font-weight: bolder;
  font-size: larger;
  padding: 0.75em 2em 0.5em 2em; /* increase spacing - do we need to? */
}
table.gravelbox td { /* all other rows */
  color: green;
  padding: 0.5em 2em 0.75em 2em;
}


ul.sandbox {
  list-style-position: outside;
  border: 1px solid black;
  border-color: lightgray black black lightgray; 
  padding: 15px 15px 10px 30px;
  margin: 20px 20px 20px 20px;
  background-color:#faebba; 
}
ul.sandbox li { 
  color: purple;
  padding-left: 0.75em; 
  margin-bottom: .5em; 
}

table.blackbox { /* simple black bordered 'box' - uses table to get it to auto wrap around content. Like sandbox but simpler */
	border-collapse: collapse;
  margin: 0.5em auto 0.75em; /* to centre it within containing element - need to do this???*/
  padding: 0;
/*  text-align: center; */
  border: 1px solid black;
 
}
table.blackbox th { /* top row - used to optimise content spacing */
  font-weight: normal; /* override default */
  padding: 0.55em 1em 0.25em 1em;
}
table.blackbox td { /* all other rows */
  padding: 0.25em 1em 0.5em 1em;
}



/*** BOX STYLES FOR EXAMPLES, ETC. ***/

/* Primary boxes, max width */

.example-box, .exercise-box, .quiz-box, .comment-box, .key-point-box, proof-box { /* define common attributes */
	margin: 0em 0em 1.5em 0px; /* require preceding objects, e.g. a heading, paragraph, or another box to provide margin at top */
	padding: 0.25em 0.75em 0.25em 0.75em; 
  padding: 10px 10px 10px 10px;
  border: 1px black solid;
  border-color: lightgray black black lightgray;
	background: #ffffcc; /* for example box */
  
  -moz-border-radius: 6px; /* TEST */
	-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);
}
.exercise-box {
	background: #ddffdd;
}
.quiz-box {
	background: #ddddff;
}
.comment-box { /* for comments, notes, etc. */
	background: #ffdddd;
  -moz-border-radius: 6px; /* TEST */
	-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);
}
.key-point-box, proof-box { /* for key points and proofs */
	background: #eeeeee;
  -moz-border-radius: 6px; /* TEST */
	-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);
}
.key-point-box dt { /* not used? */
	font-weight: bold;
	text-decoration: underline;
	margin-top: -0.5em;
	margin-bottom: 1em;
  -moz-border-radius: 6px; /* TEST */
	-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);
}
.example-box ol, .exercise-box ol, .quiz-box ol, .comment-box ol, .key-point-box ol { /* common list styles for all boxes SUPERCEDE BY QUESTION DIV */
	padding-top: 0;
	margin-top: 0em;
	margin-left: 0em; /*TEST*/
	padding-left: 6em;
	padding-right: 2em;
	list-style: lower-alpha outside;
	/*border: 1px dotted #666; DEBUG*/
}
.example-box li, .exercise-box li, .quiz-box li, .comment-box li, .key-point-box li { /* superceeded */
	font-size: inherit;
	line-height: 1.5em;
}
/* Secondary boxes, i.e. contained within primary boxes */
/* NB: solution-boxes come after individual questions (i.e. contained within li elements), others come at end of list, so have to be indented more */

.solution-box, .explanation-box, .quiz-solution-box, .answer-box { /* try replacing all others by answer-box? */
/* DEBUG	display: none; /* hide initially */
	margin: 0.25em 0em 1.0em 0em; /*3rd was 0.75em */
  margin: 10px 0 10px 0;
	padding: 0.5em 0.75em 0.5em 0.75em;
	padding: 10px 10px 10px 10px;

  border: 1px solid lightgray;
	border-color: black lightgray lightgray black;
	background: #ffffff;
}
.explanation-box, .quiz-solution-box, .answer-box { /* indent rightwards to ~match other types of box */
	margin: 0.5em 1.5em 1em 1.5em; /* last 2 was 0.5em 4em */
  margin: 10px 15px 10px 15px;
}

.key-point-box, .answer-box {
  margin: 0.5em 1.5em 2em 1.5em;
  margin: 5px 10px 15px 10px;
  margin: 5px 0;
  /*  -moz-border-radius: 6px; /* TEST */
/*	-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);*/
}


/* Quiz/exercise styles */

.correct, .wrong {
	color: green;
	margin-left: 1.5em;
	display: none; /* hide initially */
}
.wrong {
	color: red;
}

div.question, div.quiz, div.example {
  margin: 10px 1.5em 0.75em 0em; /* last was 1.5em */
/*  margin: 0 15px 10px 15px; */
  margin-left: 40px; /*TEST*/ /* was 20 */
}

.quiz {
  margin-left: 50px; /*TEST*/
}


.index { /* for labels in examples, exercises etc (note indentation & colour varies with target) */
  color: green;
  vertical-align:middle; /* for multi-line and fractions CHECK */
  font-weight: bold;
  padding-left: 0px; /* was 10px */
  padding-right: 0em; /* was 1em */
  padding-right: 10px;
  margin-left: 0;
}
div.question > .index { /* restrict to immediate child(ren) */
  color: #00F;
  margin-left: -21px; /*TEST*/ /* was -30*/
}
div.quiz > .index {
  color: #F09;
    margin-left: -10px; /*TEST*/
}
div.example-box .index {
  color: #960; 
}
div.exercise-box .index {
  color: #060; 
}


.quiz-correct { /* dummy class to act as a flag to indicate correct quiz answer */
}

.quiz-selected { /* to highlight user's selected answers */
	text-decoration:none;
	color: #F60;
	font-weight: bold;
  margin-left: 3em;
  font-size:x-large;
}
.quiz-reset-button1 {
  margin: 1em;
  margin: 0px;
	color: #fff;
	background: #009;
}

.quiz-reset-button, .quiz-reset-button:visited { /* Nice buttons! */
  /*background: #ffb515 url(../images/overlay.png) repeat-x;*/
  background: #3FF 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: black;
	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
}
	
.quiz-reset-button:visited:hover, .quiz-reset-button:hover {
   color: #fff; background-color: #03C;
}


/*** EQUATIONS AND SYMBOLS ***/


.eq { color: inherit;
 /*color: blue; DEBUG*/
}

span.eq, div.eq { /* CHECK THAT IE 6/7 BODGES ARE CORRECT! - span is for in-line eqs */
  color: inherit!important;
  font-family: Helvetica, Arial, Verdana, sans-serif; /* for everything but symbols, which are set via (descendant) <i>s or .symbol spans */
 /* font-family: freeserif, "times new roman", serif; /*TEST*/
  font-size: inherit;
  font-weight: inherit;
  display: inline-block;
	vertical-align: baseline; /* was baseline*/
	padding: 0px 0.25ex 0 0.25ex; /* was 0.25em 0.25em; */
	white-space: nowrap; /* not sure we want this? */
  word-spacing: -0.2ex; /* close up gaps between terms */
	zoom:1;
	_height: 30px;
 *display: inline;  /* for IE6/7 */
 *margin: 0 10px 0 10px;  /* for IE6/7 */
/* background: #ddd;   DEBUG */
}

div.eq { /* div is for standalone centred eqs with modest bottom margin */
  width: 100%; /* force to span enclosing box */
  text-align: center;
	margin-bottom: 0.5em; /* make it act like a paragraph block */
}

.symbol, .eq i, span.eq i, div.eq i { /* Maths symbols = unknown variables, Greek chars, etc. Convention is to use italicised serif font.
                        Can be applied to individual chars or strings (.symbol) or equations (span.eq i or div.eq i) or tables (add eq class to table, tr or td) */
/*  color: inherit!important; */
  /* color: blue; DEBUG*/                      
	font-family: freeserif, "times new roman", serif; /* STIXSizeOneSym used by MathJax has descenders that go below baseline! */
  font-size: 115%; /* NB: serif fonts appear to be smaller than sans-serif ???? */
  font-style: italic;
	font-weight: inherit; 
  vertical-align: baseline;
  line-height: 1.125em; /* ??? */
	padding-left: 0.2ex; /* override .eq padding, etc. (was 0.4ex) */
  padding-right: 0.2ex; /* TEST to make space for subscripts and closing brackets etc */
	margin: 0;
/*	letter-spacing: 0.25ex; /* space out consecutive symbols - CONFLICTS WITH CROSSOUTS - mod crossout class? */
 /* background: #ffdddd; /* DEBUG */
}




.eq sup, .eq sub { /* boost size of sub/super scripted variables */
  font-size: 0.67em; /*CHECK*/
  /* color: blue; DEBUG*/
}


/* will need equivalent for matrix symbols, which are sans-serif */

.units { /* units immediately follow value. When multiple units specified separate each unit symbol/group by spaces */
	letter-spacing: 0ex; /* set spacing of individual unit symbols */
	word-spacing: -0.25ex; /* reduce spacing of consecutive groups of unit symbols */
  margin-left: 0.25ex; /* move away from value */
  white-space: nowrap;
  /*background: #ccffff; DEBUG*/
}
.units sup {
  font-size: 0.75em; /* in case we need to change it (or other sups) */
}

span.mtext { /* not used? */
	word-spacing: normal;
	white-space: normal;
	word-spacing: normal;
}

.fraction { /* complex fractions, i.e. numerator expression over denominator expression
               NB: numerator only needs <span class="fup"></span> wrapper for complex expressions 
               NNB: can add (&) wrapped in bar span for non-css browsers */
	display: inline-block;
	position: relative;
	vertical-align: middle;
	letter-spacing: 0.01em;
	text-align: center;
  padding: 0 0.33ex; /* TEST */
  margin: 0; /* TEST */
	/*background: #F9F; DEBUG*/
}
.fraction > span { /* does denominator ??????*/

	display: block;
	padding: 0 0 0.15em 0; /* was 0.2em CHECK THIS IS OK */
  
}
.fraction span.fup {
  /*background-color:#CC0; DEBUG*/
  padding-top: 0em;
/*  margin-bottom: -0.1em; /*TEST*/
}
.fraction span.fdn {
  margin-top: -0.2em; /* TEST */
  padding-top: 0em; /*TEST*/
	border-top: thin solid;
}
.fraction span.bar {
	display: none;
}

.fraction span.fdn > sup {
  /* color:green; DEBUG*/
  padding-top:  0; /*TEST*/
  margin-top: 0; /*TEST*/
}

/* INLINE FRACTIONS */ 

/* Simplest solution = n &frasl; d - note spaces to get decent layout. Good for simple fractional powers but can lead to ambiguity in complex expressions */

/* ILF using (tweaked) sub/superscripts

USAGE: <span class="ilf"><sup>a</sup>&frasl;<sub>b</sub></span>  */

span.ilf {
  position: relative;
 /* margin: 0.25em;*/
}
span.ilf sup {
position:relative;
top: 0.15em;
  font-size:80%;
  vertical-align: 30%;
}
span.ilf sub {
  position:relative;
  font-size:80%;
  vertical-align: 0%;
  margin-left:-0.1em;
}

.ilf-num { /* Alternative for 'normal' fractions. */
  font-size:70%;
  vertical-align: super;
}
.ilf-den {
  font-size:70%;
  vertical-align: sub;
  margin-left:-0.1em;
}

/* ILF to emulate &frac12;, etc. GOOD FOR SUPERSCRIPTED POWERS

USAGE: <span class="frac-num">a</span>&frasl;<span class="frac-den">b</span> */

.frac-num {position: relative; font-size: 55%; vertical-align: 30%; font-weight:bold;}
.frac-den {position: relative; font-size: 50%; vertical-align: -5%; font-weight:bold;}

/* SPECIAL CHARACTER COMBOS */

.crossout {
 letter-spacing: -0.5em;
}

.crossout-slash { 
  color:red;
  font-size:1.25em;
  vertical-align:text-top;
}

.crossout-caret {
    vertical-align:text-top;
}


/* MODULE-SPECIFIC STYLES */

.grey-box {
  display: inline;
  border: 1px solid grey;
  padding: 16px 12px;
  margin: 0px 0px;
}

.flap-grey-box {
  margin: 0em 0em 1.5em 0px; /* require preceding objects, e.g. a heading, paragraph, or another box to provide margin at top */
	padding: 0.25em 0.75em 0.25em 0.75em; 
  padding: 10px 10px 10px 10px;
  border: 1px grey solid;
/*  border-color: lightgray black black lightgray; */
}


.flow-box {
  display: inline;
  border: 1px solid grey;
  padding: 4px 6px;
  margin: 4px 0px;
}

.over-arrow { /* text over right arrow */
	display: inline-block;
	position: relative;
	vertical-align: bottom;
	text-align: center;
  padding: 0 0;
  margin: 0 0;
  /* background: #ddd; DEBUG*/
}
.over-arrow > span { /* text for display goes in here */
	display: block;
  font-size: 85%;
  /* color: red; DEBUG*/
	padding: -10px 0; /* was 0.2em */
}
.over-arrow span.arrow { /* put arrow image in here */
  margin: 0 2px 2px 2px;
}
.over-arrow span.arrow img { /* set arrow image size: NB: must specify img src in html */
  width: 45px;
  height: 13px;
}

.mapsonto { /* 'maps onto' symbol image */
  width: 18px;
  height: 9px;
}


 /* INTEGRATION, SUMMATION, PRODUCT AND INTEGRATION RANGE SYTLES */

.int-font { /* used???? */
 font-family: Helvetica, Arial, sans-serif; 
}


.intsuma, .integral { /* does integral, summation & product eqs (also limit ranges?)  */
	display: inline-block;
	position: relative;
	vertical-align: middle; /* was middle (get overriden by eq style*/
	text-align: center;
 /* NB: fine-tune appropriate symbol using it's own span */ 
}



.intsuma .lim, .intsuma .lim-up, .intsuma .lower, .intsuma .upper, .intsuma .lim-hi, .intsuma .lim-lo, integral .lim-lo, .integral .lim-hi
{ /* 2DO- GLOBAL CHANGE lim TO lower AND lim-up TO upper IN ALL HTML FILES : NOW USE lim-hi & lim-lo !!!!*/

	display: block;
	font-size: 75%;
	text-align: center;
}
.intsuma .lim-up, .intsuma .upper, .intsuma .lim-hi, .integral .lim-hi {
  /* color: red; DEBUG */
	margin-bottom: 0.5em;
	margin-left: 0;
}
.intsuma .lim, .intsuma .lower, .intsuma .lim-lo, .integral .lim-lo { /* OK */
  /* color: purple; DEBUG */
  margin-top: 0.5em;
  margin-left: 0;
}
.intsuma .sum, .intsuma .int, .intsuma .range, .intsuma .sum-frac, .intsuma .int-frac, .integral .int { /* common properties: add explicit classes for fine tuning */
  font-family: freeserif, "times new roman", serif;
 
  /* background-color:#3F9; DEBUG*/
  padding: 0.4ex 0.2ex; /* was 0.2 0.4 */
	font-size: 2.25em; /* was 1.75em */
  position:relative;
  top: 0.2em; /* drop down OK */
}
.intsuma .sum { /* default to double size, even for single lines OK */
  font-size: 2.25em;
  font-weight: 100;
  /*color: blue; DEBUG*/
  vertical-align: middle;
  top: -0.1em; /* move up slightly */
}
.intsuma .int { /* default to double size, even for single lines OK */
  font-size: 2.25em;
  font-weight: 100;
  /*color: green; DEBUG*/
  vertical-align: middle;
  top: 0.1em; /*tweak */
}



.intsuma .sum-frac, .intsuma .int-frac { /* for fractions (!) (better to use 'double > ' method????) NOT USED 2B SORTED!!!!!!!!! */
  /*background-color:#099; DEBUG*/
  padding: 0 0.2ex;
	font-size: 2.2em;
  vertical-align: middle;
 /* top: 0.4em; /*TEST*/
}
sup .intsuma .int, .intsuma .int-sup { /* tweak for superscripts - CHECK*/
  /*background-color:#3F9; DEBUG*/
  padding: 0 0.5ex;
	font-size: 1.1em;
  top: 0.0ex;
}

/* INTEGRAL RANGE LIMITS STYLING

 USAGE: [ expr... ]<span class="range"><span class="lim-hi">HI</span><span class="lim-lo">LO</span></span> - for single line exprs size
        [ expr... ]<span class="range"><span class="lim-hi">HI</span>&nbsp;<span class="lim-lo">LO</span></span> - for fractional exprs
*/

.range {
  display: inline-block;
	position: relative;
	vertical-align: middle;
	text-align: center;
}
.range .lim-hi, .range .lim-lo
{
  /*color: green; DEBUG*/
	display: block;
	font-size: 75%;
	text-align: left; /* was center */
}
.range .lim-hi {
  margin-bottom: -0.5em;
}
.range .lim-lo {
  margin-top: -0.5em;
}

.limit { /* container for 'lim' markup, e.g. lim x -> 0 */
  display: inline-block;
  /*border: grey solid thin; DEBUG*/
	position: relative;
	vertical-align: bottom;
	text-align: center;
  line-height: 75%;
  margin: 0 0.5ex;
}
.limit .lim { /* wrapper for the 'lim' text */
  font-size: 100%;
  display: block;
  /*color: purple; DEBUG*/
}
.limit .lim-lo { /* wrapper for the lim string, e.g. x -> 0 */
  font-size: 75%;
	display: block;
  /*color: green; DEBUG*/
}

/* BRACKET STYLING

USAGE: <span class="bracket">(</span> - single line exprs
       <span class="bracket double">(</span> - fractional line exprs
       <span class="bracket triple">(</span> - special cases
*/

.bracket { /* bracket styling */
  font:"Courier New", Courier, monospace;
  position: relative;
  vertical-align:middle; /* puts slightly below centre... */
  top: -0.1em; /* ... v adjustment fudge for normal size*/ 
}
.bracket-frac, .bracket double { /* full-size fraction bracket styling REPLACE bracket-frac by bracket double/triple */
  font-size: 220%;
  font-weight: 100;
  vertical-align:middle; /* puts slightly below centre... */ 
}
.bracket .lim-hi, .bracket .lim-lo /* for square brackets integral range - USED???? */
{
	display: block;
	font-size: 75%;
	text-align: center;
}






.lbrak, .rbrak { /* in-line left/right square bracket - to use assign to &nbsp; with appropriate scale */
  width: 0.1ex;
	font-size: 5%;
	border: solid 2px black;
	border-right: none;
  vertical-align: middle;
  margin: 0 -4px 0 2px;
}
.rbrak {
  border: solid 2px black;
	border-left: none;
   margin: 0 2px 0 -4px;
}

.lbar { /* in-line vertical bars - to use add to target span with appropriate scale? */
 /* width: 0.1ex;*/
	/*font-size: 5%;*/
	border-left: solid 1px black;
  vertical-align: middle;
/*  margin: 0 -4px 0 2px;*/
}

/* integration range bar with optional upper &/or lower limits - too long, but can't seem to make shorter...*/
.intbar { 
  border-left: solid 1px black;
  padding: -0.5ex; /*TEST*/
	display: inline-block;
	position: relative;
	vertical-align: middle;
	text-align: center;
  margin-left: 0.5ex;
	margin-bottom: 0.5ex; /* what does this do? */
  margin-right: 0.5em; /* clear from following expr */
}
.intbar .bar { /* assign to a nbsp - small scales don't do 'owt... */
	font-size: 1em; 
}
.intbar .lim, .intbar .lim-up, .intbar .lower, .intbar .upper, .intbar .lim-hi, .intbar .lim-lo { /* 2 UPDATE */
	display: block;
	font-size: 75%;
	text-align: center;
}
.intbar .lim-up, .intbar .upper, .intbar .lim-hi {
	margin-bottom: 0;
	margin-left: 0.8ex;
}
.intbar .lim, .intbar .lower, .intbar .lim-lo {
	margin-bottom: -0.6ex;
  padding-left: 0.67ex;
}


/* MATRICES (formed using tables) */

table.matrix { 
  margin: auto;/* centre matrix within enclosing container, else page */
  margin-top: 0.1em; /* adjust vertical positioning */
  margin-bottom: -0.75em;
} 

table.matrix td { /* space & align elements appropriately */
	text-align: center;
	line-height: 1.0em; /* was 1.2em */
	padding: 0 1ex 0 1ex;
}

/* Square brackets, determinant & norm decoration for matrices */

table.matrix-wrapper { /* by default matrix is NOT centred */
/*  margin: auto; */
line-height: 1.0em;
  margin-top: 0.1em; /* adjust vertical positioning of brackets  */
  margin-bottom: -0.75em;
}
table.matrix-wrapper td { /* project ends of side bars beyond content */
  line-height: 1.6; /*was 1.6*/
}
.matrix-wrapper td.lbrak { /* left hand square bracket */
  width: 0.8ex;
	font-size: 50%;
	border: solid thin black;
	border-right: none;
}
.matrix-wrapper td.rbrak { /* right hand square bracket */
  width: 0.8ex;
  font-size: 50%;
	border: solid thin black;
	border-left: none;
}
.matrix-wrapper td.ldet, .matrix-wrapper td.rdet { /* left hand det bar */
  width: 0.2ex;
	font-size: 5%;
	border-left: solid thin black;
}
.matrix-wrapper td.rdet { /* right hand det bar */
  border-left: none;
	border-right: solid thin black;
}
.matrix-wrapper .norm { /* normalised = double vert bar */
  width: 0.3ex;
	border-left: thin black solid;
	border-right: thin black solid;
}




/* RADICALS

USAGE: <span class="radical">&radic;</span><span class="radicand">RADICAND</span>
       <span class="radical"><span class=n-root">N</span>&radic;</span><span class="radicand">RADICAND</span>
*/

.n-root { /* n'th root */
	position: relative;
	top: -1.3em;
	left: 1.9ex;
	font-size: 45%;
}
.radical { /* root sign */
	font-size:  1.15em; /* was 1.7em */
	vertical-align: baseline; /*middle;*/
  font-weight:100;
}

.radicand { /* top bar */
	padding-top: 0.1em; /* for superscripts TEST (was padding: 0.5ex */
  padding-left: 0.5ex; /* move away from root symbol TEST */
	border-top: thin black solid;
}

/* CHEMISTRY EQUATIONS STYLING */

/* Chemical reaction symbol : used because rightwards arrow over leftwards arrow symbol (&#8644;) doesn't work in IE8 */

.rarrow {
	position: relative;
	font-size: 125%;
	font-family: freeserif, "times new roman", serif;
	top: -0.5ex;
	margin: 0px 2px;
}
.larrow {
	position: absolute;
	left: 0px;
	top: 0.8ex;
}

/* Complex chemical reaction equations (see examples in template.html) */

.sy, .sy-r, .sy-g, .sy-b {
	position: relative;
	padding-left: 1px;
	font-size: 110%;
	font-weight: 500;
	text-align: center;
}
.sy-r {
	color: #f00;
}
.sy-g {
	color: #4f8c4f;
}
.sy-b {
	color: #00f;
}
.oxbr {
	position: absolute;
	top: -1em;
	left: 0px;
	width: 100%;
	font-family: freeserif, "times new roman", serif;
	font-size: 70%;
	text-align: center;
}


/* SUB/SUPERSCRIPTS STYLING */

sup, sub { vertical-align: 0; position: relative; margin: 0 0.33ex; 
/*color:purple DEBUG*/
}
sup { bottom: 1.2ex; }
sub { top: 0.8ex; }

sup, sub { /* from FLAP */
  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; }


hr {
  margin: 10px 0;
}



/*** MISC LAYOUT CLASSES ***/


.right { /* this class can be used to float an element right in the page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 10px;
  margin-bottom: 10px; 
}
.left { /* this class can be used to float an element left in the page */
	float: left;
	margin-right: 10px;
  margin-bottom: 10px; 
}
.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;
}
.nobreak {
	white-space: nowrap;
	/* border-bottom: 1px dotted blue; DEBUG */
}

/*** MISC STYLES ***/

.frac { /* for brackets that wrap fractions REPLACE BY DOUBLE */
  font-size: 220%; /* was 185% */
  font-weight: 100;
  vertical-align:middle; /* puts slightly below centre - dunno why */
  position: relative;
  top: -0.1em; /* fudge */
}

/* SCALING SHORTCUTS - NB: retains baseline position - add "align-vert" class to centre vertically, 
   or use 'half', 'large', double' or 'triple' meta classes (see below) */

.scale-half {
  font-size: 50%;
}
.scale-smallest, scale-60 {
  font-size: 60%;
}
.scale-smaller, .scale-70 {
  font-size: 70%; 
}
.scale-small, .scale-80 {
  font-size: 80%; 
}
.scale-large, .scale-110 {
  font-size: 110%;
  font-weight: 100;
}
.scale-larger, .scale-125 {
  font-size: 125%;
  font-weight: 100;
}
.scale-largest, .scale-150 {
  font-size: 150%;
  font-weight: 100;
}
.scale-huge, .scale-175 {
  font-size: 175%;
  font-weight: 100; 
}
.scale-double {
  font-size: 220%; /* NB: slightly larger than 200%! */
  font-weight: 100;
}

/* CENTRED SIZE CLASSES - mainly for equation symbols (integral, summation & product) and wrapping brackets */

.half { /* used for e.g. reduced in-line fractions - needs tuning as chars are too far away from divider line */
	font-size: 75%; /*TEST - was 60 CHECK THIS IS OK !!!! */
  vertical-align: middle; /* TEST ------ CHECK THIS IS OK */
}
.large {
 position: relative;
  font-size: 175%;
  font-weight: 100;
  vertical-align: middle; /* TEST ------ CHECK THIS IS OK */
  top: -0.1em; /* adjustment fudge */  
}
.double {  /* synonym for frac */
	position: relative;
  font-size: 220%; /* NB: slightly larger than 200%! */
  font-weight: 100;
  vertical-align: middle; /* TEST ------ CHECK THIS IS OK */
  top: -0.1em; /* adjustment fudge */
}
.triple {  
  position: relative;
  font-size: 300%;
  font-weight: 100;
  vertical-align: middle; /* TEST ------ CHECK THIS IS OK */
  top: -0.1em; /* adjustment fudge */
}




.weight-lighter { /* change font weight REPLACE???? */
  font-weight: lighter;
}
.weight-normal {
  font-weight: normal;
}
.weight-bold {
  font-weight: bold;
}
.weight-bolder {
  font-weight: bolder;
}
.weight-boldest {
  font-weight: 900;
}



hr {
 color: #faebba;
  background-color: #faebba;
  height: 5px;
}

.coord, .keep { /* to prevent line-breaks in coord values, i.e. Q(1, 2) */
  white-space:nowrap;
  /*background: #CF6; DEBUG*/
}

.indented { /* doesn't work! */
  text-indent: 2em;
}

.box {
width: 100%;
margin: 0 auto;
border: 2px solid black;
padding: 0.5em 0.75em;
}


.bi { /* applies bold and italic style as class */
	font-weight: bold;
	font-style: italic;
}

.hilite {
font-weight: bold;
padding: 2px 4px;
background: #faebba;
}

.emboss {
  border: 1px black solid ;
  border-color: lightgray black black lightgray;
}
.deboss {
  border: 1px black solid;
  border-color: black lightgray lightgray black;
}

.vector, .unit-vector { /* only used in div-curl module? Gradients too NB: update unit-vector */
  font-size: 1.1em;
  font-family: freeserif, "times new roman", serif;
  /*background: #ffdd00; DEBUG*/
	font-weight: 900;
	font-style:italic!important;
}
.eq .vector, .unit-vector, .eq .vector-u {  
  padding: 0 0.5ex 0 0.33ex; /* move away from expression or value only when in equation (remove unit-vector from docs) */
}

.vector-u { /* underline style for vectors */
  font-size: 1.1em;
  font-family: freeserif, "times new roman", serif;
  /*background: #ffdd00; DEBUG*/
	font-style:italic!important;
  text-decoration:underline; /* not v. good for descenders! */
/* padding-right: -0.1ex;
 border-bottom:thin black solid;*/
}

.vector sup { /* overstruck char TEST*/
   vertical-align: baseline;
   position: relative;
   top: -0.1em; 
   left:-1.2ex;
}


div.hilite {
  margin: 0 auto;
}

.vert-space { margin-bottom: 0.75em;}

.warning, .red {
	color: red!important;
}

.blue {
  color: blue!important; 
}

.browser-nocss {
	color: red;
	display: none;
}
.hidden {
	display: none;
}

.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;
}
 
.det, .modulo { /* actually should be modulo - CHANGE ALL REFS FROM DET TO MODULO IN HTML FILES!!!! */
  border-left: solid 1px black;
  border-right: solid 1px black;
  vertical-align: baseline;
  padding: 0 0.15em;
}



/* from flap.css */

.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;
}

.author {
  color: #666;
  font-style:italic;
  font-size: 0.75em;
  padding: 5px 0;
  margin: 0 0;
}

.copyright {
    font-size: 0.67em; 
}
 
.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);
}