/**
 *	Design by Jente Kasprowski <jente@inventis.be>
 *	CSS code and layout by Chris Ramakers <chris@inventis.be>
 *	© 2006 Inventis Web Achitects
 *	http://www.inventis.be
 *	
 *	kleur 1		#545454	Donker grijs
 *	kleur 2		#C8C8C8	Licht grijs
 *	kleur 3		#000000	Zwart
 *	kleur 4		#FFFFFF	Wit
 * kleur 5		#393939	Donker grijs 2
 */

/* Body Layout
--------------------------------------------------------------------------------------- */

html, body { padding: 0; margin: 0; }
strong { font-weight: bold; }
em { font-style: italic; }

strong em, em strong { font-weight: bold; font-style: italic;}

body {
	background-color: #000000;
	color: #FFFFFF;
	}
p {
	margin: 1em 0;
	}
a:link, a:active {
	color: #FFFFFF;
	text-decoration: underline;
	}
a:visited {
	color: #A2A2A2;
	text-decoration: underline;
	background: url('../images/icons/visited.gif') no-repeat right 4px;
   padding-right: 11px;
	font-style: italic;
	}
a:hover {
	color: #C8C8C8;
	text-decoration: none;
	}
	
a.nohand{cursor:default;}
img.valign { /* Aligns contents of a div vertically, http://css-discuss.incutio.com/?page=VerticalAlign */
	height: 100%;
	width: 0px;
	vertical-align: middle;
	}

/* Container Layout
--------------------------------------------------------------------------------------- */

#siteContainer {
	width: 949px;
	}
	
#taalKeuze{margin-top:-50px; float:right;}
#taalKeuze a{
	display:block;
	float:left;
	text-indent:-9000px;
	height:25px;
	width:22px;
	overflow:hidden;
	margin-right:5px;
	background:none;
	padding:0;
}

#taalKeuze a#tlNL{background:url("../images/taal/nl.jpg") no-repeat top left;}

#taalKeuze a#tlFR{background:url("../images/taal/fr.jpg") no-repeat top left;}

#taalKeuze a#tlNL:hover, #taalKeuze a#tlFR:hover, #taalKeuze a#tlNL.active, #taalKeuze a#tlFR.active{background-position:0 -24px;}

/* Title Layout
--------------------------------------------------------------------------------------- */

h1.siteTitle {
	position: absolute;
	left: 0; top: 0;
	text-indent: -9000px;
	}
#contentContainer h2 {
	margin: -3px 0 1em 0;
	height: 30px;
	width: 570px;
	}
#contentContainer h3 {
	margin: -3px 0 1em 0;
	height: 25px;
	width: 570px;
	}
#contentContainer h4 {
	margin: -3px 0 1em 0;
	height: 20px;
	width: 570px;
	}
	
#contentContainer .nomargin {margin-top: 0; height: 20px;}

/* Menu Layout
--------------------------------------------------------------------------------------- */

#topMenu {
	display: block;
	width: 949px;
	float: left;
	border-left: 1px solid #000000;
	}
#topMenu li {
	display: inline;
	width: 100px;
	float:left;
	overflow: hidden;
	}
#topMenu li a {
	display: block;
	width: 100px;
	height: 62px;
	text-indent: -9000px;
	}
.nl li a:link, .nl li a:visited{background: url('../images/layout/topMenu_nl.jpg') no-repeat top left;}
.fr li a:link, .fr li a:visited{background: url('../images/layout/topMenu_fr.jpg') no-repeat top left;}

#topMenu li a:hover {
	background-position: bottom left;
	}
#topMenu li a#mJoico     { background-position:    0px 0; }	
#topMenu li a#mProducts  { background-position: -100px 0; }	
#topMenu li a#mEducatie  { background-position: -200px 0; }	
#topMenu li a#mService   { background-position: -300px 0; }	
#topMenu li a#mVerdelers { background-position: -400px 0; }	
#topMenu li a#mPagode    { background-position: -500px 0; }	
#topMenu li a#mContact   { background-position: -600px 0; }	

#topMenu li a#mShop   { background: url('../images/layout/shopBg.jpg') no-repeat top left !important;}	

#topMenu li a#mJoico:hover     { background-position:    0px -62px; }	
#topMenu li a#mProducts:hover  { background-position: -100px -62px; }	
#topMenu li a#mEducatie:hover  { background-position: -200px -62px; }	
#topMenu li a#mService:hover   { background-position: -300px -62px; }	
#topMenu li a#mVerdelers:hover { background-position: -400px -62px; }	
#topMenu li a#mPagode:hover    { background-position: -500px -62px; }	
#topMenu li a#mContact:hover   { background-position: -600px -62px; }	

#topMenu li a#mShop:hover   { background-position: 0 -62px !important; }	


#topMenu li ul {
	position: absolute;
	width: 100px;
	visibility: hidden;
}

#topMenu li li {
	border-bottom: 1px solid #000000; 
	}

#topMenu li ul li a {
	height: auto;
	background: none;
	background-color: #2c2c2c !important;
	/*filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;*/
	text-indent: 0;
	border-top: 1px solid #999999;
	padding: 4px 0 0 0;
	text-decoration: none;
	text-align:center;
	height: 15px;
	border-bottom:1px solid #000000;
	font-size: 85%;
	font-style:normal;
	color:#fff;
}
#topMenu li ul li a:hover {
	background-color: #000000 !important;
	/*filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;*/
	font-style:normal;
}

/*
#topMenu li ul li a:visited {
	padding: 4px 0 0 0;
	background-image: none;
	font-style:normal;
	color:#fff;
}*/


#topMenu li:hover ul, #topMenu li.sfhover ul {
	visibility: visible;
}

/*menu uitbreiding*/
	#topMenu li li ul {
	margin-left:100px;
	margin-top:-21px;
	position: absolute;
	width: 100px;
	visibility: hidden;
	display:none;
	}
	
	#topMenu li li a.subs:link, #topMenu li li a.subs:visited, #topMenu li li a.subs:hover{background: #000000 url('../images/icons/newsLi.gif') no-repeat 95% 55%;}
	
	#topMenu li li ul li{margin:0; padding:0;border-bottom:1px solid #4B4B4B;}
	#topMenu li li ul a{
	height: auto;
	background: none;
	background-color: #505050;
	margin:0;
	
	/*filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;*/
	text-indent: 0;
	border-top: 1px solid #999999;
	padding: 4px 0 0 0;
	text-decoration: none;
	text-align:center;
	height: 16px;
	border-bottom:0px;
	font-size: 85%;
	font-style:normal;
	color:#fff;
	}
	#topMenu li li ul a:hover {
		background-color: #181818;
		/*filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;*/
		font-style:normal;
	}
	
	#topMenu li li:hover ul, #topMenu li li.sfhover ul {
		visibility: visible;
		display:block;
		border-left:1px solid #999999;
		filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;
	}
/**/

/* Header Layout
--------------------------------------------------------------------------------------- */

#header {
	clear: both;
	width: 100%;
	}
#header img#joicoHeader{float:left;}
	
a#headerLogo{float:right;display:block; width:236px; height:286px; background: url('../images/layout/headerLogo.gif') no-repeat top right;}

/* TitleBar Layout
--------------------------------------------------------------------------------------- */

#titleBar {
	clear:both;
	height: 38px;
	padding:0;
	}
 

.bar_1{background: url('../images/layout/titleBackground_1.jpg') repeat-x 0 0; !important}
.bar_2{background: url('../images/layout/titleBackground_2.jpg') repeat-x 0 0; !important}
.bar_3{background: url('../images/layout/titleBackground_3.jpg') repeat-x 0 0; !important}
.bar_4{background: url('../images/layout/titleBackground_4.jpg') repeat-x 0 0; !important}
.bar_5{background: url('../images/layout/titleBackground_5.jpg') repeat-x 0 0; !important}
.bar_6{background: url('../images/layout/titleBackground_6.jpg') repeat-x 0 0; !important}
.bar_7{background: url('../images/layout/titleBackground_7.jpg') repeat-x 0 0; !important}

.bar_B6A28F{background: url('../images/layout/titleBackground_B6A28F.jpg') repeat-x 0 0; !important}
.bar_A57D88{background: url('../images/layout/titleBackground_A57D88.jpg') repeat-x 0 0; !important}
.bar_7D8288{background: url('../images/layout/titleBackground_7D8288.jpg') repeat-x 0 0; !important}
.bar_C8968E{background: url('../images/layout/titleBackground_C8968E.jpg') repeat-x 0 0; !important}
.bar_888D92{background: url('../images/layout/titleBackground_888D92.jpg') repeat-x 0 0; !important}
.bar_8EA3B3{background: url('../images/layout/titleBackground_8EA3B3.jpg') repeat-x 0 0; !important}
.bar_889283{background: url('../images/layout/titleBackground_889283.jpg') repeat-x 0 0; !important}

.bar_C03F26{background: url('../images/layout/titleBackground_C03F26.jpg') repeat-x 0 0; !important}
.bar_B6BCBE{background: url('../images/layout/titleBackground_B6BCBE.jpg') repeat-x 0 0; !important}
.bar_E0E0DF{background: url('../images/layout/titleBackground_E0E0DF.jpg') repeat-x 0 0; !important}
.bar_AD9B7D{background: url('../images/layout/titleBackground_AD9B7D.jpg') repeat-x 0 0; !important}

#titleBar h1 {
	margin: 4px 0 0 60px;
	_margin-left:30px;
	display: block;
	float: left;
	height: 30px;
	width: 650px;
	letter-spacing: 10px;
	}
#titleBar a.quickndirty { float: left; width: 148px; text-align: right; padding-top: 13px; text-decoration: none; text-transform: uppercase; font-family: Arial; font-size: 11px; }
#titleBar ul {
	display: block;
	float: right;
	margin: 15px 0 0 0;
	overflow: hidden;
	/*width: 200px; */
	}
#titleBar ul li {
	padding: 0 5px 0 5px;
	margin: 0 5px 0 -5px;
	float: left;
	height: 11px;
	width:11px;
	border-left: 1px solid white;
	}
#titleBar ul li a {
	display: block;
	float: left;
	width: 11px;
	height: 11px;
	line-height: 11px;
	text-indent: -9000px;
	background:none;
	padding:0;
	}

#titleBar ul li a#slExtranet{ background: url('../images/icons/serviceLinksExtranet.gif') no-repeat 0 0; width: 50px; }
#titleBar ul li a#slHome{ background: url('../images/icons/serviceLinksHome.gif') no-repeat 0 0;}
#titleBar ul li a#slSitemap{ background: url('../images/icons/serviceLinksSitemap.gif') no-repeat 0 0; }
#titleBar ul li a#slContact{ background: url('../images/icons/serviceLinksContact.gif') no-repeat 0 0; }


/* Pictures Layout
--------------------------------------------------------------------------------------- */
#pagePictures{float:left; width:161px; margin:3px 9px 1px 0;}

#pagePictures a:link, #pagePictures a:visited, #pagePictures a:active {background:none; padding:0; display:block; border:3px solid #2C2C2C; overflow:hidden;}
#pagePictures a:hover{border:3px solid #7C7C7C;}

#pagePictures a.first{width:152px; height:114px;}
#pagePictures a.rest{width:72px; height:54px; float:left; margin-bottom:2px;}
#pagePictures a.rechts{margin-left:2px;}
#pagePictures a.links{clear:left; margin-bottom:2px;}

/* Files Layout
--------------------------------------------------------------------------------------- */
#pageFiles{clear:both;padding-top:20px;}
#pageFiles h3#bestanden{clear:both; border-bottom:1px solid #2C2C2C; width:570px; }
#pageFiles ul li{list-style-type:none; list-style-image:url('../images/icons/newsLi.gif');}


/* ContentContainer Layout
--------------------------------------------------------------------------------------- */

#contentContainer {
	font-family:Arial, Helvetica, sans-serif; 
	font-size: 92%;  
	clear: both;
	padding: 10px 0 10px 10px;
	width: 929px;
	float: left;
	}
#contentContainer ul {
	list-style-type: disc;
	margin: 1em 0 1em 15px;
	line-height: 150%;
	}

#contentContainer ol {
	list-style-type: decimal;
	margin: 1em 0 1em 20px;
	line-height: 150%;
	}

/* Content Layout
--------------------------------------------------------------------------------------- */

#content {
	float: left;
	/*width: 580px;*/
	width:570px;
	margin-left:50px;
	_margin-left:25px;
	margin-top:12px;
	padding:0;
	padding-bottom:20px;
	}

#contentTemplate, .educatie, ul, ol, p{line-height: 150%;}

/* Picture Sidebar Layout
--------------------------------------------------------------------------------------- */

#contentContainer #pictureSidebar{float:left; width:80px; margin:0; padding:0;}

#contentContainer #pictureSidebar li{list-style-type:none;}

#contentContainer #pictureSidebar li a{background:none;}

#contentContainer #pictureSidebar li a img{
	border:2px solid #A2A2A2;
	display:block;
}

#contentContainer #pictureSidebar li a:hover img{
	border:2px solid #FFFFFF;
}


/* Sidebar Layout
--------------------------------------------------------------------------------------- */

#contentContainer #contentSidebar {
	float: right;
	margin: 0 -10px 10px 20px;
	width: 248px;
	position: relative;
	}
#contentSidebar li {
	display: block;
	margin-bottom: 7px;
	list-style-type:none;
	}
#contentSidebar li a {	
	display: block;
	height: 71px;
	width: 248px;
	text-indent: -9000px;
	background:none;
	padding:0;
	}
#contentSidebar li h3 {
	background: url('../images/layout/sidebar/productsTitle.gif') no-repeat 0 0;
	text-indent: -9000px;
	height: 21px;
	width: 248px;
	margin: 15px 0 -7px 0;
	padding: 0;
	}

#contentSidebar li h3.nl {background-position:0 0;}
#contentSidebar li h3.fr {background-position:0 -21px;}

#contentSidebar li a#sJoicoline  		{ background: url('../images/layout/sidebar/joicoLine.jpg') no-repeat top left; }
#contentSidebar li a#sDesigncollection  { background: url('../images/layout/sidebar/designCollection.jpg') no-repeat top left; }
#contentSidebar li a#sIcehair    		{ background: url('../images/layout/sidebar/iceHair.jpg') no-repeat top left; }
#contentSidebar li a#sVerocolor  		{ background: url('../images/layout/sidebar/verocolor.jpg') no-repeat top left; }
#contentSidebar li a#sVerochrome 		{ background: url('../images/layout/sidebar/verochrome.jpg') no-repeat top left; }
#contentSidebar li a#sTriactive  		{ background: url('../images/layout/sidebar/triactive.jpg') no-repeat top left; }
#contentSidebar li a#sAgedefy			{ background: url('../images/layout/sidebar/agedefy.jpg') no-repeat top left; }

#contentSidebar li a#sJoicoline:hover  			{ background-position: bottom left; }
#contentSidebar li a#sDesigncollection:hover  	{ background-position: bottom left; }
#contentSidebar li a#sIcehair:hover    			{ background-position: bottom left; }
#contentSidebar li a#sVerocolor:hover  			{ background-position: bottom left; }
#contentSidebar li a#sVerochrome:hover 			{ background-position: bottom left; }
#contentSidebar li a#sTriactive:hover  			{ background-position: bottom left; }
#contentSidebar li a#sAgedefy:hover				{ background-position: bottom left; }

#contentSidebar li.verdelers {
	background: url('../images/layout/sidebar/verdelersBackground.gif') no-repeat top left;
	height: 158px;
	width: 248px;
	}
	
#contentSidebar li.nl {background-position:0 0;}
#contentSidebar li.fr {background-position:0 -158px;}
#contentSidebar li.verdelers h3 {
	display: none;
	}
#contentSidebar li.verdelers form {
	padding-top: 80px;
	text-align: center;
	}
#contentSidebar li.verdelers form select {
	background-color: #D6D6D6;
	border: 0;
	padding: 0;
	width: 180px;
	font-size: 92%;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity: 0.5;
	}

/* Footer Layout
--------------------------------------------------------------------------------------- */
#footer a:visited{background:none; font-style:normal;}

#footer {
	clear: both;
	padding: 0 0 10px 0;
	width: 949px;
	margin-bottom:20px;
	}
#footer #footerMarquee {
	height: 37px;	
	margin:0; padding:0;
	padding-left:50px;
	margin-bottom:10px;
	_margin-bottom:0px;
	background: url('../images/layout/joicoFooter.gif') repeat-x  0 0;
	font-size: 92%;
	border:1px solid black;
	}
#footer #footerMarquee div{
	margin:0; 
	padding:0; 
	margin-top:10px;
	padding-left:10px; 
}
	
#footer #footerMarquee strong {
	border-right: 1px solid #fff;
	padding: 0 10px 0 0;
	margin: 0 5px 0 0;
	}
#footer #footerMarquee a.leesmeer {
	color: #545454;
	font-weight: bold;
	}
#footer p.copyright {
	margin: 0;
	padding: 0 0 0 10px;
	margin-left:50px;
	_margin-left:25px;
	_margin-top:-20px;
	float: left;
	font-size: 85%;
	line-height: 19px;
	color: #393939;
	}
#footer p.credits {
	margin: 0;
	_margin-top:-20px;
	float: right;
	}
#footer p.credits a {
	display: block;
	width: 77px;
	height: 19px;
	background: url('../images/layout/credits.gif') no-repeat top left;
	text-indent: -9000px;
	}
#footer p.credits a:hover {
	background-position: bottom left;
	}
	
#newsScroll {
	padding-left:50px; 
	position:absolute; 
	top:-36px;
	_top:-48px;
	}
	
.scrollClass {
	padding-left:60px;
	padding-bottom:20px;
	text-align:left;
	color:#ffffff;
}

#newsScroll a{color:#a2a2a2; text-decoration:underline;}
#newsScroll a:hover{color:#C8C8C8; text-decoration:none;}
.nDatum{color:#999999; font-size:92%;}
.nTitel{font-weight:bold;}

table.agedefy td { padding: 8px; margin: 8px;}