/* CSS Document */
/* author: Ootentiek webontwerp 			http://www.ootentiek.be			*/
/* client: Onno Brandjes	*/

html, body {
	margin: 0;
	padding: 0;
	font-family: "Verdana", Helvetica, Arial;
	font-size: 12px;
	color: #324600;
}
body {
	overflow-x:auto;
	overflow-y: scroll;
/*	background-color: #ffcc33; */ /*donkerder/grijzer dan verser groen hieronder */
/*	background-color: #95d666;  verser groen */
/*	background-color: #b2d666; warmer groen-grijs */
/*	background-color: #c3d69b; licht-groen-grijs */
	background-color: #9792dc; 
/*	background-color: #ffcc33; */ /*  licht-oranje */
/*  Achtergrondkleur mixd.co.uk    background-color: #34ab00; */
/*  background-color: #c1ffc1; tijdelijk uitschakelen voor constructie */
/*    background-image: url(images/gradient2.jpg); */
}

#container {
	width: 70%;
	margin: 0px auto 0px auto;
	background-image: url(images/draft2.png); 
	background-color: #c8c4ff;
/*	background-color: #ffcc33; */
/*	min-height:900px !important; 
    height:auto !important;
    height:1500px !important; */
/*    overflow:hidden; */
	border-left: 1px solid #9792dc;
	border-right: 1px solid #9792dc;
	border-top: 10px solid #9792dc;
}
	
#banner {
	height: 165px;
	width: 100%;
	margin: 0px auto 0px auto;
    border-bottom: 1px solid white; 
/*    border-top: 1px solid white; */
/*	background-color: #ffcc33; */
}

#homebanner {
	height: 165px;
	width: 100%;
	margin: 0px auto 0px auto;
/*    border-bottom: 1px solid white; */
/*    border-top: 1px solid white; */
/*	background-color: #ffcc33; */
}

#banner a {
	text-decoration: none;
	color: #324600;
}

#logo {
    float: left;
    width: 257px; 
    height: 81px;
	background-image:url(images/naamlogoklein.png); 
    background-position: top left;
    background-repeat: no-repeat;
    margin: 21px 0px 0px 25px;
/*    margin-top: 40px;
	margin-left: 70px; */
	text-align: right;
/*	background-color: black; */
}

#logo a {
	position: relative;
	top: -90px;
	left: -5px;
	display:block;
	width: 260px;
    height: 90px;
}

.visiepopup {
	position: absolute;
	top: 0;
	left: 0;
}

#filler {
	clear: right;
	height: 25px;
/*	background-color: yellow; */
}

p {
	text-align: justify;
}
	
ol {
	font-size: 14px;
	line-height: 1.7;
	margin-left: 23px;
	
}

ol a {
/*	font-weight: bold; */
	font-style: italic;
	color: #324600;
	text-decoration: none;
	border-bottom: 1px solid grey;
}

blockquote {
	font-family: "Times New Roman", serif;
	font-size: 14px;
	font-style: italic;
	letter-spacing: 1px;
	width: 80%;
	margin-top: 20px;
	margin-left: 30px;
	padding: 2px;
	text-align: justify;
	quotes: "\201C" "\201D"; 
	text-indent: -12px;
/*	background-color: white; */
 }
 
 blockquote:before {
	content: open-quote; 
	font-weight: bold;
	font-size: 14px;
	font-family: "Times New Roman", serif;
	padding-right: 5px;	 
}

 blockquote:after {
	content: close-quote; 
	font-weight: bold;
	font-size: 14px;
	font-family: "Times New Roman", serif;
}
 
.signed {
	text-align: center;
	font-family: "Times New Roman", serif;
	font-style: italic;
	font-size: 16px;
	margin-bottom: 3px;	
}

#homehidden {
	color: #c8c4ff;
}

#menu {
    position: relative; 
	float: right;
    min-width: 428px;
    width: 45%;
    height: 40px;
    z-index: 2000;
/*    background-color: cyan; */
}

/* Begin DROP DOWN menu ===================================================================================== */

#dropdown, #dropdown ul {
	padding: 0; 
/*	margin: 0; */
	list-style: none;
	text-transform: uppercase;
	line-height: 1.2;
/*    background-color: white; */
}

#dropdown li {
	line-height: 1.09; 
    height: 30px;
    display: inline;
	font-family:"brandon-grotesque",sans-serif;
	font-weight:bold;
    font-size: 14px;
	text-transform:uppercase;
/*	letter-spacing:.2em; */
	letter-spacing: 2px; /* dit was 3px, maar dan versprong het menu */
	color: #324600;
/*	color: #fff; witte tekst */
/*	background-color: red; */
}

#dropdown li a {
	background-color: #c8c4ff;
	border-top: 5px solid #c8c4ff; 
}
	
#dropdown ul {
	position: absolute;
/*	width: 200px; */
	left: -2000px;
} 

#dropdown a:hover {
	border-bottom: 3px solid white;
/*	border-bottom: 3px solid #324600; */
/*    background-color: magenta; */
}

#dropdown li:hover ul  {
	left: auto;
}
 
#dropdown a {
	margin-right: 20px;
	color: #324600;
/*	color: #fff; witte tekst */
	border-bottom: 3px solid  #c8c4ff; 
/*	background-color: yellow; */

/*	display: block; */
/*	margin: 2px 5px 3px 5px; */
	text-decoration: none;
/*	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em; */
}

#dropdown ul a {
	display: block;
	font-weight: bold;
	color: #324600;
/*	color: #fff; witte tekst */
	cursor: pointer;
/*  background-color: green; */
}

#dropdown ul  a:link, ul ul a:visited {
    display: block;
	font-weight: normal;
	font-size: 12px;
	color: #324600;
/*	color: #fff; witte tekst*/
	cursor: pointer;
	margin-left: 80px;
/*	margin-top: 5px; */
/*	background-color: yellow; */
}

#subpassie {
	width: 202px;
	height: 14px;
	position: relative;
	left: 80px;
	top: -8px;
	font-family: "brandon-grotesque",sans-serif;
	text-transform:uppercase;
	text-decoration: none;
	letter-spacing: 3px;
	font-size: 12px;
	font-weight: normal;
	color: #324600;
/*	color: #fff; witte tekst */
	z-index: -1000; 
	border-bottom: 3px solid white;
/*	border-bottom: 3px solid #324600; */
/*	background-color: cyan; */
}

#subvisie {
	width: 174px;
	height: 14px;
	position: relative;
	left: 80px;
	top: 13px;
	font-family: "brandon-grotesque",sans-serif;
	text-transform:uppercase;
	text-decoration: none;
	letter-spacing: 3px;
	font-size: 12px;
	font-weight: normal;
	color: #324600;
/*	color: #fff; witte tekst */
	z-index: -1000;
	border-bottom: 3px solid white;
/*	border-bottom: 3px solid #324600; */
/*	background-color: cyan; */
}

#subproces {
	width: 270px;
	height: 14px;
	position: relative;
	left: 80px;
	top: 34px;
	font-family: "brandon-grotesque",sans-serif;
	text-transform:uppercase;
	text-decoration: none;
	letter-spacing: 3px;
	font-size: 12px;
	font-weight: normal;
	color: 324600;
/*	color: #fff; witte tekst */
	z-index: -1000; 
	border-bottom: 3px solid white;
/*	border-bottom: 3px solid #324600; */
/*	background-color: cyan; */
}

#subteam {
	width: 132px;
	height: 14px;
	position: relative;
	left: 80px;
	top: 55px;
	font-family: "brandon-grotesque",sans-serif;
	text-transform:uppercase;
	text-decoration: none;
	letter-spacing: 3px;
	font-size: 12px;
	font-weight: normal;
	color: #324600;
/*	color: #fff; witte tekst */
	z-index: -1000;
	border-bottom: 3px solid white;
/*	border-bottom: 3px solid #324600; */
/*	background-color: cyan; */
}

	
/* Einde DROP DOWN menu ===================================================================================== */
	
#ik {
	float: right; 
/*	position: absolute;
	left: 800px;
	top: 180px; */
	min-width: 200px;
	margin-left: 50px;
	margin-bottom: 10px;
	width: 40%;
/*	background-image:url(images/portret4025b.png); */
    background-position: top center;
    background-repeat: no-repeat;
    text-align: center;
/*   background-color:blue; */
}

#ik img {
	display: inline-block;
	width: 100%;
	max-width: 350px;
}

#content {
 	width: 80%;
    margin-left: 10%;
    padding-bottom: 35px;
    padding-top: 15px;
    min-height:900px !important; 
    height:auto !important;
    height:100% !important; 
/*    border-top: 1px solid white; */
/*    margin-top: 25px; */
/*	background-color: yellow; */
} 

#homecontent {
 	width: 80%;
    margin-left: 10%;
    padding-bottom: 35px;
    padding-top: 15px;
    min-height:900px !important; 
    height:auto !important;
    height:100% !important; 
/*    margin-top: 25px; */
/*	background-color: yellow; */
} 

.kop {
	display: inline;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: normal; 
	text-transform:uppercase;
	font-size: 16px;
	letter-spacing:0.5px;
	text-align: left;
	margin-bottom: 5px;
	background-color: #c8c4ff;
/*	margin-top: 30px; */
}

.missiekop {
	display: inline;
	font-weight: normal; 
	text-transform:uppercase;
	font-size: 12px;
	line-height: 1.6;
	letter-spacing:0.5px;
	text-align: center;
	margin-bottom: 5px;
	background-color: #c8c4ff;
	border: 5px solid #c8c4ff;
/*	margin-top: 30px; */
}

#startlogo {
	position: absolute;
	top: 35%;
	left: 50%;
	width: 405px;
	height: 405px;
    margin-left: -203px;
    margin-top: -100px;
/*    background-color: green; */
}

/* Om een hover te maken boven het startlogo: */
#hoverlogo {
	position: relative;
	top: -452px;
	width: 500px;
	height: 350px;
	padding: 0;
	margin-top: 12px;
}

#hoverlogo li {
	display: block;
	position: absolute;
	list-style: none;
	margin-top: 0px;
	padding: 0;
}

#hoverlogo a {
	display: block;
	/* text-indent: -9999px; */
	text-decoration: none;
	outline: none;
	/* cursor: default; */
	padding: 0;
	margin: 0;
}

#visiehover {
	left: 148px;
	top: 10px;
	width: 460px;
	height: 170px;
	font-weight: bold;
	letter-spacing:1px;
	z-index: 10;
	margin: 0;
/*	background-color: cyan; */
}

#visiehover a {
	width: 470px;
	height: 160px;
	padding-top: 121px;
	padding-left: 31px;
	list-style: none;
	color: #324600;
/*	background-color: red; */
}

#visiehover a:hover {
	margin: 0;
	background: url(images/visiefoto.png)0px -10px no-repeat;
}

#proceshover {
	left: 256px;
	top: 196px;
	width: 400px;
	height: 290px;
	font-weight: bold;
	letter-spacing:1px;
	z-index: 10;
/*	background-color: cyan; */
}

#proceshover a {
	width: 410px;
	height: 2200px;
	padding-top: 101px;
	padding-left: 9px;
	list-style: none;
	color: white;
/*	background-color: red; */
}

#proceshover a:hover {
	background: url(images/procesfoto.png)-1px 50px no-repeat;
}

#mensenhover {
	left: -257px;
	top: 196px;
	width: 400px;
	height: 200px;
	font-weight: bold;
	letter-spacing:1px;
	z-index: 10;
	text-align: right;
/*	background-color: cyan; */
}

#mensenhover a {
	width: 400px;
	height: 220px;
	padding-top: 101px;
	list-style: none;
	color: #324600;
/*	background-color: red; */
}

#mensenhover a:hover {
	background: url(images/teamfoto.png)-50px 30px no-repeat;
}

#synergiehover {
	left: 145px;
	top: 182px;
	width: 114px;
	height: 110px;
	font-weight: bold;
	letter-spacing:1px;
	z-index: 1;
/*	background-color: cyan; */
}

 #synergiehover a { 
	width: 98px;
	height: 37px;
	padding-top: 71px;
	padding-left: 14px;
	list-style: none;
	color: white;
	cursor: default;
/*	background-color: red; */
}

/* VOORLOPIG GEEN MOUSEOVER VOOR SYNERGIE!
#synergiehover a:hover {
	background: url(images/visiepopup.png)-20px -40px no-repeat;
}
*/

#mission {
	position: absolute;
	top: 90%;
	left: 50%;
	width: 820px;
	height:55px;
	margin-left: -400px;
	margin-top: -25px;
	text-align: center;
	z-index: 1000;
/*	background-color: cyan; */
}

#flow {
    float: left; 
/*    margin: 15px 0px 0px 0px; */
/*    min-width: 300px; */
/*    max-width: 600px; */
    max-width: 600px;
    width: 50%;
    text-align: center;
    padding-bottom: 35px;
/*    background-color: green; */
}

#flow h2 {
	font-weight: normal; 
	text-transform:uppercase;
	font-size: 24px;
	letter-spacing:2px;
	text-align: center;
}

#flow img {
	display: inline-block;
	width: 70%;
	max-width: 300px;
	margin-top: 20px;
}

#tagline {
    margin-top: 53px;
    margin-right: 2px;
    font-size: 11px;
    text-transform: uppercase;
    text-align: right;
}

#audiologo {
	margin-top: 15px;
	font-style:bold;
	font-size: 18px;
	line-height: 1.4;
	background-color: honeydew;
	padding: 10px;
}

#footer {
/*	float: left; */
	position: fixed;
	bottom: 0px;
	z-index:999999;
	text-align: center; 
	width: 70%; 
	height: 27px;
	color: #324600;
	border-top: 1px solid white;
	border-bottom: 10px solid #9792dc;
	font-family: "Verdana", Helvetica, Arial;
	font-size: 9px;
	background-color: #c8c4ff;
/*	background-color: red; */
}

.footerstyle {
	 border-bottom: 1px solid white;
	 padding-bottom: 5px;
}

#footer p {
	text-align: center;
}

#footer a {
	text-decoration: none;
	color: #324600;
}

#footer a:hover,a:active {
	text-decoration: none;
	color: grey;
}

#social {
	z-index: 9999999;
	position: fixed;
	bottom: 40px;
	right: 16%;
	text-align: right;
/*	background-color: yellow; */
}