@charset "UTF-8";
/* 
	CSS Document 
	Smulders Interieurprojecten.
	
	Copyright Mike Ontwerpt 2011

*/



/* G E N E R A L */



html{
	height: 		100%;	
}

body{
	margin: 		0px;
	height: 		100%;
	width: 			100%;
	font-family:	"Din Regular", Helvetica, Arial, sans-serif;
	overflow: 		hidden;	
	font-size:		14px;	
}


@font-face {  
  font-family: 		"Din Light";  
  src: 				url( ../font/DINLt___.ttf ); /* IE */  
  src: 				local("Din Light"), url( ../font/DINLt___.ttf ) format("truetype"); /* non-IE */  
}

@font-face {  
  font-family: 		"Din Regular";  
  src: 				url( ../font/DINRg___.ttf ); /* IE */  
  src: 				local("Din Regular"), url( ../font/DINRg___.ttf ) format("truetype"); /* non-IE */  
}

@font-face {  
  font-family: 		"Din Bold";  
  src: 				url( ../font/DINBd___.ttf ); /* IE */  
  src: 				local("Din Bold"), url( ../font/DINBd___.ttf ) format("truetype"); /* non-IE */  
}



h1{
	font-variant:	small-caps;	
	font-family:	"Din Bold", Helvetica, Arial, sans-serif;
	color:			#008cc3;
	font-size:		22px;
	margin: 		40px 0 40px 0;
}

h2{
	font-variant:	small-caps;	
	font-family:	"Din Bold", Helvetica, Arial, sans-serif;
	font-size:		20px;
	color:			#008cc3;
	margin: 		-5px 0 0 0;
}

h3{
	font-size:		18px;
	color:			#fff;
	margin: 		20px 0 20px 0;
}

hr{
	color: 			#fff;	 /* IE */  
	background-color: #fff;	 /* non-IE */  
	border:			none;
	border-top:		1px solid;
}

strong{
	font-family:	"Din Bold", Helvetica, Arial, sans-serif;	
}

/* N A V I G A T I O N */

nav{
	width:			auto;
	height:			40px;
	position: 		absolute;
	top:			0;
	right:			15px;
	z-index:		20;
}

nav ul.menu {
	margin: 		0;	
	height:			40px;
}

nav ul.menu li{
  	font-family: 	"Din Bold";  
	font-variant:	small-caps;
	letter-spacing: 1px;
	list-style:		none;
	float:			right;
	display:		block;
	padding:		11px;
	background:		#4f5355;
	cursor:			pointer;
	color:			#fff;	
}

nav ul.menu li.activeMenu{
	background:		#008cc3;
}


nav ul.submenu {
	margin: 		0;	
}

nav ul.submenu li{
	font-variant:	small-caps;
	letter-spacing: 2px;
	list-style:		none;
	float:			left;
	display:		block;
	padding:		5px 20px 7px 20px;
	background:		#fff;
	color:			#4f5355;
	cursor:			pointer;
}

nav ul.submenu li.active{
	background:		#999;
	color:			#fff;
}

#subHideParticlier{
	position: 		absolute;
	top:			40px;	
	left:			87px;	
}
#subParticlier{
	position: 		relative;
	top:			-35px;	
	left:			0;	
	z-index:		20;
}

.hideSubMenu{
	overflow:		hidden;
	height:			30px;
}





/* P A R A L L A X   B A C K G R O U N D S  */

#scrollpage{
	margin:			0 auto;
	position: 		relative;
	height: 		100%;
	width: 			100%;
	overflow-y:		scroll;	
	overflow-x:		hidden;	
	z-index:		1;
	border-left:	1px solid #222;
	border-right:	1px solid #222;
}


.main-background{
	position: 		relative;
	height:			1000px;	
	overflow:		hidden;
}


.pageBox{
	position: 		absolute;
	top:			80px;
	left:			20px;
	width:			auto;
	height:			auto;	
}

.bottomShadow{
	height:			100px;
	width:			1440px;
	background:		url(../images/temp/bottom_shadow.png) 0 0 repeat-x;
	position:		absolute;
	left:			0;
	top:			-98px;		
}

#page1{ background: url(../images/structure/bg1.jpg) 0 -73px fixed no-repeat; }
#page2{ background:	url(../images/structure/bg2.jpg) 0 -73px fixed no-repeat; }
#page3{ background:	url(../images/structure/bg3.jpg) 0 -73px fixed no-repeat; }
#page4{ background:	url(../images/structure/bg4b.jpg) 0 -73px fixed no-repeat; }
#page5{ background:	url(../images/structure/bg4b.jpg)  0 -73px fixed no-repeat; }
#page6{ background:	url(../images/temp/bg2.jpg) 50% -274px fixed no-repeat; }
#page7{ background:	url(../images/temp/bg4.jpg) 0 -73px fixed no-repeat; }



/*********************** C O N T E N T  ***************************/

/* G E N E R A L   C O N T E N T */


.textBlockContainer{
	position:		relative;
	top:			120px;
	left:			100px;
	width: 			380px;
	padding: 		40px;
	height: 		auto;
	background:		#fff;
	z-index:		100;
}

.headerBox{
	position:		relative;
	top:			0;
	left:			0;	
	z-index:		10;
	display:		block;
	height: 		160px;
}


.h1InContentBox{
	position:		absolute;
	top:			-40px;
	left:			0;
	margin:			0;
}

.contentBox{
	position:		absolute;
	top:			320px;
	left:			140px;
	z-index:		500;
	color:			#fff;
	width: 			380px;
	height: 		auto;
	padding:		30px 0;
}

.footerBox{
	position:		absolute;
	top:			240px;
	left:			40px;
	width:			380px;	
	padding:		20px 0 0 0;
	z-index:		10;
	color:			#222;
	display:		block;
}

.blueBar{
	position:		absolute;
	left:			0px;
	top:			320px;
	height:			200px;
	width:			100%;
	z-index:		200;
	float:			left;
}

.blueBarFallback{
	background:		#00589b;
	opacity:		0.7;
}


/* S I D E P H O T O S    C O N T E N T */

.spContainer{
	position:		absolute;
	top:			160px;
	left:			600px;
	width:			440px;
	height:			440px;
	z-index:		500;
}

.spColumnHolder{
	position:		relative;
	width:			880px;
	height:			auto;
}

.spColumn{
	position:		relative;
	width:			440px;
	height:			auto;
	float:			left;
	margin: 		0 20px 0 0;
}

.spBar{
	width:			400px;
	height:			29px;
	padding:		11px 20px 0 20px;
	background:		#fff;	
}

.spContent{
	width:			440px;
	min-height:		100px;
	margin:			20px 0 20px 0;
	overflow:		hidden;
}

.spThumbRow{
	width:			440px;
	height:			auto;
	margin:			0 0 10px 0;		
}

.spThumb{
	position:		relative;
	left:			0;
	width:			138px;
	height:			98px;
	background:		#000;
	border:			solid 1px #fff;
	overflow:		hidden;
	float:			left;
	margin:			0 10px 0 0;
}

.projectCount{
	margin:			-3px 0 0 0;
	font-size:		18px;	
}

.barArrow{
	margin:			0 0 1px 0;	
}


/* A L B U M */


.albumContainer{
	margin:			0 auto;
	position:		relative;
	top:			80px;
	width: 			940px;
	height:			auto;
	z-index:		500;
}

.albumBar{
	width:			900px;
	height:			29px;
	padding:		11px 20px 0 20px;
	background:		#fff;	
}

.albumContent{
	width:			940px;
	min-height:		100px;
	margin:			20px 0 0 0;
	overflow:		hidden;
}

.albumColumnHolder{
	position:		relative;
	width:			960px;
	height:			auto;
}

.albumColumn{
	position:		relative;
	width:			940px;
	height:			auto;
	float:			left;
	margin: 		0 20px 0 0;
}

.albumRow{
	width: 			940px;
	height:			auto;
}

.albumThumb{
	position:		relative;
	left:			0;
	top:			0;
	width: 			298px;
	height:			198px;
	margin:			0 20px 20px 0;
	background:		#000;
	border:			solid 1px #fff;
	float: 			left;
	overflow:		hidden;
}

.albumBlue{
	position:		absolute;
	top:			160px;
	height:			380px;	
}



/* W E L C O M E */

.welcomeCol{
 	font-family: 	"Din Light", Helvetica, Arial, sans-serif;
	font-size:		28px;
	line-height:	36px;
	letter-spacing: -50;
	padding:		0;
}

.welcomeHeader{
 	height:			120px;
}

.welcomeHr{
	margin:			40px 0 ;
}

.txtRondLeiding{
	font-family: 	"Din Bold", Helvetica, Arial, sans-serif;
	font-size:		27px;
	font-variant:	small-caps;
	letter-spacing:	-25;
}

.welcomeArrow{
	margin:			10px 0 0 20px;
}






/* M A I N   C L A S S E S */

.clear{
	clear: 			both;	
}

.link{
	cursor:			pointer;	
}

.floatRight{
	float:			right;	
}

.floatLeft{
	float:			left;	
}

.noMargin{
	margin:			0;
}

.adjustKerningV{
	letter-spacing:	-1px;
}




/* T E M P */


#testBtn{
	width: 			50px;
	height: 		50px;
	background: 	#FF0;
	position: 		absolute;
	top: 			0;
	left: 			0;
	z-index: 		10;
}