/*----->>> IMPORT RESET.CSS <<<-----*/ 
@import url("reset.css"); 
/*@import url("scratch.css"); */

/*----->>> GLOBAL SETTINGS <<<-----*/ 
body {
	font-size: 62.5%; /*1.0em --> 10px*/
	font-family: Arial, Helvetica, sans-serif;
	background:url(../images/bg-repeat.jpg) repeat 0 0;
	color:#fffffe;
}
#outerwrapper
{
	width:100%;
	margin:0 auto;
	font-size:1.2em;
}

/*----->>> HEADINGS <<<-----*/ 
h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
	font-family: Georgia, "Times New Roman", Times, serif;	
}

h1 {
	margin:0;
	padding:0;
	font-size:0px;
	line-height:0px;
	visibility:hidden;
}
h2 {
	font-size:1.3333em;
	margin:0 0 10px 0;
	}
	h2.support{
		background:url(../images/support-title.png) no-repeat 0 0;
		height:92px;
		width:163px;
		display:block;
		margin:0 8px 0 0;
	}
/*----->>> LINKS <<<-----*/ 
a,
a:link,
a:visited {
	
}

/*----->>> COMMON FORMATTING <<<-----*/ 
p {
	margin:0 0 10px 0;
	line-height:18px;
} 
/*----->>> CLEARFIX <<<-----*/ 
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0;
    clear: both; 
    visibility: hidden;
}

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
.clear {
	clear: both; 
}
.clear-left {
	clear: left;
}
.inline {
	display: inline-block;
	width: 100%;
	float: left;
}
* html .inline {
	display: inline;
	width: 100%;
	float: left;
}
/*----->>> END CLEARFIX <<<-----*/ 

/*----->>> GLOBAL CLASSES <<<-----*/ 
.float-left {
	float:left; 
}
.float-right {
	float:right; 
} 
.text-left { 
	text-align:left; 
}
.text-right { 
	text-align:right;
}
.text-center { 
	text-align:center; 
}
.text-justify  { 
	text-align:justify; 
}
.underline { 
	border-bottom:1px solid; 
}
.img-left { 
	float:left;margin:0px 10px 4px 0; 
}
.img-right { 
	float:right;margin:0px 0 4px 10px; 
}
.nopadding { 
	padding:0; 
}
.nomargin {
	margin:0;
}
.fadeThis {
	cursor:pointer;
}
.paddingtop15{
	padding-top:15px;
}
/*----->>> HEADER <<<-----*/ 
.innerwrapper{
	margin:0 auto;
	width:1091px;
}
#header{
	background:#1e170e url(../images/bg-header.png) repeat-x 0 0;
	height:46px;
}
#info-box{
	background:#1e170e url(../images/bg-infobox.png) repeat-x 0 0;
	height:131px;
}
	#box-logo{
		padding:15px 0 0 0;
		float:left;
	}
	.toggle-info{
		padding:0;
		margin:0;
		overflow:hidden;
		display:none;
	}
	#box-support{
		padding:15px 0 0 0;
		float:right;
	}
	ul#SoMe{
		list-style:none;
	}
	ul#SoMe li{
		margin:0 0 4px 0;
	}
	a#whothehell.fadeThis,
	a#whothehell.fadeThis span.hover {
		background:url(../images/btn-whothehell.png) no-repeat 0 0;
		display:block;
		height:12px;
		width:193px;
		position:relative;
		text-indent:-9999px;
		margin:0 auto;
	}
	a#whothehell.fadeThis span.hover {
		background-position: 0 -12px;	
		left:0;
		position:absolute;
		top:0;
	}
	a#logo-intracto.fadeThis,
	a#logo-intracto.fadeThis span.hover {
		background:url(../images/logo-intracto.png) no-repeat 0 0;
		display:block;
		height:95px;
		width:359px;
		position:relative;
		text-indent:-9999px;
	}
	a#logo-intracto.fadeThis span.hover {
		background-position: 0 -95px;
		left:0;
		position:absolute;
		top:0;
	}
	a#btn-twitter.fadeThis, a#btn-twitter.fadeThis span.hover, a#btn-facebook.fadeThis,
	a#btn-facebook.fadeThis span.hover, a#btn-web.fadeThis,	a#btn-web.fadeThis span.hover {
		background:url(../images/btn-twitter.png) no-repeat 0 0;
		display:block;
		height:32px;
		width:141px;
		position:relative;
		text-indent:-9999px;
	}	
	a#btn-facebook.fadeThis,
	a#btn-facebook.fadeThis span.hover{
		background:url(../images/btn-facebook.png) no-repeat 0 0;
	}
	a#btn-web.fadeThis,
	a#btn-web.fadeThis span.hover{
		background:url(../images/btn-web.png) no-repeat 0 0;		
	}
	a#btn-twitter.fadeThis span.hover,
	a#btn-facebook.fadeThis span.hover,
	a#btn-web.fadeThis span.hover {
		background-position: 0 -32px;
		left:0;
		position:absolute;
		top:0;
	}
/*----->>> END HEADER <<<-----*/
 
 
 
 
 
 
/*----->>> CONTENT <<<-----*/ 	
#content{
	width:1091px;
	margin:0 auto;
	background:url(../images/bg-large.png) no-repeat 0 0;
	height:2100px;	
	margin-top:-7px;	
}
	#box-battle{
		height:675px;
		position:relative;
	}
		
		#battle-zone,
		#border-shad{
			width:817px;
			height:396px;
			position:absolute;
			left:135px;
			top:188px;	
			overflow:hidden;
		}
		#border-shad
		{
			background:url(../images/border-shad.png) no-repeat 0 0;
		}	
		.fight{
			background:url(../images/battle.jpg) no-repeat 0 0;
			width:817px;
			height:396px;
		}
		#dev-zone
		{
			background-position:-817px 0;
		}
		#support-zone
		{
			background-position:-1634px 0;
		}
		#marketing-zone
		{
			background-position:-2451px 0;
		}
		.info-box{			
			width:340px;
			height:144px;
			position:absolute;
			right:20px;
			top:20px;
		}
		#info-design
		{
			background:url(../images/box-design.png) no-repeat 0 0;
			z-index:2;
		}
		#info-dev
		{
			background:url(../images/box-development.png) no-repeat 0 0;
			z-index:2;
		}
		#info-support
		{
			background:url(../images/box-sup.png) no-repeat 0 0;
			z-index:2;
		}
		#info-marketing
		{
			background:url(../images/box-marketing.png) no-repeat 0 0;
			z-index:2;
		}
			.info-box a
			{
				top:100px;
				left:25px;				
				float:left;
				position:relative;
				text-indent:-9999px;
				display:block;
			}
			a.btn-backup{
				background:url(../images/btn-backup.png) no-repeat 0 0;				
				height:33px;
				width:125px;				
				margin-right:5px;
			}
			a.btn-backup:hover {
				background-position: 0 -33px;
			}
			a.btn-hellno{
				background:url(../images/btn-hellno.png) no-repeat 0 0;				
				height:33px;
				width:65px;				
				margin-right:5px;
			}
			a.btn-hellno:hover {
				background-position: 0 -33px;
			}
		
		.target{
			cursor:url(../images/target.cur), pointer;
		}
		a#stijn{	
			position:absolute;		
			left:60px;
			top:160px;
			width:100px;
			height:230px;
		}
		a#rob{	
			position:absolute;		
			left:170px;
			top:150px;
			width:100px;
			height:240px;
		}
		a#gunther{	
			position:absolute;		
			left:530px;
			top:270px;
			width:70px;
			height:100px;
		}
		a#jan{
			position:absolute;		
			left:50px;
			top:250px;
			width:20px;
			height:60px;
		}
		a#adriaan{
			position:absolute;		
			left:100px;
			top:25px;
			width:30px;
			height:70px;
		}
		a#marco{
			position:absolute;		
			left:80px;
			top:335px;
			width:100px;
			height:40px;
		}
		a#bert{
			position:absolute;		
			left:220px;
			top:165px;
			width:60px;
			height:180px;
		}
		a#mathias{
			position:absolute;		
			left:430px;
			top:240px;
			width:80px;
			height:130px;
		}
		a#gerry{
			position:absolute;		
			left:600px;
			top:245px;
			width:70px;
			height:120px;
		}
		a#tom{
			position:absolute;		
			left:650px;
			top:160px;
			width:50px;
			height:50px;
		}
		a#ward{
			position:absolute;		
			left:320px;
			top:240px;
			width:60px;
			height:120px;
		}
		a#jo{
			position:absolute;		
			left:460px;
			top:185px;
			width:90px;
			height:200px;
		}
		a#kevin{
			position:absolute;		
			left:740px;
			top:270px;
			width:50px;
			height:70px;
		}
		a#pieter{
			position:absolute;		
			left:260px;
			top:260px;
			width:70px;
			height:130px;
		}
		a#katrien{
			position:absolute;		
			left:390px;
			top:160px;
			width:70px;
			height:230px;
		}
		a#tommy{
			position:absolute;		
			left:470px;
			top:185px;
			width:65px;
			height:200px;
		}
		a#bear{
			position:absolute;		
			left:750px;
			top:270px;
			width:65px;
			height:80px;
		}
		a#droid{
			position:absolute;		
			left:650px;
			top:280px;
			width:50px;
			height:80px;
		}
		
		
		/*-- jShowOff module styles --*/
		
		/*hide pauze/play*/
		.jshowoff-controls {
			z-index:9999;	
			position:absolute;
			top:540px;
			right:150px;
		}
		.jshowoff-controls a
		{
			float:left;
		}
		.jshowoff-controls a.jshowoff-play {
			display: none;
			}
		.jshowoff-controls a.jshowoff-prev {
		width:107px;
		height:32px;
		background:url(../images/btn-prev.png) no-repeat 0 0;
		display:block;
		text-indent:-9999px;
		margin-right:8px;
		}
		.jshowoff-controls a.jshowoff-next{
		width:85px;
		height:32px;
		background:url(../images/btn-next.png) no-repeat 0 0;
		display:block;
		text-indent:-9999px;
		}		
		.jshowoff-controls a.jshowoff-next:hover {
		background:url(../images/btn-next.png) no-repeat 0 -32px;
		}
		.jshowoff-controls a.jshowoff-prev:hover {
		background:url(../images/btn-prev.png) no-repeat 0 -32px;
		}


		
		
		
		
		
		
		
		
		
		
	#box-jobs{
		width:845px;
		margin:0 auto;
	}
	.box-job{
		width:378px;
		height:339px;
		position:relative;
	}
	.btn-job
	{
		position:absolute;
		top:230px;
		left:40px;
	}
	.btn-job-webmaster
	{
		position:absolute;
		top:252px;
		left:40px;
	}
	#box-design{
		background:url(../images/box-designer.png) no-repeat 0 0;
	}
	#box-dev{
		background:url(../images/box-dev.png) no-repeat 0 0;
		margin-top:235px;
	}
	#box-webmaster{
		background:url(../images/box-support.png) no-repeat 0 0;
		margin-top:200px;
		width:383px;
		height:361px;
	}
	#box-microjobs{
		background:url(../images/box-microjobs.png) no-repeat 0 0;
		margin-top:80px;
	}
	#box-marketeers{
		background:url(../images/box-marketeers.png) no-repeat 0 0;
		margin-top:60px;
	}
	
	a#designer, a#designer:hover, a#dev, a#dev:hover, a#webmaster, a#webmaster:hover,
	a#microjobs, a#microjobs:hover, a#marketeers, a#marketeers:hover{
		background:url(../images/btn-designer.png) no-repeat 0 0;
		display:block;
		height:38px;
		width:277px;
		position:relative;
		text-indent:-9999px;
	}
	a#dev, a#dev:hover{
		background:url(../images/btn-dev.png) no-repeat 0 0;
	}
	a#webmaster, a#webmaster:hover{
		background:url(../images/btn-webmaster.png) no-repeat 0 0;
	}
	a#microjobs, a#microjobs:hover{
		background:url(../images/btn-microjobs.png) no-repeat 0 0;
	}
	a#marketeers, a#marketeers:hover{
		background:url(../images/btn-marketeers.png) no-repeat 0 0;
	}
	a#designer:hover, a#dev:hover, a#webmaster:hover, a#microjobs:hover, a#marketeers:hover {
		background-position: 0 -38px;	
		left:0;
		position:absolute;
		top:0;
	}
	a.top, a.top:hover{
		display:block;
		width:97px;
		height:16px;
		text-indent:-9999px;
		background:url(../images/btn-top.png) no-repeat 0 0;
	}
	a.top:hover{
		background-position:0 -16px;	
	}
/*----->>>  END CONTENT <<<-----*/ 	


/*----->>> TOOLTIPS <<<-----*/ 	
.tipsy { 
	padding: 8px; 	
	font-size:11px; 
	background: url(../images/tipsy.png) no-repeat 0 0;
}
.tipsy-inner { 
	border:black solid 5px;
	background:black;
	background:rgba(0, 0, 0, 0.8);	
	padding: 8px; 
	color: #efa900; 
	max-width: 200px; 
	-moz-border-radius:3px; 
	-webkit-border-radius:3px;
	-khtml-border-radius:3px;
}

.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }


/*----->>> POPUP <<<-----*/ 	
.messagepop {
	background: url(../images/trans.png) repeat 0 0;
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	z-index:10000;
}
.message-box{
	position:absolute;
	top: 50%;
	left: 50%;
	background: url(../images/bg-box.png) repeat 0 0;
	width:301px;
	height:183px;
	margin-top:-91px;
	margin-left:-150px;
}
a.close{
	background: url(../images/cross.png) repeat 0 0;
	width:21px;
	height:22px;
	display:block;
	margin:8px;
}
a.tweet{
	display:block;
	position:absolute;
	top:110px;
	left:40px;
	width:225px;
	height:25px;
}
#footer{
	background: url(../images/bg-footer.png) no-repeat 0 0;
	padding:25px 10px 20px 10px; 
	height:51px;
	line-height:96px;
	margin:70px auto 30px;
	width:878px;
	color:#685840;
}
#footer a{
	color:#a18963;	
	text-decoration:underline;
}
#footer a:hover, 
#footer:visited{
	color:#685840;
}