@charset "utf-8";
html, body  {
	 font-family: Arial, Verdana, sans-serif;
	background-color: #f0f0f0;
	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: #000000;
	background-image: url(../img/bg_totaal.gif);
	background-repeat: repeat-x;
	font-size: 1em;
}
.twoColFixRtHdr #container { 
	width: 952px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: transparent;
	margin: 0 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: 0;
} 
.twoColFixRtHdr #content_container { 
	width: 952px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 0 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. */
	background-image: url(../img/bg_content.gif);
	padding: 20px 0 0 0;
	height: 100%
}
.twoColFixRtHdr #header { 
	background: #DDDDDD; 
	height: 115px;
	margin-bottom: 20px;
	background-image: url(../img/catering-top.gif);
	padding: 0 4px 0 4px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
.twoColFixRtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 1px 1px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	color: #FFF;
	font-size: 70%; 
}

img.logo { 
	margin: 0 0 0 24px;
	padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 

.fade {
	margin: 0 0 0 -24px; 
	padding: 0;
	color: #FFF;
	height: 111px;
	width: 622px;
	float: right;
	z-index: 2;
}

p.images {
	 height: 111px;
	 width: 622px;
	 z-index: 1;
	 position:relative;
	 margin: 0;
	 padding: 0;
}
.twoColFixRtHdr #menu { 
	height: 38px;
	width: 952px;
	background-image: url(../img/bg_menu_groen.gif);
	font-size: 80%;
	font-variant: small-caps;
	padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
.twoColFixRtHdr #sidebar1 {
	float: right;
	width: 210px; /* 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: 0;
	margin: 0 34px 0 26px;
	font-size: 140%;
}

.twoColFixRtHdr #catering-kleinrechts {
	width: 173px; /* 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: 12px 20px 14px 20px;
	margin: 0;
	min-height: 70px;
	font: Arial, Helvetica, sans-serif;
	color: #898989;
	line-height: 16px;
	background-image: url(../img/bg-catering-rechts.gif);
	background-repeat: no-repeat;
	overflow: hidden;
	font-size: 50%;
}

.twoColFixRtHdr #catering-kleinrechts a:link {
	color: #898989;
	text-decoration: underline;
	line-height: 22px;
}

.twoColFixRtHdr #catering-kleinrechts:hover {
	background-image: url(../img/bg-catering-rechts_over.gif);
	background-repeat: no-repeat;
}

.twoColFixRtHdr #catering-kleinrechts a:visited {
	color: #898989;
	text-decoration: underline;
	line-height: 22px;
}

H1.rechts1 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	color: Fuchsia;
	margin: 0 0 6px 0;
	padding: 0;
	font-size: 130%;
}

H1.rechts2 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	color: #d14639;
	margin: 0 0 6px 0;
	padding: 0;
	font-size: 130%;
}

H1.rechts3 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	color: #d2883d;
	margin: 0 0 6px 0;
	padding: 0;
	font-size: 130%;
}

H1.rechts4 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	color: #8CC63F;
	margin: 0 0 6px 0;
	padding: 0;
	font-size: 130%;
}

.twoColFixRtHdr #catering-kleinrechts_bottom {
	width: 213px; /* 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: 0;
	margin: 0 0 16px 0;
}

.twoColFixRtHdr #mainContent_top { 
	margin: 0px 0px 0 30px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width: 608px;
	* width: 648px;
} 

.twoColFixRtHdr #mainContent { 
	margin: 0px 0px 0 30px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0px 20px 16px 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background-image: url(../img/bg-catering-groot.gif);
	background-repeat: no-repeat;
	border-right: 1px solid #D2D2D2;
	border-left: 1px solid #D2D2D2;
	width: 606px;
	color: #898989;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 20px;
	min-height: 342px;
	font-size: 70%;
} 

.twoColFixRtHdr #mainContent_bottom { 
	margin: 0px 0px 0 30px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width: 608px;
	* width: 648px;
} 

.twoColFixRtHdr #mainContent H1{ 
	margin: 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 6px 0 12px 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	font: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #ff5001;
	font-variant: small-caps;
	font-size: 130%;
} 

.twoColFixRtHdr #mainContent H2{ 
	margin: 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 4px 0 0px 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	font: 130%, "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #ff5001;
	font-variant: small-caps;
	
} 

.twoColFixRtHdr #mainContent img { 
	margin: -30px 0px 0px 26px;
	border-color: Gray;
} 

.twoColFixRtHdr #mainContent a:link { 
	color: #ff5001;
	text-decoration: underline;
} 

.twoColFixRtHdr #mainContent a:hover { 
	color: #ff5001;
	text-decoration: none;
} 

.twoColFixRtHdr #mainContent a:visited { 
	color: #ff5001;
	text-decoration: underline;
} 

.twoColFixRtHdr #bottomContent { 
	margin: 6px 4px 20px 30px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width: 918px;
	color: #898989;
	font: 100%, Arial, Helvetica, sans-serif;
	line-height: 18px;
	height: 130px;
} 

.twoColFixRtHdr #bottomLinks { 
	margin: 6px 30px 0px 15px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 0 12px 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width: 907px;
	color: #898989;
	font: 70%, Arial, Helvetica, sans-serif;
	line-height: 20px;
	font-variant: small-caps;
	text-align: center;
} 

.twoColFixRtHdr #bottomLinks a:link { 
	margin: 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 15px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width: 862px;
	text-decoration: none;
	color: #898989;
} 

.twoColFixRtHdr #bottomLinks a:hover { 
	margin: 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 15px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width: 862px;
	text-decoration: underline;
	color: #898989;
} 

.twoColFixRtHdr #bottomLinks a:visited { 
	margin: 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 15px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width: 862px;
	text-decoration: none;
	color: #898989;
} 

.twoColFixRtHdr #bottomhr { 
	margin: 20px 30px 0px 30px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width: 892px;
	background-image: url(../img/bg_hr.gif);
	background-repeat: repeat-x;
} 

.twoColFixRtHdr #formhr { 
	margin: 28px 30px 0px 0px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width: 525px;
	background-image: url(../img/bg_hr.gif);
	background-repeat: repeat-x;
} 

.twoColFixRtHdr #form_bottomhr { 
	margin: 28px 30px 0px 0px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width: 584px;
	background-image: url(../img/bg_hr.gif);
	background-repeat: repeat-x;
}

.twoColFixRtHdr #catering-kleinonder {
	width: 244px; /* 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: 12px 20px 14px 20px;
	margin: 0 22px 0 0;
	height: 101px;
	font-size: 70%;
	color: #898989;
	line-height: 16px;
	background-image: url(../img/bg-catering-onder.gif);
	background-repeat: no-repeat;
	overflow: hidden;
	float: left;
}

H1.onder1 {
	font: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	color: #87c437;
	margin: 0 0 6px 0;
	padding: 0;
	font-size: 130%;
}

H1.onder2 {
	font: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	color: #f57338;
	margin: 0 0 6px 0;
	padding: 0;
	font-size: 130%;
}

H1.onder3 {
	font: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	color: #c67c7c;
	margin: 0 0 6px 0;
	padding: 0;
	font-size: 130%;
	
}

.twoColFixRtHdr #catering-kleinrechts_bottom {
	width: 213px; /* 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: 0;
	margin: 0 0 20px 0;
}

.twoColFixRtHdr #footer { 
	padding: 32px 10px 12px 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background-color: #f0f0f0;
	background-image: url(../img/catering-footer.gif);
	background-repeat: no-repeat;
	margin: 0; 
	color: #a7a7a7;
	vertical-align: bottom;
	font-size: 70%;
} 

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
	 margin: 0;
	 padding: 0;
}

.jquerycssmenu{
	color: #898989;
	font-variant: small-caps;
	padding-left: 22px; /*offset of tabs relative to browser left edge*/
	font: Arial, Helvetica, sans-serif;
}

.jquerycssmenu ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/*Top level list items*/
.jquerycssmenu ul li{
	position: relative;
	display: inline;
	float: left;
}

/*Top level menu link items style*/
.jquerycssmenu ul li a{
font: Arial, Helvetica, sans-serif;
	display: block;
	padding: 8px 10px 7px 10px;
	* padding: 8px 10px 7px 10px;
	margin-right: 3px; /*spacing between tabs*/
	color: #898989;
	text-decoration: none;
}

.jquerycssmenu ul li a:hover{
	text-decoration: underline;
}
	
/*1st sub level menu*/
.jquerycssmenu ul li ul{
	position: absolute;
	left: 0;
	display: block;
	visibility: hidden;
	padding: 6px 0;
	border: 1px solid #93C551;
	border-top-width: 0;
	background-color: #FFF;
	width: 154px;
	z-index: 999;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jquerycssmenu ul li ul li{
	display: list-item;
	float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jquerycssmenu ul li ul li ul{
	top: 0;
}

/* Sub level menu links style */
.jquerycssmenu ul li ul li a{
	color: #898989;
	font: 85%, Arial, Helvetica, sans-serif;
	padding: 6px 10px 6px 10px;
	margin: 0;
	text-decoration: none;
	background-color: #FFF;
}

.jquerycssmenu ul li ul li a:hover{ /*sub menus hover style*/
	text-decoration: underline;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 7px;
right: 5px;
}

.rightarrowclass{
position: absolute;
top: 5px;
right: 5px;
}

.twoColFixRtHdr #gallery_wrap img { 
	margin: 0px;
} 

.panel-overlay h2,
.panel-overlay p{
	margin: .3em 0;
}
.panel-overlay p {
	line-height: 1.1em;
}

input{
	color: #767676;
	font-family: Arial, Helvetica, sans-serif;
}

textarea{
	color: #767676;
	font-size: 105%;
	font-family: Arial, Helvetica, sans-serif;

}

@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.
 */ 
.textareaRequiredMsg,
.textareaMinCharsMsg,
.textareaMaxCharsMsg,
.textareaValidMsg {
	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. .textareaRequiredState) 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".
 */
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg
{
	display: inline;
	color: #CC3333;
}

/* The next three group selectors control the way the core element (TEXTAREA) looks like when the widget is in one of the states: * focus, required / 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 TEXTAREA
 * - the widget id is placed on the TEXTAREA element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the TEXTAREA has a green background applied on it. */
.textareaValidState textarea, textarea.textareaValidState {
	background-color:#B8F5B1;
}

/* When the widget is in an invalid state the TEXTAREA has a red background applied on it. */
textarea.textareaRequiredState, .textareaRequiredState textarea, 
textarea.textareaMinCharsState, .textareaMinCharsState textarea, 
textarea.textareaMaxCharsState, .textareaMaxCharsState textarea {
	background-color:#FF9F9F;
}

/* When the widget has received focus, the TEXTAREA has a yellow background applied on it. */
.textareaFocusState textarea, textarea.textareaFocusState {
	background-color:#FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textarea looks like.
 * It applies only when the widget has enforce max chars enabled and the user tries to type some more.
 */
.textareaFlashState textarea, textarea.textareaFlashState{
	color:red !important;
}

@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;
}



/* 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;
}