/* Stylesheet for steeneken.com
 * Copyright (C) 2005 H.J.M. Steeneken
 */

body {
	margin: 20px 0px 20px 0px;
	text-align: center;
	background-color: #FFFFDC;
	font-family: 'Gill Sans', Tahoma, Verdana, sans-serif;
}

/* Wrapper will be one 777 pixel-wide DIV that will be divided in two columns
 * being the page content (contentwrap) and the navigation bar at the left
 * hand side (links).
 */
#wrapper {
	width: 777px;
	margin: 0px auto 0px auto;
	text-align: left;
	/* DISABLED
	background-color: #FFFFDC;
	border: 1px solid #BBBBBB;
	*/
}

/* This is the right-hand side of the page where the page
 * contents are.
 */
#contentwrap {
	width: 600px;
	margin: 0px auto 0px 8px;
	text-align: left;
	border: 1px solid #BBBBBB;
	/* DISABLED
	margin: 0px auto 0px auto;
	background-color: #FFFFDC;
	*/
}

/* This is the left-hand side of the page where the navigation list
 * is.
 */
#links {
	width: 150px;
	margin: 0px auto 0px auto;
	text-align: right;
	border: 1px solid #BBBBBB;
	/* DISABLED
	height: 100%;
	background-color: #FFFFDC;
	*/
}

/* The page contents, anything can go in here
 */
#content {
	width: 550px;
	margin: 0px 22px 0px 12px;
	text-align: left;
	/* DISABLED
	border: 0px solid #EEEECB;
	*/
}

/* Navigation bar (left)
 */
#navlist {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px; 
	font-family: 'Gill Sans', Tahoma, Verdana, sans-serif;
}

/* We (ab)use an unordered list <ul> for the nav-bar. Basically, each
 * <li> item should be a link to a place on the page. The <li> box is
 * the one we highlight. Hovering over the <a> is a bad idea because
 * the bounding box is much different
 * 
 * top right bottom left
 */
#navlist li {
	line-height: 20px;
	margin: 8px 0px 8px 0px; 
	padding: 6px 7px 6px 5px; 
	list-style-type: none; 
	border-top: 1px solid #FFFFDC;
	border-bottom: 1px solid #FFFFDC;
	/* We are doing this for internet explorer. For Mozilla
     * just adding a li:hover will do. IE however does not
     * implement hover on li elements
	 */
	behavior: url( /css/hover_navlist.htc );
}

/* This we do for Mozilla and other strict CSS browsers. It looks
 * EXACTLY the same on IE and Mozilla, it is just that on IE we have
 * to use Javascript to set these exact same attributes because it
 * does not implement hovering for <li> 
 */
#navlist li:hover {
	line-height: 20px;
	background-color: #FFF7DC;
	border-top: 1px solid #7F7F6E;
	border-bottom: 1px solid #7F7F6E;
}

#navlist li img {
	vertical-align: text-bottom;
}

/* The links in the navigation-list with their decorations.
 */
#navlist a:link, #navlist a:visited {
	/* float: top; */
	margin: 10px 0px 10px 4px;
	font-size: 0.8em;
	text-decoration: none;
	color: #0000F0;
	font-weight: bold;
}

/* Page header showing either the name of the page, or a link to the
 * site and some info
 */
#header {
	font: italic normal 150% Georgia, 'Times New Roman', Times, serif;
	color: #000000;
	letter-spacing: 0.15em;
	text-align: right;
	margin: 0px 0px 0px 0px;
    border-bottom: 1px solid #BBBBBB;
    padding-top: 5px;
    padding-bottom: 5px;
	/* DISABLED
	text-shadow: black 3px 3px 3px;
    border-top: 1px solid #7F7F6E;
	*/
}

/* Make sure that text-links in the header don't get a weird browser-
 * default color
 */
#header a {
	color: #000000;
	text-decoration: none;
}

/* ... But color them differently on hovering
 */
#header a:hover {
	color: #000055;
	text-decoration: none;
}

/* Title of the page
 */
#title {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #3399FF;
}

#title p {
	font: normal 200% 'Gill Sans', Tahoma, Verdana, sans-serif; 
	color: #3333CC;
	background-color: #3399FF;
	text-align: center;
	margin: 0px 0px 0px 0px;
    padding-top: 10px;
    padding-bottom: 10px;
	/* DISABLED
	text-shadow: black 3px 3px 3px;
	*/
}

/* Subtitle part of the page head
 */
/* Title of the page
 */
#subtitle {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#subtitle p {
	font: normal 110% 'Gill Sans', Tahoma, Verdana, sans-serif; 
	letter-spacing: 0.05em;
	color: #FFFFDC;
	background-color: #3399FF;
	text-align: center;
	margin: 0px 0px 0px 0px;
    padding-top: 5px;
    padding-bottom: 15px;
}

#content {
	padding: 0px 0px 0px 0px;
	margin: 20px 0px 0px 20px;
    /* DEBUG
     * background-color: #00FF00;
     */
}

/* Links in the page content are just colored, and NOT underlined
 */
#content a {
	color: #0000F0;
	text-decoration: none;
	border-bottom: none;
	/* border: none; */
	/* border-bottom: 0px solid #0000FF; */
}

/* ... but they get a dashed line when they are hovered over
 */
#content a:hover {
	color: #0000FF;
	border-bottom: 1px dashed #FF0000;
}

/* ... unless border-less links are ordered in the <a>
 */
#content a.noborder, #content a.noborder:hover {
	border-bottom: none;
	border: 1px solid #FFFFDC;
}

/* Default font-sizes are awful, so this is what we'll do...
 */
#content h1 {
	font-size: 1.8em;
	line-height: 2.3ex;
	margin: 20px 0px 3px 0px;
	color: #000000;
}

#content h2 {
	font-size: 1.5em;
	line-height: 2ex;
	margin: 20px 0px 3px 0px;
	color: #000000;
}

#content h3 {
	font-size: 1.2em;
	line-height: 1.7ex;
	margin: 20px 0px 3px 0px;
	color: #000000;
}

#content h4 {
	font-size: 0.9em;
	line-height: 1.4ex;
	margin: 20px 0px 3px 0px;
	color: #000000;
}

/* Nasty trick to allow us to size an empty line below the page head
 * without having to use spacer images
 */
#empty {
	font: normal 2px 'Gill Sans', Tahoma, Verdana, sans-serif; 
	color: #FFFFDC;
	text-align: center;
	margin: 0px 0px 0px 0px;
    padding-top: 1px;
    padding-bottom: 1px;
	/* DEBUG
	background-color: #FF0000;
	*/
}

/* The EDITABLE region in the page content is enclosed in a POST class
 * DIV.
 */
.post {
	color: #000000;
	margin-left: 20px;
	font-size: 13px;
	line-height: 18px;
	/* DEBUG
	background-color: #00FF00;
	border: 1px solid #0000FF;
	*/
}

.post p {
	color: #000000;
}

.post td {
	color: #000000;
}

.post ul {
	color: #000000;
}

.post p.linkheading {
	font: normal 130% 'Gill Sans', Tahoma, Verdana, sans-serif; 
	color: #FFFFDC;
	background-color: #3399FF;
	text-align: center;
	margin: 0px 0px 0px 0px;
    padding-top: 5px;
    padding-bottom: 5px;
	/* text-shadow: black 3px 3px 3px; */
}