/* All size settings are deliberately expressed in "em" terms.
 * This includes icons and pictures. This way, if the user
 * zooms the page, all elements wil grow or shrink proportionally,
 * maintaining the intended look and feel of the page.
 * The down side is that if the page is zoomed in too much, the different
 * elements will overlap. */


/* -------------------------------------------------------------------*/
/* header settings */
h1.header {
	border-bottom: solid;
	font-family: Helvetica, Arial, serif;
	color: #000064;
}
h1.header img {
	height: 1.5em;
}
/* -------------------------------------------------------------------*/

/* -------------------------------------------------------------------*/
/* settings for the language navigator */
a.language {
	float: right;
	padding: 0.1em;
	margin: 0;
}
a.language img {
	border: 0;
	width: 2em;
	height: 1em;
}
/* -------------------------------------------------------------------*/

/* -------------------------------------------------------------------*/
/* settings for the navigation menu */
ul.navigation {
	line-height: 2em;
	font-family: Helvetica, Arial, serif;
	font-weight: bold;
	list-style-type: none;
	padding: 1em;
	margin: 0;
	position: absolute;
	top: 7em;
	left: 1em;
	width: 13em;
	background-color: #ffa000;
}
ul.navigation a {
	text-decoration: none;
	color: white;
}
ul.navigation a:hover {
	color: #000064;
	background-color: white;
}
li.selected a {
	color: #000064;
	background-color: white;
}
/* Following three entries form a really ugly submenu solution,
 * but I could not get the more elegant construction to work on IE6
 * and I did not feel like rewriting everything. This seems to work,
 * so, I will not touch it again (for now). */
li.submenu {
	list-style-type: none;
	margin-left: 2em;
	line-height: 1.1em;
}
li.submenu_selected {
	list-style-type: none;
	margin-left: 2em;
	line-height: 1.1em;
}
li.submenu_selected a {
	color: #000064;
	background-color: white;
}
/* -------------------------------------------------------------------*/



/* -------------------------------------------------------------------*/
/* settings for the body element */
body {
	background-color: #00c8f8;
}
/* Division class created so the formatting of the main content
 * will not interfere with the language bar, navigation bar
 * and page header. The settings for colors, fonts etc. are
 * also set in the following section. It is best to think of
 * this class as the one defining how the main content of
 * the page will look.
 *
 *
 * The 'line-height' element was added, because the main content
 * section sometimes containes floats, and because of the IE6
 * 'peek-a-boo' bug, the design of the site had to be comprimised
 * by adding this element. For more information see: 
 * http://www.positioniseverything.net/explorer/peekaboo.html
 *
 */
div.maincont {
	font-family: Helvetica, Arial, serif;
	padding: 1em;
	margin-left: 16.5em;
	margin-top: 0em;
	background-color: #00c8f8;
	color: #000064;
	line-height: 1.1em;
}

/* No floating elements allowed on either the left or the right
 * side of <p> elements! Change value to left | right | none if 
 * necessary. */
div.maincont p {
	clear: both;
}
/* -------------------------------------------------------------------*/


/* -------------------------------------------------------------------*/
/* Following is how is dealt with thumbs and pics */
/* settings for the thumbnail floats */
div.thumb {
	float: left;
	padding: 1em;
}

/* settings for the hyper links of the thumbs */
div.thumb img {
	border: 0;
	width: 8em;
}

/* settings for pegging the captures to the thumbs centralized */
div.thumb p {
	text-align: center;
	width: 10.67em;
	font-size: 0.75em;
}

/* settings for links leading back from a picture to main content */
p.backtext {
	font-weight: bold;
	color: #000064;
}
/* settings for pictures in zoom mode */
div.zoomed {
	text-align: center;
}
div.zoomed img{
	border: 3em solid #ffa000;
	}

/* Settings for wrapping text around images floating on the left (or right).
 * This is mostly used for images that need long descriptions.*/
img.wrapleft {
	border: 0;
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

img.wrapright {
	border: 0; 
	float: right;
	margin-right: 1em;
	margin-bottom: 1em;
}
/* -------------------------------------------------------------------*/