/*-------------------------------------------*/
/* Kleur definities                          */
/*-------------------------------------------*/

:root {
  --Golden-Yellow:  #ffce00;
  --Pumpkin-Orange: #f16532;
  --Cool-Green:     #3aba9b;
  --Dark-Green:     #005d29;
  --Hot-Pink:       #f17fb2;
  --Ocean-Blue:     #0051a4;
  --Watermelon-Red: #ee3a37;
  --Indigo:         #460359;
}

body
{
  margin          : 0px;
  margin-top      : 20px;
  font-size       : 10pt; 
  background-color: var(--Indigo);
  color           : var(--Dark-Green);
  font-family     : Verdana, Arial, Helvetica, sans-serif;
  text-align      : justify;
}

/*-------------------------------------------*/
/* Stijlen voor header                       */
/*-------------------------------------------*/
div.header
{
  margin     : auto;
  max-width  : 780px;
  overflow   : hidden;
  white-space: nowrap;
}

div.header div {
  display: inline-block;
}

div.header div img {
  height: 120px;
}

div.header div.spacer {
  height: 120px;
  width : 8px;
}

/*-------------------------------------------*/
/* Stijlen voor content                      */
/*-------------------------------------------*/
div.content {
  display         : block;
  max-width       : 764px;  /* take into account the padding */
  margin          : auto;
  padding         : 8px;
  background      : white;
}

/*-------------------------------------------*/
/* Stijlen voor footer                       */
/*-------------------------------------------*/
div.footer
{
  position        : relative;
  color           : var(--Golden-Yellow);
  background-color: var(--Pumpkin-Orange);
  margin          : auto;
  margin-bottom   : 20px;
  max-width       : 780px; 
  font-size       : 8pt;
}

div.footer div {
  padding: 8px;
  display: inline-block;
}

div.footer div.right {
  position  : absolute;
  right     : 0px;
  text-align: right;
}

@media only screen and (max-width: 680px) {
  div.footer div {
    padding: 8px;
    display: block;
  }

  div.footer div.right {
    position  : relative;
    text-align: left;
  }
}


/*-------------------------------------------*/
/* Stijlen voor navigatie bar                */
/*-------------------------------------------*/
ul.navbar {
  display         : block;
  max-width       : 780px;
  list-style-type : none;
  margin          : auto;
  padding         : 0;
  background-color: var(--Dark-Green);
  text-align      : center;
}

ul.navbar li, ul.sub_navbar li {
  display: inline-block;
}

/* Make all anchors in the navbar as blocks - the whole block is clickable*/
ul.navbar li a, ul.sub_navbar li a  {
  display        : block;
  padding        : 8px;
  font-weight    : bold;
  color          : var(--Golden-Yellow);
  text-decoration: none;
}

ul.navbar li a.active {
  color           : var(--Dark-Green);
  background-color: var(--Golden-Yellow);
}

/* If you hover over a list item, change the background color */
ul.navbar li:hover {
  background-color: var(--Watermelon-Red);
}

/* If you hover over a menu with dropdown-content, display it */
ul.navbar li.dropdown:hover div.dropdown-content, ul.sub_navbar li.dropdown:hover div.dropdown-content {
  display: block;
}


ul.navbar li.dropdown div.dropdown-content, ul.sub_navbar li.dropdown div.dropdown-content {
  display         : none;
  position        : absolute;
  min-width       : 160px;
  box-shadow      : 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index         : 1;
  background-color: var(--Golden-Yellow);
  text-align      : left;
}

ul.navbar li.dropdown div.dropdown-content a, ul.sub_navbar li.dropdown div.dropdown-content a {
  color: var(--Watermelon-Red);
}


ul.navbar li.dropdown div.dropdown-content a:hover, ul.sub_navbar li.dropdown div.dropdown-content a:hover {
  color           : var(--Golden-Yellow);
  background-color: var(--Watermelon-Red);
}

/*-------------------------------------------*/
/* Stijlen voor sub navigatie bar            */
/*-------------------------------------------*/
ul.sub_navbar {
  display         : block;
  max-width       : 780px;
  list-style-type : none;
  margin          : auto;
  padding         : 0;
  background-color: var(--Cool-Green);
  text-align      : center;
}

ul.sub_navbar li a  {
  color: var(--Dark-Green);
}

ul.sub_navbar li a.active {
  color           : var(--Cool-Green);
  background-color: var(--Dark-Green);
}

/* If you hover over a list item, change the background color */
ul.sub_navbar li:hover {
  background-color: var(--Hot-Pink);
}


/*-------------------------------------------*/
/* Stijlen voor kalender item                */
/*-------------------------------------------*/
div.cal_item {
  border          : 1px solid #0c0c0c;
  margin-top      : 15px;
  margin-bottom   : 15px;
  color           : var(--Dark-Green);
  background-color: var(--Cool-Green);
}

div.cal_item div.cal_header {
  position        : relative;
  color           : var(--Golden-Yellow);
  background-color: var(--Dark-Green);;
  font-size       : 11pt;
  font-weight     : bold;
}

div.cal_item div.cal_header:after {
  content: "";
  clear  : both;
  display: table;  
}

div.cal_item div.cal_header div {
  display: inline-block;
  padding: 5px;  
}

div.cal_item div.cal_header div.cal_date {
  min-width: 150px;
}

div.cal_item div.cal_header div.cal_ctrl {
  float: right;
}

div.cal_item div.cal_body {  
  margin  : 5px;
  overflow: auto;
}

div.cal_item div.cal_body img.cal_img {
  float       : left;
  margin-right: 5px;
}

div.cal_item div.cal_body div.cal_content {
  padding: 5px;
}



/*------------------------------------------*/
/* Stijlen voor nieuwsbrief                 */
/*------------------------------------------*/
form.nieuwsbrief input
{
  width         : 100%;
  padding       : 12px 20px;
  margin        : 8px 0;
  display       : inline-block;
  border        : 1px solid #ccc;
  box-sizing    : border-box;
  border-radius : 4px;
}

form.nieuwsbrief input[type=submit] {
  background-color: #4CAF50;
  font-weight     : bolder;
  color           : white;
  padding         : 14px 20px;
  margin          : 8px 0;
  border          : none;
  border-radius   : 4px;
  cursor          : pointer;
}

form.nieuwsbrief input[type=submit]:hover {
  background-color: #45a049;
}


/* OLD STYLES */
/* -----------------  Styles voor kop --------------- */


TD.menu_item
{	
	border-right: 1px solid #0c0c0c;
	padding-top: 5px;
	padding-bottom: 5px;
}


TD.zij_kolom
{
	border-right: #0c0c0c 3px dotted;
        background-color: white;	
	padding: 10px;
}

TD.content
{	
	padding: 10px;
	padding-top: 50px;
}


DIV.menu
{
	border-right: #0c0c0c 1px solid;
	border-left: #0c0c0c 1px solid;
        background-color: white;
	border-bottom: #0c0c0c 1px solid;
	width: 780px;
	margin: 0px auto;
}


DIV.side_menu
{
        background-color: #f4c8c0;
	margin: 0px auto;
}

DIV.side_menu UL
{
	margin: 0px 5px 5px 5px;
	padding: 0px;
}

LI.menu_item
{
	font-size: 8pt;
	background-image: url("img/box-0.gif");
	background-repeat: no-repeat;
	list-style-type: none;
	margin: 1px 0 1px 1px;
	padding: 1px 0 1px 11px;
	background-position: center left;
}

LI.menu_item_current
{
	font-size: 8pt;
	font-weight: bold;
	background-image: url("img/box-1.gif");
	background-repeat: no-repeat;
	list-style-type: none;
	margin: 1px 0 1px 1px;
	padding: 1px 0 1px 11px;
	background-position: center left;
}


LI.seperate
{
	font-size: 8pt;
	font-weight: bold;
	list-style-type: none;
	margin: 10px 1px 1px 1px;
	padding: 1px 0 1px 0px;
}


LI.menu_item_current A, LI.menu_item_current A:link, LI.menu_item_current A:visited 
{
	color: blue;
	text-decoration: none;
}


LI.menu_item_current A:hover
{
	color: blue;
	text-decoration: underline;
}

LI.menu_item A, LI.menu_item A:link, LI.menu_item A:visited 
{
	color: blue;
	text-decoration: none;
}


LI.menu_item A:hover
{
	color: blue;
	text-decoration: underline;
}


LI.link
{
	background-image: url("img/mouse.gif");
	background-repeat: no-repeat;
	list-style-type: none;
	margin: 1px 0 1px 1px;
	padding: 5px 0 1px 30px;
	background-position: center left;
}


TABLE.pagina
{
	border-right: #0c0c0c 1px solid;
	background: white; 
	margin: 0px auto;
	border-left: #0c0c0c 1px solid; 
}


DIV.einde
{
        background-color: #74c2e7;
	border-top: #0c0c0c 1px solid; 
	border-right: #0c0c0c 1px solid;
	padding: 10px;
	border-left: #0c0c0c 1px solid; 
	margin: 0px auto;
	width: 760px; 
	border-bottom: #0c0c0c 1px solid;
        font-size: 8pt;
}

/*--------------------------*/
/* Stijlen voor de kalender */
/*--------------------------*/
TABLE.kal
{
	border: 1px solid #0c0c0c;
	background-color: #e6e0ea;
	margin-top: 15px;
	margin-bottom: 15px;
}


TR.kal_header TD
{
        background-color: #480346;
	color: #d6c400;
        font-size: 11pt;
	font-weight: bold;
}


TD.kal_datum, TD.kal_titel
{
	padding-left: 5px;
	padding-right: 5px;
}

TD.kal_pict
{
}

TD.kal_text
{
	padding: 10px;
}

TD.kal_ctrl
{
	background-color: #d4cfd8;
	border-left: 1px solid #0c0c0c;
}

/*--------------------------------------*/
/* Stijlen voor de kalender uit archief */
/*--------------------------------------*/
TABLE.arch
{
	border: 1px solid #0c0c0c;
	background-color: #e6e0ea;
	margin-top: 15px;
	margin-bottom: 15px;
}

TABLE.arch TR
{
	height: 20px;
}

TD.arch_datum, TD.arch_titel
{
	padding-left: 5px;
	padding-right: 5px;
}

TD.arch_ctrl
{
}


/*------------------------------*/
/* Stijlen voor de nieuwspagina */
/*------------------------------*/
TABLE.news
{
	border: 1px solid #0c0c0c;
	background-color: #e6e0ea;
	margin-top: 15px;
	margin-bottom: 15px;
}


TR.news_header TD
{
        background-color: #480346;
	color: #d6c400;
        font-size: 11pt;
	font-weight: bold;
}


TD.news_pict, TD.news_datum, TD.news_titel
{
	padding-left: 5px;
	padding-right: 5px;
}

TD.news_text
{
	padding: 5px;
}


/*-----------------------*/
/* Stijlen voor de polls  */
/*-----------------------*/
TABLE.poll
{
	border: 1px solid #0c0c0c;
	background-color: #e6e0ea;
	margin-top: 15px;
	margin-bottom: 15px;
}


TD.poll_titel
{
        background-color: #480346;
	color: #d6c400;
        font-size: 11pt;
	font-weight: bold;
}


TD.poll_text
{
	padding-left: 5px;
	padding-right: 5px;
}


/*--------------------------------*/
/* Stijlen voor de bestuurspagina */
/*--------------------------------*/
TABLE.lid
{
	margin-left: 47px;
	margin-top: 15px;
	margin-bottom: 15px;
	border: 1px solid #0c0c0c;
	background-color: #e6e0ea;
}


TD.lid_naam
{
  background-color: var(--Dark-Green);
  color           : var(--Golden-Yellow);
  font-size       : 11pt;
  padding-top     : 5px;
  padding-bottom  : 5px;
	padding-left    : 10px;
	padding-right   : 10px;	
	font-weight     : bold;
}

TD.lid_fie
{
  background-color: var(--Cool-Green);
  color           : var(--Dark-Green);
  padding: 10px;
  text-align: center;
  font-style: italic;
}

TD.lid_adres
{
  background-color: var(--Cool-Green);
  color           : var(--Dark-Green);
  padding-right   : 10px;
  padding-bottom  : 10px;
  text-align      : right;
  font-size       : 8pt;
  height          : 82px;
}

TABLE.wijkmeester
{
	border: 1px solid #0c0c0c;
	background-color: #e6e0ea;
}

TD.wijkmeester_adres
{
	padding: 10px;
	text-align: right;
	font-size: 8pt;
}


/*--------------------------*/
/* Stijlen voor de citaat   */
/*--------------------------*/
TABLE.cit
{
	border: 1px solid #0c0c0c;
	background-color: #e6e0ea;
	margin-top: 15px;
	margin-bottom: 15px;
}


TR.cit_header TD
{
        background-color: #480346;
	color: #d6c400;
        font-size: 11pt;
	font-weight: bold;
}

TD.cit
{
	padding: 5px;
}


DIV.woordje
{
	border: 1px solid #0c0c0c;
	background-color: #e6e0ea;
	padding: 10px;
	margin-top: 15px;
	margin-bottom: 30px;
}



DIV.links
{
	float: left;
}


DIV.rechts
{
	float: right;
}

DIV.rechts_aligned
{
	text-align: right;
}

IMG.links
{
	float: left;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
}

IMG.rechts
{
	float: right;
	margin-right: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}


//DIV.kop
//{
//        padding:             0px;
//}

DIV.kop_naam
{
        z-index:       10;
        position:      absolute;
        left:          232px;
        top:           30px;
        font-family:   serif;
        font-size:     45px;
        color:         #420039  /* blauw-zwart */
}

DIV.kop_naam_achter
{
        z-index:       5;
        position:      absolute;
        left:          230px;
        top:           32px;
        font-family:   serif;
        font-size:     46px;
        color:         #D6CE00  /* geel */        
}


/* -----------------  Styles voor contact lijst --------------- */


SPAN.cont_naam
{
        font-weight:       bold;
        color:             blue;
}

SPAN.cont_titel
{
        font-style:        italic;
        color:             blue;
}


TABLE.contact
{
        margin-bottom:        10px;
        padding-top:          10px;
        border:               3px outset red;
        background-color:     rgb(208, 206, 176);  /* beige */
}

TD.cont_adres
{
        text-align:        right;
        vertical-align:    text-bottom;
        font-family:       sans-serif;
        font-size:         smaller;
        padding:           10px;
        width:             160px;
}

TD.cont_foto
{
        text-align:    center;
        /* margin:        5px; */
        height:        120px;
        width:         90px;
        border:        1px solid black;
}

TD.cont_naam_fie
{
        text-align:       center;
        vertical-align:   text-top;
        padding:          10px;
        width:            150px;
}

DIV.cont_foto
{
        text-align:    center;
        margin:        5px;
        height:        120px;
        width:         90px;
        border:        1px solid black;
}

DIV.cont_no_foto
{
	padding-top: 40px;
        text-align:    center;
        margin:        5px;
        height:        80px;
        width:         90px;
        border:        1px solid black;
}


/* --------- Algemene stijlen --------------- */

//BODY.inhoud
//{        
//        padding-left:   20px;
//        padding-right:  20px;
//        padding-top:    20px;
//     /* padding-bottom: 20px; */
//}
//
//BODY
//{
//        text-align:             justify;
//        /* background-color:       #BFBC75  */ /* zandkleur */
//        /* background-color:       #A2C074  */ /*  lichtgroen */ 
//        background-color:       #BBD19A    /* lichter groen */ 
//        
//}


H1
{
	color        : var(--Hot-Pink);
	border-bottom: 2px solid var(--Hot-Pink);
	font-size    : 17pt;
}

H2
{
	color      : var(--Cool-Green);
	font-size  : 15pt;
	font-weight: bold;
}


TD.menu_item A.inactive, TD.menu_item A.inactive:link, TD.menu_item A.inactive:visited
{
	background-color: white;
	font-weight: bold;
	font-size: 10pt;
	text-decoration: none;
	color: #030303;
	padding: 5px;
}

TD.menu_item A.inactive:hover  
{
	text-decoration: underline;
}

TD.menu_item A.active
{
	background-color: #f4c8c0;
	font-weight: bold;
	font-size: 10pt;
	padding: 5px;
	text-decoration: none;
}

TD.menu_item A.active:link
{
	color: blue;	
}

TD.menu_item A.active:visited
{
	color: blue;
}

TD.menu_item A.active:hover
{
	color: #ff0000;
	background-color: white;
	text-decoration: underline;
}


A:link
{
        color:          var(--Dark-Green);
}

A:visited
{
        color:          var(--Dark-Green);
}

A:hover
{
        color:          var(--Ocean-Blue);
}

UL.links
{
        list-style-image:  url("mouse.bmp");
}

/* -----------------  Styles voor navigatie --------------- */
A.nav
{
        font-weight:           bold;
        color:                 #420039;         /* Blauw zwart */
        text-decoration:       none;
}

A.nav:visited 
{
	 color: #420039;         /* Blauw zwart */ 
}

A.nav:hover
{
        text-decoration:      underline;
        color: #9650b6;
}

DIV.nav
{
        text-align:            right;        
        font-family:           sans-serif;
        font-size:             10pt;
}

TD.id_label
{
        text-align:     right;
	padding-right: 10px;
}

TD.id_input
{
        text-align:     left;
}

TD.bedrag
{
        text-align:     right;
}

DIV.contact_form
{
        text-align:     center;
}

SPAN.privacy
{
        font-style:     italic;
}

/* ------- Styles voor foto album -------- */
DIV.foto_album
{
	text-align: center;
}

A.fotos_nav
{
	text-decoration: none;
	color: black;
	font-weight: bold;
}

A.fotos_nav:link { color: black; }
A.fotos_nav:active {}
A.fotos_nav:visited { color: black; }
A.fotos_nav:hover { color: blue; }

A.fotos_nav_in
{
	text-decoration: none;
	color: gray;
	font-weight: bold;
}

SPAN.fotos_nav {
	padding-left: 10px;
	padding-right: 10px;
	border: 2pt inset gray;
	background-color: silver;
}

/* ----------- Navigatie voor sub topics -------------- */


/* ----------- Styles voor kalender, nieuws ------------------ */
TD.act_datum
{
        text-align:       right;
        padding-right:    10px;
        padding-top:      5px;
        width:            120px;
        color:            white;
        background: url("gradbckgnd_1x25.gif") repeat-x;
        font-weight:      bold;
        font-family:      sans-serif;
}

TD.act_naam, TD.nav_title
{
        text-align:     left;
        padding-left:   5px;
        padding-top:    5px;
        font-weight:    bold;
        font-family:    sans-serif;
        color:            white;
        background: url("gradbckgnd_1x25.gif") repeat-x; 
}

TD.act_kort, TD.news_kort
{
        text-align:     justify;
        padding:   5px;
        border-bottom: 1pt solid black;
}

TD.nav_lnk
{
        padding-right:  2px;
        padding-left:   2px;
        border-bottom: 1pt solid black;
	background: url("gradbckgnd_75x1.gif") repeat-y;
}

TD.act_opties
{
        background-color: #A2C074; /* groen */
	border-left: 1pt solid black;
        border-bottom: 1pt solid black;
        padding-left: 5px;
        padding-right: 0px;
}

TD.act_ls, TD.news_ls, TD.nav_ls
{
    	border-left: 1pt solid black;
        border-bottom: 1pt solid black;
}

TD.act_rs, TD.news_rs, TD.nav_rs
{
    	border-right: 1pt solid black;
        border-bottom: 1pt solid black;
}

TD.act_rs_grn
{
	background-color: #A2C074; /* groen */
    	border-right: 1pt solid black;
        border-bottom: 1pt solid black;
}

TD.nav_rs
{
    	background-color: #00ffff;  /* Licht blauw */
	border-right: 1pt solid black;
        border-bottom: 1pt solid black;
}

TD.act_foto, TD.news_foto
{
    	padding-top: 5px;
        padding-bottom: 5px;
        padding-right: 5px;
        border-bottom: 1pt solid black;
}

TD.act_ruler, TD.news_ruler
{
   	padding: 0px;
}

TABLE.act, TABLE.act *, TABLE.news, TABLE.news *, TABLE.nav, TABLE.nav *
{
     padding: 0;
     /* Zorgt er voor dat alle cellen aan elkaar sluiten */
     border-spacing: 0; 
     border-collapse: collapse;
}



/*--------------------------*/
/* Stijlen voor koken       */
/*--------------------------*/
DIV.kader
{ 
	text-align: center;
	border: 5pt ridge #24abdd;
	font-weight: bold;
	padding: 20pt; 
	background-color: #f2c681;
}

DIV.center_kader
{ 
	text-align: center;
}

TABLE.koken_menu
{
	text-align: center;
	margin-left  :auto;
	margin-right :auto;
}

H3.koken { 
	color: #276684;
	font-weight: bolder;
	font-family: arial;
	border-bottom: 2pt ridge;
	margin-top: 50px;
	text-align: right;
}

H4.koken
{
	margin-top: 20px;
	margin-bottom: 0px;
}

H5.koken
{
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 0px;
	text-decoration: underline; 
	font-size: 12pt;
	color: #1f8126;
}

P.rechts
{
	text-align: right;
}

A.terug
{
	color: blue;
	font-size: smaller;
	font-style: italic;
}

A.gerecht
{
	text-align: center;
	font-weight: bold;
	font-family: sans-serif;
	color: black;
	text-decoration: none;
}

A.gerecht:visited
{
	color: black;
}

A.gerecht:hover
{
	color: blue;
	text-decoration: underline;
}

SPAN.ruler
{
	color: #a08804;
}


/*--------------------------*/
/* Stijlen voor kaarten     */
/*--------------------------*/

TABLE.Uitslag, TABLE.Uitslag * 
{
	padding-left: 5px;
	padding-right: 5px;
	border: solid 1pt black;
	border-spacing: 0; 
	border-collapse: collapse;
	text-align: right;
}

TABLE.Uitslag * TD.K1
{
	text-align: left;
	color: black;
}

TABLE.Uitslag * TD.K3, TABLE.Uitslag * TD.K5, TABLE.Uitslag * TD.K7, TABLE.Uitslag * TD.K9,
TABLE.Uitslag * TD.K11, TABLE.Uitslag * TD.K13 
{
	color: red;
	font-size: smaller;
} 

TABLE.Uitslag * TD.K2, TABLE.Uitslag * TD.K4, TABLE.Uitslag * TD.K6, TABLE.Uitslag * TD.K8,
TABLE.Uitslag * TD.K10, TABLE.Uitslag * TD.K12
{
	color: green;
	font-weight: bold;
} 
 
TABLE.Uitslag * TD.K_Tot_1, TABLE.Uitslag * TD.K14
{
	background-color: green;
	font-weight: bold;
	color: white;
}

TABLE.Uitslag * TD.K_Tot_2, TABLE.Uitslag * TD.K15
{
	background-color: red;
	font-size: smaller;
	font-weight: bold;
	color: white;
}
 
TABLE.Uitslag * TD.K_Games
{
	background-color: #00ffff;
	font-weight: normal;
	color: black;
}

TABLE.Uitslag * TD.K0
{
	background-color: #da954a;
	font-weight: bold;
	color: black;
}

TABLE.Uitslag * TR.R0 *
{
	background-color: #da954a;
	font-weight: bold;
	color: black;
	text-align: left;
}
 
DIV.center
{
	text-align: center;
}

SPAN.winnaar
{
	font-weight: bolder;
	color: maroon;
	font-style: italic;
}


/*-------------------------------------------*/
/* Stijlen voor nieuwsbrief admin pagina     */
/*-------------------------------------------*/

TABLE.persoon, TABLE.persoon * TD
{
	padding-left: 5px;
	padding-right: 5px;
	border: solid 1pt black;
	border-spacing: 0; 
	border-collapse: collapse;
}

TR.persoon_header TD
{
	font-weight: bold;
}