/**                  
 * screen.css
 *
 * Definition off the used styles and classes for
 * diplaying on screen.
 *
 * @version 1.0
 * @author  A.J. de Vries	
 * 
 * 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[*/

/***************************************************
	Global
***************************************************/
	
html {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin: 0;
	padding: 0;
}
* html, * html body { height:100%; position:relative; }
body {
	background: #e7e7e7;
	text-align: left;
	margin: 0;
	padding: 0;
	color: #555;
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	line-height: 15px;
	height: 100%;
	}

xmp {
	color:red;
}


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

input, textarea {
	font-size:12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}


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

.fv-forget {	
	padding:2px;
	padding-right:0px;
	background:#FFF0C6;
	border:1px solid #4bb8f0;
}

.fv-syntax {
	padding:2px;
	padding-right:0px;
	background:#FFF0C6;
	border:1px solid #4bb8f0;
}




/**************************************************
	Header
***************************************************/

#layoutTop {
	background: #fff url('/pics/header/rotate.php');
	position: relative;
	height: 130px;
	width: 980px;
	margin: 0 auto;
}

#header {
	width: 980px;
	text-align: right;
	padding: 0;
	z-index: 150;
}

#navcontainer{
	margin: 0;
	padding: 0;

}

#navcontainer ul{
position: relative;
top: 100px;
margin: 0;	
float: right;
font: bold 13px Verdana;
}

* html #navcontainer ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
	margin-bottom: 1em;
	margin-left: 7px; /*menu offset from left edge of window in IE*/
}

#navcontainer ul li{
	display: inline;
}

#navcontainer ul li a{
	float: left;
	color: white;
	font-weight: bold;
	padding: 5px;
	text-decoration: none;
}

#navcontainer ul li a:visited{
	color: white;
}

#navcontainer ul li a:hover, #navcontainer ul li a#selected{ /*hover and selected link*/
	color: #3a84c3;
	background: transparent url(/pics/pointer.gif) bottom center no-repeat;
}

/**************************************************
	Content
***************************************************/

#layoutContent {
	text-align: left;
	background: #fff url('/pics/bg_body.jpg') repeat-y center center;
	padding: 0;
	width: 980px;
	height: 100%;
	min-height: 750px;
	margin: 0px auto;
	display: block;
	position: relative;
	top: 0;
	bottom: 0;
	}

:root #layoutContent{
	

}

#content {
	float: right;
	width: 755px;
	margin: 10px;
	display: block;
	height: 100%;
}


				#header h1 {
					position: relative;
					font-family: Helvetica, sans-serif;
					font-size: 25px;
					line-height: 25px;
					text-transform: uppercase;
					font-style: italic;
					font-weight: normal;
					color: #fff;
					top: 103px;
					left: 200px;
					float: left;
				}

				:root #header h1{
					top:85px;
				}
				#content h1 {
					font-family: Arial, Helvetica, sans-serif;
					font-size: 21px;
					font-weight: normal;
					color: #3a84c3;
					margin-top: 5px;
				}

				#content h1.product {
					font-family: Arial, Helvetica, sans-serif;
					font-style: italic; 
					font-size: 22px; 
					font-weight: normal;
					color: #3a84c3;
					margin-top: 5px;
				}

				#content h1.productPrice {
					font-family: Arial, Helvetica, sans-serif;
					font-size: 22px; 
					font-weight: normal;
					color: #c40000;
					font-weight: bold;
					margin-top: 5px;
				}


				#content h2 {
					font-family: Verdana, Arial, Helvetica, sans-serif;
					font-size: 14px;
					font-weight: normal;
					color: #222;
					margin: 0px;
					padding: 0px;
					}

				#content h3 {
					font-family: Verdana, Arial, Helvetica, sans-serif;
					font-size: 14px;
					font-weight: normal;
					color: #3a84c3;
					margin: 0px;
					}

				#content h4 {
					font-family: Verdana, Arial, Helvetica, sans-serif;
					font-size: 13px;
					font-weight: normal;
					color: #3a84c3;
					margin: 0px;
					}

				#content h5 {
					font-family: Verdana, Arial, Helvetica, sans-serif;
					font-size: 15px;
					font-weight: bold;
					color: #3a83c2;
					margin: 0px;
					padding-bottom: 3px;
					}

				a {
					text-decoration: none;
					color: #c40000;
					}

				a:hover {
					color: #E27A00;
					text-decoration: underline;
					}


				#content td {
					font-family: Verdana, Arial, Helvetica, sans-serif;
					font-size: 11px;
					font-weight: normal;
					color: #555;
					
				}

				.afbeelding {
					border:solid 1px silver;
					padding:5px;
					margin-right:10px;
					}

				.product_image	{position: relative;}
				.enlarge { width:35px; height: 35px; position:absolute; z-index:9; right:0; top:0; cursor:pointer;}

				/**************************************************
					Sidebar
				***************************************************/


#navleftcontainer	{
	position: relative;
	float: left;
	width: 171px;
	left: 8px;
	display: inline;
}
				#navleftlist
				{
					color: white;
					padding: 0px;
					margin-left: 0;
					width: 170px;
				}

				#navleftlist ul	li a {
					display: block;
					width: 171px;
					font-size: 1em;
				}
				#navleftlist li
				{
					list-style: none;
					margin: 0;
					padding: 0;
				}

				#navleftlist a	{
					display: block;
					text-decoration: none;
					margin-bottom: 1px;
					margin-top: 1px;
					color: white;
					background: #96999e url('/pics/bg_menu_left.jpg');
					border-width: 1px;
					border-style: solid;
					border-color: #666 #035 #068 #999;
					border-left: 4px solid #3a83c2;
					padding: 1px 2px 2px 8px;
				}

				#navleftlist a#current { border-color: #666 #035 #068 #4bb8f0; }


				#navleftcontainer>#navleftlist a	{
				}

				#navleftlist a:hover, #navleftlist a#current:hover	{
					background: #96999e url('/pics/bg_left_menu.jpg');
					color: #232426;
					border-color: #555 #999 #666 #3a83c2;
					padding: 1px 2px 2px 3px;
				}

				#navleftlist a:active, #navleftlist a#current:active	{
					background: #3a83c2;
					border-color: #555 #999 #666 #4bb8f0;
					padding: 1px 2px 2px 3px;
				}


				#navleftcontainer li a
				{
				display: block;
				width: 100%;	
				}

				#navlist li a#current	{
					background: white;
					border-bottom: 1px solid white;
				}
				#navleftcontainer  li#active a
				{
				background: #3a83c2;
				color: #000;
				border-left: 10px solid #4bb8f0;
				}



				/**************************************************
					Footer
				***************************************************/



#layoutFooter {
	clear: both;
	background: #e7e7e7 url('/pics/bg_footer.jpg') repeat-y center bottom;
	width: 980px;
	margin: 0 auto;
	height: 58px;
	
	}


				#footer {
					border-top: 1px dotted #232426;
					margin: 0px 20px;
					padding-top: 10px;
					text-align: right;
					font-family: Verdana, Arial, Helvetica, sans-serif;
					font-size: 11px;
					color: #000;
					}



				#footer a:link,
				#footer a:visited,
				#footer a:hover,
				#footer a:active {
					font-family: Verdana, Arial, Helvetica, sans-serif;
					text-decoration: none;
					color: #000;
					}

				#footer a:hover {
					color: #3a84c3;
					}



				#footer div.copyright {
					font-size: 10px;
					color: #232426;
					margin-top: 2px;
					text-align: center;
					}


				/**************************************************

					List

				***************************************************/



				ul {
					margin-left: 12px;
					padding: 0px 3px;
					}

				ul li {
					margin-left: 5px;
					padding: 0;
					color: #555;
					list-style-type:square;
					}

				ul.square {
					margin-top: -2px;	
				}

				ul.square li {
					list-style-type:square;
					color: #3a83c2;
					padding: 0px;
					margin: 0px;
					}

				.greytext {color:#555;}


				ol {
					margin-left: 12px;
					padding: 0 3px;
					}

				ol li {
					margin-left: 5px;
					padding: 5px 0;
					}



				ul.pipelinks {
					margin: 0;
					padding: 0;
					margin-top: -5px;
					padding-top: 5px;
					}



				ul.pipelinks li {
					margin: 0;
					padding: 0 3px 0 7px;
					border-left: 1px solid #fff;
					list-style: none;
					display: inline;
					}



				ul.pipelinks li.first{
					margin-left: 0;
					border-left: none;
					list-style: none;
					display: inline;
					padding-left: 0;
					}
					
				ul.pipelinks li.first	{
					margin-left: 0;
					padding: 0px;
					border-left: none;
					list-style: none;
					display: inline;
					padding-left: 0;
					}

				ul.pipelinks li.landen{
					margin-left: 0;
					padding: 0px;
					margin: 0px;
					border-left: none;
					list-style: none;
					display: inline;
					padding-left: 0;
					}
					
				/**
				 * Thumbnail shadow
				 -----------------------------------------------------------*/
				.out {
				  z-index: 10;
				  display:block; 
				  background:#bbb; 
				  border:1px solid #ddd;
				  position:relative;
				  margin:1em 0;
				  }
				.in{
				  z-index: 10;
				  text-align:center; 
				  background:#fff; 
				  border:1px solid #555; 
				  position:relative; 
				  padding:3px;
				  font-weight:normal;
				  background:#fff url('/pics/loading.gif') center center no-repeat;
				  }
				.ltin {
				  left:-3px;
				  }
				.tpin {
				  top:-3px;
				  }
				.narrow {width:8em;} 


				#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, #nextLink{
					width: 49%;
					height: 100%;
					background: transparent url(../images/blank.gif) 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(../images/prevlabel.gif) left 15% no-repeat; }
				#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.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: #3a83c2;
					}
					

				.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 */
					}
				/*]]>*/


/* Horizontal Carousel */
#horizontal_carousel {
  float: left;
  width: 755px;
  margin-bottom: 10px;
  position: relative;
}

#horizontal_carousel .container {
  float: left;
  width: 680px;
  position: relative;    
  overflow: hidden;
}

#horizontal_carousel ul {
  margin: 0;
  padding:0;
  width: 100000px;
  position: relative;
  top: 0;
  left: 0;
}                      

#horizontal_carousel ul li {
  width: 120px;
  text-align: center; 
  list-style:none;   
  float:left;
}

#horizontal_carousel ul li span{
	height: 40px;
	display: block;
	padding: 0;
	margin: 0;
}
#horizontal_carousel .previous_button {
  float:left;  
  width: 32px;
  height: 100px;
  background: url(/pics/left.png) no-repeat center center;
  z-index: 100;
  cursor: pointer;
}

#horizontal_carousel .previous_button_over {
  background: url(/pics/left_over.png) no-repeat center center;
}

#horizontal_carousel .previous_button_disabled {
  background: url(/pics/pix.gif) no-repeat center center;
  cursor: default;
}

#horizontal_carousel .next_button {
  float:left;  
  width: 32px;
  height: 100px;
  background: url(/pics/right.png) no-repeat center center;
  z-index: 100;
  cursor: pointer;
}

#horizontal_carousel .next_button_over {
  background: url(/pics/right_over.png) no-repeat center center;
}

#horizontal_carousel .next_button_disabled {
  background: url(/pics/pix.gif) no-repeat center center;
  cursor: default;
}