﻿/***************************************
/*
/*		Sixtyseven.com (c) 2007
/*
/*		www.sixtyseven.com
/* 
/*		All rights reserved
/*
/**************************************/


/***************************************
/*	Layout							   
/**************************************/

html 
{
	
}
body {
    padding:0;
    margin:0;
    background-color:#000000;/* #ffffff */
    /*border-right:solid 9px #000000; #ffffff */
    /*border-left:solid 9px #000000;/* #ffffff */
}
.background 
{
	background-color:#000000;/* #ffffff */
}
.flashBackground 
{
	display:none;
	position:relative;
	overflow:hidden;
}
.container {
    margin:0;
    padding:0;
    background-color:#000000; /* #ffffff */
    display:none;
    
	
}
.content
{
    top:0px;
    left:0px;
    position:absolute;
}        
.blackOpacity
{
    background-color:#000000;
    filter:alpha(opacity=61);
    -moz-opacity:.61;
    opacity:.61;	
    width:100%;
    height:100%;
    position:absolute;
}
.header
{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
}
.logo 
{
    position:absolute;
    bottom:20px;    
    left:47px;
    width:195px;
    height:64px;
    border:none;
    display:block;
}
body.large .logo  
{
	width:258px;
    height:85px;
    bottom:46px;    
}
.navigation 
{
	right:0;
	height:46px;
	bottom:13px;
}

body.large .navigation {bottom:51px;}

.contentblock
{
    position:absolute;
}
.contentblock .home 
{
	display:none;
}
.footer
{
	overflow:hidden;
    position:absolute;
    width:100%;
	height:76px;
	margin-top:-76px;
}

.outsidefooter
{
    height:20px;
}

.columns {
    column-count: 2;
    column-gap: 24px;

}
.pager {
	position:absolute;
	bottom:-15px;
	right:0px;
	font-size:10px;
	color:#333333;
}
.pager A, .pager A:visited
{
	margin-left:4px;
	color:#333333;
}
.errorBox 
{
	border: solid 3px #F7E700;
	position:absolute;
	left:50%;
	top:50%;
	z-index:9999;
	background-color:#333333;
	width:320px;
	margin-left:-160px;
	margin-top:-60px;
	height:120px;
	padding:16px;
}
.noscriptdiv 
{
	display:none;
}
/***************************************
/*	Layers							   
/**************************************/

.blackOpacity {z-index:0;}
.container {z-index:500;}
.content {z-index:1000;}
.flashBackground {z-index:1500;}
.footerNewsBlock,
.header,
.footer,
.contentblock {z-index:2000;}
.columns,
.navigation {z-index:5000;}
.contentblockContent,
.footerContent {z-index:6000;}
.portfolio,
.portfoliodetails,
.news,
.newsdetails {z-index:6500;}
.verticalButton {z-index:7000;}
.centeredblockNavigation,
.outsidefooter {z-index:8000;}
	
/***************************************
/*	HTML							   
/**************************************/

body
{
	color:#eeeeee;
	font-family: Arial,Verdana, Helvetica, Sans-serif;
	scrollbar-face-color: #333; scrollbar-highlight-color: #666; scrollbar-shadow-color: #111; scrollbar-3dlight-color: #111; scrollbar-arrow-color:  #444; scrollbar-track-color: #222; scrollbar-darkshadow-color: #000;
}
body.medium {font-size:13px;min-width:740px;}
body.large {font-size:13px;min-width:950px;}
span {padding:0;margin:0;}
A  {text-decoration:none;color:#F7E700;}

h1,
h2,
h3,
h4 
{
	margin:0;
	padding:0;
	color:#F7E700;
	
}

body.medium h1 {font-size:20px;line-height:18px;}
body.medium h2 {font-size:12px;line-height:9px;}
body.medium h3 {font-size:9px;line-height:9px;}
body.medium h4 {font-size:9px;line-height:9px;}
body.medium h5 {font-size:6px;}

body.large h1 {font-size:24px;line-height:24px;}
body.large h2 {font-size:14px;line-height:13px;}
body.large h3 {font-size:12px;line-height:11px;}
body.large h4 {font-size:10px;line-height:10px;}
body.large h5 {font-size:10px;}

img { border:none;}
form {
	display:block;
	margin:0;
	padding:0;
}
span.yellow {color:#F7E700;}
.block {display:block;}
.boldlink {font-weight:bold;font-size:16px;}
/***************************************
/*	Block Content			   
/**************************************/

.contentblockContent {position:relative;line-height:16px;}
body.medium .contentblockContent {padding:12px 22px 22px 22px;width:520px;font-size:11px;} /*content text */
body.large .contentblockContent {padding:22px;width:625px;}

body.medium .contentblock.right {width:510px;}
body.large .contentblock.right {width:665px;}

html>/**/body.medium .contentblock.right {width:585px;}

.text {}
.text A {text-align:left;}

.intro 
{
	margin-bottom:20px;
	display:block;
	color:#C0C0C0;
	font-size:12px;
}
body.large .intro {font-size:14px;}

.contentblock.right .contentblockContent .text 
{
	position:absolute;
	margin-top:10px;
	line-height:15px;
	height:220px;
	padding: 0 10px 0 110px;
	width:425px;
}
body.large .contentblock.right .contentblockContent .text 
{
	margin-top:16px;
	line-height:20px;
	height:350px;
	padding: 0 60px 0 130px;
	width:455px;
}

.submenu 
{
	position:absolute;
	width:120px;
	left:0;	
	float:left;
	top:0;
}
.submenu UL 
{
	padding:0;
	margin:0 0 0 16px;	
}
.submenu LI 
{
	list-style-image:url('../gfx/bullet_yellow.png');
}
.submenu A.active
{
	color:#ffffff;	
}
.altNav,
.submenu A.altNav {display:none;}
.submenu A 
{
	display:block;
}
.submenu A:hover 
{
	color:#ffffff;
}
.submenu IMG 
{
	margin-bottom:8px;
}
.bodyPart {width:425px;position:absolute;height:170px;line-height:15px;} /*text lines*/
body.large .bodyPart {width:480px;height:320px;line-height:20px;} 

.contentpager 
{
	position:absolute;
	margin:0;
	height:22px;
	bottom:0;
}
body.medium .contentpager {font-size:9px;width:425px;}
body.large .contentpager {font-size:10px;width:480px;}

.contentpagercontainer 
{	
	position:absolute;

}
.contentpager .pagerbutton 
{
	padding: 2px 2px 0px 2px;
	position:relative;
	float:left;
	cursor:pointer;
	height:20px;
}
body.medium .contentpager .pagerbutton {width:55px;}
body.large .contentpager .pagerbutton{width:75px;}

.contentpager .pageritem 
{
	position:relative;
	float:left;
}
/***************************************
/*	Navigation						   
/**************************************/

.navigation
{
	margin:0;
	padding:0;
	margin-left:300px;
	right:0;
	display:block;
	position:absolute;
	margin-right:-18px;
}
.navigation IMG 
{
	display:block;
	margin:0 0 0 1px;
	padding:0;
	border:0;
	float:left;
	width:108px;
	height:26px;
}
body.large .navigation IMG 
{
	width:129px;
	height:31px;
}
/***************************************
/*	Portfolio						   
/**************************************/

.centeredblockNavigation 
{
	position:relative;
	padding: 7px 0px 4px 26px;
	margin:0;
}
.portfolio
{
	padding:0;
	margin:0;
	position:absolute;	
	
}
.portfoliodetails 
{
	padding:0;
	margin:0;
	position:relative;
}
html>/**/body .portfolio,
html>/**/body .portfoliodetails 
{
	margin-left:14px;
}
.portfolioItem {
	float:left;
	background: #000000 url('../gfx/blockitem-shade.png') repeat-x;	
}
.portfolioItem:hover,
.portfolioItem.Over
{
	background: #000000 url('../gfx/blockitem-shade-over.png') repeat-x;	
	cursor:pointer;
}
body.medium .portfolioItem {width:340px;font-size:11px;}
body.large .portfolioItem {width:442px;font-size:12px;}

.portfolioItem .thumbnails {
	height:100%;
	float:right;
	position:relative;
}
.portfolioItem .thumbnails .mediumThumbnail,
.portfolioItem .thumbnails .largeThumbnail { display:none;}

.portfolioItem .text {
	padding: 14px 12px 0 13px;
	height:100%;
}
body.large .portfolioItem .text {
	padding: 24px 12px 0 12px;
	height:100%;
	line-height:18px;
}
html>/**/body .portfolioItem .text {margin-right:75px;}
html>/**/body.large .portfolioItem .text {margin-right:100px;}

.portfolioItem .text A {
	display:block;
}
.portfolioItem .text .leesmeer IMG
{
	margin-left:4px;
}

.portfolioItem H3
{
	width: 350px;
	position:absolute;
	margin:2px 0 -12px 12px;	
}
body.large .portfolioItem H3 {margin:8px 0 8px 12px;}

.portfoliotitle {position:relative;top:-26px;margin-bottom:-26px;padding:0;}
/*
.portfoliotitle H1 {font-size:14px;line-height:11px;padding:0;margin:0;}
body.large .portfoliotitle H1 {font-size:12px;line-height:12px;}
*/

.project 
{
	margin:0;
	padding:0;
	position:relative; 
}
.project .slideshow {
	position:relative;
	float:left;
}
.project .text,
.project .campaignText 
{
	float:left;
	padding:6px 14px 28px 14px;
	display:block;
	position:relative;

}
.project .text { width:290px;height:200px;}
body.large .project .text { width:380px;height:260px;}

.project .campaignText {width:190px;height:200px;}
body.large .project .campaignText { width:250px;height:260px;}

.project .campaignText .bodyPart 
{
	position:absolute;
	width:200px;
	line-height:14px;
	font-size:10px;
}
body.large .project .campaignText .bodyPart {width:250px;line-height:18px;font-size:12px;}

.project .campaignText .contentpager {width:100%;font-size:9px;}
body.large .project .campaignText  .contentpager {font-size:10px;}


.project .campaign 
{
	position:relative;
	top:-20px;
	padding: 0 0 16px 12px;
	float:left;
	
}
.project .campaign LI {list-style-type:square;margin:0;color:#aaaaaa;}
.project .campaign LI:hover {color:#F7E700;}
.project .campaign LI A {color:#aaaaaa;}
.project .campaign LI A:hover {color:#ffffff;}
.project .campaign UL {margin:10px 0 0 14px;padding:0 0 0 4px;}
body.medium .project .campaign {font-size:9px;width:85px;}
body.large .project .campaign {font-size:10px;width:110px;}


/***************************************
/*	News
/**************************************/
.news
{
	padding:0 0 0 8px;
	margin:0;
	position:absolute;
	
}
.newsdetails 
{
	padding:0;
	margin:0;
	position:relative;
}
html>/**/body .news,
html>/**/body .newsdetails 
{
	
}

.newsPreview {width:340px;float:left;height:225px;}
body.large .newsPreview {width:442px;height:300px;}

.newsPreviewImage img {width:340px;}
body.large .newsPreviewImage img {width:442px;}

.newsPreviewText {padding:8px;}
body.large newsPreviewText {}

.datum {color:#666666;}
body.large .datum {font-size:10px;}
.newsItem .datum {padding:4px 0 0 12px;margin:0;}

.newsPreviewText .leesmeer {position:absolute;bottom:16px;left:16px;}
.newsItem .text .leesmeer IMG,.newsItem.Over .text .leesmeer IMG {	margin-left:4px;}

.newsItem 
{
	float:right;
	display:block;
	background: #000000 url('../gfx/blockitem-shade.png') repeat-x;	
}
.newsItem:hover,
.newsItem.Over 
{
	background: #000000 url('../gfx/blockitem-shade-over.png') repeat-x;	
	cursor:pointer;
}

html>/**/body .newsItem {margin-right:14px;}

body.medium .newsItem {width:340px;font-size:11px;}
body.large .newsItem {width:442px;font-size:12px;}

.newsItem .thumbnails {
	height:100%;
	float:right;
	position:relative;
}
.newsItem .thumbnails .mediumThumbnail,
.newsItem .thumbnails .largeThumbnail { display:none;}

.newsItem .text {
	padding: 14px 12px 0 12px;
	height:100%;
	
}
.newsItem .text A {
	display:block;
}
.newsItem h3
{
	width: 320px;
	position:absolute;
	margin:0 0 8px 12px;
	
}

/***************************************
/*	Footer		 					   
/**************************************/

.footerNewsBlock 
{
	position:relative;
	padding: 14px 0 0 66px;
	font-size:10px;
}
.footerNewsBlock A
{
	color: #BBBBB9;
	display:block;
	text-decoration:none;
}
.footerNewsBlock A:hover 
{
	text-decoration:underline;
}
.footerNewsBlock A.more 
{
	color: #F6EA32;
}
.footerContent 
{
	position:relative;
}
.cupCake 
{
	position:absolute;
	z-index:8000;
	top:350px;
	left:30px;
}
body.large .cupCake 
{
	top:586px;
}


/***************************************/
/*	Outside footer (white)	 		   
/**************************************/
 
.outsidefooter 
{

	position:relative;
	color: #aaaaaa;
	font-size:11px;
	padding:16px 0 0 32px;

}
.outsidefooter A { color:#aaaaaa;margin-right:16px;}
.outsidefooter A:hover { color:#aaaaaa;text-decoration:underline;}
.greyright { float:right; color:#aaaaaa;position:relative;}
.greyright A { color:#aaaaaa;}

/***************************************
/*	Excuses
/**************************************/

.white {color:#ffffff}

.excuses A
{
	font-size:14px;
	display:block;
	padding-left:20px;	
	color:#ffffff;
}
body.large .excuses A {font-size:16px;}

.excuses A:hover 
{
	color:#F6EA32;
}
.excuses .altLink .excuuslink,
.excuses .altLink,
.excusesTerug .altLink,
.excusesTerug .excuuslink
{
	display:none;
}
.excusestext {padding: 16px 0 0 0;}

.excusesTerug {margin-top:16px;}

.excuuslink {line-height:17px;}
body.large .excuuslink {line-height:27px;}

/***************************************
/*	Contact
/**************************************/
.contact
{
	padding:0;
	margin:0;
	position:absolute;	

}
.contacttext 
{
	padding: 0px 0 0 20px;
	width:350px;
	float:left;
}
body.large .contacttext {padding: 20px 0 0 20px;}
html>/**/body .contacttext {padding:0 0 0 12px;}

.contacttext B,
.contactform B
{
	color:#F6EA32;
}
body.medium .contacttext .columnleft,
body.medium .contacttext .columnright 
{
	font-size:10px;
}
.contacttext .columnleft 
{
	float:left;
	bottom:0;
}
.contacttext .columnright 
{
	float:right;
	bottom:0;
}
.contactform 
{
	width:350px;
	float:right;
	padding:0px 0 0 0;	
	font-size:10px;
	margin:0;
}
body.large .contactform {padding:20px 0 0 0;}

.contactform TD 
{
	vertical-align:top;
	padding:0 12px 1px 0;
}
.contactform .textbox,
.contactform .textarea
{
	border-style:none;
	background:#555555;
	color:#ffffff;
	
}
.contactform .button 
{
	margin-top:4px;
	background-color:#333333;
	border: solid 1px #F6EA32;
	color:#ffffff;

}
.contactform .checkbox INPUT
{
	height:12px;
	line-height:8px;
	position:relative;
}
body.large .contactform .checkbox {height:15px;}

.contactform .textbox 
{
	height:12px;
	width:250px;
	font-size:10px;
	border-style:none;
	padding:0 12px 0 0;
	margin:0;
}
body.large .contactform .textbox {height:14px;}
.contactform .textbox.w70 {width:70px;}
.contactform .textbox.w100 {width:100px;}
.contactform .textbox.w120 {width:120px;}

.contactform .textarea 
{
	height:30px;
	width:318px;
	font-size:10px;
	font-family:arial, Verdana;
}
body.large .contactform .textarea {height:50px;}
/***************************************
/*	Vertical buttons					  
/**************************************/
.verticalButton 
{
	background-color:#333333;
	width:14px;
	position:relative;
	text-align:center;
}
.verticalButton:hover 
{
	background-color:#444444;
}
body.medium .verticalButton { height:222px;}
body.large .verticalButton { height:300px;}

.verticalButton.Left { float:left;}
.verticalButton.Right { float:right;}

.verticalButton.Left.disabled,
.verticalButton.Right.disabled,
.verticalButton.Left.disabled:hover,
.verticalButton.Right.disabled:hover
{
	background:#222222;
	cursor:wait;
}
.verticalButton.Left.disabled .arrow,
.verticalButton.Right.disabled .arrow {display:none;cursor:wait;}

body.medium .verticalButton .button { height:222px;width:14px;cursor:pointer;}
body.large .verticalButton .button { height:300px;width:14px;cursor:pointer;}

.verticalButton .arrow { top:46%;left:5px;position:absolute;cursor:pointer;}

/***************************************
/*	Custom dropdown					   
/**************************************/
 
.customDropdown 
{
	float:right;
	margin-top:-4px;
	padding-left:6px;
	position:relative;
	display:block;
	height:17px;
}
.customDropdown .selectedField {
	color:#C0C0C0;
	background-color: #5D5D5D;
	border: solid 1px #424242;
	height:17px;
	width:196px;
	cursor:pointer;
}
.customDropdown .selectedField .label {
	padding: 1px 2px 1px 4px;
}
.customDropdown .selectedField .selectButton 
{
	float:right;
}
.customDropdown .options {
	position:absolute;
	color:#C0C0C0;
	background-color: #5D5D5D;
	border: solid 1px #424242;	
	border-top:0px;
	width:192px;
	padding:2px;
	display:none;
	filter:alpha(opacity=90);
    -moz-opacity:.90;
    opacity:.90;	
}
.customDropdown .options A {
	display:block;
	text-decoration:none;
	padding:2px;
	color:#C0C0C0;
}
.customDropdown .options A:hover {
	display:block;
	text-decoration:none;
	background-color: #C0C0C0;
	color:#424242;
}


/*tijdelijk*/
div.verhuis-banner {
	position:absolute;
	width:153px;
	height:153px;
	top:610px;
	right:30px;
	z-index:9999;
	}
	div.verhuis-banner a {
		display:block;
		width:153px;
		height:153px;
		background:transparent url(../gfx/verhuizing-banner.png) no-repeat left top;
		_background-image:none;
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/verhuizing-banner.png', sizingMethod='image');
		}
	div.verhuis-banner a:hover {
		cursor:hand;
		}
/*---------*/

