/**
 * De Jonge Akademie On Wheels stylesheet
 * @author Harmen Janssen | grrr.nl
 * 
 * Table of contents:
 * ------------------------------------------------------------
 * 1) reset
 * 2) typography
 * 3) base styles
 * 4) primary styles
 * 5) mobile
 * 6) print
 * 
 * Color guide:
 * ------------------------------------------------------------
 * #666666	Dark grey
 * #B9B9BA	Light grey
 * #E6E6E6	Lighter grey (aside)
 * #808080	Also grey (form button)
 * #CCCCCC	Even more grey (form button border)
 * #D30D0D	Red
 * #EB882D	Orange
 * #50B0D6	Blue
 */

/**
 * 1) reset
 * --------------------------------
 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; border: 0; outline: 0; }                  

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
nav ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse: collapse; border-spacing: 0; }
input, select { vertical-align:middle; }

/**
 * 2) typography
 * --------------------------------
 */
/* Dekar is designed by Fontfabric (http://www.fontsquirrel.com/foundry/Fontfabric) */
@font-face {
	font-family: 'DekarRegular';
	src: url('fonts/dekar-webfont.eot');
	src: local('☺'), url('fonts/dekar-webfont.woff') format('woff'), url('fonts/dekar-webfont.ttf') format('truetype'), url('fonts/dekar-webfont.svg#webfontJpWjVzND') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DekarLight';
	src: url('fonts/dekar_light-webfont.eot');
	src: local('☺'), url('fonts/dekar_light-webfont.woff') format('woff'), url('fonts/dekar_light-webfont.ttf') format('truetype'), url('fonts/dekar_light-webfont.svg#webfontTb0GZBj4') format('svg');
	font-weight: normal;
	font-style: normal;
}

body, select, input, textarea, button { font: 12px/1.531 "Lucida Grande", Helvetica, Arial, sans-serif; *font-size: small; color: #666666; }
select, input, textarea, button { font-size: 99%; }

h1, h2, h3, h4, h5, h6, nav, .intro, .question, #more-scientists { font-family: "DekarRegular"; }
.box h4 { font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-weight: normal; }

/* normalize monospace sizing 
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */
pre, code, kbd, samp { font-family: monospace, sans-serif; }

.rich { margin-bottom: 1em; }
.rich p, .rich ul, .rich blockquote { margin-bottom: 1em; }
.rich p:last-child { margin-bottom: 0; }

#game-sold-out { position: absolute; top: 47px; left: 0; width: 240px; height: 107px; background: url('images/text/uitverkocht.png'); }

/**
 * 3) base styles
 * --------------------------------
 */
/* always force a scrollbar in non-IE */ 
html { height: 100%; overflow-y: scroll; background: #FFF url('images/backgrounds/bg1.png') repeat 50% -250px scroll; }
body { min-height: 100%; padding: 30px 0; background: transparent url('images/backgrounds/bg2.png') no-repeat 50% 0 fixed; }
.ie6 body { height: 100%; background-image: none; }
h1, h2, h3, h4, h5, h6 { text-transform: uppercase; font-weight: normal; }
h1, h2 { margin-bottom: 5px; font-size: 36px; line-height: 1; }
h2 { margin-top: 10px; }
h3 { font-size: 20px; }
h4 { font-size: 14px; }
h5 { font-size: 13px; }
h6 { font-size: 12px; }

a:hover, a:active { outline: none; }
a, a:active, a:visited { text-decoration: underline; color: rgb(61,137,166); }
a:hover, a:focus { color: rgb(80,176,214); }

a.more { padding-right: 10px; text-transform: lowercase; text-decoration: none; font-weight: bold; color: #000; }
a.more:hover span, a.more:focus span { text-decoration: underline; }

a#win-een-bus-large { width: 330px; height: 100px; margin-bottom: 20px; background: url('images/text/win-een-bus-button-large.png') no-repeat; }
a#win-een-bus-large:hover, a#win-een-bus-large:focus { background-position: 0 -100px; }
a#win-een-bus-small { width: 240px; height: 80px; margin-bottom: 20px; background: url('images/text/win-een-bus-button-small.png') no-repeat; }
a#win-een-bus-small:hover, a#win-een-bus-small:focus { background-position: 0 -80px; }
a#wie-zijn-die-wetenschappers { width: 330px; height: 53px; margin-bottom: 20px; background: url('images/text/wie-zijn-die-wetenschappers.png') no-repeat; }
a#wie-zijn-die-wetenschappers:hover, a#wie-zijn-die-wetenschappers:focus { background-position: 0 -53px; }

ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }

/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; }

small { font-size: 85%; }
strong, th { font-weight: bold; }

td, td img { vertical-align: top; } 

sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

pre {
/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}

.hr { height: 1px; margin: 20px 0; background: #E6E6E6; }
h3 + .hr { margin-top: 0; }

textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; }

/* align checkboxes, radios, text inputs with their label */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }

/* webkit browsers add a 2px margin outside the chrome of form elements */  
button, input, select, textarea { margin: 0; }

/*  j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: ; } 

/* make buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button { width: auto; overflow: visible; }

/* bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }

/* Non-semantic helper classes */

/* for image replacement */
.ir { display: block; overflow: hidden; text-indent: -999em; text-align: left; direction: ltr; background-repeat: no-repeat; }
.left { float: left; }
.right { float: right; }
.ie6 .left, .ie6 .right, .ie7 .left, .ie7 .right { display: inline; }
.clear { clear: both; }

.clearfix:before, .clearfix:after { height: 0; display: block; visibility: hidden; content: "\0020"; } 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/**
 * 4) primary styles
 * --------------------------------
 */

#container { width: 980px; margin: 0 auto; }

#flashMessage { position: fixed; top: 0; left: 50%; z-index: 20; width: 960px; margin-left: -480px; font-size: 1.2em; color: #FFF; background: #D30D0D;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.7); -moz-box-shadow: 0 0 20px rgba(0,0,0,.7); box-shadow: 0 0 20px rgba(0,0,0,.7); zoom: 1; }

#main { background: #FFF; }
#main > article { width: 680px; margin-right: -260px; padding: 20px; float: left; border-right: 260px solid #E6E6E6; zoom: 1; }
.ie7 #main > article { display: inline; }
#main > aside { width: 240px; padding: 20px 10px; float: left; background: #E6E6E6; }
.ie7 #main > aside { display: inline; }
.small { width: 330px; }
.xx-small { width: 210px; }
.column { margin-right: 20px; }

#container > header { position: relative; z-index: 3; }
#main { position: relative; z-index: 2; }
#container > footer { z-index: 1; }

/* header */
#container > header h1 a { width: 308px; height: 131px; margin: 0 auto; background: url('images/logos/djaow.png') no-repeat; }

/* main nav */
#container > header nav { position: relative; z-index: 2; margin: 35px 0 -20px; font-size: 0; text-align: center; background: url('images/backgrounds/main-nav-bg.gif') repeat-x; 
	background: #fff; /* old browsers */
	background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 	31px); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(31px,#fff));
}
#container > header nav ul { margin-bottom: -20px; padding-bottom: 20px; background: url('images/backgrounds/main-nav-shadow.png') repeat-x left bottom; }
#container > header nav li { display: inline-block; }

#container > header nav { position: relative; z-index: 2; margin: 35px 0 -20px; font-size: 0; text-align: center; background: url('images/backgrounds/main-nav-bg.gif') repeat-x;  zoom: 1; }
.ie7 #container > header nav { margin-bottom: 0; }
#container > header nav ul { position: relative; height: 60px; margin-bottom: -20px; padding-bottom: 20px; overflow: hidden; background: url('images/backgrounds/main-nav-shadow.png') repeat-x left bottom; zoom: 1; }
#container > header nav li { display: inline-block; zoom: 1; }
.ie7 #container > header nav li { display: inline; }
#container > header nav li + li { border-left: 1px solid #B9B9BA; }
#container > header nav a { position: relative; padding: 0 30px; display: block; line-height: 60px; font-size: 20px; text-decoration: none; text-transform: uppercase; color: #666666; zoom: 1; }
#container > header nav .active a, #container > header nav a:hover, #container > header nav a:focus { color: #FFF; background: url('images/backgrounds/main-nav-active-button.png') repeat-x; background: 
	background: #498AA9; /* old browsers */
	background: -moz-linear-gradient(top, #498AA9 0%, #5FB0D8 80%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#498AA9), color-stop(80%,#5FB0D8)); 
}
#container > header nav .active a em { position: absolute; left: 50%; bottom: -15px; width: 81px; height: 15px; margin-left: -40px; background: url('images/backgrounds/main-nav-active-button-pointer.png') no-repeat; zoom: 1; }
#container > header nav a:hover { -webkit-animation: MENU-HOVER 1.5s; text-shadow: 1px 1px 5px rgba(0,0,0,255)}
@-webkit-keyframes MENU-HOVER {
	0% { text-shadow: 1px 1px 3px rgba(0,0,0,0); }
	100% { text-shadow: 1px 1px 5px rgba(0,0,0,255); }
}

/* content items */
#main > article > object { width: 680px; }
.intro { margin: 0 0 20px; font-size: 20px; letter-spacing: 1px; }
object + .intro { margin-top: 30px; }
.intro img { position: relative; top: -12px; margin: 0 20px 8px 0; float: left; vertical-align: top; }
.ie6 .intro img, .ie7 .intro img { display: inline; }

.homepage-text .rich { width: 330px; margin-right: 20px; float: left; }
.ie6 .homepage-text .rich, .ie7 .homepage-text .rich { display: inline; }

.question { font-weight: normal; font-size: 20px; }

.lightbox { position: fixed; top: 100px; left: 50%; z-index: 100; width: 440px; margin-left: -250px; padding: 30px; background: #FFF; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.7); -moz-box-shadow: 0 0 20px rgba(0,0,0,.7); box-shadow: 0 0 20px rgba(0,0,0,.7); }
.no-boxshadow .lightbox { border: 1px solid #666666; }

#current-question { margin-top: 20px; margin-bottom: 20px; }
#current-question:first-child { margin-top: 0; }
.hr + #current-question { margin-top: 0; }
#current-question h2 { color: #50B0D6; }
#current-question h2 ~ h2 { margin-top: 20px; }
#current-question img { margin: 0 0 10px; display: block; }
#current-question > p { margin-bottom: 10px; }
#current-question div.box { margin-bottom: 10px; }

#steps { margin-bottom: 20px; }
#steps h2 { color: #50B0D6; }

#bestel-het-spel .rich { margin-bottom: 20px; }

#contest-essentials { margin-top: 20px; }
#contest-essentials h2 { color: #50B0D6; }

#winners li { margin-bottom: 10px; font-size: 14px; list-style-image: url('images/icons/list-item.png'); }
#winners li span { display: block; font-size: 12px; }

/* news */
.news { margin-bottom: 20px; overflow: hidden; }
.news h2 { margin-bottom: 10px; }
.news .rich { width: 330px; margin-right: 20px; float: left; }
.ie6 .news .rich, .ie7 .news .rich { display: inline; }
.news .meta { margin-top: 10px; padding-top: 10px; border-top: 1px solid #666666; }
.news .gallery { width: 330px; float: left; }
.ie6 .news .gallery, .ie7 .news .gallery { display: inline; }

html.js .gallery .media li { display: none; }
html.js .gallery .media li.current { display: block; }
html.js .gallery .navigation { display: block; }
.gallery { position: relative; }
.gallery ul { margin-left: 0; }
.gallery .navigation { margin: 10px -5px 10px 0; display: none; text-align: center; font-size: 0; } /* font-size: 0 fixes whitespace problems with inline-block */
.gallery li { margin-right: 5px; display: inline-block; vertical-align: middle; }
.ie6 .gallery li, .ie7 .gallery li { display: inline; }
.gallery a { width: 8px; height: 8px; overflow: hidden; border: 1px solid #4D4D4D; }
.gallery a:hover, .gallery .navigation a:focus, .gallery .navigation a.current { background: #4D4D4D; }

.gallery a.prev, .gallery a.next { position: absolute; top: 80px; width: 20px; height: 20px; background: url('images/icons/gallery-nav.gif'); border: 0; }
.gallery a.prev { left: 0; background-position: 0 0; }
.gallery a.prev:hover, .gallery a.prev:focus, .gallery a.prev:active { background-position: 0 -20px; }
.gallery a.next { right: 0; background-position: -20px 0; }
.gallery a.next:hover, .gallery a.next:focus, .gallery a.next:active { background-position: -20px -20px; }

/* older-newer paging links */
.paging { overflow: hidden; }
.paging .older { float: left; }
.ie6 .paging .older, .ie7 .paging .older { display: inline; }
.paging .newer { float: right; }
.ie6 .paging .newer, .ie7 .paging .newer { display: inline; }
.paging a { display: inline-block; font-size: 20px; text-decoration: none; text-transform: uppercase; color: #666666; }
.ie6 .paging a, .ie7 .paging a { display: inline; }
.paging a:hover, .paging a:focus { color: #50B0D6; }

.paging a span { position: relative; top: 5px; width: 7px; height: 25px; display: inline-block; background: url('images/icons/paging.gif') no-repeat; }
.ie6 .paging a span, .ie7 .paging a span { top: 0; display: inline; }
.ie6 .paging .older a span, .ie7 .paging .older a span { border-right: 5px solid #FFF; }
.ie6 .paging .newer a span, .ie7 .paging .newer a span { border-left: 5px solid #FFF; }
.paging .older span { margin-right: 10px; background-position: 0 0; }
.paging .older a:hover span, .paging .older a:focus span { background-position: 0 -25px; }
.paging .newer span { margin-left: 10px; background-position: -7px 0; }
.paging .newer a:hover span, .paging .newer a:focus span { background-position: -7px -25px; }

#factsheet h2 { color: #50B0D6; }
#factsheet .rich { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }

#bestel-het-spel h2 { color: #D30D0D; }
#bestel-het-spel .small img { max-width: 330px; }
.ie6 #bestel-het-spel .small img { width: 330px; overflow: hidden; }

#science-quiz h1, #science-quiz h2 { color: #EB882D; }
#science-quiz h2 { margin-top: 0; }

#scientists h1 { margin-bottom: 0; line-height: 1; }
#scientists h2 { font-size: 20px; }
#scientists #images_highlight figcaption, #scientists h1 { max-width: 305px; }

#presentator { position: absolute; top: 300px; right: 40px; width: 350px; height: 153px; text-shadow: 1px 1px 1px rgba(11,105,106,.5); color: #FFF; background: url('images/backgrounds/presentatrice.png'); }
#presentator h3 { width: 92px; height: 18px; background: url('images/text/presentator.png') no-repeat; }
#presentator h4 { font-size: 20px; }
#presentator div { margin: 30px 5px 0 25px; -webkit-transform: rotate(2.8deg); -moz-transform: rotate(2.8deg); }

.scientists { margin-left: 0; }
.scientists li { overflow: hidden; list-style: none; }
.scientists img { margin: 0 10px 20px 0; }
.scientists div { overflow: hidden; }

#more-scientists { clear: both; text-align: right; }
#more-scientists a { font-size: 20px; text-transform: uppercase; text-decoration: none; color: #666; }
#more-scientists a:hover, #more-scientists a:focus { color: #50B0D6; }
#more-scientists a span { position: relative; top: 5px; width: 7px; height: 25px; display: inline-block; margin-left: 10px; background: url('images/icons/paging.gif') no-repeat -7px 0; }
.ie6 #more-scientists a span, .ie7 #more-scientists a span { display: inline; }
#more-scientists a:hover span, #more-scientists a:focus span { background-position: -7px -25px; }

#info-page > img { margin-bottom: 20px; }

/* bus contests browsebox */
#bus_contests { padding-top: 20px; border-top: 1px solid #E6E6E6; }
#bus_contests h4 { font-size: 20px; color: #50B0D6; }
#bus_contests .box { margin: 10px 0; }
#bus_contests img { display: block; margin-bottom: 10px; }

/* images browsebox */
#images_highlight { position: relative; }
#images_highlight figcaption { font-style: italic; }
#images_highlight a.prev, #images_highlight a.next { top: 155px; width: 30px; height: 30px; background-image: url('images/icons/gallery-nav-large.gif'); }
#images_highlight a.prev { background-position: 0 0; }
#images_highlight a.prev:hover, #images_highlight a.prev:focus, #images_highlight a.prev:active { background-position: 0 -30px; }
#images_highlight a.next { background-position: -30px 0; }
#images_highlight a.next:hover, #images_highlight a.next:focus, #images_highlight a.next:active { background-position: -30px -30px; }

/* science quizzes browsebox */
#sciencequiz .question { margin-bottom: 10px; color: #EB882D; }
#sciencequiz .choices li { list-style: lower-latin; }

/* footer */
#container > footer nav { font-size: 0; overflow: hidden; background: url('images/backgrounds/footer-nav-bg.gif') repeat-x; border-top: 1px solid #B9B9BA; zoom: 1; }
#container > footer nav ul { float: left; }
.ie7 #container > footer nav ul { display: inline; }
#container > footer nav li { display: inline-block; }
.ie7 #container > footer nav li { display: inline; }
#container > footer nav li + li { border-left: 1px solid #B9B9BA; }
#container > footer nav a { padding: 0 30px; display: block; line-height: 60px; font-size: 20px; text-decoration: none; text-transform: uppercase; color: #666666; zoom: 1; }
#container > footer nav a:hover, #container > footer nav a:focus { color: #FFF; background: url('images/backgrounds/main-nav-active-button.png') repeat-x; }

#container > footer .partners { float: right; }
.ie7 #container > footer .partners { display: inline; }
#container > footer .partners p { float: left; font-size: 20px; text-transform: uppercase; line-height: 60px; }
.ie7 #container > footer .partners p { display: inline; }
.ie7 #container > footer .partners li { padding-top: 10px; }
#container > footer .partners li + li { border-left: 0; }
#container > footer .partners img { position: relative; vertical-align: middle; }
.ie7 #container > footer .partners img { vertical-align: bottom; }
#container > footer .partners img[src*='sns-reaal'] { top: -4px; }
#container > footer .partners li + li a { padding-left: 0; }
#container > footer .partners a:hover, #container > footer .partners a:focus { background: none; }

/* aside boxes */ 
.box { position: relative; margin-bottom: 20px; text-shadow: 1px 1px 1px rgba(11,105,106,.5); }
.box.red { color: #D30D0D; background: #D30D0D; }
.box.orange { color: #EB882D; background: #EB882D; }
.box.grey { color: #666666; background: #666666; }
.box.blue { color: #50B0D6; background: #50B0D6; }
.box h3 { position: relative; z-index: 2; min-height: 47px; margin-bottom: -12px; padding: 0 10px; font-weight: normal; line-height: 35px; text-shadow: none; background: url('images/backgrounds/box-header.png') no-repeat 50% 100%; }
.ie6 .box h3 { height: 47px; background-image: none; }
.box p, .box h4 { margin: 0 10px; padding: 10px 0; color: #FFF; }
.box h4 { padding-bottom: 0; text-transform: none; }
.box form { padding: 10px; }
.box a { color: #FFF; }
.box input, .box label { text-shadow: none; }

#latest-news p + h4 { border-top: 1px solid #FFF; }
#latest-news h4 + p { border-bottom: 1px solid #000; }
#latest-news h4 + p:last-child { border-bottom: none; }

/* forms */
form div { position: relative; margin-bottom: 10px; padding: 5px; background: #FFF; }
form div input, form div textarea { width: 100%; display: block; border: 0; background: transparent; }
form div input:focus, form div textarea:focus { outline: 0; }
.ie7 form div input[type="file"], .ie8 form div input[type="file"] { border: 1px solid #9D9D9D; }
html.js label.inline { position: absolute; top: 5px; left: 5px; }
html.js label.hidden { top: -999em; }
button { display: block; padding: 5px 10px; color: #FFF; background: #808080; border: 1px solid #CCC; }
button:hover { background-color: #9D9D9D; }

form .hp { position: absolute; top: -999em; }

.hinted p { margin-bottom: 1em; }
.hinted p.error { display: inline-block; color: #F00; }
.ie6 .hinted p.error, .ie7 .hinted p.error { display: inline; }
.hinted .left { padding: 0; }
.hinted div div { min-height: 20px; margin-left: 6px; border: 1px solid #9D9D9D; }
.ie6 .hinted div div { height: 20px; }
.hinted div.compound { padding-left: 0; padding-bottom: 0; border-width: 0; }
.hinted div.compound label, input[type="radio"], input[type="checkbox"],
.hinted div.compound label { width: auto; display: inline; }
.hinted label[for="is_subscriber_field"] { position: relative; top: 2px; }
.hinted div.datepicker select { max-width: 100px; }
.ie6 .hinted div.datepicker select { width: 100px; overflow: hidden; }
.hinted button { margin-left: 5px; display: inline-block; vertical-align: top; clear: both; }
.ie6 .hinted button, .ie7 .hinted button { display: inline; }

.hinted span.required { padding-left: 1px; border-left: 5px solid #50B0D6; }
.hinted span.visible { padding-left: 1px; border-left: 5px solid #EB882D; }
.hinted .form-hint { position: absolute; top: -1px; left: -6px; width: 5px; height: 0; display: block; border-top: 16px solid #FFF; border-bottom: 16px solid #FFF; }
.hinted .form-hint.required { border-top-color: #50B0D6; }
.hinted .form-hint.visible { border-bottom-color: #EB882D; }

#participation-form { clear: both; }
#participation-form h2 { color: #50B0D6; }
#order-game-form h2 { color: #D30D0D; }
#order-game-form div.compound { padding-top: 0; }
#order-game-form p.error, #contact-form p.error { display: block; }

/**
 * 5) mobile
 * --------------------------------
 */

/*
 * Media queries for responsive design
 * These follow after primary styles so they will successfully override. 
 */
@media all and (orientation:portrait) { 
	/* Style adjustments for portrait mode goes here */

}

@media all and (orientation:landscape) { 
	/* Style adjustments for landscape mode goes here */

}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
	html, body { background: #FFF; } 
	html { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
	#container, #main > article, #main > aside { width: auto; float: none; }
	#main > article { margin-right: 0; border: 0; }
	.left, .small, .homepage-text .rich { width: 280px !important; float: none; }
	img { max-width: 280px !important; }

	#container > header nav, #container > header nav ul, #container > footer nav, #container > footer nav ul { height: auto; overflow: visible; }
	#container > header nav li, #container > footer nav li { display: block; }

	#container > footer nav ul { width: auto; text-align: center; float: none; }
	#container > footer nav { background-image: none; }
	#container > footer .partners { float: none; }
	#container > footer nav .partners li { display: inline-block; }

	aside .box { text-align: center; }
	aside .box p { text-align: left; }
	
	.intro, #more-scientists { font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; }
	#more-scientists { float: none; text-align: left; }
	#more-scientists a { font-size: 12px; font-weight: normal; }
	#more-scientists a span { display: none; }
	
	.scientists img { max-width: 100px; }	
	
	div input { -webkit-appearance: none; }
	
	/* hide these from mobile */
	.intro img, .browsebox, #container > header nav li em, #win-een-bus-large, a#wie-zijn-die-wetenschappers, .partners > p, #presentator { display: none; }
}

/**
 * 6) print
 * --------------------------------
 */
@media print {
	* { background: transparent !important; color: #444 !important; text-shadow: none !important; }
	a, a:visited { color: #444 !important; text-decoration: underline; }
	a[href]:after { content: " (" attr(href) ")"; }
	abbr[title]:after { content: " (" attr(title) ")"; }
	.ir a:after { content: ""; }  /* Don't show links for images */
	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
	thead { display: table-header-group; }
	tr, img { page-break-inside: avoid; }
	@page { margin: 0.5cm; }
	p, h2, h3 { orphans: 3; widows: 3; }
	h2, h3 { page-break-after: avoid; }
}