﻿@charset "utf-8";
/*
CSS for Work-Wise website
By Dick van Egmond (E-mail: dick@dcvanegmond.nl)
*/
.frontend_body {
	font: 100% Arial, sans-serif;
	background: url(/images/bg.jpg);
	margin: 0; 
	padding: 0;
	text-align: left; 
	font-size:9pt;
	color:#333333;
}
.lightbox_body {
	font: 100% Arial, sans-serif;
	background: #F66800;
	margin: 0; 
	padding: 0;
	text-align: left; 
	font-size:9pt;
	color:#333333;
	width:97%;
}

#container { 
	width: 770px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	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. */
}
#container_center { 
	width: 770px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	float: left;
	background: url( /images/1px.gif);
	background-repeat: repeat-y;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.container_center_headers { 
	width: 756px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	float: left;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.container_center_headers_middle_white 
{
	float: left; /* since this element is floated, a width must be given */
	width: 456px; 
	/**************/
	background-color: White;
	height:20px;
}
#header { 
	height:210px;
	margin-bottom:2px;
	background-image:url(/images/header.png);
	_background-image:url(/images/header.gif);
} 

/* lightbox_nav_header and _content make the navigation in the lightbox*/
#lightbox_nav_header{
	background:url(/images/nav_header.jpg);
	height:11px;
	width:130px;
	padding:3px 5px 5px 5px;
	color:#FFFFFF;
	font-size:8pt;
}
#lightbox_nav_content{
	background:url(/images/nav_bg.jpg) bottom;
	width:130px;
	padding:0 5px 5px 5px;
	color:#FFFFFF;
	font-size:8pt;
	text-align: left;
}
#lightbox_nav_content ul{
	list-style:disc;
	margin:0;
	padding:0 0 0 12px;
}


/*Sidebars
sidebar1 = left
sidebar2 = right
*/
#sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 150px; 
}
#sidebar1_top
{
	float: left; /* since this element is floated, a width must be given */
	width: 150px; 
	/**************/
	background:url(/images/collums/orange_top.gif) no-repeat top left;
	height:20px;
}
#sidebar1_bottom
{
	float: left; /* since this element is floated, a width must be given */
	width: 150px; 
	/**************/
	background:url(/images/collums/orange_bottom.gif) no-repeat bottom left;
	height:20px;
}
#sidebar1_content{
	background:url(/images/collums/orange.gif);
	padding-left:5px;
	}
#sidebar1_content p, h1, h2, h3{
	margin:0;
	padding:0
}
#sidebar2 {
	float: right;
	padding-right: 14px;
	width: 150px; 
}
#sidebar2_top
{
	float: right;
	padding-right: 14px;
	width: 136px; 
	/********/
	background:url(/images/collums/gray_top.gif) no-repeat top right;
	height:20px;
}
#sidebar2_bottom
{
	float: right;
	padding-right: 14px;
	width: 136px; 
	/********/
	background:url(/images/collums/gray_bottom.gif) no-repeat bottom right;
	height:20px;
}
#sidebar2_content{
	background:url(/images/collums/gray.gif);
	padding-left:5px;
	/* padding-top:250px; */
	padding-top: 10px;
}
#sidebar2_menu{
	background:url(/images/collums/gray.gif);
	padding-left:5px;
	/* padding-top:250px; */
	padding-top: 5px;
	padding-bottom: 20px;
}
#sidebar2_content p, h1, h2, h3{
	margin:0;
	padding:0;
}

.sidebar2_flashlinks{ /*The two images floating partly above sidebar2*/
	/* position:absolute; */
	/* margin-top:-40px; */
	margin-top: 0px;
	margin-left:5px;
	width:140px;
}
#mainContent {  /* the center, white column*/
	background-color:#FFFFFF;
	margin: 0px 165px 0 150px; 
	_margin: 0px 180px 0 150px; 
	padding: 20px;
	_padding:10px;
	
}
#footer{ /* a transparant area for text below the design*/
	background:url(/images/footer.png);
	background-repeat: no-repeat;
	width: 756px;
	height: 42px;
	color: #FFFFFF;
	margin-top:-1px;
	text-align:center;
	float:left;
}
/* header_top_links are the links "home", "contact" and "links" in the top of the header*/
#header_top_links{
	/* margin-left:350px;  */
	text-align: right;
	padding-right: 180px;
	top:5px; 
	color:#FFFFFF; 
	font-weight:bold; 
	word-spacing:10px;
}
#header_top_links a{
	color:#FFFFFF; 
	word-spacing:normal;
}
/*links_header and links_content are for the "usefull links" part in the right collumn*/
#links_header{
	background:url(/images/links_header.jpg);
	height:21px;
	width:140px;
}
#links_content{
	background:url(/images/links_bg.jpg) bottom;
	width:130px;
	padding:0 5px 5px 5px;
	color:#FFFFFF;
	font-size:8pt;
}
.links_font
{
	color:#FFFFFF;
	font-size:7pt;
}

/*lightbox is the lightbox that opens when you click a link in the left collumn*/
#lightbox {
	display:none;
	position: absolute;
	top:50%;
	left:50%;
	z-index:9999;
	width:600px;
	height:500px;
	margin:-250px 0 0 -300px;
	overflow-x:hide;
	overflow:hidden;
	background:url(/images/collums/orange.gif);
	padding:10px;
	text-align:left;
}
#lightbox[id]{ /* IE6 and below Can't See This */
    position:fixed;
}
#lightbox.done #lbLoadMessage {
	display:none;
}
#lightbox.done #lbContent
{
	display:block;
}



#videobox {
	display:none;
	position: absolute;
	top:50%;
	left:50%;
	z-index:9999;
	width: 680px;
	height: 386px;
	margin:-250px 0 0 -300px;
	overflow-x:hide;
	overflow:hidden;
	background:url(/images/collums/orange.gif);
	padding:10px;
	text-align:left;
}
#videobox[id]{ /* IE6 and below Can't See This */
    position:fixed;
}
#videobox.done #vbLoadMessage{
	display:none;
}
#videobox.done #vbContent
{
	display:block;
}


#overlay{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:5000;
	background-color:#000;
	-moz-opacity: 0.55;
	opacity:.55;
	filter: alpha(opacity=55);
}
#overlay[id]{
	position:fixed;
}
.lb_content h1{
	color:yellow;
	font-size:16pt;
}
.lb_content h2{
	color:#444444;
	margin-bottom:5px;
	font-size:11pt;
}
.lb_content p{
	color:#FFFFFF;
	font-size:9pt;
	margin:0 0 5px 0;	
	padding:0;
}
.lb_content{
	float:left;
	width:100%;
	text-align: left;
}
.lb_navigation{
	margin-top:15px;
	padding-right:5px;
	float:right;
}
.lbAction{
	float:right;
	color:#FFFFFF;
}



.vb_content h1{
	color:yellow;
	font-size:16pt;
}
.vb_content h2{
	color:#333333;
	margin-bottom:5px;
	font-size:11pt;
}
.vb_content p{
	color:#FFFFFF;
	font-size:9pt;
	/*margin:0 0 5px 0; */
	padding:0;
}
.vb_content{
	float:left;
	width:70%;
	text-align: left;
}
.vb_navigation{
	margin-top:15px;
	padding-right:15px;
	float:right;
}
.vbAction{
	float:right;
	color:#FFFFFF;
}




/*a videobox is a lightbox for the video-items that open when you click a portrait in the center collumn*/
.videobox2{
	display: none;
	position: absolute;
	top: 12.5%;
	left:50%;
	margin-left:-295px;
	width: 680px;
	height: 386px;
	padding:10px;
	background:url(/images/video_bg.jpg);
	text-align: left;
	z-index:1002;
	overflow: auto;	
}


/*a video_title is the name of the video that appears in white with black stroke below the video*/
.video_title{
	position:absolute;
	top:320px;
	left:50px;
}
/*videotext, videotext_header and videotext_footer make the green content pane in the videolightbox*/
.videotext {
/*	position:relative;
	float: right; */
}
.videotext_header{
	width:300px;
	height:20px;
	background:url(/images/collums/green_top.gif);
}
.videotext_content{
	width:280px;
	background:url(/images/collums/green.gif);
	color:#FFFFFF;
	padding:0 10px;
	text-align: left;
}
.videotext_footer{
	width:300px;
	height:20px;
	background:url(/images/collums/green_bottom.gif);
}

/*
.video_title{
	position:absolute;
	top:320px;
	left:50px;
}
#videotext{
	position:absolute;
	left:385px;
	top:40px;
}
#videotext_header{
	width:300px;
	height:20px;
	background:url(/images/collums/green_top.gif);
}
#videotext_content{
	width:280px;
	background:url(/images/collums/green.gif);
	color:#FFFFFF;
	padding:0 10px;
}
#videotext_footer{
	width:300px;
	height:20px;
	background:url(/images/collums/green_bottom.gif);
} */


a{
	color:inherit;
	text-decoration:none;
}
img{
	border:0;
}
h1{
	font-size:14pt;
	margin-bottom:5px;
	padding:0;
}
h2{
	font-size:10pt;
}
p{
	margin:10px 0;
}
/* a videoitem is a portraitimage in the center collumn*/
.videoitem{
	margin:5px;
}
.noprint
{
	
}
.yesprint
{
	display:none;
}

.lightboxTitle 
{
	color:Yellow;
	font-size:28px;
	font-weight:bold;
	font-family:Arial;
}
.lightboxText
{
	color:White;
	font-size:13px;
	font-weight:normal;
	font-family:Verdana;
}
.lightboxTextBold
{
	color:White;
	font-size:13px;
	font-weight:bold;
	font-family:Verdana;
}

/* Style for printing page*/
.print_page
{
	padding-left:550px;
}