/* =====================================
   VAN LANDSCHOOT – BRUGGE THEME
   gebaseerd op GOES layout
===================================== */


/* =========================
   1) PERKAMENT ACHTERGROND
========================= */

html, body{
  background:
    linear-gradient(rgba(250,245,230,0.76), rgba(250,245,230,0.76)),
    url("perkament.jpg") repeat !important;

  color:#5e421f;
  font-family: Georgia, "Times New Roman", serif;
}

/* wrappers transparant */
#container, #wrapper, #contentw, #sidebarw, #headerw, #footerw, #extraw{
  background: transparent !important;
}


/* =========================
   2) HEADER + BANNER
========================= */

#headerw{
  background: transparent !important;
  padding-top:10px !important;
  margin-bottom:12px !important;
}

#header{
  background: url("banner.jpg") center/contain no-repeat !important;
  background-size:contain !important;

  min-height:150px !important;

  padding:10px 14px 44px 14px !important;

  border:2px solid #b8a57d !important;
  border-radius:12px !important;

  box-shadow:0 3px 10px rgba(0,0,0,0.10) !important;

  position:relative !important;
  z-index:5 !important;
}


/* H1 wordt door SS soms raar gebruikt */
#header h1{
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
  font-size:0 !important;
}


/* =========================
   3) SUBTITEL ONDER BANNER
========================= */

#header #subtitle{

  position:absolute !important;

  left:14px !important;
  bottom:10px !important;

  margin:0 !important;

  padding:6px 12px !important;

  background:rgba(247,241,230,0.90) !important;

  border:1px solid #cdbfa8 !important;
  border-radius:10px !important;

  color:#5e421f !important;

  font-weight:800 !important;
  font-size:18px !important;

  text-align:left !important;
}
/* titeltekst injecteren zonder HTML te wijzigen */
#header #subtitle::before{
  content:"De Van Landschoot's in DELFT sedert 1600";
}

/* =========================
   4) CONTENT BLOK
========================= */

#content, #main, #maincolumn, #rightcolumn{

  background:#f7f1e6 !important;

  border:3px solid #b8a57d !important;

  border-radius:10px !important;

  padding:26px !important;

  box-shadow:0 3px 8px rgba(0,0,0,0.15) !important;

}


/* =========================
   5) LINKER MENU
========================= */

#sidebar{

  background:#f7f1e6 !important;

  border:2px solid #b8a57d !important;

  border-radius:10px !important;

  padding:10px !important;

}

ul.menuside > li{

  background:#efe4cf !important;

  border-left:6px solid #b8a57d !important;

  margin-bottom:2px;

}

ul.menuside > li > a{

  color:#5e421f !important;

  font-weight:bold !important;

  padding:6px 8px !important;

}

ul.menuside > li:hover{

  background:#e6d6b6 !important;

}


/* submenu */

ul.submenu li{

  background:#efe4cf !important;

}

ul.submenu li:hover{

  background:#e6d6b6 !important;

}


/* =========================
   6) LINKS
========================= */

a, a:link, a:visited{

  color:#7a5c2e !important;

  text-decoration:none !important;

}

a:hover{

  color:#5e421f !important;

  text-decoration:underline !important;

}


/* =========================
   7) DROP CAP
========================= */

.dropcap:first-letter{

  float:left;

  font-size:3.2em;

  line-height:0.9;

  padding-right:8px;

  font-family:Georgia, serif;

  color:#7a5c2e;

}


/* =========================
   8) FOOTER
========================= */

#footer{

  background:rgba(247,241,230,0.9) !important;

  border-top:1px solid #cdbfa8 !important;

  color:#6b4f2a !important;

  padding:10px;

  border-radius:10px;

}
/* SUBMENU boven content tonen */
ul.submenu{
  background:#efe4cf !important;
  border:1px solid #cdbfa8 !important;
  border-radius:6px !important;
  z-index:9999 !important;
}

/* submenu items */
ul.submenu li{
  background:#efe4cf !important;
  border-bottom:1px solid #cdbfa8 !important;
}

/* hover */
ul.submenu li:hover{
  background:#e6d6b6 !important;
}
/* =========================
   GENEALOGISCHE CHARTKLEUREN
========================= */

.cbp{
  border: 1px solid #5a8f38 !important;
  border-radius: 4px !important;
  color: #000 !important;
}

/* Proband */
.csb{
  background: #f0a000 !important;
}

/* Dochter */
.cfb{
  background: #efe9c9 !important;
}

/* Zoon */
.cmb{
  background: #63e000 !important;
}

/* Onbekend */
.cub{
  background: #d98cff !important;
}

/* Dubbel */
.cdb{
  background: #e0b100 !important;
}

/* lijnen */
.cct{
  background: #5a8f38 !important;
}

.cclb{
  background: transparent !important;
  border-left: 1px solid #5a8f38 !important;
  border-bottom: 1px solid #5a8f38 !important;
}
body#chartpages #container{
  width: 1700px !important;
  max-width: none !important;
}

body#chartpages #content{
  overflow: auto !important;
}
/* =========================
   CHART PAGINA'S APART
========================= */

/* contentblok voor charts breder en rustiger */
body#chartpages #content{
  background: #ececec !important;
  border: 2px solid #b8a57d !important;
  border-radius: 10px !important;
  padding: 14px !important;
  overflow: auto !important;
}

/* chart zelf niet in smalle tekstkolom duwen */
body#chartpages #contentw{
  float: right !important;
  width: calc(100% - 220px) !important;
}

/* sidebar iets smaller en stabiel */
body#chartpages #sidebarw{
  float: left !important;
  width: 200px !important;
}

/* container veel breder maken voor chart-pagina's */
body#chartpages #container{
  width: 1700px !important;
  max-width: none !important;
}

/* footer ook mee laten lopen */
body#chartpages #footerw{
  float: right !important;
  width: calc(100% - 220px) !important;
}

/* extra blok links behouden */
body#chartpages #extraw{
  float: left !important;
  clear: left !important;
  width: 200px !important;
}

/* =========================
   BREDE LAYOUT VOOR CHART EN SOURCE
========================= */

body#chartpages #container,
body#sourcepages #container{
  width: 1700px !important;
  max-width: none !important;
}

body#chartpages #content,
body#sourcepages #content{
  background: #f7f1e6 !important;
  border: 2px solid #b8a57d !important;
  border-radius: 10px !important;
  padding: 14px !important;
  overflow: auto !important;
}

body#chartpages #contentw,
body#sourcepages #contentw{
  float: right !important;
  width: calc(100% - 220px) !important;
}

body#chartpages #sidebarw,
body#sourcepages #sidebarw{
  float: left !important;
  width: 200px !important;
}

body#chartpages #extraw,
body#sourcepages #extraw{
  float: left !important;
  clear: left !important;
  width: 200px !important;
}

body#chartpages #footerw,
body#sourcepages #footerw{
  float: right !important;
  width: calc(100% - 220px) !important;
}

/* Cookie balk altijd boven alles */
#cookiebar,
.cookiebar,
#cookieconsent,
#cookie-law-info-bar{
  position: fixed !important;
  z-index: 99999 !important;
}

/* COOKIE BAR BOVEN ALLES */
#cookiebar,
#cookieconsent{
  position: fixed !important;
  bottom: 0 !important;
  left: 0;
  width: 100%;
  z-index: 99999 !important;
}
/* Mooie beginletter */
.dropcap:first-letter{
  float:left;
  font-size:3.2em;
  line-height:0.9;
  padding-right:8px;
  font-family:Georgia, serif;
  color:#7a5c2e;
}

/* Subtiele Delftsblauwe kader */
.delfts-blauw{
  border:2px solid #2f5fa3;
  padding:6px;
  border-radius:6px;
}