/* ----------------  reset  -------------------- */

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td 
{margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

ol, ul {list-style: none; }
.clear{clear:both;font-size:0px;line-height:0px;height:0px;}


/* ----------------  general layout  -------------------- */
   
body {background: #373832 url(images/bg.jpg) 0 0; color: #33334F; text-align: center; font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; }
#container {width: 960px; margin: 0 auto; text-align: left;}
#header {width: 960px; height: 343px; position: relative; background: #373832 url(images/header_bg.jpg) 0 0; }
#headerseo {width: 960px; height: 343px; position: relative; background: #373832 url(images/headerseo_bg.jpg) 0 0; }
#headerlogo {width: 960px; height: 343px; position: relative; background: #373832 url(images/headerlogo_bg.jpg) 0 0; }
#headerabout {width: 960px; height: 343px; position: relative; background: #373832 url(images/headerabout_bg.jpg) 0 0; }
#headerofferte {width: 960px; height: 343px; position: relative; background: #373832 url(images/headerofferte_bg.jpg) 0 0; }
#headerportfolio {width: 960px; height: 343px; position: relative; background: #373832 url(images/headerportfolio_bg.jpg) 0 0; }
#content {background: #373832 url(images/content_bg.jpg) 0 0;}
#footer {width: 960px; position: relative; background: url(images/footer_bg.jpg) 0 0 no-repeat; }

img.doubleborder {border-right:1px solid #B3B3AA; border-left:1px solid #B3B3AA; border-bottom:2px solid #95968C;  padding:4px; background:#fff; float:right; margin:17px 34px 0 0; }
img.doubleborder2 {border-right:1px solid #B3B3AA; border-left:1px solid #B3B3AA; border-bottom:2px solid #95968C;  padding:4px; background:#fff; float:right; margin:100px 34px 0 0; }
img.doubleborder3 {border-right:1px solid #B3B3AA; border-left:1px solid #B3B3AA; border-bottom:2px solid #95968C;  padding:4px; background:#fff; margin-top:5px;}
img.doubleborder4 {border-right:1px solid #B3B3AA; border-left:1px solid #B3B3AA; border-bottom:2px solid #95968C;  padding:4px; background:#fff; float:right; margin:120px 34px 0 0; }
img.doubleborder5 {border-right:1px solid #B3B3AA; border-left:1px solid #B3B3AA; border-bottom:2px solid #95968C;  padding:4px; background:#fff; margin-top:3px; margin-bottom:8px;}

div.main2cols {width: 960px; background: url(images/main2cols_bg.jpg) bottom left no-repeat;  }
div.mainnocols {width: 960px; background: url(images/recentwerk_bg.jpg) bottom left no-repeat;  }
div.main2cols p {margin-bottom:12pt;}
div.mainnocols p {margin-bottom:40pt;}
div.leftcol {width:430px; float:left; padding:30px 40px 20px 30px; text-align:justify;  }
div.rightcol {width:420px; float:left; padding:12px 0 20px 0; text-align:justify;  }

a.offertelink {font-weight:bold; font-size:105%; text-decoration:none; color:#710d08; background:#E9E9E0;}
a.offertelink:hover {background:#EEE;}

div.val, input.val {display:none;}

/* ----------------  navigation  -------------------- */

#topnav {position:absolute; margin:38px 0 0 14px; }
#topnavlist li {display: inline;list-style-type: none; color:#fff;}
#topnavlist li a {color:#fff; text-decoration:none;}
#topnavlist li a:hover {color:#fff; text-decoration:underline;}

#logo {position:absolute; margin:0 0 0 675px;} 

#navcontainer {position:absolute; margin:124px 0 0 682px; font-size:110%; }
#navlist {list-style-type: none;}
#navlist li {margin-bottom:0.5em; background-color:#6C828C; padding:2px 40px;}
#navlist li a {color:#fff; text-decoration:none; text-transform:uppercase;}
#navlist li a:hover {color:#7D120C; text-decoration:none;}

p.catchphrase {position:absolute; margin:180px 0 0 48px; color: #fff; float:left; width:420px; text-align:justify;}

/* ----------------  footer  -------------------- */

#footer {padding:60px 0 0 0;}
p.leftfooter {position:relative; padding:0 0 40px 40px; float:left; color:#fff; font-size:10pt; }
p.leftfooter span, p.centerfooter span {font-weight:bold; font-size:11pt; line-height:200%; }
p.leftfooter a {color:#fff; text-decoration:none; font-weight:bold; }

p.centerfooter {position:relative; padding:0 0 40px 120px; float:left; color:#fff; font-size:10pt; }

div.footerright {float:right; padding: 0 40px 40px 0; color:#fff;font-size:10pt; text-align:right;}
div.footerright a {font-size:10pt; line-height:10pt; color:#fff; text-decoration:none;}
div.footerright a:hover {text-decoration:underline;}
div.footerright a img.feweb {border:1px solid #fff; margin:0 0 16px 0;}
div.footerright a.rss {background-color:red; padding:0 26px 0 0; background: url(images/feed_icon_blue.png) bottom right no-repeat;}

p.footnote {color:#A6B5BA; text-align:center; margin-bottom:20px; clear:both;}
p.footnote a {color:#A6B5BA; text-decoration:none;}
p.footnote a:hover {color:#fff; text-decoration:underline;}
p.footnote span {margin:0 140px 0 0;}


/* ----------------  headings  -------------------- */

h1 span {text-indent:-9000px; display:none;}
#h1_recentwerk {width: 960px; height: 73px; position: relative; background: #373832 url(images/h1_recentwerk.jpg) 0 0;}
#h1_webdesign {width: 960px; height: 73px; position: relative; background: #373832 url(images/h1_webdesign.jpg) 0 0;}
#h1_seo {width: 960px; height: 73px; position: relative; background: #373832 url(images/h1_seo.jpg) 0 0;}
#h1_logo {width: 960px; height: 73px; position: relative; background: #373832 url(images/h1_logo.jpg) 0 0;}
#h1_about {width: 960px; height: 73px; position: relative; background: #373832 url(images/h1_about.jpg) 0 0;}
#h1_offerte {width: 960px; height: 73px; position: relative; background: #373832 url(images/h1_offerte.jpg) 0 0;}
#h1_recenteprojecten {width: 960px; height: 73px; position: relative; background: #373832 url(images/h1_recenteprojecten.jpg) 0 0;}
#h1_overigeprojecten {width: 960px; height: 80px; position: relative; background: #373832 url(images/h1_overigeprojecten.jpg) 0 0;}
#h1_uitgevoerdeprojecten {width: 960px; height: 73px; position: relative; background: #373832 url(images/h1_uitgevoerdeprojecten.jpg) 0 0;}
#h1_geeforcenieuws {width: 960px; height: 73px; position: relative; background: #373832 url(images/h1_geeforcenieuws.jpg) 0 0;}
#h1_sitemap {width: 960px; height: 73px; position: relative; background: #373832 url(images/h1_sitemap.jpg) 0 0;}
#h1_bedankt {width: 960px; height: 73px; position: relative; background: #373832 url(images/h1_bedankt.jpg) 0 0;}
h2 {font-size:120%; font-weight:bold; padding-top:1.3em; padding-bottom:1em;}
#h1_unsubscribe {width: 960px; height: 73px; position: relative; background: #373832 url(images/h1_unsubscribe.jpg) 0 0;}


/* ----------------  homepage  -------------------- */

div.recentbeschrijving {float:left; width:265px; margin: 28px 0 0 0px; padding:0 0 10px 0;}
div.recentbeschrijving p {font-size:9pt; font-weight:bold; margin:0 0 20px 30px;  }
div.recentbeschrijving p span {color:#7D120C; font-size:10pt; font-weight:bold; text-transform:uppercase; }

ul.recentlist {list-style-type: none; margin:15px 0 25px 17px;}
ul.recentlist li {padding-left:13px; margin:0;}
a.recentlink, a.extern {color:#7D120C; font-size:10pt; font-weight:bold; text-decoration:none; }
a.recentlink:hover, a.extern:hover {color:#7D120C; font-size:10pt; font-weight:bold; text-decoration:none; background-color:#EEEEE7; border-bottom:1px solid #C6A69D; }

div.cf_wrapper {position: relative; background:url(images/recentwerk_bg.jpg) bottom left no-repeat; height:280px; }
#cf1, #cf2, #cf3, #cf4, #cf5 {width: 960px; height:270px; background:url(images/recentwerk_bg.jpg) bottom left no-repeat;}

#homeblock {background:#E6E6DC url(images/homeblock_bg.jpg) top left no-repeat; width:960px; height:541px;}

#laatstenieuws {padding:90px 70px 0 30px; width:420px; float:left;}
#laatstenieuws li {border-bottom:1px solid #ccd2cd; background:url(images/bullet_laatstenieuws.png) 0 14px no-repeat; padding:12px 0 12px 24px;}
#laatstenieuws li span {width:90px; display:block; float:left; color:#7d120c; font-size:10pt; font-weight:bold;}
#laatstenieuws li a {text-decoration:none; color:#5c7784; font-size:10pt; font-weight:700;}
#laatstenieuws li a:hover {color:#456270; background:#dadace; }

#laatstenieuws li.newsarchive {border-bottom:0px; padding:24px 0 12px 0; background:none;}
#laatstenieuws li.newsarchive a {border:1px solid #fff; padding:5px; background:#e6e6dc; display:block; width:150px; text-align:center;}

#laatstenieuws li.newsarchive2 {border-bottom:0px; padding:0px 0 12px 0; background:none;}
#laatstenieuws li.newsarchive2 a {border:1px solid #fff; padding:2px 5px; background:#e6e6dc; display:block; width:150px; text-align:center;}

div.bottomitemtekst {float:left; width:460px; margin: 80px 0 0 0px; padding:0 0 10px 0;}
div.bottomitemtekst p {font-size:9pt; font-weight:bold; margin:0 0 20px 30px; text-align:justify; }
div.bottomitemtekst p span {color:#7D120C; font-size:10pt; font-weight:bold; text-transform:uppercase; }

ul.troeven {float:left; width:185px; padding:120px 10px 0 0; color:#fff; font-size:10pt;}
ul.troeven li {padding:5px 0 5px 22px; background:url(images/bullet_troeven.png) 0 7px no-repeat; }
a.offerteaanvraag {text-transform:uppercase; color:#fff; text-decoration:none; margin-top:46px; display:block; float:left; width:200px; font-weight:bold; padding-left:30px;}
p.quote {display:block; float:left; width:380px; color:#fff; margin:125px 0 0 0; text-align:justify;}
p.quote span {font-weight:700; font-size:10pt;}

#geeforcecms {background:#E6E6DC url(images/geeforcecms_bg.jpg) top left no-repeat; width:960px; height:335px;}
#seo {background:#E6E6DC url(images/seo_bg.jpg) top left no-repeat; width:960px; height:335px;}
#ontwerp {background:#E6E6DC url(images/ontwerp_bg.jpg) top left no-repeat; width:960px; height:335px;}

a.portfoliolink {background:url(images/button_portfolio.png) top left no-repeat; display:block; width:220px; color:#fff; text-decoration:none; padding:8px 0 8px 10px; }
a.portfoliolink:hover {text-decoration:underline; }

a.bottomlink {color:#7D120C; font-size:10pt; font-weight:bold; text-decoration:none; background:#E6E6DC; border-bottom:1px solid #C6A69D; }
a.bottomlink:hover {color:#7D120C; font-size:10pt; font-weight:bold; text-decoration:none; background-color:#F1F1EB; border-bottom:1px solid #C6A69D; }

/* ----------------  portfolio  -------------------- */

div.recentitem {display:block; float:left; margin:25px 0 10px 30px; width:428px;}
div.recentitem2 {display:block; float:left; margin:25px 0 10px 40px; width:428px;	}
div.recentitem span, div.recentitem2 span {color:#7D120C; font-weight:bold; padding-right :15px; text-transform:uppercase;}

div.recentitem a.extern,div.recentitem2 a.extern {float:right; text-decoration:underline; color:#3D4C5F; font-size:9pt; border:0;}
div.recentitem a.extern:hover, div.recentitem2 a.extern:hover {float:right; text-decoration:underline; color:#7D120C; font-size:9pt; border:0;}

#overigeprojecten {padding:20px 50px 10px 30px; width:420px; float:left;}
#overigeprojecten li {border-bottom:1px solid #ccd2cd; background:url(images/bullet_laatstenieuws.png) 0 8px no-repeat; padding:6px 0 6px 24px;}
#overigeprojecten li span {width:130px; display:block; float:left; color:#7d120c; font-size:10pt; font-weight:bold;}
#overigeprojecten li a {text-decoration:none; color:#5c7784; font-size:10pt; font-weight:700;}
#overigeprojecten li a:hover {color:#456270; background:#dadace; }

#overigeprojecten2 {padding:20px 0 10px 0px; width:420px; float:left;}
#overigeprojecten2 li {border-bottom:1px solid #ccd2cd; background:url(images/bullet_laatstenieuws.png) 0 8px no-repeat; padding:6px 0 6px 24px;}
#overigeprojecten2 li span {width:130px; display:block; float:left; color:#7d120c; font-size:10pt; font-weight:bold;}
#overigeprojecten2 li a {text-decoration:none; color:#5c7784; font-size:10pt; font-weight:700;}
#overigeprojecten2 li a:hover {color:#456270; background:#dadace; }

#interesse {background: url(images/interesse_bg.jpg) top left no-repeat; width:960px; height:276px;}


/* ----------------  portfolio-item  -------------------- */

div.pitem {background:url(images/pitem_bg.jpg) top left no-repeat; height:450px;}

div.portfoliobeschrijving {float:left; width:265px; margin: 28px 0 0 0px; padding:0 0 10px 0;}
div.portfoliobeschrijving p {font-size:9pt; font-weight:bold; margin:0 0 0 30px;  }
div.portfoliobeschrijving p span {color:#7D120C; font-size:10pt; font-weight:bold; text-transform:uppercase; }
div.portfoliobeschrijving p.webadres { margin:15px 0 35px 30px; }
div.portfoliobeschrijving p.webadres a { color:#416170; text-decoration:underline; z-index:999; }
div.portfoliobeschrijving p.webadres a:hover { color:#7D120C; z-index:999; }

div.portfoliobeschrijving p.geleverdediensten { margin:0 0 5px 30px;}

ul.dienstenlist {list-style-type: none; margin:0 0 0 17px;}
ul.dienstenlist li {padding-left:13px; margin:0;}

p.kortebeschrijvinglabel {font-weight:700; margin:40px 90px 10px 90px;}
p.kortebeschrijving {font-weight:100; margin:0 90px 0 90px; text-align:justify;}


div.picwrapper {position: relative; float:left; height:270px;  }
#pic1, #pic2, #pic3 {height:270px; }


/* ----------------  offerte  -------------------- */

#geeforceofferte {padding:0 0 20px 40px; font-size:10pt; line-height:120%; width: 920px; background: url(images/recentwerk_bg.jpg) bottom left no-repeat; }
#webdesign-offerte {margin:0 0 15px 0;}
input {background:#DBDBD3; border:1px dotted #fff; color:#33334F; padding:3px 5px; margin:0 10px 2px 0; width:250px;}
label {vertical-align:middle;}
textarea {background:#DBDBD3; color:#33334F; border:1px solid #fff; width:880px; overflow:hidden; font-family:"Trebuchet MS", Verdana, Arial; padding:0; margin:0;}
#submitgeneral {border:3px solid #fff; background-color:#8BADBE; color:#fff; width:140px; text-transform:uppercase; letter-spacing:2px; font-size:8pt; text-align:center; padding:2px 0 2px 0; margin-top:10px;} 

fieldset {width:880px; border:1px solid #fff; padding:10px 0; margin:0 0 25px 0; }
fieldset input {margin:10px 10px -4px 15px; width:250px;}
fieldset input.smallinput {margin:10px 10px 0px 15px; width:20px; background:#E3E3D8; border:0;}
fieldset label {margin:0 0 0 15px; display:block; }
fieldset label.small {margin:0 0 0 15px; display:inline; width:780px; }
fieldset label em {font-weight:bold; font-style:normal; font-size:105%; display:block; margin-bottom:4px; }
fieldset textarea {margin:0px 0 0 15px; width:840px;}
fieldset div.plain { margin:20px 0 15px 15px; display:block; width:840px; text-align:justify;  }
fieldset div.plain em {font-weight:bold; font-style:normal; font-size:105%; display:block; margin-bottom:4px; }

legend {font-size:110%; font-weight:bold; letter-spacing: 0px; text-transform: uppercase; padding:0 4px 0 4px; }
legend a {text-decoration:none; color: #8489A7;}
label.standout {font-weight:bold; font-size:10pt; color:#eee2cc;}
hr {height: 0; border: 0; border-top: 1px solid #fff; margin:5px 0 5px 0; width:880px; padding:0; line-height:150%; clear:both; }

div.offertekader { border:1px solid #fff; background-color:#DBDBD3; color:#33334F; text-align:justify; padding:10px; margin:20px 0 20px 0; }
div.offertekader em {font-style:normal; font-weight:bold; font-size:120%; display:block; margin-bottom:15px; text-align:center; color:#710d08;}
div.offertekader em span {text-transform:uppercase; }

h2.formh2 {margin-left:0px; font-size:105%;}
h2.offerte {margin-left:30px;}

a.reference:hover {position: relative;}
#overigeprojecten li a.reference span, #overigeprojecten2 li a.reference span {display: none;}
#overigeprojecten li a.reference:hover span, #overigeprojecten2 li a.reference:hover span {display: block; position: absolute; top: -170px; left: -186px; border-right:1px solid #B3B3AA; border-left:1px solid #B3B3AA; border-bottom:2px solid #95968C;  padding:4px 4px 0 4px; background:#fff; width:420px; }


/* ----------------  nieuws  -------------------- */

.newsitem h3 {padding-top:14px; font: bold 140% "Trebuchet MS",Arial,Helvetica,sans-serif; margin-bottom:8px; color: #6B828A; border-bottom:1px solid #C1CCD1; margin-left:65px; }
.date {float:left; height:57px; background:url(images/bullet_news.png) top left no-repeat; padding-right:10px;  }
.date p.centered { margin-left:0; text-align:center; width:55px;  color:#fff; margin:0; text-transform:uppercase;  }
.date span.day {font-size:16px; display:block; padding:8px 0 0 0;	}
.date span.month {font-size:10px; height:12px; display:block; padding-bottom:2px;  }
p.news {padding-bottom:12px;}

a.feed {border:1px solid #fff; padding:3px; background:#e6e6dc; display:block; width:120px; text-align:center; text-decoration:none; font-size:10pt; color:#6B828A; text-transform: uppercase; }
a.feed img {padding:0 0 0 10px; vertical-align:middle;  }
a.feed span {vertical-align:middle;  }


/* ----------------  sitemap  -------------------- */

ul.sitemap {padding:0 70px 0 0; width:380px; float:left;}
ul.sitemap li {border-bottom:1px solid #ccd2cd; background:url(images/bullet_laatstenieuws.png) 0 10px no-repeat; padding:8px 0 8px 24px;}
ul.sitemap li span {width:90px; display:block; float:left; color:#7d120c; font-size:10pt; font-weight:bold;}
ul.sitemap li a {text-decoration:none; color:#5c7784; font-size:10pt; font-weight:700;}
ul.sitemap li a:hover {color:#456270; background:#dadace; }