/* Kenneth&Koh Blue: #37ADC7 */
/* 4BA8E3

/*
 *  Studio KK
 * --------------------------------------
 *  URL       :  http://www.studio-kk.nl
 *  Designer  :  Koh San Ngai
 *  Author    :  Xiao-Hu Tai
 *  Date      :  2008 May 24th
 *
 */

/*
-------------------------------------------------------------------------------
   Overrides
-------------------------------------------------------------------------------
*/

* { padding : 0; margin : 0; border : 0; }

div#header ul,
div#footer ul {
	list-style-type: none;
}

/*
-------------------------------------------------------------------------------
   Structure (Header, Footer)
-------------------------------------------------------------------------------
*/

html, body {
	min-width : 900px;
	width : 100%;
	min-height : 670px; /* block-height (440), header-height (130), footer-height (100) */
	height : 100%;
}

body {
	position: relative;
	overflow : hidden;
}

.wrapper {
	width : 900px;
	margin : 0px auto;
}

#header {
	padding-top : 10px;
	background-color : #FFF;
	width : 100%;
	position : fixed;
	top : 0px;
/*	height : 130px; /* padding (15) + logo (85) + navigation (30) *//* Also change Viewport's padding, when one or more of these values change! */
	z-index : 10;
}

	#header .logo {
		background : #FFF url('kennethkoh_logo.gif') no-repeat;
		width : 149px;
		height : 65px;
	}

	#header .navigation {
		background-color : #191919;
		color : #FFF;
		height : 30px;
	}

		#header .navigation ul.primary {
			height : 100%;
			text-align : center;
			float : right;
		}

			#header .navigation ul.primary li {
				float : left;
				width : 85px;
				height : 30px;
			}

			/*-- This is the previous text version --*/
			/*
				#header .navigation ul.primary li a {
					outline: 0;
					display : block;
					margin : 4px auto 6px auto;
					height : 20px;
					line-height:20px;
					color : #FFF;
				}

				#header .navigation ul.primary li a:hover {
					color : #37ADC7;

				}

			#header .navigation ul.primary li.active {
					border-top : 3px solid #37ADC7;
					margin-top : -6px;
					height : 33px;
			}

				#header .navigation ul.primary li.active a {
					margin : 7px auto 6px auto;
					color : #37ADC7;
					font-weight : bold;
				}

				*/

				#header .navigation ul.primary li a {
					outline: 0;
					display : block;
					margin : 0;
					height : 30px;
					width  : 85px;

					/* allow text (-> for crawlers/seo) */
					text-indent : 85px;
					line-height : 30px;
					overflow : hidden;
				}

                        	#header .navigation ul.primary li a[title="Home"]      { background-image : url('menu_home.png'); }
                        	#header .navigation ul.primary li a[title="Over Ons"]  { background-image : url('menu_overons.png'); }
                        	#header .navigation ul.primary li a[title="Portfolio"] { background-image : url('menu_portfolio.png'); }
                        	#header .navigation ul.primary li a[title="Nieuws"]      { background-image : url('menu_nieuws.png'); }
                        	#header .navigation ul.primary li a[title="Contact"]   { background-image : url('menu_contact.png'); }

                        	#header .navigation ul.primary li a[title="Home"]:hover      { background-image : url('menu_home_active.png'); }
                        	#header .navigation ul.primary li a[title="Over Ons"]:hover  { background-image : url('menu_overons_active.png'); }
                        	#header .navigation ul.primary li a[title="Portfolio"]:hover { background-image : url('menu_portfolio_active.png'); }
                        	#header .navigation ul.primary li a[title="Nieuws"]:hover      { background-image : url('menu_nieuws_active.png'); }
                        	#header .navigation ul.primary li a[title="Contact"]:hover   { background-image : url('menu_contact_active.png'); }

				#header .navigation ul.primary li.active {
						border-top : 3px solid #37ADC7;
						margin-top : -6px;
						height : 33px;
				}

				#header .navigation ul.primary li.active a {
					margin-top : 3px;
				}

                        	#header .navigation ul.primary li.active a[title="Home"]      { background-image : url('menu_home_active.png'); }
                        	#header .navigation ul.primary li.active a[title="Over Ons"]  { background-image : url('menu_overons_active.png'); }
                        	#header .navigation ul.primary li.active a[title="Portfolio"] { background-image : url('menu_portfolio_active.png'); }
                        	#header .navigation ul.primary li.active a[title="Nieuws"]      { background-image : url('menu_nieuws_active.png'); }
                        	#header .navigation ul.primary li.active a[title="Contact"]   { background-image : url('menu_contact_active.png'); }


			



#footer {
	background-color : #FFF;
	height : 30px;
	width : 100%;
/*	position : fixed; */
/*	bottom : 0px; */
/*	z-index : 500; */
}

	#footer .navigation {
		height : 30px;
		background-color : #191919;
		color : #FFF;
	}

		#footer .navigation .wrapper {
			position : relative;
			height : 100%;
		}

			#footer .navigation ul {
				position : absolute;
				bottom : 0px;
			}

			#footer .navigation ul li {
				position : relative;
				float : left;
			}

			#footer .navigation ul.secondary {
				left : 0px;
				margin-bottom : 5px;

			}

				#footer .navigation ul.secondary li {
					padding-right : 20px;
				}

					#footer .navigation ul.secondary li a {
						color : #FFF;
					}

					#footer .navigation ul.secondary li a:hover,
					#footer .navigation ul.secondary li.active a {
						color : #37ADC7;
					}




			#footer .navigation ul.ternary {
				right : 0px;
				margin-bottom : 5px;
			}

				#footer .navigation ul.ternary li {
					padding-left : 20px;
				}

					#footer .navigation ul.ternary li a {
						color : #FFF;
					}

					#footer .navigation ul.ternary li a:hover,
					#footer .navigation ul.ternary li.active a {
						color : #37ADC7;
					}

/*
-------------------------------------------------------------------------------
   Content
-------------------------------------------------------------------------------
*/

#content {
/*
	min-width : 100%;
	min-height : 100%;
	height : 100%;
	width : 100%; */
/*	background: #FFF url("__background-example-1.jpg") no-repeat; /* TODO FIX THIS */
	background-attachment:fixed;
}

	#viewport {
		position : relative;
		overflow : hidden;

		height : 400px; /* require this to allow the site to be seen */
		width : 100%;   /* without javascript */

		padding-top    :105px;
		padding-bottom : 30px; /* */
	}

	#viewport #viewport-wrapper { /* centered-block wrapper */
		height : 440px;
		width  : 900px;
		margin : -188px 0px 0px -450px; /* -220px 0px 0px -450px; */ /* remove half the difference of the heights between footer and header = 65/2px) */
		position : absolute;
		top : 50%;
		left : 50%;
		overflow : visible;
	}

	#sliderblocks {
		position : absolute;
/*		overflow : hidden; */
	}

	#sliderblocks .block {
		width : 900px;
		height : 440px;
		border : 1px #000 solid;
/*		background : transparent url("__block-background.png") no-repeat;*/
		overflow : hidden;
	}

	#sliderblocks .inactive {
		cursor: pointer;
	}

	#sliderblocks .inactive:hover {
		border : 1px #000 solid;
/*		background : transparent url("__block-background_hover.png") no-repeat;*/
	}
	
	#sliderblocks .block ul {
		list-style-type: none;
	}
	
	#sliderblocks .block ul li {
		margin : 0px;
	}

/*
-------------------------------------------------------------------------------
   USP
-------------------------------------------------------------------------------
*/

#usp {
	height : 75px;
	background-color:#FFF;
	border-bottom : 1px solid #999;
	padding-top : 15px;
}

	#usp .maintext {
		margin-bottom: 5px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 30px;
		line-height:35px;
	}

	#usp .subtext {
		margin-top: 5px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size:14px;
		line-height:18px;
	}

/*
-------------------------------------------------------------------------------
   Typography
-------------------------------------------------------------------------------
*/

body, p, h1, h2, h3, h4, h5, h6, a {
	font-family : Verdana, Arial, Tahoma, Helvetica, sans-serif;
	line-height: 1.6em;
	font-size : 0.8em;
}

p a, li a {
	font-size : 1em;
}

#home li a {
	font-size : 0.8em;
}

/*
h1, h2, h3, h4, h5, h6 {
	padding : 8px 0 4px 0;
}

body { 	font-size: 12px; }

p {
	color       : #333;
	text-align  : justify;
	padding : 5px 0;
}
*/

a {
	color : #000;
	text-decoration : none;
}

a:hover {
	color : #37ADC7;
}

#contact li a {
	font-weight : bold;
}

/*
-------------------------------------------------------------------------------
   Forms
-------------------------------------------------------------------------------
*/
/*
-------------------------------------------------------------------------------
   Styles
-------------------------------------------------------------------------------
*/



/*
-------------------------------------------------------------------------------
   Overrides
-------------------------------------------------------------------------------
*/
#header .navigation ul.primary   li a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; }
#footer .navigation ul.secondary li a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
#footer .navigation ul.ternary   li a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
#copyright { margin-top : 5px; }
#copyright, #copyright p, #copyright a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
#copyright span { color: #37ADC7; }
/*
#portfolio .block .project-content p,
#portfolio .block .project-content a {
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px;
}
*/
#over-ons .information a,
#portfolio .block .project-content a,
#vacatures .block .project-content a,
#information a {
	color : #37ADC7;
}
#over-ons .information a:hover,
#portfolio .block .project-content a:hover,
#vacatures .block .project-content a:hover,
#information a:hover {
	text-decoration : underline;
}


h1 {

}


/*
-------------------------------------------------------------------------------
   sIFR
-------------------------------------------------------------------------------
*/
.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}
.sIFR-replaced {
	visibility: visible !important;
}

.sIFR-alternate {
	display : none;
}





/* --- Quick Test Preview --- */
.slidermenu .active { font-weight : bold; }
.slidermenu a { cursor : pointer; }
/* .slidermenu a:hover { text-decoration : underline; } */
/* --- Quick Test Preview --- */

/* #header, #footer { visibility : hidden; } /* */


	/* #home #content, #over-ons,  #portfolio #content, #contact #content {  background : #FFF none no-repeat; } */
    /*
    ===========================================================================
       Home
    ===========================================================================
    */

    #home #viewport {
		background : #FFF url('__home__bg.png') repeat-x;
	}
	
	#home #background {
		z-index : -100;
		width : 100%;
		height : 200px;
		float : left;
	}

	#home #usp {
		float : left;
		margin-top : -200px;
		background-color : transparent;

		padding : 0px;
		height : 200px;
		width : 100%;
		
		margin-bottom : 30px;
	}

		#home #usp .wrapper {
			padding : 20px;
			width : 900px;
			margin : 0px auto;
		}
		#home #usp #twitter {

			float : left;
			background-color : transparent;


			width : 560px;
			height : 120px;
			background :  transparent url("__home__twitter.png") no-repeat;
			padding : 25px 20px 20px 20px;
		}


			#home #usp #twitter .text {
				font-size: 1em;
				line-height : 1.6em;
			}

			#home #usp #twitter .datetime, #home #usp #twitter .top {
				font-size: 0.7em;
				line-height : 14px;
				margin : 5px 0px;
			}

	#home #home-content {
		/* margin-top : 30px; */
		/*-- Typography --*/
	}
	
		#home #home-content h2 {
			font-family : Geneva, Arial, Helvetica, sans-serif;
			font-size : 24px;
			line-height: 28px;
			margin-bottom: 20px;
		}
	
		#home #home-content .home-block {
			width : 250px;
			height : 179px;
			float : left;
			margin-left : 5px;
			padding : 20px;
		
			background : transparent url('__home__gradient.png') no-repeat;
		}
		
			#home #latest-news {
			}

				/* generalized also for #nieuws */
				/* #home */ #latest-news .item {
					clear : both;
					width : 100%;
				}
				
					/* #home */ #latest-news .item .datetime {
						margin : 5px 0;
						display : block;
						color : #37ADC7;
						float : left;
						width : 80px;
						color : #000;
					}
					
					/* #home */ #latest-news .item .title {
						margin : 5px 0;
						display : block;
						width : 165px;
						float : left;
						font-weight:bold;
					}
			#home #van-alles {
				list-style-type : none;
			}
			
			#home #van-alles li {
				font-weight : bold;
			}

			#home #van-alles img {
				vertical-align:middle;
			}

    /*
    ===========================================================================
       Over-ons
    ===========================================================================
    */

/*        #over-ons #content {  background : #FFF url('__background-example-1.jpg') no-repeat; } */

	#over-ons #sliderblocks .block {
		/* background : #FFF; */
		background : transparent url('__block_transparent-95.png') repeat;
	}

	#over-ons #sliderblocks .inactive {
		background : transparent url('__block_transparent-50.png') repeat;
		cursor: pointer;
	}

	#over-ons #sliderblocks .inactive:hover {
		/* background : #C2D0D3; /* url('__block-transparent_active.png') repeat; */
		background : transparent url('__block_transparent-85.png') repeat;
		border : 1px #000 solid;
	}
	
	#over-ons .block h2 {
		font-size : 36px;
		line-height: 40px;
		margin : 20px 200px;
		display:block;
		color : #37ADC7;
	}
	
	#over-ons .block p {
		margin-bottom : 20px;
	}
	
	#over-ons .block .block-navigation {
		width : 160px;
		float : left;
		margin: 20px 20px 20px 20px;
	}

	#over-ons .block .information {
		float : left;
		width : 650px;
		margin : 20px 20px 0 0 ;
	}

	#over-ons .block .information p {
		font-size : 1em;
	}

	#over-ons .block .block-navigation ul.slidermenu {
	}

	#over-ons .block .block-navigation ul.slidermenu li a {
		/* font-size : 1em; */
		color : #ADABAE;
		display : list-item;
	}

       	#over-ons .block .block-navigation ul.slidermenu li a:hover {
		color : #37ADC7;
	}

	#over-ons .block .block-navigation ul.slidermenu li.active a {
		color : #37ADC7;
		font-weight : bold;
	}


	/*	
	#over-ons .block.inactive h2 .sIFR-replaced {
		visibility: hidden;
	}
	*/

	#over-ons #background,
	#portfolio #background,
	#vacatures #background {
		z-index : -100;
		width : 100%;
		height : 100%;
		float : left;
	}


    /*
    ===========================================================================
       Portfolio/Vacatures
    ===========================================================================
    */
        #portfolio #content,
        #vacatures #content
	{
/*		background : #FFF url('__portfolio__bg.png') no-repeat; */
	}

	#portfolio #projects-menu,
	#vacatures #projects-menu {
		height : 440px;
		width : 240px;
		position:absolute;
		left : 650px;
	}

	#portfolio #projects-menu ul,
	#vacatures #projects-menu ul {
			list-style-type:none;
	}

	#portfolio .block,
	#vacatures .block {
		height : 440px;
		width : 620px;
		background : transparent url('__portfolio__gradient.png') repeat;
	}

	#portfolio #sliderblocks .inactive,
	#vacatures #sliderblocks .inactive {
		background : transparent url('__portfolio__gradient.png') repeat;
		cursor: pointer;
	}

	#portfolio #sliderblocks .inactive:hover,
	#vacatures #sliderblocks .inactive:hover {
		background : transparent url('__portfolio__gradient.png') repeat;
		border : 1px #000 solid;
	}

	#portfolio .block .project-content,
	#vacatures .block .project-content {
		padding : 20px 30px ;
	}

	#portfolio .block h2,
	#vacatures .block h2 {
		font-size : 24px;
		line-height: 36px;
		margin-bottom : 0px;
		color : #000;
	}

	#portfolio .block h3,
	#vacatures .block h3 {
		font-size : 14px;
		line-height: 20px;
		color : #37ADC7;
	}

	#portfolio #sliderblocks .block .project-content img,
	#vacatures #sliderblocks .block .project-content img {
		border : 5px #FFF solid;
		margin: 10px 0;
	}

	#portfolio .block p,
	#vacatures .block p {
		margin-bottom : 10px;
	}


    /*
    ===========================================================================
       Contact
    ===========================================================================
    */
/*
	#contact #viewport #usp {
		height : 80px;
		background-color:#FFF;
		border-bottom : 1px solid #999;
		padding-top : 20px;
	}

		#contact #viewport #usp .maintext {
			margin-bottom: 5px;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 30px;
			line-height:35px;
		}

		#contact #viewport #usp .subtext {
			margin-top: 5px;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size:14px;
			line-height:18px;
		}
*/

	#contact #contact-content .wrapper {
        }

	#contact #contact-content #google-maps {
		width : 500px;
		height : 370px;
		border : 1px solid #000;
		/* background-color : #99FF33; */
		float : left;
	}

	#contact #contact-content #information {
		height : 370px;
		float : right;
		width : 350px;
		padding-top : 0px;
	}

	#contact #contact-content h2 {
		font-family : Geneva, Arial, Helvetica, sans-serif;
		text-transform : uppercase;
		font-size : 24px;
		line-height: 28px;
		margin-bottom: 10px;
	}

	#contact #contact-content img {
		padding : 5px;
		border:1px solid #999;
	}

	#contact #contact-content .contactinfo {
		line-height: 2em;
		font-size : 0.8em;
	}

		#contact #contact-content .contactinfo ul {
			list-style-type: none;
			float : left;
			width : 175px;
		}

			#contact #contact-content .contactinfo ul li {
				font-weight : bold;
			}

			#contact #contact-content .contactinfo ul li + li {
				font-weight:normal;
			}

	#contact #contact-content .location {
		width : 100%;
		margin-top : 24px;
		float:left;
	}

	#contact #viewport {
		background : #FFF url('__contact__bg.png') repeat-x;
	}

	#contact input {
		border : 1px #000 solid;
		height : 20px;
		width  : 150px;
		vertical-align: bottom
	}

	#contact input[type=hidden] {
		display : none;
	}

	#contact input[type=submit] {
		height : 22px;
		margin : 0px 5px;
		padding : 0px 10px;
		width  : 50px;
		vertical-align: bottom
	}

	#contact #directions {
		display : none;
	}

    /*
    ===========================================================================
       Disclaimer, Privacy, Nieuws
    ===========================================================================
    */

	#disclaimer h2, #privacy h2 {
		font-family : Geneva, Arial, Helvetica, sans-serif;
		text-transform : uppercase;
		font-size : 24px;
		line-height: 28px;
		margin-bottom: 20px;
	}
	
	#nieuws h2 {
		font-family : Geneva, Arial, Helvetica, sans-serif;
		font-size : 24px;
		line-height: 28px;
		margin-bottom: 20px;		
	}

	#information {
		padding-top : 20px;
	}

	#information p + p {
		padding-top : 10px;
	}
	
	#nieuws #latest-news-item {
		width : 550px;
		float : left;
	}
	
	#nieuws #latest-news-container {
		width : 300px;
		float : right;
	}
	
				#latest-news-container  > #latest-news + p{
					clear : both;
					padding-top : 20px;
					
				}
				


#error-notification {
	width : 100%;
	height : 100%;
	background : transparent url(IE6Notification.jpg) no-repeat center 100px;
}

#error-notification ul {
	position : relative;
	top : 350px;
	text-align : center;
	list-style-type : none;
}




#contact #footer li a {
font-weight : normal;
}

#home #latest-news .datetime, #home #van-alles li a, #home #home-van-alles {
	color : #37ADC7;
	
}

#home #home-in-het-kort, #home #home-nieuws, #home #home-van-alles 
{
	font-weight : normal;
}