/* =| ALGEMEEN |================================ */ * { margin: 0; } html, body { height: 100%; background: #fff; font: 14px/20px Arial; color: #444; } #outer { position: relative; width: 100%; clear: both; overflow: visible; margin: 0 auto; z-index: 2; } #base { position: relative; width: 100%; clear: both; display: block; float: left; } #container { position: relative; width: 100%; clear: both; display: block; float: left; padding: 0; } #mid { position: relative; width: 1200px; margin: 0 auto; clear: both; display: block; } #mid2 { position: relative; width: 1200px; margin: 0 auto; clear: both; display: block; } #midwrap { position: relative; width: 100%; clear: both; display: block; float: left; margin: 0; background: #fff; z-index: 1; min-height: 670px; } @media screen and (max-width: 480px){ #midwrap { min-height: 0px; height: auto !important; } #container { height: auto !important; } } #topbox { position: relative; width: 100%; height: 75px; float: left; display: block; clear: both; z-index: 3; margin-bottom: 25px; } #topbox-content { position: relative; width: 1200px; height: auto; margin: 0 auto; display: block; padding: 0; overflow: visible; margin-top: 10px; } #logo { position: absolute; left: 0; top: 15px; clear: both; width: auto; height: auto; margin: 0; display: block; } #logo { -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; } #logo.up { top: 5px; } #logo a { position: relative; display: block; float: left; color: #000; text-decoration: none; line-height: normal; } #logo #logo-default { position: relative; float: left; } #logo .logo-img { position: relative; float: left; margin-right: 15px; } #logo .logo-title { position: relative; float: left; font-size: 24px; line-height: 24px; padding-top: 5px; } a.showHandOnHover:hover { cursor: pointer; } #navbox.locked #logo { } #navbox.locked #logo a { } .mpradio, .mpcheckbox { top: 2px; margin-right: 5px; } .mpcheckbox.error { background-color: #F75F5F; border: 1px solid #F75F5F; } .mpcheckboxlabel { display: inline-block; } /* Notices */ div.main #notice { position: relative; float: left; display: block; clear: both; width: 100%; background: #0386BD; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); margin-bottom: 15px; } div.main #notice div { position: relative; float: left; display: block; clear: both; width: 100%; margin: 0; padding: 15px; box-sizing: border-box; } div.main #notice h1 { font-weight: bold; margin: 0; padding: 0; color: #fff !important; text-shadow: 2px 2px 0 rgba(0,0,0,0.2); line-height: normal; } div.main #notice.red { background: #EC5454; } div.main #notice.green { background: #8FC061; } /* Top */ #top { position: absolute; left: 0; top: 0; width: 100%; clear: both; display: block; padding: 0; z-index: 2; background: url(../img/base/darklight.png); } #top #topcontent { position: relative; width: 1200px; margin: 0 auto; display: block; clear: both; overflow: hidden; } #top .languageSelector { position: relative; float: right; padding: 8px 0; } #top .languageSelector a { position: relative; float: left; display: block; text-decoration: none; color: #fff; margin-left: 5px; background: #33afdf; font-size: 12px; font-weight: bold; line-height: 26px; padding: 0px 6px; } #top .languageSelector a.current { color: #00AFED; background: #fff; } #top .languageSelector a { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #top #top-message { position: relative; float: left; display: block; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.05); } #top #top-message p { line-height: 18px; padding: 12px 0; font-size: 12px; } #top #top-message a { text-decoration: none; color: #fff; font-weight: bold; border-bottom: 1px dotted #4db9e3; padding-bottom: 5px; } /* Top FX */ #topfx { position: absolute; top: 0; left: 0; width: 1105px; height: 381px; display: none; background: url(../img/base/topfx2.png) no-repeat left top; margin-left: -300px; } /* Black bar */ #blackbar { position: relative; float: left; display: block; clear: both; width: 100%; background: #131212 url(../img/base/patternbg.png); background-attachment: fixed; min-height: 0 !important; } #blackbar #blackbar-outer { position: relative; float: left; display: block; clear: both; width: 100%; background: url(../img/base/topshadow.png) repeat-x left top; } #blackbar #blackbar-content { position: relative; width: 1200px; margin: 0 auto; display: block; clear: both; overflow: hidden; padding: 25px 0; } #blackbar #blackbar-content h1, #blackbar-content-wrapper h1 { font-size: 36px; font-family: 'Lobster', Georgia; font-weight: normal; letter-spacing: 0; text-shadow: 2px 2px 0 rgba(0,0,0,0.5); color: #fff; line-height: normal; } #blackbar #blackbar-content, #blackbar-content-wrapper { font-size: 18px; font-family: 'Dosis', Arial; font-weight: 200; letter-spacing: 0; text-shadow: 2px 2px 0 rgba(0,0,0,0.5); color: #ccc; line-height: 24px; } #blackbar div.blackbar-content-column { position: relative; float: left; width: 310px; margin: 0; margin-right: 15px; display: block; clear: none; overflow: hidden; padding: 25px 0; } #blackbar div.blackbar-content-column.column3 { margin-right: 0; } div.blackbar-content-colbox { position: relative; width: 310px; margin: 0 auto; text-align: center; text-shadow: 2px 2px 0 rgba(0,0,0,0.5); color: #ccc; } div.main div.blackbar-content-colbox a { color: #fff; } #blackbar .block { margin: 0; } div.gotocontactform:hover { cursor: pointer; } /* Gray bar */ #graybar { position: relative; float: left; display: block; clear: both; width: 100%; background: #eee; min-height: 0 !important; padding: 35px 0; } #graybar.addBottomMargin { margin-bottom: 75px; } #graybar #graybar-outer { position: relative; float: left; display: block; clear: both; width: 100%; } #graybar #graybar-content { position: relative; width: 1200px; margin: 0 auto; display: block; clear: both; overflow: hidden; padding: 25px 0; } #graybar-content-column1, #graybar-content-column2, #graybar-content-column3 { position: relative; float: left; display: block; clear: none; width: 310px; margin-right: 15px; } #graybar-content-column3 { margin-right: 0; } div.graybar-column { position: relative; width: 310px; overflow: hidden; float: none; margin: 0 auto; clear: both; display: block; } div.graybar-column { font-size: 14px; line-height: 20px; text-align: center; color: #777; } div.graybar-column h1 { font-size: 24px; color: #444; text-shadow: 1px 1px 0 rgba(255,255,255,0.5); margin-bottom: 5px; margin-top: 5px; } div.graybar-column h1 a { font-weight: normal; color: #444 !important; text-decoration: none; } div.graybar-column a { color: #444 !important; text-decoration: none !important; font-weight: bold; } /* .desktop div.graybar-column a:hover { color: #9ab62b !important; } */ div.graybar-column .addArrow { padding: 3px 0; padding-left: 12px; background: url(../img/base/arrow.png) no-repeat left center; } div.graybar-column .addBg { padding: 3px 10px !important; background: #444; color: #fff !important; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); display: inline-block; font-size: 12px; font-weight: normal; } .desktop div.graybar-column .addBg:hover, .desktop div.graybar-column:hover .addBg { background: #f90; } .desktop div.graybar-column:hover { cursor: pointer; } .desktop #graybar.bottom div.graybar-column:hover { cursor: auto; } div.graybar-column .addBg { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } div.graybar-column div.block { margin: 0; } /* mpAlerts */ div.mpAlerts { position: relative; float: left; width: 100%; height: auto; min-height: 0; clear: both; display: block; margin-bottom: 15px; } /* mp2Column */ div.mp2Column { position: relative; float: left; width: 100%; height: auto; min-height: 0; clear: both; display: block; margin-bottom: 15px; } div.mp2Column .mp2Column1 { position: relative; float: left; width: 462px; height: auto; min-height: 0; clear: none; display: block; margin-right: 16px; padding-right: 10px; } div.mp2Column .mp2Column2 { position: relative; float: left; width: 462px; height: auto; min-height: 0; clear: none; display: block; padding-left: 10px; } /* mp2ColumnUneven */ div.mp2ColumnUneven { position: relative; float: left; width: 100%; height: auto; min-height: 0; clear: both; display: block; margin-bottom: 15px; } div.mp2ColumnUneven .mp2ColumnUneven1 { position: relative; float: left; width: 624px; height: auto; min-height: 0; clear: none; display: block; margin-right: 26px; } div.mp2ColumnUneven .mp2ColumnUneven2 { position: relative; float: left; width: 310px; height: auto; min-height: 0; clear: none; display: block; } /* mp2ColumnUneven */ div.mp2ColumnUnevenBottom { position: relative; float: left; width: 100%; height: auto; min-height: 0; clear: both; display: block; margin-bottom: 15px; margin-top: 50px; } div.mp2ColumnUnevenBottom .mp2ColumnUnevenBottom1 { position: relative; float: left; width: 624px; height: auto; min-height: 0; clear: none; display: block; } div.mp2ColumnUnevenBottom .mp2ColumnUnevenBottom2 { position: relative; float: left; width: 310px; height: auto; min-height: 0; clear: none; display: block; margin-right: 26px; } /* mpColumnFull */ div.mpColumnFull { position: relative; float: left; width: 100%; height: auto; min-height: 0; clear: both; display: block; margin-bottom: 15px; } /* mpColumnFull2 */ div.mpColumnFull2 { position: relative; float: left; width: 100%; height: auto; min-height: 0; clear: both; display: block; margin-bottom: 15px; } /* mpColumnFull3 */ div.mpColumnFull3 { position: relative; float: left; width: 100%; height: auto; min-height: 0; clear: both; display: block; margin-bottom: 15px; } /* mp3ColumnFloat */ div.mp3ColumnFloat { position: relative; float: left; width: 100%; height: auto; min-height: 0; clear: both; display: block; margin-bottom: 15px; } div.mp3ColumnFloat .mp3ColumnFloat1 { position: relative; float: left; width: 310px; height: auto; min-height: 0; clear: none; display: block; margin-right: 15px; } div.mp3ColumnFloat .mp3ColumnFloat2 { position: relative; float: left; width: 310px; height: auto; min-height: 0; clear: none; display: block; margin-right: 15px; } div.mp3ColumnFloat .mp3ColumnFloat3 { position: relative; float: left; width: 310px; height: auto; min-height: 0; clear: none; display: block; } /* Admin */ #outer:hover div.contentbox-controls { display: block; } div.main .contentRight div.contentbox-controls { float: left; display: none; clear: both; width: auto; padding: 5px 5px; border: 1px solid #ccc; box-shadow: 0 0 5px rgba(0,0,0,0.2); margin-bottom: 15px; background: #fff; } div.main .contentRight div.contentbox-controls { position: absolute; top: 0; left: 0; z-index: 9; box-shadow: 0 0 7px rgba(0,0,0,0.4); } div.main .contentRight div.contentbox-controls .mp-cms-edit-block { position: relative; float: left; clear: none; left: 0; top: 0; margin: 0; } #outer:hover .contentLeft ul.contentwrap, #outer:hover .contentRight ul.contentwrap { } div.editting:hover div.mp2Column1, div.editting:hover div.mp2Column2, div.editting:hover div.mp2ColumnUneven1, div.editting:hover div.mp2ColumnUneven2, div.editting:hover div.mp2ColumnUnevenBottom1, div.editting:hover div.mp2ColumnUnevenBottom2, div.editting:hover div.mpColumnFull, div.editting:hover div.mpColumnFull2, div.editting:hover div.mpColumnFull3, div.editting:hover div.mp3ColumnFloat1, div.editting:hover div.mp3ColumnFloat2, div.editting:hover div.mp3ColumnFloat3 { background: #f5f5f5; } /* Header */ #header { position: relative; width: 100%; float: left; clear: both; margin: 0; overflow: hidden; z-index: 1; border-top: 7px solid #fedf16; } #header .logo { position: absolute; width: 250px; height: 308px; float: none; margin: 0; top: 0; left: 0; z-index: 3; } #header .logo img { border: none; } #header .logo a { display: block; height: 100%; } #header .header_top { position: relative; float: left; clear: both; display: block; width: 1200px; background: #fff; } #header #header_img { position: relative; float: left; width: 100%; height: 100%; z-index: 1; } #header .header_bottom { position: relative; float: left; width: 100%; display: block; clear: both; } #header #headercontent { position: relative; width: 100%; height: 350px; margin: 0 auto; clear: both; display: block; z-index: 2; background: #f0f0f0; max-width: 1920px; box-shadow: 0 0 100px rgba(0,0,0,0.25); } #header #headershadow { position: relative; float: left; width: 100%; display: block; clear: both; height: 27px; } #header #headershadow img { width: 100%; min-width: 100%; max-width: 100%; height: 25px; max-height: 25px; min-height: 25px; } #header #header_img .bnr_message { display: none; position: absolute; bottom: 10px; left: 10px; padding: 15px; z-index: 997; background: #000; background: rgba(0,0,0,0.85); } #header #header_img .bnr_message h1 { display: none; font-size: 22px; line-height: normal; color: #fff !important; letter-spacing: -1px; margin: 0; padding: 0; } #header #header_img .bnr_message div { display: none; } #header #header_img .bnr_message div p { font-size: 12px; line-height: 18px; color: #fff; letter-spacing: 0; margin: 0; padding: 0; margin-top: 10px; } #header #header_img .bnr_message.notitle p { margin-top: 0; } #header #header_img.hasImgs { background: url(../img/base/loader.gif) no-repeat center center; } #header .bnr_display { position: relative; float: left; width: 100%; clear: both; display: block; height: 100%; z-index: 1; } #header .bnr_display ul { position: relative; float: left; width: 100%; height: 100%; overflow: hidden; z-index: 1; display: none; margin-bottom: 0px;} #header .bnr_display li { position: relative; float: left; width: 100%; height: 100%; overflow: hidden; } #header .bnr_tools { position: absolute; z-index: 999; left: auto; right: 0; bottom: 0; top: auto; display: none; } #header .bnr_shadow { position: absolute; left: 0; bottom: 0; width: 100%; height: 8px; z-index: 333; } @media screen and (max-width: 1250px){ #header #headercontent, #header .bnr_display { height: 300px; float: none; display: block; max-width: 1200px; margin: 0 auto; } } #header-shadow { position: relative; width: 1200px; float: none; clear: both; margin: 0 auto; overflow: hidden; z-index: 1; display: none; } #header-shadow img { position: relative; width: 100%; height: 28px; } .nopointerevents { pointer-events: none; } #header div.imageblock_fade_bullets { bottom: 15px; z-index: 2; } #header div.imageblock_fade_bullets ins { background: url(../img/base/bullets.png) no-repeat left top; } #header div.imageblock_fade_bullets .active ins { background-position: -10px top; } #header #headertools { position: absolute; left: 0; bottom: 0; background: #000; background: rgba(0,0,0,0.5); width: 100%; z-index: 2; } #header #headertools .mp-cms-edit-block { position: relative; float: left; width: auto; height: auto; margin: 8px 0; margin-left: 10px; } #header #headertools .mp-cms-edit-block .block-controls { margin: 0; padding: 0; margin-right: 15px; } #header #navtools { background: #fff; padding: 0; margin: 0; width: 100%; top: 42px; } #header #navtools #navtools-content { position: relative; width: 1200px; margin: 0 auto; display: block; clear: both; overflow: hidden; } #container:hover #header .bnr_tools { display: block; } /* Content section */ div.contentcontainer { position: relative; width: 1200px; float: left; clear: both; display: block; padding: 35px 0; } div.contentcontainer.notLast { padding-bottom: 0; } #mid2 div.contentcontainer { padding-top: 0; } /* Content section (Mobile) */ div.contentcontainer_mobile { position: relative; width: 1200px; float: left; clear: both; display: block; padding: 20px 0 0 5px; } div.contentcontainer_mobile li { float: left; width: 33%; font-size:90px; text-align: center; margin-bottom: 10px;} div.contentcontainer_mobile li span { font-size: 15px; text-align: center; display: block; clear: both;} div.contentcontainer_mobile li.clear-first { clear: left;} div.contentcontainer_mobile li.clear-last { clear: right;} #mobile-login-link { float: right !important; margin-right: 0px !important; font-size: 20px; padding-right: 3px !important; padding-right: 55px !important; padding-bottom: 0 !important; padding-top: 7px !important; } #responsive_nav_open a{ position: relative; margin: 3px 3px 0 0; padding-left: 0px; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); cursor: pointer; float: right; } #mp_logout_icon { position: relative; float: left; width: 32px; height: 32px; overflow: hidden; display: inline-block; background: url(../img/icons/vwb_icon_sprites.png) no-repeat -64px -96px; } .show_on_mobile { display: none !important; } @media screen and (max-width: 480px){ #responsive_nav { height: auto !important; } #page_login { left: 38% !important; top: 35% !important; } .bannerspace-footer { padding: 20px 0 20px 0 !important; } .footer_content .footbox.right { padding-top: 20px !important; } .hide_on_mobile { display: none !important; } .show_on_mobile { display: block !important; } } @media screen and (max-width: 400px){ div.contentcontainer_mobile li { font-size:80px; } } #container div.main:hover .areatools { display: block; } #container div.main .areatools { display: none; } .box_green { position: relative; float: left; width: 100%; clear: both; display: block; background: #55b032; color: #d0f2c3; } .box_green p { } /* .box_green h1.white { color: #fff !important; } */ .box_green a { color: #fff !important; } .box_blue { position: relative; float: left; width: 100%; clear: both; display: block; background: #004b94; color: #c3e1f2; } .box_blue p { } /* .box_blue h1.white { color: #fff !important; } */ .box_blue a { color: #fff !important; } .box_white { position: relative; float: left; width: 99%; clear: both; display: block; background: #fff; color: #888; border: 1px solid #e9e9e9; } .box_white p { } /* .box_white h1 { color: #55b032 !important; font-size: 14px; font-weight: bold; letter-spacing: 0; margin-bottom: 5px; } */ .box_white a { color: #55b032 !important; } .box_content { padding: 20px; } /* General elements */ div.main hr { position: relative; float: left; display: block; width: 100%; clear: both; background: none; border: 0; margin: 0; border-top: 1px solid #eee; } div.main a { color: #0386BD; text-decoration: none; } /* Nav */ #navbox { position: relative; float: left; width: 100%; display: block; overflow: visible; padding: 0; background: none; z-index: 5; } #navbox.locked { position: fixed; top: 0; z-index: 99; background: #FEDF17; box-shadow: 0 0 5px rgba(0,0,0,0.15); } #navbox-content { position: relative; width: 1200px; margin: 0 auto; display: block; overflow: visible; } #navbox .navbox { position: relative; width: 100%; height: auto; float: left; display: block; font-family: 'Dosis', Arial; box-sizing: border-box; } #navbox.locked { -webkit-transition: background 500ms ease; -moz-transition: background 500ms ease; -o-transition: background 500ms ease; transition: background 500ms ease; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } #navbox .nav-logo { position: absolute; width: 96px; z-index: 2; top: 9px; display: none; } #navbox.locked .nav-logo { display: block; } #navbox .nav-logo #nav-logo-img { position: relative; float: left; width: 100%; height: auto; } /*#navbox.locked .navbox { padding-bottom: 1px; } #navbox.locked #navbox-content { min-height: 32px; }*/ /* Nav - list */ #navbox .navbox ul { position: relative; float: right; width: auto; clear: both; display: block; padding: 0; margin: 0; } #navbox .navbox li { position: relative; float: left; } #navbox .navbox li ul { position: absolute; top: 60px; width: 250px; left: 0; display: none; color: #fff; background: #0875a3; border-top: 7px solid #03638c; } #navbox .navbox li ul li { position: relative; float: left; width: 100%; display: block; clear: both; margin: 0 !important; padding: 0 !important; } #navbox .navbox li ul h1 { position: relative; display: block; font-size: 14px; text-transform: none; line-height: normal; letter-spacing: 0; font-weight: normal; } #navbox .navbox li ul h1 a { position: relative; display: block; color: #fff; } #navbox .navbox li ul ul { left: 250px; top: 0; border-top: none !important; } #navbox .navbox li.currentNav ul, #navbox .navbox li.parentCurrentNav ul { border-top: 7px solid #fedf16; } .touch #navbox .navbox li ul { display: none !important; } #navbox.locked .navbox li ul { border-top: none !important; } #navbox .navbox li:hover > ul { display: block; } /* Don't show 3rd level navs */ #navbox .navbox li ul li ul { display: none; } /* Nav - current list item */ #navbox .navbox li.currentNav { } #navbox .navbox li:hover { z-index: 5; } #navbox .navbox li:hover h1 a { color: #fff; background: #0875a3; } #navbox .navbox li:hover > h1 a { color: #fff; background: #03638c; } #navbox .navbox li.currentNav > h1 a { color: #333 !important; background: #fedf16 !important; } #navbox.locked .navbox > ul > li.currentNav > h1 a { color: #fff !important; background: #0875a3 !important; } #navbox .navbox li.currentNav.has-subnav h1 { } #navbox .navbox li.currentNav.has-subnav h1 a { color: #fff; background: #0875a3 url(../img/base/subnav_indicator.png) no-repeat center 90%; } #navbox .navbox li.currentNav li h1 a { } #navbox .navbox li.currentNav li h1 a:hover { } #navbox .navbox li.currentNav li h1 a:hover a { } #navbox .navbox li.parentCurrentNav > h1 a { color: #333; background: #fedf16; } #navbox.locked .navbox > ul > li.parentCurrentNav > h1 a { color: #fff; background: #0875a3; } #navbox .navbox li li.parentCurrentNav > h1 a { color: #333; background: #fedf16; } #navbox .navbox li.parentCurrentNav.has-subnav h1 a { color: #fff; background: #0875a3 url(../img/base/subnav_indicator.png) no-repeat center 90%; } #navbox .navbox li.currentNav.displayAsInActive a { color: #666; background: none; } #navbox .navbox li.currentNav.displayAsInActive h1 a { color: #666; background: none; } #navbox .navbox li.parentCurrentNav.displayAsInActive a { color: #666; background: none; } #navbox .navbox li.parentCurrentNav.displayAsInActive h1 a { color: #666; background: none; } #navbox .navbox li.displayAsActive a { color: #fff; background: #0875a3; } #navbox .navbox li.displayAsActive.has-subnav a { color: #fff; background: #0875a3 url(../img/base/subnav_indicator.png) no-repeat center 90%; } /* Nav - headers */ #navbox .navbox h1 { font-size: 16px; font-weight: normal; font-family: 'Dosis', Arial; line-height: normal; letter-spacing: 0px; text-transform: uppercase; font-weight: bold; border: none; padding: 0; margin: 0; } /* Nav - hyperlinks */ #navbox .navbox a { text-decoration: none; color: #666; display: block; height: 100%; padding: 20px 15px; box-sizing: border-box; } #navbox .navbox li li a { text-decoration: none; color: #666; display: block; height: 100%; padding: 15px; box-sizing: border-box; } #navbox .navbox a:hover { color: #fff; background: #0875a3; } #navbox .navbox li.has-subnav a:hover { color: #fff; background: #0875a3 url(../img/base/subnav_indicator.png) no-repeat center 90%; } #navbox .navbox li.has-subnav h1 { background: url(../img/base/subnav_indicator_o50_b.png) no-repeat center 90%; } #navbox .navbox li li.has-subnav h1 { background: none; } #navtools { position: absolute; top: 0; left: 0; right: auto; display: none; z-index: 333; background: url(../img/base/darkbg.png); padding: 0; padding-left: 25px; } #outer:hover #navtools { display: block; } #navtools div.mp-cms-editmode .controls ul { margin: 0; padding-right: 0; } div.main #navtools .mp-cms-editmode { margin: 0; } div.main #navtools .mp-cms-editmode .controls { position: relative; float: right; width: auto; } #navtools.nav div.mp-cms-editmode .controls li { top: 0; padding: 0 7px; } #navtools.nav div.mp-cms-editmode .controls li:last-child { padding-right: 0; } #navtools.nav div.block-controls ul { margin: 0; } div.main #navtools.nav .mp-cms-edit-block { top: 2px; left: 0; } .header div.block-controls { background: none !important; } #navtools .hide { display: inline !important; } #navtools .show { display: inline !important; } #navtools { position: absolute; float: left; clear: both; background: none; padding: 0; margin: 0; width: 100%; top: 0; } #navtools #navtools-content { position: relative; width: 1200px; margin: 0 auto; display: block; clear: both; overflow: hidden; } #navtools #navtools-content .mp-cms-editmode { position: relative; float: right; } /* SubNav */ #subnavbox { position: absolute; float: left; width: 100%; display: none; overflow: hidden; padding: 0; z-index: 15; } /*.touch #subnavbox { display: block; }*/ #subnavbox:hover { display: block !important; } #subnavbox.locked { position: fixed; padding-top: 0; top: 0; z-index: 99; } #subnavbox-content { position: relative; width: 1200px; margin: 0 auto; display: block; overflow: hidden; padding: 10px 20px; background: #0071a0; opacity: 0.97; box-sizing: border-box; } #subnavbox .subnavbox { position: relative; width: 100%; height: auto; float: left; display: block; font-family: 'Dosis', Arial; } #subnavbox .subnavbox ul { position: relative; float: left; width: auto; clear: both; display: block; padding: 0; margin: 0; } #subnavbox .subnavbox li { position: relative; float: left; padding-right: 10px; min-width: 150px; } #subnavbox .subnavbox ul ul { position: relative; display: block; clear: both; margin: 0; padding: 0; padding-left: 10px; box-sizing: border-box; max-width: 200px; } #subnavbox .subnavbox ul ul ul { padding-left: 20px; } #subnavbox .subnavbox ul ul li { position: relative; float: left; width: auto; clear: both; border: none; margin: 0; padding: 0; } #subnavbox .subnavbox ul ul li h1 { position: relative; float: left; width: auto; clear: both; } #subnavbox .subnavbox ul ul li a { font-size: 14px; text-transform: uppercase; padding: 7px 0; background: url(../img/icons/bike_w.png) no-repeat 0 8px; padding-left: 25px; } #subnavbox .subnavbox li h1 { border: none; margin: 0; padding: 0; } #subnavbox .subnavbox a { font-size: 14px; font-weight: normal; font-family: 'Dosis', Arial; line-height: normal; letter-spacing: 0px; text-transform: uppercase; border: none; padding: 0; margin: 0; } #subnavbox .subnavbox a { text-decoration: none; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); display: block; height: 100%; padding: 7px 15px; padding-left: 0; padding-right: 30px; } #subnavbox .subnavbox a:hover { color: #FEDF17; } #subnavbox .subnavbox .current a { color: #FEDF17; } #subnavbox .subnavbox .currentNav > h1 a { color: #FEDF17; } #subnavbox .subnavbox .parentCurrentNav > h1 a { color: #FEDF17; } /* SubNav */ #subnavbox-gray { position: relative; float: left; width: 100%; display: block; overflow: hidden; padding: 0; background: #f6f6f6; border-bottom: 1px solid #DDD; } #subnavbox-gray.locked { position: fixed; padding-top: 10px; top: 0; z-index: 99; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3); border-bottom: 1px solid #eee; } #subnavbox-gray-content { position: relative; width: 1200px; margin: 0 auto; display: block; overflow: hidden; } #subnavbox-gray .subnavbox-gray { position: relative; width: 100%; height: auto; float: left; display: block; font-family: 'Dosis', Arial; } #subnavbox-gray .subnavbox-gray ul { position: relative; float: left; width: auto; clear: both; display: block; padding: 0; margin: 0; } #subnavbox-gray .subnavbox-gray ul ul { display: none; } #subnavbox-gray .subnavbox-gray li { position: relative; float: left; } #subnavbox-gray .subnavbox-gray a { font-size: 14px; font-weight: normal; font-family: 'Dosis', Arial; line-height: normal; letter-spacing: 0px; text-transform: uppercase; border: none; padding: 0; margin: 0; } #subnavbox-gray .subnavbox-gray a { text-decoration: none; color: #666; display: block; height: 100%; padding: 7px 15px; } #subnavbox-gray .subnavbox-gray a:hover { background: #FEDF17; } #subnavbox-gray .subnavbox-gray .current a { background: #FEDF17; } /* Side SubNav */ .side-subnav { position: relative; float: left; display: block; clear: both; width: 100%; padding: 10px; box-sizing: border-box; background: #0875a3; margin-bottom: 25px; } .side-subnav .block { position: relative; float: left; display: block; clear: both; width: 100%; } .side-subnav .block .page_subnav { position: relative; float: left; display: block; clear: both; width: 100%; } .side-subnav .block .page_subnav ul { position: relative; float: left; display: block; clear: both; width: 100%; margin: 0; padding: 0; box-sizing: border-box; } .side-subnav .block .page_subnav ul ul { padding-left: 20px; } .side-subnav .block .page_subnav ul li { position: relative; float: left; display: block; clear: both; width: 100%; margin: 0; list-style-type: none; } .side-subnav .block .page_subnav ul li a { color: #fff; text-decoration: none; display: block; padding: 3px 10px; box-sizing: border-box; } .side-subnav .block .page_subnav ul ul li { } .side-subnav .block .page_subnav ul li.current > a { color: #fedf16; } .side-subnav .block .page_subnav ul li a:before { content: "\f0da"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-right: 10px; color: rgba(255,255,255,0.5); } /* =| FOOTER |================================ */ div.push { } .footer { position: relative; width: 100%; float: left; clear: both; display: block; color: #D0F0A0; color: rgba(255,255,255,0.7); z-index: 3; } .footer a { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0, 0.1); } /* .footer { position: fixed; left: 0; bottom: 0; z-index: 5; } */ .footer .nomargin { margin: 0 !important; } .footer_container { margin-top: 10px; } .footer_top { position: relative; width: 100%; height: 78px; } .footer_subwrap { position: relative; width: 1200px; min-height: 24px; margin: 0 auto; overflow: hidden; } .footer_content_outer { position: relative; float: left; width: 100%; clear: both; display: block; background: #0386bd; overflow: hidden; } .footer_content { position: relative; width: 1200px; margin: 0 auto; padding: 20px 0; font-size: 12px; overflow: hidden; } .footer #bubbles { position: relative; float: left; width: 100%; clear: both; display: block; height: 78px; background: url(../img/base/footerbg.png) repeat-x left top; } .footer_content.credits { padding: 0; width: 1200px; } .footer_content.credits .footer_credits { background: #ddd; padding: 7px 10px; display: block; overflow: hidden; float: left; width: 940px; } .footer_content.credits .footer_credits span { position: relative; float: right; text-shadow: 1px 1px 0 rgba(255,255,255,0.4); } .footer_content.credits .footer_credits span a { color: #999; display: block; background: url(../img/credits/monkeyproof.png) no-repeat right top; padding-right: 25px; } .footer_content.credits .footer_credits span a:hover { color: #444; } .footer_content .footbox { position: relative; float: left; display: block; width: 200px; line-height: normal; padding-left: 20px; } .footer_content .footbox.left { width: auto; text-align: left; background: none; padding: 0; } .footer_content .footbox.left img { position: relative; top: 40px; } .footer_content .footbox.left div { position: relative; float: left; width: 100%; clear: both; display: block; } .footer_content .footbox.left div.copyright { margin-bottom: 10px; } .footer_content .footbox.left div.social { margin-bottom: 15px; } .footer_content .footbox.right { float: right; width: auto; padding-top: 47px; } .footer_content .footbox.right ul { position: relative; float: right; } .footer_content .footbox.right li { position: relative; float: left; margin-left: 25px; } .footer_content h1 { font-size: 17px; margin: 0; color: #fff; } .footer_content a { color: #fff; text-decoration: none; } .footer_content a:hover { cursor: pointer; color: #fff; } .footer_subwrap a:hover { cursor: pointer; } .footerlogo { position: relative; width: 126px; height: 43px; float: left; } .footertext { position: relative; float: left; width: auto; margin: 0; } #goingToTop { position: absolute; display: none; z-index: 10; top: -225px; right: 0; width: 24px; height: 24px; background: url(../img/base/totop.png) no-repeat left top; overflow: hidden; } #goingToTop:hover { cursor: pointer; } .footer .sociallink-facebook, .footer .sociallink-twitter, .footer .sociallink-linkedin { position: relative; float: left; display: block; width: 32px; height: 32px; overflow: hidden; margin-right: 2px; } .footer .sociallink-facebook { background: url(../img/social/social-sprite.png) no-repeat left top; } .footer .sociallink-twitter { background: url(../img/social/social-sprite.png) no-repeat -32px top; } .footer .sociallink-linkedin { background: url(../img/social/social-sprite.png) no-repeat -64px top; } .footer .sociallink-facebook:hover { background-position: left -32px; } .footer .sociallink-twitter:hover { background-position: -32px -32px; } .footer .sociallink-linkedin:hover { background-position: -64px -32px; } /* =| Content&Mid |============================ */ div.contentSide { position: relative; width: 23.4%; height: auto; min-height: 150px; float: left; clear: none; margin-right: 1.6%; } div.contentSide .sideBlock { position: relative; float: left; width: 100%; height: inherit; min-height: 0; clear: both; } div.contentLeft { position: relative; width: 100%; height: auto; min-height: 150px; float: left; clear: none; margin-right: 0; } div.contentLeft.hasSideBar { width: 75%; } div.contentLeft.hasRightBar { width: 75%; } div.contentLeft.hasSideBar.hasRightBar { width: 50%; } div.contentLeft .leftBlock { position: relative; float: left; width: 100%; height: inherit; min-height: 0; clear: both; } div.contentRight { position: relative; width: 23.4%; height: auto; min-height: 150px; float: left; clear: right; margin-left: 1.6%; } div.contentRight .rightBlock { position: relative; float: left; width: 100%; height: inherit; min-height: 0; clear: both; } div.contentRight.fullsized { width: 1200px; } div.contentLeft .block, div.contentRight .block { position: relative; float: left; width: 100%; clear: both; overflow: hidden; display: block; margin-bottom: 15px; } div.contentSide div.contentRight { width: 100% !important; margin: 1.6% 0 !important; } div.contentSide div.contentRight .rightBlock { padding: 0 !important; } /* -- Basics -- */ div.contentcontainer ul { padding-left: 20px; } div.contentcontainer li { list-style-type: square; } /* =| Sitemap |================================================================ */ .sitemap ul li a { text-decoration: none; } .sitemap ul li a:hover { color: #013359; } /* =| Feedback |================================================================ */ div.feedback { position: relative; float: left; width: 100%; clear: both; display: block; } div.feedback .feedback-item { position: relative; float: left; width: 100%; clear: both; display: block; margin-bottom: 25px; } div.feedback .feedback-item .feedback-item-photo { position: relative; float: left; width: 60px; height: 60px; clear: none; display: block; overflow: hidden; background: #f5f5f5; border: 2px solid #f0f0f0; } div.feedback .feedback-item .feedback-item-photo img { position: relative; width: 60px; } div.feedback .feedback-item .feedback-item-content { position: relative; float: left; width: 378px; clear: none; display: block; margin-left: 20px; } div.feedback .feedback-item .feedback-item-content .feedback-item-title { position: relative; float: left; width: 100%; clear: both; display: block; font-size: 24px; font-weight: bold; color: #444; letter-spacing: -1px; line-height: normal; } div.feedback .feedback-item .feedback-item-content .feedback-item-company { position: relative; float: left; width: 100%; clear: both; display: block; font-size: 12px; line-height: 18px; color: #999; } div.feedback .feedback-item .feedback-item-content .feedback-item-quote { position: relative; float: left; width: 100%; clear: both; display: block; margin-top: 10px; } div.feedback .feedback-item .feedback-item-content .feedback-item-quote p { font-size: 14px; line-height: 20px; color: #666; font-style: italic; } div.feedback .feedback-item .feedback-item-content .feedback-item-highlight { color: #f90; } div.feedback .feedback-item .feedback-item-photo { -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; } /* =| Case Study (Small) |================================================================ */ div.casestudy-small { position: relative; float: left; width: 100%; clear: both; display: block; } div.casestudy-small .casestudy-small-item { position: relative; float: left; width: 100%; clear: both; display: block; margin-bottom: 25px; } div.casestudy-small .casestudy-small-item .casestudy-small-item-photo { position: relative; float: left; width: 114px; height: 114px; clear: none; display: block; overflow: hidden; background: #f5f5f5; /*border: 2px solid #f0f0f0;*/ } div.casestudy-small .casestudy-small-item .casestudy-small-item-photo img { position: relative; width: 114px; } div.casestudy-small .casestudy-small-item .casestudy-small-item-content { position: relative; float: left; width: 328px; clear: none; display: block; margin-left: 20px; } div.casestudy-small .casestudy-small-item .casestudy-small-item-content .casestudy-small-item-title { position: relative; float: left; width: 100%; clear: both; display: block; font-size: 24px; font-weight: bold; color: #444; letter-spacing: -1px; line-height: normal; } div.casestudy-small .casestudy-small-item .casestudy-small-item-content .casestudy-small-item-company { position: relative; float: left; width: 100%; clear: both; display: block; font-size: 12px; line-height: 18px; color: #999; } div.casestudy-small .casestudy-small-item .casestudy-small-item-content .casestudy-small-item-text { position: relative; float: left; width: 100%; clear: both; display: block; margin-top: 5px; } div.casestudy-small .casestudy-small-item .casestudy-small-item-content .casestudy-small-item-text p { font-size: 14px; line-height: 20px; color: #8f8f8f; } div.casestudy-small .casestudy-small-item .casestudy-small-item-content .casestudy-small-item-highlight { color: #f90; } div.casestudy-small .casestudy-small-item .casestudy-small-item-photo { -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; } /* =| Orange Arrow |================================================================ */ .orangeArrow, div.main .orangeArrow, div.main a.orangeArrow { position: relative; display: block; text-align: right; line-height: 22px; color: #444; text-decoration: none; min-height: 24px; padding-right: 30px; background: url(../img/base/orangearrow.png) no-repeat right top; } /* =| Client logos |================================================================ */ div.client_logos { position: relative; float: left; width: 100%; clear: both; display: block; margin-bottom: 25px; } div.client_logo { position: relative; float: left; width: 182px; height: 140px; clear: none; display: block; border: 1px solid #d9d9d9; margin-right: 10px; background-repeat: no-repeat; background-position: left top; } .desktop div.client_logo:hover { background-position: left -140px; } div.client_logo a { display: block; width: 100%; height: 100%; } div.client_logo.last { margin: 0; } div.client_logo.vabrijschool { background-image: url(../img/klanten/vab.png); } div.client_logo.drieM { background-image: url(../img/klanten/3m.png); } div.client_logo.aliplast { background-image: url(../img/klanten/aliplast.png); } div.client_logo.vwb { background-image: url(../img/klanten/vwb.png); } div.client_logo.computercheckpoint { background-image: url(../img/klanten/ccp.png); } div.client_logo.aqua { background-image: url(../img/klanten/aquadesign.png); } /* =| News feed |================================================================ */ div.blog_feed { position: relative; margin-bottom: 10px; } div.blog_feed .blogfeed-article .blogfeed-article-date { position: relative; float: left; clear: none; display: block; width: 50px; height: 50px; background: #9ab62b; text-align: center; overflow: hidden; } div.blog_feed .blogfeed-article .blogfeed-article-date .blogfeed-article-date-day { font-size: 14px; line-height: 14px; color: #fff; font-weight: bold; text-shadow 1px 1px 0 rgba(0,0,0,0.1); margin: 0; margin-top: 11px; } div.blog_feed .blogfeed-article .blogfeed-article-date .blogfeed-article-date-year { font-size: 10px; line-height: 10px; color: #d5e593; font-weight: bold; text-shadow 1px 1px 0 rgba(0,0,0,0.1); margin: 0; } div.blog_feed .blogfeed-article .blogfeed-article-content { position: relative; float: left; clear: none; display: block; width: 402px; padding-left: 10px; } div.blog_feed .blogfeed-article .blogfeed-article-content .blogfeed-article-title { width: 300px; clear: none; font-size: 14px; color: #444; font-weight: normal; line-height: 20px; letter-spacing: 0; } div.blog_feed .blogfeed-article .blogfeed-article-content .blogfeed-article-title a { padding: 5px; display: block; } div.blog_feed .blogfeed-article .blogfeed-article-content .blogfeed-article-title a:hover { } div.blog_feed .blogfeed-article .blogfeed-article-button { width: 90px; float: right; clear: none; margin-left: 10px; border: none; border-left: 1px dotted #ddd; } div.blog_feed .blogfeed-article .blogfeed-article-button a { color: #444; font-size: 12px; font-weight: normal; } div.blog_feed .blogfeed-article .blogfeed-article-date { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } /* =| Services |================================================================ */ div.services { position: relative; display: block; clear: both; width: 308px; float: left; border: 1px solid #e5e5e5; box-shadow: inset 0 0 3px rgba(0,0,0,0.1); } .desktop div.services:hover { cursor: pointer; } div.services div.services-photo { position: relative; display: block; clear: both; width: 100%; height: 100px; float: left; text-align: center; margin-bottom: 20px; } div.services div.services-photo img { position: absolute; left: 0; bottom: 0; } div.services div.services-photo a img { border: none; } div.services div.services-photo a { text-decoration: none; } div.services div.services-content { position: relative; display: block; clear: both; width: 290px; float: left; margin: 20px 10px; text-align: center; } div.services div.services-message { position: relative; display: block; clear: both; width: 100%; float: left; text-align: center; } div.services div.services-message a { text-decoration: none; } div.services div.services-message .addArrow { background: url(../img/base/arrow.png) no-repeat left center; padding-left: 10px; } div.services div.services-message .addBg { padding: 3px 10px !important; background: #444; color: #fff !important; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); display: inline-block; font-size: 12px; font-weight: normal; } .desktop div.services:hover div.services-message .addBg, .desktop div.services div.services-message .addBg:hover { background: #f90; cursor: pointer; } div.services div.services-message .addBg { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } div.services.services-snowbird div.services-photo img { left: 18px; } div.services.services-cudo div.services-photo img { left: 60px; } div.services.services-visitekaartje div.services-photo img { left: 37px; } /* =| Bullet-items |================================================================ */ div.bullet-items { position: relative; float: left; width: 100%; clear: both; display: block; } div.bullet-item { position: relative; float: left; width: 100%; clear: both; display: block; margin-bottom: 20px; } div.bullet-item .bullet-item-circle { position: relative; float: left; width: 60px; height: 60px; display: block; background: #f90; margin-right: 15px; } div.bullet-item .bullet-item-content { position: relative; float: left; width: 549px; display: block; } div.bullet-item .bullet-item-content .bullet-item-title { position: relative; float: left; width: 100%; clear: both; display: block; font-size: 24px; font-weight: bold; letter-spacing: -1px; color: #444; margin: 10px 0; } div.bullet-item .bullet-item-content .bullet-item-text { position: relative; float: left; width: 100%; clear: both; display: block; } div.bullet-item .bullet-item-circle { -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; } div.bullet-item.ontwerp .bullet-item-circle { background: #f90 url(../img/icons/bullets/screen.png) no-repeat center center; } div.bullet-item.ontwikkeling .bullet-item-circle { background: #f90 url(../img/icons/bullets/development.png) no-repeat center center; } div.bullet-item.hosting .bullet-item-circle { background: #f90 url(../img/icons/bullets/cloud.png) no-repeat center center; } div.bullet-item.marketing .bullet-item-circle { background: #f90 url(../img/icons/bullets/marketing.png) no-repeat center center; } div.bullet-item.maatwerk .bullet-item-circle { background: #f90 url(../img/icons/bullets/fingerprint.png) no-repeat center center; } div.bullet-item.opvolging .bullet-item-circle { background: #f90 url(../img/icons/bullets/binoculars.png) no-repeat center center; } div.bullet-item.support .bullet-item-circle { background: #f90 url(../img/icons/bullets/handshake.png) no-repeat center center; } div.bullet-item.onlineadverteren .bullet-item-circle { background: #f90 url(../img/icons/bullets/trophy.png) no-repeat center center; } div.bullet-item.contentmarketing .bullet-item-circle { background: #f90 url(../img/icons/bullets/speechbubble.png) no-repeat center center; } div.bullet-item.socialmedia .bullet-item-circle { background: #f90 url(../img/icons/bullets/socialmedia.png) no-repeat center center; } div.bullet-item.emailmarketing .bullet-item-circle { background: #f90 url(../img/icons/bullets/envelope.png) no-repeat center center; } /* =| Colorbox |================================================================ */ div.colorArrowBox { position: relative; float: left; width: 310px; clear: both; display: block; padding-bottom: 17px; background: #322f31 url(../img/base/arrow_bottom.png) no-repeat center bottom; } div.colorArrowBox.top { background: #322f31 url(../img/base/arrow_top.png) no-repeat center top; padding-top: 17px; padding-bottom: 0; } div.colorArrowBox .colorArrowBox-content { position: relative; padding: 20px; font-size: 16px; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorArrowBox .colorArrowBox-content a { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); text-decoration: none; } div.colorArrowBox .colorArrowBox-content .fancy { font-family: "Lobster", Georgia; font-size: 34px; line-height: normal; text-shadow: 2px 2px 0 rgba(0,0,0,0.2); display: block; margin-bottom: 5px; color: #fff; } div.colorArrowBox .colorArrowBox-content .fancy.center { text-align: center; } div.colorArrowBox.center { text-align: center; } div.colorArrowBox.green { background-color: #9ab62b; } div.colorArrowBox.green .colorArrowBox-content .fancy { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorArrowBox.green .colorArrowBox-content { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorArrowBox.green .colorArrowBox-content a { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); text-decoration: none; } div.colorArrowBox.orange { background-color: #f90; } div.colorArrowBox.orange .colorArrowBox-content .fancy { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorArrowBox.orange .colorArrowBox-content { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorArrowBox.orange .colorArrowBox-content a { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); text-decoration: none; } div.colorArrowBox.blue { background-color: #2B96B6; } div.colorArrowBox.blue .colorArrowBox-content .fancy { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorArrowBox.blue .colorArrowBox-content { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorArrowBox.blue .colorArrowBox-content a { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); text-decoration: none; } div.colorArrowBox.linkOnly .colorArrowBox-content { padding: 0; } div.colorArrowBox.linkOnly .colorArrowBox-content a { display: block; padding: 20px; } div.colorArrowBox.linkOnly:hover { background-color: #111; } div.colorArrowBox.linkOnly p { margin: 0; } div.colorArrowBox.linkOnly { width: 100%; } div.colorBox { position: relative; float: left; width: 310px; clear: both; display: block; background: #322f31; } div.colorBox .colorBox-content { position: relative; padding: 15px; font-size: 14px; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorBox .colorBox-content a { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); text-decoration: none; } div.colorBox .colorBox-content .fancy { font-family: "Lobster", Georgia; font-size: 34px; line-height: normal; text-shadow: 2px 2px 0 rgba(0,0,0,0.2); display: block; margin-bottom: 5px; color: #fff; } div.colorBox .colorBox-content .fancy.center { text-align: center; } div.colorBox.center { text-align: center; } div.colorBox.smallfont .colorBox-content { font-size: 10px; } div.colorBox.nopadding .colorBox-content { padding: 0; } div.colorBox.green { background-color: #9ab62b; } div.colorBox.green .colorBox-content .fancy { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorBox.green .colorBox-content { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorBox.green .colorBox-content a { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); text-decoration: none; } div.colorBox.orange { background-color: #f90; } div.colorBox.orange .colorBox-content .fancy { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorBox.orange .colorBox-content { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorBox.orange .colorBox-content a { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); text-decoration: none; } div.colorBox.blue { background-color: #2B96B6; } div.colorBox.blue .colorBox-content .fancy { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorBox.blue .colorBox-content { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } div.colorBox.blue .colorBox-content a { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); text-decoration: none; } div.colorBox.linkOnly .colorArrowBox-content { padding: 0; } div.colorBox.linkOnly .colorArrowBox-content a { display: block; padding: 20px; } div.colorBox.linkOnly:hover { background-color: #111; } div.colorBox.white { background-color: transparent; } div.colorBox.white .colorBox-content .fancy { color: #777; text-shadow: none; } div.colorBox.white .colorBox-content { color: #777; text-shadow: none; } div.colorBox.white .colorBox-content a { color: #777; text-shadow: none; text-decoration: none; } div.colorBox .colorBox-content ul.winks { padding-top: 0 !important; padding-bottom: 0 !important; } div.colorBox .colorBox-content ul { margin: 0; padding: 0; padding-left: 15px; margin-bottom: -15px; } div.colorBox .colorBox-content li { margin-bottom: 15px; } div.colorBox .colorBox-content ul.winks { margin: 0; padding: 0; list-style-type: none; padding: 10px 0; padding-left: 5px; margin-bottom: -15px; } div.colorBox .colorBox-content ul.winks li { background: url(../img/icons/orange_wink.png) no-repeat left 6px; list-style-type: none; padding-left: 20px; margin-bottom: 15px; } div.colorBox .colorBox-content ul.winks.white li { background: url(../img/icons/white_wink.png) no-repeat left 6px; } div.colorBox .colorBox-content ul.bullets { margin: 0; padding: 0; list-style-type: none; padding: 10px 0; padding-left: 5px; margin-bottom: -15px; } div.colorBox .colorBox-content ul.bullets li { background: url(../img/icons/orange_bullet.png) no-repeat left 6px; list-style-type: none; padding-left: 20px; margin-bottom: 15px; } div.colorBox .colorBox-content ul.bullets.white li { background: url(../img/icons/white_bullet.png) no-repeat left 6px; } div.colorBox .colorBox-content ul.forceLeft li { text-align: left; } /* =| Contact Table |================================================================ */ table.contacttable { position: relative; width: 100%; } table.contacttable tr { position: relative; } table.contacttable td { position: relative; padding: 7px 0; border-top: 1px dotted rgba(255,255,255,0.3); } table.contacttable tr.first td { border-top: none; } /* =| Iconbox |================================================================ */ div.iconBox { position: relative; float: left; width: 310px; clear: both; display: block; min-height: 55px; } div.iconBox .iconBox-content { position: relative; padding-left: 75px; padding-bottom: 15px; border-bottom: 1px dotted #ccc; margin-bottom: 10px; } div.iconBox .iconBox-content .iconBox-content-title { color: #444; font-weight: bold; } div.iconBox .iconBox-content .iconBox-content-title a { color: #444; text-decoration: none; } div.iconBox .iconBox-content .iconBox-content-message { } div.iconBox .iconBox-content .iconBox-content-message a { color: #777; text-decoration: none; } div.iconBoxComboXL { position: relative; float: left; width: 100%; clear: both; display: block; } div.iconBox.xl { position: relative; float: left; width: 299px; clear: none; display: block; padding: 30px 0; } div.iconBox.xl.addSideMargin { margin-right: 10px; padding-right: 15px; border-right: 1px dotted #ccc; } div.iconBox.xl .iconBox-content { padding: 15px; border-bottom: none; margin-bottom: 0; text-align: center; padding-top: 75px; } div.iconBox.xl.addSideMargin .iconBox-content { } div.iconBox.coffee { background: url(../img/icons/gray/coffee.png) no-repeat left top; } div.iconBox.briefcase { background: url(../img/icons/gray/briefcase.png) no-repeat left top; } div.iconBox.letter { background: url(../img/icons/gray/letter.png) no-repeat left top; } div.iconBox.monkeyproof { background: url(../img/icons/gray/monkeyproof.png) no-repeat left top; } div.iconBox.xl.coffee { background: url(../img/icons/gray/coffee.png) no-repeat center 45px; } div.iconBox.xl.briefcase { background: url(../img/icons/gray/briefcase.png) no-repeat center 50px; } div.iconBox.xl.letter { background: url(../img/icons/gray/letter.png) no-repeat center 50px; } div.iconBox.xl.monkeyproof { background: url(../img/icons/gray/monkeyproof.png) no-repeat center 50px; } /* =| Borderbox |================================================================ */ div.borderBox { position: relative; display: block; clear: both; width: 308px; float: left; border: 1px solid #e5e5e5; box-shadow: inset 0 0 3px rgba(0,0,0,0.1); } div.borderBox .borderBox-content { position: relative; padding: 20px; overflow: hidden; } div.borderBox .borderBox-content .borderBox-content-title { position: relative; display: block; clear: both; width: 100%; float: left; font-size: 24px; font-weight: bold; letter-spacing: -1px; color: #444; margin-bottom: 15px; } div.borderBox .borderBox-content .borderBox-content-message { position: relative; display: block; clear: both; width: 100%; float: left; } div.borderBox .borderBox-content .borderBox-content-message ul { margin: 0; padding: 0; padding-left: 15px; margin-bottom: -15px; } div.borderBox .borderBox-content .borderBox-content-message li { margin-bottom: 15px; } div.borderBox .borderBox-content .borderBox-content-message ul.winks { margin: 0; padding: 0; list-style-type: none; padding: 10px 0; padding-left: 5px; margin-bottom: -15px; } div.borderBox .borderBox-content .borderBox-content-message ul.winks li { background: url(../img/icons/orange_wink.png) no-repeat left 6px; list-style-type: none; padding-left: 20px; margin-bottom: 15px; } div.borderBox .borderBox-content .borderBox-content-message ul.bullets { margin: 0; padding: 0; list-style-type: none; padding: 10px 0; padding-left: 5px; margin-bottom: -15px; } div.borderBox .borderBox-content .borderBox-content-message ul.bullets li { background: url(../img/icons/orange_bullet.png) no-repeat left 6px; list-style-type: none; padding-left: 20px; margin-bottom: 15px; } /* =| Carousel |================================================================ */ div.carousel { position: relative; float: left; width: 100%; height: auto; min-height: 0; clear: both; display: block; overflow: hidden; margin-bottom: 50px; } div.carousel-item { position: relative; float: left; width: 100%; clear: both; display: block; } div.carousel-item div.carousel-item-photobox { position: relative; float: left; width: 472px; height: 275px; background: #f0f0f0; clear: none; display: block; } div.carousel-item div.carousel-item-photobox a { text-align: center; display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #ddd; overflow: hidden; } div.carousel-item div.carousel-item-photobox a:hover { cursor: pointer; transition-delay: 0.1s; } div.carousel-item div.carousel-item-photobox a img { transition: all 0.2s linear; } div.carousel-item div.carousel-item-photobox a:hover img { transform: scale(1.075); } div.carousel-item div.carousel-item-content { position: relative; float: left; width: 472px; clear: none; display: block; margin-left: 15px; } div.carousel-item div.carousel-item-content .carousel-item-title { position: relative; float: left; width: 100%; clear: both; display: block; font-size: 24px; font-weight: bold; letter-spacing: -1px; color: #444; margin-bottom: 5px; } div.carousel-item div.carousel-item-content .carousel-item-text { position: relative; float: left; width: 100%; clear: both; display: block; } div.carousel-item div.carousel-item-content .carousel-item-text p { } div.carousel-item div.carousel-item-content .carousel-item-thumbnails { position: relative; float: left; width: 100%; clear: both; display: block; margin-top: 20px; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail1 { position: relative; float: left; width: 115px; height: 75px; background: #f0f0f0; clear: none; display: block; overflow: hidden; margin-right: 4px; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail1 a { text-align: center; overflow: hidden; display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #ddd; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail1 a img { transition: all 0.2s linear; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail1 a:hover { cursor: pointer; transition-delay: 0.1s; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail1 a:hover img { transform: scale(1.075); } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail2 { position: relative; float: left; width: 115px; height: 75px; background: #f0f0f0; clear: none; display: block; overflow: hidden; margin-right: 4px; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail2 a { text-align: center; overflow: hidden; display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #ddd; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail2 a img { transition: all 0.2s linear; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail2 a:hover { cursor: pointer; transition-delay: 0.1s; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail2 a:hover img { transform: scale(1.075); } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail3 { position: relative; float: left; width: 115px; height: 75px; background: #f0f0f0; clear: none; display: block; overflow: hidden; margin-right: 4px; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail3 a { text-align: center; overflow: hidden; display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #ddd; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail3 a img { transition: all 0.2s linear; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail3 a:hover { cursor: pointer; transition-delay: 0.1s; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail3 a:hover img { transform: scale(1.075); } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail4 { position: relative; float: left; width: 115px; height: 75px; background: #f0f0f0; clear: none; display: block; overflow: hidden; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail4 a { text-align: center; overflow: hidden; display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #ddd; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail4 a img { transition: all 0.2s linear; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail4 a:hover { cursor: pointer; transition-delay: 0.1s; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail4 a:hover img { transform: scale(1.075); } div.carousel-item div.carousel-item-content .carousel-item-navigation { position: relative; float: left; width: 100%; clear: both; display: block; margin-top: 25px; } div.carousel-item div.carousel-item-content .carousel-item-navigation .carousel-item-navigation-prev { position: relative; float: left; height: 26px; line-height: 26px; padding-left: 25px; background: url(../img/icons/arrow_left_active.png) no-repeat left center; font-size: 16px; color: #444; } div.carousel-item div.carousel-item-content .carousel-item-navigation .carousel-item-navigation-prev:hover { cursor: pointer; } div.carousel-item div.carousel-item-content .carousel-item-navigation .carousel-item-navigation-prev.off { background: url(../img/icons/arrow_left_inactive.png) no-repeat left center; color: #bbb; } div.carousel-item div.carousel-item-content .carousel-item-navigation .carousel-item-navigation-next { position: relative; float: right; height: 26px; line-height: 26px; padding-right: 25px; background: url(../img/icons/arrow_right_active.png) no-repeat right center; font-size: 16px; color: #444; } div.carousel-item div.carousel-item-content .carousel-item-navigation .carousel-item-navigation-next:hover { cursor: pointer; } div.carousel-item div.carousel-item-content .carousel-item-navigation .carousel-item-navigation-next.off { background: url(../img/icons/arrow_right_inactive.png) no-repeat right center; color: #bbb; } /* Uncomment line below to hide the back/next buttons on first/last items */ div.carousel-item div.carousel-item-content .carousel-item-navigation .carousel-item-navigation-prev.off, div.carousel-item div.carousel-item-content .carousel-item-navigation .carousel-item-navigation-next.off { display: none; } /* =| featureImageBox |================================================================ */ div.featureImageBox { position: relative; float: left; width: 1200px; clear: both; display: block; margin-top: 45px; } div.featureImageBox.first { margin-top: 0; } div.featureImageBox .featureImageBox-image { position: relative; float: left; width: 300px; height: 300px; overflow: hidden; clear: none; display: block; border: 1px solid #eee; } div.featureImageBox .featureImageBox-image img { position: relative; width: 100%; } div.featureImageBox .featureImageBox-text { position: relative; float: right; width: 608px; clear: none; display: block; text-align: left; padding-top: 80px; } div.featureImageBox .featureImageBox-text-title { font-size: 24px; color: #444; font-weight: bold; letter-spacing: -1px; margin-bottom: 10px; } div.featureImageBox .featureImageBox-text-content { color: #8f8f8f; } div.featureImageBox .featureImageBox-image { -webkit-border-radius: 300px; -moz-border-radius: 300px; border-radius: 300px; } div.featureImageBox.alt .featureImageBox-text { float: left; text-align: right; } div.featureImageBox.alt .featureImageBox-image { float: right; } /* =| Employee |================================================================ */ div.mp-employee { position: relative; float: left; width: 480px; clear: none; display: block; margin-bottom: 50px; } div.mp-employee .mp-employee-photo { position: relative; float: left; width: 200px; height: 200px; clear: none; display: block; overflow: hidden; border: 1px solid #eee; } div.mp-employee .mp-employee-photo img { position: relative; width: 100%; } div.mp-employee .mp-employee-details { position: relative; float: left; width: 258px; clear: none; display: block; margin-left: 20px; padding-top: 55px; } div.mp-employee .mp-employee-details .mp-employee-details-name { position: relative; float: left; width: 100%; clear: both; display: block; font-size: 24px; font-weight: bold; letter-spacing: -1px; color: #444; } div.mp-employee .mp-employee-details .mp-employee-details-title { position: relative; float: left; width: 100%; clear: both; display: block; margin-top: 10px; font-weight: bold; color: #f90; } div.mp-employee .mp-employee-details .mp-employee-details-phone { position: relative; float: left; width: 100%; clear: both; display: block; margin-top: 1px; color: #444; } div.mp-employee .mp-employee-details .mp-employee-details-phone a { color: #444; text-decoration: none; } div.mp-employee .mp-employee-details .mp-employee-details-email { position: relative; float: left; width: 100%; clear: both; display: block; margin-top: 1px; color: #8f8f8f; } div.mp-employee .mp-employee-details .mp-employee-details-email a { display: block; color: #8f8f8f; text-decoration: none; } div.mp-employee .mp-employee-photo { -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; } /* =| Content Dividers |================================================================ */ div.contentdivider { position: relative; float: left; width: 100%; clear: both; display: block; padding: 0; margin: 0; margin-bottom: 50px; height: 10px; overflow: hidden; } div.contentdivider.stripe { background: url(../img/base/stripe.png); } /* =| Login Base |================================================================ */ #mp_login-div { position: fixed; display: none; left: 0; top: 0; width: 100%; height: 100%; z-index: 20; } #mp_login-bg { background: #fff url(../img/repeaters/bg_white_85.png); position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } #mp_login-div #mp_login-form { position: absolute; width: 100%; text-align: left; z-index: 5; font-size: 14px; background: #fff; top: 25%; box-sizing: border-box; padding: 25px; } #mp_login-div #mp_login-form .forgot { margin: 2rem 0 0 0; } .mp_login-title{ margin-bottom: 10px; position: relative; font-size: 30px; letter-spacing: -1px; clear: both; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } #mp_login-form input[type="submit"] { text-indent: 0; border: none !important; color: #888; background: #EFEFEF; height: 35px !important; line-height: 30px; padding: 2px 12px !important; margin-right: 5px !important; font-size: 15px; font-family: Verdana; position: relative; overflow: hidden; display: inline-block; vertical-align: top; top: 2px !important; } #mp_login-form input[type="submit"]:hover { background-color: black; color: white; } #mp_login-form input[type="text"], #mp_login-form input[type="password"] { width: 100%; display: block; box-sizing: border-box; padding: 10px; font-size: 15px; margin-bottom: 10px; } #mp_login-form .login_form_small { position: relative; float: left; width: auto !important; display: inline-block !important; clear: none !important; text-align: left; margin-right: 10px !important; } #mp_login-form .login_form_small input[type="submit"]:hover { background: #000; cursor: pointer; border: 1px solid #000; color: #fff; } /* Fietsbijstand */ #topbox #topbox-content .bijstand { display: none; } @media screen and (max-width: 480px){ #topbox #topbox-content .bijstand { display: block; background: #0386bd; color: white; width: calc(100% + 30px) !important; margin: -25px -15px 1.5rem -15px; padding: 1rem; box-sizing: border-box; overflow: hidden; text-align: center; } #topbox #topbox-content .bijstand div { display: flex; width: 100%; max-width: 235px; justify-content: space-between; margin: 0 auto .5rem auto; } #topbox #topbox-content .bijstand a:last-child div { margin-bottom: 0; } #topbox #topbox-content .bijstand div span { font-weight: bold; } #topbox #topbox-content .bijstand div span i { margin: 0 0.5rem 0 0; } #topbox #topbox-content .bijstand a { color: white; text-decoration: none; } }