stylesheet

/* 1. body  2.  headers   3. containers  4. navigaties    5.  links  6.  contents  7.  footers  8.  fonts   9. images  10.  allerlei  */

/*  1.  body.  */


html, body{
padding: 0; 
margin: 0;
}

body{
background-color: white;
font-size: 62.5%; /*1em=10px*/
font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
min-width: 40em; /* Mindestbreite verhindert Anzeigefehler  in         modernen Browsern */
margin: 0;
text-align: center;  /* Zentrierung im Internet Explorer */
}



/*     2. headers.    */

div#header{
width: 100%;
height: 10px;
padding: 0 0 0 0; 
background-color: #FF3300; 
} 

div#header_smal{
width: 100%;
height: 5px;
padding: 0 0 0 0; 
background-color: #FF3300;
}


/*     3. containers.    */


div#main_container_breed{
background-color: #FFFFCC;
text-align: left;    /* Seiteninhalt wieder links ausrichten */
margin: 0 auto 0 auto;    /* standardkonforme horizontale                Zentrierung */
width: 760px;
/*width: 100%;  speciaal voor IE7  */
min-height: 100%;
_height: 100%;/* underscore alleen voor IE6 */
padding: 0 0 0 0;
border-width: 10px;
border-style: solid;  
border-color: #003399;
}

div#main_container_opvallend{
background-color: #FFFFFF;
text-align: left;    /* Seiteninhalt wieder links ausrichten */
margin: 0 auto 0 auto;    /* standardkonforme horizontale                Zentrierung */
width: 760px;
/*width: 100%;  speciaal voor IE7  */
min-height: 100%;
_height: 100%;/* underscore alleen voor IE6 */
padding: 0 0 0 0;
border-width: 5px;
border-style: solid;  
border-color: #003399;
}

div#main_container_geel{
background-color: #FFFFCC;
text-align: left;    /* Seiteninhalt wieder links ausrichten */
margin: 0 auto 0 auto;    /* standardkonforme horizontale                Zentrierung */
width: 720px;  
/*width: 100%;  speciaal voor IE7  */
min-height: 100%;
_height: 100%;/* underscore alleen voor IE6 */
padding: 0 0 0 0;
border-width: 10px;
border-style: solid;  
border-color: #003399;
}

div#main_container_wit{
background-color: #FFFFFF;
text-align: left;    /* Seiteninhalt wieder links ausrichten */
margin: 0 auto 0 auto;    /* standardkonforme horizontale                Zentrierung */
width: 720px;  
/*width: 100%;  speciaal voor IE7  */
min-height: 100%;
_height: 100%;/* underscore alleen voor IE6 */
padding: 0 0 0 0;
border-width: 10px;
border-style: solid;  
border-color: #003399;
}

div#main_container{
background-color: #FFFFFF;
text-align: left;    /* Seiteninhalt wieder links ausrichten */
margin: 0 auto 0 auto;    /* standardkonforme horizontale                Zentrierung */
width: 640px;
/*width: 100%;  speciaal voor IE7  */
min-height: 100%;
_height: 100%;/* underscore alleen voor IE6 */
padding: 0 0 0 0;
border-width: 5px;
border-style: solid;  
border-color: #003399;
}

div#main_container_smal{
background-color: #FFFFFF;
text-align: left;    /* Seiteninhalt wieder links ausrichten */
margin: 0 auto 0 auto;    /* standardkonforme horizontale                Zentrierung */
width: 585px;
/*width: 100%;  speciaal voor IE7  */
min-height: 100%;
_height: 100%;/* underscore alleen voor IE6 */
padding: 0 0 0 0;
border-width: 5px;
border-style: solid;  
border-color: #003399;
}

div#main_container_super{
background-color: #FFFFFF;
text-align: left;    /* Seiteninhalt wieder links ausrichten */
margin: 0 auto 0 auto;    /* standardkonforme horizontale                Zentrierung */
width: 1245px;
/*width: 100%;  speciaal voor IE7  */
min-height: 100%;
_height: 100%;/* underscore alleen voor IE6 */
padding: 0 0 0 0;
border-width: 5px;
border-style: solid;  
border-color: #003399;
}

div.box{
background-color: #FFFFFF;
float: left;
width: 600px;  
margin-top: 1em;
margin-bottom: 2em;
padding: 0;
}

div#box_index{
margin-bottom: 8em;
}

div#fotobox{
background-color: #FFFFFF;
float: left;
width: 565px;  
margin-top: 1em;
margin-bottom: 2em;
padding: 0;
}

div.fotobox_opvallend{
/*background-color: #FFFFFF;*/
float: left;
margin-top: 1em;
margin-bottom: 2em;
padding: 0;
}

/*     4. navigaties.    */

div#nav{
background: #FFFFCC;
width: 12.5em; 
float: left;
margin-top: 14.5em; 
margin-left: 0.4em;
}

div#nav ul{
list-style: none;
padding: 0.2em;
margin: 0;
}

div#nav li{
font-size: 1.4em;
padding: 0.2em 0 0.2em 0; /*ruimte tussen de blokjes links onderling. */
}

div#nav li li{ 
font-size: 0.9em;
}

div#nav li a{
display: block;
padding: 0.2em 0 0.2em 0;
font-weight: normal;
border-top: 0.1em solid #CCC;
border-right: 0.1em solid #000;
border-bottom: 0.1em solid #000;
border-left: 0.1em solid #CCC;
text-align: center;
}


ul.nav_rechts{
float: right;
margin: 2em 2em 2em 2em;
list-style: none; 
}

ul.nav_rechts li{
font-size: 1em;
padding: 0.1em; /*ruimte tussen de blokjes links onderling. */
}

ul.nav_rechts li a{
display: block;
padding: 0.2em 0.3em 0.2em 0.3em;
font-weight: normal;
border-top: 0.1em solid #CCC;
border-right: 0.1em solid #000;
border-bottom: 0.1em solid #000;
border-left: 0.1em solid #CCC;
text-align: center;
}

ul.nav_rechts_home{
background: #FFFFCC;
float: right;
margin: 2em 2em 2em 2em;
padding: 0.2em 0.8em 0.2em 0.8em;
list-style: none;
list-style-image: none;
font-size: 0.9em; 
font-weight: normal;
border-top: 0.1em solid #CCC;
border-right: 0.1em solid #000;
border-bottom: 0.1em solid #000;
border-left: 0.1em solid #CCC;
text-align: center;
}

ul.nav_rechts_pijl{
float: right;
margin: 0.5em 0 0.5em 0.5em;
list-style: none;
}

ul.nav_omhoog{
width: 7em;
background: #FFFFCC;
margin: 0 44% 0 auto;
list-style: none;
list-style-image: none;
border-top: 0.1em solid #CCC;
border-right: 0.1em solid #000;
border-bottom: 0.1em solid #000;
border-left: 0.1em solid #CCC;
font-size: 0.9em; 
font-weight: normal;
text-align: center;
padding: 0.2em 0.8em 0.3em 0.8em;
}

ul.flipMenu {
margin-top : 10px;
margin-left : 0;
}

li.flipFolderOpen {
cursor : pointer;
list-style-image : url(flip_open.gif);
}


/*     5.links.    */


li a:link, li a:visited{
/*background: #FFFFCC;*/
color: #CC3300; 
font-weight: normal;
text-decoration: underline;
}

li a:hover, li a:active{
color: #CC3300;
font-weight: normal;
font-style: italic;
/*background: #FFFFCC;*/
text-decoration: none;
}

a:link{ 
font-weight: normal; 
color: #CC3300; 
text-decoration: underline; 
}

a:visited{ 
font-weight: normal; 
color: #CC3300; 
text-decoration: underline; 
}

a:hover{ 
font-weight: normal; 
color: #CC3300; 
font-style: italic; 
text-decoration: none; 
}

a:active{ 
font-weight: normal; 
color: #CC3300; 
font-style: italic; 
text-decoration: underline; 
}

/* voor los in de tekst staande links. */


/*     6. contents.    */


div#content{
margin-left: 10em;
padding: 2.75em 1em 1em 0; 
font-size: 1.4em;
}

div#content_breed{
margin-left: 3em; 
padding: 1em 1em 2em 0;
font-size: 1.4em;
}

div#content_smal{
margin-left: 1em; 
padding: 1em 1em 0 0;
font-size: 1.4em;
}

div#content_opvallend{ 
width: 750px;
margin-top: 2.5em;
margin-right: 0.3em;
margin-left: 0.3em;
font-size: 1.4em;
}


/*     7. footers.    */


div#footer{
width: 100%;
height: 10px;
background-color: #FF3300;
margin: auto 0 0 0;
} 

div#footer_container{
width: 100%;
height: 3em;
border-bottom: 1em solid #FF3300;
margin: 0 0 0 0;
} 

div#footer_smal{
width: 100%;
height: 5px;
background-color: #FF3300;
margin: auto 0 0 0;
}

div#footer_container_smal{
width: 100%;
height: 3em;
border-bottom: 0.5em solid #FF3300;
margin: 0 0 0 0;
} 


 /*    8. fonts.     */  


h1{
font-size: 1.3em;
font-style: italic;
}
/* Kop bovenaan de pagina. In kapitalen typen evt. met                  tussenruimten. */


h2{
font-size: 1.2em;
font-style: italic;
}
/* Tussenkop. */

h3{
font-size: 1.1em;
font-style: italic;
}
/* Kleinste kopje. */

.elf{
font-size: 1.1em;
}

p.negen{
font-size: 0.9em;
}
/* eventueel voor de verbindende teksten in het menu */

.negen{
font-size: 0.9em;
}

p.acht{
font-size: 0.8em;
}
/* voor de copyrights en links terug */

.acht{
font-size: 0.8em;
}

/*     9. images.    */


img.links_index{
float: left;
}

img.linksruim{
float: left;
margin: 0.5em 1em 1em 0;  
}

img.rechts{
float: right;
margin: 1em 0 1em 0.5em;
}

img.rechts_index{
float: right;
margin-top: 2.5em; 
margin-right: 1.5em;
}

p.image{
float: right;
margin: 5px 0 10px 10px;
font-style: italic;
font-size: 0.9em;
text-align: center;
}

/* in html: <p class="image"><img src="..." width="..." height="..." alt="..." title="..."><br>
onderschrift</p>
<p class="uitlijnen"> Nu volgt de tekst en tenslotte: </p>
Resultaat: de foto komt rechts te staan en de tekst wordt er vanaf links omheen en eronder gezet.
*/

p.image_links{
float: left;
margin: 5px 10px 10px 0;
font-style: italic;
font-size: 0.9em;
text-align: center;
}

/* in html: <p class="image_links"><img src="..." width="..." height="..." alt="..." title="..."><br>
onderschrift</p>
<p class="uitlijnen"> Nu volgt de tekst en tenslotte: </p>
Resultaat: de foto komt links te staan en de tekst wordt er vanaf rechts omheen en eronder gezet.
*/

/*
img.intekst {
float: right;
padding: 0;
margin: 0.5em 0 0 0.5em;
}*/

/* in html: <p class="uitlijnen"> dan een stuk tekst, daarna: <img src="..." width="..." height="..." alt="..." class="intekst"> vervolgens: rest van de tekst; tot slot: </p>
Resultaat: de afbeelding wordt omsloten door tekst.
*/


 /*    10. allerlei.     */  

/*white-space Afhandeling van witruimte binnen een element normal | pre | nowrap | pre-wrap | pre-line | inherit

.white-space{
normal;
}
 */

p.uitlijnen{
text-align: left; /* was: justify;*/
} 

.rood{
color: #CC3300;
}

.blauw{
color: #003399;
}

div.blauw{
color: #003399;
}

.blauwmotto{
color: #3366FF;
}

.streep{ 
text-decoration: underline; 
}

.vet{
font-weight: bold; 
}

.cursief{ 
font-style: italic; 
}

.Notitie{ 
font-style: italic; 
}

.rechts{
float:right;
}

div.links{
float: left;
font-size: 0.9em;
}

div.linkscurs{
float: left;
font-style: italic;
}

div.rechts{
float: right;
font-style: italic;
}

div.c{
text-align: center;
}                /*Werkt niet in Firefox */

p.center{
text-align: center;
}                /*Werkt alleen bij blokelementen */

p.generatie{
font-size: 0.9em;
color: #999999;
font-style: italic;
font-weight: bold;
letter-spacing: 0.4em;
text-align: center;
}

table.c2{
table-layout: auto;
margin: 0 0 5px 0;
}

td.c1{
background-image: url(afb.gif);
}

.letters{
letter-spacing: 0.1em;
}

blockquote.smal{
margin-left: 1.5em;
margin-right: 1.5em;
}                         

.blokje{
width: 12.5em; 
padding: 0.2em 0.6em 0.2em 0.6em;
font-weight: normal;
font-style: italic;
color: #CC3300; 
text-decoration: underline;
text-align: center;
border-top: 0.1em solid #ccc;
border-right: 0.1em solid #000;
border-bottom: 0.1em solid #000;
border-left: 0.1em solid #ccc;
}

.twee{
margin-left: 1.5em;
padding-left: 0;
list-style-image: url(rood.gif);
}

.twee li{
margin-top: 0.5em;
margin-bottom: 0.5em;
}

.drie{
margin-left: 2.5em;
padding-left: 0;
/*list-style-type: none;*/
list-style-image: url(rood.gif);
}

.drie li{
margin-top: 0.5em;
margin-bottom: 0.5em;
}

.ruimte{
margin-top: 0.5em;
margin-bottom: 0.5em;
}

.ruimte li{
margin-top: 1em;
margin-bottom: 1em;
}

.ruimer{
margin-top: 0.5em;
margin-bottom: 0.9em;
}

INPUT       { color: #CC3300; background-color: #FFFFCC; }
INPUT:focus { color: #CC3300; background-color: #FFFFCC; 
}

table.galery { border: none; }
table.galery td { border: 1px solid black; }
table.galery img { width: 87px; height: 65px; vertical-align: middle; padding: 0; margin: 0; }
table.galery img.big { width: 450px; height: 338px; }

table.galerygroot { border: none; }
table.galerygroot td { border: 1px solid black; }
table.galerygroot img { width: 119px; height: 89px; vertical-align: middle; padding: 0; margin: 0; }
table.galerygroot img.big { width: 618px; height: 464px; }


/*Het hieronder staande nog niet gebruikt in de nieuwe pagina's. */

/*



div.scheiding{
width: 100%;
height: 2px;
background-color: #FF3300;
margin: auto 0 0 0;
clear: all;
}

ul 2{
margin-left: 1.5em;
padding-left: 0;
list-style-image:url(rood.gif);
}  

.clearfix:after{
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
} 
.clearfix{
zoom: 1;
}
*/  /*conditional comment voor IE6 en 7*/

/*Gebruiken als volgt bijv.: <div class="container clearfix">*/