/********************************************************
 * Stijlen voor alle visuele media (behalve handheld)   *
 ********************************************************/

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

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

/* Headers */
h1 { text-align: center; font-size: 200%; padding: 0.3em 0 0.2em 0; margin: 0 0 0.3em 0; }
h2 { font-size: 150%; 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: 11em; }
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; }

/* Bestelformulieren */
/* Gebruik commentaar in selectors om deze regels voor Netscape te verbergen. Netcape kan niet met absolutely positioned labels omgaan. */
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; }
input, select { font-size: 90%; margin-bottom: 0.2em; }
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/**/.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; }

/* 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; text-align: center; font-size: 90%; }
.standalone { margin: 1em auto; }
.inset { float: right; margin: 0 0 1em 1em; }
.leadin { float: left; margin: 0 1em 1em 0; }
.figure p { margin: 0; }
.legend { clear: both; }
.enlarge { color: #585858; }
.subfigure { display: inline-block; margin: 0.5em; }
.clear { clear: both; }
table.figure { font-size: 100%; }

/* Figuren (galleries) */ 
.gallery .figure { margin: 1em 0; padding: 0; clear: both; text-align: right; width: 30%; position: relative; font-size: 100%; }
.gallery img { margin: 0; }
.gallery .legend { clear: none; text-align: left; position: absolute; left: 100%; top: 0; width: 228.33333333%; margin-left: 5%; }
.photo.gallery .figure { min-width: 200px; }
.photo.gallery .figure img { max-width: 200px; }
.book.gallery .figure { min-width: 200px; }
.book.gallery .figure img { max-width: 200px; }

/* 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;}
ul.namenlijst { list-style-type: none; padding-left: 0; }
ol.agenda { list-style-type: none; padding-left: 0; }
.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; }
.adr { padding-left: 2em; margin-top: 0; margin-bottom: 0.5em; }
span.adr { padding-left: 0; margin: 0; }

/* 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; }
#ledenlijst h3 span.soortlid {display: block; position: absolute; right: 0; top: 0; }
#ledenlijst .adr { position: relative; min-height: 100px; padding-left: 0; }
#ledenlijst .adr .nl { display: none; }
.lidfoto {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 .adr { min-height: 0; }

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

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

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

}

/*************************************
 * Stijlen voor screen/projection    *
 *************************************/

@media screen, projection {

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

/* Menubalk: lijst */
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu li { margin: 0; padding: 0 0 0.1em 0; position: relative; } /* margin-bottom nodig voor IE */
#menu li>a.goto { background: url("/pics/arrow.gif") no-repeat right center; }

/* Menubalk: links */
#menu 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%;
}
#menu li li a { font-size: 100%; }

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

/* 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;}

/* Gekleurd balkje ledenlijst */
#ledenlijst h3 { background:#ccf; color: inherit; }

}

/****************************
 * Stijlen voor screen     *
 ****************************/

@media screen {

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

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

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

/* 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. */

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

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

#menu li.passiveheader ul, #menu li.activeheader ul {
 display: block; width: 15em; margin: 0; padding: 0;
 position: absolute; top: 0;
 background-color: #22b; color: #ff5;
}
#menu li.passiveheader ul, #menu li.activeheader li.passiveheader ul { right: 100em; }
#menu li.activeheader ul { right: -15em; }
/* Positie submenu's */
#menu li.passiveheader ul li { position: absolute; top: 0; left: 0; width: 15em; }
#menu li.activeheader ul li { position: relative; }
#menu li.passiveheader ul li a { width: 14em; padding: 0.2em 0.5em; }
#menu li.passiveheader a.goto, #menu li.activateheader 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 > */
#menu li li>a:focus, #menu li li>a:active {
 position: absolute; top: 0;
 background-color: #101088; color: #fff;
 height: auto;
}
#menu li li>a:focus, #menu li li>a:active { right: -115em; }
#menu li li li>a:focus, #menu li li li>a:active { right: -215em; }
#menu li li li li>a:focus, #menu li li li li>a:active { right: -315em; }
#menu li li li li li>a:focus, #menu li li li li li>a:active { right: -415em; }
#menu li li li li li li>a:focus, #menu li li li li li li>a:active { right: -515em; }
#menu li li li li li li li>a:focus, #menu 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 */
#menu li.activeheader li>a:focus, #menu li.activeheader li>a:active {
 position: relative; top: 0; right: 0;
}

/* 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 projection    *
 ****************************/

@media projection {

/* Sans-serif font voor alle tekst */
body { font-family: sans-serif; font-size: 200%; }

/* Content: juiste kleur en positie */
#content { margin: 4.5em 0.5em 3.5em 0.5em; z-index: 0; }

/* h1 in blauwe balk bovenaan */
#content 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: 10; }
h2 { font-size: 125%; }

/* Footer in blauwe balk onderaan */
#footer { position: fixed; bottom: 0; right: 0; width: 100%; font-size: 60%; height: 3em; text-align: right; background: #22b; color: #ff5; margin: 0; padding: 0 0.5em 0 0.5em; z-index: 10; }  
#footer a { color: inherit; background: inherit; }

/* Menubalk: header */
div#menu h1 { display: block; position: fixed; bottom: 0; left: 0; z-index: 30; font-size: 120%; padding: 0.25em 0.25em 0em 0.25em; margin: 0; height: 1.5em; width: 10.5em; text-align: left; }

/* Menubalk: positie en afmetingen */
#menu { font-size: 80%; }
#menu a { padding: 0 0 0.2em 0.2em; }
#menu ul { position: fixed; width: 9.8em; margin: 0; border: 0.1em solid #101088; padding: 0 0 0.5em 0; background: #22b; color: #ff5; }
#menu > ul { bottom: 1.75em; left: 0; z-index: 40; }
/* #menu > ul > li { padding-left: 0.5em; } */
#menu ul ul { left: 10em; }
#menu ul ul ul { left: 20em; }
#menu ul ul ul ul { left: 30em; }
#menu ul ul ul ul ul { left: 40em; }
#menu li>ul { bottom: -1000em; }
#menu li:hover>ul { bottom: 1.75em; }

#menu img.decoration { display: none; }
#menu img { height: 1.2em; width: auto; }
#menu li.goto { background-image: none; }

/* Menu verbergen tot het via de h1 wordt opgeroepen */
#menu > ul { display: none; } 
#menu h1:hover + p + ul { display: block; }
#menu ul:hover { display: block; }

h2, h3 { page-break-before: always; padding-top: 4.5em; }

}

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

@media print {

/* Geen menu */
#menu { display: none; }
body, #content, #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[class="voor"] { padding-top: 1em; }
input[type=text], input[type=password] { border: none; border-bottom: 1px solid black; width: 80%; 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)"; }

}

/********************************
 * Stijlen voor paged media    *
 *******************************/

@media print, projection {

/* 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; }

}

/*************************
 * Stijlen voor speech   *
 *************************/

@media speech {

/* Standaard stem, nadruk, etc. */
body {
 voice-family: male; speak: normal;
 -xv-voice-pitch: 120; pitch: 120;
 -xv-voice-volume: 50; volume: 50;
 -xv-voice-pitch-range: 80; pitch-range: 80;
}
em { -xv-voice-stress: strong; stress: strong; -xv-voice-pitch: 140; pitch: 140; }
strong { -xv-voice-volume: 100; volume: 100; }
th { -xv-voice-pitch: 140; pitch: 140; }

/* Vrouwenstem voor bepaalde elementen */
img, .letop, caption, #menu .goto { voice-family: female; -xv-voice-pitch: 200; pitch: 200; }

/* Pauzes */
h1 { pause-before: 1s; pause-after: 1s; }
h2 { pause-before: 1s; pause-after: 500ms; }
h3 { pause-before: 500ms; pause-after: 300ms; }
table { pause-after: 500ms; }

/* Extra content */
#content li:before { content: "List item. "; }
.letop:before { content: "Note: "; }
table:before { content: "Table: "; }

/* Niet weer te geven elementen */
.enlarge, .decoration, #alfabet { speak: none; }

/* Quotes niet nodig */
h1 cite:before, h2 cite:before { content: none; }
h1 cite:after, h2 cite:after { content: none; }

}