/*
main.css  -  Style sheet for snyderconsulting.net
Copyright 2005 Snyder consulting
web site www.snyderconsulting.net

See "The CSS" in documentation.

*/

/* ====== BODY & general rules for content ====== */
BODY {
	color: black; background-color: #ffffcc;
	font: normal 13px/17px "Arial", "Helvetica", sans-serif;
	margin: 0; padding: 0;
}
TABLE {
	/*
	background-color: white; */
	border-collapse: collapse;
}
TD {
	color: black; background-color: #ffffcc;
	background-color: white;
	font: normal 13px/17px "Arial", "Helvetica", sans-serif;
}
/* Paras & headings */
P, TD P { margin: 8px 0px 5px 0; padding: 0; line-height: 20px; }
/*
	H2 slightly darker than #mastHead bg - looks paler if
	exactly the same!
	Rules for H1 are with those for #H1outer
*/
H2 {
	font-size: 16px; font-weight: bold;
	margin: 17px 0px 1px 0px; color: #003399;
}
H3 {
	font-size: 14px; font-weight: bold; font-style: italic;
	margin: 14px 0px 1px 0px; color: #003399;
}

/* Lists */
UL, TD UL, DIV UL {
	margin: 0 0 0 9px; padding: 0 0 0 9px;
	list-style: disc; 
}
UL UL, TD UL UL, DIV UL UL { list-style: circle; }
OL, TD OL, DIV OL {
	margin: 0 0 0 12px; padding: 0 0 0 12px;
}
LI, TD LI, DIV LI { margin: 1px 0 1px 0; padding: 0; }
/* Links */
A:link, TD A:link { color: blue; text-decoration: underline;}
A:active, TD A:active { color: blue; }
A:visited, TD A:visited {color: purple; }
A:hover, TD A:hover {color: red; }

EM { font-style: normal; }
EM, .emph { font-weight: bold; }
EM.weak { font-style: italic; font-weight: normal; }

.figHeading {
	font-weight: bold; font-style: italic;
	margin-top: 12px;
}

.sidebar {	/* For IE, which has float bug. */
	border: solid 1px silver;
	margin-left: 10px;
	background-color: #ffffcc;
}
.sidebar TD { background-color: #ffffcc; }
#contentMain>table.sidebar { /* For Firefox, which mis-implements align="right" */
	float: right;
}
/* SKIP-LINKS for accessibility - overlaid by #pageHead */
.skipLinks { position: absolute; left: 0; top: 0; }

/* ====== MAST-HEAD ====== */

#pageHead {		/* Just a block of colour - scLogo image has transparent bg */
	position: absolute; left: 0; top: 0;
	background-color: #00679f; width: 100%; height: 74px;
}
#scLogo { position: absolute; right: 0; top: 0; }
	/* This image NOT a bg because it's clickable */

/* ====== MAIN MENU and decorative image ====== */

/* Box contains & places menu and image */
#mainMenuBox {
	position: absolute; left: 24px; top: 25px;
	width: 125px;	/* Image width + 2, to allow for image right border */
	padding-bottom: 189px; /* Adjust this to re-position image */
}
/* Decorative img on left */
#decorBox1 {
	width: 125px; height: 126px;
	background: url(../images/bg/leftpict.gif);
}
#mainMenu {
	background: white; border: solid 1px #a9a9a9;
	margin: 0 0 84px 0;	/* Adjust bottom margin to re-position image */
	padding: 9px 0 9px 0;	/* Top padding for round corner */
}
/* Round top right corner - IE needs DIV w IMG */
#mainMenuTopRight {
	width: 7px; height: 9px;
	position: absolute; top: 0px; right: 0px;
	_right: -1px;
	background: url(../images/bg/roundCorner_TR_gray_7x9.gif) no-repeat;
}
/*
Main menu items are text in list items.
Mouseover images applied by link's "hover" CSS pseudo-class.
"You are here" image applied as bg in link by CSS class "here" -
	must specify for "hover" CSS pseudo-class of "here" class 
	to overide normal on-hover behaviour.
*/
#mainMenu UL, #mainMenu LI {
	list-style: none; margin: 0; padding: 0;
}
/* Need border to stop IE from spacing items too much - why ??? */
#mainMenu LI { border: solid 1px white; }
/* Enable bg images for "you are here" and mouseover. */
#mainMenu A {
	display: block; margin: 0; padding: 0px 0 3px 27px;
	/*
		Top & bottom padding allow for height of "you are here",
		left padding for width of "you are here".
		display:block enables padding!
	*/
}
/* Custom colours for menu links. */
#mainMenu A, #mainMenu A:link, #mainMenu A:active, #mainMenu A:hover,
		#mainMenu A:visited 	{
	text-decoration: none; color: #666666;
	font-weight: bold;
}
/* "You are here" and mouseover efects - top level */
#mainMenu A:hover {	/* Mouseover - top level */
	background: url(../images/menu/over1.gif) no-repeat 5px 2px;
	_background-position: 7px 3px;
}
#mainMenu A.here, #mainMenu A.here:hover {	/* "You are here"  - top level */
	color: #999999;
	background: url(../images/menu/here1.gif) no-repeat 3px 0px;
	_background-position: 5px 1px;
}
/* Font, mouseover and "you are here" for level 2 menu items */
#mainMenu LI UL {
	font-size: 10px; font-weight: normal; line-height: 12px;
}
#mainMenu LI UL LI {
	padding-bottom: 2px;
}
{	/* Mouseover - top level */
	background: url(../images/menu/over2.gif) no-repeat 13px 6px;
	_background-position: 14px 6px;
}
/* Level 2 has same indicator for "you are here" and mouseover. */
#mainMenu LI UL A.here, #mainMenu LI UL A:hover, #mainMenu LI UL A.here:hover {
	background: url(../images/menu/over2.gif) no-repeat 13px 4px;
	_background-position: 14px 3px;
}

/* ====== CONTENT AREA ====== */

/*	Content outer box - simply positions its contents */
#contentOuter { display: block; position: absolute;
	top: 98px;
	left: 148px; right: 25px;
	margin: 1px 0 0 0; padding: 0 0 0 0;
	/* IE can't understand left+right, use underscore hack & QUIRKS mode */
	_left: 0; _width: 100%; _padding: 0 25px 0 148px;
}

/* Main heading boxes, w round top right corner */
#H1outer {
	padding: 0; margin: 0 30px 0 0;		/* Right margin stops
			it shooting past rounded corner of #contentTopBorder */
	border: none;
}
#H1topLeft {
	height: 12px; line-height: 1px;
	margin: 0; padding: 0;
	border-left: solid 1px #a2a2a2;
	background: #00989f url(../images/bg/h1topLeft.gif) repeat;
}
#H1topRight {		/* Round corner */
	height: 12px; line-height: 1px; width: 14px;
	margin: 0; padding: 0;
	background: #00989f url(../images/bg/h1topRight.gif) no-repeat;
}
#H1text {
	background-color: white; margin: 0;
	padding: 0 0 1px 1px;
	border-left: solid 1px #a2a2a2;
	overflow: visible;
}
H1 {	/* Main heading text */
	font-size: 13px; line-height: 20px; font-weight: bold;
	display: block;
	margin: 0; padding: 0 15px 10px 29px;
	color: white; 	background: #00989f;
	font-family: Verdana, Arial, sans-serif;
}
#H1bottomRight {		/* Round corner */
	width: 14px; margin: 0; padding: 0 0 1px 0;
	overflow: hidden; line-height: 1px;
	background: #00989f url(../images/bg/h1topRight.gif) no-repeat bottom right;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
}

/* Round content's top right corner - IE needs bg image for round corner */
#contentTopBorder {
	width: 100%;padding: 0; margin: 0;
	border: none; border-collapse: collapse; border-spacing: 0;
	background-color: white;
}
#contentTopBorder TD {
	height: 19px; overflow: visible;
	margin: 0 20px 0 0; padding: 0;
	border-left: solid 1px #a2a2a2;
	background: white
		url(../images/bg/roundCorner_TR_gray_2000x19.gif) no-repeat
		top right;
}

/*	Content main box - for bg & vertical borders. */
#contentMain {
	background-color: white;
	border-collapse: collapse;
	border: solid 1px #a2a2a2; border-top: none;
	margin: 0;
	padding: 1px 10px 50px 10px;	/* Top padding fixes unwanted gap */
	background: white;
}

/* Border along bottom - IE needs bg image for round corner */
#contentBottomBorder {
	width: 100%; padding: 0; margin: 0;
	border: none; border-collapse: collapse; border-spacing: 0;
	background-color: white;
}
#contentBottomBorder TD {
	height: 28px; overflow: visible;
	margin: 0 0px 0 0; padding: 0;
	border-right: solid 1px #a2a2a2;
	background: white
		url(../images/bg/bottomBorder.gif) no-repeat
		top left;
}

/* Copyright box */
#copyright { margin: 20px; color: #999999; font-size: 10px;}


/* Page-specific menus in content area - over-ride general / body rules. */
/* 1-level */
.pgIndex { display: block;
	padding-top: 5px; float: none; clear: both;
}
.pgIndex { display: block; width: 100%;
	border: none 0 silver; border-bottom: solid 1px silver;
}
.pgIndex TD { margin: 0; padding: 0; }	/* Override std TD settings. */
.pgIndex UL, .pgIndex OL {
	display: table; /* Position & size above. */
	margin: 0 0 5px 0px;  padding: 0 0 3px 0;
}
.pgIndex UL LI, .pgIndex OL LI { display: block; float: left;
	margin: 0px 20px 0px 0px;
	padding: 5px 0 2px 0px; _padding: 4px 0 3px 0;
}
/* 2-level */
.superIndex { display: block;
	border: none 0 silver; border-bottom: solid 1px silver;
	padding-bottom: 7px; _padding-bottom: 10px;
	padding-top: 5px;
	_height: auto;
}
.superIndex UL { display: table;
	margin: 0px 10px 0px 0;
	padding: 0px 0 0px 0; _padding: 0px 0 0px 0;
	clear: both; float: none; /* font-weight: bold; */
	list-style-type: none;
}
.superIndex LI { display: block; margin: 0px 20px 0px 0; _margin-bottom: 5px;
	padding: 4px 0 3px 0; _padding: 1px 0 5px 0;
	clear: both; float: none;
	list-style-type: none;
}
.superIndex LI UL, .superIndex LI OL  { display: table; padding-left: 0px; margin-left: 25px; }
.superIndex LI UL LI, .superIndex LI OL LI { float: left;
		font-weight: normal;
		font-family: Comic Sans MS, Georgia, Times New Roman, serif;
		margin: 0px 20px 0px 0; padding: 5px 0 0px 0;
  		clear: none;
}
.superIndex LI UL LI A, .superIndex LI OL LI A { text-decoration: none; }

/* Images in content */
IMG.fig {	/* Examples, figures */
	border: solid 1px silver;
	display: block;	/* Enables margins */
	margin: 10px;
	margin-left: auto;
   margin-right: auto;
}