/*  Uncoloured layout stylesheet for website
    ----------------------------------------  */

/*
 * (Used as the base for other stylesheets which provide
 *  different colours.  They could import this sheet, or
 *  pages could refer to both.)
 */

@media all {

	html
	{
		margin: 0;
		padding: 0;
	}

	body
	{
		margin:  0;
		padding:  0.5em 1em 0.5em 1em;
	}

	h1, h2, h3, h4, h5, h6,
	dt, dd.unabbreviated,
	caption, th,
	legend, label
	{
		font-family:  Helvetica, Arial, Sans, sans-serif;
		font-weight:  bold;
	}

	h1, h2, h3, h4, h5, h6 {margin-bottom: 0;}

	h1 {font-size:  170%;}
	h2 {font-size:  155%;}
	h3 {font-size:  145%;}
	h4 {font-size:  130%;}
	h5 {font-size:  120%;}
	h6 {font-size:  110%;}

	h2.discreet, h3.discreet, h4.discreet, h5.discreet, h6.discreet
	{
		font-size:  115%;
	}

	h1
	{
		margin: 0.5em 0 0.5em 0;
		text-align:  center;
		border-width:  thin;
		border-style:  solid;
		padding-left: 4px;
		padding-right: 4px;
		padding-top: 0.3em;
	}

  h1.long
	{
		text-align: left;
	}

	h1.uninitialism {font-weight: 200;}

	h1.uninitialism span {font-weight: 900;}

	h2, h3, h4, h5, h6 {margin-top: /*2em;*/ 2.7em;}

	h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6,
	hr + h2, hr + h3, hr + h4, hr + h5, hr + h6
	{
		margin-top: 0.7em !important;
	}

	h1, p, li, pre, th, td {      /* was 1.4 */
		line-height: 1.4;
	}


/* dyslexia experiments

  p {
					line-height: 1.7em;
					word-spacing: 0.1em;
	}
 */



/*  dl with same dimensions as ".section" rule:  */

	dl
	{
		margin:  2em 0 2em 0;
		padding:  0.3em 1em 0.3em 1em;
	}

	dt, dd {padding-bottom:  0.5em;}

	dd.unabbreviated {font-style:  italic;}

/*  Make tables of contents and indexes look more like traditional ones:  */

	ul#documentmenu, ul.menu, ul.ingredients {list-style-type: none;}

/*  Automatically pad around a list inside a list:  */

	li ul, li ol, ul.sub-section, ol.sub-section
	{
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}

	li.sub-section {padding-bottom: 1em;}


	body > table
	{
		margin-top:  0.5em;
		margin-bottom:  1em;
	}

	table
	{
		margin-top: 0.5em;
		margin-bottom: 0.5em;
    border-collapse: collapse;
		empty-cells:  show;
	}

	table#httperrordetails th, table#httperrordetails td {
		padding: 3px;}

	table.centred
	{
		margin: auto;
	}

	caption
	{
		text-align:  center;
		font-size:  larger;
	}

	table.centred caption
	{
		margin-left: auto;
		margin-right: auto;
	}

	th, td
	{
		margin:  0;
		padding:  0.3em;
	}


	th.rowheading, th[scope="row"] /* 2nd proper, but MSIE ignores it */
	{
		text-align: right;
		vertical-align: baseline;
	}

	pre
	{
		overflow: auto;
	}

	fieldset
	{
		border-width:  1px;
		border-style:  solid;
		margin:  2em;
		padding:  0.5em;  /* was 1em */
	}

	fieldset div
	{
		margin:  0.1em;
		padding:  0.1em;  /* both were 0.5em */
	}

	legend
	{
		margin:  0em;
		padding:  0.1em 0.3em 0.1em 0.3em;
	/*	position: relative;
		top:  -2em;
		left:  1em;	*/  /* there's just no getting MSIE to work right! */
		border-width:  thin;
		border-style:  solid;
		font-size:  115%;
	}

  hr.interruption
	{
		width: 50%;
	}

   /* check what this was for: */

	div.section > h2.astab {
		position: relative;
		top:  -1.3em;
		left:  1em;}

	abbr[title], dfn[title]  {border-bottom:  dashed thin;}

	code, kbd
	{
		font-family:  monospace;
		font-style:  normal;
	}

	.heading, .container, .example, .explanation, .informational, .comment, .notes, aside 
	{
		border-width:  thin;
		border-style:  solid;

	}

	.heading {padding:  0 0.5em 0 0.5em;}

	section, .section {
		margin:  2em 0 2em 0;
		padding: 10px; /* 0.3em 1em 0.3em 1em; */
		border-width:  thin;
		border-style:  solid;}

	.container
	{
		margin:  0.3em;
		padding:  0.3em;
	}

	.example, .explanation,	.informational
	{
		margin:  2em;
		padding:  10px; /* 0.5em; */
	}

	div.informational
	{
		padding: 10px; /* 0.3em 0.6em 0.3em 0.6em; */
	}

	.comment, .notes, aside
	{
		margin:  2em 5em 2em 5em;
		padding:  10px; /*0.5em; */
	}

  ol.notes li, ul.notes li {
		margin: 10px 20px 10px 20px;
	}

	main h2:first-child, main h3:first-child, main h4:first-child, main h5:first-child,
	div h2:first-child, div h3:first-child, div h4:first-child, div h5:first-child
	{
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	div.comment > p, div.informational > p, div.explanation > p,
	div.notes > p, div.warning > p
	{
		margin: 0;
		padding: 0.3em 0.1em 0.3em 0.1em;
	}

	figure, div.diagram, div.illustration, td.illustration
	{
		margin: auto;
		text-align: center;
	}

	figure img, div.diagram img, div.illustration img
	{
		border-width: thin;
		border-style: solid;
	}

	figcaption,
	div.diagram div.caption,
	div.illustration div.caption,
	div.illustration p.caption
  {
		font-family: sans-serif;
		font-size: 90%;
  }

	figcaption p, p.caption
	{
    text-align: left;
		margin-top: 0;
		padding-top: 0;
	}				

	div.thumbnails img
	{
		margin: 5px;
	}

	aside, div.smallboxout
	{
		float: right;
		margin: 0 0 5px 5px;
    width: 40%;
	}

	div.smallboxout > img
	{
		border: thin solid #222;
	}

	.statement
	{
		margin:  1.5em 0 0 0;
		padding:  0.3em 1em 0.3em 1em;
		border-width:  thin;
		border-style: solid solid none solid;
	}

	.response
	{
		margin:  0 0 1.5em 0;
		padding:  0.3em 1em 0.3em 1em;
		border-width:  thin;
		border-style:  none solid solid solid;
	}

	.warning, .alert
	{
		border-width:  thin;
		border-style:  dashed;
		margin:  2em;
		padding:  10px; /* 0.5em; */
	}

	div#body,
	main
	{
		float: left;
		width: 77%;
	}

	div#body p:first-child,
	main p:first-child
	{
		margin-top: 0;
	}

	nav,
	div.navigation, div#sidenavigation, div#footernavigation
	{
		border-width: thin;
		border-style: solid;
		font-family:  sans-serif;
		font-size: 90%;
	}

	nav hr, .navigation hr, div#sidenavigation hr, div#footernavigation hr
	{
		display: none;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* probably should weed out the nav heading and list styles */

	nav#foot h2, nav#foot h3, nav#foot h4,
	body#menu h2, body#menu h3, body#menu h4,
	/* div#sidenavigation h2, div#sidenavigation h3, div#sidenavigation h4, */
	div#footernavigation h2, div#footernavigation h3, div#footernavigation h4
	{
		font-size: 110%;
		margin: 0.5em 0 0 0;
		padding: 0;
	}

	nav#side h2,
	nav#side ul
	/* div#sidenavigation h2, */ div#footernavigation h2,
	/* div#sidenavigation ul, */ div#footernavigation ul
	{
		margin: 0 !important;
		padding: 0 !important;
	}

	nav#foot ul,
	/* div#sidenavigation ul, */ div#footernavigation ul
	{
		list-style-type: none;
	}

/*
	div#sidenavigation table {
		width: 100%;
	}
*/

  nav#side th, nav#side td,
	div#sidenavigation th, div#sidenavigation td
	{
		margin: 0;
		padding: 0;
	}

	nav#side th,
	div#sidenavigation th
	{
		text-align: left;
		font-weight: normal;
	}

	nav#side a,
	div#sidenavigation a
	{
		display: block;
		padding: 0 2px 2px 6px;
		text-decoration: none;
	}

  nav,
	div.navigation
	{
		padding: 0.5em;
	}

	nav#side,
	div#sidenavigation
	{
		float: right;
		margin: 0 0 0.5em 0.5em;
		padding: 0.5em;
  	/*	width: 15%; */
	}

/*
	div#sidenavigation
	{
		position: fixed;
		top: 4em;
		right: 2em;
	}
*/

	nav#foot,
	div#footernavigation
	{
		margin:  0.5em 0 0.5em 0;
		padding: 0.5em;
	}

	nav#foot ul,
	nav#foot li,
	div#footernavigation ul,
	div#footernavigation li
	{
		display: inline;
	}

	nav#foot li + li:before,
	div#footernavigation li + li:before
	{content: "+ "}

	nav#foot span,
	div#footernavigation span
	{border: none;}

	nav#foot .nowrap,
	#footernavigation .nowrap
	{white-space: normal;}

	li.uninitialism span {font-weight: bold;}

	/* h2.centred,*/
  nav.centred,
	div.centred
	{
		text-align:  center;
		margin-left: auto;
		margin-right: auto;
	}

	span.example, kbd.example
	{
		margin: 0em;
		padding: 1px;
	}

  p.pagenote
  {
		font-style: italic;
		font-size: smaller;
		float: right;
		display: inline-block;
		border-width: thin;
		border-style: solid;
		padding: 5px;
  }

/*  Make links obvious, but also easy to read:  */

	a:link, a:visited {text-decoration:  underline;}

	a:link.external, a:visited.external
	{
		border-bottom-width: thin;
		border-bottom-style: solid;
	}

	a:hover, a:active, a:focus {text-decoration:  none;}

	a:hover.external, a:active.external, a:focus.external {border-bottom: none;}

	.nowrap {white-space: nowrap;}

	.hidden {display:  none;}

}


/*  Hide some things which become nonsensical, to aural browsers:  */
/*  Inappropriate for aural media:  display:  none;   */

@media aural {

	.spelt {speak:  spell-out;}

	.visualonly {speak:  none;}

}

@media print {

/* Change some things be be more practical when printed */

/* Most printers impose margins already; and some browsers do, too.  */

	html, body
	{
		margin: 0;
		padding: 0;
	}

	h1, .heading
	{
		border-width:  thin;
		border-style:  none none solid none;
	}

	h1, h2, h3, h4, h5, h6 {page-break-after: avoid;}

	p, div, dl, li, table, th, td {page-break-inside:  avoid;}

	/* a:after.external {content: " (external link) "} */

	a {text-decoration: none !important;}

	a.external, abbr, dfn {border-bottom: none !important;}

	abbr, acronym, dfn
	{
		font-variant: inherit;
		letter-spacing: inherit;
	}

	div#body,
	main
	{
		float: none;
		width: 100%;	
	}

	.noprint, .navigation, #sidenavigation, #footernavigation
	{
		display: none;
	}

	div.smallboxout > img,
 	td img
	{
		border: thin solid black;
	}

}