/* ---------------------------------------------------------------------
	OVERALL DOCUMENT
--------------------------------------------------------------------- */

*
{
margin: 0;
padding: 0;
}

body
{
	max-width: 700px;
    width: 100%;
    font: serif;
    font-size: 16px;
	background-color: #E3E3E3;
	margin: auto;
}

#page-header
{
	font-size: 12px;
	text-align: center;
	padding: 12px;
}

/* ---------------------------------------------------------------------
	POSITIONING
--------------------------------------------------------------------- */

blockquote
{
	position: relative;
	padding: 0;
	margin: 0;
	left: 24px;
	right: 48px;
	top: 0;
}

.content
{
	margin: 6px 24px;
/*
	position: relative;
*/
}

.left-half
{
	width: 49%;
	display: inline-block;
	text-align: left;
}

.right-half
{
	width: 50%;
	display: inline-block;
	text-align: right;
}

.left
{
	text-align: left;
	float: left;
}

.center { text-align: center; }

.clear { clear: both; }

.right
{
	text-align: right;
	float: right;
}

.top-left
{
	position: absolute;
	top: 0;
	left: 0;
}

.top-right
{
	position: absolute;
	top: 0;
	right: 0;
}

.bottom-left
{
	position: absolute;
	bottom: 0;
	left: 0;
}

.bottom-right
{
	position: absolute;
	bottom: 0;
	right: 0;
}

.push-down { margin-top: 18px; }

.signature { text-align: right; }

.text	{ text-align: left; }


/* ---------------------------------------------------------------------
	OTHER CLASSES
--------------------------------------------------------------------- */

.as-block { display: inline-block; }

.as-inline { display: inline; }

.big { font-size: 125%; }

.clickable {cursor: pointer;}

.flat { white-space: nowrap; }

.dark { background-color: silver; }

.frame
{
	position: relative;
	margin: 12px;
	padding: 12px;
	border: 3px silver solid;
}

.light { background-color: #E3E3E3; }

.important
{
	color: #993300;
	font-weight: bold;
}

.nav
{
	font-size: 14px;
	height: 14px;
}

.screen-only { media: screen; }

.small { font-size: 80%  }

.up-to-top
{
	display: block;
	text-align: right;
	width: 9px;
	padding: 5px;
	margin: 5px 12px;
}

.white { background-color: #FFFFFF; }

/* ---------------------------------------------------------------------
	ELEMENTS
--------------------------------------------------------------------- */

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: navy; }
a:active { color: red; }

big { font-size: 125%; }

small { font-size: 80%}

em
{
	font-weight: bold;
	font-style: normal;
}

dl { padding-top: 8px;}
dd { margin-left: +36px; }

	dl dl { padding-top: 0 }

h1
{
	text-align: center;
	font-size: 32px;
	padding: 12px;
}

h2
{
	font-size: 24px;
	padding-top: 12px;
}

details summary
{
	font-size: 24px;
	padding-top: 12px;
	font-weight: bold;
	cursor: pointer;
}

details details summary
{
	font-size: 20px;
	padding-top: 12px;
	font-weight: bold;
	cursor: pointer;
}

h3
{
	font-size: 18px;
	font-weight: bold;
	padding-top: 10px;
}

/* Double-color dashed line */

hr
{
    border: 2;
    border-bottom: 1px dashed silver;
    background: #000;
}

img
{
	margin: 6px 18px 6px 18px;
	border: 0;
}

	.nav img { margin: 0; }

	.main img { margin: 0 12px 0 0; }

	img.tight { margin: 0; }

	img.loose { margin: 9px; }

iframe
{ border-style: none; }

input
{
	height: 21px;
}

	input.button
	{
		white-space: pre;
		color: blue;
		background-color: #eee;
		cursor: pointer;
		font-style: bold;
		border-top: 2px white solid;
		border-left: 2px white solid;
		border-right: 2px #999 solid;
		border-bottom: 2px #999 solid;
	}

	input.button:hover
	{
		color: navy;
		background-color: silver;
		border-top: 2px #555 solid;
		border-left: 2px #555 solid;
		border-right: 2px white solid;
		border-bottom: 2px white solid;
	}

	input.button:active
	{
		color: red;
		background-color: #eee;
		border-top: 2px white solid;
		border-left: 2px white solid;
		border-right: 2px #999 solid;
		border-bottom: 2px #999 solid;
	}

object
{
	margin: 18px 18px 6px 18px;
	border: 0;
}

ol
{
	list-style-position: outside;
	margin-top: 12px;
}

	ol>li { margin: 0 24px; }

p { padding-top: 8px; }

.content ul {margin: 0 24px; }

ul
{
	list-style-type: disc;
	list-style-position: outside;
}

ul ul { list-style-type: circle; }

ul ul ul { list-style-type: square; }

ul.horiz { padding: 6px 0 0 0; }

	ul.horiz>li
	{
		display: inline-block;
		width: 60px;
		text-align: center;
		list-style-type: none;
		white-space: nowrap;
		padding: 0 12px;
		margin: 0 12px;
	}

ul.no-bullets { list-style-type: none }

header, section, footer, aside, main, article, figure
{
    display: block;
}


/* ---------------------------------------------------------------------
	TOOLTIPS -- based on <HTTP://PSACAKE.COM/WEB/JL.ASP>
	Note: no space before "hover"
--------------------------------------------------------------------- */

a.info, span.info
{
    background-color: transparent;
    position:relative; /*this is the key*/
    z-index:24;
    color:#000;
    text-decoration:none
}

a.info
{
	display: block;
}

span.info
{
	display: inline;
    color: blue;
}

a.info:hover, span.info:hover
{
	z-index:25;
	background-color:#ff0;
}

a.info span, span.info span {display: none}

a.info:hover span, span.info:hover span
{ /*the span will display just on :hover state*/
    display: block;
    position: absolute;
    width: auto;
    padding: 3px;
    border: 0;
    background-color: yellow;
    text-align: center;
    font-size: 12px;
    white-space: nowrap;
    color: navy;
}

a.info:hover span
{
    text-decoration: underline;
}

	.top-left a.info:hover span, span.info:hover span
	{
		left: 0;
  	    bottom: 12px;
	}

	.top-right a.info:hover span
	{
		right: 0;
  	    bottom: 12px;
	}

	.left a.info:hover span
	{
		left: 6px;
		bottom: 0px;
	}

	.right a.info:hover span
	{
		right: 4px;
		bottom: 0px;
	}

	.bottom-right a.info:hover span
	{
		right: 0;
	}

	.up-to-top a.info:hover span
	{
		right: 9px;
		bottom: -3px;
	}

/* ---------------------------------------------------------------------
	DROP-DOWN MENU -- based on
 	Horizontal CSS Drop-Down Menu Module   http://www.lwis.net/
--------------------------------------------------------------------- */

ul.dropdown
{
 position: relative;
 z-index: 597;
}

ul.dropdown li:hover
{
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul
{
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown li:hover > ul
{
	display: block;
	list-style: none;
	visibility: visible;
	padding: 0 3px;
	margin: 0;
	border: 0;
	background-color: aqua;
	color: navy;
	line-height: 16px;
	text-align: center;
	font-size: 12px;
	text-decoration: underline;
}

ul.dropdown li:hover > ul > li:hover
{ 	background-color: yellow; }