/* ------------------------- Achtergronden ------------------------- */

body {
	background-color:#DCE4ED;
}

/* ------------------------- Container ------------------------- */

#container {
	margin-left:auto;
	margin-right:auto;
	min-height:550px;
	width:1000px;
	_height:auto;
	text-align:left; /* IE... */
}


/* ------------------------- Top part ------------------------- */

#index_top {
	clear:both;
	height:128px;
	margin:0;
	/*width:975px;*/
}

#header {
	background-position:right top;
	background-repeat:no-repeat;
	height:120px;
	left:185px;
	position:relative;
	top:8px;
	width:630px;
}

/* ------------------------- Middle part ------------------------- */

#index_center {
	background-position:left top;
	background-repeat:repeat-y;
	padding-bottom:10px;
}

#middle {
	float:left;
	margin-left:185px;
	width:630px;
	background:url(/media/images/center.jpg) no-repeat 15px 28px;
}

#middle, #left_tab, #right_tab {
	/*margin-bottom:-32767px !important;
	padding-bottom:32767px !important;*/
}

#left_tab, #right_tab {
	height:420px;
}

#body {
	background-position:left top;
	background-repeat:no-repeat;
/*	min-height:550px;*/
	display:block;
/*	width:960px;*/
	overflow:hidden;
}

h1.page-heading {
	margin: 0 50px 0.5em; 
}

#content {
	width:360px;
	min-height:410px;
	height:auto !important;
	_height:410px;
}

#content.lonely {
	margin-left:50px;
	width:500px;
}

#extra-content{
	float:left;
	width:200px; /* for IE? */
}

#extra-content img {
	border:1px solid black;
}

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

/* for main typography see blueprin/typography.css */

#middle ul {
	list-style-type:none;
	margin-left:1em;
	margin-bottom:1.5em;
}

#middle li {
	background:url(/media/css/img/list_fig.gif) no-repeat 0 0.6em;
	padding-left:1em;
}

p.notice {
    background-color:#FFEE55;
    border:2px solid #CCC;
    padding:5px;
    text-align:center;
    margin:5px;
}

p.error {
    background-color:#FF9999;
	border:2px solid red;
	padding:5px;
	text-align:center;
	margin:5px;
}

p.success {
    background-color:green;
    border:2px solid #89DF00;
    padding:5px;
	text-align:center;
	margin:5px;
}

a.action {
	font-size:1.2em;
	float:right;
}

a.action:after { 
	content: " \00BB";
	font-size:1.2em;
}


/* ------------------------- Navigation stuff ------------------------- */

a {
	text-decoration:none;
	font-weight:bold;
	color:#2288BB; /*#5577AA;*/
}

a:visited {
	color:#2288BB;
}

a:focus, a:hover {
	color:#CC6611;
}

#center-nav a, #left-nav a, #right-nav a {
	font-weight:normal;
	font-size:100%;
	text-decoration:none;
}


/* ------------------------- Center nav ------------------------- */

#center-nav {
	height:20px;
	width:100%;
	margin-bottom:1.5em;
}


/* ------------------------- Bottom part ------------------------- */

#index_bottom {
	background-position:left top;
	background-repeat:no-repeat;
	clear:both;
	height:50px;
	margin:0;
	/*width:950px;*/
	font-size:0.8em;
}

#index_bottom a {
	color:#cde;
	font-weight:bold;
}

#index_bottom a:focus, #footer a:hover {
	color:#24A;
}

#footer {
	height:24px;
	margin-left:160px;
	width:630px;
	text-align:center;
	padding-top:4px;	
	color:#ccc;
}

/* ------------------------- Forms ------------------------- */

form {
    width:380px;
    margin:0 auto;
}

form.tight {
    width:290px;
    margin:0 auto;
}

fieldset {
    border-right:1px solid #2255AA; /*#CC9900;*/
    border-left:1px solid #2255AA; /*#CC9900;*/
 	margin-bottom:16px;
	padding:6px 10px 0;
    position:relative; /* nodig voor IE fucker? */
}

legend {
    font-size:1.2em;
    font-weight:500;
	color:#2255AA;
    letter-spacing:2px;
	margin-bottom:3px;
	margin-top:7px;
    padding:0 5px;
}

/* Use <p><label>label text</label><input type="text" /></p> with textinputs */ 

label {
    width:150px;
    text-align:right;
    float:left;
    margin-right:5px;
}

label.for-textarea {
/*    width:auto;
    float:right;*/
}

.tight label {
    width:100px;
}

label.required {
    font-weight:bold;
}
label.required:after { content: "*" }

label.invalid {
    color:red;
}

/* Allow setting whole forms or fieldsets as required: */
.required label {
    font-weight:bold;
}
.required label:after { content: "*" }

form input[type=text] {
    float:left;
    height:14px;
    margin-bottom:14px;
    /* 14 + 14 +  2 * (3 padding + 1 border) = 36 */
}

form select {
    float:left;
    height:20px;
    margin-bottom:12px;
}

form textarea {
    float:right;
    width:340px;
    font:inherit;
    padding:5px;
}

form button {
    padding:0 5px;
}

/* Use <p><label><input type="checkbox" />Label Text</label></p> with checkboxes */

form label.checkbox {
    text-align:left;
    margin-left:155px;
    margin-bottom:1px;
    width:auto !important;
}
form label.checkbox input {
    margin-right:5px;
    margin-bottom:3px;
}

form p {
    clear:left;
    margin-bottom:4px;
}

form #submit-button {
	height:auto;
    float:right !important;
    width:100px;
}

.form_help {
	font-size:1.1em;
	font-weight:bold;
}

.fieldset_help {
    text-align:center;
    width:100%;
    font-weight:bold;
/*    margin-top:-10px;*/
}

.field-help {
    color:#555555;
    float:left;
    font-weight:300;
    margin-left:155px;
    margin-top:-10px;
    text-align:right;
}

form span.error {
    color:red;
    margin-left:155px;
	display:block;
}


/* ------------------------- Login Box ------------------------- */

/*#login-form {
    width:300px;
    margin:0 auto;
}*/

#login-form fieldset {
    border-right:1px solid #CC9900;
    border-left:1px solid #CC9900;
    padding: 5px;
    margin-bottom:5px;
}

#login-form label {
    width:100px;
    text-align:right;
    float:left;
    margin-right:5px;
}

#login-form input {
    float:left;
    margin-bottom:10px;
}

#login-form .checkbox {
    text-align:left;
    margin-left:105px;
}

#login-form p {
    clear:left;
    margin-bottom:4px;
}

#login-form .submit {
    float:right !important;
    width:75px;
	margin-right:5px;
}

#login-form a {
    float:left;
}

/* ------------------------- Quick Login box ------------------------- */
/* will be hidden by js script to show up by clicking the loginlink */

#quick-login {
	font-size:0.9em;
    position:absolute;
	top:540px;
	margin:5px 5px;
	margin-left:14px;
    text-align:right;
    padding:5px;
	width:140px;
	border:2px solid #EEDD00;
	background:#CCDDEE;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
	-webkit-box-shadow:-7px 7px 20px #000;
	-moz-box-shadow:-7px 7px 20px #000;
}

#quick-login form {
	width:140px;
}

#quick-login label {
	color:#444;
	font-weight:normal;
}

#quick-login a {
	font-weight:normal;
	width:65px;
	margin-top:3px;
	display:block;
	float:right;
	clear:both;
}

#quick-login .submit {
	margin-bottom:5px;
}

.inline {
    display:inline !important;
}

.help-text {
    margin-top:-3px;
    margin-bottom:3px;
}

.bottom-menuitem {
    border-bottom:0 none !important;
	height:35px !important;
	position:absolute;
	top:492px;
	width:136px;
}
.bottom-menuitem.current {
	width:126px;
}

/* ------------------------- Wolk ------------------------- */

.wolk {
	margin-bottom:1.5em; /* zelfde als P */
	font-size:1.8em;
	font-weight:300;
	color:#222;
	height:170px;
}

.wolk div {
	float:left;
	position:relative;
}

/* ------------------------- Ervarings imgs ------------------------- */

#referenties img {
	display:block;
}


/* ------------------------- Algemeen ------------------------- */

/* breakout a column */
.breakout {
	position:relative;
	width:500px;
}

/* left floating div 300 wide */
.column-300 {
	float:left;
	width:295px;
}

/* left floating div 200 wide */
.column-200 {
	float:left;
	width:195px;
}

.left-space {
	margin-left:10px;
}
.right-space {
	margin-left:10px;
}

.no-float {
	float:none !important;
}

.float-left {
	float:left !important;
}

.inline-image {
	float:left !important;
	margin-left:5px;
}

thead td {
    font-weight:bold;
    border-bottom:1px solid black;
    margin-bottom:10px;
}

tfoot td {
    font-weight:bold;
    border-top:1px solid black;
    margin-top:10px;
}