body {
	font-family: "Bitstream Vera Sans", "DejaVu Sans", Verdana, Arial, sans-serif;
	padding: 0;
	margin: 0;
}

.mainbox .top {
	padding: 0;
	margin: 0;
	background-color: white;
	background: url(../../images/background-top.gif) 0px -120px repeat-x white;
	border-bottom: 8px solid #666666;
}

.mainbox .top .topnavbar {
	padding: 0;
	margin: 0;
}

.mainbox .container-dutch {
	padding: 0;
	width: 720px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	margin-bottom: 18px;
	padding-left: 20px;
	padding-right: 20px;
	border: 1px solid #666666;
	background: url(../../images/background-container-dutch.gif) center center no-repeat transparent;
	background-attachment: fixed;
	font-size: 16px;
}

.mainbox .container-english {
	padding: 0;
	width: 720px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	margin-bottom: 18px;
	padding-left: 20px;
	padding-right: 20px;
	border: 1px solid #666666;
	background: url(../../images/background-container-english.gif) center center no-repeat transparent;
	background-attachment: fixed;
	font-size: 16px;
}

.mainbox .bottom {
	padding: 0;
	margin: 0;
	width: 760px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}

.mainbox .bottom .bottom-title {
	padding: 0;
	margin: 0;
	text-align: center;
	font-size: 14px;
}

h1 {
	padding: 0;
	width: 760px;
	color: #444444;
	font-size: 31px;
	margin-top: 0;
	padding-top: 19px;
	margin-bottom: 19px;
	margin-left: auto;
	margin-right: auto;
}

#home #topnav .home a,
#odf-format #topnav .odf-format a,
#pdf-format #topnav .pdf-format a,
#svg-format #topnav .svg-format a,
#djvu-format #topnav .djvu-format a,
#documents #topnav .documents a,
#info #topnav .info a ,
#contact #topnav .contact a {
	background-color: #666666;
	border-bottom: 3px solid #666666;
}

ul#topnav a:hover {
	background-color: #666666;
}

ul#topnav li {
	float: left;
}

ul#topnav {
	margin: 0;
	padding: 0;
	width: 760px;
	margin-left: auto;
	margin-right: auto;
	list-style: none;
	padding-bottom: 42px;
}

ul#topnav a {
	display: block;
	margin: 0;
	font-variant: small-caps;
	text-decoration: none;
	font-weight: bold;
	font-size: 16px;
	color: white;
	background-color: gray;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 29px;
	padding-right: 29px;
	margin-right: 4px;
	margin-bottom: 3px;
}

.mainbox .bottom ul {
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mainbox .bottom li {
	display: inline;
	margin: 0;
	padding: 0;
}

.mainbox .bottom img {
	border: none;
}

.mainbox h2 {
	margin: 0px;
	padding: 0px;
	font-size: 21px;
	color: #666666;
	padding-top: 16px;
	padding-bottom: 8px;
	margin-bottom: 16px;
	border-bottom: 5px solid gray;
}

.mainbox h3 {
	font-size: 17px;
	color: #666666;
	padding: 3px 0px 3px;
	border-bottom: 2px solid #CCCCCC;
}

#language-nav-bar {
	margin: 0;
	padding: 0;
	width: 760px;
	margin-left: auto;
	margin-right: auto;
}

ul#language-nav {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

ul#language-nav li {
	display: inline;
}

ul#language-nav a {
	background-color: gray;
	font-variant: small-caps;
	text-decoration: none;
	font-size: 14px;
	color: white;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 4px;
	padding-bottom: 2px;
}

ul#language-nav a:hover {
	background-color: #666666;
}

/* general a class */
body a {
   font-size: 14px;
   color: #003bbc;
}

/* class to create a grey background for p elements inside li
   tags. Used on documents/materialen page. It may be better if
   this class is de-generalised in the future */
li p {
   width: 80%;
   font-size: 14px;
   background-color: #eeeeee;
   margin-top: 2px;
}

/* class .ok used to display ok.png to show advantages */
.ok {
   padding-right: 5px;
}

/* class .advantage used to display text bold and in grey color
   so that it will be seen. Used in span and li element, but can
   be used in other places as well */
.advantage {
	font-size: 17px;
	color: #666666;
}