/******* structure and layout *******/

body {
font-family:"Courier New", Courier, sans-serif;
font-size: small/100%; /* This makes sure IE users can increase fontsize with their browser.  */
color: #000000;
background: #FFFFFF;
margin-top: 2%; /* get of that top! */
margin-bottom: 2%; /* And stay of the bottom as well! */

}
#container { /* <DIV #1> */
width: 800px; /* 900px-nb, 680, Edit this to change the width of your site. Set it to 100% for some fun :-) */
margin-left: auto;  /* This keeps the template centered. */
margin-right: auto; /* This keeps the template centered. */

}

#header {
width: 750px; /* Just as wide as the container, ofcourse. */
height: auto; /* No need to set height, just some padding around the headers is enough to get height. */
text-align: right; /* The text in this header should align right in my humble opinion... */
padding: 3% 4%; /* padding top is 3% and padding right is 4%. This creates the height of the header. */
background: #FFFFFF;
color:#000000; /*line-height:1em;*/
border-bottom: #eeeeee 2px solid;
}
         #over {
	color:#454789;
	background:transparent;
	text-align:right;
	font-size:80%;
	padding:0 1%;
	}

         #over a {
	color:#493377;
	text-decoration:overline;
	}

	#over a:hover {
	color:#D12C44;
	text-decoration:none;

}

#core_container { /* <DIV #3> */
/* This div will hold all textual contents in the core of your page, hence core_container... */
	width: 100%; /* Just as wide as the #container, since it's still in there. */
	background-color: #FFFFFF; /* Good ol' white. */
         padding-top: 1%;
}

#leftcore {
width:140px; /* orig: 180px, A fixed width to display the images correctly below eachother. */
float: left; /* Always stay on the left side of the #core_container. */
padding: 6px; /* 12px space inside this div before anything happens. */
_padding: 3px; /* IE HACK. 6px space for IE, because of the boxmodel error. Remove this and check the page in IE... :( */
height: auto; /* Height is automaticlly calculated. No need to set it. */
background-color: #FFFFFF; /* #FFFFFF. */
margin: 1%;
/* border-left: #eeeeee 2px solid;
}

         #leftcore img {
		border: 0; /* The images on the left may not have a border. */
	}
         #leftcore p { /* The paragraphs in #core_right should have this styling: */
		font-family: "Courier New", Courier, sans-serif; /* Font... */
		font-size: 75%; /* 80% of the font-size from the body tag. */
		line-height: 15px; /* The whitespace between the lines. */
                 color: #575757;
                 padding-top: -20%;
                 padding-bottom: -10em;
	}
	#leftcore a, #leftcore a:link, #leftcore a:visited {
		color: #493377; /* All links, visited or not are black. */
		text-decoration: underline; /* with no line under it. */
                 font-family: "Courier New", Courier, sans-serif;
	}
	#leftcore a:hover {
		color: #D12C44; /* Oceanblue linktext on hover. */
	}
	#leftcore h1 {
		vertical-align: center; /* Appear in the center of the #header. */
                 font-size: 14px;
		line-height:20px;
		letter-spacing:-1px;
		text-align: left;
		color:#454789;
		font-family: "Lucida Grande", Verdana, Helvetica, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
                 padding-bottom: 1%;
         }
	#leftcore li { /* The contents of core_left is presented in an unordered list. Here it is. */
		font-size: 12px; /* Fontsize and styling. */
		font-family: "Courier New", Courier, sans-serif;
	}
	.litxt { /* This is the text in the unordered list within core_left, with 5% space on the left. */
		padding-bottom: 10px;
		width: 95%;
		padding-left: 5%;
	}
	#leftcore ul { /* this is the ul styles for core_left. */
		list-style: none; /* No dot in the list please. */
		padding-left: 0px; /* Get yourself to the left of the page. */
		margin-left: 0; /* IE needs this to do the same as stated above... */
	}

#centercore {
width: 600px; /* 650px-nb, this div is 466px wide and contains all contents on the right of the page. */
margin: 0.5%; /* No margins, no paddings. */
padding: 0;
float: left;
border-left: #eeeeee 2px solid;
background:#ffffff;

}

	#centercore p { /* The paragraphs in #core_right should have this styling: */
		font-family: "Courier New", Courier, sans-serif;  /*Trebuchet MS, "Verdana", sans-serif; /* Font... */
		font-size: 80%; /* 80% of the font-size from the body tag. */
		line-height: 20px; /* 20px, The whitespace between the lines. */
                 margin-bottom: 2em; /*2em */
}
          #centercore h2 { /* The headers in #core_right */
		/*position: relative;/* All sizes, paddings and margins are measured relative to #header h1. */
                 margin-bottom: 0.5%;
                 margin-top: 1em;
		vertical-align: center; /* Appear in the center of the #header. */
                 font-family:'Lucida Grande', Helvetica, sans-serif;
		font-size: 24px;
		line-height:26px;
		letter-spacing:-2px;
		text-align: left;
		color:#795A9E;
                 }

	#centercore h3 { /* The headers in #core_right */
 		position: relative;/* relative - nb, All sizes, paddings and margins are measured relative to #header h1. */
 		margin-bottom: -1em;
		vertical-align: center; /* Appear in the center of the #header. */
		font-size: 110%; /* 90% of the size of the font-size from the body. */
		font-weight: 600; /* a bolder font. 600 for even bolder, 100 for very sleek. */
		color: #454789; /* Ocean blue color... */
		letter-spacing: -2px; /* spread those letters over your screen a bit more */
		font-family: 'Lucida Grande', Helvetica, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
	}
	#centercore p, #centercore h2, #centercore h3  {
		padding-left: 5%; /* The headers and paragraphs in core_right should stay 5% off the edge of div #core_right. */
	}
	#centercore a, #centercore a:link, #centercore a:visited {
		color: #493377; /* All links, visited or not are black. */
		text-decoration: underline; /* with no line under it. */
                 font-family: "Courier New", Courier, sans-serif; /*Trebuchet MS, "Verdana", sans-serif; */
                 font-size: 90%;
	}
         #centercore a:hover {
                 color: #D12C44;
                 text-decoration: none;
	}
         #centercore ul {
         list-style-type: circle;
         padding-left: 16px;
         padding-top: 10px;
         width: 420px;
         font-size: 90%;
         font-family: "courier new", courier, sans-serif;
         }

#footer { /* The bottom, with the copyright notice. */
	clear: both; /* Appear UNDER core_right, not next to it. Not even with changed width on #container. */
	width: 800px; /* 680px? Yep, the same width as #container. */
	height: 20px; /* Give it some height! */
	text-align: center; /* The text should appear on the rightside of the footer. */
	margin-top: 80px;
}
	#footer p { /* The <p> within the footer is styled here. */
		text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
		background: #FFFFFF url(../images/diags.jpg)  0% 30% repeat-x; /* Those cool diagonal lines in the back. */
		font-size: 60%; /* An even smaller font then the list we just did. */
		color: #000000; /* Ocean blue color... */
		letter-spacing: 1px; /* spread those letters over your screen a bit more */
		font-family: Trebuchet MS, "Verdana", sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
	}
	#footer a { /* The <a href="... tags in the footer are styled here. */
		text-decoration: none; /* No lines under the text. */
		color: #000000; /* Black beauty. */
	}