/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
* {
-webkit-tap-highlight-color:rgba(255,255,255,0);
-webkit-touch-callout:none;
}
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
::-moz-selection { background: #b80302; color: #fff; text-shadow: none; }
::selection { background: #b80302; color: #fff; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
a:focus { outline: 0; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 0; padding: 0; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea{resize:none;}
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
*/
/*
* Re-set default cursor for disabled elements
*/
button[disabled], input[disabled] { cursor: default; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== primary styles =====================================================
Author: Keistoer Interactieve Media (Lars)
========================================================================== */
/* Fonts */
@font-face {
font-family: 'AauxProBoldSCRegular';
src: url('../~fonts/aauxpro-boldsc_0-webfont.eot');
src: url('../~fonts/aauxpro-boldsc_0-webfont.eot%3F') format('embedded-opentype'),
url('../~fonts/aauxpro-boldsc_0-webfont.woff') format('woff'),
url('../~fonts/aauxpro-boldsc_0-webfont.ttf') format('truetype'),
url('../~fonts/aauxpro-boldsc_0-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AauxProMediumRegular';
src: url('../~fonts/aauxpro-medium-webfont.eot');
src: url('../~fonts/aauxpro-medium-webfont.eot%3F') format('embedded-opentype'),
url('../~fonts/aauxpro-medium-webfont.woff') format('woff'),
url('../~fonts/aauxpro-medium-webfont.ttf') format('truetype'),
url('../~fonts/aauxpro-medium-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AauxProBoldOSFRegular';
src: url('../~fonts/aauxpro-boldosf-webfont.eot');
src: url('../~fonts/aauxpro-boldosf-webfont.eot%3F') format('embedded-opentype'),
url('../~fonts/aauxpro-boldosf-webfont.woff') format('woff'),
url('../~fonts/aauxpro-boldosf-webfont.ttf') format('truetype'),
url('../~fonts/aauxpro-boldosf-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/* General */
html, body { min-height: 100%; height: 100%; }
html { background: url(/assets/img/html-bg.jpg) repeat 0 0; }
body { /*background: url(/assets/img/body-bg.jpg) no-repeat top center;*/ position: absolute; top: 0; left: 0; width: 100%; }
div#container { width: 992px; background: #ffffff; border-radius: 5px; margin: 21px auto; position: relative; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1); }
h1, h2, h3, h4, h5, h6, p, a { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
strong { font-weight: bold; }
i { font-style: italic; }
.float-right { float: right; }
.float-left { float: left; }
.red { color: #b90201; }
/* Header */
header { height: 129px; width: 882px; padding: 45px 55px 0 55px; }
header figure#logo { display: block; margin: 0 0 40px 0; }
header ul#menu { display: block; width: 100%; height: 38px; background: url(/assets/img/menu-bg.png) top left no-repeat; }
header ul#menu li { display: block; float: left; background: url(/assets/img/menu-divider.png) no-repeat top right; padding: 0 2px 0 0; }
header ul#menu li a { display: block; height: 38px; line-height: 38px; font-size: 14px; font-weight: bold; color: #fff; padding: 0 21px; text-decoration: none; }
header ul#menu li a:hover { background: url(/assets/img/menu-vf1-bg.png) repeat-x 0 0; text-decoration: none; }
header ul#menu li.active a { background: url(/assets/img/menu-vf2-bg.png) no-repeat top center; text-decoration: none; }
/* Teaser */
div#main div#teaser { height: 204px; width: 881px; padding: 0 55px; margin: 0 0 31px 0; }
div#main div#teaser .bx-wrapper, div#main div#teaser .bx-window, div#main div#teaser div#slider { height: 204px; }
div#main div#teaser div#slider > div { position: relative; height: 204px; width: 881px; }
div#main div#teaser div#slider > div h1 { text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); margin: 0; position: absolute; left: 55px; top: 34px; font-size: 30px; color: #ffffff; font-family: "AauxProBoldOSFRegular", "Trebuchet MS", Arial, Helvetica, sans-serif; }
div#main div#teaser div#slider > div h2 { text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); margin: 0; position: absolute; left: 55px; top: 78px; font-weight: normal; font-size: 20px; color: #ffffff; font-family: "AauxProMediumRegular", "Trebuchet MS", Arial, Helvetica, sans-serif; }
div#main div#teaser .bx-next, div#main div#teaser .bx-prev { position: absolute; top: 48px; width: 72px; height: 122px; background: url(/assets/img/teaser-buttons.png) 0 0 no-repeat; text-indent: -9999em; }
div#main div#teaser .bx-next { right: -51px; }
div#main div#teaser .bx-prev { left: -51px; background-position: -72px 0; }
div#main div#teaser .bx-next:hover { background-position: 0 -117px; }
div#main div#teaser .bx-prev:hover { background-position: -72px -117px; }
/* Content */
div#main .row { width: 881px; padding: 0 55px; position: relative; margin: 0 0 38px 0; }
div#main .row .three-column { text-decoration: none; display: block; width: 269px; margin: 0 34px 0 0; float: left; border: 1px solid #d7d7d7; }
div#main .row .three-column:hover { background: #f9f9f9; }
div#main .row .three-column.last { margin: 0; }
div#main .row .three-column h2 { background: #f2f2f2; margin: 0; width: 213px; height: 23px; line-height: 23px; padding: 16px 28px; font-weight: bold; font-size: 20px; color: #b80000; }
div#main .row .three-column:hover h2 { background: #efefef; }
div#main .row .three-column p { margin: 0; width: 213px; padding: 9px 28px; line-height: 16px; font-size: 12px; color: #565656; }
div#main .row .three-column p.first { padding-top: 24px; }
div#main .row .three-column p.last { padding-bottom: 24px; }
div#main .row > h3 { font-size: 16px; font-weight: bold; color: #9c9c9c; margin: 0 0 8px 0; }
div#main .row > p { margin: 0 0 16px 0; line-height: 16px; font-size: 12px; color: #565656; }/*b3b3b3*/
div#main .row .two-column.small { width: 224px; padding: 31px 0 0 0; background: url(/assets/img/two-column-divider.png) bottom right no-repeat; float: left; }
div#main .row .two-column.big { width: 572px; float: left; background: #fcfcfc; padding: 41px 42px 0 42px; }
div#main .row .two-column.big h1 { margin: 0 0 3px 0; font-size: 20px; color: #b80000; width: 100%; }
div#main .row .two-column.big h2 { margin: 0 0 3px 0; font-size: 14px; color: #b80000; }
div#main .row .two-column.big p { color: #565656; font-size: 12px; margin: 0 0 25px 0; line-height: 16px; }
div#main .row .two-column.big img { float: right; padding: 0 0 25px 25px; }
div#main .row .two-column.big .imgWithText img { padding: 0 25px 25px 0; }
div#main .row .two-column.big ul { list-style-type: none; margin: 0 0 25px; }
div#main .row .two-column.big ul li { padding: 0 0 0 15px; background: url(/assets/img/ul-bullet.png) 0 4px no-repeat; line-height: 16px; font-size: 12px; color: #565656; }
div#main .row .two-column.big ol { list-style-position: inside; margin: 0 0 25px; }
div#main .row .two-column.big ol li { line-height: 16px; font-size: 12px; color: #565656; }
div#main .row .two-column.big a { color: #b80302; text-decoration: underline; }
div#main .row .two-column.big a:hover { color: #7a7a7a; }
div#main .row .two-column.big div.files { margin: 0 0 15px; }
div#main .row .two-column.big div.files a { display: block; padding: 6px 0 0 29px; max-width: 250px; height: 22px; font-size: 12px; color: #b80302; }
div#main .row .two-column.big div.files a:hover { color: #7a7a7a; }
div#main .row .two-column.big div.files a.pdf { background: url(/assets/img/pdf-icon.png) 0 3px no-repeat; }
div#main .row .two-column.big form { width: 310px; display: block; margin: 0 0 25px 0; }
div#main .row .two-column.big form input { width: 288px; height: 24px; border: 1px solid #d9d9d9; border-radius: 3px; background: #ffffff; box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.11) inset; line-height: 24px; font-size: 12px; padding: 4px 10px; color: #565656; margin: 0 0 8px 0; }
div#main .row .two-column.big form textarea { width: 288px; height: 180px; min-height: 80px; resize: vertical; border: 1px solid #d9d9d9; border-radius: 3px; background: #ffffff; box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.11) inset; line-height: 24px; font-size: 12px; padding: 2px 10px; color: #565656; margin: 0 0 8px 0; }
div#main .row .two-column.big form label { display: block; font-size: 12px; color: #565656; font-weight: bold; margin: 0 0 4px 0; }
div#main .row .two-column.big form button[type="submit"] { display: inline-block; height: 31px; line-height: 31px; padding: 0 25px; background: #b80302; color: #fff; font-size: 12px; font-weight: bold; border: none; border-radius: 3px; cursor: pointer; margin: 8px 0 0 0; }
div#main .row .two-column.big form button[type="submit"]:hover { background: #9a0201; }
div#main .row .two-column.big form button[type="submit"]:disabled { background: #999; cursor: default; }
div#main .row .two-column a.interaction-block { margin: 0 0 25px 0; display: inline-block; height: 31px; text-decoration: none; line-height: 31px; padding: 0 36px 0 0; background: url(/assets/img/interaction-block-bg-right.png) top right no-repeat; width: auto; color: #fff; font-size: 12px; }
div#main .row .two-column a.interaction-block span { display: block; padding: 0 25px; line-height: 31px; height: 31px; background: url(/assets/img/interaction-block-bg-left.png) 0 0 no-repeat; }
div#main .row .two-column.big a.interaction-block { width:236px; display:block; }
div#main .row .two-column.big a.interaction-block.call-to-action{ width:auto; display:inline-block; }
div#main .row .two-column a.interaction-block:hover, div#main .row .two-column a.interaction-block.call-to-action { background-position: right -31px; color: #fff;}
div#main .row .two-column a.interaction-block:hover span, div#main .row .two-column a.interaction-block.call-to-action span { background-position: 0 -31px; }
div#main .row .two-column a.interaction-block.call-to-action:hover { background-position: right -62px; }
div#main .row .two-column a.interaction-block.call-to-action:hover span { background-position: 0 -62px; }
div#main .row .two-column.small ul.sub-menu { display: block; width: 100%; list-style-type: none; border-top: 1px solid #f6f6f6; margin: 0 0 52px 0; }
div#main .row .two-column.small ul.sub-menu li { display: block; width: 100%; height: 34px; border-bottom: 1px solid #f6f6f6; }
div#main .row .two-column.small ul.sub-menu li a { display: block; width: 172px; height: 34px; line-height: 34px; color: #565656; font-size: 15px; padding: 0 26px; text-decoration: none; }
div#main .row .two-column.small ul.sub-menu li a:hover { background: #f4f4f4; }
div#main .row .two-column.small ul.sub-menu li.active a, div#main .row .two-column.small ul.sub-menu li.active a:hover { background: #aeaeae; height: 33px; border-bottom: 1px solid #cecece; color: #ffffff; }
div#main .row .two-column.small p { font-size: 12px; color: #757575; width: 174px; padding: 0 25px; line-height: 20px; margin: 0 0 25px 0; }
div#main .row .two-column.small p.dark-grey { width: 174px; padding: 10px 25px; margin: 0 0 15px 0; color: #ffffff; font-size: 14px; font-weight: bold; line-height: 25px; background: #aeaeae; }
div#main .row .two-column.small p.light-grey { padding: 15px 25px; font-size: 16px; font-weight: bold; line-height: 25px; background: #f4f4f4; width: 173px; border: 1px solid #f1f1f1; border-right: none; }
div#main .row .two-column.small form { display: block; width: 174px; padding: 0 25px; margin: 0 0 25px 0; }
div#main .row .two-column.small form input { width: 152px; height: 24px; border: 1px solid #d9d9d9; border-radius: 3px; background: #ffffff; box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.11) inset; line-height: 24px; font-size: 12px; padding: 4px 10px; color: #565656; margin: 0 0 8px 0; }
.readMore{color:#565656; text-decoration:none; font-variant:normal; display:inline-block; background:url(/assets/img/readMore.png) right center no-repeat; padding:0 13px 0 0; margin:0 0 20px 28px; font-family: "AauxProMediumRegular",Arial,Helvetica,sans-serif; font-size:13px;}
div#main .row .three-column:hover .readMore, .readMore:hover{text-decoration:none; color:#B80000; background:url(/assets/img/readMore-hover.png) right center no-repeat;}
/* Footer */
footer { height: 79px; width: 920px; margin: 0 36px; border-top: 1px solid #e5e5e5; }
footer div#partners { margin: 25px; height: 30px; float: left; }
footer div#partners .partner { display: block; float: left; height: 30px; margin: 0 23px 0 0; }
footer div#partners #partner-1 { background: url(/assets/img/partners.png) bottom right no-repeat; width: 81px; opacity: 0.9;}
footer div#partners #partner-1:hover {opacity:1;}
footer div#partners #partner-2 { background: url(/assets/img/partners.png) 0 0 no-repeat; width: 97px; }
footer div#partners #partner-2:hover { background-position: 0 -30px; }
footer ul#links { margin: 34px 25px; height: 12px; float: right; display: block; }
footer ul#links li { display: block; float: left; height: 12px; margin: 0 0 0 25px; }
footer ul#links li a { color: #7c7c7c; display: block; height: 12px; font-size: 12px; text-decoration: none; }
footer ul#links li a:hover { color: #b80302; }
p#keistoer { display: block; width: 992px; padding: 0 0 50px 0; margin: 0 auto; text-align: right; font-size: 11px; color: #7c7c7c; }
p#keistoer a { color: #7c7c7c; text-decoration: underline; }
p#keistoer a:hover { text-decoration: none; }
/* ==|== media queries ======================================================
EXAMPLE Media Query for Responsive Design.
This example overrides the primary ('mobile first') styles
Modify as content requires.
========================================================================== */
/* Styles for desktop and large screen ----------- */
/*styles for 800px and up!*/
@media only screen and (min-width: 800px) {
/* Styles */
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/* Styles */
}
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
header, footer, .two-column.small, p#keistoer, a.interaction-block { display: none; }
html, body { background: none; }
}