@charset "utf-8";
body {
	font: 70% Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #8f8f8f;
	background-image: url(../img/bg.gif);
	height: 100%;
}

a:link{
	color: #dc8b20;
	text-decoration: underline;
}

a:hover{
	color: #dc8b20;
	text-decoration: none;
}

a:visited{
	color: #dc8b20;
	text-decoration: underline;
}

.oneColFixCtr #container {
	width: 900px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	height: 490px;
	margin: 65px auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	padding: 2px 2px 3px 1px;
		background-image: url(../img/bg_schaduw.gif);
		background-repeat: no-repeat;
		top: 50%;
}
.oneColFixCtr #mainContent {
	margin: 0 0 0 178px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width: 278px;
	height: 490px;
	background-repeat: no-repeat;
	text-align: right;
	background-color: #FFF;
}

.oneColFixCtr #mainContent H1 {
	padding: 450px 80px 5px 0; 
	color: #646464;
	font-size: 140%;
	margin: 0px;
}


.oneColFixCtr #sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0px 0px 0px 18px; /* padding keeps the content of the div away from the edges */
	background-image: url(../img/bg_sb1.jpg);
	height: 490px;
}
.oneColFixCtr #sidebar2 {
	float: right; /* since this element is floated, a width must be given */
	width: 417px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 20px 10px 15px 0px; /* padding keeps the content of the div away from the edges */
	height: 455px;
	color: #8f8f8f;
	background-repeat: no-repeat;
	border-right: solid #f1aa44 17px;
	overflow-y:auto; 
	overflow-x:hidden;
	background-color: #FFF;
	line-height: 20px;
}

.oneColFixCtr #sidebar2 H1 {
	color: #dc8b20;
	font-size: 140%;
	padding-bottom: 0px;
}

.oneColFixCtr #sidebar2 H2 {
	color: #dc8b20;
	font-size: 110%;
	padding-bottom: 0px;
}

.footer {
	width: 880px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background-color: transparent;
	height: 30px;
	text-align: right; /* this overrides the text-align: center on the body element. */
	padding: 2px 2px 3px 1px;
}
.jqueryslidemenu{
	width: 160px;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
  padding: 40px 0px 0px 0px;
  width: 160px;
  text-align: right;
  height: 24px;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
background:url(../images/1.jpg) 0 bottom;
  text-decoration: none;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
	display: block; /*background of tabs (default state)*/
	  background: #5b5a5b;
   background-image: url(../img/bg_menu.jpg);	
  color: #fff;
  padding: 4px 30px 4px 0px;
  font-variant: small-caps;
  border-bottom: 1px solid #646464;
    width: 130px;
	  text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: #000;
  background-image: url(../img/bg_menu_hover.jpg);	
}
	
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
margin-left: -31px;
margin-top: -41px;
z-index: 3;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
  background: #ccc;
  color: #454545;
  padding: 4px 0px 4px 24px;
  background-image: url(../img/bg_sub.jpg);
  border-top: 1px solid #fec64d;
  border-bottom: 0px;  
	text-align: left;
	width: 136px;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
 background: #aaa;
  background-image: url(../img/bg_sub_hover.jpg);
  border-top: 1px solid #fec64d;
  color: #454545;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 10px;
right: 9px;
}

.rightarrowclass{
position: absolute;
top: 7px;
right: 5px;
}

.oneColFixCtr #foto {
float: left;
width: 60px;
height: 77px;
margin: 0px 12px 10px 0px;
}

.oneColFixCtr #logo {
float: left;
width: 94px;
height: 68px;
margin: 0px 6px 6px 0px;
background-repeat: no-repeat;
background-position: center center;
}

.logo a:link {
float: left;
}

img.portfolio{
	margin: 0;
	padding: 0;
}

img.PopBoxImageSmall{
	float:right; 
	padding-left: 16px;
}

img.PopBoxImageSmall:hover{
	cursor: pointer;
}

@charset "UTF-8";

/* SpryFormValidation.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */


/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}



/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	background-color: #B8F5B1;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #FF9F9F;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText{
	color: red !important;
}

.oneColFixCtr #medewerker{
background-image:url(../img/medewerkers_laag.gif); 
background-repeat:no-repeat; 
position:relative; 
width: 258px; 
height: 134px; 
z-index: 2; 
padding: 356px 0px 0px 20px;
text-align: left;
}

.oneColFixCtr #medewerker H2{
	color: #dc8b20;
	font-size: 110%;
	padding-bottom: 8px;
}