/* ---------------------------------------------------------------- */ /* */ /* CSS BY GENKGO V.O.F */ /* HTTP://WWW.GENKGO.NL */ /* */ /* ---------------------------------------------------------------- */ /* ---------------------------- */ /* STANDARD HTML TAG DEFINITION */ body { font-size: 12px; font-family: Trebuchet, Tahoma, Arial, sans-serif; color: #333; background-image: url(../../images/genkgo/common-background.png); background-repeat: repeat-x; background-color: #ccc; } p { line-height: 1.5em; /* 18px */ margin: 0 0 1.5em 0; } a { color: #00AAAD; } a:hover { color: #007C7F; } /* headings */ h1, h2, h3, h4, h5, h6 { font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;} h1 { font-size: 2em; /* 24px */ line-height: 1.5em; /* 36px */ margin-top: 0.75em; margin-bottom: 0em; } h2 { font-size: 1.8333em; /* 22px */ line-height: 1.6364em; /* 36px */ margin-top: 0.8182em; margin-bottom: 0em; } h3 { font-size: 1.6667em; /* 20px */ line-height: 1.8em; /* 36px */ margin-top: 0.9em; margin-bottom: 0em; } h4 { font-size: 1.5em; /* 18px */ line-height: 1em; /* 18px */ margin-top: 1em; margin-bottom: 0em; } h5 { font-size: 1.3333em; /* 16px */ line-height: 1.125em; /* 18px */ margin-top: 1.125em; margin-bottom: 0em; font-style: italic; } h6 { font-size: 1.1667em; /* 14px */ line-height: 1.2857em; /* 18px */ margin-top: 1.2857em; margin-bottom: 0em; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration: none;} /* rounded boxes */ .rounded_light { border-radius: 0.75em; -webkit-border-radius: 0.75em; -moz-border-radius: 0.75em; background: #ECF7FF;} .rounded_dark { border-radius: 0.75em; -webkit-border-radius: 0.75em; -moz-border-radius: 0.75em; background: #8CD9DA;} .rounded_box { border-radius: 0.75em; -webkit-border-radius: 0.75em; -moz-border-radius: 0.75em; background: url(../../images/genkgo/home-suscribe-bg.png) } .rounded_button { border-radius: 0.5em; -webkit-border-radius: 0.55em; -moz-border-radius: 0.5em; } /* buttons */ .button { top:40px; font-size: 1.3333em; color: #fff; text-decoration: none; font-weight: bold; display: block; width: 138px; height: 42px; line-height: 34px; cursor:pointer; text-align:center; } a.button:hover { text-decoration: underline; } .button1 { background: url(../../images/genkgo/common-button-li.png) top left;} .button2 { background: url(../../images/genkgo/common-button-a.png) top right; } /* border */ .border_green { border: solid 1px #008A8D; } .border_grey { border: solid 1px #999; } .border_lightgrey { border: solid 1px #ccc; } /* colors */ .white { background: #fff; } /* shit die nergens bij hoort */ ul li {padding: 0;line-height: 1.5em } /* ---------------------------- */ /* PAGE MAIN SECTIONS */ div#container { margin: 0 auto; width: 960px;} div#content-wrapper { background: url(../../images/genkgo/common-container-bg.png) repeat-y; min-height: 600px; } div.section { padding: 1.5em 0; } div#top { height: 93px; width: 960px; position: relative; } div#middle { } div#bottom { padding: 38px 30px 30px 30px; background: url(../../images/genkgo/hr.png) no-repeat 0 0; } /* ------------------------- */ /* TOP : LOGO + NAVIGATION */ img#logo { position: absolute; top:36px; left:10px; } ul#nav { position: absolute; float:right; top: 52px; right: 10px; } ul#nav li { float:left; padding-right: 30px; display: block; } ul#nav li a { font-size: 1.3333em; text-decoration: none; color: #027679; font-weight: normal; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; } ul#nav li a:hover { text-decoration: underline; color: #027679; } ul#nav li a.active { display: block; background: grey; padding: 8px 12px 6px 12px; margin: -8px -12px 0 -12px; background: #ECF7FF; } ul#nav li.last { display:block; width:123px; height:37px; padding:0; background: url(../../images/genkgo/common-orderbutton.png) no-repeat; position: relative; top:-10px; padding: 0; } ul#nav li.last a { display:block; line-height: 36px; width: 123px; height: 37px; color: #fff; font-weight: bold; text-align: center; cursor: pointer; } ul#nav li.last a:hover, ul#nav li.last a.active { background: url(../../images/genkgo/common-orderbutton-inv.png) no-repeat; padding-top: 1px; text-decoration: underline; } ul#nav li.last a.active { padding:0; margin: 0; } /* ------------------------- */ /* HEADER */ div.header { width: 960px; position: relative; } div#header_front { height: 250px; background: url(../../images/genkgo/home-header.png) no-repeat -1px 0; } div#header_sub { height: 206px; background: url(../../images/genkgo/sub-feature-header-1.png) no-repeat; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;} div.tabs ul { position: absolute; top: 205px; left:20px; } div.tabs li { display: block; float:left; width: 300px; padding-right: 10px; text-align: center; font-size: 14px; } div.tabs li.last { padding-right: 0; text-align: right; } div.tabs li.first { text-align: left; } div.tabs li a { background: #007A7D; padding: 8px 16px; color: #fff; text-decoration: none; } div.tabs li a:hover { background: #005B5E; } div.tabs li div { position:absolute; left:-9999em; } div.tabs li.current div { width: 920px; left:0; top: -150px; text-align: center; } div.tabs li div img { display:block; margin-left: auto; margin-right: auto; margin-top:8px; } div.tabs li div p { display: block; width: 800px; margin-left: auto; margin-right: auto; text-align: center; font-size: 1.3333em; font-family: Trebuchet, Tahoma, Arial, sans-serif; line-height: 1em; color:#222; } /* font stack fixen */ div.tabs ul ul { position:static; } div.tabs ul ul li { display:inline; font-size: 1.3333em; font-family: Trebuchet, Tahoma, Arial, sans-serif; float:none; width:auto;padding:0;margin:0 0.25em 0.25em;text-align:center; } div.tabs li.top li {display:block; } div.tabs li div ul {text-align: center} div.tabs li div li {} a.bestellen { background: url(../../images/genkgo/common-button-bestellen.png) no-repeat; position: absolute; top: 135px; left: 30px; } a.bestellen:hover { background: url(../../images/genkgo/common-button-bestellen-inv.png) no-repeat; padding-top: 1px; color:white; } a.meerinfo { color: #fff; text-decoration: none; font-weight: bold; font-size: 1.3333em; position: absolute; top: 142px; left: 180px; } a.meerinfo:hover { text-decoration: underline; } /* ------------------------- */ /* FRONT - MIDDLE */ #above { padding:30px;background:url("../../images/genkgo/hr.png") no-repeat scroll bottom transparent;} #above h2 { font-size: 1.3333em; line-height: 1.125em; margin-top:0; margin-bottom: 1.125em; } #advantages {width:450px;float:left;} #advantages li { padding: 0 10px 0 30px; margin:0 0 1em; width:180px; float:left; background:transparent url(../../images/genkgo/vinkje.png) no-repeat 3px 2px; } #slider { height: 180px;width: 450px;float:left; } #slider li {list-style:none;position:relative;} #slider div.box {position:absolute;height: 180px;width: 450px;left:-9999em;} #slider li.active div.box {left:auto;} #slider a.slider { height: 10px; width: 10px; background: #fff; display: block; position: absolute; top:10px; right: 30px; z-index:1000; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ie-border-radius: 5px; border-radius: 5px; } #slider a.slider span { position:absolute; left:-9999em; } #slider li.active a.slider, #slider a.slider:hover {opacity: .5} #slider li.first a.slider {right: 50px} #slider li.last a.slider {right: 10px} #slider p {color: #333;padding: 10px 15px;font-size: 1.1667em;line-height: 1.2857em;margin-bottom: 0;} #slider a.more { bottom:0; display:block; margin:0; opacity:.8; padding:0; position:absolute; right:auto; text-indent:-9999px; top:auto; width:448px; z-index:101; text-decoration:none; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; border: 1px solid #999; border-top: none; background:url("../../images/genkgo/bg-gradient-whitegrey.png") repeat-x; } #slider li.active a.more { text-indent:0; } #slider img {height: 180px;width: 450px;display:block;} #features, #priceplan, #customers { float: left; padding-top:15px;} #features { width: 440px; padding-left: 30px;} #features li { display: block; float:left; width: 200px; height: 162px; margin: 0 20px 18px 0; } #features li img { height:36px; widows:36; float: left; margin-right: 4px; position: relative; margin-top:-2px; margin-left:-5px; } #features li p { color:#333333; width: 195px; margin-top: 4px; } #features h2 { font-size: 1.3333em; line-height: 1.125em; margin-top:.45em; margin-bottom: 1.125em; display: none; } #features h3 {margin-top:.25em; font-size: 1.3333em; line-height: 1em; } #features li a {color: #333; text-decoration: none !important;} #features li a:hover {opacity:.5} #features li a:hover h2, #features li a:hover h3 {cursor:pointer;text-decoration:underline;} #priceplan { width: 135px; padding:22px 15px 0 10px;} #priceplan li { display: block; height: 100px; width: 130px; margin-bottom: 15px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background: url(../../images/genkgo/bg-gradient-whitegrey.png) repeat-x;} #priceplan li a { display: block; width:130px; height:100px; background-repeat: none;} #priceplan li a.one-solution { background-image: url(../../images/genkgo/home-priceplan-2.png); } #priceplan li a.pricing { background-image: url(../../images/genkgo/home-priceplan-1.png); } #priceplan li a.efficiency { background-image: url(../../images/genkgo/home-priceplan-3.png); } #priceplan li a span { text-indent:-9999px; display: block; width:130px; height:100px; } div#customers { width: 310px; padding: 12px 10px 0;} div#customers h2 { font-size: 1.3333em; line-height: 1.125em; margin-top:.45em; margin-bottom: 1.125em; } div#customers li { display: block; height: 80px; width: 80px; float:left; margin: 0 10px 14px 0; padding:5px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background: #fff; border: solid 1px #CCCCCC;} div#customers li:last-child { margin-right: 0; } div#customers img {width: 80px; height: 80px;} /* ------------------------- */ /* SUB - ASIDE */ #aside { width: 260px; float: right; margin-top: 30px; } #aside h5 { margin-bottom: 5px; font-weight: bold; } #aside h6 { margin-bottom: 5px; font-weight: bold; } #aside li:hover {opacity:.7} #aside a {color:rgb(3, 118, 121);text-decoration:none;} #aside a:hover { text-decoration: underline;} .asidebox { padding: 2px 20px 14px 20px; } #demos li a {line-height: 1.5em; text-decoration: none;} #nextsteps, #subnav { background: #ECF7FF; } #nextsteps { border-radius-bottomleft: 0.75em; -webkit-border-bottom-left-radius: 0.75em; -moz-border-radius-bottomleft: 0.75em; border-radius-bottomright: 0.75em; -webkit-border-bottom-right-radius: 0.75em; -moz-border-radius-bottomright: 0.75em;} #nextsteps li a { font-size: 1.1667em; text-decoration: none; color: #037679; display:block; padding: 5px 20px; background:transparent url(../../images/genkgo/common-linkicon-12px.png) no-repeat 0 9px; } #nextsteps li a[href="nl/contact"] { background-image: url(../../images/genkgo/common-questionicon-12px.png) } #subnav h6 a {color: #333; } #subnav li a { font-size: 1em; text-decoration: none; color: #037679; display:block; padding: 5px 0; line-height:1em;} #subnav li.active > a { background:#D7E9EA; padding: 5px 10px; border-radius: 0.5em; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; } #subnav li li { margin:0 0 0 20px; } /* ------------------------- */ /* SUB - CONTENT */ #content { width: 500px; float: left; padding: 0 30px; } #content h1 + h2 { font-size: 1.3333em; line-height: 1.125em; margin-top: 1.125em; margin-bottom: 1.125em; font-style: italic; } #content em {} #content ul {margin:0 0 1.5em;} div#content ul.cities li { float:left;width:200px;list-style:none; } #content hr { background:none repeat scroll 0 0 #007C7F;border:0 none;color:#999999;height:1px;} #content ul li { list-style:disc outside none; margin:0 1.5em; } #aside { margin-right: 30px;} #content.techspec { width:445px; padding:0 17px; } #aside.techspec { width:445px; margin: 0 17px; } #aside sup { vertical-align:super; } #aside hr { background:none repeat scroll 0 0 #007C7F;border:0 none;color:#999999;height:1px;} #content #portfolio-previews { width: 620px; } #content #portfolio-previews li { width: 280px; height: 350px; float: left; margin: 0 30px 20px 0; list-style-type: none; overflow: hidden; background: none;} #content #portfolio-previews li p { padding-left: 0; border-radius-topleft: 0.75em; -webkit-border-top-left-radius: 0.75em; -moz-border-radius-topleft: 0.75em; border-radius-topright: 0.75em; -webkit-border-top-right-radius: 0.75em; -moz-border-radius-topright: 0.75em;} #content #portfolio-previews li p img { border: 1px solid #888; width: 268px; height: 160px; } #content #portfolio-previews li p strong { color: #007C7F; } #content #portfolio-previews li p:first-child {border: 2px solid #999; padding: 3px; margin-bottom: .4em; height: 162px; background: none; } #content #portfolio-previews li hr {border: 0; color:#999; background: #007C7F; height: 1px; } #content #portfolio-customers li { list-style: none; margin-left:0;} #content #portfolio-customers li a {margin: 0; line-height: 1em; } #content #portfolio-customers {width: 620px;} #content #portfolio-customers ul.first, #content #portfolio-customers ul.second {float:left;width:310px} #content #portfolio-customers a {text-decoration: none;color: #007C7F} #content #portfolio-customers a:hover {color:#00AAAD} #content table#pricing {width: 550px;text-align:left;line-height: 1.5em; border-collapse: collapse;} #content table#pricing tbody {display: block; border-top: 1px solid #8CD9DA;} #content table#pricing tbody#license {border-top: none;border-top-radius: 0.75em; -moz-border-radius-topleft: 0.75em;-moz-border-radius-topright: 0.75em; -webkit-border-top-left-radius: .75em; -webkit-border-top-right-radius:.75em;background: #8CD9DA;} #content table#pricing tr {vertical-align: top;} #content table#pricing td {padding: 15px;border: none;} #content table#pricing td.c1 {padding-right: 0;} #content table#pricing ul {display: block; float: left; width: 50%;} #content table#pricing a {color: #027679; } #content table#pricing a:hover {color:#007C7F;} #content table#pricing a.spec-link {clear:left; display:inline-block;} #content #content table.spec {} #content table.spec tr {background:#ECF7FF } #content table.spec td {text-align: center;width: 150px; } #content table.spec td, #content table.spec th {border-bottom: 1px solid #fff; border-left:none; border-right:none;} #content table.spec th, #content table.spec td, #content table.spec tr {padding-left:10px;} #content table.spec th[scope="row"] { background:#8CD9DA; font-weight:normal;width:165px; } #content table.spec tr:hover, #content table.spec tr.sub {background:#8CD9DA} #content table.spec thead tr {color:#fff;} #content table.spec thead tr th {background:#fff url(../../images/genkgo/common-table-title-bg-r.png) no-repeat;white-space:nowrap;} #content table.spec thead tr th {background-position: top center;} #content table.spec thead tr .rightcol {background-position: top right;} #content table.spec thead tr .leftcol {background:#fff url(../../images/genkgo/common-table-title-bg-l.png) no-repeat top left;} #content table.spec thead tr th, #content table.spec .title tr, #content table.spec .title td {border:none;border-bottom:1px solid #333;} #content table.spec tfoot tr {height: 35px;} #content table.spec tfoot tr td {background:#8CD9DA;font-weight:bold;} #content table.spec tbody td.more {cursor:pointer;} #content #spec-license th[scope="row"] { width:240px; } /* ------------------------- */ /* BOTTOM */ #bottom h2 { font-size: 1.3333em; line-height: 1.125em; margin-top:0; margin-bottom: 1.125em; } #bottom h3 { font-size: 1em; line-height: 1.5em; margin: 0; font-weight: bold; color: #009397;} /* ------------------------- */ /* FRONT - MOVIEBOX */ #moviebox {float:left;width: 445px;} #moviebox object embed {width:420px;height:262px;} /* ------------------------- */ /* FRONT - NEWS FEED */ #news {padding: 0 30px 0 5px; width: 420px; float:left; } #news li { margin-bottom: 1.5em; width: 440px; } #news li p { width: 415px; } #news li p:last-child {margin-bottom: 0; } #news li a { color: #009397; } #news li a.news_rm {background: url(../../images/genkgo/common-linkicon-12px.png) no-repeat 0 2px; text-decoration: none; display: block; height: 1.5em; text-indent: -9999px; float:right; width: 12px; margin-top: -1.5em;} #news li .news_title a { text-decoration: none; } #news li .news_title a:hover { text-decoration: underline; } #news li .message img {float:left;width:110px;margin:5px 25px 0 0;height:65px;} #news h3 { color: #009397; font-size: 1em; font-weight: bold; line-height: 1.5em; margin: 0; } #news h2 { margin-bottom:0.812em; } /* ------------------------- */ /* FOOTER */ #footer { background: url(../../images/genkgo/common-bottom-bg.png) no-repeat; padding-top: 35px; } #bottom_menu { margin: 0 15px; } #bottom_menu ul { float: left; } #bottom_menu li { display: inline; margin-right: 5px; padding: 0 6px 0 0; background: url(../../images/genkgo/common-divider.png) no-repeat right 2px; } #bottom_menu li:last-child { background: none; } #bottom_menu li a { text-decoration: none; color: #333; } #bottom_menu li a:hover { text-decoration: underline; } #credits { float: right;} #credits a { color: #009397; text-decoration: none; } #credits a:hover { text-decoration: underline; } #tagcloud {width: 446px; float:right; background: url(../../images/genkgo/common-green-bg.png) repeat-x; height: 46px; padding: 10px 12px; margin-right: 10px;} #tagcloud a {color:#fff;margin-right: .5em;text-transform: uppercase; text-decoration:none;display: inline;white-space: nowrap;} #tagcloud a:hover { text-decoration: underline; } #tagcloud a.s1 {font-size: 1em;} #tagcloud a.s2 {font-size: 1.1667em;} #tagcloud a.s3 {font-size: 1.3333em;} #tagcloud a.s4 {font-size: 1.5em;} #tagcloud a.s5 {font-size: 1.6667em;} /* ------------------------- */ /* SOCIAL MEDIA */ #social_media { padding: 0 0 10px 10px; width: 440px; } #social_media li { width:205px; float:left; height: 30px; margin-bottom:3px; } #social_media li:hover { background-color: #00A4A7; border-color: #009397; } #social_media span:hover a { color: #fff; } #social_media li.left { margin-right: 20px; } #social_media li a { color:#333; padding:7px 9px; line-height:16px; text-decoration: none; display: block; height: 16px; vertical-align:top; } #social_media li a img { } #social_media li a span { margin-left:10px; position:relative; top:-3px; } /* ------------------------- */ /* SUSCRIBE BOX */ #suscribe_box { position: relative; width: 405px; height:80px; padding: 10px 20px; float:right; margin: 0 15px;} #suscribe_box h6 { margin: 4px 0 6px 0; color: #fff; font-size: 1.3em; } #suscribe_box form {margin: 0; padding: 0;} #suscribe_box input[type="submit"] { height:30px; width:100px; background: url(../../images/genkgo/home-suscribebox-button.png); border:none; color: #fff; position: absolute; bottom: 30px; right: 50px; cursor: pointer; font-family: "Arial Narrow"; font-size: 1.4em; padding-bottom: 5px;} #suscribe_box input[type="submit"]:hover { background-image: url(../../images/genkgo/home-suscribebox-button-inv.png); padding-top: 2px;} #suscribe_box input[type="text"] { width: 250px; font-size: 1em; padding:5px 4px;} #suscribe_box input[type="checkbox"] { position: absolute; left: 271px; bottom: 13px; } #suscribe_box label.unsuscribe_button { position: absolute; left: 155px; bottom: 8px; } /* ------------------------- */ /* FORM */ form.genkgoform fieldset { margin-bottom: 10px; } form.genkgoform legend { padding: 0 2px; font-weight: bold; } form.genkgoform label { display: inline-block; line-height: 1.8; vertical-align: top; } form.genkgoform fieldset ol { margin: 0; padding: 0; } form.genkgoform fieldset li { list-style: none; padding: 5px; margin: 0; } form.genkgoform fieldset fieldset { border: none; margin: 3px 0 0; } form.genkgoform fieldset fieldset legend { padding: 0 0 5px; font-weight: normal; } form.genkgoform fieldset fieldset label { display: block; width: auto; } form.genkgoform em { font-weight: bold; font-style: normal; color: #f00; } form.genkgoform label { width: 120px; /* Width of labels */ } form.genkgoform fieldset fieldset label { margin-left: 123px; /* Width plus 3 (html space) */ } form.genkgoform legend { padding: 0 2px; font-weight: bold; _margin: 0 -7px; /* IE Win */ } #content form fieldset input[type=submit] {width: 100px; float:right} #content form fielset {width: 300px;padding: 0 !important; } form fieldset button, form fieldset input, form fieldset select, form fieldset textarea { margin:0 0 1.5em; width:16em; } form fieldset textarea { height:16em;width:24em; } #content form fieldset input[type="submit"] { float:right; margin:0 65px 0 0; width:100px; } #questionnaire fieldset input,#questionnaire form fieldset textarea,#questionnaire form fieldset label { float:none;margin: 0; } #questionnaire fieldset label { margin: 0 0 .5em 0; } #questionnaire fieldset input, #questionnaire fieldset textarea { margin: 0 0 1em 0; } #questionnaire fieldset label {width: 500px;display: block;} #questionnaire fieldset textarea {width: 500px;}