/* ALGEMEEN */

html, body {
	background-color:#0c0d0e;	
	color:#868787;
	font-family:Arial, sans-serif;
	font-size:12px;	
	line-height:20px;
	
}

html {overflow-y: scroll;}


h1 {
	color:#0c0d0e;
	font-size:22px;
	margin:20px 0;
	line-height:30px;
	
}

h2{
	font-size:18px;
	margin:20px 0 16px;
	color:#0c0d0e;
}

.invisible-link {
	display:none;
}


.clear {
	clear:both;
}

p {
	margin:0 0 20px;
}

.avant-garde-book {
	font-family:avant-garde-book ,Arial, sans-serif;
}

.avant-garde-demi {
	font-family:avant-garde-demi ,Arial, sans-serif;
}

/* COMMON CONTAINERS */

.container {
	width:924px;
	padding:0 20px;
	margin:0 auto;	
}

.menu-container {
	width:161px;	
	float:left;
	
}

.content-container {
	float:left;
	width:763px;
	display:block;
}


/* LOADING BOX */

#loading-box {
	background-image:url("../img/loading.gif");
	color:#FFFFFF;
	display:none;
	height:40px;
	position:absolute;
	z-index:99;
	width:40px;
}


/* MAIN MENU */


#black .main-menu {
	margin-top:36px;
}

.main-menu li {
	display:block;	
	clear:both;	
	width:150px;
}

.main-menu li a {
	display:block;
	float:right;
	text-indent:-9999px;
	outline:none;
	height:22px;
	background-repeat:no-repeat;
	background-position:right top;
	background-image:url('../img/menu-nieuw.gif');	
	width:54px;
	margin-bottom:1px;
}

#white .main-menu li a:hover {
	background-position:right bottom;
}

#white .main-menu li.selected a {
	background-position:right -22px;
}

#black .main-menu li a {
	background-position:right -22px;
}

#black .main-menu li a:hover {
	background-position:right bottom;
}

#black .main-menu li.selected a {
	background-position:right top;
}

#menu-expertise a {
	background-image:url('../img/menu-expertise.gif');	
	width:76px;
}

#menu-werkwijze a {
	background-image:url('../img/menu-werkwijze.gif');	
	width:78px;
}

#menu-ons-bedrijf a {
	background-image:url('../img/menu-ons-bedrijf.gif');	
	width:87px;
}

#menu-producten a {
	background-image:url('../img/menu-producten.gif');	
	width:86px;
}

#menu-contact a {
	background-image:url('../img/menu-contact.gif');	
	width:68px;
}

#menu-portfolio a {
	background-image:url('../img/menu-portfolio.gif');	
	width:72px;
}

#menu-weblog a {
	background-image:url('../img/menu-weblog.gif');	
	width:65px;
}

#menu-mensen a {
	background-image:url('../img/menu-mensen.gif');	
	width:70px;
}

/* END MAIN MENU */




/* WHITE SIDE */

#logo {
	background-image:url("../img/logo.jpg");
	background-position:0 40px;
	background-repeat:no-repeat;
	cursor:pointer;
	display:block;
	height:170px;
	text-indent:-999999px;
}

#white {
	background-color:#FFFFFF;
	height:531px;
}

#white a {
	color:#f02f7c;
	text-decoration:underline;
}

#white a:hover {
	color:#f46fa4;
}

#header {
	height:165px;
	width:683px;
	margin:0 40px;
	position:absolute;
	
}

#white .ajax-container {
	height:485px;
	
}

/* WHITE SLIDER */

#white-slider-container {
	width:763px;
	height:485px;		
}

.block-menu {
	position:absolute;
	width:763px;
	top:100px;
}

.block-menu ul {
	float:right;
	position:relative;
}

.block-menu li {
	float:left;
	margin:5px 2px;
}
.block-menu li a{
	
	background-color:#CCCCCC;
	display:block;
	overflow:hidden;
	height:10px;
	width:10px;
	text-indent:-99999px;
}

.block-menu li a:hover , .block-menu li a.selected{
	background-color:#0c0d0e;
}

#white-slider-viewport {
	width:763px;
	height:485px;
	overflow:hidden;
	position:relative;
	
}

#white-slider-canvas {
	position:relative;
}

.white-slider-page-canvas {
	position:absolute;	
	height:485px;
	
}

.white-slider-page {
	width:683px;
	float:left;
	padding:0px 40px;
	overflow:hidden;
}

.white-slider-btn {
	height:485px;
	width:45px;
	position:absolute;
	top:0;
	text-indent:-9999px;
	outline:none;	
	margin-left:-10px;
	background-position:left center;
	
}

#white-slider-btn-right {
	margin-left:720px;
}


#white-slider-btn-left{
	background-image:url('../img/white-slider-left.png');
	background-repeat:no-repeat;
}

#white-slider-btn-right {	
	background-image:url('../img/white-slider-right.png');
	background-repeat:no-repeat;
}

.white-slider-btn a {
	display:block;
	background-color:#0099ff;
	width:40px;
	height:410px;	
}

/* WHITE HOME PAGE */

#white-home-page {
	margin:0 40px;
	padding-top:20px;
}

#flash-home {
	z-index:1;
	position:absolute;
}

/* NIEUW SLIDER */

#nieuw-slider {
	height:485px;
	width:100%;
}

#nieuw-slider-viewport {
	position:relative;
	overflow:hidden;
	width:763px;
	height:485px;
	
}	
	
#nieuw-slider-canvas {
	position:absolute;
	height:485px;
}

#nieuw-slider-canvas .nieuw-item {
	float:left;
	width:683px;
	height:485px;	
	margin:0 40px;
}

#nieuw-slider-canvas .nieuw-item .read-more {
	background-color:#E90C63;
	background-image:url("../img/read-more-arrow.gif");
	background-position:right top;
	background-repeat:no-repeat;
	color:#FFFFFF;
	float:right;
	padding:5px 30px 5px 10px;
	position:relative;
	text-decoration:none;
	top:416px;
}

#nieuw-slider-canvas .nieuw-item .read-more:hover {
	background-color:#0c0d0e;
	background-image:url('../img/read-more-arrow-hover.gif');
}

.nieuw-slider-btn {
	height:485px;
	width:45px;
	position:absolute;
	top:0;
	text-indent:-9999px;
	outline:none;	
	margin-left:0px;
	background-position:left center;
	background-repeat:no-repeat;
}

.nieuw-slider-btn:hover {
	
}
#nieuw-slider-btn-next {
	margin-left:720px;
	background-image:url('../img/white-slider-right.png');	
}



#nieuw-slider-btn-previous {	
	background-image:url('../img/white-slider-left.png');	
}

/* CONTENT PAGES*/


.plus-points {
	float:left;
	width:186px;
}

.plus-points li{
	background-image:url("../img/list-plus.jpg");
	background-position:0 7px;
	background-repeat:no-repeat;
	font-size:14px;
	padding:1px 0 1px 20px;
}

#expertise-start-header {
	background-image:url('../img/expertise-start.jpg');
	background-repeat:no-repeat;
	height:156px;
	width:683px;
	margin-top:40px;
}

.three-column-page .column {
	float:left;
	margin-right:20px;
	margin-top:10px;
	padding-right:15px;
	width:199px;
}


.three-column-page .column-holder {
	background-image:url('../img/three-column-bg.jpg');
	background-repeat:no-repeat;
	background-position:0 30px;
}

h2.force-two-line-height {
	height:41px;
}

.three-column-page .column p {
	margin-bottom:10px;
	line-height:18px;
}

.three-column-page .last-column {
	margin-right:0px;
}

.three-column-page .list-holder {
	height:165px;
}

.two-column-detail .header {		
	height:212px;
	width:683px;
}

.two-column-detail .content {
	float:left;
	width:452px;
	margin-right:45px;
}

.two-column-detail #creatie-header {
	background-image:url("../img/creatie-header.jpg");
	background-repeat:no-repeat;
}

.two-column-detail #webtechnologie-header {
	background-image:url("../img/webtechnologie-header.jpg");
	background-repeat:no-repeat;
}

.two-column-detail #optimalisatie-header {
	background-image:url("../img/optimalisatie-header.jpg");
	background-repeat:no-repeat;
}

.tddo-page {
	background-image:url('../img/tddo.jpg');
	background-repeat:no-repeat;
	width:684px;
	height:486px;
}


.tddo-column-page {
	width:684px;
	height:486px;
	background-repeat:no-repeat;
	
}

#think-page {
	background-image:url('../img/think-page-bg.jpg');
}

#design-page {
	background-image:url('../img/design-page-bg.jpg');
}

#develope-page {
	background-image:url('../img/develope-page-bg.jpg');
}

#optimize-page {
	background-image:url('../img/optimize-page-bg.jpg');
}


.tddo-column-page .column-holder {
	background-image:url('../img/four-column-bg.gif');
	background-repeat:no-repeat;
	background-position:0 202px;
	padding-top:182px;
}
.tddo-column-page .three-lines {
	background-image:url('../img/four-column-three-line-bg.gif');
}

.tddo-column-page .column {
	float:left;
	margin-right:17px;
	width:148px;
	padding-right:10px;
	
}

.tddo-column-page .column .plus-points {
	width:148px;
}

.tddo-column-page .last-column {
	margin-right:0;
}

.company-page {
	background-repeat:no-repeat;
	height:485px;
	width:683px;
}

.company-page h2{
	font-size:27px;
}

#webeffect-page {
	background-image:url("../img/webeffect-bg.jpg");
}

#webeffect-page .content {
	padding:140px 0 0;
	width:400px;
}

#mensen-page {
	background-image:url('../img/mensen-bg.jpg');
}

#mensen-page .content {
	padding:216px 0 0 324px;
	width:338px;
}

#innovatief-page {
	background-image:url('../img/innovatief-bg.jpg');
}

#innovatief-page .content {
	padding:155px 0 0;
	width:370px;
	
}

.product-page {
	background-repeat:no-repeat;
	height:445px;
	width:683px;
	padding-top:40px;
}

#producten-page {
	background-image:url('../img/producten-bg.jpg');
	
}

.product-page h2 {
	margin-top:0;
	font-size:27px;
}

#producten-page .lees-meer {
	background-image:url('../img/lees-meer-btn.jpg');
	background-repeat:no-repeat;
	height:31px;
	width:106px;
	display:block;
	outline:none;
	text-indent:-9999px;
	position:absolute;
}

#producten-page .lees-meer:hover {
	background-position:0 -31px;	
}

#lees-meer-sofia {
	margin-left:223px;
	margin-top:220px;
}

#lees-meer-3rd-party {
	margin-top: 220px;
	margin-left:532px;
}

#sofia-page {
	background-image:url('../img/sofia-page-bg.jpg');
	background-repeat:no-repeat;
	height:445px;
	width:683px;
}

#third-party-page {
	padding-top:82px;
}

#third-party-page h2 {
	font-size:27px;
}

#third-party-page h3 {
	font-size:12px;
	color:#0C0D0E;
	margin-bottom:10px;
}


#third-party-links .third-party-link {
	display:block;
	text-indent:-9999px;
	outline:none;
	background-color:#99FF00;
	background-repeat:no-repeat;
	float:left;
	height:38px;
	width:141px;
}

#third-party-links #magento-link {
	background-image:url('../img/magento.jpg');
	margin-right:92px;
}

#third-party-links #drupal-link {
	background-image:url('../img/drupal.jpg');
	margin-right:92px;
}

#third-party-links #wordpress-link{
	background-image:url('../img/wordpress.jpg');
	
}

#contact-page {
	background-image:url("../img/callme.jpg");
	background-repeat:no-repeat;
	height:485px;
	padding-top:250px;
	width:683px;
}

#servicedesk-email {
	margin-left:470px;
	margin-top:170px;
	position:absolute;
}

#contact-page .text {
	float:left;
	margin-right:100px;
	width:370px;
}

#address-block {
	float:left;
	font-size:11px;
}

#address-block h2 {
	margin-top:0;
	margin-bottom:10px;
	font-size:14px;
	color:#868787;
}

#address-block p {
	margin-bottom:5px;
}
/* BLACK HOME PAGE */

#black-home-page {
	padding:40px 40px 20px 40px;
}

#black-home-page .item {
	float:left;
	margin-right:20px;
	width:214px;
	cursor:pointer;
}

#black-home-page .last {
	margin-right:0;
}

#black-home-page .img-holder {
	float:left;
	position:relative;
	width:65px;
	height:65px;
}

#black-home-page .img-holder img {
	position:absolute;
}

#black-home-page .img-holder img.color {
	display:none;
}

#black-home-page h3 {
	float:left;
	font-size:11px;
	font-weight:normal;
	margin:0 0 0 10px;
	padding:0;
	width:139px;
	line-height:14px;
}

/* SOCIALE */

#sociale-box{
	position:absolute;
	background-color:#0C0D0E;
	height:32px;
	z-index:90;
}

#sociale-box a {
	float:left;
	display:block;
	text-indent:-9999px;
	margin-right:10px;
	background-repeat:no-repeat;
	line-height:0px;
}

#twitter {	
	background-image:url('../img/twitter-btn.jpg');
	
	height:31px;
	width:50px;
	background-position:0 -31px;
}

#twitter:hover {
	background-position:0 0;
	
}

#flickr {	
	background-image:url('../img/flickr-btn.jpg');
	height:14px;
	width:44px;
	background-position:0 -14px;
	margin-top:16px;
}

#flickr:hover {
	background-position:0 0;
}

#linkedin {	
	background-image:url('../img/linkedin-btn.jpg');
	height:16px;
	width:52px;
	background-position:0 -16px;
	margin-top:16px;
}

#linkedin:hover {
	background-position:0 0;
}

/* BLACK PAGES CLASSES */
.black-page {
	margin:40px 40px;
	
}


.love{
	background-image:url("../img/love.gif");
	background-position:left 6px;
	background-repeat:no-repeat;
	font-size:10px;
	margin-left:173px;
	margin-top:181px;
	padding:0 0 0 11px;
	position:absolute;
}

#weblog-items.grid .item .love {
	background-position:left 2px;
	margin:0;
	position:relative;
}

/* GRID */

.grid .item {
	width:214px;
	height:278px;
	float:left;
	margin-right:20px;
	margin-bottom:20px;
	cursor:pointer;
	background-color:#141516;
}

.grid .unclickable {
	cursor:default;
}

.grid .last {
	margin-right:0;
}

#black .grid .item h2{
	font-size:13px;
	line-height:20px;
	margin:5px 10px 5px;
	color:#fff;
	
}

.grid .info {
	color:#999;
	font-size:11px;
	letter-spacing:0.2px;
	line-height:15px;
	margin:0 10px;
	
}


#weblog-items.grid .item h2 {
	height:64px;
}

#weblog-items.grid .item .info  {
	font-size:9px;
	font-weight:bold;
}

#weblog-items.grid .item .info .love {
	font-size:9px;

}

#team-page .grid .item h2 {
	margin-bottom:5px;
	height:12px;
}



#grid-menu {
	padding:5px 0px;
	font-size:10px;
	padding:5px 0;
}

#grid-menu ul li {
	float:left;
	margin-right:5px;
}

#black #grid-menu ul li a.selected {
	color:#ffffff;
	font-weight:bold;
	text-decoration:underline;
}


.grid .item .new-label {
	background-image:url("../img/new-label.png");
	height:30px;
	margin-left:-3px;
	margin-top:147px;
	position:absolute;
	width:82px;
	z-index:70;
	display:none;/*temp*/
}


/* DETAIL PAGINA */
.next-menu {
	height:36px;
	border-bottom:solid 1px #555555;
	margin-bottom:20px;
	
}

.next-menu .left, .next-menu .right {
	float:left;
	
}

.next-menu .right {
	float:right;
	width:240px;
	
}


.next-menu .overview-link {
	background-image:url("../img/back-to-overview.jpg");
	background-repeat:no-repeat;
	display:block;
	outline:medium none;
	text-indent:-9999px;
	width:176px;
	height:14px;
}

.next-menu .overview-link:hover {
	background-position:0 -14px;
}


.next-menu .cases-link {
	background-image:url("../img/cases-btn.jpg");
	background-repeat:no-repeat;
	background-position:0 -28px;
	display:block;
	outline:medium none;
	text-indent:-9999px;
	width:64px;
	height:14px;
	float:left;
	margin-right:23px;
}

.next-menu .cases-link:hover {
	background-position:0 -14px;
}

.next-menu .clientlist-link {
	background-image:url("../img/clientlist-btn.jpg");
	background-repeat:no-repeat;
	background-position:0 -28px;
	display:block;
	outline:medium none;
	text-indent:-9999px;
	width:90px;
	height:14px;
	float:left;
}

.next-menu .clientlist-link:hover {
	background-position:0 -14px;
}

.next-menu .active {
	background-position:0 0;
}

.next-menu .previous-link {
	text-indent:-99999px;
	display:block;
	background-image:url("../img/previous-arrow.jpg");
	background-repeat:no-repeat;
	width:14px;
	height:14px;
	float:right;
}

.next-menu .previous-link:hover {
	background-position:0 -28px;
}

.next-menu  .next-link {
	text-indent:-99999px;
	display:block;
	background-image:url("../img/next-arrow.jpg");
	background-repeat:no-repeat;
	width:14px;
	height:14px;
	float:right;
}

.next-menu  .next-link:hover {
	background-position:0 -28px;
}

.next-menu .divider {
	width:1px;
	height:14px;
	border-left:1px solid #555;
	float:right;
	margin:0 5px;
}

.next-menu.left {
	width:435px;
	float:left;
}

#detail-content h1 {
	color:#FFFFFF;
}

#detail-content #image-bar {
	float:left;
	width:257px;
}

#detail-content #image-bar .image{
	margin-bottom:20px;
	cursor:pointer;
}

#detail-content #image-bar .big-image{
	position:absolute;	
	z-index:90;
	display:none;
}
#detail-content #image-bar .big-image img{
	width:257px;
}

#detail-content #image-bar .corner-triangle {
	position:absolute;
}

#detail-content #text-bar {
	float:left;
	margin-left:40px;
	width:386px;
}

#detail-content #text-bar a {
	text-decoration:none;
	color:#E90C63;
}

#detail-content #text-bar a:hover {
	color:#e74d89;
}

#detail-content #text-bar h1{
	margin-top:0px;
}

#weblog-page-detail #detail-content #text-bar h1{
	border-bottom:#555 solid 1px;
	padding-bottom:20px;
	font-weight:normal;
}


#detail-content #text-bar #summary {
	border-bottom:#555 solid 1px;
	color:#FFFFFF;
	font-size:11px;
	font-weight:bold;
	padding-bottom:16px;
	margin-bottom:16px;
}

#detail-content #text-bar #summary .label {
	width:60px;
	display:block;
	float:left;
}

#detail-content #text-bar .love {
	background-image:url("../img/love-black.gif");
	background-position:left 3px;
	float:right;
	font-size:11px;
	margin:0 5px 0 0;
	position:relative;
}

#detail-content .info {
	font-weight:bold;
	font-size:11px;
	color:#FFFFFF;
}

.add-love {
	float:right;
}

.add-love a {

}

.next-menu-bottom  {
	border-top:1px solid;
	padding-top:23px;
	margin-top:23px;
}
.next-menu-bottom  .previous-link {
	background-image:url('../img/previous-btn.jpg');
	background-repeat:no-repeat;
	width:125px;
	height:14px;
	outline:none;
	text-indent:-9999px;
	display:block;
	float:left;
}

.next-menu-bottom  .previous-link:hover {
	background-position:0 -14px;
}

.next-menu-bottom  .next-link {
	background-image:url('../img/next-btn.jpg');
	background-repeat:no-repeat;
	width:108px;
	height:14px;
	outline:none;
	text-indent:-9999px;
	display:block;
	float:right;
}

.next-menu-bottom  .next-link:hover {
	background-position:0 -14px;
}


/* WEBLOG */

#reaction-top {
	border-top:#555 solid 1px;
	border-bottom:#555 solid 1px;
	padding:5px 0px;
	margin:20px 0;
}

#reaction-top span {
	cursor:pointer;
	width:80px;
	padding:0 0 0 20px;
	background-image:url("../img/next-link.gif");
	background-position:6px 4px;
	background-repeat:no-repeat;
	display:block;
	width:130px;
	float:left;
}

#reaction-top.open span {
	background-image:url("../img/down-link.gif");
}

#reaction-form {
	overflow:hidden;
	display:none;
	margin-bottom:20px;
	padding-bottom:20px;
	border-bottom:#555 solid 1px;
}
	
#reaction-form  td {
	vertical-align:top;
}

#reaction-form label {
	width:75px;
	display:block;
	padding:8px 0px;
}

#reaction-form input {
	border:2px solid #666666;
	margin:5px;
	padding:5px;
	width:292px;
}

#reaction-form textarea {
	border:2px solid #666666;
	float:left;
	font-family:Arial,sans-serif;
	font-size:12px;
	height:200px;
	margin:5px;
	padding:5px;
	width:292px;
}

#reaction-form #reactie-btn {
	width:100px;
	float:right;
	border:medium none;
}

.reaction .top {
	color:#fff;
	font-weight:bold;
}

/* TEAM */

#team-page .functie {
	display:block;
	font-size:11px;
	margin:0 10px;
	padding:4px 0;
}


#black .grid .employee-item h2 {
	/*margin-top:13px;*/
}

#black .grid .employee-item {
	cursor:default;
}

#employee-page-detail h1 {
	margin-bottom:0;
}

#employee-page-detail .info {
	border-bottom:#555 solid 1px;
	margin-bottom:16px;
	padding-bottom:16px;
}

#employee-page-detail.black-page {
	border-bottom:1px solid #555555;
	padding-bottom:20px;
}


/* PORTFOLIO */

#text-header {
	border-bottom:1px solid #555;
}

#detail-content #text-header .left {
	float:left;
	width:190px;
}

#detail-content #text-header .right {
	float:left;
	padding-left:23px;
	width:470px;
}

#detail-content #text-header a {
	color:#E90C63;
}
#detail-content #text-header a:hover {
	color:#e74d89;
}
#detail-content #text-header h3{
	color:#FFFFFF;
}
#detail-content #text-header .right  h3 {
	margin-bottom:10px;
}

#detail-content #text-header .info .add-love{
	float:none;
	margin:0;
	padding:0;
	text-indent:-9999px;
	outline:none;
	display:block;
	height:16px;
	width:14px;
	background-image:url('../img/like.jpg');
	background-repeat:no-repeat;
	background-position:0 2px;
}

#detail-content #text-header .info .love {
	margin:0;
	background-image:none;
	float:right;
	position:relative;
	padding:0 5px;
}


#detail-content #text-header .info {
	margin-bottom:23px;			
	
}
#detail-content #text-header .info span{
	float:right;
}

/* Klantenlijst */

#clientlist-grid .client {
	background-color:#FFFFFF;
	float:left;
	height:77px;
	margin-bottom:20px;
	margin-right:20px;
	padding:38px 11px;
	width:133px;
}

#clientlist-grid .last {
	margin-right:0px;
}


/* BLACK SIDE */

#black {
	position:absolute;
	width:100%;
	color:#888;
	z-index:80;
}

#black H2{
	color:#888;


}

#black .menu-container{
	height:480px;
}

#black-container {
	background-color:#0c0d0e;
}

#black a {
	color:#888;
}

#black-tab {
	line-height:0;
	height:28px;
	overflow:hidden;
}

#black-tab-btn {
	margin-left:896px;
	cursor:pointer;
	margin-top:28px;
}