﻿/* FIRST RESETTING STYLES FOR DETAIL WEBPAGES */


html, body { margin:0; border:0; padding:0;	font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:14px}

table; tr, th, td,  { display: table; border-collapse:collapse; border-spacing:0; height:10px; border:0; padding:0; margin:0; text-align:left ;vertical-align: top }


img {border:0;	padding:0;	margin:0; }


div, span, blockquote, iframe, h1, h2, h3, h4, h5, h6, ul; ol, li, p, a, {display:block ;border:0; padding:0; margin:0; vertical-align: top;}


a:link {color: #FFFFFF; text-decoration: none}


article, aside, figure, footer, header, section {display:block;}

flex: none


/*STYLES VOOR INDEX en de CONTENT WEBPAGES*/

/* GLOBAL STYLES*/

body {background-color: #FF9148;}

section {background-color:#FF9148;}

div {background-color: inherit }
	
div a {overflow:auto; }
	
div p {overflow:auto; }

hr {background-color:inherit;}


/*KLEURENCODES:  oud roze: #DB6FC9   blauw groen #007272   verzadigd blauw #215AAE  licht bruin #F9DEC6  aard bruin #EBD2AF   roze #FFB3BA  licht grijs #E4E4E4 hoofdoranje #FF9148   */

/* BODY COLOR SHIFTS   #ff9aa2  zacht bloesem    #ffe6c9 zacht crème  #ffb784  warm oranje   #FFAC6F  abrikoos,perzik   #ffbfa1  pastel zalm */
  
.pagecolor_B {
    margin: 0;
    padding: 0;
    /* Meervoudige diagonale overgangen tussen oranje en oude roze en perzik */
    background: linear-gradient(
      135deg,
      #ff9148 0%,     /* basis oranje */
      #ff9148 5%,     /* basis oranje */
      #ff9aa2 20%,    /* bloesem */         
      #FFA566 35%,    /* abrikoos, perzik */ 
      #ff9148 50%,     /* basis oranje */
      #FFA566 65%,    /* abrikoos, perzik */     
      #ff9aa2 80%,    /* bloesem */
      #ff9148 95%,     /* basis oranje */
      #ff9148 100%   /* basis oranje */
    );
    background-attachment: fixed; /* zorgt voor stabiele achtergrond op tablets/pc */
    background-size: cover;
  }


.pagecolor_D {
    margin: 0;
    padding: 0;
    /* Zachte diagonale overgang met oranje als basis en abrikoos */
    background: linear-gradient(
      135deg,
      #ff9148 5%,     /* basis oranje */
      #FF9F5A 25%,    /* lichter oranje */         
      #FFA566 50%,    /* abrikoos, perzik */      
      #FF9F5A 75%,    /* lichter oranje */
      #ff9148 95%    /* basis oranje */
    );
    background-attachment: fixed; /* zorgt voor stabiele achtergrond op tablets/pc */
    background-size: cover;
  }

.pagecolor_R {
  margin: 0;
  padding: 0;
  /* cirkelvormige overgang radiaal vanuit het midden */
  background: radial-gradient(
    circle at center,
    #ffa566 0%,     /* abrikoos in het midden */
    #FF9F5A 40%,    /* lichter oranje */
    #ff9148 100%    /* basis oranje naar de randen */
  );
  background-attachment: fixed;
  background-size: cover;
}


/*ID-CONTAINERS & HEADINGS @ PAGE CONTENT*/


#content-titels { width:99%;	
	padding:1px;
	height: auto; 	
	text-align: center;	 
	}


/* TABLE POSITION and CELL STYLES */   


.table-left {
	border-collapse: collapse;
	margin-left: 3px;
	float: left;
	width: 579px;	
	}


.table-right {
	border-collapse: collapse;
	margin-right: 3px;
	float: right;
	width: 579px;	 
	}


.table-center {
	border-collapse: collapse;
	margin: 0 auto;
	width: 57%;
	display: flex; 
	justify-content: center; 
	align-items: center;	 
}




/* FLOATING TILES  met random distribution <h>  */


.floating-tile-A {
	border-collapse: collapse;
	width: 260px;
	margin-top:9px; 
	margin-left:12px; 
	margin-right:12px; 
	margin-bottom:9px;	
	}

.floating-tile-C {
	border-collapse: collapse;
	width: 300px;
	margin-top:9px; 
	margin-left:12px; 
	margin-right:12px; 
	margin-bottom:9px;	
	}


.floating-tile-D {
	border-collapse: collapse;
	width: 360px;
	margin-top:9px; 
	margin-left:12px; 
	margin-right:12px; 
	margin-bottom:9px;	
	}

.floating-tile-E {
	border-collapse: collapse;
	width: 400px;
	margin-top:9px; 
	margin-left:12px; 
	margin-right:12px; 
	margin-bottom:9px;	
	}


.tile-heading-B {
	width: 100%;
	height:auto;
	background-color: #6F5748;
	border: 1px solid #F38A45;
	text-align: center;
	line-height:150%;
	font-family: "Times New Roman";
	font-size: large;
	letter-spacing: 1px;
	font-weight: 500;
	font-style:normal;
	color: #EBD2AF;
	padding-bottom:6px;
	padding-top:6px;
	}		


h6 {
	font-family: "Segoe UI";
	font-size: small;
	letter-spacing: 1px;
	font-weight: normal;
	font-style: normal;	
	color:#36454f; 
	margin-bottom:1px;
	margin-top:1px;
	}


.tile-row-C {
	width: 100%;
	height:auto;
	background-color:#EBD2AF;
	border: solid;
  	border-width: 1px;
  	border-color:#F38A45;
  	text-align: left;
  	text-indent:0px;
	line-height:165%;
	padding-left:12px;
	padding-bottom: 3px;
	padding-top:3px;
	padding-right:3px;
 	}



/* TABEL HOOFDING  zonder <h>  */


.table-heading {
	width: 100%;
	height:auto;
	background-color: #EBD2AF;
	border: 1px solid #F38A45;
	text-align: center;
	font-family: "Bookman Old Style";
	font-size: large;
	letter-spacing: 3px;
	font-weight: bold;
	font-style:normal;
	color: #4275AB;
	padding-bottom:7px;
	padding-top:7px;
	}		


.table-heading-aanbod {
	width: 100%;
	height:auto;
	background-color: #EBD2AF;
	border: 1px solid #F38A45;
	text-align: center;
	font-family: "Georgia";
	font-style:italic;
	font-size: medium;
	letter-spacing: 3px;
	font-weight: bold;
	font-style:normal;
	color: #0000FF;
	padding-bottom:7px;
	padding-top:7px;
	}		


.table-heading-green {
	width: 100%;
	height:auto;
	background-color: #EBD2AF;
	border: 1px solid #F38A45;
	text-align: center;
	font-family: "Bookman Old Style";
	font-size: large;
	font-stretch: normal;
	letter-spacing: 3px;
	font-weight:500;
	font-style:normal;
	color: #30B424;
	padding-bottom:7px;
	padding-top:7px;
	}		


.table-bericht {
	width: 100%;
	height:auto;
	background-color: #EBD2AF;
	border: 1px solid #F38A45;
	text-align: center;
	font-family: "Bookman Old Style";
	font-size: large;
	letter-spacing: 1px;
	font-weight: normal;
	font-style:italic;	
	color: #FFFFFF;	
	padding:6px;
	}		


.table-fototitle {
	width: 100%;
	height:auto;
	background-color: #EBD2AF;
	border: 1px solid #F38A45;
	text-align: center;
	font-family: "Bookman Old Style";
	font-size: large;
	letter-spacing: 3px;
	font-weight: bold;
	font-style:normal;
	color: #4275AB;
	line-height:180%;
	padding-bottom:7px;
	padding-top:7px;
	}		


.table-fototile {
	width: 100%;
	height:auto;
	background-color: #EBD2AF;
	border: 1px solid #F38A45;
	vertical-align: top;   /* zorgt dat de inhoud bovenaan uitlijnt */
  	text-align: center;    /* optioneel: horizontaal centreren */
  	padding: 1px;         /* optioneel: ruimte rond de flyer */	
  	padding-bottom:7px;
	padding-top:7px;
	}		





/* HEADER TAGS */

h3 {
	font-family: "Bookman Old Style";
	font-size: large;
	letter-spacing: 1px;
	font-weight: normal;
	font-style:italic;	
	color: #FFFFFF;	
	margin-top:9px;
	margin-bottom:6px;	
	}


/* NOT IN USE */ 

h4 {
	font-family: "Bookman Old Style";
	font-size: large;
	letter-spacing: 3px;
	font-weight: bold;
	font-style:normal;
	color: #4275AB;
	margin-bottom:9px;
	margin-top:6px;
	}

	

/* DOORLOPENDE TEKST in TABEL-RIJEN */ 


.table-row-A {
	width: 100%;
	height:auto;
	background-color:#EBD2AF;
	border: solid;
  	border-width: 1px;
  	border-color:#F38A45;
  	text-align: left;
  	text-indent:0px;
	line-height:200%;
	padding-left:12px;
	padding-bottom: 3px;
	padding-top:3px;
	padding-right:3px;
 	}


.table-row-B {
	width: 100%;
	height:auto;
	background-color: azure;
	border: solid;
  	border-width: 1px;
  	border-color:#F38A45;
  	text-align: left;
  	text-indent:3px;
	line-height:125%;
	padding-left:12px;
	padding-bottom: 12px;
	padding-top:12px;
	padding-right:12px;
 	}


.table-row-C {
	width: 100%;
	height:auto;
	background-color:#EBD2AF;
	border: solid;
  	border-width: 1px;
  	border-color:#F38A45;
  	text-align: left;
  	text-indent:0px;
	line-height:150%;
	padding-left:12px;
	padding-bottom: 3px;
	padding-top:3px;
	padding-right:3px;
 	}



.table-link {
	width: 100%;
	height:auto;
	background-color: #FCEDE1; 
	border: solid;
  	border-width: 1px;
  	border-color:#F38A45;
  	text-align: center;
  	text-indent:0px;
	line-height:170%;
	padding-left:3px;
	padding-bottom: 5px;
	padding-top:5px;
	padding-right:3px;
	font-family: "Trebuchet MS";
	font-size: medium;
	letter-spacing: 2px;
	font-weight: normal;
	font-style:italic;	
	margin-bottom:1px;
	margin-top:1px;
	}


/*  RADAR DIAGRAM */


.table-row-ToDo {
	width: 100%;
	height:auto;
	background-color: #BDF6C0;
	border: solid;
  	border-width: 1px;
  	border-color:#F38A45;
  	text-align: left;
  	text-indent:0px;
	line-height:125%;
	padding-left:12px;
	padding-bottom: 6px;
	padding-top:6px;
	padding-right:12px;
	font: Verdana;
	font-size:x-small;
	color:#42093F;
 	}


.zoom {
  transition: transform 0.3s ease;
  max-width: 475px;
  cursor: pointer;
}

.zoom:hover {
  transform: scale(1.5);
  z-index: 10;
}


/* BESTEL TEGELS */


.tegel-fruitrij {
    width: 100%;
    height: auto;
    background-color: #FCEDE1; 
    text-align: center;
    text-indent: 0px;
    line-height: 160%;
    padding: 3px;
    font-family: "Trebuchet MS";
    font-size: medium;
    letter-spacing: 2px;
    font-weight: normal;
    font-style: italic; 
    margin: 1px 0;
    border-radius: 9px; /* 👈 Dit zorgt voor afgeronde hoeken */
}



.cachet { 
	color:#9F21F0;
	font-size:13px;
	line-height:150%;
	text-align: center;
	}


/* OVERZICHT FRUITSOORTEN IN POORT-PAGINA   layout  */

.fruit-tegel {
  margin-top: 3px;
  margin-left: 30px;
  float: left;
  width: 204px;
  border: 1px #EBD2AF solid;
  border-radius: 9px;
  transition: background-color 0.3s ease;
}


/* TABEL   layout  */


h5 {
	font-family: "Trebuchet MS";
	font-size: small;
	letter-spacing: 1px;
	font-weight: normal;
	font-style:italic;	
	color: #4E2E26;
	margin-bottom:1px;
	margin-top:1px;
	}


	
ol { margin-bottom: 9px;
	margin-top:9px;	
	}	


.nummerlijst {
	font-family: "Segoe UI Semibold";
	letter-spacing: 1px;
	font-weight: normal;
	font-style: normal;
	color: #4E2E26;
	font-size: small;
	line-height:24px;
	vertical-align:top;
	margin-left:0px;
	margin-bottom:0px;
	margin-top:0px;
	}



/* BERICHTEN in SEIZOENS RESERVATIE OF NADRUK  #398145 #008040  */


.news-studio {
	display: flex; 
	justify-content: center; 
	align-items: center; 
	height: 50px;
	margin-top:20px
}


.newsflash { 
	width: 70%;
	min-width:800px; 
	color: #007BA5;
}


.lichtkrant {
	height:auto;
	text-align: justify;
	font-size: medium;
	line-height:150%;
	font-family:"Comic Sans MS";
	letter-spacing: 1px;
	margin-top:-6px;
	margin-bottom:-6px;
	}



/* TOPICS in THEMA van WEBwinkel-ETALAGE */   /* De rest naar CSS OPTION verplaatst  */


.topic-bericht {
	border-collapse: collapse;
	margin: 3px;
	padding-left:6px;
	text-align: center;
	font-family: "Georgia";
  	font-size: medium;
  	letter-spacing: 1px;
  	font-weight: normal;
	font-style:italic; 
	color: navy;
	width: 99%;	
	}


/* RECEPT ETIKET in WEBSHOP ETALAGE */  /* Naar CSS OPTION verplaatst  */


ul { 
	border-collapse:collapse;
	list-style-position: inside;
	list-style-type: circle;
	padding-left: 6px;
	padding-top:1px;
	padding-bottom:1px;
	margin:0px;
	margin-bottom: auto;
	 }
		

/* INTERNAL HYPERLINKS & MOUSE OVER */

/* om een afbeelding te laten verschijnen zolang de cursor er op staat */


/* If the link is unvisited you see this color*/
a:link {
        color: #4E2E26;
        text-decoration: underline;
        }
  
/* If the link is visited you see this color*/
a:visited {
        background-color:ivory;
        color:#4E2E26;
        padding:5px 2px 5px 2px;
        }
 
/* On placing mouse over the link */
       
a:hover  {
	background-color:#81FFFF;
	color:#CC0C66;
	padding:5px 2px 5px 2px;
	}



/* EXTERNAL HYPERLINKS &  TABEL OPMAAK #30B424   */


/* 1. Tabel gecentreerd met rijhoogte en lichtgroene dunne lijnen */

.ext-link-tabel {
  margin: 0 auto;
  border-collapse: collapse;
  width: auto;
  border: 1px solid #90EE90;
}


/* 2. Titel boven de tabel */

.ext-link-titel {
  background-color:#9BBB59;
  border: 1px solid #90EE90;  
  font-family: 'Bookman Old Style', serif;
  color: white;
  font-style:normal;
  font-weight: lighter;
  font-stretch: normal;
  font-size: 17px;
  letter-spacing: 3px;
  text-align: center;
  padding-bottom:7px;
  padding-top:7px;
  padding-left:5px;
  padding-right:5px;
  width:auto;
  margin: 0 auto;
}


/* 3. Rij van link-tabel  */

.ext-link-tabel-rij {
	width:100%;
	border-width: 1px;
	border-style: solid #90EE90;
	text-align: left;
  	text-indent:0px;
	line-height:175%;
	padding-left:12px;
	padding-bottom: 3px;
	padding-top:3px;
	padding-right:3px;
}


/* 4. Donkerbruine cel met hyperlink en groene rand */

.ext-link-dark {
  background-color: #E7CFB4; /* donkerbruin */
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 14px;
  border: 1px solid #90EE90; /* lichtgroene rand */
  padding: 6px;
  width: auto;
  vertical-align: middle;
}

.ext-link-dark a {
  color:#6060FF;
  text-decoration: underline;
  font-weight: lighter;
}

/* 5. Lichtbruine cel met hyperlink en groene rand */

.ext-link-light {
  background-color: #F0E4D5; /* lichtbruin */
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 14px;
  border: 1px solid #90EE90; /* lichtgroene rand */
  padding: 6px;
  width:auto;
  vertical-align: middle;
}

.ext-link-light a {
  color:#6060FF;
  text-decoration: underline;
  font-weight: lighter;
}
