/* -------------------------------------------
project:	Naam
date:		Datum
------------------------------------------- */

/* Reset (a mix of Eric Meyer's & Yahoo's 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; }
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
table { border-collapse:collapse;border-spacing:0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before,
blockquote:after,
q:before,
q:after { content: ""; }
blockquote,
q { quotes: "" ""; }


/* COLOR GUIDE -----------------------------

bluegreen: #3391B3;
red: #DE054C;
darkgrey: #666;
lightgrey: #D5DDE2;

------------------------------------------- */


/* GENERAL
------------------------------------------- */
html, body { height:100%; }
html { overflow-y: scroll; }
body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; line-height: 180%; color: #666; background: #F5F9FC url(../images/background.jpg) center top repeat-x; }
a, a:visited {  color: #3391B3; text-decoration: none; border-bottom:1px solid #3391B3; }
a:hover, 	a:active { border-bottom:0 none; }
p { margin: 0 0 20px 0; }
#sidebar p { margin: 0 0 10px 0; }
#middle ul {  list-style: disc; margin: 20px 0  20px 30px; padding:0; }
#middle ul li {}
#middle ol { list-style: decimal; margin: 20px 0  20px 30px; padding:0; }
#middle ol li {}
strong, b { font-weight: bold; }
em, i { font-style: italic; }
blockquote,  { margin: 20px 35px; }


/* HEADINGS
------------------------------------------- */
h1 { display: none; }
h2 { font-size: 16px; color: #DE054C; font-weight: bold; margin: 0 0 10px 0; }
	h2 a, h2 a:visited { color: #DE054C; border-bottom: 0; }
	h2 a:hover, h2 a:active { color: #DE054C; border-bottom: 1px solid #DE054C; }
	h2.webwinkel { font-size: 21px; margin: 0 0 20px 0;}
h3 { font-size: 14px; font-weight: bold; color: #000; }


/* HELPERS
------------------------------------------- */

.left { float: left; display: inline; }
.right { float: right; display: inline; }

/*.printme { display: block; position: absolute; top: 10px; right: 20px; border-bottom: 0; background: url(../images/icon_print.png) left top no-repeat; width:32px; height:32px; text-indent: -9999px; }*/
.printme { text-align: right; display: block; position: absolute; top: 10px; right: 20px; border-bottom: 0; background: url(../images/icon_print.png) right top no-repeat; width:100px; padding: 0 32px 0 0; height:32px; line-height: 28px; text-decoration: underline; }
.printblock { display: none; }
img.flow {display: block; }

/* LAYOUT
------------------------------------------- */

.wrapper { min-height:100%; height:auto !important; height:100%; margin: 0 auto -32px; }
.front .wrapper { background: url(../images/flash-back.jpg) left 261px repeat-x; }
.wrap { width: 960px; margin: 0 auto; position: relative; overflow: visible; }
.flash { clear: both; width: 960px; margin: 0 auto; }

#cu3er-container { text-align: center;   }
#cu3er-container a { border-bottom: 0 none;   }
#cu3er-container a img { margin: 50px 0 0 0;   }
 
#header { height: 145px; margin: 0 0 45px 0; }
	#home #header { height: 610px; margin: 0;  background: url(../images/slider-shadow.jpg) center 493px no-repeat; }

#middle { padding: 0 0 88px 0; }

.heading { color: #DE054C; font-size: 28px; line-height: 120%; font-weight: bold; text-align: center; margin: 0 0 45px 0; }

#content { float:left; display: inline; width: 630px; margin: 0 20px 0 0; background: #fff; }
	.nosidebar #content { float:none; display: block; width: 960px; margin: 0; background: transparent; }
	#home #content { width: 610px; margin: 0 50px 0 0; background: transparent; }
	#portfolio .sidebar-right #content { width: 610px; margin: 0 20px 0 0; }
	#over-ons .sidebar-right #content { width: 610px; margin: 0 20px 0 0; }
#content .inner { padding: 30px 20px;}
	.nosidebar #content .inner { padding: 0;}
	#home #content .inner { padding: 20px 10px;}
	#portfolio .sidebar-right #content .inner { padding: 30px 25px;}
	
#sidebar { float:left; display: inline; width: 310px; background: #fff; }
	#home #sidebar { width: 300px; background: transparent; }
	#portfolio .sidebar-right #sidebar { width: 330px; }
	#over-ons .sidebar-right #sidebar { width: 330px; }
#sidebar .inner { padding: 30px 0 17px 0;}
	#home #sidebar .inner { padding: 0;}
	/*#portfolio .sidebar-right #sidebar .inner { padding: 30px 0 17px 0; }
	#over-ons .sidebar-right #sidebar .inner { padding: 30px 0 17px 0; }*/

.bottom { clear: both; width: 960px; overflow: hidden; padding: 50px 0 0 0; }
	#contact .bottom .right { width: 580px; }
	#contact .bottom .right a { border-bottom: 0; }
	#contact .bottom .left { width: 340px; padding: 20px; }

#footer { position: relative; }
#footer .wrap {  color: #fff; border-top: 1px solid #D5DDE2; padding: 3px 0 0 0; }
#footer .wrap .inner { background: #3391B3; height:32px; }
#footer a, #footer a:visited { color: #fff; border-bottom:1px solid #fff; }
#footer a:hover, #footer a:active { color: #fff; border-bottom:0 none; }
#footer p { margin: 0; padding: 0 20px; line-height: 32px; }
#footer .left { width: 400px;}
#footer .right { width: 400px; text-align: right; }

#footer #logoesign { width:100px; height:30px; position: absolute; right: 0; top: 7px; background:url(../images/logoesign.png) left -30px no-repeat; border-bottom: 0; }
#footer a:hover#logoesign, #footer a:active#logoesign  { background:url(../images/logoesign.png) left top no-repeat; border-bottom: 0; }


/* ELEMENTS
------------------------------------------- */

#header #logo { display: block; float:left; /*position: absolute; left:0; top:0;*/ width: 195px; height: 145px; border-bottom: 0; }
#header #logo img { display: block; width: 195px; height: 145px; }

#header .language { float: right; display: none; }
#header .language li { float: left; display: inline; font-size: 12px; font-weight: bold; height: 27px; border-left: 1px solid #DE054C; }
#header .language li.first-child{ border-left: 0; }
#header .language li a { color:#999; float: left; display: inline; border-bottom: 0; padding: 10px 10px 0 10px; line-height: 120%; }
#header .language li a:hover, #header .language li.selected a { float: left; display: inline; color:#DE054C; }

#header .nav { /*clear: both; width: 960px; overflow: hidden; */ float: left; display: inline; width: 765px; background: url(../images/navborder.png) left bottom repeat-x; padding: 81px 0 0 0; margin: 0 0 32px 0; }
.front #header .nav { margin-bottom: 52px; }
#header .nav ul { float: right; display:inline; }
#header .nav ul li { float: left; display: inline; font-size: 18px; font-weight: bold; margin: 0 0 0 10px; text-transform: uppercase; }
#header .nav ul li a { float: left; display: inline; color: 3391B3; border-bottom: 0; line-height: 28px; height: 30px; padding: 1px 10px; background: url(../images/nav-tabs.jpg) left -999px repeat-x; }
#header .nav ul li a:hover {background-color: #fff; background-position: left -30px; border: 1px solid #99C3D1; padding: 0 9px; }
#header .nav ul li.selected a { color: #fff; background-color: #3391B3; background-position: left 0px; border: 1px solid #51A4C2; padding: 0 9px; }

#middle ul.buttons { list-style: none; margin:0; padding:0 0 25px 0; border-bottom: 1px solid #D5DDE2; height: 67px; }
	#middle #sidebar ul.buttons { list-style: none; margin:0 0 0 17px; padding:0; border-bottom: 0; height: 67px; }
#middle ul.buttons li { float: left; display: inline; }
#middle ul.buttons li a { position: relative; float: left; display: inline; background: url(../images/buttons.jpg) left top no-repeat; height:67px; width:295px; text-indent: -9999px; }
.nl #middle ul.buttons li.btn-portfolio a, .nl #middle ul.buttons li.btn-portfolio a:visited { background-position:left top; border-bottom: 0; margin: 0 20px 0 0; }
.nl #middle ul.buttons li.btn-portfolio a:hover { background-position:left -90px; }
.nl #middle ul.buttons li.btn-portfolio a:active { top:1px; background-position:left -90px; }
.nl #middle ul.buttons li.btn-contacteer a, #middle ul.buttons li.btn-contacteer a:visited { background-position:-315px top; border-bottom: 0; }
.nl #middle ul.buttons li.btn-contacteer a:hover { background-position:-315px -90px; }
.nl #middle ul.buttons li.btn-contacteer a:active { top:1px; background-position: -315px -90px; }

.fr #middle ul.buttons li.btn-portfolio a, .fr #middle ul.buttons li.btn-portfolio a:visited { background-position:left -180px; border-bottom: 0; margin: 0 20px 0 0; }
.fr #middle ul.buttons li.btn-portfolio a:hover { background-position:left -270px; }
.fr #middle ul.buttons li.btn-portfolio a:active { top:1px; background-position:left -270px; }
.fr #middle ul.buttons li.btn-contacteer a, .fr #middle ul.buttons li.btn-contacteer a:visited { background-position:-315px -180px; border-bottom: 0; }
.fr #middle ul.buttons li.btn-contacteer a:hover { background-position:-315px -270px; }
.fr #middle ul.buttons li.btn-contacteer a:active { top:1px; background-position: -315px -270px; }

#middle a.contacteer { background: url(../images/buttons.jpg) left top no-repeat; display: block; height: 67px; margin: 0 0 20px 0; }
.nl #middle a.contacteer, .fr #middle a.contacteer:visited { background-position:-315px top; border-bottom: 0; }
.nl #middle a.contacteer:hover { background-position:-315px -90px; }
.nl #middle a.contacteer:active { top:1px; background-position: -315px -90px; }

.fr #middle a.contacteer, .fr #middle a.contacteer:visited { background-position:-315px -180px; border-bottom: 0; }
.fr #middle a.contacteer:hover { background-position:-315px -270pxp; }
.fr #middle a.contacteer:active { top:1px; background-position: -315px -270px; }


/* Tumblr on home */
.post-title { font-size: 16px; color: #DE054C; font-weight: bold; margin: 0 0 10px 0; }
.post-title a  {color: #DE054C; border-bottom: 0 none; }
.post-date, .post-date a { color: #3391B3;  border-bottom: 0 none; }
.post-date { margin: 0 0 10px 0; font-style: italic; }
.post { margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #D5DDE2; line-height: 180%; }
.post p { margin: 0 0 10px 0; }
.post .post-image { display: block; margin: 0 auto; }
.post .more { display: block; clear: both; border-bottom: 0 none; text-decoration: underline; }
.post img[align='left'] { margin: 0 10px 10px 0; float: left; display: inline; }
.post img[align='right'] { margin: 0 0 10px 10px; float: right; display: inline; }

/* sidebar blocks */

.block { margin: 0 0 30px 0; padding: 0 30px; clear: both; }
	.front .block { padding: 0; }
	.front .block h2 { font-size: 18px; }
	.front .block-inner { padding: 0 10px; }
/*#portfolio .block-inner { padding: 0 30px; }
#over-ons .block-inner, #over-ons .block h2 { padding: 0 30px; }*/
.block .more { float: right; clear: both; margin: 0 0 20px 0; line-height: 140%; font-weight: bold; }
.block .more:hover { padding-bottom: 1px;}

.quote, .front .quote { background: #3391B5 url(../images/quote-bottom.png) right bottom no-repeat; text-align: right; color: #fff; padding-left: 0; padding-right: 30px; }
#portfolio .quote { margin: 0 0 17px 0; }
#sidebar .quote p { background: url(../images/quote-top.png) 0 -7px no-repeat; padding: 15px 0px 10px 30px; margin:0; font-size: 14px; line-height: 150%; text-align: left;  }
.quote a, .quote a:visited { color: #A7D1E0; border-bottom: 0 none; clear: both; display: block; text-align: right; padding: 0 0px 20px 0; line-height: 120%; }
.quote a:hover, .quote a:active { color: #fff; }
h3.source { font-size: 12px; color: #A7D1E0; font-weight: normal; }

.front .tweet h2.twitter { font-size: 16px; }
.tweet h2 a {  position: relative; color: #fff; border-bottom: 0; display: block; background: url(../images/titles-social.png) left top no-repeat; height: 50px; line-height: 50px; color: #fff; font-size: 20px; font-weight: normal; padding: 0 0 0 55px; margin: 0 0 10px 0;  }
.tweet h2 a:hover { background-position: left -100px; }
.tweet h2 a:active { top: 1px; background-position: left -100px; }

h2.facebook { margin: 0 0 30px 0; font-size: 16px; }
h2.facebook a {  position: relative; color: #fff; border-bottom: 0; display: block; background: url(../images/titles-social.png) -330px top no-repeat; height: 50px; line-height: 50px; color: #fff; font-size: 20px; font-weight: normal; padding: 0 0 0 55px; margin: 0 0 10px 0;  }
h2.facebook a:hover { background-position: -330px -100px;  }
h2.facebook a:active { top: 1px;  }

/* Tweet */

#middle .tweet, #middle .query { }
#middle .tweet .tweet_list, #middle .query .tweet_list {
    list-style-type: none; margin: 0; padding: 0 10px; font-size: 12px; }
#middle .tweet .tweet_list .awesome, #middle .tweet .tweet_list .epic, #middle .query .tweet_list .awesome, #middle .query .tweet_list .epic {
      text-transform: uppercase;}
#middle .tweet .tweet_list li, #middle .query .tweet_list li {
      overflow-y: auto; overflow-x: hidden; padding: 10px 0 0 0; margin:0 0 10px 0; background: url(../images/tweetborder.png) left top repeat-x; }
#middle .tweet .tweet_list li.tweet_first, #middle .query .tweet_list li.tweet_first {
      padding-top:0; background: none; }
#middle .tweet .tweet_list li a, #middle .query .tweet_list li a {
        color: #DE054C; border-bottom: 0 none; font-weight: bold; }
#middle .tweet .tweet_list li .tweet_time, #middle .query .tweet_list li .tweet_time {
        display: none; }
#middle .tweet .tweet_list li .tweet_join, #middle .query .tweet_list li .tweet_join {
        display: none; }


/* About */

#middle ul.about { list-style: none; margin: 0 0 40px 0; overflow: hidden; width:570px;}
#middle ul.about li { float: left; display: inline; width: 285px; position: relative; }
#middle ul.about li.clearfloat { display: block; float: none; width:auto; clear: both; }
#middle ul.about li h3, #middle ul.about li p  { padding: 0 20px 0 55px; }
#middle ul.about li img { position: absolute; left:0; top:0; }

.front .block-about h2 { margin: 0 0 20px 0; }
.front #middle ul.about li { float: none; display: block; width: 300px; }
.front #middle ul.about li h3, #middle ul.about li p  { padding: 0 0 0 55px; }

/* Portfolio */

#middle .breadcrumbs { height: 46px; line-height: 46px; background:url(../images/breadcrumbs-back.png) left top no-repeat; margin: 0 0 0 -2px; width: 970px; }
#middle .breadcrumbs h3 { margin: 0; display: inline; padding: 0 0 0 20px; font-weight: normal; color: #DE054C; font-weight: 12px; }
#middle .breadcrumbs ul {display: inline; margin: 0; padding: 0 20px 0 0; list-style: none; }
#middle .breadcrumbs ul li { margin: 0; padding:0; display: inline; color: #3391B3; }
#middle .breadcrumbs ul li a, .breadcrumbs ul li a:visited {  }
#middle .breadcrumbs ul li a:hover, .breadcrumbs ul li a:active { }
#middle .breadcrumbs ul li.selected a { font-weight: bold; }

a.back { position: absolute; top: -30px; right: 0; line-height: 16px; cursor: pointer; z-index: 9; }

#portfolio #content h2 a { color: #3391B5; }
#portfolio #content h2 a:hover { color: #DE054C; border-bottom: 0px none; }
#middle .imagelink { display: block; /*border: 7px solid #3391B5;*/ margin: 0 0 20px 0; }
/*#middle a.imagelink:hover { border: 7px solid #DE054C; }*/
#middle .imagelink img  { display: block; }

#middle .block-portfolio ul { font-size: 14px; border-top: 1px solid #D5DDE2; padding: 15px 0 0 0; margin: 20px 0 0 0; list-style: none; }

#sidebar .external { position: relative; font-size: 14px; background: url(../images/icons.png) -26px -27px no-repeat; display: block; height: 26px; line-height: 26px; padding: 0 0 0 30px; border-bottom: 0 none; }
#sidebar .external:hover { color: #DE054C; }
#sidebar .external:active { top: 1px; }

#portfolio #middle ul.portfolio-items { margin: 0; padding: 30px 0 0 0; list-style: none; width: 960px; overflow: hidden; }
#portfolio #middle ul.portfolio-items li { float: left; display: inline; width: 320px; border-bottom: 0; padding: 20px 0; }
#portfolio #middle ul.portfolio-items li.hover { background: #fff; /*cursor: hand; cursor: pointer;*/ }
#portfolio #middle ul.portfolio-items li img { display: block; border: 5px solid #3391B3; margin: 0 20px 10px 20px; }
#portfolio #middle ul.portfolio-items li div, #middle ul.portfolio-items li h2 { margin: 0 25px; }
#portfolio #middle ul.portfolio-items li h2 a { color: #DE054C; border-bottom: 0 none; }
#portfolio #middle ul.portfolio-items li.hover h2 a { color: #3391B3; border-bottom: 0 none; }
#portfolio #middle ul.portfolio-items li .imagelink { border: 0 none; }
#portfolio #middle ul.portfolio-items li .category a { color: #3391B3; border-bottom: 0 none; }
#portfolio #middle ul.portfolio-items li .category a:hover { color: #3391B3; border-bottom: 1px solid #3391B3; }

/* Contact blocks */

#middle ul.connect { list-style: none; margin: 0 0 20px 0; }
#middle ul.connect li{ background: url(../images/icons.png) 0 0 no-repeat; display: block; padding: 0 0 0 30px; }
#middle ul.connect li.linkedin { background-position: 0 0; }
#middle ul.connect li a {  }

/* switch forms */

#middle .contact-offerte { display: none; } /* needs to be hidden in order to click open later */

#middle ul.switch { margin: 0; list-style: none; background: transparent url(../images/navborder.png) repeat-x scroll left bottom; height: 42px; margin: 0 0 20px 0;  }
#middle ul.switch li { float: left; display: inline; width: 315px; }
#middle ul.switch li.hover  {  background-color: #D5DDE2; }
#middle ul.switch li.selected  {  background-color: #3391B4; }
#middle ul.switch li h2 { color: #3391B4; font-size: 14px; font-weight: normal; cursor: hand; cursor: pointer; line-height: 42px; height: 42px; padding: 0 0 0 20px; margin:0; }
#middle ul.switch li.hover h2 { color: #3391B4; }
#middle ul.switch li.selected h2 { color: #fff; }

.contact-algemeen, .contact-offerte { clear: both; }

#middle form { border-top:1px solid #D5DDE2; padding: 20px 0 0 0; }

.form-text, textarea, select { font-family: Georgia, "Times New Roman", Times, serif; color: #333; font-size: 12px;} 
.form .form-text, .form textarea { border: 1px solid #D5DDE2; padding: 5px; background: none; }
.form .form-text:focus, .form textarea:focus {  background: #efefef; }
.form textarea { display: block; width: 570px; height: 100px; }

.form  .form-item { width: 295px; float: left; display: inline;  margin: 0 0 15px 0; position: relative }
.form  .form-row { width: 590px; float: none; display: block; clear: both; }
.form label { display: block; }
.form .form-text { display: block; width: 270px; padding: 9px 5px; }
.form .form-submit {  font-size: 12px; position: relative; background: #3391B4 url(../images/nav-tabs.jpg) left top repeat-x; text-transform: uppercase; border: 1px solid #51A4C2; padding: 5px 20px; color: #fff; cursor: hand; cursor: pointer; }
.form .form-submit:hover { background-color: #d5dde2; background-position: left -30px; color: #3391B4; border: 1px solid #51A4C2; }
.form .form-submit:active { top: 1px; }
.form input.invalid { border: 1px solid #DE054C;}
span.invalid { position: absolute; right: 10px; bottom: -18px;color: #DE054C; font-style: italic; }
.required { color: #DE054C; font-style: italic; margin: 20px 0; }
label span { color: #DE054C; font-style: italic; }


/* Browser Fixes
-------------------------------------------------------------- */
.clearfloat { display: block; clear: both; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix {height: 1%; }