/*
-----------------------------------------------
Styles for: Kemper Interim
Written by: www.tulipdesign.nl, Saskia Verlinden
Date: 2013, September
-----------------------------------------------
colors:
pms kleur warm red; #F83E25;
blue: #0038A5;
font donker blauw #010d25; */

* {padding: 0; margin: 0;}

/* --------font-sizing--------*/

body {font-size: 100%;/*for IE*/ overflow-x:hidden;}
html>body {font-size: 16px; /* for alle other browsers, IE cannot read this*/}
*:first-child+html body{overflow: visible;}/*for IE 7*/

/* --------fonts and fontsize-------- */

html, body {
   height: 100%; /*important for 100% height*/
   font-family: 'Hind', Arial, sans-serif;
   background: white;
   color: #010d25; /*donker blauw*/
   }

p, ul, li, form, table, th, td {
   font-family: 'Hind', Arial, sans-serif;
   /*font-weight: 300;*/
   font-size: 15px;
   line-height: 1.7;
   }

p, h1, h2, h3, ol, ul, table, td, th {
   text-align: left;
   }

p, ol, ul {padding: 5px 0 15px 0;}

h1 {
font-size: 18px;
font-family: 'Hind', Arial, sans-serif;
color: #0038A5;
padding-bottom:5px;
}

h2 {
   font-family: 'Hind', Arial, sans-serif;
   color:  #0038A5;
   font-size: 15px;
	 letter-spacing:0.05em;
   padding: 20px 0 20px 0;
   }

h3 {
   font-family: 'Hind', Arial, sans-serif;
   color:  #010d25; /*donker blauw*/
   font-size: 13px;
   padding: 5px 0 0 0;
   }

ul {
   list-style:disc outside;
	 margin-left:18px;
	 font-size:1em;
}

ul ul li {font-size:1em;list-style:circle}

header, footer, article, section, nav, menu, hgroup {display: block;}


/*--------links--------*/

a:link {
color:  #010d25; /*donker blauw*/
text-decoration: underline;
}

a:active {
	 color: #010d25; /*donker blauw*/
	 text-decoration:underline;
}

a:visited {
   color: #010d25; /*donker blauw*/
   text-decoration: underline;
   }

a:hover {
   color: #0038A5;
   text-decoration: none;
   }

/* structuur */

header {
background: white;
height: 103px;
}

#logo {
padding:7px 0;
height: 103px;
float:left;
}


nav#screen,nav#mobiel {
background: white;
height: 103px;
padding-top:1px;
}

nav#screen ul, nav#mobiel ul{
list-style: none;
margin: 40px 0 0 -30px;
padding:0;
width: 800px;
float:left;
}

nav#screen li, nav#mobiel li {
background: white;
padding: 5px 5px 3px 5px;
float:right;
text-align:left;
border-left: 1px solid  #0038a5;
}

nav#screen a, nav#mobiel a {text-decoration:none;color: #0038a5; text-decoration:none;font-weight: normal; letter-spacing: -0.1px}
nav#screen a:link, nav#mobiel a:link {color: #0038a5;text-decoration:none;}
nav#screen  a:visited, nav#mobiel a:visited  {color: #0038a5;text-decoration:none;}
nav#screen  a:hover, nav#mobiel a:hover {color: #F83E25;}
nav#screen li#present a, nav#mobiel li#present a {color: #F83E25; font-weight:normal; text-decoration:none;}
nav#mobiel {display: none;}
#container {
   width: 1000px;
   background-color: white;
	 margin: 0 auto 0 auto;
   padding: 0 10px 0 10px;
   min-height: 100%;
   height:auto !important; /* 100% height for modern browsers */
   height:100%; /*100% height for IE */
	 top:0;
}

#container-rest {
   width: 1000px;
   background-color: white;
	 margin: 0 auto 0 auto;
   padding: 0 10px 0 10px;
   min-height: 100%;
   height:auto !important; /* 100% height for modern browsers */
   height:100%; /*100% height for IE */
	 top:0;
}

img#header-screen {
position: absolute;
top:103px;
left: 50%;
width: 2000px;
height: 260px;
margin-left: -1000px; /* Half the width */
}

img#header-mobiel {diplay:none;}

div#onder-foto-home {
margin:0;
margin-top: 20px;
padding:0;
height: 100%;
position: relative;
}

#onder-foto-home h1 {margin-left: 10px;}

#onder-foto {
margin-top: 20px;
margin-left:300px;
padding-left: 0px;
}

/* testimonial styling behalve homepage*/
.quote {
background: white;
padding: 10px;
margin: 15px 0% 20px 15px;
border:1px solid #f8513a;
border-radius: 10px;
}

.quote p {
color:#586174;
line-height: 140%;
font-size: 0.8em;
}

/* quote-float is testimonials naast elkaar getoond, niet op homepage*/
.quote-float {
background: white;
padding: 10px;
float: right;
width: /*310px*/45%;
margin: 15px 0 20px 12px;
border:1px solid #f8513a;
border-radius: 10px;
}

.quote-float p {
color:#586174;
line-height: 140%;
font-size: 0.8em;
}
/*einde quote float*/

p.testimonial-name {
color:#F83E25; /*oranje*/
font-size: 1em;
font-weight: bold;
}

p.testimonial-name2 {
color: #586174;
font-size: 0.9em;
font-weight: normal;
}

/* end testimonial styling */

aside {
background: white;
float: left;
width: 250px;
margin:30px 10px 0 -300px;
border:2px solid  #0038A5;
border-radius: 15px;
padding: 5px;
}

#aside-twee {margin-top: 220px}

.commentaar {
font-style: italic;
color: #0038A5;
padding: 10px;
}

.commentaar a {
font-style: italic;
color: #0038A5;
}

#onder-foto section {
margin-left:0px;
padding-left: 0px;
}

section.testimonial {
height: 490px;/*was 450*/
background: white;
float: left;
width: 450px;
padding: 10px 18px;
margin: 20px 0;
border:1px solid #f8513a;
border-radius: 10px;
}
section.testimonial p {line-height: 1.4;}

.testimonial h2 {color: #f8513a;}

section.box {
position: relative;
background: #f7fcff /*white url(../images/bgbox.jpg)*/ no-repeat 0 0;
float: left;
width: 215px;
height: 310px;/*was 260*/
margin: 10px 5px;
border:2px solid  #0038A5;
border-radius: 10px;
padding: 10px;
}

.box h2 {padding-bottom:5px;}

.box a {
text-decoration: none;
}
.box p,.box ul {line-height: 1.4;}


.bottom {
position: absolute;
bottom:0;
}

.box img {margin-bottom: -25px;margin-left: 130px; border:0}

.small {font-size: 12px}

div#left {
width: 390px;
float:left;
padding-right:10px;
}

div.right {
width: 150px;
float:left;
}

#opdrachtgever li {padding-bottom: 10px;}

footer {
clear:both;
width: 100%;
height: auto;
background: #f8513a; /*#F83E25;  pms kleur warm red */
margin-top:0;
color: white;
}


footer p {text-align:center;padding-bottom: 0; }

footer a:link, footer a:visited {color:#f9b7ae; text-decoration: none;}
footer a:hover {color: white}

/*donkerblauwe header aanpassingen #1f235d*/
/*
header#twee nav#screen{
background: #1f235d;
}

header#twee nav#screen a, nav#mobiel a {text-decoration:none;color: white; text-decoration:none;font-weight: normal; letter-spacing: -0.1px}
header#twee nav#screen a:link,header#twee nav#mobiel a:link {color: white;text-decoration:none;}
header#twee nav#screen  a:visited,header#twee nav#mobiel a:visited  {color: white;text-decoration:none;}
header#twee nav#screen  a:hover,header#twee nav#mobiel  a:hover {color: #F83E25;}
header#twee nav#screen li#present a,header#twee nav#mobiel li#present a {color: #F83E25; font-weight:normal; text-decoration:none;}
header#twee nav#screen ul li,header#twee nav#mobiel ul{background: #1f235d;}
header#twee nav#screen li, header#twee nav#mobiel li {
background: #1f235d;
padding: 5px 5px 3px 5px;
float:right;
text-align:left;
border-left: 1px solid  white;}