/* @group • Essentials */
/* @group Library */
@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/forms.css";
/* @end */
/* @end */
html{
			display : block;
			overflow : hidden ;
			height : 100%;
			width : 100%;
			padding : 0;
			margin : 0;	
			}

body{
			display : block;
			overflow : hidden ;
			height : 100%;
			width : 100%;
			padding : 0;
			margin : 0;	
			position:relative;	
			background:#fff;			
			}

/* @group content */

#container{
			position:absolute;
			left : 0px;
			right : 0px;
			top : 0px;
			bottom : 0px;
			overflow:hidden ;
			white-space:nowrap;
			background:#666;
			border-left : 0px solid #004a8f;
			}
#pagestatus{
			position:absolute;
			left : 50%;
			top : 50%;
			width : 150px;
			text-align:center;
			margin-left : -75px;
			margin-top : -17px;			
			z-index:90;
			font-size : 34px;
			line-height:34px;
			font-weight:400 ;
			color : #fff;
			opacity:0.7;
			}


.shortlist{
			display : block ;
			position:absolute;
			right : 60px;
			width : 136px;
			z-index:100;
			text-align:left ;
			text-transform:lowercase;
			}

.shortlist ul{
			display:block ;
			margin : 0;
			padding:0;
			list-style:none ;
			position:relative;
			}

.shortlist li{
			margin : 0 0 5px 0;
			font-size : 10px;
			line-height:11px;
			float : left ;
			}
.shortlist li span{
			float : left;
			width : 30px;
			margin-left:12px;
			font-weight:bold ;	
			
			}
.shortlist li a{		
			color : #000;
			float : left;
			width : 94px;
			white-space:normal ;
			overflow : hidden;
			
			}

.shortlist#portfolio_shortlist{
			background : url(../img/cases-bg.png);
			top : 180px;
			padding-bottom : 10px;
			}

.shortlist#portfolio_shortlist h3{
			display : block ;
			overflow:hidden;
			height : 32px;
			text-indent:-999px;
			margin : 0;
			}

.shortlist#portfolio_shortlist h3 a{
			display : block ;
			overflow:hidden;
			height : 32px;
			text-indent:-999px
			}

.shortlist#portfolio_shortlist a{
			margin-left : 12px;
			width : 114px;
			}

.shortlist#blog_shortlist{
			background : url(../img/blogt-bg.png);
			top : 40px;
			padding : 0 0 10px 0;
			}

.shortlist#blog_shortlist h3{
			display : block ;
			overflow:hidden;
			height : 64px;
			text-indent:-999px;
			margin : 0;
			}

.shortlist#blog_shortlist h3 a{
			display : block ;
			overflow:hidden;
			height : 64px;
			text-indent:-999px
			}

#container .loading .content{
			display:none ;
			}


/* @end */

/* @group portfolio */

/* @group navigatie */

/* @group colors */
			
#kl-ruby #pf-checker a#nextimage span{
			background-image: url(../img/fwd_ruby.png);			
			}

#kl-blue #pf-checker a#nextimage span{
			background-image: url(../img/fwd_blue.png);			
			}

#kl-green #pf-checker a#nextimage span{
			background-image: url(../img/fwd_green.png);
			
			}

#kl-orange #pf-checker a#nextimage span{
			background-image: url(../img/fwd_orange.png);			
			}

#kl-gray #pf-checker a#nextimage span{
			background-image: url(../img/fwd_gray.png);			
			}
						
			
#kl-ruby #pf-checker a#previousimage span{
			background-image: url(../img/bwd_ruby.png);			
			}

#kl-blue #pf-checker a#previousimage span{
			background-image: url(../img/bwd_blue.png);			
			}

#kl-green #pf-checker a#previousimage span{
			background-image: url(../img/bwd_green.png);			
			}

#kl-orange #pf-checker a#previousimage span{
			background-image: url(../img/bwd_orange.png);			
			}

#kl-gray #pf-checker a#previousimage span{
			background-image: url(../img/bwd_gray.png);
			
			}


/* @end */

#pf-checker a{
			display:block ;
			position:absolute;
			font-size : 100px;
			text-align:center ;
			text-indent:-9999px;
			color : #fff;
			width : 200px;
			cursor:pointer ;
			opacity : 0.35;
			}

#pf-checker a:hover{
			opacity :1;
			}
#pf-checker a span{
			position:absolute;
			display : block ;
			width : 200px;
			}

#pf-checker a#previousimage span{
			top : 0px;
			left : 150px;
			bottom : 0px;		
			background: url(../img/bwd_ruby.png) no-repeat center 220px;		
			}
#pf-checker a#nextimage span{
			top : 0px;
			right : 30px;
			bottom : 0px;	
			background:url(../img/fwd_ruby.png) no-repeat center 220px ;
			}
#pf-checker a#previousimage{
			top : 0px;
			left : 0px;
			bottom : 0px;
			}

#pf-checker a#nextimage{
			top : 0px;
			right : 0px;
			bottom : 0px;
			}

#pf-checker a#nextimage.inactive,#pf-checker a#previousimage.inactive{
			display:none ;
			}

#pf-checker{
			position:absolute;
			top : 0px;
			right:0px;
			bottom : 0px;
			left : 0px;
			z-index : 25;
			/*
			//background : url(../img/checker.png);
			*/
			background : url(../img/checker-no-repeat.png);
			}

	/*
.ie #pf-checker{
			background : url(../img/checker-no-repeat.png);
			}
*/

/* @end */
#bodymask{
			position:absolute;
			left : 0px;
			top : 0px;
			bottom : 0px;
			width : 100%;
			overflow:hidden ;
			margin : 0;
			padding:0;
			background : url(../img/opacity/000_08.png);			
			z-index : 999;
			}
#container{
			position:absolute;
			left : 0px;
			right : 0px;
			top : 0px;
			bottom : 0px;
			overflow:visible ;
			white-space:nowrap;
			background:#666;
			}
#rails{	
			width : 20000px;
			}

#rails .pagecurrent{
			position:absolute;
			}

#rails div.imagecontainer{
			position:absolute;
			overflow:hidden;
			}

#rails div.imagecontainer .embmovie{
			position:absolute;
			z-index:1000;
			left : 50%;
			top : 100px;
			display : none ;
			padding : 10px;
			background : #000;
			width : auto;
			overflow:visible;
			text-align:right ;
			}

#rails div.imagecontainer .embmovie .closemovie{
			display:block;
			background-image : url(../img/closevideo.png) ;
			width : 14px;
			height : 14px;
			overflow:hidden;
			margin-bottom : 10px;
			position:relative;
			z-index:1000;
			opacity : 1;
			
			}

#rails div.imagecontainer .embmovie object{
			display : block ;
			overflow : hidden ;
			margin : 0;
			padding:0;
			}

/* @group moviebtn */

.movieBtn{
			display:block ;
			position:absolute;
			z-index:999;
			top : 260px;
			left : 50%;
			width : 250px;
			padding : 20px 0;
			text-align:center;
			margin-left : -125px;
			font-size : 18px;
			line-height:18px;
			height : 18px;
			font-weight:100 ;
			background : url(../img/opacity/000_08.png);
			}

.movieBtn .bold{
			font-weight:500 ;
			}

.movieBtn:hover{
			
			font-weight:100 ;			
			background : url(../img/opacity/000_09.png);
			text-decoration:none ;
			}

.webkit .movieBtn, .gecko .movieBtn{
			-moz-border-radius: 5px;
			-moz-box-shadow:0px 0px 5px #000;
			-webkit-border-radius: 5px;
			-webkit-box-shadow:0px 0px 5px #000;
			}

.webkit .movieBtn:hover, .gecko .movieBtn:hover{
			-moz-border-radius: 5px;
			-moz-box-shadow:0px 0px 2px #000;
			-webkit-border-radius: 5px;
			-webkit-box-shadow:0px 0px 5px #000;
			font-weight:100 ;			
			text-decoration:none ;
			}




/* @end */

#rails div.imagecontainer img{
			position:absolute;
			overflow:hidden;
			}

/* @end */

/* @group information-bar */

/* @group TYPE */

.info p{
			color:#fff;
			font-weight:normal ;
			font-size : 11px;
			line-height:18px;
			letter-spacing:0.06em;
			white-space: normal;
			width : 460px;
			margin:10px 0px 20px 20px;
			}

.info h2{
			color : rgb(45,147,255);
			color: rgba(45,147,255,0.75) ;			
			font-weight:normal ;			
			font-weight:lighter ;
			font-weight:100 ;
			letter-spacing:0.08em;
			font-size : 28px;
			line-height:36px;
			margin:20px 20px 10px 20px;
			}
			

 .info h3{
			color : rgb(45,147,255);
			color: rgba(45,147,255,0.75) ;			
			font-weight:bold ;
			font-weight:100 ;
			letter-spacing:;
			font-size : 24px;
			letter-spacing:0.08em;
			line-height:36px;
			margin:20px 20px 10px 20px;
			}

.info .h4{
			font-weight:bold ;
			font-weight:200 ;
			letter-spacing:;
			font-size : 22px;
			line-height:36px;
			margin:20px 20px 10px 20px;
			}

p .highlight{
			font-weight:bold ;
			background:none ;
			}
#container .content .twocolumnw p{
			width : auto ;
			}
 .info p a{
			color: rgb(45,147,255) ;
			text-shadow:rgba(255,255,255, 0) 0px 0px 3px;
			text-decoration:underline;
			}

 .info p a:hover{
			color: rgb(45,147,255) ;
			text-shadow:rgba(0,0,0, 0.6) 0px 0px 4px;
			text-decoration : none ;
			}

/* @end */

.info{
			position:absolute;
			height : auto;
			overflow:hidden ;
			left : 0px;
			right : 0px;
			bottom:0px;
			z-index : 100;
			background : url(../img/opacity/000_08.png);
			}

#container .info .minimize {
			position : absolute;
			right : 0px;
			top: 0px;
			display:block ;
			padding : 20px;
			cursor:pointer;
			}

#container .info .minimize span{
			display:block ;
			text-indent:-9999px;
			width : 16px;
			height : 3px;
			border-bottom-width : 3px;
			border-bottom-style : solid;	
			cursor:pointer;		
			}

#container .info .minimize.open span{
			border-bottom-width : 3px;
			border-bottom-style : solid;
			border-left-width : 0px;
			border-left-style : solid;
			border-right-width : 0px;
			border-right-style : solid;
			border-top-width : 0px;
			border-top-style : solid;				
			}

#container .info .minimize.closed span{
			display:block ;
			text-indent:-9999px;
			width : 16px;
			height : 10px;
			border-bottom-width : 1px;
			border-bottom-style : solid;
			border-left-width : 1px;
			border-left-style : solid;
			border-right-width : 1px;
			border-right-style : solid;
			border-top-width : 3px;
			border-top-style : solid;			
			}

.info.loading{
			background-image : url(../img/ajax-loader.gif);
			background-position: 220px 20px;
			background-repeat: no-repeat}

#container .content{
			overflow:hidden ;
			white-space:nowrap;
			z-index:500;
			margin-left : 200px;
			width : 800px;
			position:relative;
			}
			
#container .content .twocolumnw.col1{
			float : left ;
			width : 380px;
			padding-right : 10px;
			}

#container .content .twocolumnw.col2{
			float : left ;
			width : 360px;
			padding-right : 10px;
			}
			
#container .content .col1{
			float : left ;
			width : 200px;
			padding-right : 10px;
			}

#container .content .col2{
			float : left ;
			width : 200px;
			padding-right : 10px;
			}
#container .content .col3{
			float : left ;
			width : 200px;
			padding-right : 10px;
			}

/* @end */


/* @group resize-status */

#resize-status p{
			display : block;
			width : 200px;
			background : #fff;
			padding : 10px;
			margin :0  auto;
			position:relative;
			top : 40%;			
			}

#resize-status{
			position:absolute;
			top:0px;
			left : 0px;
			right : 0px;
			bottom : 0px;
			z-index : 10000;
			background: #fff ;
			color:#333;
			font-size : 24px;
			text-align:center ;
			display : none ;			
			}

/* @end */
/* @group menu */

#constcont{
			height : 100px;
			width : 100px;
			overflow:visible ;
			position:absolute ;
			left : 40px;
			top : 40px;
			}
#menu .menu-current, #menu .menu-parent{
			color : #fff;
			font-weight:bold ;
			}

.ie #menu .menu-current, .ie #menu .menu-parent{
			color : #fff;
			font-weight:normal ;
			}

#constcont #menu .menu-parent{
			color : #fff;
			font-weight:bold ;
			}
#menu{
			position : absolute ;
			z-index:100;
			padding : 0;
			top : 180px;
			left : 0px;
			overflow:visible;
			line-height:16px;
			text-transform:lowercase;
			}

#menu ul{
			list-style:none ;
			width : auto;
			display : block ;
			margin: 0 0 0 0;
			padding : 0;
			}


#menu li{
			display:block ;
			float : left ;
			display:inline;
			margin : 0 0 0 0;
			padding:0;
			height : 18px;
			font-size : 11px;
			white-space:nowrap;
			position:relative ;
			overflow:hidden ;
			zoom:1;
			width : 200px;
			}

#menu .parent .submenu li{
			margin-left : 10px;
			position:relative ;
			}

#menu li.parent{
			height : auto;
			}

#menu li.parent ul{
			overflow: hidden;
			margin : 0;
			padding:0;
			}

#menu a{
			display : inline;			
			padding : 0 10px;
			margin:2px 0 0 0;
			height : 16px;
			background : #fff;
			color:#333;
			white-space:nowrap ;
			text-decoration : none ;
			overflow:hidden;							
			}

#menu a:hover{
			color:#000;					
			}
#constcont #menu .case_menu{
			position:absolute;
			right : 0px;
			top : 0px;
			margin : 0;
			padding:0;
			width : 50px;
			}

#constcont #menu .case_menu li{
			float : left ;
			margin : 0;
			padding:0;
			height : 18px;
			}

#constcont #menu .case_menu li a{
			float : left ;
			margin : 2px 0 0 0;
			padding:0 5px;
			background : url(../img/opacity/000_06.png);
			}

#constcont #menu .case_menu li a.menu-current{
			float : left ;
			margin : 2px 0 0 0;
			padding:0 5px;
			background : url(../img/opacity/000_08.png);
			}


/* @end */

/* @group logo */
			
			
#logo{
			height: 160px;
			position: absolute;
			top :0px;
			left : 0px;
			z-index : 1000;

}
#logo h1{
			margin : 0;
			padding :0;
			font-size : 12px;
			height : 160px;
			width : 120px;
			float : left ;
			background: url(../img/logo80.png) no-repeat 46% 20%;
			}

#logo h1 a{
			margin : 0;
			padding :0;
			font-size : 12px;
			height : 160px;
			width : 150px;
			float : left ;
			text-indent:-9999px;
			}


/* @group skewed border */

*html div#skew
{
			border-top-color: pink;
			border-bottom-color: pink;
			filter: chroma(color=pink);
}
div#skew{
			position:absolute;
			left : 120px;
			height : 120px;		
			background:#transparent;
			border-width : 20px;
			border-style :solid;
			border-color :transparent;
			border-left-width : 0px;
			border-left-color: #004a8f ;
			border-right-width:0px;
			}

#kl-ruby div#skew{
			border-left-color: #530047 ;
			}

#kl-blue div#skew{
			border-left-color: #002D6F ;
			}

#kl-green div#skew{
			border-left-color: #445300 ;
			}

#kl-orange div#skew{
			border-left-color: #D20000 ;
			}

#kl-gray div#skew{
			border-left-color: #212123 ;
			}

/* @end */

/* @end */

/* @group kleuren */



#kl-ruby #menu a.menu-parent{
			background-color: #B1007A ;
			}

#kl-blue #menu a.menu-parent{
			background-color: #0080B6 ;
			}

#kl-green #menu a.menu-parent{
			background-color: #83AE00 ;
			}

#kl-orange #menu a.menu-parent{
			background-color: #FF6000 ;
			}

#kl-gray #menu a.menu-parent{
			background-color: #4C4A4C ;
			}

#kl-ruby #menu a.menu-current{
			background-color: #B1007A ;
			color : #fff;
			}

#kl-blue #menu a.menu-current{
			background-color: #0080B6 ;
			color : #fff;
			}

#kl-green #menu a.menu-current{
			background-color: #83AE00 ;
			color : #fff;
			}

#kl-orange #menu a.menu-current{
			background-color: #FF6000 ;
			color : #fff;
			}

#kl-gray #menu a.menu-current{
			background-color: #4C4A4C ;
			color : #fff;
			}

/* @group borders */



/* @group gray */

#kl-gray .brdr-color-lighter{
			border-color : #666666;
			}

#kl-gray .brdr-color-light{
			border-color : #4C4A4C;
			}

#kl-gray .brdr-color-main{
			border-color : #363838;
			}

#kl-gray .brdr-color-dark{
			border-color : #212123;
			}

/* @end */

/* @group green */

#kl-green .brdr-color-lighter{
			border-color : #AEC500;
			}

#kl-green .brdr-color-light{
			border-color : #83AE00;
			}

#kl-green .brdr-color-main{
			border-color : #6F9200;
			}

#kl-green .brdr-color-dark{
			border-color : #445300;
			}

/* @end */

/* @group ruby */

#kl-ruby .brdr-color-lighter{
			border-color : #D8007A;
			}

#kl-ruby .brdr-color-light{
			border-color : #B1007A;
			}

#kl-ruby .brdr-color-main{
			border-color : #7C0066;
			}

#kl-ruby .brdr-color-dark{
			border-color : #530047;
			}

/* @end */

/* @group orange */

#kl-orange .brdr-color-lighter{
			border-color : #FF7E0A;
			}

#kl-orange .brdr-color-light{
			border-color : #FF6000;
			}

#kl-orange .brdr-color-main{
			border-color : #F52600;
			}

#kl-orange .brdr-color-dark{
			border-color : #D20000;
			}

/* @end */

/* @group blue */

#kl-blue .brdr-color-lighter{
			border-color : #2D93C5;
			}

#kl-blue .brdr-color-light{
			border-color : #0080B6;
			}

#kl-blue .brdr-color-main{
			border-color : #004990;
			}

#kl-blue .brdr-color-dark{
			border-color : #002D6F;
			}

/* @end */

/* @end */

/* @group gray */

#kl-gray .color-lighter{
			color : #666666;
			}
			
#kl-gray .color-light{
			color : #4C4A4C;
			}
#kl-gray .color-main{
			color : #363838;
			}
			
#kl-gray .color-dark{
			color : #212123;
			}

#kl-gray .bg-color-lighter{
			background-color : #666666;
			}

#kl-gray .bg-color-light{
			background-color : #4C4A4C;
			}

#kl-gray .bg-color-main{
			background-color : #363838;
			}

#kl-gray .bg-color-dark{
			background-color : #212123;
			}

/* @end */

/* @group green */

#kl-green .color-lighter{
			color : #AEC500;
			}
			
#kl-green .color-light{
			color : #83AE00;
			}
#kl-green .color-main{
			color : #6F9200;
			}
			
#kl-green .color-dark{
			color : #445300;
			}

#kl-green .bg-color-lighter{
			background-color : #AEC500;
			}

#kl-green .bg-color-light{
			background-color : #83AE00;
			}

#kl-green .bg-color-main{
			background-color : #6F9200;
			}

#kl-green .bg-color-dark{
			background-color : #445300;
			}

/* @end */

/* @group ruby */

#kl-ruby .color-lighter{
			color : #D8007A;
			}
			
#kl-ruby .color-light{
			color : #B1007A;
			}
#kl-ruby .color-main{
			color : #7C0066;
			}
			
#kl-ruby .color-dark{
			color : #530047;
			}

#kl-ruby .bg-color-lighter{
			background-color : #D8007A;
			}

#kl-ruby .bg-color-light{
			background-color : #B1007A;
			}

#kl-ruby .bg-color-main{
			background-color : #7C0066;
			}

#kl-ruby .bg-color-dark{
			background-color : #530047;
			}

/* @end */

/* @group orange */

#kl-orange .color-lighter{
			color : #FF7E0A;
			}
			
#kl-orange .color-light{
			color : #FF6000;
			}
#kl-orange .color-main{
			color : #F52600;
			}
			
#kl-orange .color-dark{
			color : #D20000;
			}

#kl-orange .bg-color-lighter{
			background-color : #FF7E0A;
			}

#kl-orange .bg-color-light{
			background-color : #FF6000;
			}

#kl-orange .bg-color-main{
			background-color : #F52600;
			}

#kl-orange .bg-color-dark{
			background-color : #D20000;
			}

/* @end */

/* @group blue */

#kl-blue .color-lighter{
			color : #2D93C5;
			}
			
#kl-blue .color-light{
			color : #0080B6;
			}
#kl-blue .color-main{
			color : #004990;
			}
			
#kl-blue .color-dark{
			color : #002D6F;
			}

#kl-blue .bg-color-lighter{
			background-color : #2D93C5;
			}

#kl-blue .bg-color-light{
			background-color : #0080B6;
			}

#kl-blue .bg-color-main{
			background-color : #004990;
			}

#kl-blue .bg-color-dark{
			background-color : #002D6F;
			}

/* @end */

/* @end */