@charset "UTF-8"; /* ------------------------------------------ */ /* DECODERS CSS FILE: ITINERIS WEBSITE 2009 */ /* ------------------------------------------ */ /* ------------------------------------------ */ /* reset.css */ /* Resets default browser CSS. */ /* ------------------------------------------ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, /*ul, li,*/ fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; /*font-size: inherit;*/ font-family: inherit; } body { line-height: 1.5; } /* Tables still need 'cellspacing="0"' in the markup. */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } table, td, th { vertical-align: middle; } /* Remove possible quote marks (") from ,
. */ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* Remove annoying border on linked images. */ a img { border: none; } * { margin: 0; padding: 0; } a, a:hover { outline:none; } img { border: none; } /* ------------------------------------------ */ /* Standard tags */ /* ------------------------------------------ */ body { margin:0; padding:0; font: 12px "Trebuchet MS", Tahoma, Arial, Helvetica; background: #FFFFFF url(../img/back-main.gif) repeat-x; overflow:hidden;} body.niv3 { background: #FFFFFF url(../img/back-main-niv3.gif) repeat-x; overflow: visible; } a { color:#aa0467; } a:hover { color:#aa0467; text-decoration:none; } /* ------------------------------------------ */ /* structuur */ /* ------------------------------------------ */ #container { background: url(../img/back-container.gif) no-repeat; padding:0 0 20px 0; } .home #container { background: url(../img/back-container-home.gif) no-repeat; padding:0 0 20px 0; } .niv3 #container { background: url(../img/back-container-niv3.gif) no-repeat; } #top { height: 95px; overflow:hidden; /*background:#CC3399;*/ } #mid { height: 365px; overflow:hidden; } body.niv3 #mid { height: auto; overflow: visible; } #bot { height: 90px; /* hoogte nog niet bepaald */ } .home #bot { height: 90px; /* hoogte nog niet bepaald */ padding: 10px 0 0 0; } #logos { width: 206px; position:absolute; right: 20px; top: 504px; } #logos2 { width: 206px; position:absolute; right: 20px; top: 504px; } .niv3 #logos2 { display: none; } #logos img, #logos2 img { margin: 0 22px 0 0; } /* ------------------------------------------ */ /* TOP */ /* ------------------------------------------ */ #logo { margin: 25px 0 0 34px; float:left; } .home #logo { margin: 25px 0 0 300px; float:left; } #topnav { margin: 28px 0 0 40px; height: 61px; position: absolute; top:0; left:272px; overflow:hidden; float:left; z-index: 1000; } #breadcrumb { margin: 0; height: 20px; position: absolute; top:4px; left:312px; overflow:hidden; float:left; font-size:9px; color: #666 } .home #topnav { left:544px; } .home #breadcrumb { margin: 0; height: 20px; position: absolute; top:4px; left:584px; overflow:hidden; float:left; font-size:9px; color: #666 } /* Main navigatie -------------------------- */ ul#mainnav { list-style-type: none; width: 506px; height: 42px; float: left; } ul#mainnav li { height: 42px; float: left; margin:0px; } ul#mainnav li a { height: 42px; display: block; background: url("../img/nav.gif") no-repeat; float:left; } ul#mainnav li a span { display: none; } /*ul#mainnav li a:hover, ul#mainnav li a.selected { background: url("../img/main_nav_over.gif") no-repeat 0 0; } ul#mainnav li.last { margin-right: 0px; } */ ul#mainnav li#navCompany a, ul#mainnav li#navCompany a:link, ul#mainnav li#navCompany a:visited { background-position:0px 0px; width:75px; } ul#mainnav li#navTargetMarket a, ul#mainnav li#navTargetMarket a:link, ul#mainnav li#navTargetMarket a:visited { background-position:-75px 0px; width:117px; } /*-- Aangepast waldo --*/ ul#mainnav li#navServices a, ul#mainnav li#navServices a:link, ul#mainnav li#navServices a:visited { background-position:-192px 0px; width:73px; } ul#mainnav li#navSolutions a, ul#mainnav li#navSolutions a:link, ul#mainnav li#navSolutions a:visited { background-position:-265px 0px; width:78px; } ul#mainnav li#navCustomers a, ul#mainnav li#navCustomers a:link, ul#mainnav li#navCustomers a:visited { background-position:-343px 0px; width:86px; } ul#mainnav li#navCareers a, ul#mainnav li#navCareers a:link, ul#mainnav li#navCareers a:visited { background-position:-429px 0px; width:62px; } ul#mainnav li#navCompany a:hover, ul#mainnav li#navCompany a:active, ul#mainnav li#navCompany a.current, ul#mainnav li#navCompany a.selected, body.company ul#mainnav li#navCompany a { background-position:0px -58px; } /*-- Aangepast waldo --*/ ul#mainnav li#navTargetMarket a:hover, ul#mainnav li#navTargetMarket a:active, ul#mainnav li#navTargetMarket a.current, ul#mainnav li#navTargetMarket a.selected, body.company ul#mainnav li#navTargetMarket a { background-position:-75px -58px; } ul#mainnav li#navServices a:hover, ul#mainnav li#navServices a:active, ul#mainnav li#navServices a.current, ul#mainnav li#navServices a.selected, body.company ul#mainnav li#navServices a { background-position:-192px -58px; } ul#mainnav li#navSolutions a:hover, ul#mainnav li#navSolutions a:active, ul#mainnav li#navSolutions a.current, ul#mainnav li#navSolutions a.selected, body.solutions ul#mainnav li#navSolutions a { background-position:-265px -58px; } ul#mainnav li#navCustomers a:hover, ul#mainnav li#navCustomers a:active, ul#mainnav li#navCustomers a.current, ul#mainnav li#navCustomers a.selected, body.customers ul#mainnav li#navCustomers a { background-position:-343px -58px } ul#mainnav li#navCareers a:hover, ul#mainnav li#navCareers a:active, ul#mainnav li#navCareers a.current, ul#mainnav li#navCareers a.selected, body.careers ul#mainnav li#navCareers a { background-position:-429px -58px; } /* Functional navigatie -------------------------- */ ul#functionalnav { border:0; margin:10px 20px 0 0; padding: 0px 0 0 0; list-style-type: none; font: normal 11px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; float:left; } ul#functionalnav .space { margin:0 0 0 14px; } ul#functionalnav li { display: inline; text-align: center; padding:0; margin:0; } ul#functionalnav li a { height: 23px; /* 27 - padding */ padding: 0px 4px 0 10px; margin: 0; color: #6d6d6d; text-decoration: none; display: inline-block; text-align: center; } ul#functionalnav li a:hover, #functionalnav a:active, #functionalnav li#active a, #functionalnav li a.selected { color: #333333; height: 23px; display: inline-block; } /* Functional navigatie 2 ( HOME ) -------------------------- */ ul#functionalnav2 { margin:0; padding: 0px 0 0 0; list-style-type: none; font: normal 11px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; float:left; clear: none; } ul#functionalnav2 li { display: inline; text-align: center; padding:0; margin:0; } ul#functionalnav2 li a { height: 23px; /* 27 - padding */ padding: 0px 10px 0 10px; margin: 0; color: #6d6d6d; text-decoration: none; display: inline-block; text-align: center; } ul#functionalnav2 li a:hover, #functionalnav2 a:active, #functionalnav2 li#active a, #functionalnav2 li a.selected { color: #333333; height: 23px; /* 27 - padding */ padding: 0px 10px 0 10px; display: inline-block; } /* ------------------------------------------ */ /* MID */ /* ------------------------------------------ */ #mid #left { background: #ffffff; width: 300px; height:365px; position: absolute; top:95px; left:0px; float:left; z-index:1000; } .home #mid #left { width: 572px; } #mid #right { padding:0 0 0 42px; margin:0; height:365px; position:relative; top:0; left:0; /*572 - breedte van een blok*/ overflow: hidden; z-index:10; width: 90000px; } .home #mid #right { padding:0 0 0 314px; } /* BLOKKEN -------------------------- */ #white-fade-vertical { position: absolute; top: 0px; right: -1px; background: url(../img/white-overlay-vertical.png); z-index: 999; width: 144px; height: 459px; } #white-fade-vertical-home { position: absolute; top: 0px; right: -1px; background: url(../img/white-overlay-vertical.png); z-index: 999; width: 144px; height: 459px; } /* Aangepast waldo (blokwidth*1.5) (original: 262) */ .blok { width:393px; /* 282px -padding */ height:345px; /* 365px - padding */ padding: 10px 10px 10px 10px; margin: 0 3px 0 0; background: #fff; float:left; position: relative; top:0px; left:270px; font-size:11px; } .blok p { color:#333333; line-height:19px; text-align:justify; } .blok h1 { color:#353033; font-size:18px; line-height:19px; padding: 0; } /* Aangepast waldo (width*1.5) (original: 282) */ .blok div.readmore { background: url(../img/white-overlay.png) repeat-x 0px 8px; position: absolute; top:283px; left:0px; display:block; height:82px; width:413px; } .blok .readmore a { background: url(../img/readmore.png) no-repeat 0px 0px; position:absolute; bottom:12px; right:11px; width:78px; height:16px; display:block; } .blok .readmore a:hover { background-position: 0px -16px; } .blok .readmore a span { display:none; } .blok .tmbs { height: 105px; padding-bottom: 6px; } .blok .focus { color:#ec0990; } .blok ol { margin:0px 0px 0px 18px; padding: 0; color:#333333; text-align:justify; } .blok ul { list-style:none; margin:0; padding:0; } .blok ul li { list-style:none; color:#333333; text-align:justify; margin: 0 0 0 5px; line-height:19px; padding:0px 0px 0px 18px; background-image: url(../img/bullet.gif); background-repeat: no-repeat; background-position: 0px 0px; } .blok table { margin-top: 10px; } .blok table td { padding: 0 15px 15px 0; vertical-align: top; } a.solutionmap { background: url(../img/solutionmap.png) no-repeat 0px 0px; position: absolute; bottom:12px; left:11px; width:120px; height:16px; display:block; } a.solutionmap:hover { background-position: 0px -16px; } a.solutionmap span { display:none; } a.aboutus_video { background: url(../img/aboutus_video.png) no-repeat 0px 0px; width:98px; height:16px; display:block; } a.aboutus_video:hover { background-position: 0px -16px; } a.aboutus_video span { display:none; } a.survey_btn { background: url(../img/survey_btn.png) no-repeat 0px 0px; width:98px; height:16px; display:block; } a.survey_btn:hover { background-position: 0px -16px; } a.survey_btn span { display:none; } .blok .readmore a.solutionmap { background: url(../img/solutionmap.png) no-repeat 0px 0px; position: absolute; bottom:12px; left:11px; width:100px; height:16px; display:block; } .blok .readmore a.solutionmap:hover { background-position: 0px -16px; } .blok .readmore a.solutionmap span { display:none; } /* ------------------------------------------ */ /* RIGHT - NIV 3 */ /* ------------------------------------------ */ #mid #right-niv3 { padding:0 0 0 42px; margin:0; position:relative; top:0; left:0; /*overflow: hidden;*/ z-index:10; width: 960px; } #right-niv3 .blok { width:658px; /* 648px -padding */ height: auto; min-height: 345px; overflow: auto; padding: 10px 10px 10px 10px; margin:0; background: #fff; color:#333333; float:left; position: relative; top:0px; left:270px; font-size:12px; border-bottom: 1px solid #edecec; } #right-niv3 .printable { width:100%; position: relative; top:0px; left:0px; } #right-niv3 .blok h1 { color:#353033; font-size:32px; line-height:36px; margin:0; padding: 0 0 8px 0; } #right-niv3 .blok h2 { color:#ec0990; font-size:18px; line-height:22px; padding: 0 0 16px 0; } #right-niv3 a.backbtn { background: url(../img/backbtn.png) no-repeat 0px 0px; width:52px; height:16px; display:block; position: absolute; right: 18px; top: 10px; } #right-niv3 a.backbtn:hover { background-position: 0px -16px; } #right-niv3 a.backbtn span { display:none; } #right-niv3 a.printbtn { background-color:#f3f3f3; padding: 3px 3px 3px 10px; display:block; position: absolute; top: 7px; left: 990px; } #right-niv3 a.printbtn:hover { background-color:#fff; } #right-niv3 a.printbtn img { } /* Scroll up/down NIV3 -------------------------- */ #right-niv3 .scroll { display: none; background: url(../img/white-overlay.png) repeat-x 0px 0px; position:absolute; top:294px; left:312px; width:648px; height:88px; list-style:none; padding:0; margin:0; } #right-niv3 .scroll ul { float:left; position:absolute; top:46px; left:588px; } #right-niv3 .scroll li { display: inline; list-style:none; width:50px; height:24px; background:#c00; } #right-niv3 .scroll li a { display:block; width:25px; height:24px; background: url(../img/scroll_up-down.png) no-repeat 0px 0px; float:left; } #right-niv3 .scroll li a span { display:none; } #right-niv3 .scroll #scrollup a:link, #right-niv3 .scroll #scrollup a:visited { background-position:0px 0px; } #right-niv3 .scroll #scrolldown a:link, #right-niv3 .scroll #scrolldown a:visited { background-position:-25px 0px; } #right-niv3 .scroll #scrollup a:hover { background-position:0px -24px; } #right-niv3 .scroll #scrolldown a:hover { background-position:-25px -24px; } #right-niv3 .scroll #scrollup a:active { background-position:0px -48px; } #right-niv3 .scroll #scrolldown a:active { background-position:-25px -48px; } /* ------------------------------------------ */ /* FORM */ /* ------------------------------------------ */ #form { float:left; margin:0 0 0 25px; width:330px; } #form input { font-size: 11px; } #form p { margin-bottom: 6px; } #form input.required, #form textarea.required { font-family: "Trebuchet MS", Tahoma, Arial, Helvetica; font-size: 11px; width: 220px; } #form label.lbl { float: left; min-width: 80px; } #form label.error { display: block; color: #ec0990; text-align: left; margin-left: 80px; } #form .submit { min-width: 80px; margin-left: 80px; } #address { float:left; width:260px; } /* ------------------------------------------ */ /* SCROLL CONTROL */ /* ------------------------------------------ */ #scrollcontrol { position: absolute; top:400px; left:0px; width:100%; z-index:10000; } #scrollcontrol a.rewind { position: absolute; top:0; left:286px; float:left; background: url(../img/btn-rewind.gif) top; width: 28px; height: 20px; } #scrollcontrol a.rewind:hover { background-position: bottom; } #scrollcontrol a.ffwd { float:right; background: url(../img/btn-ffwd.gif) top; width: 28px; height: 20px; } #scrollcontrol a.ffwd:hover { background-position: bottom; } #scrollcontrol h1 { float:left; position:relative; top:0; left:0; background:#ec0990; color:#FFFFFF; font-size:14px; font-weight:normal; width:200px; height:18px; /* 20 - padding*/ text-align:right; padding: 2px 12px 0 0; } .home #scrollcontrol { background: url(../img/slogan.gif) no-repeat top left; } .home #scrollcontrol .rewind { position: absolute; top:0; left:558px; float:left; } /* ------------------------------------------ */ /* BOT */ /* ------------------------------------------ */ /* global units nav -------------------------- */ #units { position:relative; list-style:none; padding:0px; margin: 10px 0 0 10px; width:300px; background:#fff; float:left; } #units li { display: inline; list-style:none; width:75px; height:50px; background:#CC6699; } #units li a { display:block; width:75px; height:50px; background: url(../img/units-cross.gif) no-repeat 0px 0px; float:left; } #units li a span { display:none; } #units #unit-businessconsulting a:link, #units #unit-businessconsulting a:visited { background-position:0px -50px; } #units #unit-projectmanagement a:link, #units #unit-projectmanagement a:visited { background-position:-75px -50px; } #units #unit-integratedsolutions a:link, #units #unit-integratedsolutions a:visited { background-position:-150px -50px; } #units #unit-managedservices a:link, #units #unit-managedservices a:visited { background-position:-225px -50px; } #units #unit-businessconsulting a:hover, #units #unit-businessconsulting a.active { background-position:0px -50px; } #units #unit-projectmanagement a:hover, #units #unit-projectmanagement a.active { background-position:-75px -50px; } #units #unit-integratedsolutions a:hover, #units #unit-integratedsolutions a.active { background-position:-150px -50px; } #units #unit-managedservices a:hover, #units #unit-managedservices a.active { background-position:-225px -50px; } body.niv3 #bot { } body.niv3 #units { position: absolute; top: 460px; left: 0px; } body.niv3 #functionalnav { padding-left: 320px; } /* HOME units nav -------------------------- */ .home ul#units { width: 572px; height: 70px; list-style-type: none; background: url("../img/units.gif"); margin:0; padding:0; float:left; } .home ul#units li { display: inline; margin:0; padding:0; } .home ul#units li a { height: 70px; width:143px; margin:0; padding:0; display: block; float:left; background:none; } .home ul#units li a span { display: none; } /* ------------------------------------------ */ /* customers */ /* ------------------------------------------ */ div.pdfbuttons { position: absolute; top: 7px; right: 70px; } div.pdfbuttons a img { border-bottom: 2px solid #fff; padding-right: 5px; } div.pdfbuttons a:hover img { border-bottom: 2px solid #666; } /* ------------------------------------------ */ /* tooltip, mapped image */ /* ------------------------------------------ */ ul.mapped-image { padding: 0; list-style: none; list-style-image: none; list-style-type: none; z-index: 2900; } ul.mapped-image li { margin: 0; padding: 0; list-style: none; display: block; position: absolute; background-image: none; } ul.mapped-image li a { display: block; width: 100%; height: 100%; } ul.mapped-image li a span { display: none; } /* -- Tooltip style --------------------- */ #tooltip { position: absolute; z-index: 3000; border: 1px solid #ffffff; background-color: #000000; padding: 5px 6px 3px 8px; opacity: 0.85; font-family: "Trebuchet MS", Tahoma, Arial, Helvetica; color: #FFF; font-size: 80%; font-weight: normal; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: #666666 url('../img/tooltiparrow.gif') no-repeat; background-position: 2px 2px; /*width: 190px;*/ } #tooltip h3, #tooltip div { margin: 0; } /* ------------------------------------------ */ /* clearfix */ /* ------------------------------------------ */ .clearfix{ clear: both; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #planbelgie { display: block; width: 300px; height: 428px; position: absolute; left: 995px; top: 95px; background: url('../userfiles/image/planbelgie.jpg'); }