body {
	background-color: #D8D8D8;
	font-size: 10px;
	font-family: Verdana, Arial, Sans-Serif;
	padding: 0;
	margin: 0;
}

a { position: relative; }
  
/* Color and style of (visited) links */
a:link, a:visited {
	text-decoration: none;
	color: #0000FF;
	/* DJ: used to be #0D37565 */
} 

a:hover {
	text-decoration: underline;
}

/* WIDTH = Size of main page */
/* DJ: increased width from 78 to 88 */
/* xxx */
#page {
	color: #3F3F3F;
	width: 88em;
	margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
	border-left:    1px solid #CCC;
	border-right:   1px solid #CCC;
	border-bottom:  1px solid #CCC;
}

/* What is VIS  */
/* WIDTH = Size of header */
/* DJ: increased width from 78 to 88 */
#header, 
#vis {
	padding: 0; margin: 0;
  height: 12.5em !important;
  max-height: 16em !important;
	width: 88em;
	position: relative;
}


/* ----- BACKGROUND color for Banner plus Overlapping picture */
/* -- Backgrouns is now IE compatible (big stretched transparent gradient */
/* -- To change back to old fast, gradient.png and add  repeat-x top;  */
#header {
	background: #134A86 url("gradient_blue_logo.png");
	}


/* ----- HEIGHT is the LOGO height!  */
#logo {
  width: 22em;
	height: 12em;
	display: block;
/* DJ: Removed this background line because I stopped using the 2 transparent pictures (background and logo). This caused a lot of issues with IE6.0. You need the stupid workaround that causes issues with the tab menu and the lighthouse script for example.
 	background: transparent url("logo_smaller.png") no-repeat center;
*/
}


/* =================================================================== CONTENT     */
#content {
	background-color: #ffffff;
	padding: 0;
/* Margin-top = Space between header and main content (not the sidebar!) */	
/* DJ: Increased width from xx to 70em ! */
	margin-top: 2.5em;
	padding-bottom: 4em;
	margin-left: 17em;
	width: 70em;
}

#content p, 
#content ul, 
#content ol, 
#content pre, 
#content td {
	font-size: 1.2em;
}

#content table.quickref{
  width: 45em;
}

#content table.quickref td {
	font-size: 0.95em;  
}

/* #content table {
  border: 0;
} */

#content table tr, 
#content table td {
  padding:0; margin:0;
}

#content table td {
  padding-right:  6px;  
  padding-bottom: 12px;  
}

/* DJ: This WIDTH defines the width that guestbook.php uses for its forms? WHAT ELSE? Values were width 50 and height 30 */
/* DJ: These settings also change the EDIT form size */
/* DJ: These settings also apply to the CommentBox cookbook */
#content textarea {
  width:45em; height:40em;
  font-family: monospace;
}
/* DJ: Deze heb ik aangemaakt om de size van de CommentBox input boxes te bepalen zonder invloed te hebben  */
/* op de EDIT mode van PmWiki. In de CommentBox.php verwijs ik dus naar class "input" voor de textarea */
#content textarea.input {
	width: 300px;
	height: 80px;
}

#content h1 {
  font-size: 1.7em;
}

#content h2 {
  font-size: 1.4em;
}

#content h3 {
  font-size: 1.2em;
}

#content ul {
	padding-left:2em;
}

div#content { 
	min-height: 35em;
}


/* =================================================================== SIDEBAR     */
#sidebar {
  float: left;
	width: 12em;
	margin: 0;
	padding: 1.5em 2em 2em 1em;
}
/* Padding top,right,bottom,left */


#sidebar p, #sidebar li, #sidebar ol{
	font-size: 1.1em;
}

#sidebar ul { list-style:none; padding:0px; margin:0px; }
#sidebar li { margin:0px; margin-bottom: 0.2em;padding-left: 0.6em; }


/* =================================================================== SUPTITLE     */
#suptitle p, #suptitle ul {
	font-size: 1.1em;
	padding: 0.4em 0;
}

#suptitle p {
	float: left;
	padding-left: 1em;
}

#suptitle ul {
	text-align: right;
	padding-right: 1em;
}

#suptitle ul li {
	display: inline;
	margin-left: 1em;
}


/* =================================================================== MENU     */
/* MENU UL width defines how much space you have for your TabMenu's */
#menu ul {
  position: absolute;
  width: 65em;
	margin: 0;
	padding: 0;
	bottom: 0;
	top: 10em;
	left: 12em;
	}

#menu ul li {
  position:relative;  
	display: inline;
	margin: 0 0.5em 0 0;
	font-size: 1.1em;
}

#menu ul,
#menu ul li a {
/*             LEFT  BETWEEN  FROM-HEADER-BOTTOM? */
	padding: 0.5em 1.5em 0.6em;
	margin: 0 1.5em;
	}

#menu ul li a {
  position: relative;  
	font-size: 1em;
	color: #fff;
	margin: 0;
	}

/* ----- MOUSE over MENU */
#menu ul li a:hover {
	color: #fff;
	 background: #000000;
	text-decoration: none;
	}

/* ----- ACTIVE (%here%) MENU settings (idle and hover)  */
#menu ul li .here a, 
#menu ul li .here a:hover {
	color: #134A86;  
	background: #fff; 
	}

/* =================================================================== FOOTER     */
#footer {
	clear: both;
	margin: 0;
	color: yellow;
	padding: 0;
	margin-bottom: 1em;
	text-align: center;
}

#footer a {
  margin: 1em;
}

#footer a:link, #footer a:visited {
	color: #777;
	text-decoration: none;
}

#footer a:hover {
	color: #FFF;
	text-decoration: underline;
}

.clear {
  clear: both;
}

 #largeimage, #largeimage1, #largeimage2, #largeimage3, #largeimage4, #largeimage5, #largeimage6, #largeimage7, #largeimage8, #largeimage9, #largeimage10, #largeimage11 {
   width: 38%;
   cursor: pointer;
   position: absolute;
   right: 480px;
   bottom: 200px;
   visibility: hidden;
}
#largeimage img, #largeimage1 img, #largeimage2 img, #largeimage3 img, #largeimage4 img, #largeimage5 img, #largeimage6 img, #largeimage7 img, #largeimage8 img, #largeimage9 img, #largeimage10 img, #largeimage11 img {
   border: 2px solid #000000;
}
#smallimage img {
   cursor: pointer;
   width: 120px;
   float: right;
   border: 1px solid #000000;
   margin: 0px 10px 0px 10px;
}

/* DJ: added this for table formatting */
table.firstrow th { background-color:#ddddff; }
table.firstrow tr { height=5; }

/* DJ: infobox class added for the blue US factbox - can be used in other places as well */
table.infobox  { 
	background-color: #ddddff;
	border-style: solid;
	border-color: blue;
	border-width: 2px;
	border-spacing: 0px 0px;
	cellpadding: 0;
	left: 300;
	line-height: 80%;
}