/**                  
 * screen.css
 *
 * Definition off the used styles and classes for
 * diplaying on screen ..........................
 *
 * COLOR PALLET:
 * 
 * BLUE:	#284394;
 * RED:		#bf2c34;
 *
 * @version 1.0
 * @author  A.J. de Vries	
 * @package www.bostrailer.nl
 * 
 * Copyright (c) 2006 Malibomba                               
 * IT IS NOT ALLOWED TO USE OR MODIFY ANYTHING OF THIS SITE,  
 * WITHOUT THE PERMISION OF THE AUTHOR.                       
 * Info? Mail to info@malibomba.com                             
 */
/*<![CDATA[*/
html, body, 
#canvas_div,
#centered_div {
	width:100%;
	height:100%;
	background:#f1f4f9;
}
html>body, 
html>body #canvas_div,
html>body #centered_div {
	height:auto;
	min-height:100%;
}

body {
	margin:0px;
}

form {
	margin:0px;
	padding:0px;
	display:inline;
}

body, table, th, td, div, span, p, b, a {
	font-size: 12px;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	color: #000;
}

p {
	margin: 0px;
	padding: 0px;
	margin-bottom: 12px;
	line-height: 18px;
	color: #000;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-size: 12px;	
}

p a, p a:visited,
a.red, a.red:visited {
	color: #bf2c34;
	text-decoration: none;
}

p a:hover,
a.red:hover {
	text-decoration: underline;
}

b {
	font-weight: bold;
}

h1 {
	margin: 0px;
	padding: 0px;
	padding-bottom: 2px;
	margin-bottom: 8px;
	border-bottom: 1px solid #999;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;

}

h1 span {
	border-bottom: 2px solid #bf2c34;
	font-weight: normal;
	font-size: 12px;
	color: #000;
	letter-spacing: 1px;
}


h2 {
	margin: 0px;
	padding: 0px;
	padding-bottom: 2px;
	margin-bottom: 8px;
	border-bottom: 1px solid #999;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;

}

h2 span {
	border-bottom: 2px solid #bf2c34;
	font-weight: normal;
	font-size: 14px;
	color: #000;
	letter-spacing: 1px;
}

h2 img 	{
	border:none;
	}

h3 {
	margin: 0px;
	padding: 0px;
	padding-top: 10px;
	padding-bottom: 2px;
	margin-bottom: 8px;
	border-bottom: 1px solid #999;
	font-weight: bold;
	color: #999;
	font-size: 12px;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}

h4 {
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-size: 14px;
	color: #bf2c34;
}

h5 {
	margin: 0px;
	padding: 0px;
	padding-bottom: 2px;
	margin-bottom: 0px;
	font-size: 16px;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;

}

h5.aktie {
	margin: 0px;
	padding: 0px;
	padding: 2px;
	margin-bottom: 0px;
	font-size: 24px;
	background: #bf2c34;
	color: #fff;
	font-weight: bold;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}

form {
	margin:0px;
	padding:0px;
	display:inline;
}

input, textarea {
	font-size:12px;
	font-family:tahoma;
}

html>body input, textarea, select {
	font-size:13px;
	margin:0px 0px 1px 0px;
}

input {

}

html>body input {
	height:auto;
	margin-bottom:1px;	
}


/**
 * CANVAS:
 * Definition of the 'canvas' div and its children .......
 -----------------------------------------------------------*/
#canvas_div {
	top:0px;
	left:0px;
	width:100%;
	/*background:#fff;*/
	background: #284394;
	position:absolute;
}

/**
 * TOP BACKGROUND:
 * Definition of the 'top' (background) div .................
 -----------------------------------------------------------*/
#top_div {
	top:0px;
	left:0px;
	width:100%;
	height:125px;
	background:#284394;
	/*border-bottom:1px solid #000;*/
	position:absolute;
	visibility:hidden;
	
}

/**
 * CENTERED:
 * Definition of the 'centered' div and its children .......
 -----------------------------------------------------------*/
#centered_div {
	top:0px;
	left:50%;
	width:880px;
	z-index:100;
	background:#284394;
	margin-left:-440px;
	position:relative;

	/*border:1px solid red;*/
}
html>body #centered_div {
	/*position:absolute;*/
}


/**
 * HEADER:
 * Definition of the 'header' div and its children .........
 -----------------------------------------------------------*/
#header_div {
	top:0px;
	left:0px;
	width:100%;
	height:109px;
	background:#284394 url('/pics/bg.header-right.gif') right top no-repeat;
	position:relative;
}
html>body #header_div {
	height:109px;
}

#logo_img {
	z-index:10;
	background:#fff;
	position:absolute;
	border:1px solid #000;
}


/**
 * DISPLAY:
 * Definition of the 'display' div and its children ........
 -----------------------------------------------------------*/
#display_div {
	width:880px;
	height:260px;
/*	height:360px;*/
	z-index: 1;
	padding-left: 1px;
	border-top:4px solid #bf2c34;
}

#display_div img{
	width: 878px;
}

#payoff_div {
	top:210px;
	right:30px;
	width:auto;
	z-index:100;
	font-weight:bold;
	position:absolute;
}
#payoff_div h1 {
	font-size:14px;
	display:inline;
	text-transform:uppercase;
}

#hr_div {
	top:-2px;
	width:878px;
	height:8px;
	z-index:100;
	font-size:2px;
	position:relative;
	border-left:1px solid #354c98;
	border-right:1px solid #354c98;
	background:#2a4592 url('/pics/bg.hr.gif')
	center center repeat;
}
html>body #hr_div { 
	top:-4px; 
	border:0px;
}

#main_div {
	top:-5px;
	padding:2px;
	height:300px;
	position:relative;
	background:#f1f4f9 url('/pics/bg.main.gif')
	center top no-repeat;
}
html>body #main_div {
	top:1px;
	height:auto;
	z-index:1000;
	min-height:300px;
}

#main_div h1 { font-size:16px; }
#main_div p  { text-align:justify; }

#main_table {
	width:100%;
	height:500px;
}

.bglblue {
	background:#e4e8f3;
}



#left_col_news {
	height:175px;
	color:#284394;
	font-size:11px;
	background:#e4e8f3 url('/pics/bg.li-border.gif') left bottom repeat-x;
}

#pscroller1 {
	height:150px;
	margin:10px 5px;
}

#left_img {
	left:-1px;
	position:relative;
}



/**
 * TOP MENU:
 * Definition of the 'bosmenu' div and its children .........
 -----------------------------------------------------------*/
.bosmenu {
	float:right; 
	width:660px;  
	margin:0;
	padding-top: 15px;
	padding-bottom: 15px;
}
.bosmenu ul {
	padding:0;
	margin:0;
	list-style-type:none;
}
.bosmenu ul li {
	float:left; 
	position:relative;
}

.bosmenu ul li a, 
.bosmenu ul li a:visited {
	float:left; 
	display:block; 
	text-decoration:none; 
	font-size:12px;
	font-weight:bold;
	text-align: center;
	
	line-height:50px; 
	height:60px;
	color:#fff;
	border-right: 2px solid #fff;
	width: 90px;
	background: url('/pics/icon.arrow-down.gif')
	center 10px no-repeat;
}

.bosmenu ul li:hover {width:auto;}

.bosmenu ul li a:hover {
	color:#fff;
	background:#a3b8f2 url('/pics/icon.arrow-down.gif')
	center 10px no-repeat;
}

.bosmenu ul li:hover a {color:#fff;}

.bosmenu ul li ul {
	display: none;
}
.bosmenu table {
	margin:-1px; 
	border-collapse:collapse; 
	font-size:11px;
}

/* specific to non IE browsers */
.bosmenu ul li:hover ul {
display:block; position:absolute; top:59px; background:#a3b8f2; margin-top:1px; left:-2px; width:152px; border: 2px solid #fff;
}

.bosmenu ul li:hover ul li ul {
display: none;
}
.bosmenu ul li:hover ul li a {
display:block; background:#a3b8f2; color:#fff;height:auto;line-height:15px;padding:4px 16px; width:120px; border: 0px;
}

.bosmenu ul li:hover ul li a:hover {
color:#ffffff; background: #284394;
}

.bosmenu ul li:hover ul li:hover ul {
display:block; position:absolute; left:153px; top:-70px; color:#000; left:152px; height:138px; width:230px; overflow:auto; background:#284394;
border: 1px dotted red;
}
.bosmenu ul li:hover ul li:hover ul li a {background:#284394;}


.bosmenu ul li:hover ul li:hover ul.left {
left:-172px;
}
.bosmenu ul li:hover ul li:hover ul li a:hover {background:#666; color:#0ff;}



/* specific to IE5.5 and IE6 browsers */
	
.bosmenu ul li a:hover ul {
	display:block;
	position:absolute;top:60px; 
	t\op:59px; 
	background:#a3b8f2;
	left:-2px; 
	marg\in-top:1px;
	border: 2px solid #fff;
}

.bosmenu ul li a:hover ul li a {
	display:block; 
	height:1px; 
	line-height:15px; 
	padding:4px 16px; 
	width:152px; 
	w\idth:152px;
	5px 5px no-repeat;
	color:#fff;
	border: 0px;
	text-align: left;
	background: url('/pics/blank.gif')
	center 0px no-repeat;
}

.bosmenu ul li a:hover ul li a ul {
	visibility:hidden; 
	position:absolute; 
	height:0; 
	width:0;
}

.bosmenu ul li a:hover ul li a:hover {
	color:#ffffff; 
	background: #284394;
}

.left {clear:both;}


/**
 * FOOTER:
 * Definition of the 'footer' div and its children .........
 -----------------------------------------------------------*/
#footer_div {
	left:0px;
	bottom:0px;
	width:100%;
	height:64px;
	z-index:2000;
	background:#284394;
	color:#ffffff;
	border-top:4px solid #bf2c34;
	position:absolute;
}

#pscroller2 {
	top:20px;
	color:#ffffff;
	width:780px;
	height:20px;
	position:relative;
	background:transparent;
	padding:0px 20px 0px 20px;
}
html>body #pscroller2 { 
	width:840px; 
	color:#ffffff;
}

.scroller div {
	left:120px;
}

#footer_div h1 { 
	color:#fff;
	font-size:12px;
	display:inline;
}

#footer_div p { 
	color:#fff;
	font-size:12px;
	display:inline;
}

#footer_div b {
	color:#fff;
	font-weight:bold;
}

#footer_div span.spacer {
	width:10px;
}

#footer_div a,
#footer_div a:visited {
	color:#fff;
	font-size:10px;
	text-decoration:underline;
}

#footer_div a:hover {
	text-decoration:underline;
}

				   
/**
 * BOTTOM BACKGROUND:
 * Definition of the 'bottom' (background) div .............
 -----------------------------------------------------------*/
#bottom_div {	
	bottom:0px;
	width:100%;
	height:61px;
	/*border-top:1px solid #000;*/
	background:#284394 url('/pics/bg.footer.gif')
	center center no-repeat;

	position:absolute;
}				  
html>body #bottom_div {
	height:64px;
}


/**
 * FRAMELESS POPUP 
 * Frameless popup styles and classes ......................
 -----------------------------------------------------------*/
.popup {
	z-index: 10;
	position:absolute;
	border:1px solid black;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#777777,Direction=135,Strength=3);
}

.popupCaption {
	width:100%;
	cursor: move;
	background-color:#0c2e82;
}

.ptr {
	cursor:default;
}



/**
 * tooltip POPUP 
 *  ......................
 -----------------------------------------------------------*/





a.tip{
	position:relative; /*this is the key*/
	z-index:24; background-color:#fff;
	color:#000;
	text-decoration:none;
}

a.tip:hover{z-index:25;}

a.tip span{display: none}

a.tip:hover span{ /*the span will display just on :hover state*/
	display:block;
	position:absolute;
	padding: 2px;
	top:2em; left:2em; width:250px;
	border: 1px solid #BF2C34;
	background-color: #E4E8F3;
	text-align: left;
}


tr.off {
	background: none;
	cursor: pointer;
	

}
tr.on {
	background: #eaecf2;
	cursor: pointer;
}

/**
 * FV FORM 
 * Definitions for the required form fields.
 -----------------------------------------------------------*/
.fv-req {
	padding:2px;
	padding-right:0px;
	background:#e7e7e7;
	border:1px solid #7da2c8;	
}

.fv-forget {	
	padding:2px;
	padding-right:0px;
	background:#e7e7e7;
	border:1px solid #b10101;
}

.fv-syntax {
	padding:2px;
	padding-right:0px;
	background:#e7e7e7;
	border:1px solid #b10101;
}





/**
 * Thumbnails 
 * 
 -----------------------------------------------------------*/
	


.thumbnail a img{
	padding: 4px 4px 4px 4px;
	background-color: #FFFFFF;
	border: #bf2c34 1px solid;
	}
.thumbnail a:hover img{ 
	background-color:#bf2c34; 
	border: #FFFFFF 1px solid; 
	text-decoration: none;
}	

.image	{
	padding: 4px 4px 4px 4px;
	background-color: #FFFFFF;
	border: #bf2c34 1px solid;
}

.thumbnailNews a img{
	padding: 4px 4px 4px 4px;
	background-color: #FFFFFF;
	border: #bf2c34 1px solid;
	float: left;
	margin-right: 20px;
	}
.thumbnailNews a:hover img{ 
	background-color:#bf2c34; 
	border: #FFFFFF 1px solid; 
	text-decoration: none;
	float: left;
	margin-right: 20px;
}


/**
 * MATRIX
 * Definitions for the matrix page.
 -----------------------------------------------------------*/
#matrixlist	{
	width: 550px;
	margin: 0;
	padding: 0;
}

#matrixlist li	{
	display: inline;
	list-style: none;
	padding: 0;
	margin: 0;
	cursor:hand;
}

#matrixlist #price	{
	float: right;
}




/**
 * Form for matrix
 * 
 -----------------------------------------------------------*/
label.checkbox_checked {
	background: #284394 url(/pics/tick.png) 0% 50% no-repeat;
	border: 1px solid #bf2c34;
	color: #fff;
	height: 15px;
	display: block;
	margin: 0;
	padding: 0;
	padding-left: 25px;
}
label.checkbox_unchecked  {
	background: #fff url(/pics/cross.png) 0% 50% no-repeat;	
	display: block;
	height: 15px;
	margin: 0;
	padding: 0;
	border: 1px solid #DFDBDC;
	padding-left: 25px;
}

/* Radio Buttons */
label.radio_checked {
	background: #284394 url(/pics/bullet_green.png) 0% 50% no-repeat;
	border: 1px solid #bf2c34;
	color: #fff;
	height: 15px;
	display: block;
	margin: 0;
	padding-left: 25px;
}
label.radio_unchecked  {
	background: #fff url(/pics/bullet_white.png) 0% 50% no-repeat;
	display: block;
	margin: 0;
	height: 15px;
	border: 1px solid #DFDBDC;
	padding-left: 25px;
}


/**
 * Form for reserveren
 * 
 -----------------------------------------------------------*/


#reserveren td span	{
	display: block;
	width: 80px;
	float: left;
}

#reserveren br	{ clear: both;}



/* Hover State */
label:hover{
	color: #575B60;
}

.crirHidden {
	display: none;
}


legend	{
	color: #bf2c34;
}

.button	{
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-weight:bold;
	color:#fff;
	background-color:#284394;
	border-style:single;
	border-width:2px;
	border-color:#bf2c34;
}

 
	
/**
 * Tabs for matrix
 * 
 -----------------------------------------------------------*/

.shadetabs{
	padding: 3px 0;
	margin-left: 0;
	margin-top: 1px;
	margin-bottom: 0;
	font: bold 12px Verdana;
	list-style-type: none;
	text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
	display: inline;
	margin: 0;
}

.shadetabs li a{
	text-decoration: none;
	padding: 3px 7px;
	margin-right: 3px;
	border: 1px solid #778;
	color: #ffffff;
	background: white url(/pics/shade.gif) top left repeat-x;
}

.shadetabs li a:hover{
	text-decoration: underline;
	color: #2d2b2b;
}

.shadetabs li.selected{
	position: relative;
	top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
	background-image: url(/pics/shadeactive.gif);
	border-bottom-color: white;
	color: #000;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
	text-decoration: none;
}

.tabcontentstyle{ /*style of tab content oontainer*/
	border: 1px solid gray;
	width: 600px;
	margin-bottom: 1em;
	padding: 10px;
}

.tabcontent{
	display:none;
}

@media print {
	.tabcontent {
	display:block!important;
	}
}

/**
 * LIGHTBOX 
 * Definitions for the ligtbox, used as a image popup .......
 -----------------------------------------------------------*/
#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink{
	width: 49%;
	height: 100%;
	background: url(/pics/prev_2.gif) left 15% no-repeat; /* Trick IE into showing hover */
	display: block;
	}



#nextLink{
	width: 49%;
	height: 100%;
	 background: url(/pics/next_2.gif) right 15% no-repeat; /* Trick IE into showing hover */
	display: block;
	}
	
	
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/pics/prev_2.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/pics/next_2.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #333366;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
	
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	
	
	
	
tr.bg_odd td{
	background-color: #ffffff;
}

tr.bg_even td {
	background-color: #e0e0e0;
	
}

.verhuur_bold	{
	font-weight: bold;
	color: #bf2c34;
}

tr.verhuur_table_head td	{
	background-color: #bf2c34;
	color: #fff;
	text-align: right;
	height: 15px;
	
}


tr.verhuur_table_content td	{
	background-color: #E4E8F3;
	text-align: left;
	
}

/* toggle divs on verhuur page*/		
.expanded{
	background:#c0c0c0;
	cursor:hand;
	margin: 0;
	
}
.expanded:hover{
	background:#eef;
	cursor:hand;
	margin: 0;
}

.expand_content	{

}

.trigger{
	cursor:hand;
}
.trigger:hover{
	background:#trigger;
	cursor:hand;
}
.show {
	display:table;
	position:static;
	border: 1px solid #C0C0C0;
	background: #e0e0e0;	
}
.hide{
	left:-999em;
	height:1px;
	width:100px;
	overflow:hidden;
	position:absolute;
}


/*]]>*/