/*
* Basic CSS template
* Tom van Gemert, 20090129
* AdmixžConnect
* Deployed for AdmixžConnect site: 20090606
*/

/*
* Basic Layout styles
*/

html, body {
    height: 100%;
}

body {
	text-align: center;
	padding: 0px; margin: 0px 0px 0px 0px;
	font-family: arial, helvetica, verdana, sans-serif;
	font-size: 76%;
	background: #eeeeed url(images/body_bg.gif) repeat-x;
}

#container {
	position: relative;
	width: 100%;
	margin: 0px auto 0px auto;
	/* background: #00ffff; */
}

#testcontainer {
	position: relative;
	width: 600px;
	text-align: left;
	margin: 0px auto 0px auto;
	/* background: #00ffff; */
}

#contentContainer {
	position: relative;
	width: 944px;
	margin: 0px auto 0px auto;
	/* background: #00ff33; */
}

.clearboth	{ clear: both; }
.nobr		{ white-space: nowrap; }

div.twtr-hd {
	display: none;
}

div.twtr-ft {
	display: none;
}

.twtr-widget .twtr-tweet {
	font-family: arial, helvetica, verdana, sans-serif;
	font-size: 90%;
	border: none;
}

/* Basic three column setup */

div#columnLeft {
	float: left;
	width: 236px;
	background: transparent;
	padding: 20px 0px 0px 0px;
}

div#columnCenter {
	float: left;
	width: 472px;
	padding: 20px 0px 0px 0px;
	margin: 0px;
	text-align: left;
	background: transparent;
}

div#columnRight {
	float: left;
	width: 236px;
	background: transparent;
	padding: 20px 0px 0px 0px;
}

div#cloudBlock {
	background: transparent;
	padding: 0px 10px 0px 10px;
	margin-bottom: 20px;
	text-align: center;
	line-height: 190%;
}

	div#cloudBlock span.niveau1 {
		font-size: 100%;
	}
	
	div#cloudBlock span.niveau2 {
		font-size: 130%;
		font-weight: normal;
	}
	
	div#cloudBlock span.niveau3 {
		font-size: 160%;
		font-weight: normal;
	}
	
	div#cloudBlock A { color: #333; }
	div#cloudBlock A:link { color: #333; }
	div#cloudBlock A:visited { color: #333; }
	div#cloudBlock A:active { color: #333; }
	div#cloudBlock A:hover { color: #ff5400; text-decoration: none; }	

#footer {
	display: block;
	width: 100%; height: 72px;
	margin: 0; padding: 0;
	text-align: center;
	overflow: hidden;
	border-top: 1px solid #cdcdcb;
	background: transparent url(images/footer_bg.png) repeat-x;	
}

	#footerContent {
		display: block;
		width: 944px; height: 72px;
		text-align: left;
		margin: 0px auto; padding: 0px;
		background: transparent url(images/accc-footer-logo.gif) no-repeat 711px 0px;		
	}

/*
* Special blocks
*/

#cmsDemoRequest {
	display: block;
	position: absolute;
	top: -400px; left: -5px;
	z-index: 1000;
	background: #eee;
}

div#qrContainer {
	width: 100%;
	text-align: center;
	margin: 0px 0px 10px 0px;
}

#centerBlockCenterContent img.qrCodeImg {
	text-align: center;
}
/* Left and Right column blocks! */

div.lrBlock {
	position: relative;
	margin-bottom: 10px;
}

	div.lrBlock div.meer {
		position: absolute;
		top: 6px; left: 0px;
		z-index: 100;
		background: url(images/arrowDownCenter.png) no-repeat 15px 132px;
	}

	div.lrBlock div.meer A {
		font-size: 100%;
		font-weight: bold;
		color: #efefef;
		display: block;
		margin: 0px 0px 0px 0px; padding: 132px 116px 6px 30px;
		background: url(images/arrowDownCenter.png) no-repeat 15px 132px;
	}
	
	div.lrBlock div.meer A:hover {
		color: #fff;
		background: url(images/arrowDownCenter_on.png) no-repeat 15px 132px;
	}

div.productsBlockContent {
	height: 150px;
	margin: 0px 10px 0px 6px;
	text-align: left;
}

div.casesBlockContent {
	height: 70px;
	overflow: hidden;
	background: transparent url(images/casesBlockContent_bg.gif) no-repeat 7px 0px;
}

div.casesBlockContent.active {
	background: transparent url(images/casesBlockContentAct_bg.gif) no-repeat 7px 0px;
}

	div.casesBlockContent img.thumb {
		float: left; margin-left: 6px;
	}
	
	div.casesBlockContent p {
		display: block;
		width: 140px;
		overflow: hidden;
		float: left;
		padding: 5px;
	}
	
	div.casesBlockContent A {
		color: #ddd;
		text-decoration: none;
	}
	
	.casesBlockContent.active A, .casesBlockContent.active A:hover {
	    color: #000;
	}
	
	div.casesBlockContent A:hover {
	    color: #fff;
		text-decoration: underline;
	}

div.orangeBlockContent {
	background: #be4307 url(images/orangeBlockContent_bg.gif) repeat-x;
	margin: 0px 10px 0px 6px;
	padding: 0px 0px 10px 0px;
}

div.yellowBlockContent {
	background: #a98d0d url(images/yellowBlockContent_bg.gif) repeat-x;
	margin: 0px 10px 0px 6px;
	padding: 0px 0px 10px 0px;
}

div.redBlockContent {
	background: #811010 url(images/redBlockContent_bg.gif) repeat-x;
	margin: 0px 10px 0px 6px;
	padding: 0px 0px 10px 0px;
}

div.greenBlockContent {
	background: #248371 url(images/greenBlockContent_bg.gif) repeat-x;
	margin: 0px 10px 0px 6px;
	padding: 0px 0px 10px 0px;
}

div.greyBlockContent {
	background: #292927 url(images/greyBlockContent_bg.gif) repeat-x;
	margin: 0px 10px 0px 6px;
	padding: 0px 0px 10px 0px;
}

div.blueBlockContent {
	background: #4091d6 url(images/blueBlockContent_bg.gif) repeat-x;
	margin: 0px 10px 0px 6px;
}

div.twitterBlockContent {
	background: #f1ed03 url(images/twitterBlockContent_bg.gif) no-repeat bottom left;
	margin: 0px 10px 0px 6px;
}

div.lrBlockHeader {
	display: block;
	width: 236px; height: 6px;
	background: transparent url(images/productsBlockHeader_bg.png) no-repeat bottom left;
}

div.lrBlockCenter {
	display: block;
	width: 236px;
	text-align: left;
	background: transparent url(images/productsBlockContent_bg.png) repeat-y;
}

div.lrBlockCenter #slideshow {
	margin: 0px 0px 0px 6px;
}

div.lrBlockCenter#productsheets { 
	height: 150px; 
	padding-bottom: 0px;
}
	
div.productsBlockContent {
	position: absolute;
	top: 0px; left: 0px;
	display: block;
	z-index: 100;
	background: #3d3e37;
	width: 220px; height: 150px;
	margin: 0px 0px 0px 6px; padding: 0;
}

div.lrBlockCenterContent {
	width: 220px;
	text-align: left;
	margin: 0px 0px 0px 0px; padding: 0;
}

div.lrBlockCenterDropOut {
	display: block;
	width: 236px;
	background: transparent url(images/lrBlockCenterDropOut_bg.png) repeat-y;
}

div.lrBlockCenterDropOut#productpagina {
	display: block;
}

div.lrBlockFooter {
	display: block;
	width: 236px; height: 10px;
	background: transparent url(images/productsBlockFooter_bg.png) no-repeat top left;
}

div#slideshow {
	display: block;
	width: 220px;
	overflow: hidden;
	margin: 0; padding: 0;
}

div#slideshow #slides {
	display: block;
	width: 220px; height: 220px;
	overflow: hidden;
	margin: 0; padding: 0;
}

div#slideshow.ss440 {
	width: 440px;
}

div#slideControls {
	background: #eee;
	display: none;
	margin: 0px 0px 0px 0px;
	text-align: center;
}

div#slideControls A {
	padding: 5px;
}

/* Center blocks! */

div.centerBlock {
	padding-left: 8px;
	margin: 0px 0px 10px 0px;
}

div.centerBlock#slideshow div.centerBlockHeader {

}

div.centerBlockHeader {
	display: block;
	width: 456px; height: 6px;
	background: transparent url(images/centerBlockHeader_bg.png) no-repeat bottom left;
}

div.centerBlockCenter {
	display: block;
	width: 456px;
	background: transparent url(images/centerBlockContent_bg.png) repeat-y;
}

div.centerBlockCenterContent {
	display: block;
	text-align: left;
	background: #f8f6f3 url(images/centerBlockCenterContent_bg.gif) no-repeat bottom left;
}

	div#qr-code {
		position: absolute;
		top: 110px; left: 210px;
		width: 240px;
		background: transparent;
		text-align: center;
	}

div.centerBlockFooter {
	display: block;
	width: 456px; height: 10px;
	background: transparent url(images/centerBlockFooter_bg.png) no-repeat top left;
}

div.centerBlockContent {
	background: #fff;
	margin: 0px 10px 0px 6px;
}

div.centerBlockContent p {
	margin: 0px 15px 20px 15px;
}

div.centerBlockContentFooter {
	background: #fff;
	margin: 40px 0px 0px 0px; padding: 0px;
	text-align: right;
}

div.centerBlockContentFooter A {
	display: block;
	padding: 5px 15px 5px 0px; color: #999;
	text-decoration: none;
}

div.centerBlockContentFooter A:hover {
	color: #ff5400;
}

/*
* jQuery accordion styles
*/

div#accordion  {
	width: 440px;
	margin: 0; padding: 0;
	background: transparent;
}

div#accordion h3.odd {
	margin: 0; padding: 0;
	font-size: 110%;
	background: transparent url('images/arrowDownCenter.png') no-repeat 15px 5px;
}

div#accordion h3 {
	margin: 0; padding: 0;
	font-size: 110%;
	background: #e7e6e5 url('images/arrowDownCenter.png') no-repeat 15px 5px;
}

div#accordion h3 A {
	cursor: pointer;
	display: block;
	padding: 5px 0px 5px 35px;
	margin: 0;
	color: #666;
	font-weight: bold;
	font-size: 100%;
	text-decoration: none;	
	background: transparent;
}

div#accordion A:hover {
	text-decoration: none;
	background: url('images/arrowDownCenter_on.png') no-repeat 15px 5px;
}

div#accordion A.selected {
	background: #e7e6e5 url('images/arrowDownCenter_on.png') no-repeat 15px 5px;
}

div#accordion div {
	display: none;
	margin: 0; padding: 15px 15px 15px 35px;
}

div#accordion div.opdrachtgevers {
	padding: 0px;
}

div#accordion div.opdrachtgevers p {
	color: #333;
	padding: 15px; margin: 0px 8px 0px 7px;
	background: #fff;
	border-right: 1px solid #e8e8e8;		
}

div#accordion div p {
	margin: 0; padding: 0;
}

div#accordion div A {
	display: inline;
	background: none;
	padding: 5px 0px 5px 0px;
}

div#accordion div A:hover {
	background: none;
	color: #ff5400;
	text-decoration: underline;
}

/*
* Opdrachtgevers BrancheNavigatie
*/

ul#brancheNav {
	margin: 0px 5px 0px 6px; padding: 0;
	list-style: none;
	background: #ccc;	
}

ul#brancheNav li {
	float: left;
	display: inline;
	margin: 0; padding: 0;
}

ul#brancheNav li A {
	display: block;
	text-align: center;
	width: 106px; height: 20px;	
	padding: 12px 0px 7px 0px;
	background: none;
	font-weight: bold;
	border-bottom: 1px solid #e8e8e8;
	color: #666;
}

ul#brancheNav li A:hover {
	background: #efefef;
	text-decoration: none;
}

ul#brancheNav li A.active {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-bottom: 0px;
	color: #333;
	text-decoration: none;
}

div.opdrachtgevers span.active {
	color: #ff5405;
}

/*
* Google maps styles
*/

div#mapContact {
	width: 440px;
	height: 350px;
	overflow: hidden;
	margin: 0px 0px 10px 0px;
}

div#directions {
	width: 405px;
	margin: 10px 20px 10px 15px;
	display: none;
}

div#directions p.error {
	color: #ff0000;
	margin-left: 0;
}

/*
* Typography styles
*/

h1 {
	font-size: 150%;
	color: #333;
	padding: 10px 10px 0px 14px;
	margin: 0px;
}

h1.producth1 {
	font-size: 180%;
	padding: 10px 10px 10px 15px;	
}

h2 {
	font-size: 170%;
	line-height: 100%;
	margin: 0px;
	padding: 4px 20px 0px 15px;
	text-transform: uppercase;
}

h2.rightBlock {
	padding: 0px 10px 0px 10px;
}

h2.leftBlock {
	padding: 17px 10px 10px 5px;
}

div.productsBlockContent h2 {
	font-size: 120%;
	line-height: 130%;
	padding: 15px 40px 0px 15px;
}

h3 {
	font-size: 130%;
	line-height: 100%;
	padding: 0px 10px 15px 15px;
	margin: 0px;
}

h3.rightBlock {
	padding: 0px 10px 0px 10px;
}

h4 {
	font-size: 130%;
	color: #333;
	padding: 0px 10px 0px 15px;
	margin: 0px;
}

h4.rightBlock {
	padding: 0px 10px 0px 10px;
}

p {
	font-size: 100%;
	line-height: 120%;
	color: #595a5a;
	margin: 0px;
	padding: 0px;
}

div.opdrachtgevers p {
	text-align: left;
	line-height: 140%;
}

div.lrBlockCenter p {
	color: #fff;
}

div.productsBlockContent p {
	font-size: 90%;
	color: #efefef;
	margin: 0px 60px 10px 15px; padding: 0;
	background: transparent;
}

/*
* Anchor styles
*/

A 			{ text-decoration: none; color: #ff7f2a; }
A:link		{ text-decoration: none; color: #ff7f2a; }
A:visited	{ text-decoration: none; color: #ff7f2a; }
A:active	{ text-decoration: none; color: #ff7f2a; }
A:hover		{ text-decoration: underline; color: #ff5400; }
A.active	{ text-decoration: underline; color: #ff5400; }

/*
* Table styles
*/


/*
* List styles
*/

div.centerBlockCenterContent ul {
	margin: 0px 0px 0px 30px; padding: 0px 0px 0px 0px;
	list-style: disc;
	line-height: 120%;
}

div.centerBlockCenterContent ol {
	margin: 0px 0px 0px 35px; padding: 0px 0px 0px 0px;
	list-style: decimal;
	line-height: 120%;
}

div.centerBlockCenterContent ul ul {
	list-style: circle;
}

div.centerBlockCenterContent ul li, div.centerBlockCenterContent ol li {
	color: #595a5a;
	padding: 0px 0px 2px 0px;
}

ul#recentWerk {
	text-align: left;
	list-style: none;
	margin: 0 0 0 11px; padding: 0 0 10px 0;
	font-size: 90%;
	line-height: 140%;
}

ul#recentWerk li {
	margin: 0; padding: 0;
}

ul#recentWerk A {
	color: #424242;
	text-decoration: none;
}

ul#recentWerk A:hover {
	color: #000;
	text-decoration: underline;
}

ul#twitterFeed {
	text-align: left;
	list-style: none;
	margin: 0 0 0 11px; padding: 20px 0 0px 0;
	font-size: 90%;
	line-height: 140%;
	color: #424242;
}

ul#twitterFeed li {
	margin: 0; padding: 0px 5px 10px 0px;
}

ul#twitterFeed A {
	color: #4091d6;
}

ul#twitterFeed a.twitterFollow {
	color: #333;
	font-weight: bold;
	padding: 10px 30px 5px 0px;
	margin-left: 60px;
	background: url(images/follow-twitter.png) no-repeat bottom right
}

ul#twitterFeed a.twitterFollow img {
	vertical-align: middle;
}

ul#twitterFeed a.twitterFollow:hover {
	color: #4091d6;
}

/*
* Productsheets ProductNavigatie
*/

ul#productNav {
	margin: 0px 10px 0px 6px; padding: 10px 0px 26px 0px;
	list-style: none;
	background: transparent;	
	text-align: left;	
}

ul#productNav li {
	margin: 0; padding: 0;
}

ul#productNav li.odd {
	background: #636363;
}

ul#productNav li A {
	display: block;
	font-size: 100%;
	padding: 7px 10px 7px 10px;
	margin: 0;
	background: none;
	color: #dededc;
}

ul#productNav li A:hover {
	background: #5b5b51;
	text-decoration: none;
}

ul#productNav li A.active {
	background: #fe6304;
	text-decoration: none;
}

/*
* Vacatures Navigatie
*/

ul#vacatureNav {
	margin: 0px 0px 0px 0px; padding: 20px 0px 0px 0px;
	list-style: none;
	background: transparent;	
	text-align: left;	
}

ul#vacatureNav li {
	margin: 0; padding: 0;
}

ul#vacatureNav li.odd {
	background: #f2f1f0;
}

ul#vacatureNav li A {
	display: block;
	font-size: 100%;
	padding: 7px 10px 7px 10px;
	margin: 0;
	background: none;
	color: #666666;
}

ul#vacatureNav li A:hover {
	background: #636363;
	color: #fff;
	text-decoration: none;
}

ul#vacatureNav li A.active {
	background: #fe6404;
	color: #fff;	
}

/*
* Footer navigation (two column list solution ooohhhh....)
*/

ul#footerNav {
	float: left;
	width: 436px;
	text-align: left;
	margin: 0px 0px 0px 60px; padding: 10px 0px 0px 0px;
}

ul#footerNav A {
	font-size: 90%;
	color: #999999;
	text-decoration: none;
}

ul#footerNav A:hover {
	color: #ff5400;
	text-decoration: none;
}

ul#footerNav li {
	float: left;
	width: 150px;
	margin: 0px 0px 5px 0px;
}

ul#socialFooterNav {
	float: left;
	margin: 0px 0px 0px 20px; padding: 10px 0px 0px 0px;
}

ul#socialFooterNav li {
	float: left;
	display: inline;
	margin-right: 10px;
}