/************************************
 * Stijlen voor alle visuele media  *
 ************************************/

@media screen, print {
    
/* Font en kleur */
body { font-family: "Times New Roman", serif; font-size: 100%; color: #000; background-color: #fff; line-height: 1.3; }

/* Marges, paddings en borders */
body, div { margin: 0; padding: 0; }
p, div.vcard { margin: 0 0 0.5em 0; }
img { border-style: none; }
blockquote { margin-left: 2em; margin-right: 2em; }

/* Headers */
h1 { text-align: center; font-size: 180%; padding: 0.3em 0 0.5em 0; margin: 0 0 0.6em 0; }
h2 { font-size: 140%; font-weight: bold; margin-bottom: 0.2em;}
h3 { font-size: 120%; font-weight: bold; margin-bottom: 0;}
h4 { font-size: 100%; font-weight: bold; margin-bottom: 0;}

/* Lists */
ul { list-style-type: disc;}
ol { list-style-type: decimal;} ol.a {list-style-type: lower-latin;}
ul, ol { margin: 0 0 0.5em 0; padding-left: 2em; }
dt { font-weight: bold; }

/* Cite */
* { quotes: "“" "”" "‘" "’"; }
cite { font-style: italic; }

/* Footer */
footer p { font-size: 90%; padding-top: 0.2em; clear: both; }

/* Tables */
th { text-align: inherit; }
caption { display: none; }
table.agenda { border: none; }
table.agenda th, table.agenda td { padding: 0 0.5em 0.2em 0.5em; vertical-align: top; border: none; }
table.agenda th { text-align: right; font-size: 100%; font-weight: bold; }
table.agenda th.sub { text-align: left; border-bottom: 1px solid black; margin-top: 0.5em; font-weight: normal; }
table.agenda td { text-align: left; }
table.wide th { width: 12em; }
table.optelling td, table.optelling th { vertical-align: bottom; border: none; }
table.optelling td.som { border-top: 1px solid black; }
table.tv-radio td { vertical-align: top; }
table.tv-radio th { width: 5.5em; background: #ccf; color: inherit; }
table.tv-radio th#omschrijving { width: auto; }
table.tv-radio h3 { margin: 0; }
table { border-collapse: collapse; }
td, th { border: 1px solid; padding: 0 0.5em 0 0.5em; }
table.controle { background-color: #fa5; color: #000; }
table.bevestigd { background-color: #8f8; color: #000; }

/* Formulieren */
/* Gebruik commentaar in selectors om deze regels voor Netscape te verbergen. Netcape kan niet met absolutely positioned labels omgaan. */
input, select { font-size: 90%; margin-bottom: 0.2em; border: 1px solid #aaa; }
form/**/.bestel fieldset { border: none; margin: 0 0 0.2em 0; padding: 0; }
form/**/.bestel fieldset label, fieldset input { margin: 0; }
form/**/.bestel legend { display: none; }

form/**/.zoek fieldset { border: none; margin: 0 0 0.2em 0; padding: 0; }

/* Inhoudsopgave Verniaan */
ul.verniaan { list-style-type: none; margin-top: 0.5em; }
ul.verniaan li { margin-bottom: 0.5em; }
ul.verniaan li h3 { margin-bottom: 0; font-weight: normal; font-size: 1.2em; }
ul.inhoud li { margin-left: 3.5em; position: relative; }
ul.inhoud .pagina { width: 2.5em; position: absolute; left: -3.5em; text-align: right; }

/* Figuren */
figure { display: block; padding: 0 0.5em; margin: 0.5em 0; text-align: center; font-size: 90%; width: auto; }
figure img { max-width: 100%; height: auto; }
.standalone { margin: 1em auto; }

figure p { margin: 0; }
.enlarge { color: #585858; }
figure figure { display: inline-block; margin: 0.5em; }
.showcase { overflow: hidden; margin: 0; padding: 0; min-width: 150px; }
.clear { clear: both; }
table.figure { font-size: 100%; }

/* Figuren (galleries) */ 
.gallery figure { margin: 1em 0; padding: 1em 0; clear: both; font-size: 100%; }
.gallery img { float: left; width: 30%; margin-right: 1em; }
.gallery figcaption { clear: none; text-align: left; }
.photo.gallery img { max-width: 200px; }
.book.gallery img { max-width: 200px; }
.gallery + * { clear: both; margin-top: 2em; }

/* Enkele specifieke stijlen */
.letop { border: 1px solid red; padding: 0.5em; font-style: italic; }
.intro { font-style: italic;}
.dagtekening { text-align: right; }
.ul { text-decoration: underline;}
ul#mailons li, ol.zoekresultaten li { margin-bottom: 1em;}
.zoekresultaten .updated { display: none; }
ul.namenlijst { list-style-type: none; padding-left: 0; }
ol.agenda { list-style-type: none; padding-left: 0; }
ol.agenda h4, ol.agenda h4 + p {display: inline; }
.caption { font-size: 85%; text-align: center;}
.error { color: #b60000; background: #fff; font-weight: bold; }
.bijeenkomsten ul { list-style-type: none; margin: 0 0 1em 0; padding: 0; }
img#briefhoofd { max-width: 100%; }
.sitemap a.goto { text-decoration: none; color: inherit; background-color: inherit; }

/* Statuten */
.statuten h3 { margin: 0; padding: 0 0 0.5em 0; text-align: center; }
.art { margin: 0 0 1em 0; padding: 0; position: relative; border: 1px solid white; }
.art h4 { width: 5em; text-align: right; padding: 0; margin: 0; font-weight: normal; position: absolute; left: 0; }
.art p { margin: 0; padding: 0 0 0 5.5em; }

/* Ledenlijst */
#alfabet { margin-bottom: 0.5em; }
#ledenlijst .vcard { width: 25em; padding-left: 0; position: relative; margin-bottom: 1em; }
#ledenlijst h3 { font-size: 1em; border-bottom: 1px solid; position: relative; margin: 0; padding-left: 0.2em; background:#ccf; color: inherit; }
#ledenlijst h3 span.soortlid {display: block; position: absolute; right: 0; top: 0; }
#ledenlijst .lidinfo { position: relative; min-height: 100px; padding-left: 0; }
#ledenlijst .adr .nl { display: none; }
#ledenlijst .photo {position: absolute; top: 0; right: 0; margin: 0; }

#ledenlijst.compact .vcard { width: auto; margin-bottom: 0.2em; }
#ledenlijst.compact .vcard div { display: inline; }
#ledenlijst.compact hr br { display: none; }
#ledenlijst.compact .street-address:after,
#ledenlijst.compact .locality:after,
#ledenlijst.compact .region:after { content: ", "; }
#ledenlijst.compact .country-name:after,
#ledenlijst.compact .tel:after,
#ledenlijst.compact .email:after { content: ". "; }
#ledenlijst.compact h3 { padding-left: 0.2em; background: inherit; display: inline; border: none; }
#ledenlijst.compact h3 span.soortlid {display: inline; position: relative; right: auto; }
#ledenlijst.compact h4 { display: inline; font-weight: normal; }
#ledenlijst.compact .adr { min-height: 0; }

/* abbr en acronym niet versieren */
abbr, acronym { border: none; }

/* Remedie tegen IE's peekaboo bug */
main {position: relative; }
figure { position: relative; }

/* Remedie tegen vreemde hasLayout effecten in IE */
nav * { min-width: 0; }
main { height: 100%; }

}

/*******************************
 * Stijlen voor alle schermen  *
 *******************************/

@media screen {

/* Links */
a { text-decoration: underline; background-color: inherit; color: #00d; }
a:visited { text-decoration: underline; background-color: inherit; color: #707; }
a:hover, a:focus { text-decoration: underline; background-color: inherit; color: #800;}
a:active { text-decoration: underline; background-color: #ffc; color: #700;}

/* Menubalk: kleur, font, header */
nav { font-family: Verdana, Lucida, "Lucida Sans", sans-serif; background-color: #22b; color: #ff5; }
nav h1 { display: none; }

/* Menubalk: lijst */
nav ul { list-style: none; margin: 0; padding: 0; }
nav li { margin: 0; padding: 0 0 0.1em 0; position: relative; } /* margin-bottom nodig voor IE */

/* Menubalk: links */
nav a {
 display: block; height: 100%; margin: 0; padding: 0.2em 0 0.3em 0;
 color: #ff5; background-color: inherit; text-decoration: none; font-size: 110%;
}
nav a:visited { color: #ff5; }
nav li li a { font-size: 100%; }

/* Basis: enkele kolom met geneste lijsten */
/* position: relative nodig voor IE */
nav li ul {
 display: block; position: relative;
 width: 90%; margin: 0 0 0 5%; padding: 0;
 font-size: 95%;
}
nav #languages {
 margin-top: 2em;
}

}

/*******************************************
 * Stijlen voor smal scherm (tot 35 em)    *
 *******************************************/

@media screen and (max-width: 35em){

main { margin: 4.5em 0.5em 0.5em 0.5em; }

/* h1 in blauwe balk bovenaan */
main h1 { position: fixed; top: 0; left: 0; font-size: 150%; width: 100%; min-height: 1.6em; background: #22b; color: #ff5; padding: 0.5em 0 0.15em 0; margin: 0; z-index: 1; }
h2 { font-size: 125%; }

/* Padding voor menu */
nav { padding: 0.5em; z-index: 10; width: 100%; }

/* Menubalk: hover */
nav a:hover, nav a:focus, nav a:active { color: #fff; background-color: #101088; }
nav a.goto:hover, nav a.goto:focus, nav a.goto:active { color: inherit; background-color: inherit; text-decoration: none; }

/* Menubalk: pijltjes */
nav li>a.goto:after { content: " »"; }

/* Footer compacter */
footer { padding: 0.5em; }
footer p { margin: 0; }

/* nav ul ul.active { border: 2px solid green; } */
nav ul ul.passive { display: none; }
}

/**********************************************
 * Stijlen voor breder scherm (vanaf 35 em)   *
 **********************************************/

@media screen and (min-width: 35em){

/* Lijnen tussen titel, content en footer */
h1 { border-bottom: 2px groove #fff; }
footer p { border-top: 2px groove #fff; margin: 0; }
footer * + p { border-top: none; }

/* Menubalk: positie en afmetingen; positie submenu's voor IE en echte browsers */
nav { position: absolute; left: 0; top: 0; width: 9.5em; padding: 0.5em 0 0 0.5em; }
nav li li { width: 100%; position: relative; }
nav img { max-width: 100%; height: auto; }

/* Menubalk: pijltjes */
nav li>a.goto { background: url("../pics/arrow.gif") no-repeat right center; }

/* Menubalk: hover */
nav li:hover { background-color: #101088; }
nav li.activeheader { background-color: #101088; }
nav a:hover, nav a:focus, nav a:active { color: #fff; background-color: #101088; }

/* Content en footer: juiste kleur en positie */
body { background: url("../pics/donkerblauw-wit.gif") #22b repeat-y 10em; }
main, footer { background: url("../pics/donkerblauw-wit.gif") white repeat-y; color: inherit; padding: 0 1em 0.5em 50px; margin: 0 0 0 10em; }

/* Verberg en toon submenu's met :hover */
/* Niet begrepen door IE <= 6, dus deze regels voor IE <= 6 verstoppen met > selector */
/* Geen spaties rond de >, anders past IE 5.0 deze regels alsnog toe. */

nav li>ul {
 position: absolute; top: 0; right: 100em;
 width: 15em; margin: 0;
 background-color: #22b; color: #ff5;
 font-size: 100%;
}
nav li:hover>ul { right: -15em; }
/* Positie submenu's */
nav li>ul li { position: absolute; top: 0; left: 0; width: 15em; }
nav li:hover>ul li { position: relative; }
nav li>ul li a { width: 14em; padding: 0.2em 0.5em; }

/* Fix voor non-support :hover voor li, class toegekend via JS */

nav li.passiveheader ul, nav li.activeheader ul {
 display: block; width: 15em; margin: 0; padding: 0;
 position: absolute; top: 0;
 background-color: #22b; color: #ff5;
}
.passiveitem a:visited { background-color: #22b; color: #ff5; }
nav li.passiveheader ul, nav li.activeheader li.passiveheader ul { right: 100em; }
nav li.activeheader ul { right: -15em; }
/* Positie submenu's */
nav li.passiveheader ul li { position: absolute; top: 0; left: 0; width: 15em; }
nav li.activeheader ul li { position: relative; }
nav li.passiveheader ul li a { width: 14em; padding: 0.2em 0.5em; }
nav li.passiveheader a.goto, nav li.activeheader a.goto { background: url("../pics/arrow.gif") no-repeat right center; }

/* Toon links bij doorlopen menu met keyboard */
/* IE gebruikt :active als :focus, kan geen kwaad om ook echte :active zo te stylen */
/* IE <= 6 interpreteert negatieve waarde voor right verkeerd, dus verbergen met > */
nav li li>a:focus, nav li li>a:active {
 position: absolute; top: 0;
 background-color: #101088; color: #fff;
 height: auto;
}
nav li li>a:focus, nav li li>a:active { right: -115em; }
nav li li li>a:focus, nav li li li>a:active { right: -215em; }
nav li li li li>a:focus, nav li li li li>a:active { right: -315em; }
nav li li li li li>a:focus, nav li li li li li>a:active { right: -415em; }
nav li li li li li li>a:focus, nav li li li li li li>a:active { right: -515em; }
nav li li li li li li li>a:focus, nav li li li li li li li>a:active { right: -615em; }
/* Met JS gedraagt :focus zich als :hover op bovenliggende li, in dat geval komen de speciale regels voor :focus te vervallen */
nav li.activeheader li>a:focus, nav li.activeheader li>a:active {
 position: relative; top: 0; right: 0;
}

/* Formulieren */
/* Gebruik commentaar in selectors om deze regels voor Netscape te verbergen. Netcape kan niet met absolutely positioned labels omgaan. */

form/**/.artikelen { position: relative; padding: 0; margin: 0 0 0 9em;}
form/**/.artikelen label.voor { display: block; position: absolute; left: -9.5em; font-size: 100%; width: 9em; padding: 0.2em 0.5em 0 0; margin: 0; text-align: right; }
form/**/.artikelen fieldset { border: none; margin: 0 0 0.2em 0;  padding: 0;}
form/**/.artikelen fieldset label, fieldset input { margin: 0; }
form/**/.artikelen legend { display: none; }

form.ledenbeheer div.regel { position: relative; height: 1.5em; }
form.ledenbeheer div.regel input, form.ledenbeheer div.regel select { position: absolute; left: 15em; font-size: 0.8em; font-family: Arial, Helvetica, sans-serif; }
form.ledenbeheer div.regel label.voor { display: block; position: absolute; width: 11.5em; text-align: right; } 
form.ledenbeheer fieldset { margin: 0 0 0 12em; }
form.ledenbeheer div.submit { position: relative; left: 12em; height: 1.5em; font-size: 1em; font-family: Arial, Helvetica, sans-serif; }
form.ledenbeheer div.submit input { position: relative; right: 12em; }

}


/*****************************************
 * Aanpassingen voor smallere schermen   *
 *****************************************/

@media screen and (max-width: 50em) {

/* Compactere formulieren */
form .voor { display: block; width: 100%; }

/* Floatende figuren */
.leadin { margin: 1em 0; text-align: left; padding: 0; }
.inset { margin: 1em 0; padding: 0; }

/* Inhoudsopgave Verniaan */
ul.verniaan { padding-left: 0; }

table.agenda th, table.agenda td { display: block; width: 100%; text-align: left; }
table.agenda th:after { content: ":"; }
table.agenda th.sub:after { content: none; }

}

/********************************************
 * Stijlen voor breed scherm (vanaf 50 em)  *
 ********************************************/

@media screen and (min-width: 50em) {

/* Floatende figuren */
.inset { float: right; margin: 0 0 1em 1em; }
.leadin { float: left; margin: 0 1em 1em 0; }
figcaption { clear: both; }

/* Ruimere opzet formulieren */
form/**/.bestel { position: relative; padding: 0; margin: 0 0 0 7em;}
form/**/.bestel label.voor { display: block; position: absolute; left: -7.5em; font-size: 100%; width: 7em; padding: 0.2em 0.5em 0 0; margin: 0; text-align: right; }

}

@media screen and (min-width: 55em) {

form/**/.zoek label, form/**/.zoek legend { display: block; text-align: right; width: 10em; float: left; padding-right: 1em; }
form/**/.zoek fieldset label { display: inline; width: auto; float: none; padding: 0; margin: 0 0.5em 0 0.2em; }
form/**/.zoek fieldset input { margin: 0; }

}

/***********************
 * Stijlen voor print  *
 ***********************/

@media print {

/* Geen menu */
nav { display: none; }
body, main, footer { background-image: none; }

/* Links in zelfde kleur als rest van tekst */
a, a:visited {color: inherit; background-color: inherit; text-decoration: underline; }

/* Lijn onder titel in pt */
h1 { border-bottom: 1pt solid #000; }

/* Footer */
footer p { border-top: 1pt solid #000; }
footer a { text-decoration: none; }
#copy:after { content: " (www.jules-verne.nl)"; }

/* Enkele elementen niet weergeven */
.enlarge, .decoration { display: none; }

/* Ledenpagina's: geen alfabet bovenaan, geen link naar plattegrond, grijs balkje */
#ledenlijst .plattegrond, #alfabet { display: none; }
#ledenlijst h3 { background: #ddd; color: inherit; }
.selectview { display: none; }

/* Forms makkelijker met pen in te vullen, onnodige buttons weg */
form/**/.bestel label.voor { padding-top: 1em; display: inline-block; text-align: right; width: 30%; max-width: 15em; page-break-after: avoid; }
input[type=text], input[type=password] { border: none; border-bottom: 1px solid black; width: 60%; padding-top: 1em; }
input[type=submit], input[type=reset] { display: none; }
input[type=checkbox] { content: "☐ "; font-size: 120%; }
input[type=radio] { display: none; }
input[type=radio] + label:before { content: "/ "; }
legend + input[type=radio] + label:before { content: ""; }
fieldset:lang(en):after { content: " (select one)"; }
fieldset:lang(nl):after { content: " (doorhalen wat niet gewenst is)"; }
fieldset br { display: none; }

/* Geen page break in table elements en in diverse andere elementen */
th, td, .clear, .inset, #ledenlijst .vcard { page-break-inside: avoid; }

/* Geen page break direct na headers */
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }

/* Weduwen en wezen */
p { orphans: 2; widows: 2; }

/* Lijnen tussen titel, content en footer */
h1 { border-bottom: 2px groove #fff; }
footer p { border-top: 2px groove #fff; margin: 0; }
footer * + p { border-top: none; }

}

/********************************************************
 * Stijlen voor print op smal papier / in grote letter  *
 ********************************************************/

@media print and (max-width: 20em){

form/**/.bestel label.voor { display: block; width: auto; max-width: none; text-align: left; }
input[type=text], input[type=password] { width: 100%; }

table.agenda th, table.agenda td { display: block; width: 100%; text-align: left; }
table.agenda th:after { content: ":"; }
table.agenda th.sub:after { content: none; }
table.agenda th { page-break-after: avoid; }

}

/**********************************************************
 * Stijlen voor print op breed papier / in kleine letter  *
 **********************************************************/

@media print and (min-width: 20em){

/* Floatende figuren */
.inset { float: right; margin: 0 0 1em 1em; }
.leadin { float: left; margin: 0 1em 1em 0; }
figcaption { clear: both; }

}