/* Definition: Screen CSS for Kiliman8 Author: Wil Linssen [http://www.wil-linssen.com] Revision: 03.08.09 ---------------------------------- Table of contents ---------------------------------- 1.BODY 2.GLOBAL ELEMENTS 3.HEADINGS 4.LINKS 5.IMAGES & VIDEOS 6.LAYOUT 7.BRANDING/MASTHEAD 8.NAVIGATION 9.SITEINFO/FOOTER INDIVIDUAL PAGES -------------------------------- 10.HOME 11.ABOUT US 12.PRODUCTS 13.CASE STUDIES ---------------------------------- COLOURS ---------------------------------- Grey: #777777 Red: #ac0e13 Orange: #f6a923 Dark blue: #26578b Blue: #40afe0 */ /* 1.BODY -------------------------------------------------------------------------------------------------------------------- */ body { background-color: #fff; font: 14px Arial; color: #777; } * { margin: 0; padding: 0; } /* 2 GLOBAL ELEMENTS -------------------------------------------------------------------------------------------------------------------- */ ul.reset { list-style: none; margin: 0; padding: 0; } ul.inline li { display: inline; } .spaced { margin-bottom: 20px; } a img { border: none; } a:focus { outline: none; } .hidden { display: none; } /* Needs to be in a relative parent */ .ajax-loader { position: absolute; left: 50%; top: 50%; margin: -24px 0 0 -24px; width: 24px; height: 24px; background: url(http://www.insphire.com/images/site/ajax-loader.gif) no-repeat 0 0; } .alignleft { float: left; margin: 0 10px 5px 0; } .alignright { float: right; margin: 0 0 5px 10px;} .curvycorner { -moz-border-radius: 6px; -webkit-border-radius: 6px; } span.express, p.express { color: #ac0e13; } span.office, p.office { color: #f6a923; } span.corporate, p.corporate { color: #26578b; } /* 3.HEADINGS -------------------------------------------------------------------------------------------------------------------- */ body.home h2 { color: #ac0e13; font-size: 1.4em; margin-bottom: 20px; display: block; clear: both; } div#content div.col.one h2 { color: #af0e14; font-size: 1.4em; margin-bottom: 20px; clear: left; } div#content div.col.one h3 { color: #f6a923; font-size: 1.2em; margin-bottom: 20px; clear: left; } div#content div.col.one h2.office { color: #f6a923; } div#content div.col.one h2.corporate { color: #26578b;} div#product-showcase div#product-info h3 { font-size: 1.1em; margin-bottom: 1em; float: left; color: #fff; } div#callout div.col h3 { background-color: #f9f9f9; color: #898989; padding: 10px; } div#callout div.col h3 a { color: #898989; text-decoration: none; } div#callout div.col h3 a:hover { color: #40afe0; } div#content div.col.two div.sidebar h4 { margin: -11px -11px 10px -11px; padding: 5px 10px; background: repeat-x 0 0; height: 19px; } div#content div.col.two div.sidebar.one h4 { background-image: url(http://www.insphire.com/images/site/sidebar_h4One.jpg); color: #f5dede; } div#content div.col.two div.sidebar.two h4 { background-image: url(http://www.insphire.com/images/site/sidebar_h4Two.jpg); color: #ffffe8; } div#timeline ul li h4 { color: #5981a5; margin-bottom: 20px; font-size: 16px; } div#timeline ul li.current h4 { color: #fff; } body.our-products div#content div.col.one h2, body.onze-producten div#content div.col.one h2, body.unsere-produkte div#content div.col.one h2 { clear: none; } div#content.office-edition div.col.one h2 { color: #f6a923; } #content div.product h3 a { text-decoration: none; } #content div.product.express h3 a { color: #ac0e13; } #content div.product.office h3 a { color: #f6a923; } #content div.product.corporate h3 a { color: #26578b; } #content div.product.crm h3 a { color: #40afe0; } #content div.product.mobileWorking h3 a { color: #834888; } #content div.product.webPortal h3 a { color: #0aa653; } body.blog div.post h3 a.blog, body.blog div.post h3 a.event, body.blog div.post h3 a.news { padding-left: 20px; background: no-repeat 0px 2px; } body.blog div.post h3 a.blog { background-image: url(http://www.insphire.com/images/site/icons/icon-blog.png); } body.blog div.post h3 a.event { background-image: url(http://www.insphire.com/images/site/icons/icon-event.png); } body.blog div.post h3 a.news { background-image: url(http://www.insphire.com/images/site/icons/icon-news.png); } /* 4.LINKS -------------------------------------------------------------------------------------------------------------------- */ /* 5.IMAGES / VIDEOS -------------------------------------------------------------------------------------------------------------------- */ a#flowplayer { width: 740px; height: 460px; display: block; } /* 6.LAYOUT -------------------------------------------------------------------------------------------------------------------- */ div.wrapper { width: 960px; margin: 20px auto; clear: both; } div#content { width: 960px; overflow: auto;} div#content div.col { float: left; } div#content div.col.one { width: 740px; margin-right: 20px; padding-left: 10px; } div#content div.col.two { width: 190px; } .clear { clear: both; } /* 7.BRANDING / MASTHEAD -------------------------------------------------------------------------------------------------------------------- */ div#header { border: 1px solid #f3f3f3; background-color: #fff; display: block; clear: both; z-index: 20; height: 122px; position: relative; } div#nav-top { padding: 0.5em 0; display: block; background-color: #f0f0f0; margin-bottom: 20px; position: relative; z-index: 40;} ul#site-functions { width: 960px; margin: 0 auto; position: relative; z-index: 40; } ul#site-functions li a { font-size: 0.85em; padding: 0 10px; border-right: 1px solid #8f8f8f; text-decoration: none; color: #8f8f8f; } ul#site-functions li a.first { padding-left: 0; } ul#site-functions li a.last { border: none; } ul#site-functions li a:hover { color: #000; text-decoration: underline; } ul#site-functions li ul.dropdown { position: absolute; top: 1.80em; left: -0.5em; font-size: 0.85em; display: block; padding: 0.5em; background-color: #f0f0f0; z-index: 50; overflow: auto; } ul#site-functions li ul.dropdown li { display: block; float: left; } ul#site-functions li ul.dropdown li a { border: none; } ul#site-functions li ul.dropdown li a.language { text-indent: -10000px; display: block; width: 16px; height: 11px; background: no-repeat 0 0; } ul#site-functions li ul.dropdown li a.language.english { background-image: url(http://www.insphire.com/images/site/icons/gb.png); } ul#site-functions li ul.dropdown li a.language.nederlands { background-image: url(http://www.insphire.com/images/site/icons/nl.png); } ul#site-functions li ul.dropdown li a.language.deutsch { background-image: url(http://www.insphire.com/images/site/icons/de.png); } ul#site-functions form#header-search input#keywords { border: none; padding: 0.5em 1em; float: left; width: 200px; } ul#site-functions form#header-search label { display: none; } h1#logo a { width: 205px; height: 86px; display: block; float: right; background: url(http://www.insphire.com/images/site/insphire-logo.jpg) no-repeat 0 0; text-indent: -10000px; margin: 5px 5px 5px 40px; } div#header div#header-snippet ul li { font-size: 1.5em; width: 685px; position: absolute; top: 25px; left: 25px; text-align: center; } div#header div#header-snippet ul li a { color: #f9b16b; text-decoration: none; background-color: #fff;Ç } div#header div#header-snippet ul li a:hover { color: #eea258; } /* 8.NAVIGATION -------------------------------------------------------------------------------------------------------------------- */ ul#nav-main { display: block; background: #ac0e13; clear: both; width: 100%; height: 26px; position: relative; } ul#nav-main li { position: relative; float: left; } ul#nav-main li a { padding: 5px 10px; color: #f5dede; text-decoration: none; font: bold 13px Arial; display: block; border-left: 1px solid #c15054; border-right: 1px solid #8c090c; } ul#nav-main li a.last { border-right-color: #8c090c; } ul#nav-main li a:hover, ul#nav-main li a.sfHover { color: #fff; background-color: #f9a51e;} ul#nav-main li ul { position: absolute; left: 0; top: -999em; width: 200px; z-index: 99; display: block; background-color: #f9a51e; -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; } ul#nav-main li:hover ul, ul#nav-main li.sfHover ul { top: 26px; } ul#nav-main li ul li { clear: both; } ul#nav-main li ul li a { white-space: nowrap; border: none; display: block; float: none; clear: both; } /* 9.SITEINFO/FOOTER -------------------------------------------------------------------------------------------------------------------- */ div#footer { display: block; background-color: #bbb; color: #fff; font-size: 0.9em; width: 100%; overflow: auto; padding: 10px 0; } div#footer div.wrapper { margin: 0 auto; } div#footer a { color: #fff; text-decoration: none; } div#footer ul.partners { margin-bottom: 10px; } div#footer ul.partners li { margin-right: 25px; } div#footer hr { clear: both; color: #ccc; margin-bottom: 10px; } div#footer ul.shortcuts{ float: left; } div#footer ul.shortcuts li a { padding-right: 10px; margin-right: 10px; border-right: 1px solid #fff; } div#footer ul.shortcuts li.last a { border: none; } div#footer ul.accessibility li a { display: block; float: left; margin-left: 5px; padding: 2px 6px; border: 1px solid #626260; } div#footer ul.accessibility li a.regular { background-color: #fff; color: #818181; margin-top: 0.2em; } div#footer ul.accessibility li a.dyslexic { background-color: #eff0c5; color: #818181; font-size: 1.1em; margin-top: 0.1em; } div#footer ul.accessibility li a.high-contrast { background-color: #000; color: #fff; font-size: 1.2em;} div#footer ul.accessibility { float: right; margin: 10px 0; } div#linssen-trackback { margin-top: 0; } div#linssen-trackback a img { margin-left: -5px; } /* 10.HOME -------------------------------------------------------------------------------------------------------------------- */ body.home { background: url(http://www.insphire.com/images/site/body-bg-home.jpg) repeat-x 0 300px; } body.home div.intro { clear: both; margin-bottom: 20px;} div#product-showcase ul#product-boxes { width: 480px; display: block; float: left; position: relative; } div#product-showcase ul#product-boxes li a img { width: 152px; height: 206px; } div#product-showcase ul#product-boxes li a { position: absolute; z-index: 0; top: 20px; } div#product-showcase ul#product-boxes li a#express, div#product-showcase ul#product-boxes li a#expres { left: -10px; } div#product-showcase ul#product-boxes li a#office-edition, div#product-showcase ul#product-boxes li a#office-editie { left: 125px; top: 0px; } div#product-showcase ul#product-boxes li a#office-edition img, div#product-showcase ul#product-boxes li a#office-editie img { width: 199px; height: 270px; } div#product-showcase ul#product-boxes li a#corporate-edition, div#product-showcase ul#product-boxes li a#corporate-editie { left: 300px; } div#product-showcase div.container { background: 0 0 no-repeat; display: block; padding: 7px 16px 0 16px; margin: 5px; width: 439px; display: none; cursor: pointer; } div#product-showcase div.container.office-edition, div#product-showcase div.container.office-editie { display: block; } div#product-showcase div.container.express, div#product-showcase div.container.expres { background-image: url(http://www.insphire.com/images/site/productBoxTitle-express-edition.jpg); } div#product-showcase div.container.office-edition, div#product-showcase div.container.office-editie { background-image: url(http://www.insphire.com/images/site/productBoxTitle-office-edition.jpg); } div#product-showcase div.container.corporate-edition, div#product-showcase div.container.corporate-editie { background-image: url(http://www.insphire.com/images/site/productBoxTitle-corporate-edition.jpg); } div#product-showcase div#product-info { width: 477px; height: 235px; margin: -6px -3px 40px 0; display: block; background: url(http://www.insphire.com/images/site/productInfo-bg.png) no-repeat 0 0; float: right; clear: both; color: #2f2f2f; position: relative; } div#product-showcase div#product-info { overflow: hidden; } div#product-showcase div#product-info a.see-more { color: #e5e5e5; text-decoration: none; font-size: 0.9em; float: right; clear: right; background: url(http://www.insphire.com/images/site/arrow-continue-14x14.png) no-repeat 100% 3px; padding: 2px 25px 0 0; } div#product-showcase div#product-info div.summary { clear: left; } div#product-showcase div#product-info p { margin-bottom: 16px;} div#product-showcase div#product-info ul { margin-left: 16px; list-style-image: url(http://www.insphire.com/images/site/tick-9x9.png); display: block; float: left; width: 184px; } div#product-showcase div.container a.video-link { display: block; background: url(http://www.insphire.com/images/site/vid-play-btn.png) no-repeat 26px 66px #f9f9f9; border: 1px solid #c7c7c7; float: left; margin-left: 10px; width: 80px; height: 110px; position: relative; padding: 10px 137px 0 10px; color: #2f2f2f; text-decoration: none; text-align: center; font-size: 0.8em; } div#product-info div.container a.video-link img { position: absolute; top: -18px; left: 100%; margin-left: -127px; } div#callout { display: block; width: 957px; border: 1px solid #eaeaea; background-color: #fcfcfc; clear: both; overflow: auto; margin-bottom: 40px; } div#callout div.col { width: 319px; display: block; float: left; cursor: pointer; } div#callout div.col p { padding: 10px; } /* Content ----------------------------------------------------------------------------------------------------------------------------------- */ div#content p { line-height: 1.4em; margin-bottom: 20px; } div#content a { color: #40afe0; } div#content a:hover { color: #26578b; } div#content div.col.one ul { margin-left: 20px; list-style-type: disc; margin-bottom: 20px; } div#content div.col.one ul.reset { list-style-type: none; margin: 0; padding: 0; } div#content div.col.two div.sidebar { width: 168px; border: 1px solid #ccc; padding: 10px 10px 0 10px; font-size: 0.9em; margin-bottom: 20px; background-color: #fff; overflow: hidden; } div#content div.col.two div.sidebar p { margin-bottom: 10px; } div#content div.col.two div.sidebar ul, div#content div.col.two div.sidebar ol { margin: 0 0 10px 20px; } div#admin-functions { display: block; clear: both; margin: 10px 0; padding: 10px; background-color: #ebfcd4; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; } div#admin-functions a { padding-left: 20px; height: 16px; background: no-repeat 0 0; color: #8f8f8f; text-decoration: none; } div#admin-functions a:hover { color: #000; } div#admin-functions a.edit { background-image: url(http://www.insphire.com/images/site/icons/page_edit.png); } /* About us timeline ----------------------------------------------------------------------------------------------------------------------------------- */ div#timeline { display: block; float: left; width: 647px; height: 138px; overflow: hidden; position: relative; background: url(http://www.insphire.com/images/site/aboutUs-timeline-bg.jpg) no-repeat 0 0; } div#timeline ul { display: block; width: 10000px; z-index: 0; position: absolute; top: 0; left: 0; } div#timeline ul li { display: block; float: left; width: 230px; height: 138px; padding: 5px 10px 30px 10px; color: #d9d9d9; } div#timeline ul li.current { color: #777777; } a.go-left, a.go-right { display: block; float: left; width: 36px; height: 36px; overflow: hidden; background: url(http://www.insphire.com/images/site/btn-leftAndRight.jpg) no-repeat 0 50%; text-indent: -9999px; margin: 50px 5px 0 0; } a.go-right { margin-left: 5px; background-position: -36px 0; } /* Site map ----------------------------------------------------------------------------------------------------------------------------------- */ ul.site-map { list-style-type: circle; padding-left: 20px; } ul.site-map li ul { margin-left: 20px; } /* Contact us ----------------------------------------------------------------------------------------------------------------------------------- */ div.contact-box { display: block; padding: 0.5em 10px; margin-bottom: 1.5em; background-color: #f0f0f0; } div.contact-box p { margin-bottom: 1em; } div.contact-box.phone, div.contact-box.email, div.contact-box.form { float: left; width: 340px; } div.contact-box.live-chat, div.contact-box.map { float: right; width: 340px; } div.contact-box.live-chat { text-align: center; padding: 3px 10px; } body.contact-ons div.contact-box.email, body.kontact div.contact-box.email { float: right; } div.contact-box span, div.contact-box address { padding-left: 27px; background: no-repeat 0 -2px; } div.contact-box.email span { background-image: url(http://www.insphire.com/images/site/icons/email.png); } div#content div.col.one div.contact-box.email span a { color: #8f8f8f; text-decoration: none; } div.contact-box.map address { background-image: url(http://www.insphire.com/images/site/icons/address.png); font-style: normal; margin-bottom: 10px; } div.contact-box.live-chat span { background-image: url(http://www.insphire.com/images/site/icons/chat.png); } div.contact-box.phone span { background-image: url(http://www.insphire.com/images/site/icons/phone.png); } div.contact-box label span.required { padding: 0; margin: 0; color: #ac0e13; } div.contact-box.map div#map { width: 334px; height: 35em; border: 1px solid #fff; overflow: hidden; } div.contact-box.live-chat div.offline, div.contact-box.live-chat div.online a { display: block; text-align: center; padding: 0.5em 0; margin: 1em 0 0.5em 0; } div.contact-box.live-chat div.offline { background-color: #d6d6d6; color: #fefefe;} div.contact-box.live-chat div.online a { background-color: #83d975; color: #fff; text-decoration: none; } div.contact-box.form #freeform input.text, div.contact-box.form #freeform textarea { background-color: #fff; border: none; padding: 0.5em; width: 325px; font-size: 1em; } div.contact-box.form #freeform textarea { height: 6em; } div.contact-box.form #freeform input.button { background-color: #bbbbbb; color: #fff; border: none; font-weight: bold; padding: 0.5em 1.5em; display: block; float: right; clear: both; margin-bottom: 0; } /* Product page ----------------------------------------------------------------------------------------------------------------------------------- */ /*body.our-products, body.how-we-work, body.onze-producten, body.unsere-produkte { background: url(http://www.insphire.com/images/site/body-bg-home.jpg) repeat-x 0 210px; }*/ body.our-products div#content img.product-box, body.onze-producten div#content img.product-box, body.unsere-produkte div#content img.product-box { float: right; margin-left: 60px; } div#content div.video, div#content div.enhanced-product { display: block; background: #efefef; padding: 20px; clear: both; margin-bottom: 20px; background: #efefef } div#content div.enhanced-product h3 { color: #8f8f8f; margin-bottom: 10px; font-size: 1em; } div#content div.enhanced-product p { margin: 0; } div#content div.enhanced-product div.container { padding: 0 0 0 70px; margin: 0; background: no-repeat 0 0; } div#content div.enhanced-product div.container.crm { background-image: url(http://www.insphire.com/images/site/icons/product-crm.png); } div#content div.enhanced-product.div.container.mobile-working { background-image: url(http://www.insphire.com/images/site/icons/product-mobileWorking.png); } div#content div.enhanced-product div.container.web-portal { background-image: url(http://www.insphire.com/images/site/icons/product-web.png); } div#content div.enhanced-product div.container.workshop { background-image: url(http://www.insphire.com/images/site/icons/product-workshop.png); } #content div.product { width: 213px; margin-right: 20px; float: left; text-align: center; } #content div.product.small { width: 157px; margin-right: 10px; } #content div.product.corporate, #content div.product.last { margin-right: 0; } #content div.product.current { border: 1px solid #40afe0; width: 211px; } #content div.product.small.mobileWorking h3 { margin-bottom: 0; } #content div.product.small.workshop p { margin-bottom: 0; } /* Search page ----------------------------------------------------------------------------------------------------------------------------------- */ p.overview { display: block; background-color: #f5f5f5; border: 1px solid #d9d5d5; padding: 1em; font-size: 1.2em; } table#search-results { border: 1px solid #d9d5d5; } table#search-results th { background: url(http://www.insphire.com/images/site/gradient-blue.jpg) repeat-x 50% 50%; color: #fff;} table#search-results th, td { text-align: left; padding: 5px 10px; vertical-align: top; } table#search-results tr.even { background-color: #f5f5f5;} table#search-results b a { display: block; color: #195993; text-decoration: none; } table#search-results .highlight { background-color: yellow } /* News & events ----------------------------------------------------------------------------------------------------------------------------------- */ table.newsEvents { width: 190px; font-size: 0.9em; margin-bottom: 20px; } table.newsEvents tr.calendarHeader { background-color: #ac0e13; color: #fff; font: bold 1.1em Arial; } table.newsEvents tr.calendarHeader a { color: #fff; text-decoration: none; } table.newsEvents td.calendarDayHeading { background-color: #f6a923; color: #fff; } table.newsEvents td, table.newsEvents th { width: 27px; padding: 2px; text-align: center; } table.newsEvents td a { background-color: #40afe0; color: #fff; text-decoration: none; margin: -2px; padding: 2px; } ul.nav_categories li a.current { font-weight: bold; express} body.blog div.post { border-bottom: 1px solid #ccc; padding: 20px 10px; display: block; clear: both; } body.blog div.post.even { background-color: #efefef; } body.blog div.post p.date { margin-top: -20px; font-size: 0.8em; } /* Careers ----------------------------------------------------------------------------------------------------------------------------------- */ ul#vacancy-list li { display: block; padding: 10px; border-bottom: 1px dashed #D5D5D5; font-size: 0.9em;} ul#vacancy-list li.odd { background-color: #f0f0f0; } div#content div.col.one ul#vacancy-list li h3 { margin-bottom: 10px; padding-left: 20px; background: url(http://www.insphire.com/images/site/icons/vacancy.png) no-repeat 0 2px; font-size: 1.1em; } ul#vacancy-list li p.salary, ul#vacancy-list li p.location { margin: 0; color: #40afe0; } ul#vacancy-list li p.location { margin-bottom: 10px; } ul#vacancy-list li a.apply { padding: 5px 0; border: 1px solid #ccc; background-color: #83d975; color: #fff; text-decoration: none; font-weight: bold; display: block; width: 10em; text-align: center;} /* Case studies ----------------------------------------------------------------------------------------------------------------------------------- */ ul#case-studies { list-style-type: none; clear: both; } ul#case-studies li { padding: 10px; border-bottom: 1px dotted #8f8f8f; display: block; } ul#case-studies li.two { background-color: #efefef; } ul#case-studies li p { margin-bottom: 0; } ul#case-studies li p.title strong { color: #40afe0; } ul#case-studies li small.date { font-size: 0.8em; font-style: italic; margin-bottom: 10px; display: block; } body.industrie-case-studies div#content div.col.one ul li a.current, body.fallstudien div#content div.col.one ul li a.current, body.industry-case-studies div#content div.col.one ul li a.current { font-weight: bold; } body.industrie-case-studies div.contact-box, body.fallstudien div.contact-box, body.industry-case-studies div.contact-box { clear: both; } /* Tsunami ----------------------------------------------------------------------------------------------------------------------------------- */ div.dock { height: 30px; text-align: center; margin: -10px 0 20px 0; width: 960px; } div.dock ul li { position: relative; } div.dock ul li a.dock-item { position: relative; width: 30px; height: 30px; color: #000; text-align: center; text-decoration: none; padding: 0 5px; } div.dock ul li a.dock-item img { width: 30px; } div.dock ul li div.tooltip { display: block; width: 179px; height: 72px; padding: 27px 20px 20px; background: url(http://www.insphire.com/images/site/tooltip/red_arrow.png); position: absolute; top: 10px; left: -114px; color: #fff; text-align: left; display: none; } div.dock ul li div.tooltip strong { display: block; margin-bottom: 5px; } div.category_dock { margin: -15px auto 15px auto; overflow-y: auto; } div.category_dock ul li { display: block; float: left; font-size: 0.8em; text-align: center; margin-left: 5px; } div.category_dock ul li.first { margin-left: none; }