/*
In dit bestand de CSS voor het fotoalbum onderverdeeld in:
CSS voor fotoalbumindex
CSS voor afbeelding Terug
CSS voor Kruimelspoor
CSS voor het weergeven van de thumbs
CSS voor het weergeven van de foto's

Dit bestand heeft verder weinig toelichting. Kijk goed in welk blok je bezig bent (toelichting boven blok) en
naar de namen van de elementen. Als je er niet uitkomt geef dan een style bv even background-color: red mee en kijk
wat er veranderd.
 */


/*______________________________________________CSS voor fotoalbumindex____________________________________________*/

.fotoalbumwelkomstekst {
display: block;
font-weight: normal;
padding: 0px;
margin-top: -20px;
margin-bottom: 20px;
}

.fotoalbumwelkomstekst p {
padding: 0px;
margin: 0px;
padding-bottom: 4px;
}

.albumsinhetjaar {
display: block;
margin-top: 5px;
margin-bottom: -5px;
font-weight: bold;
font-size: 16px;
color: #00a4ff;
}

.albumbox {
display: inline-block;
clear: right;
margin-top: 15px;
margin-bottom: 10px;
padding: 8px;
background-color: #dff4ff;
}

.albumthumb {
float: left;
margin-right: 6px;
border: 0px;
}

a.linknaaralbum, a.linknaaralbum:visited, a.linknaaralbum:active, a.linknaaralbum:focus, a.linknaaralbum:hover {
color: #00a4ff;
text-decoration: none;
font-weight: bold;
}

a.linknaaralbum:hover {
text-decoration: underline;
}

.albumbeschrijving {

}

.albumbeschrijving p {
margin-bottom: 0;
}

/*__________________________________________Einde CSS voor fotoalbumindex__________________________________________*/




/*___________________________________________CSS voor afbeelding Terug_____________________________________________*/

#afbeeldingterugbox {
display: block;
}

.afbeeldingterug {
display: block;
height: 80px;
width: 80px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
border: 0px;
}

#afbeeldingterugalttekst {
display: block;
width: 80px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
text-align: center;
}

a.afbeeldingteruga, a.afbeeldingteruga:visited, a.afbeeldingteruga:active, a.afbeeldingteruga:focus,
a.afbeeldingteruga:hover {
color: #8cac19;
text-decoration: none;
font-weight: bold;
}

a.afbeeldingteruga:hover {
text-decoration: underline;
}

/*________________________________________Einde CSS voor afbeelding Terug__________________________________________*/




/*______________________________________________CSS voor Kruimelspoor______________________________________________*/

.kruimelspoorblok {
display: block;
margin-top: 12px;
margin-bottom: 30px;
}

a.broodkruimel, a.broodkruimel:visited, a.broodkruimel:active, a.broodkruimel:focus, a.broodkruimel:hover {
text-decoration: none;
font-weight: bold;
font-style: italic;
color: #00a4ff;
}

a.broodkruimel:hover {
text-decoration: underline;
}

.kruimelscheidingsteken {
font-style: italic;
font-weight: bold;
color: #000000;
}

.kruimellaatste {
font-style: italic;
font-weight: bold;
color: #000000;
}

/*____________________________________________Einde CSS Kruimelspoor________________________________________________*/




/*______________________________________CSS voor het weergeven van de thumbs________________________________________*/

.fotosinhetalbum {
display: block;
font-weight: bold;
font-size: 16px;
color: #bacf26;;
}

.fotosinwelkalbum {
font-weight: bold;
}

.fotoalbumbeschrijving {
display: block;
margin: 0px;
padding: 0px;
margin-bottom: 20px;
}

.fotoalbumbeschrijving p {
margin: 0px;
padding: 0px;
}

.thumbbox1 {
width: 90%;
margin: 0;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
padding-right: 0px;
padding-top: 12px;
padding-bottom: 0px;
text-align: center;
/* gradient effect (voor verschillende browsers)
Zie: http://www.colorzilla.com/gradient-editor */
background: #00a4ff;
background: -moz-linear-gradient(top,  #00a4ff 30%, #dff4ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#00a4ff), color-stop(100%,#dff4ff));
background: -webkit-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: -o-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: -ms-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4ff', endColorstr='#dff4ff',GradientType=0 );
}

.thumbbox {
display: block;
padding: 0px;
margin: 0px;
text-align: center;
}

.thumbgeheel {
display: inline-block;
vertical-align: top;
margin: 8px;
padding: 0px;
}

a.linknaarfoto:link, a.linknaarfoto:visited, a.linknaarfoto:active, a.linknaarfoto:focus, a.linknaarfoto:hover {
display: block;
vertical-align: middle;
min-width: 170px;
padding-left: 5px;
padding-right: 5px;
padding-top: 10px;
padding-bottom: 10px;
color: #000000;
text-decoration: none;
background-color: #ffffff;
}

a.linknaarfoto:hover {
padding-left: 4px;
padding-right: 3px;
padding-top: 9px;
padding-bottom: 8px;
border-left: 1px solid #ffffff;
border-right: 1px solid #808080;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #808080;
background-color: #ffffff;
/* Transparantie bij met de muis ervoer toevoegen voor mooi effect.
Zie: www.css-opacity.pascal-seven.de
Het effect wordt bepaald door de achtergrondkleur (hierboven) en de waarde van de transparantie */
-moz-opacity: 0.50;
-khtml-opacity: 0.50;
opacity: 0.50;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
filter:alpha(opacity=50);
}

.thumbafbeelding {
vertical-align: middle;
/* Voor extra randje om foto kun je padding op 2 zetten en border op 1 */
padding: 0px;
border: solid 0px #c0c0c0;
}

.thumbtoelichting {
display: block;
min-width: 170px;
padding: 5px;
font-size: 10px;
font-weight: normal;
color: #ffffff;
/* gradient effect (voor verschillende browsers)
Zie: http://www.colorzilla.com/gradient-editor */
background: #00a4ff;
background: -moz-linear-gradient(top,  #00a4ff 30%, #dff4ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#00a4ff), color-stop(100%,#dff4ff));
background: -webkit-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: -o-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: -ms-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4ff', endColorstr='#dff4ff',GradientType=0 );
}

.vorigevolgendebox {
display: block;
margin-top: 12px;
/* gradient effect (voor verschillende browsers)
Zie: http://www.colorzilla.com/gradient-editor */
background: #00a4ff;
background: -moz-linear-gradient(top,  #00a4ff 30%, #dff4ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#00a4ff), color-stop(100%,#dff4ff));
background: -webkit-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: -o-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: -ms-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4ff', endColorstr='#dff4ff',GradientType=0 );
}

a.vorigefotopagina, a.vorigefotopagina:visited, a.vorigefotopagina:active, a.vorigefotopagina:focus,
a.vorigefotopagina:hover {
color: #ffffff;
text-decoration: none;
}

a.vorigefotopagina:hover {
text-decoration: underline;
}

a.volgendefotopagina, a.volgendefotopagina:visited, a.volgendefotopagina:active, a.volgendefotopagina:focus,
a.volgendefotopagina:hover {
color: #ffffff;
text-decoration: none;
}

a.volgendefotopagina:hover {
text-decoration: underline;
}

a.nummervolgendefotopagina, a.nummervolgendefotopagina:visited, a.nummervolgendefotopagina:active,
a.nummervolgendefotopagina:focus, a.nummervolgendefotopagina:hover {
color: #ffffff;
text-decoration: none;
}

a.nummervolgendefotopagina:hover {
text-decoration: underline;
}

.nummerhuidigepagina {

}

.streepjefotopnumpag {

}

/*__________________________________Einde CSS voor het weergeven van de thumbs______________________________________*/




/*_____________________________________CSS voor het weergeven van de foto's_________________________________________*/

#fotobox {
text-align: center;
/* Als je de width weglaat strekt het vlak zich uit over de gehele breedte */
width: 600px;
margin-left: auto;
margin-right: auto;
/* Einde tot als je dit weglaat */
padding: 0px;
/* gradient effect (voor verschillende browsers)
Zie: http://www.colorzilla.com/gradient-editor */
background: #00a4ff;
background: -moz-linear-gradient(top,  #00a4ff 30%, #dff4ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#00a4ff), color-stop(100%,#dff4ff));
background: -webkit-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: -o-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: -ms-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4ff', endColorstr='#dff4ff',GradientType=0 );
}

#boxomfoto {
width: 600px;
margin-left: auto;
margin-right: auto;
/* Achtergrondkleur tijdens het laden van foto's en linker en rechterzijkleur voor smalle foto's */
/* gradient effect (voor verschillende browsers)
Zie: http://www.colorzilla.com/gradient-editor */
background: #00a4ff;
background: -moz-linear-gradient(top,  #00a4ff 30%, #dff4ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#00a4ff), color-stop(100%,#dff4ff));
background: -webkit-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: -o-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: -ms-linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
background: linear-gradient(top,  #00a4ff 30%,#dff4ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4ff', endColorstr='#dff4ff',GradientType=0 );
}

/* Display: block niet verwijderen vanwege XHTML strict mode !
zie: http://www.quirksmode.org/css/quirksmode.html#t15 */
.foto {
display: block;
margin-left: auto;
margin-right: auto;
border: 0;
}

#fototoelichting {
display: block;
width: 600px;
margin-left: auto;
margin-right: auto;
font-size: 10px;
}

.vorigevolgendeboxfoto {
display: block;
/* Breedte min 2x padding !! */
width: 596px;
margin-left: auto;
margin-right: auto;
padding: 2px;
/* gradient effect (voor verschillende browsers)
Zie: http://www.colorzilla.com/gradient-editor */
background: #00a4ff;
background: -moz-linear-gradient(top,  #00a4ff 0%, #c0e9ff 54%, #00a4ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a4ff), color-stop(54%,#c0e9ff), color-stop(100%,#00a4ff));
background: -webkit-linear-gradient(top,  #00a4ff 0%,#c0e9ff 54%,#00a4ff 100%);
background: -o-linear-gradient(top,  #00a4ff 0%,#c0e9ff 54%,#00a4ff 100%);
background: -ms-linear-gradient(top,  #00a4ff 0%,#c0e9ff 54%,#00a4ff 100%);
background: linear-gradient(top,  #00a4ff 0%,#c0e9ff 54%,#00a4ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4ff', endColorstr='#00a4ff',GradientType=0 );
}

a.vorigefoto, a.vorigefoto:visited, a.vorigefoto:active, a.vorigefoto:focus, a.vorigefoto:hover {
color: #ffffff;
text-decoration: none;
}

a.vorigefoto:hover {
text-decoration: underline;
}

a.volgendefoto, a.volgendefoto:visited, a.volgendefoto:active, a.volgendefoto:focus, a.volgendefoto:hover {
color: #ffffff;
text-decoration: none;
}

a.volgendefoto:hover {
text-decoration: underline;
}

a.nummervolgendefoto, a.nummervolgendefoto:visited, a.nummervolgendefoto:active, a.nummervolgendefoto:focus,
a.nummervolgendefoto:hover {
color: #ffffff;
text-decoration: none;
}

a.nummervolgendefoto:hover {
text-decoration: underline;
}

.nummerhuidigefoto {

}

.streepjefotofnumfoto {

}


/*____________________________________Einde CSS voor het weergeven van de foto's___________________________________*/