/*
Theme Name:     KWO portal
Theme URI:      http://www.borishoekmeijer.nl/website-KWO-portal/
Description:    Child theme of TwentyEleven
Author:         Boris Hoekmeijer
Author URI:     http: //www.borishoekmeijer.nl
License: 		Contact author please.
Version:        1.0
Tags: 			full width image, resize image to viewport, purple, green, blue, yellow, css pop-up, css3, css3pie, @font-face, jquery slide function				
*/

/* Colors
dark purple		#7d4c9e		logo
light purple	#8659a5		logo
dark green		#5bba48		logo
light green		#80c342		logo, text, a:hover, bars & borders
dark blue		#4498c2		logo
light blue		#5cbceb		logo
dark yellow		#ebe83b		logo
light yellow	#f4ec42		logo
dark grey		#4d4d4c		text, nav
light grey		#c8c7c7		text, infoblok bg
*/

/* CSS reset
---------------------------------------------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}
	
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

body {line-height: 1;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}

table {border-collapse: collapse;border-spacing: 0;}


/* Font stuff
---------------------------------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Damion);

/* for regular text */
@font-face {
    font-family: 'HelveticaCE-Regular';
    src: url('fonts/helveticaceregular.eot');
    src: url('fonts/helveticaceregular.eot?#iefix') format('embedded-opentype'),
         url('fonts/helveticaceregular.woff') format('woff'),
         url('fonts/helveticaceregular.ttf') format('truetype'),
         url('fonts/helveticaceregular.svg#helveticaceregular') format('svg');
    font-weight: normal;
    font-style: normal;}

/* for bold */
@font-face {
    font-family: 'HelveticaNeueLTStd-Cn';
    src: url('fonts/helveticaneueltstd-cn.eot');
    src: url('fonts/helveticaneueltstd-cn.eot?#iefix') format('embedded-opentype'),
         url('fonts/helveticaneueltstd-cn.woff') format('woff'),
         url('fonts/helveticaneueltstd-cn.ttf') format('truetype'),
         url('fonts/helveticaneueltstd-cn.svg#helveticaneueltstd-cn') format('svg');
    font-weight: normal;
    font-style: normal;}
	
@font-face {
    font-family: 'MonolineScriptMTStd';
    src: url('fonts/monolinescriptmtstd.eot');
    src: url('fonts/monolinescriptmtstd.eot?#iefix') format('embedded-opentype'),
         url('fonts/monolinescriptmtstd.woff') format('woff'),
         url('fonts/monolinescriptmtstd.ttf') format('truetype'),
         url('fonts/monolinescriptmtstd.svg#monolinescriptmtstd') format('svg');
    font-weight: normal;
    font-style: normal;}	

h1{font-size:30px;color:#4d4d4c;font-family:'HelveticaNeueLTStd-Cn', Helvetica, Arial, sans serif;}

/* general hyperlink styling */
a, a:link, a:visited {font-family:'HelveticaCE-Regular', Helvetica, Arial, sans serif;color:#4d4d4c;text-decoration: none;}


/* Background
---------------------------------------------------------------------------------------*/
#slideshow, img.bgM {
	min-height: 100%;
	min-width: 1024px;
	width: 100%;
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index:-9999;}

	#slideshow a #enter{
		display:block;
		z-index:100;
		text-align: left;
		color:#8659a5;
		width:270px;
		height:30px;
		line-height:1.8;
		padding:10px 20px 10px 10px;
		position:fixed;
		right:0px;
		top:42%;
		background-image: url(../images/enter.png);
		-webkit-transition: all 0.5s ease-in;
		-moz-transition: all 0.5s ease-in;
		-o-transition: all 0.5s ease-in;
		transition: all 0.5s ease-in;
		font-family: Helvetica, Arial, "sans serif";
		font-size: 16px;
		border-left:10px solid #8659a5;}

	#slideshow a:hover #enter:hover{color:#4d4d4c;text-shadow: 1px 1px 0px #ffffff;filter: dropshadow(color=#ffffff, offx=1, offy=1);}
		

/* Logo slide
---------------------------------------------------------------------------------------*/
#icon-overleaf-window{
	position:relative;
	left:10px;
	width:210px;
	height:205px;
	background-color:transparent;
	display:block;
	z-index:98;}
	
	#icon-overleaf{
		position:relative;
		left:0px;
		width:210px;
		height:50px;
		background-color:#fff;
		display:block;
		z-index:99;
		border-bottom:10px solid #7d4c9e;
		padding-top:145px;
		text-align:center;
		-webkit-box-shadow: 0px 3px 3px 3px rgba(120, 120, 120, 0.5);
		-moz-box-shadow: 0px 3px 3px 3px rgba(120, 120, 120, 0.5);
		box-shadow: 0px 3px 3px 3px rgba(120, 120, 120, 0.5);
		background-image: url(../images/kwo-logo-basis.png);
		background-repeat: no-repeat;
		background-position: 20px 30px;}
		
		#icon-overleaf img{position:absolute;top:0;left:0;}
		#icon-overleaf h2{text-decoration:underline;}	


/* Text
---------------------------------------------------------------------------------------*/
#wrap{
	padding:0% 5% 0 12%;
	position:relative;
	top:-160px;
	left:80px;}

	#wrap h2{	
		font-size:350%;
		font-weight:bold;
		color:#fff;
	/*	font-family: 'MonolineScriptMTStd', Georgia, "Times New Roman", Times, serif;*/
		font-family:'HelveticaNeueLTStd-Cn', Helvetica, Arial, sans serif;
	/*	font-family:'Damion', Helvetica, Arial, sans serif;*/
		text-shadow: 2px 2px 0px #000;
		filter: dropshadow(color=#000, offx=2, offy=2);
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);	
		-webkit-transition: color 1.5s ease-in;
		-moz-transition: color 1.5s ease-in;
		-o-transition: color 1.5s ease-in;
		transition: color 1.5s ease-in;}
	
		#wrap h2:hover{color:#8659a5;}

		#wrap h1{
			line-height:1.6;
			color:#f4ec42;
			font-size:480%;
			font-weight:bold;
		/*	font-family: 'MonolineScriptMTStd', Georgia, "Times New Roman", Times, serif;*/
			font-family:'HelveticaNeueLTStd-Cn', Helvetica, Arial, sans serif;
		/*	font-family:'Damion', Helvetica, Arial, sans serif;*/
			text-shadow: 2px 2px 0px #000;
			filter: dropshadow(color=#000, offx=1, offy=1);
			-webkit-transform: rotate(-2deg);
			-moz-transform: rotate(-2deg);	
			-webkit-transition: color 1.5s ease-in;
			-moz-transition: color 1.5s ease-in;
			-o-transition: color 1.5s ease-in;
			transition: color 1.5s ease-in;}
			
		#wrap h1:hover{color:#5bba48;}


/* Footer
---------------------------------------------------------------------------------------*/
#footer{
	width:100%;
	background: url(../images/bg-white-90percent-transparent.png) repeat;
	display:block;
	height:45px;
	position:absolute;
	bottom:0;
	padding: 5px 0;
	margin-bottom:0px;
	z-index:1;}

	#links{width:960px;margin:0 auto;text-align:left;}

		/* styling the footer bars and links */
		.koop, .bouw, .service, .verhuur{
			float:left;
			width:210px;
			height:45px;
			display:block;}

		.koop, .bouw, .service{margin-right:40px;}

			/* the footer bars */
			.koop #koop-dark, .bouw #bouw-dark, .service #service-dark, .verhuur #verhuur-dark	{float:left;width:126px;height:15px;display:block;}
			.koop #koop-light, .bouw #bouw-light, .service #service-light, .verhuur #verhuur-light {float:left;width:84px;height:15px;display:block;}

			.koop #koop-dark		{background-color:#7d4c9e;}
			.koop #koop-light		{background-color:#8659a5;}
			.bouw #bouw-dark		{background-color:#5bba48;}
			.bouw #bouw-light		{background-color:#80c342;}
			.service #service-dark	{background-color:#4498c2;}
			.service #service-light	{background-color:#5cbceb;}
			.verhuur #verhuur-dark	{background-color:#ebe83b;}
			.verhuur #verhuur-light	{background-color:#f4ec42;}

				/* styling the footer link pop-ups */
				#links .koop span, #links .bouw span, #links .service span, #links .verhuur span {display: none;}
	
				#links .koop:hover span, #links .bouw:hover span, #links .service:hover span, #links .verhuur:hover span {
					display: table;
					width: 180px;
					height:90px;
					padding: 15px; 
					background: url(../images/bg-white-90percent-transparent.png) repeat;				
					z-index: 999;
					font: 17px 'HelveticaCE-Regular', Helvetica, Arial, sans serif; 
					text-align: center;}
	
				#links .koop:hover span {
					color: #7d4c9e; 
					margin-left:-0px;
					margin-top:-165px;				
					border-top: 10px solid #7d4c9e;}
				
				#links .bouw:hover span {
					color: #5bba48; 
					margin-left:-125px;
					margin-top:-165px;
					transform: translateY(-205px, -165px);
					border-top: 10px solid #5bba48;}
				
				#links .service:hover span {
					color: #4498c2; 
					margin-left:-125px;
					margin-top:-165px;				
					border-top: 10px solid #4498c2;}	
				
				#links .verhuur:hover span {
					color: #DCD716;
					margin-left:-125px;
					margin-top:-165px;				
					border-top: 10px solid #ebe83b;}

					#links .koop span p, #links .bouw:hover span p, #links .service:hover span p, #links .verhuur:hover span p{  
						display: table-cell;
						width:210px;
						vertical-align: middle;}
					
					#links .koop span h4, #links .bouw:hover span h4, #links .service:hover span h4, #links .verhuur:hover span h4{  
						font-size:23px;
						position:absolute;
						top:-15%;
						left:19%;
						z-index:-1;}
	
					#links .koop span h4			{color: #7d4c9e;}
					#links .bouw:hover span h4		{color: #5bba48;}
					#links .service:hover span h4	{color: #4498c2;}
					#links .verhuur:hover span h4	{color: #E4DF16;}
		

/* Targeting IE9
---------------------------------------------------------------------------------------*/
#ie9 #wrap h2, #ie9 #wrap h2 span{
	filter: none;}


/* Targeting IE8 & IE7
---------------------------------------------------------------------------------------*/
/* Add all CSS3-PIE items for IE8 and lower */
#ie8 #wrap h2, #ie7 #wrap h2, 
#ie8 #wrap h1, #ie7 #wrap h2{
	position: relative;
	behavior: url(../css/PIE.htc);}
	
/* use this one for elements that already have positioning */
#ie8 #slideshow a #enter, #ie7 #slideshow a #enter,
#ie8 #icon-overleaf, #ie7 #icon-overleaf,
#ie8 #links .koop:hover span, #ie8 #links .bouw:hover span, #ie8 #links .service:hover span, #ie8 #links .verhuur:hover span,
#ie7 #links .koop:hover span, #ie7 #links .bouw:hover span, #ie7 #links .service:hover span, #ie7 #links .verhuur:hover span		
	{behavior: url(../css/PIE.htc);}

#ie8#wrap h2, #ie7#wrap h2,
#ie8#wrap h2 span, #ie7#wrap h2 span,{
	filter: none;}
	
#ie8 #links .verhuur:hover span, #ie7 #links .verhuur:hover span {
	margin-left:-125px;
	margin-top:-165px;}	


/* Targeting Safari & Chrome
---------------------------------------------------------------------------------------*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#links .koop:hover span, #links .bouw:hover span, #links .service:hover span, #links .verhuur:hover span {margin-top:-163px;}
	#wrap h2 span{-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);}
}

/* Targeting iPad
---------------------------------------------------------------------------------------*/
@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
    body {padding: 0;}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
  				#links .koop:hover span {
					color: #7d4c9e; 
					margin-left:-0px;
					margin-top:-165px;				
					border-top: 10px solid #7d4c9e;}
				
				#links .bouw:hover span {
					color: #5bba48; 
					margin-left:-125px;
					margin-top:-165px;
					transform: translateY(-205px, -165px);
					border-top: 10px solid #5bba48;}
				
				#links .service:hover span {
					color: #4498c2; 
					margin-left:-125px;
					margin-top:-205px;				
					border-top: 10px solid #4498c2;}	
				
				#links .verhuur:hover span {
					color: #DCD716;
					margin-left:-125px;
					margin-top:-171px;				
					border-top: 10px solid #ebe83b;}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
  	body {padding: 0;}
	input.button-primary{margin-top:-10px;}
}


/* Targeting iPhone
---------------------------------------------------------------------------------------*/
/* iPhone 3G- */
@media screen and (max-device-width: 480px) { 
} 

	
/* iPhone 4+ */
@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }


@media only screen and (max-device-width: 480px) , 
       only screen and (-webkit-min-device-pixel-ratio: 2) {
	
	h1{font-size:20px;}

    #slideshow, img.bgM {min-width: 320px;}
	
		#slideshow a #enter{
		width:50%;
		height:5%;
		padding:1% 2% 1% 1%;
		background-image: url(../images/enter-small.png);
		background-repeat: no-repeat;
		background-position: 0px 0px;
		border-left:5px solid #8659a5;
		font-size: 10px;}
		
	#icon-overleaf-window{
		left:5px;
		width:85px;
		height:103px;}
		
		#icon-overleaf{
			position:relative;
			left:0px;
			width:85px;
			height:25px;
			border-bottom:5px solid #7d4c9e;
			padding-top:50px;
			background-image: url(../images/kwo-logo-basis-small.png);
			background-repeat: no-repeat;
			background-position: 8px 10px;}

	#footer{height:25px;}

		#links{width:100%;}

			/* styling the footer bars and links */
			.koop, .bouw, .service, .verhuur{width:22%;height:15px;}
			.koop, .bouw, .service{margin-right:4%;}
	
				/* the footer bars */
				.koop #koop-dark, .bouw #bouw-dark, .service #service-dark, .verhuur #verhuur-dark	{width:60%;height:5px;}
				.koop #koop-light, .bouw #bouw-light, .service #service-light, .verhuur #verhuur-light {width:40%;height:5px;}

				#links .koop:hover span, #links .bouw:hover span, #links .service:hover span, #links .verhuur:hover span {font: 15px 'HelveticaCE-Regular', Helvetica, Arial, sans serif;}
	
				#links .koop:hover span {
					margin-left:-0px;
					margin-top:-165%;
					border-top: 5px solid #7d4c9e;}
				
				#links .bouw:hover span {
					margin-left:-60px;
					margin-top:-488%;
					border-top: 5px solid #5bba48;}
				
				#links .service:hover span {
					margin-left:-125px;
					margin-top:-420%;
					border-top: 5px solid #4498c2;}	
				
				#links .verhuur:hover span {
					margin-left:-145px;
					margin-top:-489%;
					border-top: 5px solid #ebe83b;}

					#links .koop span h4, #links .bouw:hover span h4, #links .service:hover span h4, #links .verhuur:hover span h4{font-size:15px;}
}