/* site.css – shared stylesheet for sandernijdam.nl (Phase 2) * Loaded AFTER the existing stijlen.css of each page, so the per-section look * (colours, fonts, backgrounds of the trip reports) stays as it was. * Colours and fonts are CSS variables; a section can override them. */ :root { --bg: #E8D6CC; /* page background (main site) */ --accent: darkred; /* headings */ --link: darkblue; --text: #000; --menu-hover: #F9D98E; --font: "Book Antiqua", "Palatino Linotype", Palatino, "Century Schoolbook", serif; --caption-font: Verdana, Arial, Helvetica, sans-serif; --gap: 12px; --page-max: 1100px; } /* ===================== section themes (were stijlen.css per section) ===================== Scoped with :where(.class) so they behave exactly like the old separate stylesheets. */ /* --- s-main (was stijlen.css) --- */ body:where(.s-main) {color:black; font-size: 12pt; font-family: "Book Antiqua", Century Schoolbook, serif; font-weight:bold; word-spacing: 0.04em;} :where(.s-main) H1 { color:darkred; font-size: 28pt; font-weight:bold;} :where(.s-main) H2 { color:darkred; font-size: 18pt; padding-top:0; padding-bottom:0;} :where(.s-main) H3 { color:darkred;font-size: 17pt;} :where(.s-main) H4 { color:darkred; padding-top:0; font-size: 14pt;} :where(.s-main) TD { color:black; font-size: 12pt; font-family: "Book Antiqua", Century Schoolbook, serif; font-weight:bold; word-spacing: 0.04em;} :where(.s-main) A { color:darkblue; border: none} :where(.s-main) LI {padding-bottom:4pt} :where(.s-main) .rss-title {color:darkred} :where(.s-main) .rss-items { margin-left: 1.3em;} :where(.s-main) .rss-item {font-size: 11pt; padding-bottom:5pt;list-style-image: url(../images/newbullet.gif);} :where(.s-main) .rss-date { font-size: 9pt} :where(.s-main) .vlag { position: absolute; top: 65px;right: 10px;} :where(.s-main) code { /*CSS for insructions*/color: red;} :where(.s-main) .labelfield { /*CSS for label field in general*/color:brown;font-size: 90%;} :where(.s-main) .datefield { /*CSS for date field in general*/color:gray;font-size: 90%;} /* --- s-afrika (was afrikareis/stijlen.css) --- */ body:where(.s-afrika) { color:black; font-family: GoudyOlSt BT, Book Antiqua, Serif; font-size: 18px; word-spacing: 0.04em;} :where(.s-afrika) H1 { color:darkgreen; font-size: 28pt; font-weight:bold;} :where(.s-afrika) H2 { color:darkgreen; font-size: 18pt; padding-top:0;} :where(.s-afrika) H3 { color:darkgreen;font-size: 17pt;} :where(.s-afrika) H4 { color:rgb(70,70,70); padding-top:0; font-size: 14pt;} :where(.s-afrika) A { color:darkblue; border: none} :where(.s-afrika) TD.normaal { color:darkblue; border: none; font-size: 11pt; font-family: Bookman Old Style;, Century Schoolbook, serif; font-weight:bold; word-spacing: 0.04em;} :where(.s-afrika) UL { margin-left: 1.3em} :where(.s-afrika) LI {padding-bottom:4pt;list-style-image: url(../afrikareis/bullet.gif);} :where(.s-afrika) LI.a {padding-bottom:4pt;list-style-image: none} :where(.s-afrika) IMG {border:none} :where(.s-afrika) IMG.plaatje {float:right; width:240px; height:180px; border:none} :where(.s-afrika) IMG.plaatjev {float:right; width:180px; height:240px; border:none} :where(.s-afrika) IMG.icoon {border:none; margin:0; vertical-align:middle} :where(.s-afrika) IMG.pano {border:none; width:700px; height:180px; margin:0; vertical-align:middle} :where(.s-afrika) DIV.icoonfloat {position:absolute;width:196px;visibility:hidden;z-index:2; border:solid black 1px;background-color:#F4DABF; text-Align:center;font-size:18px; font-family: GoudyOlSt BT, Book Antiqua, Serif; padding-bottom: 5px; } /* --- s-china (was chinareis/stijlen.css) --- */ body:where(.s-china) { color:black; font-size: 11pt; font-family: "Book Antiqua", Century Schoolbook, serif; font-weight:bold; word-spacing: 0.04em;} :where(.s-china) H1 { color:darkgreen; font-size: 28pt; font-weight:bold;} :where(.s-china) H1.pagetitle { color:darkgreen; font-size: 28pt; font-weight:bold;} :where(.s-china) pagetitle { color:darkgreen; font-size: 28pt; font-weight:bold;} :where(.s-china) H2 { color:darkgreen; font-size: 18pt; padding-top:0;} :where(.s-china) H3 { color:darkgreen;font-size: 17pt;} :where(.s-china) H4 { color:rgb(70,70,70); padding-top:0; font-size: 14pt;} :where(.s-china) A { color:darkblue; border: none} :where(.s-china) TD.normaal { color:darkblue; border: none; font-size: 11pt; font-family: "Book Antiqua", Century Schoolbook, serif; font-weight:bold; word-spacing: 0.04em;} :where(.s-china) UL { margin-left: 1.3em} :where(.s-china) LI {padding-bottom:4pt;list-style-image: url(../chinareis/bullet.gif);} :where(.s-china) LI.a {padding-bottom:4pt;list-style-image: none} :where(.s-china) IMG {border:none} :where(.s-china) IMG.plaatje {float:right; width:240px; height:180px; border:none} :where(.s-china) IMG.plaatjev {float:right; width:180px; height:240px; border:none} :where(.s-china) IMG.icoon {border:none; margin:0; vertical-align:middle} :where(.s-china) IMG.pano {float: center; margin: 0 auto;} :where(.s-china) DIV.icoonfloat {position:absolute;width:196px;visibility:hidden;z-index:2; border:solid black 1px;background-color:#E5FFE4; text-Align:center;font-size:18px; font-family: GoudyOlSt BT, Book Antiqua, Serif; padding-bottom: 5px; } /* --- s-ecuador (was ecuador-galapagos/stijlen.css) --- */ body:where(.s-ecuador) { color:black; font-size: 11pt; font-family: GoudyOlSt BT, Book Antiqua, Serif; font-size: 18px; word-spacing: 0.04em;} :where(.s-ecuador) H1 { color:darkgreen; font-size: 28pt; font-weight:bold;} :where(.s-ecuador) H2 { color:darkgreen; font-size: 18pt; padding-top:0;} :where(.s-ecuador) H3 { color:darkgreen;font-size: 17pt;} :where(.s-ecuador) H4 { color:rgb(70,70,70); padding-top:0; font-size: 14pt;} :where(.s-ecuador) A { color:darkblue; border: none} :where(.s-ecuador) TD.normaal { color:darkblue; border: none; font-size: 11pt; font-family: Bookman Old Style;, Century Schoolbook, serif; font-weight:bold; word-spacing: 0.04em;} :where(.s-ecuador) UL { margin-left: 1.3em} :where(.s-ecuador) LI {padding-bottom:4pt;list-style-image: url(../ecuador-galapagos/bullet.gif);} :where(.s-ecuador) LI.a {padding-bottom:4pt;list-style-image: none} :where(.s-ecuador) IMG {border:none} :where(.s-ecuador) IMG.plaatje {float:right; width:240px; height:180px; border:none} :where(.s-ecuador) IMG.plaatjev {float:right; width:180px; height:240px; border:none} :where(.s-ecuador) IMG.icoon {border:none; margin:0; vertical-align:middle} :where(.s-ecuador) IMG.pano {border:none; width:700px; height:180px; margin:0; vertical-align:middle} :where(.s-ecuador) div.dagschema {/* header element float */ float: right; width: 15em;/* em width variance by element*/ margin: 0 0 0 0.2em; padding-right: 0.2em; border-left: 2px dotted darkgreen; border-bottom: 2px dotted darkgreen; border-top: 2px dotted darkgreen; } :where(.s-ecuador) DIV.icoonfloat {position:absolute;width:196px;visibility:hidden;z-index:2; border:solid black 1px;background-color:#f2f2a1; text-Align:center;font-size:18px; font-family: GoudyOlSt BT, Book Antiqua, Serif; padding: 0 5px 5px 5px; } /* --- s-noorwegen (was noorwegen/stijlen.css) --- */ body:where(.s-noorwegen) { color:#004080; font-size: 11pt; font-family: "Book Antiqua", Century Schoolbook, serif; font-weight:bold; word-spacing: 0.04em;} :where(.s-noorwegen) H1 { color:#003366; font-size: 28pt; font-weight:bold;} :where(.s-noorwegen) H1.pagetitle { color:#003366; font-size: 28pt; font-weight:bold;} :where(.s-noorwegen) pagetitle { color:#003366; font-size: 28pt; font-weight:bold;} :where(.s-noorwegen) H2 { color:#006699; font-size: 18pt; padding-top:0;} :where(.s-noorwegen) H3 { color:#006699;font-size: 17pt;} :where(.s-noorwegen) H4 { color:#003366; padding-top:0; font-size: 14pt;} :where(.s-noorwegen) A { color:#005BB6; border: none} :where(.s-noorwegen) TD.normaal { color:#005BB6; border: none; font-size: 11pt; font-family: "Book Antiqua", Century Schoolbook, serif; font-weight:bold; word-spacing: 0.04em;} :where(.s-noorwegen) UL { margin-left: 1.3em} :where(.s-noorwegen) LI {padding-bottom:4pt;list-style-image: url(../noorwegen/bullet.gif);} :where(.s-noorwegen) LI.a {padding-bottom:4pt;list-style-image: none} :where(.s-noorwegen) IMG {border:none} :where(.s-noorwegen) IMG.plaatje {float:right; clear: left; width:240px; border:none} :where(.s-noorwegen) IMG.plaatjev {float:right; clear: left; height:240px; border:none} :where(.s-noorwegen) IMG.icoon {border:none; margin:0; vertical-align:middle} :where(.s-noorwegen) IMG.pano {float: center; margin: 0 auto;} :where(.s-noorwegen) IMG.kaart {vertical-align: middle; border:none} :where(.s-noorwegen) DIV.icoonfloat {position:absolute;width:196px;visibility:hidden;z-index:2; border:solid black 1px;background-color:#C1E0FF; text-Align:center;font-size:18px; font-family: GoudyOlSt BT, Book Antiqua, Serif; padding-bottom: 5px; } /* --- s-thai (was thailandreis/stijlen.css) --- */ body:where(.s-thai) { color:black; font-size: 11pt; font-family: "Book Antiqua", Century Schoolbook, serif; font-weight:bold; word-spacing: 0.04em;} :where(.s-thai) H1 { color:darkgreen; font-size: 28pt; font-weight:bold;} :where(.s-thai) H2 { color:darkgreen; font-size: 18pt; padding-top:0;} :where(.s-thai) H3 { color:darkgreen;font-size: 17pt;} :where(.s-thai) H4 { color:rgb(70,70,70); padding-top:0; font-size: 14pt;} :where(.s-thai) A { color:darkblue; border: none} :where(.s-thai) TD.normaal { color:darkblue; border: none; font-size: 11pt; font-family: "Book Antiqua", Century Schoolbook, serif; font-weight:bold; word-spacing: 0.04em;} :where(.s-thai) UL { margin-left: 1.3em} :where(.s-thai) LI {padding-bottom:4pt;list-style-image: url(../thailandreis/bullet.gif);} :where(.s-thai) LI.a {padding-bottom:4pt;list-style-image: none} :where(.s-thai) IMG {border:none} :where(.s-thai) IMG.plaatje {float:right; width:240px; height:180px; border:none} :where(.s-thai) IMG.plaatjev {float:right; width:180px; height:240px; border:none} :where(.s-thai) IMG.icoon {border:none; margin:0; vertical-align:middle} :where(.s-thai) IMG.pano {border:none; width:700px; height:180px; margin:0; vertical-align:middle} :where(.s-thai) DIV.icoonfloat {position:absolute;width:196px;visibility:hidden;z-index:2; border:solid black 1px;background-color:#EFFFDA; text-Align:center;font-size:18px;padding: 5px; font-family: GoudyOlSt BT, Book Antiqua, Serif; padding-bottom: 5px; } /* --- s-thaifoto (was thailandreis/imagepages/stijlen.css) --- */ body:where(.s-thaifoto) { color:black; font-size: 11pt; font-family: "Book Antiqua", Century Schoolbook, serif; font-weight:bold; word-spacing: 0.04em;} :where(.s-thaifoto) H1 { color:darkgreen; font-size: 28pt; font-weight:bold;} :where(.s-thaifoto) H2 { color:darkgreen; font-size: 18pt; padding-top:0;} :where(.s-thaifoto) H3 { color:darkgreen;font-size: 17pt;} :where(.s-thaifoto) H4 { color:rgb(70,70,70); padding-top:0; font-size: 14pt;} :where(.s-thaifoto) A { color:darkblue; border: none} :where(.s-thaifoto) TD.normaal { color:darkblue; border: none; font-size: 11pt; font-family: "Book Antiqua", Century Schoolbook, serif; font-weight:bold; word-spacing: 0.04em;} :where(.s-thaifoto) UL { margin-left: 1.3em} :where(.s-thaifoto) LI {padding-bottom:4pt;list-style-image: url(../thailandreis/imagepages/bullet.gif);} :where(.s-thaifoto) LI.a {padding-bottom:4pt;list-style-image: none} :where(.s-thaifoto) IMG {border:none} :where(.s-thaifoto) IMG.plaatje {float:right; width:240px; height:180px; border:none} :where(.s-thaifoto) IMG.plaatjev {float:right; width:180px; height:240px; border:none} :where(.s-thaifoto) IMG.icoon {border:none; margin:0; vertical-align:middle} :where(.s-thaifoto) IMG.pano {border:none; width:700px; height:180px; margin:0; vertical-align:middle} /* --- s-maleisie (was maleisie2014/index.css) --- */ :where(.s-maleisie) .pagetitle { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20pt; color: #000000; font-weight: bold; } :where(.s-maleisie) .thumbtitle { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; } :where(.s-maleisie) .imagetitle { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; } /* ===================== former presentational HTML (font/align/valign/hspace) ===================== :where() = zero specificity, so like the old HTML attributes any real CSS rule still wins. */ :where(.hr-left) { margin-left:0;margin-right:auto; } :where(.ff-1) { font-family:Verdana, Arial, Helvetica, Sans-Serif; } :where(.fs-4) { font-size:large; } :where(.fs-1) { font-size:x-small; } :where(.alb-center) { text-align:center;text-align:-webkit-center;text-align:-moz-center; } :where(.va-bottom) { vertical-align:bottom; } :where(.fs-6) { font-size:xx-large; } :where(.img-right) { float:right; } :where(.hspace-10) { margin-left:10px;margin-right:10px; } :where(.vspace-10) { margin-top:10px;margin-bottom:10px; } :where(.img-left) { float:left; } :where(.fc-ff0000) { color:#ff0000; } :where(.ff-2) { font-family:Verdana, Arial; } :where(.va-top) { vertical-align:top; } :where(.fc-8000ff) { color:#8000ff; } :where(.fc-0080ff) { color:#0080ff; } :where(.fc-008000) { color:#008000; } :where(.fc-blue) { color:blue; } :where(.fc-black) { color:black; } :where(.fs-2) { font-size:small; } :where(.alb-left) { text-align:left;text-align:-webkit-left;text-align:-moz-left; } :where(.fs-7) { font-size:xxx-large; } :where(.fs-5) { font-size:x-large; } :where(.al-center) { text-align:center; } :where(.al-left) { text-align:left; } :where(.hspace-0) { margin-left:0px;margin-right:0px; } :where(.ff-3) { font-family:"Palatino Linotype", "Times New Roman", serif; } :where(.alb-justify) { text-align:justify; } :where(.fc-ffcc99) { color:#ffcc99; } :where(.fc-ffffcc) { color:#ffffcc; } :where(.fc-ffcc00) { color:#ffcc00; } :where(.fc-ccffff) { color:#ccffff; } :where(.fc-ffccff) { color:#ffccff; } :where(.fc-ff6600) { color:#ff6600; } /* ===================== site rules ===================== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } img { border: 0; } /* on smaller screens, scale down images that are wider than the screen (keeping the aspect ratio) */ @media (max-width: 1000px) { img { max-width: 100%; height: auto; } } .center { text-align: center; text-align: -webkit-center; text-align: -moz-center; } /* like the old
: also centres blocks */ .center :is(div, table, figure, form, iframe, object, embed, video, dl, ul.center) { margin-left: auto; margin-right: auto; } /* room for the menu bar at the top (it is positioned absolutely on wide screens) */ .page.spaced { padding-top: 64px; } /* replaces the


under the menu */ @media (max-width: 640px) { .page.spaced { padding-top: 8px; } } /* ---------- photo galleries ---------- */ .gallery-nav { display: flex; justify-content: center; gap: 6px; margin: 8px 0; } .gallery-nav a, .gallery-nav span { display: inline-block; min-width: 30px; } .gallery-nav img { vertical-align: middle; } .photo { margin: 8px auto 16px; max-width: 100%; display: table; } /* table: caption as wide as the photo */ .photo-head { margin: 0 0 6px; } .photo img { display: block; margin: 0 auto; } .photo figcaption { display: table-caption; caption-side: bottom; margin-top: 6px; } .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gap); max-width: 960px; margin: 12px auto; padding: 0; } .thumbs figure { margin: 0; text-align: center; } .thumbs figure img { display: block; margin: 0 auto 4px; } .thumbs figcaption { font-family: var(--caption-font); font-size: 10pt; } @media (max-width: 420px) { .thumbs { grid-template-columns: repeat(2, 1fr); } } /* wide tables and maps never push the page sideways on small screens */ .table-wrap { max-width: 100%; overflow-x: auto; } #map_canvas, [id^="map_canvas"] { max-width: 100%; } /* ---------- small screens: nothing may be wider than the screen ---------- */ @media (max-width: 700px) { iframe, embed, object, video, canvas, .leaflet-container { max-width: 100% !important; } table { max-width: 100% !important; height: auto !important; } table[width], td[width], th[width] { width: auto !important; } td, th { word-wrap: break-word; overflow-wrap: anywhere; } img.plaatje, img.plaatjev, img.pano { float: none; display: block; margin: 6px auto; max-width: 100%; height: auto; } div[style*="width"] { max-width: 100% !important; } h1 { font-size: 22pt; } } /* ---------- phones: new layout ---------- */ @media (max-width: 640px) { body { margin: 6px; } /* layout tables become one column */ .page table, .page tbody, .page tr, .page td, .page th { display: block; width: auto !important; } .page td, .page th { padding: 2px 0; text-align: left; } .center td, .center th { text-align: center; } /* language flag: in the flow instead of floating over the menu */ .vlag { position: static; display: inline-block; margin: 4px 0; } h1 { font-size: 20pt; } h2 { font-size: 15pt; } ul, ol { padding-left: 1.2em; margin-left: 0; } } /* ===================== gallery page styles (were repeated