html, body { height:100%; color:#fff; background-color:#fff; font-family:Tahoma, Arial; font-size:100%; -webkit-text-size-adjust : none;}
a:link {color:#ffffff;} /* unvisited link */
a:visited {color:#ffffff;} /* visited link */
a:hover {color:#999999;} /* mouse over link */
a:active {color:#999999;} /* selected link */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
/* Indeling van het scherm */
.container { width:100%; max-width:1200px; margin:auto; clear:both; }
.paragraph { width:100%; margin:0 0 0.5em 0; padding:0.5em; clear:both; float:left; position:relative; }
.welcome-text { width:100%; height:auto; background-color:#f6a700; text-align:left; border-radius:8px; }
.welcome-text div { padding:2%; }
.header { width:100%; font-size:175%; line-height:125%; color:#1c3353; margin:0 0 0.0em 0; padding:0;}
.detail { width:100%; font-size:100%; line-height:100%; color:#1c3353; padding:0;}
.detail2 { width:100%; font-size:100%; line-height:100%; color:#1c3353; padding:0;}
.image-container { width:100%; color:#1c3353; font-size:200%; clear:both; line-height:100%;}
.crystal-blauw { display:inline-block; font-weight:bold; font-size:400%; color:#1c3353; font-family:crystal_radio_kitregular,Tahoma,Arial; letter-spacing:12px; }
.crystal-oranje { display:inline-block; font-weight:bold; font-size:400%; color:#f6a700; font-family:crystal_radio_kitregular,Tahoma,Arial; letter-spacing:4px; }
.crystal-wit { display:inline-block; font-weight:bold; font-size:200%; color:#ffffff; font-family:crystal_radio_kitregular,Tahoma,Arial; letter-spacing:8px; text-shadow: 2px 2px 2px #000000 }
.menuitem { width:13.5%; margin-right:1.4%; float:left; text-align:left; padding:1%; font-size:115%; background-color:#f6a700; }
.lastitem { width:13.5%; margin-right:0; float:right; text-align:left; padding:1%; font-size:115%; background-color:#f6a700; }
.content { height:32em; }
.content-left { background-color:#f6a700; height:100%; float:left; font-size:100%; font-weight:normal; }
.content-right { height:100%; float:right; }
.content-right-top { width:100%; height:48.5%; position:relative;}
.content-right-bottom { width:100%; background-color:#1c3353; height:48.5%; font-size:95%;}
.content-right-top-left { width:48.5%; height:100%; float:left; background-color:#1c3353; font-size:120%; line-height:125%; text-align:center; }
.content-right-top-right { width:48.5%; height:100%; float:right; color:#1c3353; background-color:#f6a700; font-size:120%; line-height:125%; }
.content-left div { padding:2%; }
.referentie1 { background-color:#f6a700; text-align:left; padding: 0.5% 0; color:#1c3353; border-radius:8px;}
.referentie1 div { padding:0 1%; }
.referentie2 { color:#1c3353; text-align:left; padding: 0 1%; font-size:80%;}
.referentie3 { background-color:#1c3353; text-align:left; padding: 0.5% 0; border-radius:8px;}
.referentie3 div { padding:0 1%; }
.ondertitel { color:#1c3353; text-align:left; font-size:100%;}
.ondertitel2 { color:#1c3353; text-align:left; font-size:80%;}
.verwondering-begrip { color:#ffffff; text-align:left; padding: 0 1%; font-size:80%;}
.recensie { padding:2%; margin-bottom:10px; font-size:95%;}
.filler { width:100%; height:3%; clear:both; }
.bold { font-weight:bold; }
.normal { font-weight:normal; font-style: normal; }
.italic { font-style:italic; }
.left { text-align:left; }
.center { text-align:center; }
.right { text-align:right; }
.float-left { float:left; }
.float-right { float:right; }
.font-white { color:#fff; }
/* Section */
.section { clear:both; padding:0px; margin:0px; }
/* Column setup */
.col { display:block; float:left; margin:1% 0 1% 1.6%; }
.col:first-child { margin-left:0; }
/* Grouping */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both; }
.group { zoom:1; }
/* Grid van 7 kolommen */
.span_1_of_7 { width: 12.91%; }
.span_2_of_7 { width: 27.42%; }
.span_3_of_7 { width: 41.94%; }
.span_4_of_7 { width: 56.45%; }
.span_5_of_7 { width: 70.97%; }
.span_6_of_7 { width: 85.48%; }
.span_7_of_7 { width:100.00%; }
/* Grid van 8 kolommen */
.span_8_of_8 { width:100.00%; }
/*********************************** */
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
.content-right-bottom { width:100%; background-color:#1c3353; height:48.5%; font-size:85%; }
.menuitem { width:13.5%; margin-right:1.4%; float:left; text-align:left; padding:1%; font-size:75%; background-color:#1c3353; }
.lastitem { width:13.5%; margin-right:0; float:right; text-align:left; padding:1%; font-size:75%; background-color:#1c3353; }
homeimage.hidden {display: none;}
}
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
.content-right-bottom { width:100%; background-color:#1c3353; height:48.5%; font-size:85%; }
.menuitem { width:13.5%; margin-right:1.4%; float:left; text-align:left; padding:1%; font-size:75%; background-color:#1c3353; }
.lastitem { width:13.5%; margin-right:0; float:right; text-align:left; padding:1%; font-size:75%; background-color:#1c3353; }
homeimage.hidden {display: none;}
}
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
body { font-size:85%; }
.content { height:48em; }
.menuitem { width:13.5%; margin-right:1.4%; float:left; text-align:left; padding:1%; font-size:85%; background-color:#1c3353; }
.lastitem { width:13.5%; margin-right:0; float:right; text-align:left; padding:1%; font-size:85%; background-color:#1c3353; }
homeimage.hidden {display: none;}
.content-right-bottom { width:100%; background-color:#1c3353; height:48.5%; font-size:85%; }
}
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 320px){
/* some CSS here */
.content-right-bottom { width:100%; background-color:#1c3353; height:48.5%; font-size:70%; }
}
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
body { font-size:90%; }
.content { height:40em; }
homeimage.hidden { display: none;}
}
/* #### Desktops #### */
@media screen and (max-width: 850px){
/* some CSS here */
homeimage.hidden { display: none;}
.menuitem { background-color:#1c3353; }
.lastitem { background-color:#1c3353; }
body { font-size:80%; }
.content { height:32em; }
.col { margin: 1% 0 1% 0%;}
.span_1_of_7 { width:100.00%; }
.span_2_of_7 { width:100.00%; }
.span_3_of_7 { width:100.00%; }
.span_4_of_7 { width:100.00%; }
.span_5_of_7 { width:100.00%; }
.span_6_of_7 { width:100.00%; }
.span_7_of_7 { width:100.00%; }
}
/* #### Desktops #### */
@media screen and (max-width: 480px){
/* some CSS here */
homeimage.hidden {display: none;}
.menuitem {background-color:#1c3353; font-size:85%;}
.lastitem {background-color:#1c3353; font-size:85%;}
.content-right-bottom { width:100%; background-color:#1c3353; height:48.5%; font-size:75%; }
}
/* ********************************** */
/* Slideshow classes */
.css-slideshow { position:relative; }
.css-slideshow figure { margin:0; position:absolute; top:0; left:0; }
.css-slideshow figcaption { position:absolute; top:0; color:#fff; background:rgba(0,0,0, 0.0); font-size:.8em; padding:8px 12px; opacity:0; transition:opacity .5s; }
.css-slideshow:hover figure figcaption { transition: opacity .5s; opacity:1; }
/* Animation classes */
figure:nth-child(1) { -webkit-animation:xfade 54s 48s infinite; -moz-animation:xfade 54s 48s infinite; animation:xfade 54s 48s infinite; }
figure:nth-child(2) { -webkit-animation:xfade 54s 42s infinite; -moz-animation:xfade 54s 42s infinite; animation:xfade 54s 42s infinite; }
figure:nth-child(3) { -webkit-animation:xfade 54s 36s infinite; -moz-animation:xfade 54s 36s infinite; animation:xfade 54s 36s infinite; }
figure:nth-child(4) { -webkit-animation:xfade 54s 30s infinite; -moz-animation:xfade 54s 30s infinite; animation:xfade 54s 30s infinite; }
figure:nth-child(5) { -webkit-animation:xfade 54s 24s infinite; -moz-animation:xfade 54s 24s infinite; animation:xfade 54s 24s infinite; }
figure:nth-child(6) { -webkit-animation:xfade 54s 18s infinite; -moz-animation:xfade 54s 18s infinite; animation:xfade 54s 18s infinite; }
figure:nth-child(7) { -webkit-animation:xfade 54s 12s infinite; -moz-animation:xfade 54s 12s infinite; animation:xfade 54s 12s infinite; }
figure:nth-child(8) { -webkit-animation:xfade 54s 6s infinite; -moz-animation:xfade 54s 6s infinite; animation:xfade 54s 6s infinite; }
figure:nth-child(9) { -webkit-animation:xfade 54s 0s infinite; -moz-animation:xfade 54s 0s infinite; animation:xfade 54s 0s infinite; }
/* Animation properties */
@keyframes xfade {
0% { filter: alpha(opacity=100); opacity: 1; }
14.67% { filter: alpha(opacity=100); opacity: 1; }
16.67% { filter: alpha(opacity=0) ; opacity: 0; }
98% { filter: alpha(opacity=0) ; opacity: 0; }
100% { filter: alpha(opacity=100); opacity: 1; }
}
@-moz-keyframes xfade {
0% { filter:alpha(opacity=100); opacity:1; }
14.67% { filter:alpha(opacity=100); opacity:1; }
16.67% { filter:alpha(opacity=0) ; opacity:0; }
98% { filter:alpha(opacity=0) ; opacity:0; }
100% { filter:alpha(opacity=100); opacity:1; }
}
@-webkit-keyframes "xfade" {
0% { filter:alpha(opacity=100); opacity:1; }
14.67% { filter:alpha(opacity=100); opacity:1; }
16.67% { filter:alpha(opacity=0) ; opacity:0; }
98% { filter:alpha(opacity=0) ; opacity:0; }
100% { filter:alpha(opacity=100); opacity:1; }
}
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 25, 2014 */
@font-face {
font-family: 'crystal_radio_kitregular';
src: url('crystal_radio_kit-webfont.eot');
src: url('crystal_radio_kit-webfont.eot?#iefix') format('embedded-opentype'),
url('crystal_radio_kit-webfont.woff') format('woff'),
url('crystal_radio_kit-webfont.ttf') format('truetype'),
url('crystal_radio_kit-webfont.svg#crystal_radio_kitregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'letter_gothicitalic';
src: url('letr46w-webfont.eot');
src: url('letr46w-webfont.eot?#iefix') format('embedded-opentype'),
url('letr46w-webfont.woff') format('woff'),
url('letr46w-webfont.ttf') format('truetype'),
url('letr46w-webfont.svg#letter_gothicitalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'letter_gothicbold';
src: url('letr65w-webfont.eot');
src: url('letr65w-webfont.eot?#iefix') format('embedded-opentype'),
url('letr65w-webfont.woff') format('woff'),
url('letr65w-webfont.ttf') format('truetype'),
url('letr65w-webfont.svg#letter_gothicbold') format('svg');
font-weight: normal;
font-style: normal;
}
/* Animation styles */
.child { position:absolute; top:2em; left:0; bottom:0; right:0; text-align:center; width:48.5%; }
div#red { color:#fff; background-color:#1c3353; opacity:1; filter:alpha(opacity=100); }
div#green { color:#fff; background-color:#1c3353; opacity:0; filter:alpha(opacity=0); }
div#blue { color:#fff; background-color:#1c3353; opacity:0; filter:alpha(opacity=0); }