/*

2016 / 2023 en later ...

De Wijngilde Balsemien is een niet-commerciële vereniging ten behoeve van mensen interesseren, groeperen en informeren over en rond het thema ‘wijn’.

--------------------------------------------------------------------------------

Inspiratie en programmasturing werd ook geïmplementeerd via volgende internetlocaties:

 1 Background 1
    http://www.tssphoto.com/2009/11/09/red-splash-wine-being-poured-into-a-glass/
    Andreas Levers / Creative Commons license (vrij om:
     * het werk te delen - te kopiëren, te verspreiden en door te geven via elk medium of bestandsformaat
     * het werk te bewerken - te remixen, te veranderen en afgeleide werken te maken
	 * NietCommercieel - Je mag het werk niet gebruiken voor commerciële doeleinden.)

 2 Background 2 - Wijn bij zonsondergang - Free
   http://nl.forwallpaper.com/

 3 Cubic Add2homescreen - Open source script by Matteo Spinelli - Free
   http://cubiq.org/add-to-home-screen

 4 ViewerJS - Open Source - Free
   http://github.com/kogmbh/ViewerJS

 5 Jsor/slider - Open Source - Free
   https://github.com/jssor/slider

 6 Fading script - Open source - Free
   http://www.pptbackgrounds.net/category/medical-ppt-templates.html

 7 Code css / Effects - Free
   http://ianlunn.github.io/Hover/

 8 jQuery 1.11.1 - jQuery Foundation, Inc. - Free
   http://jquery.com/

 9 PNG-icons - Free
   http://wesharepics.info/

10 Knoppen inlogpagina - Free
   http://www.bestcssbuttongenerator.com/

 */

img.bg {
min-height: 100%;
min-width: 1002px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}	
#pagina {
position: relative;
width: 100%;         /* responsive */
max-width: 600px;    /* begrenst breedte op desktop */
max-height: 85vh;
overflow-y: auto; 
margin: 20px auto;
padding: 20px;
background: #CCC;
opacity: 0.85;
box-shadow: 0 0 20px black;
-webkit-overflow-scrolling: touch;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-align: center;
font-size: medium;
font-style: normal;
border-radius: 5px;
}
@media (max-width: 600px) {
#pagina {
padding: 15px;
margin: 10px;
max-width: 325px;
max-height: 85vh;
overflow-y: auto; 
  }
}
#pagina2 {
position: relative;
width: 96%;
margin: 30px auto;
padding: 20px;
background:#CCC;
opacity: 0.85;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
-webkit-overflow-scrolling: touch;
}	
#paginafoto {
position: relative;
width: 80%;
margin: 20px auto;
padding: 20px;
background: #CCC;
opacity: 0.95;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
-webkit-overflow-scrolling: touch;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-align: left;
font-size: medium;
font-style: normal;
border-radius: 5px;
}	
p {
margin: 0 0 30px 0;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 13px;
}		
li,ul {
margin: 0 0 30px 0;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 14px;
}
.sluit {
position: relative;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
z-index: 2;
margin: auto;
width: 98%;
top: 2px;
text-align: center;
}
.text1 {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 16px;
text-align:center;	
}
.text2 {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 14px;
text-align:center;
color:#7A0709;
}
.text3 {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 13px;
text-align:center;
}
.text4 {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 10px;
color: #1C3D77;
text-align:center;
line-height: 110%;
width:60%;
margin: auto;
}
.text5 {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 10px;
color:#D7191C;
text-align:center;
line-height: 110%;
width:60%;
margin: auto;
}
.text6 {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 14px;
text-align:center;
color:#7A0709;
}
.linksuitlijn {
text-align: left;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
table {
margin-left: auto;
margin-right: auto;
width: "80%";
border: "0";
text-align: left;
}
a {
border: 1px solid #000;
padding: 1px 5px;
font-weight: bold;
font-size: 11px;
background: #FFF;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 7px 1px rgba(55, 55, 90, .50);
-moz-box-shadow: 0px 0px 7px 1px rgba(55, 55, 90, .50);
box-shadow: 0px 0px 7px 1px rgba(55, 55, 90, .50);
}
a:hover{
color:#F40C21;
background-color:#F8F4BD;
}
a.groen{
background-color:#9EE974;
-webkit-box-shadow: 0px 0px 7px 1px rgba(55, 55, 90, .50);
-moz-box-shadow: 0px 0px 7px 1px rgba(55, 55, 90, .50);
box-shadow: 0px 0px 7px 1px rgba(55, 55, 90, .50);
}
a.geel{
background-color:#FFFF73;
-webkit-box-shadow: 0px 0px 7px 1px rgba(55, 55, 90, .50);
-moz-box-shadow: 0px 0px 7px 1px rgba(55, 55, 90, .50);
box-shadow: 0px 0px 7px 1px rgba(55, 55, 90, .50);
}
hr.lijn {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
table {
border-collapse: collapse;
width: 80%;
}
th, td {
text-align: left;
padding: 8px;
font-size: small;
color: #472E05;
}
tr:nth-child(even){background-color: #f2f2f2
}
tr:nth-child(odd){background-color: #F8FCE4
}
th {
background-color: #4CAF50;
color: #821113;
text-align: left;
font-size: medium;
}
table tr:last-child td:first-child {
-moz-border-radius-bottomleft:1px;
-webkit-border-bottom-left-radius:1px;
border-bottom-left-radius:1px
}
table tr:last-child td:last-child {
-moz-border-radius-bottomright:1px;
-webkit-border-bottom-right-radius:1px;
border-bottom-right-radius:1px
}
div.wrapper{  
float:left; 
position:relative; 
}  
div.description{  
position:absolute;
bottom:0px;
left:0px;  
width:100%;  
background-color:black;  
font-family: 'tahoma';  
font-size:15px;  
color:white;  
opacity:0.5;
filter:alpha(opacity=50); 
}  
p.description_content{  
padding:10px;  
margin:0px;
text-align:center;  
}  
.kader {
background-color:#D2CFCA;
border-radius: 10px;
border: 1px solid #aaa;
padding: 5px;
line-height: 22px; 
width: 60%;
height: 20px;   
margin: 0 auto;
-webkit-box-shadow: 0px 0px 9px 1px rgba(55, 55, 90, .75);
-moz-box-shadow: 0px 0px 9px 1px rgba(55, 55, 90, .75);
box-shadow: 0px 0px 5px 1px rgba(55, 55, 90, .75);
}
.kadertabel {
background-color:#D2CFCA;
margin: 0 auto;
-webkit-box-shadow: 0px 0px 9px 1px rgba(55, 55, 90, .75);
-moz-box-shadow: 0px 0px 9px 1px rgba(55, 55, 90, .75);
box-shadow: 0px 0px 5px 1px rgba(55, 55, 90, .75);
}
.video {
text-align: center;
padding-top: .3em;
width: 80%    !important;
height: auto   !important;
border: medium solid gray;
background:#000000 1em;
-moz-border-radius: 10px;
border-radius: 10px;
margin: 0 auto;
position: relative;
-webkit-box-shadow: 0px 0px 9px 1px rgba(55, 55, 90, .75);
-moz-box-shadow: 0px 0px 9px 1px rgba(55, 55, 90, .75);
box-shadow: 0px 0px 5px 1px rgba(55, 55, 90, .75);
}
/* iframe - Positionering / Apple compatibiliteit - Scrollbars (on)zichtbaarheid */
.vak {
width: 100%;
height: 100%;
margin: 0px auto;
}
.embed-vak {
width: 100%;
padding-bottom: 100%;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
-webkit-overflow-scrolling:touch;
}
.embed-vak iframe {
min-width: 100%;
width: 10px;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden;
overflow-x: hidden;
}
.stijl1 {
color:#F74043;	
font-weight:600;
font-size: 13px;
}
.midden {
text-align: center;
}
.knopje {
box-shadow: 0px 10px 14px -7px #276873;
background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
background-color: #599bb3;
border: 1px solid #057fd0;
border-radius: 12px;
display :inline-block;
cursor: pointer;
color:#ffffff;
font-family: Arial;
font-size: 13px;
font-weight:bold;
padding: 3px 13px;
text-decoration: none;
text-shadow:0px 1px 0px #3d768a;
}
.knopje:hover {
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
background-color:#408c99;
}
.knopje:active {
position:relative;
top:1px;
}