/* ---------- Algemeen: Elementselectoren (xhtml-elementen) ---------- */

body {
   margin: 0;
   color: #000;
   background-color: #669;
   font: normal normal normal 14px/22px Georgia, serif;
   text-align: left;
   cursor: default;
}
h1, h2, h3 {
   margin: 0;
   color: #636;
   background-color: transparent;
   font: normal normal bold 20px/22px Arial, sans-serif;
}
h1 {
   position: absolute;
   top: -70px;
   left: 0;
   width: 331px;
   height: 95px;
   background: transparent url('../beelden/reportret.svg') 0 0 no-repeat scroll;
   background-size: 331px 95px;
}
h3 {
   font-size: 16px;
   line-height: 18px;
}
p, address, table {
   margin: 12px 0 0;
}
p, td {
   max-height: 999999px; /* zwaait naar font boosting door Chrome op Android */
}
ul, ol {
   margin-top: 12px;
   margin-right: 0;
   margin-bottom: 0;
}
img {
   color: #000;
   background-color: #999;
}
img, li, form, input {
   margin: 0;
}
address {
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
}
table {
   width: 100%;
   color: #000;
   background-color: #99c;
   border-collapse: separate;
   border-spacing: 2px;
   border: 1px solid #bbe;
}
td {
   padding: 4px;
   line-height: 16px;
   vertical-align: bottom;
}
th {
   padding: 4px 8px 4px 0;
   color: #636;
   background-color: transparent;
   font-family: Arial, sans-serif;
   line-height: 14px;
   text-align: left;
   vertical-align: bottom;
   border-bottom: 1px solid;
}
strong {
   font-style: normal;
   font-variant: normal;
   font-weight: bold;
}
acronym {
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   font-size: 80%;
   line-height: 0;
   text-transform: uppercase;
   text-decoration: none;
   border-bottom-width: 0;
   cursor: help;
}
abbr {
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   text-decoration: none;
   border-bottom-width: 0;
   cursor: help;
}
em, cite {
   font-style: italic;
   font-variant: normal;
   font-weight: normal;
}
hr {
   display: none;
}


/* ---------- Algemeen: Klasseselectoren (class) ---------- */

p.intro {
   position: relative;
   z-index: 1;
   margin-top: 0;
   font-style: italic;
}
p.noot, p.bijschrift, p.extra, p.voor {
   font: 12px/16px Arial, sans-serif;
}
p.extra, p.voor {
   padding: 6px;
   border: 2px solid #f5b991;
}
p.voor {
   width: 303px;
   float: left; /* ... omdat IE6 deze anders niet naast p#kleinportret durft te zetten */
   margin-bottom: 12px; /* ... omdat van elementen na een float de marge boven normaal verdwijnt */
}
p.kaartknop {
   position: absolute;
   bottom: 0;
   width: 150px;
   line-height: 14px;
   color: #000;
   background-color: #bbe;
}
li.hier {
   font-weight: bold;
}
img.mini, img.ico {
   margin-right: 6px;
   vertical-align: -1px;
   border: 2px solid #669;
}
img.ico {
   vertical-align: -4px;
   border-width: 1px;
}
img.nep {
   vertical-align: -3px;
}
div.foutblok {
   width: 205px;
   float: left;
   padding-bottom: 38px;
}
span.c {
   font-size: 16px;
   line-height: 0;
}
span.vreemd {
   font-style: italic;
}
span.webadres {
   color: #669;
   background-color: transparent;
}
.weg, .print {
   display: none;
}


/* ---------- Algemeen: Unieke selectoren (id) ---------- */

p#hoed, p#fles {
   position: absolute;
   right: 0;
   margin-top: 0;
   font: 12px/12px Arial, sans-serif;
   text-align: right;
   color: #bbe;
}
p#hoed {
   top: -24px;
   letter-spacing: 3px;
   word-spacing: 3px;
}
p#fles {
   top: -70px;
}
p#taalinfo {
   margin-top: 12px;
   padding-top: 8px;
   border-top: 1px solid #636;
   text-align: right;
}
p#instap {
   margin-bottom: 12px;
}
p#recht {
   padding: 8px;
   color: #333;
   background-color: #ccc;
   line-height: 18px;
}
p#mijlpalen {
   position: absolute;
   bottom: 12px;
   left: 12px;
   width: 150px;
   color: #636;
   font: 12px/16px Arial, sans-serif;
   text-align: right;
}
p#voet {
   position: relative;
   margin-right: auto;
   margin-left: auto;
   padding-bottom: 20px; /* ... in plaats van een marge onder, omdat IE<8 deze anders niet weergeeft */
   width: 846px;
   font: 11px/14px Arial, sans-serif;
   color: #bbe;
   border-right: 6px solid #669;
   border-left: 6px solid #669;
}
p#zoekmachine {
   position: absolute;
   top: 0;
   right: 12px;
   max-height: 20px;
   margin-top: 0;
}
p#kleinportret, p#grootportret, p#groepsportret {
   margin-top: 0;
}
p#kleinportret {
   position: absolute;
   top: 0;
   right: 12px;
}
div#lijf {
   position: relative;
   width: 846px;
   margin: 80px auto 0;
   padding: 12px 0;
   background-color: #99c;
   border-right: 6px solid #669;
   border-left: 6px solid #669;
}
div#navigatie {
   position: absolute;
   top: 32px;
   left: 12px;
   width: 150px;
}
div#brood {
   position: relative;
   z-index: 1;
   min-height: 453px;
   margin-left: 174px;
   padding: 0 12px;
   border-left: 1px solid #636;
}
div#drijver {
   float: right;
   width: 199px;
   height: 447px;
   margin: 0 0 8px 12px;
   background-color: #fff;
}
div#kaartblok {
   width: 526px;
   margin-top: 12px;
   padding: 12px 12px 20px 12px;
   background: #fff url('../beelden/hoek.svg') 100% 0 no-repeat scroll;
}
div#bronnenblok {
   margin-top: 12px;
   padding: 8px;
   color: #dbb;
   background-color: #903;
   font: 12px/16px Arial, sans-serif;
}
div#foutgroep {
   position: relative;
}
div#fouteinde {
   clear: left;
}


/* ---------- Algemeen: Pseudoklasseselectoren (links) ---------- */

a {
   outline: none;
}
a:link, a:visited {
   cursor: pointer;
}
a.wijs:link, a.wijs:visited {
   color: #449;
   background-color: transparent;
   font-style: normal;
   font-variant: normal;
   font-weight: bold;
   text-decoration: none;
}
a.wijs:hover, a.wijs:focus {
   color: #fff;
   background-color: transparent;
}
a.wijs:active {
   color: #000;
   background-color: transparent;
}


/* ---------- Algemeen: Contextselectoren (combinaties en deels ongedaan maken vorige definities) ---------- */

h1 img {
   display: none;
}
strong acronym, strong abbr, strong cite, a.wijs:link acronym, a.wijs:link abbr, a.wijs:link em, a.wijs:link cite, a.wijs:visited acronym, a.wijs:visited abbr, a.wijs:visited em, a.wijs:visited cite {
   font-weight: bold;
}
em acronym, em abbr, em a.wijs:link, em a.wijs:visited, cite strong, cite acronym, cite abbr, cite a.wijs:link, cite a.wijs:visited, p.intro strong, p.intro acronym, p.intro abbr, p.intro a.wijs:link, p.intro a.wijs:visited, span.vreemd strong, span.vreemd acronym, span.vreemd abbr, span.vreemd a.wijs:link, span.vreemd a.wijs:visited {
   font-style: italic;
}
p.voor + p {
   clear: left;
   margin-top: 0; /* ... omdat IE7 deze niet laat samenvallen met de marge onder van p.voor */
}
p.noot img {
   float: right;
   margin: 2px 0 6px 8px;
   border: 2px solid #669;
}
p.noot img, p#instap img, p#kleinportret img, p#grootportret img, p#groepsportret img {
   vertical-align: middle;
}
p + p#recht {
   margin-top: 6px;
}
p#recht + p {
   margin-top: 6px;
}
p#fles a.wijs:link, p#fles a.wijs:visited, p#voet a.wijs:link, p#voet a.wijs:visited {
   color: #bbe;
   font-weight: normal;
   border-bottom: 1px dotted #bbe;
}
p#fles a.wijs:hover, p#fles a.wijs:focus, p#voet a.wijs:hover, p#voet a.wijs:focus {
   color: #fff;
   border-bottom-color: #fff;
}
p#fles a.wijs:active, p#voet a.wijs:active {
   color: #000;
   border-bottom-color: #000;
}
p#voet span.c {
   position: absolute;
   top: 5px;
   right: 0;
   font-family: Georgia, serif;
   text-align: right;
}
p#voet span.c a.wijs:link, p#voet span.c a.wijs:visited {
   border-bottom-width: 0;
}
p#taalinfo a.wijs:link, p#taalinfo a.wijs:visited {
   font-style: italic;
   font-weight: normal;
}
p#recht a.wijs:link, p#recht a.wijs:visited {
   color: #333;
   font-weight: normal;
}
p#voet a.wijs:link acronym, p#voet a.wijs:visited acronym {
   font-weight: normal;
}
p#kleinportret img, p#grootportret img { /* ... hoeft niet herhaald te worden na de definitie dat gelinkte afbeeldingen in principe geen rand mogen krijgen: deze selector is namelijk meer specifiek (een id-attribuut heeft meer waarde dan een class-attribuut) */
   border: 8px solid #000;
}
p#grootportret img {
   border-width: 16px;
}
p#groepsportret img {
   border: 2px solid #669;
}
div#navigatie ul, div#kaartblok ol ul, div#bronnenblok ul ul {
   margin-top: 0;
}
div#navigatie ul, div#bronnenblok ul {
   margin-left: 0;
   padding-left: 0;
   list-style: none;
}
div#navigatie ul {
   line-height: 14px;
}
div#navigatie ul ul {
   margin-top: 6px;
   padding-top: 6px;
   text-align: right;
   border-top: 1px solid #636;
}
div#navigatie ul + ul {
   margin-top: 8px;
   padding-top: 8px;
   border-top: 1px solid #636;
}
div#navigatie li {
   color: #000;
   background-color: #bbe;
}
div#navigatie li + li {
   margin-top: 4px;
}
div#navigatie li li + li {
   margin-top: 8px;
}
div#navigatie li.hier, div#navigatie li a.wijs, p.kaartknop a.wijs {
   padding: 6px 8px;
   display: block;
}
div#navigatie li.hier a.wijs, div#navigatie li li.hier, div#navigatie li li a.wijs {
   padding: 0;
}
div#navigatie p.extra {
   padding: 0;
   border-width: 0;
   text-align: right;
}
div#navigatie p.extra a.wijs {
   display: block;
   padding: 6px;
   border: 2px solid #f5b991;
}
div#kaartblok p {
   margin-top: 0;
}
div#kaartblok ol ul {
   list-style: disc;
}
div#bronnenblok li {
   padding-left: 16px;
   background: transparent url('../beelden/li.svg') no-repeat 1px 4px;
}
div#bronnenblok li li {
   background-image: url('../beelden/lili.svg');
}

/* N.B. De definities voor de linkkleuren binnen het bronnenblok zijn bij de pagina-specifieke definities geplaatst (en met een meer specifieke selector) omdat anders een conflict ontstaat met de linkkleuren binnen het lijf van de portretpagina (omdat het bronnenblok ook binnen het lijf valt). */

div#bronnenblok a.wijs:link, div#bronnenblok a.wijs:visited {
   font-weight: normal;
   border-bottom: 1px dotted #dbb;
}
div#bronnenblok a.wijs:link acronym, div#bronnenblok a.wijs:link abbr, div#bronnenblok a.wijs:link em, div#bronnenblok a.wijs:link cite, div#bronnenblok a.wijs:visited acronym, div#bronnenblok a.wijs:visited abbr, div#bronnenblok a.wijs:visited em, div#bronnenblok a.wijs:visited cite {
   font-weight: normal;
}
div#bronnenblok a.wijs:link strong, div#bronnenblok a.wijs:link strong acronym, div#bronnenblok a.wijs:link strong abbr, div#bronnenblok a.wijs:link strong cite, div#bronnenblok a.wijs:visited strong, div#bronnenblok a.wijs:visited strong acronym, div#bronnenblok a.wijs:visited strong abbr, div#bronnenblok a.wijs:visited strong cite {
   font-weight: bold;
}
hr + div.foutblok {
   margin-left: 16px;
}
a:link acronym, a:link abbr, a:visited acronym, a:visited abbr {
   cursor: pointer;
}
a.wijs:link img, a.wijs:visited img {
   color: #000;
   background-color: #999;
   font-weight: normal;
   border-width: 0;
}
a.wijs:link img.mini, a.wijs:visited img.mini {
   border: 2px solid #669;
}
a.wijs:link img.ico, a.wijs:visited img.ico {
   border: 1px solid #669;
}



/* ---------- Pagina-specifieke definities (afwijkingen van algemeen) ---------- */

body#basis h1 {
   background-image: url('../beelden/reportret1.svg');
}
body#basis div.tekstblok, body#basis div.linkgroep, body#portret p.noot {
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid #636;
}
body#basis hr + p.noot {
   padding-top: 12px;
   border-top: 1px solid #636;
}
body#basis div.tekstblok p, body#basis div.tekstblok h2, body#portret div.tekstblok {
   width: 530px;
}
body#basis div.tekstblok p.noot {
   width: 100%;
}
body#portret h1 {
   background-image: url('../beelden/reportret2.svg');
}
body#portret h2 {
   color: #000;
}
body#portret h3 {
   color: #dbb;
}
body#portret p#hoed {
   color: #f5b991;
}
body#portret p.noot {
   clear: both;
}
body#portret div#lijf {
   background-color: #c99;
}
body#portret div#navigatie li {
   background-color: #f5b991;
}
body#portret div#lijf a.wijs:link, body#portret div#lijf a.wijs:visited {
   color: #903;
}
body#portret div#lijf a.wijs:hover, body#portret div#lijf a.wijs:focus {
   color: #fff;
}
body#portret div#lijf a.wijs:active {
   color: #000;
}
body#portret div#lijf p#fles a.wijs:link, body#portret div#lijf p#fles a.wijs:visited {
   color: #bbe;
}
body#portret div#lijf p#fles a.wijs:hover, body#portret div#lijf p#fles a.wijs:focus {
   color: #fff;
}
body#portret div#lijf p#fles a.wijs:active {
   color: #000;
}
body#portret div#lijf div#bronnenblok a.wijs:link, body#portret div#lijf div#bronnenblok a.wijs:visited {
   color: #dbb;
}
body#portret div#lijf div#bronnenblok a.wijs:hover, body#portret div#lijf div#bronnenblok a.wijs:focus {
   color: #fff;
   border-bottom-color: #fff;
}
body#portret div#lijf div#bronnenblok a.wijs:active {
   color: #000;
   border-bottom-color: #000;
}
body#vals {
   color: #ccc;
   background-color: #000;
}
body#vals h1 {
   background-image: url('../beelden/reportret3.svg');
}
body#vals h2 {
   color: #ccc;
}
body#vals p#hoed, body#vals p#fles, body#vals p#voet {
   color: #9a9a9a;
}
body#vals div#lijf {
   background-color: #727272;
   border-color: #000;
}
body#vals div#navigatie li {
   color: #000;
   background-color: #9a9a9a;
}
body#vals p#voet {
   border-color: #000;
}
body#vals a.wijs:link, body#vals a.wijs:visited {
   color: #fff;
}
body#vals a.wijs:hover, body#vals a.wijs:focus {
   color: #ccc;
}
body#vals a.wijs:active {
   color: #000;
}
body#vals div#brood, body#vals p#taalinfo, body#vals div#navigatie ul ul {
   border-color: #000;
}
body#vals hr + p.noot {
   padding-top: 12px;
   border-top: 1px solid;
}
body#vals hr + p.noot, body#vals div#navigatie ul + ul {
   border-color: #000;
}
body#vals p#fles a.wijs:link, body#vals p#fles a.wijs:visited, body#vals p#voet a.wijs:link, body#vals p#voet a.wijs:visited {
   color: #9a9a9a;
   border-bottom-color: #9a9a9a;
}
body#vals p#fles a.wijs:hover, body#vals p#fles a.wijs:focus, body#vals p#fles a.wijs:active, body#vals p#voet a.wijs:hover, body#vals p#voet a.wijs:focus, body#vals p#voet a.wijs:active {
   color: #fff;
   border-bottom-color: #fff;
}