/* layout stylesheet for nolbikkermotoren.nl // by jacco~dream-on.nl */


/* -- USED COLORS -- */
/* white				-	#FFF */
/* black				-	#000 */	

/* green				-	#66CC33 */
/* green links			-	#5dce34 */
/* red					-	#?????? */

/* grey light			-	#CCC */
/* grey					-	#999 */
/* grey dark			-	#333 */
/* grey bg				-	#131313 */


/* -- IMPORT -- */
/* JAC @import url(typography.css); */


/* -- NORMALIZE -- */
/* normalize margin & padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, blockquote, th, td
{
  margin: 0px;
  padding: 0px;
}


/* normalize font-size for headers */
h1, h2, h3, h4, h5, h6
{
  font-size: 100%;
}

/* remove list-style from lists */
ol, ul
{
  list-style: none;
}

/* normalize font-style and font-weight to normal */
address, caption, cite, code, dfn, th, var
{
  font-style: normal;
  font-weight: normal;

}

/* remove list-style from lists */
table
{
  border-collapse: collapse;
  border-spacing: 0;
}
/* remove border from img and fieldset */
img, fieldset
{
  border: 0;
}
/* left align text in caption and th */
caption, th
{
  text-align: left;
}
/* vertical align in td */
td {
  vertical-align: top;
}


/* HTML & BODY */
html
{
	background: #131313 url(../img/bg_supersport.jpg) no-repeat top center;
}

body
{
	min-width: 982px;
	text-align: left;
	font: 12px Arial, Helvetica, sans-serif;
	line-height: 17px;
	color: #999;
}


/*  WRAPPER */
#wrapper
{
	width: 980px;
	margin: 0 auto;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
	background: #000;
}


/* NAV */
#nav{
	height: 41px;
	background: url(../img/nav_bg.png);
}

	#nav ul {
		float: left;
		margin: 0 0 0 20px;
	}
	
		#nav li {
			float: left;
		}
			
		#nav li a {
			height: 41px;
			display: block;
			overflow: hidden;
		}
		
	 		#nav li a#home {
				width: 59px;
				background: url(../img/nav_home.png) 0px -82px;
			}
			#nav li a#motoren {
				width: 84px;
				background: url(../img/nav_motoren.png) 0px -82px;
			}
			#nav li a#jet-ski {
				width: 70px;
				background: url(../img/nav_jet-ski.png) 0px -82px;
			}
			#nav li a#quad {
				width: 56px;
				background: url(../img/nav_quad.png) 0px -82px;
			}
			#nav li a#atv {
				width: 45px;
				background: url(../img/nav_atv.png) 0px -82px;
			}
			#nav li a#mule {
				width: 57px;
				background: url(../img/nav_mule.png) 0px -82px;
			}
			#nav li a#occasions {
				width: 96px;
				background: url(../img/nav_occasions.png) 0px -82px;
			}
			#nav li a#contact {
				width: 79px;
				background: url(../img/nav_contact.png) 0px -82px;
			}
			#nav li a#fun {
				width: 51px;
				background: url(../img/nav_fun.png) 0px -82px;
			}
			#nav li.active a#home, #nav li.active a#motoren, #nav li.active a#jet-ski, #nav li.active a#quad, #nav li.active a#atv, #nav li.active a#mule, #nav li.active a#occasions, #nav li.active a#contact, #nav li.active a#fun {
				background-position: 0px 0px;
			}
		
		.navitem {
			display: none;
		}
		
	#branding_kawasaki {
		float: right;
		padding: 6px 10px 0 0;
	}
	
	
/* BRANDING */
#branding {
	height: 73px;
	background: #393939 url(../img/bg_branding.png) repeat-x;
}


/* CONTENT */
#content {
	padding: 0 20px;
	background: url(../img/bg_content.png) repeat-x;
	font-size: 1px;
	line-height: 1px;
}

	/* bbv */
	#bbv {
		float: left;
		width: 540px;
		height: 250px;
	}
		#bbv img {
			width: 540px;
			height: 250px;
		}
		#bbv a {
			color: #999;
			text-decoration: none;
		}
		#bbv a:hover {
			color: #5dce34;
			text-decoration: none;
		}
		#bbv h4.nolink {
			color: #999;
		}
		.stripViewer {
			position: relative;
			overflow: hidden;
			width: 540px;
			height: 250px;
		}
		.stripViewer .panelContainer {
			position: relative;
			left: 0;
			top: 0;
		}
		.stripViewer .panelContainer .panel {
			float: left;
			height: 100%;
			position: relative;
			width: 540px;
		}
		.stripNavL, .stripNavR, .stripNav {
			display: none;
		}
		.photo-meta-data {
			position: relative;
			z-index: 20;
			height: 21px; 
			margin-top: -45px;
			padding: 12px 8px;
			background: url(../img/transpBlackDark.png);
		}	


	/* news */
	#news {
		float: left;
		width: 540px;
	}
		#news img {
			width: 540px;

		}
		#news h4.nolink {
			color: #999;
		}	
		#news p {
			padding: 0 8px;
		}
		/* form parade */
		#news table.form {
			margin: 0 8px;
		}
		#news table.form td {
			padding: 4px 0;
		}
		#news table.form td.left {
			width: 150px;
		}
		#news table.form input {
			padding: 1px;
			font-size: 11px;
		}
	
	/* headlines */
	#headlines {
		float: right;
		width: 377px;
		height: 250px;
	}	
		/* scrollable part */
		#headlines .scrollable {  
			position:relative;
			overflow:hidden;	
			height: 224px;
		}
		#headlines .scrollable .items {	
			position:absolute;
			height: 20000px;
		}
		#headlines .scrollable .items div {
			height: 214px;
			width: 361px;
			margin: 0 8px;
			padding: 4px 0; 
		}
		#headlines .scrollable .items div img {
			float: right;
			width: 148px;
			height: 111px;
			margin: 0 0 0 8px;
			border: 1px solid #333;
		}
		#headlines .scrollable .items div img.left {
			float: left;
			margin: 0 8px 0 0;
		}	
		#headlines .scrollable .items div img:hover {
			border: 1px solid #999;
		}
		/* nav stuff scrollable part
		/* prev, next, prevPage and nextPage buttons */
		/* next button uses another background image */
		#headlines a.prev, #headlines a.prevPage {
			top: -222px;
			left: 352px;
		}
		/* next button uses another background image */
		#headlines a.next, #headlines a.nextPage {
			top: -24px;
			left: 334px;
		}
		/* other */
		#headlines table {
			margin: 8px 0 0;
		}

		
	/* occasions */
	#occasion {
		float: left;
		width: 441px;
		margin: 15px 0 0;
	}
		/* scrollable part */
		#occasion .scrollable {  
			position:relative;
			overflow:hidden;	
			height: 268px;	 
		}
		#occasion .scrollable .items {	
			position:absolute;
			height: 20000px;
		}
		#occasion .scrollable .items div {
			height: 117px;
			width: 425px;
			margin: 0 8px;
			border-bottom: 1px solid #333;
			padding: 8px 0;
		}
		#occasion .scrollable .items div img {
			float: left;
			width: 148px;
			height: 111px;
			margin: 2px 8px 0 0;
			border: 1px solid #333;
		}	
		#occasion .scrollable .items div img:hover {
			border: 1px solid #999;
		}
		/* nav stuff scrollable part
		/* next button uses another background image */
		#occasion a.prev, #occasion a.prevPage {
			top: -258px;
			left: 420px;
		}
		/* next button uses another background image */
		#occasion a.next, #occasion a.nextPage {
			top: -24px;
			left: 396px;
		}


	/* occasion_right */
	#occasion_right {
		float: right;
		width: 376px;
		margin: 0 0 0;
	}
		/* scrollable part */
		#occasion_right .scrollable {  
			position:relative;
			overflow:hidden;	
			height: 268px;	 
		}
		#occasion_right .scrollable .items {	
			position:absolute;
			height: 20000px;
		}
		#occasion_right .scrollable .items div {
			height: 117px;
			width: 360px;
			margin: 0 8px;
			border-bottom: 1px solid #333;
			padding: 8px 0;
		}
		#occasion_right .scrollable .items div img {
			float: left;
			width: 148px;
			height: 111px;
			margin: 2px 8px 0 0;
			border: 1px solid #333;
		}	
		#occasion_right .scrollable .items div img:hover {
			border: 1px solid #999;
		}
		/* nav stuff scrollable part
		/* next button uses another background image */
		#occasion_right a.prev, #occasion_right a.prevPage {
			top: -258px;
			left: 355px;
		}
		/* next button uses another background image */
		#occasion_right a.next, #occasion_right a.nextPage {
			top: -24px;
			left: 331px;
		}


	/* occasions_next */
	#occasion_next {
		float: left;
		width: 540px;
		margin: 0;
	}
		#occasion_next table#occasions {
			width: 522px;
			margin: -8px 0 8px 8px;
		}
		#occasion_next table#occasions th {
			padding: 2px 8px 2px 0;
			border-bottom: 1px solid #666;
			font-weight: bold;
		}
		#occasion_next table#occasions td {
			padding: 2px 8px 2px 0;
		}
		#occasion_next table#occasions td.data {
			padding: 5px 8px 5px 0;
			border-bottom: 1px solid #222;
		}
	
	/* video */
	#video {
		float: left;
		width: 441px;
		margin: 15px 0 0;
	}
		#video ul {
			height: 102px;
			margin: 8px 8px 0;
			border-bottom: 1px solid #333;
		}
		#video ul li {
			float: left;
			padding: 0 16px 0 0;
		}
		#video ul li img {
			width: 120px;
			height: 90px;
			border: 1px solid #333;
		}	
		#video ul li img:hover {
			border: 1px solid #999;
		}

	/* video_next */
	#video_next {
		float: left;
		width: 656px;
		margin: 0 0 0;
	}
		#video_next object {
			margin: 8px 0 0;
			padding: 0 8px 0;
		}
		#video_next object, #video_next p {
			padding: 0 8px 0;
		}

	/* video_more */
	#video_more {
		float: right;
		width: 260px;
		margin: 0 0 0;
	}
		#video_more ul {
			margin: 8px 0 8px 8px;
		}
		#video_more ul li {
			float: left;
			padding: 0 8px 4px 0;
		}
		#video_more ul li img {
			width: 116px;
			height: 86px;
			border: 1px solid #333;
		}	
		#video_more ul li img:hover {
			border: 1px solid #999;
		}


	/* route */
	#route {
		float: left;
		width: 441px;
		margin: 15px 0 0;
	}
	#route_next {
		float: left;
		width: 441px;
		margin: 0;
	}
		#map {
			height: 170px;
			margin: 8px;
			border: 1px solid #333;
		}
		#map_big {
			height: 320px;
			margin: 8px 8px 20px;
			border: 1px solid #333;
		}
		#address {
			margin: 8px 8px 0;
			border-bottom: 1px solid #333;
		}
		.space {
			margin: 8px 8px 0;
		}

	/* categories */
	#categories {
		float: right;
		width: 496px;
		margin: 15px 0 0;
		text-align: right;
	}	
		#categories ul li {
			width: 226px;
			height: 163px;
			float: left;
			margin: 0 0 15px 20px;
			text-align: left;
		}
		#categories ul li#atv, #categories ul li#mule {
			margin-bottom: 0;
		}


	/* categories_next */
	#categories_next {
		float: right;
		width: 496px;
		margin: 0;
		text-align: right;
	}	
		#categories_next ul li {
			width: 226px;
			height: 163px;
			float: left;
			margin: 0 0 15px 20px;
			text-align: left;
		}
		#categories_next ul li#atv, #categories_next ul li#mule {
			margin-bottom: 0;
		}


	/* data */
	#data {
		float: left;
		width: 435px;
		margin: 15px 0 0;
	}
		#data table {
			width: 419px;
			margin: 4px 0 4px 8px;
		}
		#data td {
			border-bottom: 1px solid #333;
			padding: 6px 0;
		}
		#data td.left {
			padding-right: 8px;
		}
		#data tr.last td {
			border-bottom: 1px solid #000;
		}


	/* gallery */
	#gallery {
		float: right;
		width: 482px;
		margin: 15px 0 0;
	}
		#gallery ul {
			margin: 8px 0 0;
		}
		#gallery li {
			float: left;
		}
		#gallery li img {
			width: 148px;
			height: 111px;
			margin: 0 0 5px 8px;
			border: 1px solid #333;
		}	
		#gallery li img:hover {
			border: 1px solid #999;
		}
		#gallery p {
			margin: 0 8px 8px 8px;
		}


	/* cat */
	#cat {
		float: left;
		width: 540px;
		height: 250px;
		margin: 0 0 15px;
	}
		#cat img {
			width: 540px;
			height: 250px;
		}
		#cat a {
			color: #999;
			text-decoration: none;
		}
		#cat a:hover {
			color: #5dce34;
			text-decoration: none;
		}

	
	/* footer */
	#footer {
		clear: both;
		height: 84px;
		background: url(../img/bg_footer.png) repeat-x;
	}
		#footer .footer_left {
			float: left;
			margin: 52px 12px 0 12px;
		}
		#footer .footer_right {
			float: right;
			margin: 55px 12px 0 12px;
		}


/* SCROLLABLE UNIVERSAL STUFF */
/* nav stuff scrollable part
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	position: relative;
	display:block;
	width:18px;
	height:18px;
	float:left;
	cursor:pointer;
}
/* next button uses another background image */
a.prev, a.prevPage {
	background:url(../img/up.png) no-repeat;
}
/* next button uses another background image */
a.next,a.nextPage {
	background-image:url(../img/down.png);
}
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;	
}


/* COMMON STYLES */
.box {
	overflow: hidden;
	border: 1px solid #404040;
	background: #000 url(../img/bg_headlines.png) repeat-x left top;
	font-size: 12px;
	line-height: 17px;
}
td.left {
	padding: 0 8px 0 0;
	color: #666;
}
table.data {
	width: 100%;
	margin: 1em 0 0;
}
table.data td {
	padding: 1px 8px 1px 0;
}
.all {
	float: right;
}
/* classes for tooltips */
.hovertip {
	position: absolute;
    display: none;
	overflow: hidden;
	width: 148px;
	height: 111px;
    background: #000;
	border: 1px solid #666;
	z-index: 100;
	margin-left: 30px;
	margin-top: -90px;
	padding: 0;
}
.clear {
	clear: both;
}

		
/* TYPO */
h2 {
	height: 19px;
	line-height: 19px;
	padding: 4px 8px;
	background: url(../img/bg_h2.png) repeat-x top left;
	font-size: 13px;
	text-align: left;
	text-transform: uppercase;
}
h3 {
	color: #CCC;
	font-size: 14px;
}
h4 {
	font: 20px bold Arial, Helvetica, sans-serif;
}


/* LINKS */
a {
	color: #5dce34;
	text-decoration: none;
}
a:hover {
	color: #5dce34;
	text-decoration: underline;
}
a.disabled {
	visibility:hidden !important;		
}