﻿@font-face {
    font-family: 'DroidSansRegular';
    src: url('/lib/font/DroidSans-webfont.eot');
    src: url('/lib/font/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('/lib/font/DroidSans-webfont.woff') format('woff'),
         url('/lib/font/DroidSans-webfont.ttf') format('truetype'),
         url('/lib/font/DroidSans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DroidSansBold';
    src: url('/lib/font/DroidSans-Bold-webfont.eot');
    src: url('/lib/font/DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/lib/font/DroidSans-Bold-webfont.woff') format('woff'),
         url('/lib/font/DroidSans-Bold-webfont.ttf') format('truetype'),
         url('/lib/font/DroidSans-Bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

body { background: url(/lib/images/bg_body.jpg) repeat-x; font-family: 'DroidSansRegular', sans-serif; font-size: 13px; line-height: normal;}

#flash { height: 330px; width: 976px;}
#header { width: 978px; height: 130px; margin: 0 auto;}
#logo { float: left; margin: 17px 0 15px 0;}

#utils { float: right; text-transform: uppercase; font-size: 11px; margin: 30px 10px 0 0;}
#utils li { float: left; border-left: 1px solid #000; padding: 0 5px 0 5px;}
#utils li.first { border: 0;}
#utils li a { color: #000; text-decoration: none;}

#zoek { float: right; margin: 25px 0 0 0;}
#zoek .frmRow { float: left;}
#zoek input.box { border: 0; background: url(/lib/images/input_zoek.png) no-repeat; height: 27px; padding: 0 0 0 25px; width: 146px;}
#zoek .submit { height: 27px; width: 60px; background: url(/lib/images/btn_zoek.png) no-repeat; padding: 0; color: #fff; font-size: 9px; font-weight: bold; text-transform: uppercase; border: 0;}

#nav { background: url(/lib/images/bg_nav.png) no-repeat; height: 40px; width: 978px; margin: 0; padding: 0 0 0 1px; list-style: none; clear: both; text-transform: uppercase;}
#nav a { display: block; width: auto; color: #fff;}
#nav li { float: left; width: auto; border-right: 1px solid #6e6e6e; border-left: 1px solid #1b1b1b;}
#nav li.first { border-left: 0;}
#nav li.last { border-right: 0;}
#nav li a { padding: 9px 16px 0 16px; height: 22px;}
#nav li a:hover { background: url(/lib/images/nav_hover.png); }
#nav li .ul_wrapper { position: absolute; width: 266px; left: -999em; z-index: 1000;}
#nav li:hover .ul_wrapper { left: auto; width: 266px;}
#nav li:hover .ul_wrapper .variabel { position: relative; z-index: 100; background: url(/lib/images/variabel.png); height: 15px; border-right: 1px solid #a9a9a9;}
#nav li:hover .ul_wrapper ul { position: relative; z-index: 10; background: url(/lib/images/ul_wrapper.png) no-repeat; overflow: hidden; border-bottom: 1px solid #a9a9a9; -moz-border-radius: 3px; border-radius: 3px; padding: 15px 0 20px 0; margin: -1px 0 0 0;}
#nav li ul li { border: 0;}
#nav li ul li a { font-size: 13px !important; font-family: 'DroidSansRegular'; color: #212121; width: 212px; height: auto; display: block; border-bottom: 1px dotted #909090; margin: 0 0 0 14px; padding: 7px 20px 5px 5px; line-height: 20px;}
#nav li ul li a:hover { background: #ca2027 url(/lib/images/pijl_sub.png) no-repeat right 4px; color: #fff;}

#wrapper_content { width: 100%; background: url(/lib/images/bg_bottom.png) repeat-x bottom; overflow: hidden;}
#content { width: 978px;  margin: 0 auto;}

#cloud { text-align: center; background: url(/lib/images/bg_cloud.png) repeat-y; width: 898px; padding: 17px 40px 17px 40px; font-size: 15px; -moz-border-radius: 3px; border-radius: 3px;}
#cloud li { display: inline;}
#cloud li a { text-decoration: none;}
#cloud li a:hover { text-decoration: underline;}
#cloud .odd { color: #fff; }
#cloud .even { color: #f0b267; }
#cloud .prio2 { font-size: 20px; }
#cloud .prio1 { font-size: 26px; }
#teasers {width: 1005px; }
#teasers .shadow { background: url(/lib/images/item_shadow.png) no-repeat bottom left; width: 307px; height: 397px; margin: 20px 28px 30px 0; float: left;}
#teasers .last { margin: 20px 0 30px 0;}
#teasers .item { position: relative; width: 305px; height: 317px;  border: 1px solid #aaaaaa; -moz-border-radius: 4px; border-radius: 4px; background: url(/lib/images/bg_item.png) bottom left;}
#teasers .item h2 { color: #b9291f; font-size: 16px; width: 275px; position: absolute; top: 130px; left: 15px; z-index: 100;}
#teasers .item .text { color: #3f3f3f; position: absolute; width: 275px; height: 50px; top: 185px; left: 15px;}
#teasers .item .image { position: absolute; top: 0; left: 0; width: 305px; height: 152px; overflow: hidden;}
#teasers .item .image img { position: relative; z-index: 10; width: 305px; height: 152px; -moz-border-radius: 4px; border-radius: 4px;}
#teasers .item .overlay { display: block; height: 126px; width: 305px; background: url(/lib/images/item_overlay.png) no-repeat; position: absolute; top: 26px; left: 0; z-index: 100;}
#teasers .item span.lijn { position: absolute; top: 269px; left: 15px; border-top: 1px dotted #909090; width: 275px; height: 1px; display: block;}
#teasers .item .lees { position: absolute; top: 284px; left: 15px; height: 23px; line-height: 23px; padding: 0 6px 0 0; background: url(/lib/images/btn_right.png) no-repeat top right; display: block; float: left; color: #fff;}
#teasers .item .lees span { background: url(/lib/images/btn_left.png) no-repeat; display: block; white-space: nowrap; padding: 0 0 0 6px;}

.content #teasers .shadow { height: 297px;}
.content #teasers .item { height: 217px;}
.content #teasers .item h3 { top: 30px;}
.content #teasers .item .text { top: 85px;}
.content #teasers .item span.lijn { top: 169px;}
.content #teasers .item .lees { top: 184px;}

#footer { position: relative; width: 978px; margin: 0 auto; clear: both; font-family: Verdana; font-size: 11px; padding: 20px 0 30px 0;}
#footer a { color: #000; text-decoration: underline;}
#footer .social { position: absolute; top: 16px; right: 0;}
#footer .social li { float: left;}
#footer .social li a { display: block; width: 24px; height: 24px; text-indent: -9999px; margin: 0 0 0 5px;}
#footer .social li.linkedin a { background: url(/lib/images/ico_linkedin.png);}
#footer .social li.twitter a { background: url(/lib/images/ico_twitter.png);}
#footer .social li.youtube a { background: url(/lib/images/ico_youtube.png);}

#breadcrumbs { margin: 15px 0 30px 0; text-transform: uppercase; width: 978px; font-size: 12px; float: left;}
#breadcrumbs li { float: left; background: url(/lib/images/breadcrumb.png) no-repeat top right; padding: 0 10px 0 5px;}
#breadcrumbs li.first { padding: 0 10px 0 0;}
#breadcrumbs li.last { border: 0; background: none;}
#breadcrumbs li a { color: #373737;}

h1 { font-size: 25px; font-weight: normal; text-transform: uppercase; margin: 0 0 20px 0; padding: 0;}

.paragraph { margin: 0 0 20px 0; font-size: 14px; overflow: hidden;}
.paragraph h2 { color: #323232; margin: 0 0 10px 0; padding: 0; font-family: 'DroidSansRegular';}
.paragraph strong { color: #b91c16; font-weight: normal;}
.paragraph a { text-decoration: underline; color: #b9291f;}
.paragraph img { -moz-border-radius: 5px; border-radius: 5px;}
.paragraph .medialeft { float: left; margin: 10px 15px 10px 0;}
.paragraph .mediaright { float: right; margin: 10px 0 10px 15px;}
.paragraph .text { line-height: 20px;}
.paragraph .text a {color: #b91c16; text-decoration: none;text-decoration: underline}
.paragraph ul { margin: 0; padding: 0;}
.paragraph .text { line-height: 20px; }
.paragraph ul { margin: 0; padding: 0; }
.paragraph ul li { padding: 0; margin: 0;}

.imagedescription { color: #b91c16; font-size: 11px; font-style: italic; margin: 5px 0 0 0;}

#submenu { float: left; border-top: 1px dotted #909090; width: 222px; min-height: 300px; margin: 0 30px 0 0; overflow: hidden;}
#submenu ul { margin: 30px 0 0 0; border-bottom: 1px dotted #909090;}
#submenu li { border-top: 1px dotted #909090;}
#submenu a { color: #1e1e1e; padding: 5px 0 5px 5px; display: block; font-size: 14px;}
#submenu a:hover { color: #b9291f;}
#submenu a.active { color: #b9291f;}
#submenu ul ul { background: #B91C16; margin: 0; border: 0; font-size: 11px;}
#submenu ul ul a {color:#FFF; padding: 5px 0 5px 15px; font-size:13px;}
#submenu ul ul a:hover,
#submenu ul ul a.active { color: #fff !important; text-decoration: underline; }

#header_afbeelding { margin: 0 0 20px 0; overflow: hidden; float: left;}
#header_afbeelding img { width: 726px; height: 168px; -moz-border-radius: 5px; border-radius: 5px;}

/*CONTENT 2 kolom*/
#kolom_1 { float: left; width: 348px; margin: 0 30px 0 0; padding: 0 0 14px 0; float: left;}
#kolom_2 { float: left; width: 348px;}

.divider_1 { width: 726px; height: 1px; border-top: 1px dotted #909090; display: block; margin: 0 0 20px 0; float: left;}
.divider_2 { width: 978px; height: 1px; border-top: 1px dotted #909090; display: block; margin: 35px 0 20px 0; clear: both; float: left;}

/*CONTENT 1 kolom*/
.content #kolom_1 { float: left; width: 726px; margin: 0; padding: 0 0 14px 0;}
.content #kolom_1 .paragraph .media { float: left; margin: 0 15px 10px 0; overflow: hidden;}
.content #kolom_1 .paragraph .media img { max-width: 350px;}

/*TEAM*/
.team #kolom_1 { width: 726px; border-bottom: 1px dotted #909090; border-top: 1px dotted #909090; margin-bottom: 30px;}
.team #kolom_2 { width: 222px; border-bottom: 1px dotted #909090; border-top: 1px dotted #909090; padding-top:10px}
.team #kolom_1 .kol_1 { width: 222px; margin: 14px 30px 14px 0; float: left;}
.team #kolom_1 .kol_1 img { border: 1px solid #dcdddd; -moz-border-radius: 10px; border-radius: 10px;}
.team #kolom_1 .kol_2 { width: 474px; margin: 14px 0 14px 0; float: left;}

.team .paragraph { margin: 0 0 20px 0;}

#teamleden { margin: 14px 0; padding: 0 27px; overflow: hidden;}
#teamleden li { float: left; margin: 0 27px 27px 0;}
/*#teamleden li.derde { margin-right: 0; }*/
#teamleden li img { border: 1px solid #dcdddd; -moz-border-radius: 10px; border-radius: 10px;}

.team .social span { font-size: 14px; margin: 15px 0 10px 0; width: 222px; float: left;}
.team .social li { float: left;}
.team .social li a { display: block; width: 24px; height: 24px; text-indent: -9999px; margin: 10px 5px 0 0;}
.team .social li.linkedin a { background: url(/lib/images/ico_linkedin.png);}
.team .social li.twitter a { background: url(/lib/images/ico_twitter.png);}
.team .social li.wordpress a { background: url(/lib/images/ico_wordpress.png);}
.team .social li.youtube a { background: url(/lib/images/ico_youtube.png);}

/*REFERENTIES */
.referenties #kolom_1 { width: 978px;}
.referenties #kolom_1 .item { margin: 20px 28px 0 0; float: left;}
.referenties #kolom_1 .shadow { margin: 0 28px 0 0; float: left; height: 417px;}
.referenties #kolom_1 .last { margin: 0 0 0 0; float: left;}
.referenties #kolom_1 .last .item { margin: 20px 0 30px 0; float: left;}
.plaatje {position:relative; width:138px; height:74px; border: 1px solid #AAAAAA; border-radius: 4px 4px 4px 4px; background: url("/lib/images/bg_item.png") repeat scroll left bottom transparent;}
.plaatje img{width:125px; padding:10px 5px;}

/*REFERENTIES TOOLTIP*/
.ttip {display:none; position:absolute; bottom:50px; left:-50px; width:197px;}
.ttip_top {background:url(/lib/images/tooltip_top.png); height:10px; display:block;}
.ttip_center { background:#b3281e; color:#FFF; padding:0 5px 0 5px;}
.ttip_bottom {background:url(/lib/images/tooltip_bottom.png); height:44px; display:block;}


/*BLOG OVERZICHT*/
#blogitems li { margin: 0 0 20px 0;}
#blogitems a.title { color: #b91c16; text-transform: uppercase;font-weight:bold;}
#blogitems p.datum { font-size: 11px; margin: 5px 0 5px 0;}
#blogitems p{ line-height: 16px;}
#blogitems a.leesmeer { color: #b91c16; display: block; margin-top:5px;}

/*BLOG DETAIL*/
.blog h1 { margin: 0 0 10px 0; }
.blog .reacties { color: #b91c16; margin-bottom:7px; font-weight:bold;}
.blog .blogpara img { max-width: 350px; float: left; margin: 0 20px 20px 0;}

.blog_achterlaten { padding: 15px; width: 410px; background: url(/lib/images/bg_blog_reactie.png) no-repeat; margin: 20px 0 0 0;}
.blog_achterlaten h3 { text-transform: uppercase; color: #fff; font-weight: normal; margin: 0 0 20px 0;}
.blog_achterlaten .row { clear: both; float: left; margin: 0 0 10px 0; width: 500px;}
.blog_achterlaten .row2 { clear: both; float: left; margin: 0 0 10px 0; width:500px;}
.blog_achterlaten label { float: left; width: 100px; text-transform: uppercase; font-size: 11px;}
.blog_achterlaten .text { float: left; width: 280px;}
.blog_achterlaten textarea { float: left; width: 280px; height: 50px;}
.blog_achterlaten .submit { background: url(/lib/images/btn_left.png); border: 0; color: #fff; height: 23px; float: left; padding: 0 10 0 6px; font-size: 11px; text-transform: uppercase;}
.blog_achterlaten .btn_right { background: url(/lib/images/btn_right.png); border: 0; color: #fff; height: 23px; width: 6px;float:left; margin-left:-4px;}

/*NIEUWSOVERZICHT*/
#nieuwsoverzicht {}
#nieuwsoverzicht li { clear: both; float: left; width: 726px; margin: 0 30px 20px 0;}
#nieuwsoverzicht .image { width: 200px; margin: 0 15px 0 0; overflow: hidden; float: left;}
#nieuwsoverzicht .image img { width: 200px; }
#nieuwsoverzicht .info { float: left; margin: 0 0 0 20px; width: 490px;}
#nieuwsoverzicht .titel { color: #b91c16; text-transform: uppercase; float: left; margin: 0 0 5px 0; font-weight:bold}
#nieuwsoverzicht .datum { font-size: 11px; clear: both; float: left; margin: 0 0 10px 0;width: 450px;}
#nieuwsoverzicht .teaser { clear: both; float: left; margin: 0 0 10px 0; width: 450px;}
#nieuwsoverzicht .leesmeer { clear: both; float: left; color: #b91c16;width: 450px;}

.nieuwsdetail h1 { margin: 0 0 10px 0;}
.nieuwsdetail .datum { font-size: 11px; margin: 0 0 15px 0;}
.nieuwsdetail .image_detail { margin: 0 0 15px 0;}
.nieuwsdetail .image { margin: 0 0 15px 0;}
.nieuwsdetail .image_detail img { max-width: 726px;}
.nieuwsdetail .image img { max-width: 726px;}
.nieuwsdetail .back { color: #b91c16; margin: 10px 0 0 0; clear: both; float: left; font-weight:bold}

/*CONTACT*/
.contactFrm { padding: 15px; width: 430px; background: url(/lib/images/bg_contact.png) no-repeat; margin: 20px 0 0 0;}
.contactFrm .row { clear: both; float: left; margin: 0 0 8px 0; position: relative; width: 430px;}
.contactFrm .row2 { clear: both; float: left; margin: 0 0 10px 0; position: relative; width: 430px;}
.contactFrm label { float: left; width: 120px; padding: 5px 0 0 0; text-transform: uppercase; font-size: 11px; color: #f0b267;}
.contactFrm .text { float: left; width: 300px;}
.contactFrm textarea { float: left; width: 300px; height: 50px;}
.contactFrm .submit { background: url(/lib/images/btn_left.png); border: 0; color: #fff; height: 23px; float: left; padding: 0 0 0 6px; font-size: 10px; text-transform: uppercase;}
.contactFrm .btn_right { background: url(/lib/images/btn_right.png); border: 0; color: #fff; height: 23px; width: 6px; float: left;}
.contactFrm label.error { position: absolute; top: 0; right: 5px; text-transform: lowercase; color: red;}

/* HOMEPAGE FLASH */
#homepageSlideshow {position: relative;padding-top: 30px; background: url(/lib/images/homepage_slideshow_bg.png) no-repeat 230px 3px; height: 300px}
#homepageSlideshow #corporateInfo {width: 430px; float:left;border-bottom: 1px dotted #000000; height: 283px;} 
#homepageSlideshow #corporateInfo h1 {color:#b9291f;} 
#homepageSlideshow #corporateInfo p {line-height: 16px;width:230px} 

#homepageSlideshow #factories {float:right; width: 239px; display:block;}
#homepageSlideshow #corporateInfo .lees { position: absolute; top: 274px; left: 0px; height: 23px; line-height: 23px; padding: 0 6px 0 0; background: url(/lib/images/btn_rood_right.png) no-repeat top right; display: block; float: left; color: #fff;}
#homepageSlideshow #corporateInfo .lees span { background: url(/lib/images/btn_rood_left.png) no-repeat; display: block; white-space: nowrap; padding: 0 0 0 6px;}

#homepageSlideshow ul li {height: 80px; background: url(/lib/images/homepage_factorie_list_bg.png) no-repeat top right; padding-top:25px;width:210px; text-align:right; padding-right:30px;}
#homepageSlideshow ul li.technology {height: 96px;}
#homepageSlideshow ul li.improvement {height: 96px;}

#homepageSlideshow ul li a {font-size: 18px; font-weight: normal; text-transform: uppercase; color: #000000;}
#homepageSlideshow ul li a:hover {color:#b9291f;}

/* Zoekresultaten */
.zoekresultaten ul {margin-top: 20px;}
.zoekresultaten li {margin-bottom: 20px;}
.zoekresultaten .intro {color:#b9291f; font-style:italic}
.zoekresultaten .title a {color: #000000; font-size:15px; font-weight: bold;}
.zoekresultaten p {color:000000; line-height:20px;}
.zoekresultaten .path {color:#b9291f;line-height:25px;}
.zoekresultaten .path a {color:#b9291f;}
.direct_hit {margin-top:30px;}

.paging li { float:left; margin-bottom: 0; margin-right: 5px; min-width: 15px;}
.paging li a {background-color: #000000; display:block; text-align:center; color: #ffffff; padding:3px;}
.paging li a.active {font-weight:bold;background-color: #b9291f;}

/*FACTORY*/
.factory #teasers { clear: both;}

.information_fac { background: url(/lib/images/information_factory.png) no-repeat; width: 302px; height: 282px; color: #fff; font-size: 13px; padding: 235px 0 0 24px;}
.improvement_fac { background: url(/lib/images/improvement_factory.png) no-repeat; width: 302px; height: 282px; color: #fff; font-size: 13px; padding: 235px 0 0 24px;}
.technology_fac { background: url(/lib/images/technology_factory.png) no-repeat; width: 302px; height: 282px; color: #fff; font-size: 13px; padding: 235px 0 0 24px;}

.factories p { width: 254px; border-bottom: 1px dotted #fff; padding: 0 0 15px 0; margin: 0 0 15px 0; line-height: 16px;}
.factories ul li { height: 16px; background: url(/lib/images/bolletje.png) no-repeat top left; padding: 2px 0 0 25px; margin: 0 0 10px 0;}
.factories ul li a { color: #fff;}
.factories ul li a:hover { text-decoration: underline;}
.factories h4 { color: #f0b267; font-weight: normal; text-transform: uppercase; margin: 0 0 15px 0; font-size: 15px;}

