a:link 
{	color: green;
}

a:visited 
{	color: green;
}

a:hover
{	color: yellow;
	background: #44C044;
	text-decoration: none;
}

body 
{	font-family: helvetica,arial,sans-serif;
	font-size: 0.9em;
	line-height: 1.4em;
	background-color: #DDFFDD;
}

/* ******* Layout ******* */

#container
{	margin: 0 auto;
	width: 1024px;
	background: white;
}

#header
{	background: white;
	padding: 0px;
	height: 52px;
}

#content
{	clear: left;
	float: left;
	width: 584px;
	padding: 0px 7px 0px 8px;
	display: inline;
	background: white;
	border-right: 1px solid #DDFFDD;
}

#footer
{	clear: both;
	background: #DDFFDD;
	text-align: right;
	padding: 4px;
	border-top: 2px solid black;
	font-size: smaller;
}

/* ***** Layout End ***** */

.pix				/* picture column with frame +optional txt */
{	position: absolute;
	margin-left: 600px;
	background-color: black;
	font-size: smaller;
	line-height: 1.2em;
	color: white;
	padding: 0px;
	border: 3px solid black;
	z-index: 10;
}

.pix_float			/* picture floating (rhs) */
{	position: absolute;
	margin-left: 600px;
	padding: 0px;
	z-index: 10;
}

.pix_textbox			/* text box on image side (rhs) */
{	width: 400px;
	position: absolute;
	margin-left: 600px;
	background-color: black;
	color: white;
	padding: 0px;
	border: 3px solid black;
	z-index: 10;
}

.pix_static
{	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 20;
}

.image				/* inline main content framed (pix+txt) & centred */
{	margin-right: auto;
	margin-left: auto;
	background-color: black;
	font-size: smaller;
	line-height: 1.2em;
	color: white;
	padding: 2px;
	border: 1px solid black;
}

.indent_box
{	position: relative;
	left: 32px;
	width: 544px;
	background-color: #F0F0F0;
	padding: 4px;
}

.mail
{	position: relative;
	left: 36px;
	width: 520px;
	background-color: white;
	padding: 4px;
	margin: 4px;
	border: 1px solid black;
	font-family: courier, monospace;
}

.centre
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.date
{	text-align: right;
	font-size: 200%;
	font-weight:900;
	color: #A0A0A0;
	margin-top: 24px;
}

.post_title
{	font-size: larger;
	font-weight: bold;
	color: white;
	background-color: black;
	padding: 5px;
	margin-bottom: 5px;
}

.insert
{	width: 800px;
	border: 2px solid grey;
	padding: 5px;	
	background-color: #F0F0F0;
}

.jump_list
{	list-style-type: square;
}

.callout 
{	outline: none;
	color: #008000;
	border-bottom: 2px dotted #44C044;
}

.callout:hover
{	background-color: #44C044;
	color: yellow;
}

.callout span
{	z-index: 100;
	display: none;
	padding: 16px;
	margin-top: -32px;			/*top of box*/
	margin-left: 0px;			/*left of box*/
	width: 400px;
	border-radius: 12px;			/*CSS3 only*/
	box-shadow: 8px 8px 8px #808080;	/*CSS3 only*/
}

.callout:hover span
{	display: inline;
	position: absolute;
	color: white;
	border: 2px solid #44C044;
	background: black;
}

/********* Navigation Tree **********/

.navitree, 
.navitree ul,
.navitree li,
.navitree img
{	padding: 8px;		/* whole navi-tree colour block */
	margin: 0px;
	line-height: 1em;
	z-index: 99;		/* ensure on top */
}

.navitree
{	float: left;
	width: 584px;		/* width of BLACK navi-tree space (minus padding)*/
	color: red;
	background-color: black;
}

.navitree > li
{	float: left;		/* build from left to right */
}

.navitree li			/* horizontal level 1, always displayed */
{	list-style-type: none;
	font-weight: bold;
	font-size: large;
	border: 1px solid white;
	color: white;		/* list item without href link */
	background-color: black;
	padding: 4px;
	margin: 1px;
}

.navitree ul
{	display: none;		/* off until hover */
	position: absolute;
	margin-left: -2px;
	margin-top: -8px;
	background-color: black;
	padding: 1px;		/* drop-down to define border (level 2) */
}

.navitree li:hover > ul
{	display: block;		/*display level 2 */
}

.navitree ul.parent_hover
{	display: block;
}

.navitree a
{	color: #80FF80;
	display: block;
	width: 100%;
	text-decoration: none;
}

.navitree img
{	padding: 0px;
}

.navitree li:hover
{	color: #DDD;
	background-color: #44C044;
}

.navitree a:hover
{	color: yellow;
	background-color: #44C044;
}

.navitree ul ul
{	margin-top: -20px;	/* vertical placement fly-out level 3 */
	left: 90%;		/* horizontal placement fly-out level 3 */
}

.navitree ul img
{	position: absolute; 
	right: 10px;		/* vertical placement fly-out level 3 */
}

.navitree span
{	display: block;
}

.endtree
{	clear: left;
}

/********* Navigation Footer **********/

.navi
{	padding: 8px;		/* whole navi colour block */
	margin: 0px;
	width: 584px;
	z-index: 99;
	background-color: black;
	float: left;
	list-style-type: none;
}

.navi li a
{	display: block;
	width: 88px;
	color: #80FF80;
	font-weight: bold;
	font-size: large;
	height: 1em;
	background-color: black;
	padding: 4px;
	text-align: center;
	text-decoration: none;
	border: 1px solid white;
	margin: 1px;
}

.navi li a:hover
{	color: yellow;
	background-color: #44C044;
}

.left { float: left; }
.right { float: right; }