/***************************************

    Whitespace reset

****************************************/

* {
padding:0px;
margin:0px;
outline:none;
}


/***************************************

    Glabal page styles
	#25aae1 blueish color code
****************************************/

body {
background: #f6f6f6 url(../img/bodybg.png) repeat-x;
border-top:5px solid #25aae1;

}

#wrap {
width: 960px;
margin: 0em auto;
}

#header {
height:104px;
background-color: #f6f6f6;
border-bottom:1px solid #d6d6d6;
border-top:1px solid #FFF;
width:100%;
}

#headerwrap {
width:960px;
margin: 0em auto;
}

#content {
width:100%;
background: #f6f6f6 url(../img/shadow.gif) bottom center no-repeat;
border-bottom:1px solid #d6d6d6;
border-top:1px solid #FFF;
padding-top:45px;
padding-bottom:80px;
}

.portfolio-details #content{
background: #f6f6f6 url(../img/shadow-portfolio-details.gif) bottom center no-repeat;
}

.diensten #content{
background: #f6f6f6 url(../img/nu-bg.gif) bottom right no-repeat;
padding-bottom:20px;
}

.overons #content, .portfolio #content, .contact #content {
background: #f6f6f6;
padding-bottom:20px;
}

#contentwrap {
width:960px;
margin: 0em auto;

}

#footer {
width:100%;
border-top:1px solid #FFF;
clear: both;
padding-top:20px;
padding-bottom:20px;
color: #9c9c9c;
}

#footerwrap {
width:960px;
margin:0px auto;
text-align:right;
}

/***************************************

    Columns

****************************************/

.col1 {
float:left;
width: 540px;
}

.diensten .col1 {
width:300px;

}

.col4{
float:left;
width: 442px;
padding-left:36px;
}

.portfolio-details .col4{
float:left;
width: 280px;
padding-left:0px;

}

.col4 p{
font-size:1.3em;
margin:0px;
padding:0px 0px 20px 0px;
}

.col6 p{
font-size:1.5em;
font-weight:bold;
}


.overons .col1, .contact .col1 {
float:left;
width: 442px;
padding-left:18px;
}

.portfolio-details .col1 {
float:left;
width: 660px;
padding-left:18px;
}

.contact .col4 h3{
font-weight:300;
font-size:1.8em;
}

p.left {
width:210px;
display:block;
float:left;
margin-right:20px;
}

p.last {
margin-right:0px;
}

p.google-maps {
background: #e4e4e9;
width:440px;
height:105px;
display:block;
margin-bottom:20px;
}

.contact .col1 p{
margin:0;
padding:0;
font-size:1.3em;
margin-bottom:20px;
}

p.line-bottom {
padding-bottom:10px;
border-bottom:1px solid #dedede;
margin-bottom:20px;
}



.col2 {
margin-left:20px;
float:left;
background: #FFF;
border:1px solid #e8e8e8;
width: 398px;
height:224px;
-webkit-border-radius: 3px; 
-moz-border-radius: 3px;
}

.diensten .col2 {
margin-left:20px;
float:left;
background: none;
border:0;
width: 635px;
-webkit-border-radius: 0px; 
-moz-border-radius: 0px;
height:100%;

}

.diensten .col5 {
margin-left:20px;
float:left;
border:0;

width: 635px;
}



.fcol1{
text-align:left;
width:300px;
height:101px;
background: #e4e4e9;
margin-right:20px;
margin-bottom:20px;
float:left;
color: #696969;
border:3px solid #ebebeb;
}

.last{
margin-right:0px;
}


/***************************************

    Logo Double Phark Technique

****************************************/


a.logo, h1.logo {
          	width: 88px;
          	height: 95px;
          	overflow: hidden;
          	display: block;
          	margin: 0;
            z-index: 3;
			float:left;
          }
h1.logo a {
          	display: block;
          	width: 100%;
          	text-indent: -9999px;
          	height: 100%;
          	background: url(../img/logo.png) repeat;
          }
h1.logo a img {
            text-indent: 0;
			border:0;
          }
		  

		  

		  
/***************************************

    General Typography

****************************************/

html
{
  font-size: 100%;
}


body
{
  color: #696969;
  font-family: "Nimbus Sans L", Verdana, helvetica, arial, sans-serif;
/*  this sets the baseline text size to 10px, so 1.4em = 14px */
  font-size: 62.5%;
}

/***************************************

    Headings  Typography

****************************************/

/* all headings in bold with a top and bottom margin */
h1,h2,h3,h4,h5,h6 
{
  font-family:  verdana, sans-serif; 
  font-weight: normal;
  line-height: 1; 
  margin-bottom: 0.3em;
  max-width: 30em;
}

h1
{
  font-size: 4em;
}

h2
{
  font-size: 29px;
  letter-spacing:-3px;
  font-weight:900;
  color: #001016;
  text-transform: uppercase;
}

.portfolio h2
{
  font-size: 29px;
  letter-spacing:-3px;
  font-weight:900;
  color: #001016;
  text-transform: uppercase;
  padding-bottom:20px;
}

h3
{
  font-size: 2.5em;
}

.fcol1 h3
{
  font-size: 1.5em;
  font-weight:bold;
  margin:12px 0px 0em 15px;
  color: #001016;
}



h4
{
  font-size: 2.0em;
  font-family: Georgia;
  font-weight:100;
  font-style:italic;
  color: #6f7070;
}

h5
{ 
  font-size: 1.3em;
}

h6
{
  font-size: 1.6em;
}

/***************************************

    Paragraphs  Typography

****************************************/

p
{
  font-size: 1.4em;
  line-height: 1.6em;
  padding:5px 0px 0px 18px;
  margin-bottom: 1.7em;
/*stops paragraphs getting too long and unreadable
  max-width: 30em;*/
/*allows paragraphs to contain floated elements such as images*/
  overflow: hidden;
}

p.contactbutton
{
margin:0;
padding:0;
height:43px;
text-align:right;
}

.portfolio p.contactbutton
{
text-align:left;
}

p.contactbutton a img {
border:0;
text-indent: 0;
height:43px;
width:202px;
margin-right:2px;
}

.portfolio p.contactbutton a img {
margin-left:20px;
}

.fcol1 p {
font-size: 1.2em;
line-height: 1.4em;
padding:5px 10px 0px 15px;
}

.portfolio-details p {
padding-left:18px;
}

.diensten .col5 p{
padding:0px;
font-size:1.3em;
}


.diensten .col5 p.inleiding{
font-weight:bold;
}


p.tel {
padding-left:45px;
background: url(../img/icon-tel.gif) top left no-repeat;
height:35px;
}

p.email {
padding-left:45px;
background: url(../img/icon-email.gif) top left no-repeat;
height:35px;
}

span.bigger {
font-size:1.2em;
color: #398bb3;
text-decoration: none;
font-weight:300;
}

span.biggert a{
font-size:1.2em;
color: #398bb3;
text-decoration: none;
font-weight:300;
}

p.error {
height:45px;

}

p.error b {
color: #ff0000;
}





/***************************************

    Lists  Typography

****************************************/

ul {
font-size:1.3em;
list-style-type:none;
margin-left:20px;
margin-bottom:20px;
}

ul.diensten-nav h4 {
text-indent:-9999px;
}

ul.diensten-nav {
width:300px;
border-right:1px solid #dedede;
margin-left:-20px;

}



ul.diensten-nav ul li a{
display:block;
text-decoration: none;
color: #333;
font-size:0.9em;
padding:5px;
margin-left:10px;
}

ul.diensten-nav ul li a:hover{
background: #EEE;
}

ul.diensten-nav h5 a.main{
font-size:1.1em;
margin-top:1em;
color: #25aae1;
text-decoration: none;
margin-left:-5px;
}



/***************************************

    Navigation styles

****************************************/		

#navigation {
float: left;
background: cyan;
width:300px;
}	 

ul.mainnav {
float:left;
width:600px;
padding-left:272px;
margin:0;
height:100px;
list-style-type:none;
font-size: 1.6em;
font-family:"Lucida Sans Unicode", "Lucida Grande",Verdana, Arial, Helvetica, sans-serif;
}

ul.mainnav li{
display: inline;
margin: 0;
}

ul.mainnav li a{
text-align: center;
color: #666666;
float: left;
display: block;
width:120px;
padding-top:10px;
height:30px;
text-decoration: none;
margin: 30px 0px 0px 0px;
background-color: #F6F6F6; /*background of tabs (default state)*/
}

ul.mainnav li a:hover{
color: #25aae1;
font-weight:700;
letter-spacing:-1px;
}

ul.mainnav li a.selected{
font-weight:bold;
}

ul.mainnav li a.selected:hover{
letter-spacing:0;
}

    
		  
/***************************************

    Table styles

****************************************/		  
		  
  
table
{
  border-left: #fff solid 1px;
        border-top: #fff solid 1px;
        border-collapse: collapse;
  font-size: 1.6em;
  margin-bottom: 2em;
} 

caption
{
  font-size: 90%;
  font-style: italic;
  padding: 0.5em 10px;
  text-align: right;
}

th, td
{
  background: #ccc;
  border-right: #fff solid 1px;
        border-bottom: #fff solid 1px;
        padding: 0.2em;
}

tr:hover td
{
  background: #999;
}

tfoot tr:hover td
{
  background: #666;
}

th, thead td, tfoot td
{
  background: #666;
        color: #eee;
        font-weight: bold;
        text-align: center;
}


/***************************************

    Linking styles

****************************************/	

.fcol1 a {
text-decoration: none;
color: #1d94c6;
font-weight:900;
}

.portfolio-details .col4 a {
text-decoration: none;
color: #1d94c6;
font-weight:900;
}

.overons .col6 a {
text-decoration: none;
color: #252455;
padding:2px 3px 2px 3px;
font-weight:800;

}

.overons .col4 a {
text-decoration: none;
color: #1d94c6;
padding:2px 3px 2px 3px;
font-weight:300;

}	

.overons .col6 a:hover {
text-decoration: none;
color: #252455;
border-bottom:1px dotted #252455;

}


.overons .col4 a:hover {
text-decoration: none;
color: #FFF;
background: #62bade;
}

.overons img.tevreden {
border:0;
}


/***************************************

    Form styles

***************************************/

.contact form label {
margin-top:20px;
display:block;
font-size:1.3em;
}

.contact form .contactright input {
margin-top:5px;
padding:5px;
width:303px;
border:1px solid #eee;
font-family: Georgia, serif;
font-style:italic;
color: #333;

}
.contact form .contactright textarea {
margin-top:5px;
padding:5px;
width:410px;
border:1px solid #eee;
height:167px;
font-family: Georgia, serif;
font-style:italic;
color: #333;
}

.contact form #contactsubmit {
margin-top:5px;
width: 202px;
height:43px;
border:0;
}


/***************************************

    Widget styles and hackish lazy

****************************************/	

span.amp {
font-family: "Palatino Linotype", Georgia, serif;
}

hr.break {
display:none;
}

#mediaholder {
margin-left:3px;
margin-top:3px;
width:392px;
height:219px;
z-index:89;
position:absolute;
}

#mediaholder img{
border:0;
}

#box p{
line-height:1.1em;
font-size:1.3em;
margin:0;
}

#box p img {
float:left;
}

#mediaholder #description {
position:relative;
z-index:100;
margin-top:-90px;
width:392px;
height:90px;
background: green;
}

#box {
display: none;
}

a.close {

padding-left:5px;
font-size:1.4em;
text-decoration:none;
color: #b5b5b5;
}

a.close:hover {
color: #001016;
}

.extra {
padding-left:40px;

}


.employee {
position:relative;
width:210px;
float:left;
margin-right:20px;
text-align:right;
height:165px;
}

.overlay {
position: absolute;
  top: 0; /* These positions makes sure that the overlay */
  bottom: 0;  /* will cover the entire parent */
  left: 0;
  width: 210px;
  height:24px;
  background: #000;
  z-index:333;
  opacity: 0.40;
  -moz-opacity: 0.40; /* older Gecko-based browsers */
  filter:alpha(opacity=40); /* For IE6&7 */
}

.employee .description {
opacity: 1.0;
width:205px;
position:relative;
z-index:666;
margin-top:-35px;
color: #FFF;
text-align:right;
padding-top:5px;
padding-right:5px;
}

.employee .description span{
opacity: 1.0;
position:relative;
z-index:777;
padding-right:5px;
font-weight:bold;
}

.employee .description span.name{
font-size:1.6em;
font-weight:300;
color: #aae5fe;
}

.last {
margin-right:0px;
}

.col1 img.tevreden { margin-top:30px;}

#light {
font-weight:300;
}
#light2 {
font-weight:300;
}

.portfolio-details-media-holder {
width:621px;
background: #FFF;
height:450px;
border:1px solid #dedede;
}

.portfolio-details-media-holder img{
margin-left:3px;
margin-top:3px;
}

#portfolio-item {
width:100%;
border-top:1px solid #FFF;
border-bottom:1px solid #d6d6d6;
padding-top:20px;
padding-bottom:80px;
background: #F6F6F6 url('../img/shadow.gif') bottom center no-repeat;
}

#portfolio-item-wrap {
width:960px;
margin:0px auto;
}

#portfolio-item-wrap .col1{
border:0;
}

.col5 .lefter{
display:block;
float:left;
width:195px;
margin-right:20px;
}

.col5 .last{
margin-right:0px;
}

.diensten .diensten-nav li
{
font-size:0.9em;
}

.diensten .diensten-nav li h5
{
font-size:0.8em;
font-weight:bold;
color: #25aae1;
text-transform:uppercase;
}

.portfolio-thumb {
text-align:left;
width:300px;
height:101px;
background: #e4e4e9;
margin-right:20px;
margin-bottom:20px;
float:left;
color: #696969;
border:3px solid #dedede;
position:relative;
}

#thumb-holder {
margin-top:3px;
margin-left:3px;
}

.last{
margin-right:0px;


}

#thumb-holder .overlay {
position: absolute;
  top: 0; /* These positions makes sure that the overlay */
  bottom: 0;  /* will cover the entire parent */
  left: 0;
  width: 294px;
  height:27px;
  background: #000;
  z-index:333;
  opacity: 0.40;
  -moz-opacity: 0.40; /* older Gecko-based browsers */
  filter:alpha(opacity=40); /* For IE6&7 */
}

#thumb-holder .description {
width:289px;
position:absolute;
z-index:666;
margin-top:-29px;
color: #FFF;
text-align:left;
padding-top:5px;
padding-left:5px;
}

#thumb-holder .description span.name{
opacity: 1.0;
-moz-opacity: 1.0; /* older Gecko-based browsers */
filter:alpha(opacity=100); /* For IE6&7 */
position:relative;
font-size:1.4em;
color: #FFF;
font-weight:800;
padding-right:5px;
z-index:777;
}

#thumb-holder img{
border:0;
}

#thumb-holder .description a {
text-decoration: none;
color: #FFF;
}

a title {
font-family: Georgia;
font-size:15px;
}

img alt {
font-family: Georgia;
font-size:15px;
}

iframe {
margin-top:3px;
margin-left:3px;
}

.portfolio-details .col4 ul {
list-style-image: url("../img/checklist.gif");

}

.portfolio-details .col4 li {
margin-left:18px;
}

.portfolio-details h2 a {
text-decoration: none;
color: #001016;
}

.naam-input {
width:120px;

}

.tel-input {
width:120px;
}

#box label{
float: left;
width:120px;
}

.contactpage a{
text-decoration: none;
color: #25aae1;
}

#footerwrap span a {
text-decoration: none;
color: #333;
}

#footerwrap span a:hover {
border-bottom:1px dotted #696969;
}

#footerwrap .fcol1 a {
text-decoration: none;
color: #25aae1;
}

#footerwrap .fol1 a:hover {
text-decoration: none;
color: #25aae1;
}
/***************************************

    Global browser reset

***************************************

form label {
margin-top:20px;
display:block;
font-size:1.3em;
}

form .contactright input {
margin-top:5px;
padding:5px;
width:303px;
border:1px solid #eee;
}
form .contactright textarea {
margin-top:5px;
padding:5px;
width:410px;
border:1px solid #eee;
height:167px;
}

form #contactsubmit {
margin-top:5px;
padding:5px;
width:110px;
}





html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  background: transparent;
        border: 0;
  color: inherit;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        margin: 0;
        outline: 0;
        padding: 0;
        vertical-align: baseline;
}
 */
/* remember to define focus styles! */
/*
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
*/
/* tables still need 'cellspacing="0"' in the markup */
/*
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}

*/