/* 
*	CSS by 		
*	@author		Harm Wimmenhove
*	@url 		http://harm.glucose-ontwerp.nl
*	@project 	l-a-d-a.nl
*	@date 		23-06-2009
*/	

/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: #58595b;
	text-align: center;
	font-size: 62.5%;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

#container {
	position: relative;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	width: 920px;
	margin: 0 auto;
	text-align: left;
}
	#header {
		position: relative;
		height: 72px;
	}
		#lngSwitch {
			position: absolute;
			width: 111px;
			height: 9px;
			left: 0;
			top: 24px;			
		}
#nav {
	width: 191px;
	height: 425px;
	float: left; 
	display: inline;
}
	#nav a {
		line-height: 1.8em;
		font-weight: bold;
		color: #939598;
		text-decoration: none;
		text-transform: uppercase;
	}
		#nav li a {
			font-size: 1.3em;
		}
		#nav li li a {
			font-size: 1.2em;
		}
	#nav a:hover {
		color: #fff;
	}
	#nav .current a {
		color: #000;
	}
		#nav .current ul a {
			color: #939598;
		}
		#nav .current ul a:hover {
			color: #fff;
		}
		#nav .current .current a {
			color: #fff;
		}
	.nav_home {
		margin: 0 0 38px;
	}
	#nav ul {
		margin: 0 0 14px 35px;
	}
	
	/*taalswitch change image main-nav */	
	.nav_nl li a {
		background-image: url(../img/nav_nl.png);
	}	
	.nav_en li a {
		background-image: url(../img/nav_en.png);
	}
	
	/* main-nav items */
	.nav_home a {
		background-position: 0 0;
		width: 44px;
		height: 12px;
	}	
		.nav_home a:hover {
			background-position: -122px 0;
		}
		.nav_home .current {
			background-position: -244px 0;
		}
	.nav_directors a {
		background-position: 0 -24px;
		width: 85px;
		height: 12px;
		margin: 0 0 12px 0;
	}
		.nav_directors a:hover {
			background-position: -122px -24px;
		}
		.nav_directors .current {
			background-position: -244px -24px;
		}
	.nav_photographers a {
		background-position: 0 -48px;
		width: 122px;
		height: 12px;
		margin: 0 0 12px 0;
	}
		.nav_photographers a:hover {
			background-position: -122px -48px;
		}
		.nav_photographers .current {
			background-position: -244px -48px;
		}

	.nav_sitekicks a {
		background-position: 0 -72px;
		width: 72px;
		height: 12px;
		margin: 0 0 12px 0;
	}
		.nav_sitekicks a:hover {
			background-position: -122px -72px;
		}
		.nav_sitekicks .current {
			background-position: -244px -72px;
		}
	.nav_news a {
		background-position: 0 -96px;
		width: 56px;
		height: 12px;
		margin: 0 0 12px 0;
	}
		.nav_news a:hover {
			background-position: -122px -96px;
		}
		.nav_news .current {
			background-position: -244px -96px;
		}
	.nav_contact a {
		background-position: 0 -120px;
		width: 67px;
		height: 12px;
		margin: 0 0 12px 0;		
	}
		.nav_contact a:hover {
			background-position: -122px -120px;
		}
		.nav_contact .current {
			background-position: -244px -120px;
		}
	
		
#videoplayer,
#profile {
	width: 605px;
	height: 360px;
	font-size: 1.1em;
	line-height: 1.4em;
	color: #fff;
	background: #000;
	overflow: hidden;
}
	#videoplayer p {
		padding: 5px 5px;
	}
	#videoplayer a {
		color: #fff;
	}
h1,
.logo-photo { 
	width: 124px;
	height: 337px;
	background: url(../img/lada-logo.png) 0 0 no-repeat;
	float: right;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}
.sorry {
	float: left;
	padding: 20px 0 0 119px;
	font-size: 1.1em;
	font-weight: bold;
	color: #fff;
}
#info {
	position: relative;
	width: 100%;
	height: 112px;
	clear: left;
	background: #7a7c7e;
	text-align: center;
}
	.payoff {
		width: 424px;
		height: 35px;
		float: left;
		margin: 19px 0 0 189px;
		background: url(../img/lada-payoff.png) 0 0 no-repeat;
	}
	#info .vcard {
		position: absolute;
		top: 0px;
		right: 0px;
		width: 147px;
		height: 112px;
		text-indent: -9999px;
		overflow: hidden;
		background: url(../img/lada-adress.png) 0 0 no-repeat;
	}
		#info .vcard .email {
			width: 100%;
			height: 100%;
			text-indent: -9999px;
			display: block;
			overflow: hidden;
		}

/* profile page */
#profile {
	position: relative;
	width: 729px;
	height: 337px;
}
	#profile #content {
		position: absolute;
		left: 17px;
		top: 25px;
		width: 336px;
		height: 282px;
		overflow-y: auto;
	}
		#content h2 {
			font-size: 1.1em;
			font-weight: bold;
			text-transform: uppercase;
			color: #fff;
			margin: 0 0 7px 0;
		}
		#content a {
			color: #fff;
			text-decoration: underline;
		}	
		#content a:hover {
			text-decoration: none;
		}
		.scroll-pane p {
			color: #929393;
			font-size: 1.0em;
			line-height: 1.65em;
			margin: 0 0 2.0em 0;
			width: 305px;
		}
		.news p {
			width: 558px;
			margin: 0 0 4px 0;
		}
		.news .date {
			display: block; margin: -3px 0 7px 0;
		}
		span.klanten {
			color: #fff;
			display: block;
		}
	#profile .photo {
		position: absolute;
		width: 384px;
		height: 337px;
		right: 0;
		top: 0;
		overflow: hidden;
		background: url(../img/bg_photo.jpg) 0 0 no-repeat;
	}
		#profile .photo img {
			float: right;
		}
	
	.logo-photo {
		text-indent: 0;
	}	

/* description */
	.description {
		position: relative;
		top: 15px;
	}
	.description li {
		float: left; 
		display: inline;
		margin: 0 5px 0 0;
		color: #939598;
		font-size: 1.2em;
		font-weight: normal;
	}	
		.description li span {
			text-transform: uppercase;
		}
		.description li a {
			color: #939598;
		}
		.description li a:hover {
			color: #fff;
		}
	

/* thumb-scroller */
	#info #prevBtn a {
		position: absolute;
		left: 121px;
		top: 19px;
		width: 58px;
		height: 75px;
		background: url(../img/prev.png);
	}
	#info #nextBtn a  {
		position: absolute;
		left: 726px;
		top: 19px;
		width: 58px;
		height: 75px;
		background: url(../img/next.png);
		border-left: 12px solid #7a7c7e;
	}
	#slider {
		position: absolute;
		left: 191px;
		top: 19px;
		width: 545px;
		height: 75px;
		overflow: hidden;
	}
		#slider ul li {
			width: 99px;
			height: 75px;
			float: left;
			display: inline;
			margin: 0 10px 0 0;
		}


/* sitekicks */
#sitekicks {
	float: left;
	width: 605px;
	height: 337px;
	overflow: hidden;
}
	#sitekicks ul {
		width: 632px;
		float: left;
	}
		#sitekicks ul li {
			float: left;
			display: inline;
			width: 99px;
			height: 108px;
			margin: 0 27px 0 0;
		}	
			
			#sitekicks ul li a {
				text-decoration: none;
				color: #7a7c7e; 
			}
				#sitekicks ul li a img,
				#slider ul li a img {
					-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
					filter: alpha(opacity=30);
					-moz-opacity: 0.3;
					opacity: 0.3;
					margin: 0 0 2px;
					width: 99px;
				}	
			#sitekicks ul li a:hover {
				color: #fff;
			}
				#sitekicks ul li a:hover img,
				#slider ul li a:hover img,
				#slider ul .current img {
					-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
					filter: alpha(opacity=100);
					-moz-opacity: 1.0;
					opacity: 1;
				}

/* jScrollPane */
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
	top: 25px;
}
.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: url(../img/track.gif) 0 0 repeat-y;
}
.jScrollPaneDrag {
	position: absolute;
	background: url(../img/slider.gif) 0 0 repeat-y;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
	
/* hide */
#prevBtn,
#nextBtn,
#nav li a,
.payoff  {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}
/* unhide */
#nav li li a {
	display: inline;
	text-indent: 0;
	background: none;
}
.nav_en li li a,
.nav_nl li li a {
	background: none;
}

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */
.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: 0px;
	font-size: 22px;
	line-height: 22px;
	text-transform: uppercase;
}

.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: -6px;
	font-size: 25px;
}

.sIFR-hasFlash h4 {
	visibility: hidden;
	letter-spacing: -5px;
	font-size: 21px;
}
.sIFR-hasFlash #nav li {
	font-size: 14px;
	cursor: pointer;
}

.sIFR-hasFlash h5#pullquote {
	letter-spacing: -4px;
	visibility: hidden;
	font-size: 24px;
}