/*
 * De algemene Layout CSS
 */

/* Reset -------------------------------------------------------------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, input, select { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; text-align: left; }
table {border-collapse: collapse; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
table, td, th {vertical-align: middle;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: none;}
:focus {outline: 0;}

/* General ------------------------------------------------------------------ */

html 
{
	height: 100%;
	/*padding-bottom: 1px;*/ /* force scrollbars */
}

body 
{
	background: url('../images/layout/bg.jpg');
	color: #444;
	/* font: normal 80% sans-serif; */
        font: 70% 'Lucida Grande',Verdana, Helvetica, sans-serif;
	line-height: 1.5;
	padding-bottom: 15px; /* Globale bottomspace */
}

/* Layout ------------------------------------------------------------------- */

#layout_overallwrapper
{
	margin: 15px auto; /* Globale topspace, auto voor de rest nodig! */
	text-align: center; /* Dit is nodig om de layout te centreren */
}

#layout_wrapper
{
	margin: auto; /* Dit is nodig om de layout gecentreerd te houden */
	padding: 4px; 
	background-color: #FFF;
	width: 980px !important; /* overallwidth -> door de padding 980 + 2*4 = 988 ! */
	max-width: 980px !important; /* overallwidth -> door de padding 980 + 2*4 = 988 ! */	
	/*height: auto !important;*/ /* For Modern Browsers */	
}

/* Header */
#header_wrapper 
{
	background: #222 url('../images/layout/header.jpg') repeat-x;
	height: 120px;
}

#site_title
{
	padding: 24px 24px 0 24px;
}

#site_title h1 
{
	color: #A0C3D0;
	font-size: 2.5em;
}

#site_title h2 
{
	color: #999;
	font-size: 1.3em;
}

/* Navigation */
#navigation_wrapper
{
	background: #6E7D85 url('../images/layout/navigation.gif') repeat-x;
	padding-top: 4px;
	height: 42px;	
}

#navigation 
{
	
}

#navigation li
{
	border-right: 1px solid #54646C;
}

#navigation a 
{
	color: #E0E6EA; 
	display: block;
	font-weight: bold;
	text-decoration: none;
	padding: 9px 12px;
	font-size: 1.1em;
}

#navigation a:hover 
{
	color: #F0F6FA;
	background-color: #5E6D75;
}

/* Maincontent */
#main_wrapper
{
	margin: 4px 0 0 0;
	border-left: solid 1px #C7C7C4;
	border-right: solid 1px #C2C2C0;
	border-bottom: solid 1px #C7C7C4;
	border-top: solid 1px #C7C7C4; 
	background: url('../images/layout/main-bg.jpg') repeat-y;
}

#content_wrapper
{
	border-right: solid 1px #C7C7C4; /* Border wordt ook gezet door de background-image */
	background-color: #F2F2F2;
	width: 741px; /* Vaste breedte content (781 - eigen padding! ) */
	padding: 20px 30px 20px 10px;
}

#sidebar_wrapper
{
	border-left: solid 1px #F6F6F7; /* Border wordt ook gezet door de background-image */
	background-color: #E0E2E4;
	width: 185px; /* (overallwidth)980 - (content+padding+border)782 - 2(buitense borders) = [ 195 - eigen padding! ] */
	padding: 5px;
}

#sidebar_wrapper .box
{
	margin: 10px 30px 5px 30px; 
}

/* Footer */
#footer_wrapper
{
	padding: 4px 0 0 0;	
	margin: 0;
}

/* FootDashbord */
#dashboard
{
	background: #C9CDCF url('../images/layout/dashboard.gif') repeat-x;
	border: 1px solid #ACAFB0;
	color: #404448;
	padding: 10px 0 10px 0;
	margin: 0;
}

#dashboard ul 
{
	margin: 0;
}

#dashboard li 
{
	border-bottom: 1px solid #BABEBF;
	list-style: none;
	padding: 5px 0;
}

#dashboard li a 
{
	color: #404448;
	text-decoration: none;
}

#dashboard li a:hover 
{
	color: #202428;
	text-decoration: underline;
}

#dashboard .dash
{
	padding: 0 10px 0 10px;
	width: 286px;
}

#dashboard .midd
{
	border-left: 1px solid #B0B4B8;
	border-right: 1px solid #B0B4B8;
	margin: 0 29px 0 29px;
}

#dashboard .dashtitle
{
	color: #606669;
	font-size: 1.4em;	
}

/* Foot */
#footer 
{
	margin-top: 4px; /* Verschil tussen Dashboard en eigelijke footer */	
	background-color: #DDD;
	border: 1px solid #CCC;
}

#footer div
{
	text-align: center;
	margin: 4px;
}

/* Typography --------------------------------------------------------------- */

/* Global classes */
.clear,.clearer { clear: both; }

.clearer 
{
	display: block;
	font-size: 0;
	line-height: 0;	
}

/* Floats */   

.left,.alignleft {float: left;}
.right,.alignright {float: right;}

/* Lists */
li ul, li ol { margin-left: 1.5em;}
ul, ol {margin: 0 1.5em 1.5em 1.5em;}

ul {list-style-type: disc;}
ol {list-style-type: decimal;}

dl {margin: 0 0 1.5em 0;}
dl dt {font-weight: bold;}
dd {margin-left: 1.5em;}

ul.tabbed 
{
	display: inline;
	margin: 0;
}
ul.tabbed li 
{
	float: left;
	list-style: none;
	margin: 0;
}

/* Seperators */
.content_separator 
{
	display: block;
	font-size: 0;
	height: 5px;
	line-height: 0;
	clear: both;	
}

.contenttitle_seperator
{
	background: #D5D5D5;
	clear: both;
	color: #FFE;
	display: block;
	font-size: 0;
	height: 1px;
	line-height: 0;
	margin: 12px 0 12px;	
}

/* Headings */
h1,h2,h3,h4,h5,h6 
{
	color: #555;
	font-weight: normal;
	line-height: 1;
	margin-bottom: 0.3em;
}
h4,h5,h6 {font-weight: bold;}

h1 {font-size: 1.9em;}
h2 {font-size: 1.8em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.25em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}

/* Tables */
table { width: 100%; border: solid 1px #ACBECD; }
table td, table th 
{ 
	padding: 10px; 
	color: #505E69; 
	border: solid 1px #ACBECD; 
}
thead th 
{ 
	background: #C6D2DB; 
	color: #505E69; 
	font-weight: bold;
	font-size: 1.1em;	
}
tbody tr.even { background: #DAE3E9; }
tbody tr.odd { background: #D0D8DE; }
tbody a 
{
	border: none;
	font-weight: bold;
	color: #54646C;
	border-bottom: 1px dotted #54646C;
	text-decoration: none;	
}
tbody a:hover 
{
	font-weight: bold;
	text-decoration: none;
	color: #6c7c84;
	border-bottom: none;
}


/* Text elements */
p {margin-bottom: 1em;}
abbr, acronym {border-bottom: 1px dotted #666;}
address {margin-bottom: 1.5em;}
blockquote {margin: 1.5em;}
del, blockquote {color: #666;}
em, dfn, blockquote, address {font-style: italic;}
strong, dfn {font-weight: bold;}
sup, sub {line-height: 0;}
pre 
{
	margin: 1.5em 0;
	white-space: pre;
}
pre,code,tt 
{
	font: 1em monospace;
	line-height: 1.5;
}
.textright { text-align: right; }
.textleft { text-align: left; }
.bold { font-weight: bold; }

/* Images */
span.ranking
{
	margin: 0 8px 0 0;
}

/* Linken */
a.contentLink 
{
	border: none;
	font-weight: bold;
	color: #54646C;
	border-bottom: 1px dotted #54646C;
	text-decoration: none;
	font-size: 1.5em;	
}
a.contentLink:hover 
{
	font-weight: bold;
	text-decoration: none;
	color: #6c7c84;
	border-bottom: none;
	font-size: 1.5em;
}

a.imglink { text-decoration: none; }
a.imglink:hover { text-decoration: none; }

a.footerLink 
{
	background: none;
	border: none;
	font-weight: bold;
	color: #54646C;
	border-bottom: 1px dotted #54646C;
	text-decoration: none;
}
a.footerLink:hover 
{
	font-weight: bold;
	text-decoration: none;
	color: #6c7c84;
	background-color: white;
	border-bottom: none;
}