/* g6 2010 avoiding fragile fiddly floats in favour of css-tables - expects IE8...
	testing in dummy about/index_g61.html	*/
/* developed ref: g5asst.css */

/* in cascade:
	preceding inherits include: g61_header-*.css
	subsequent overwriters inlude: g61_footer-*.css, old-IE*.css */
	
/* Inherit styles from header, or confirm/modify here -
	font-size
	html, body, h1, h2, a, smalltxt, loud, warn, endorse, pencil...	*/
	
	
html, body, h1, h3, p, ul, ol, li, input {	
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/* h3, p, ul, ol, li, hr, input {	****** #content an alternative, testing - remove *********
	max-width: 660px;
} */

p, ol, ul {	/*  */
	margin-bottom: 0.7em;	/* long needed reductions above & below, 2009 August 03
	-0.5em; could use a negative margin-bot (sitepoint p39), but txt pops any bottom border...	*/
	margin-top: 0em;	/* 0.7em;Cram, but here's the rub - if unspecified, 
applies default 1em? except in nesting lists where browsers remove unwanted headroom ;))
if match margbot0, applies unwanted headroom in nesting lists, to be painfully removed :(
If 0, headroom shrinks all done by margbot0 - but watch headroom 1st element on each page...
Ah, these margs don't apply to h2 h3 elements... */

	margin-left: 5%;
	/* padding-left: 9%; old IE doesn't do padding, revert to margin, semantic better/
	list-style-position: inside; */
}
.scell ol, .scell ul { /* , .scelll ol, .scelll ul */
	/* padding-left: 4%; had to reduce from computed, large due to marg-left big?
	margin-left: 4%; */
	padding-left: 0%;
}

#content h1 {
	margin-left: 1%;
}
#content h2 {				/* #content essential, else wrecks nav-bar... */
	margin-bottom: 0.3em; /* use with p.top or h2+p to reduce space under h2 */
	margin-left : 2%; /*  -4%; default BODY left now 0, was -8% */
	/* padding-top: 1em; 20070806 */
}

#content h3	{
	/* color: Gray; moved to header-std.css */
	font-size: 1.1em;
	margin-left: 3%; /* 6%; */
	margin-bottom: 0.3em;	/* needed with h3+p to reduce space under h3 */
}


/*	************** Style Sheet TABLE column layout classes	************* */

.stable {					/* , .cont2col css-table container x? columns? .class NOT #div	*/
								/* these lines might be needed later?
	width: 100%;
	position: relative;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	display: table;	 */
}
							/* omitting the following, hr in html is sometimes
								very influencial in generating table-row: */
.srow {	/* , .controw */
	display: table-row;
}
.scell {	/*, .contcell */
	display: table-cell;
	width: 296px;	/* 300px; */
	padding-left: 24px;	/* 20px; */
	/* text-align: justify;	20100131 became default, removed to content-justify.css 201002 */
	/*  debug */
}
/* .scelll {	20100217 removed to g61_contents-justify.css
	display: table-cell;
	width: 296px; 
	padding-left: 24px; 
	commented text-align: left; 20100213 later prefer this as default 
} */

.scell p { /* , .scelll p, .contcell p cont2col p */
	margin-left: 0;	/* important remove previous p marg if any */
}
.scellspan2 {	/* , .scell2col, .cellcolspan2 **** expand to width of 2 columns ***** */
	display: inherit;
	width: 620px;	/* almost 2 cols */
	/* padding-left: 20px;
	border: 1px solid Yellow; debug
	background-color: ButtonFace; */
}
.scellad {	/* , .contadcell */
	display: table-cell;
	border: 1px solid red;
	/* width: 520px; */
	max-width: 220px;	/* IE8 ignors! */
}
table {
	padding-left: 24px;	/* 20100131 for nectar acknowls */
}
td {
	/*	border: thin solid Fuchsia; debug */
}
.vat { vertical-align: top; }

h2+h3, h2+p, h3+p	{	/* from g5 doesn't work here unless h3 margbot reduced */
	margin-top: 0.4em;
}

.tar {	text-align: right; }	/* 200508 papabaer I think */
.tac {	text-align: center; }
.tal {	text-align: left;}
/* .taj {
	text-align: justify;
}	Wow! - it used to be useless... removed to g61_contents-justify 20100217 */
.margtop0	{	margin-top: 0;	}	/* durn it, ought had this from start */
.margbot0	{	margin-bottom: 0;	}	/* might never need this, see default */
.strike {	text-decoration: line-through;} /* undeprecate 200808 */

.tall {	/* , .tall li is this legal? */
	line-height: 1.3em;
}

.ctr {
	margin-left: auto;
	margin-right: auto;
	display: block; /* magic - full-widths inline stuff; but screws tables left!? */
	/* width: 100%; moved separate below, stretched images wide */
}

img.ctr {	/* not so keen on doing this */
	margin-top: 1em;
	margin-bottom: 1em;
}
table.ctr {
	/* width: 100%;	2010223 separated 201001 helps? contents table nectar */
	padding-left: 0; /* 20100915 remove width and padding, let float centre!? */
	display: table; /* 20100915 NOT block which prevents centring */
}
table.ctr td, th {
	padding-right: 1em; /* 20100915 un-cramp longest td's [all tables???] */
}

/* these floats may not work if narrowing text column(s): */
.boxl {
	float: left; /* margin-top : 20px; opera overwrote with wrapped text  */
	margin-right: 2em;
	margin-bottom: 1em;	/* 2em; reduced 201001 */
	margin-left: 1em;
}	

.boxr {
	float : right;
	margin-top : 0; /* .5em increase if gets overwrit by wrapped text */
	margin-left : 2em;
	margin-bottom : 1em;	/* 2em; reduced 201001 */
	margin-right: 1em;
}

ul.toc, ol.toc {
	list-style: none;
	line-height: 135%;
	/*	padding: 10em;
	background: #ffffff;
	margin-right: 1em;
	margin-left: 1em; */
}
ul ul, ul ol, ol ul, ol ol {
	/* padding-left: 3%; */
	margin-left: 0%;
	list-style-type: square;
}
li {
	margin-top: 0.8ex;
}
li li {
	/* margin-left : -9%; need to subtract one un-natural large marg-left of each ol, ul
	for nested lists, the earlier default #content marg-left 8% was more semantic?
	padding-left: 9%;					 
	list-style-type : circle;*/
}
.romanlo { list-style: lower-roman; }
.alphaup { list-style: upper-alpha; }
.alphalo { list-style: lower-alpha; }

td li { 	margin-left: -9%; }	/* UNTRIED */

.icol {
	height: 60px;
	float: right;	/* 201001 had no float */
	margin-right: 1%;	/* 201001 was margin-left: 1%; */
	margin-top: -58px; /* 201001 was margin-bottom: -4px; */
}

hr {
	/* background-image: url(../images/backweave1.jpg);
	height: 14px; */
	background-image: url(../images/liquidam3.png);
	border: none;
	height: 9px;
}
.bw2 {	background-image: url(../images/backweave2.jpg);
	height: 14px; }
.bw3 { 	background-image: url(../images/backwoodshad1.jpg);
	height: 14px; }
.bw4 {
	background-image: url(../images/liquidam2.jpg);
	height: 35px;
}
.bw5, .hrbig {
	background-image: url(../images/liquidam1.png);
	height: 18px;
}
.bw6 {
	background-image: url(../images/liquidam3.png);
	height: 9px;
}

div.to-top {
	/* margin-left: -8%; overide content left margin, bar close to page left; but see below */
	/* background: #ffeecc; */
	background-image: url(../images/backwood1.jpg);
	border-top: 1px solid;
	border-top-color: #A8EAA8;
	border-bottom: 1px solid;
	border-bottom-color: #F4E1B3;
}

div.to-top a {
	padding: 0.3em 2em 0.3em 8%; /* 0.3em 6em;	20070714 from above */
	display: block;	/* increases clickable area otherwise a href default in-line txt only */
}

.iconlow {
	margin-bottom: -4px;
}

div.figc {
	/* ************	photos and text bordered boxes	************* */
	margin-left: auto;
	margin-right: auto; /* width: 360px;	width of photo; else 40% -FIND A BETTER METHOD! */
	max-width: 50%; /* 201001 why? photos, tables break out!
								but won't centre properly without it... */
	border: thin silver solid;
	padding: 1em 0.5em;
}
div.figr {
  float: right;
 /* width: 75%; */
  border: thin silver solid;
  margin: 1em;
  padding: 1em 0.5em;
}
div.figl {
	float: left;
/*	width: 75% */
  border: thin silver solid;
  margin: 1em 1em 1em 2em; /* left-marg compromise between IE and FFox rendering */
  padding: 1em 0.5em;
}
div.figl p, div.figc p, div.figr p {
	/* text-align: center;	killed 201001 */
	font-style: normal;
	font-size: smaller; /* text-indent: 0; */
	margin: 0; /* to over-ride my p left margin.  But in figc, p screws right margin? */
	/* margin-left: 0; no better */
}
img.scaled {  width: 100%; 
}

.Pancon {
	background-color: #FFFFCC;
	border: medium solid #FFDAB9; /* padding: 0.1em 2em; vertically 1em or none... g5a why? */
	padding: 1em 0 0.5em 0;
}
/* .smalltxt{	see header-std
	font-family: sans-serif; font-size: 0.8em;6pt;
	font-size: smaller;
} */

.loud {
	color : Red;
	/* font-size : large; */
	font-weight : bold;
}

.warn {
	color : #FF9900;
	font-weight : bold;
}

.endorse {
	color : #009900;
	font-weight : bold;
}

.pencil {
	color : Silver;
}

.blu {		/* ********* try g61_contents-blu.css for content h2, h3 in blue ********** */
	color: Blue;
}
.sky {
	color: #87CEFA;
}