﻿
/*
   ----- CSS telweekend VVB
   ----- opgekuist voor VVB door Christophe
*/


/* opmaak voor gehele 'grafische' invulformulier (incl. afbeelding) */
#grafisch_invulformulier
{
 /*   margin-top: -10px;*/
    position: relative;
    background: url( '../images/invulformulier_weekend2012.png' );
    height: 1708px;
    background-repeat: no-repeat;
    margin-left: -30px;
    margin-right: -30px;
}

#validatie_samenvatting { margin-left:10px; margin-top:15px; clear:left; }
#knop_verzend_formulier { margin-left:15px; position:absolute; top:1623px; left:40px; height:30px; }

/* positionering-parameters voor vinkjes */
.vinkje
{
    position: absolute;
    border: 0px solid red; /* evt. op 1px zetten om positionering vinkjes na te kijken */
    padding-left: 1px;
    padding-top: 2px;
}

/* Algemene opmaak vr textboxes */
.vogelsoorten, .tekst_invulbox
{
    position: absolute;
    color: blue;
    height: 16px;
}
        
.vogelsoorten /* Tekstbox voor invullen aantal per soort */
{
    text-align: right;
    width: 200px;
    margin-left: 30px; /* plaats voor fout-icoontje */
    border: 0px solid red;
}

.tekst_invulbox /* Tekstbox 'algemeen': voor invullen naam, email, busnr ... */
{
    text-align: left;
    width: 81px;
    border: 1px solid #cccccc;
}

/* Plaatsing personalia */
.postcode, .gemeenteselectie, .straatselectie
{ position: absolute; color: blue; border:1px solid #cccccc; }

.gemeenteselectie, .straatselectie
{ text-align: left; margin-right: 10px; }

.postcode { top:1364px;left:290px; }
.gemeenteselectie { width: 240px; top: 1364px; left: 355px; }
.straatselectie   { width: 305px; top: 1391px; left: 290px; }

/* Plaatsing validators voor aantallen per soort */
#validator_soort1, #validator_soort2, #validator_soort3, #validator_soort4, #validator_soort5, #validator_soort6,
#validator_soort7, #validator_soort8, #validator_soort9, #validator_soort10, #validator_soort11, #validator_soort12,
#validator_soort13, #validator_soort14, #validator_soort15, #validator_soort16, #validator_soort17, 
#validator_soort18, #validator_soort19, #validator_soort20, #validator_soort21, #validator_soort22
{ position: absolute; }

#validator_soort1  { top:110px; left:234px; }
#validator_soort2  { top:135px; left:234px; }
#validator_soort3  { top:160px; left:234px; }
#validator_soort4  { top:184px; left:234px; }
#validator_soort5  { top:208px; left:234px; }
#validator_soort6  { top:233px; left:234px; }
#validator_soort7  { top:258px; left:234px; }
#validator_soort8  { top:282px; left:234px; }
#validator_soort9  { top:306px; left:234px; }
#validator_soort10 { top:330px; left:234px; }
#validator_soort11 { top:355px; left:234px; }
#validator_soort12 { top:380px; left:234px; }
#validator_soort13 { top:405px; left:234px; }
#validator_soort14 { top:429px; left:234px; }
#validator_soort15 { top:453px; left:234px; }
#validator_soort16 { top:477px; left:234px; }
#validator_soort17 { top:502px; left:234px; }
#validator_soort18 { top:527px; left:234px; }
#validator_soort19 { top:551px; left:234px; }
#validator_soort20 { top:575px; left:234px; }
#validator_soort21 { top:600px; left:234px; }
#validator_soort22 { top:822px; left:234px; }

/* Plaatsing custom validators 'tuin' */
#custom_val_tuintype, #custom_val_tuinligging, #custom_val_tuinomgeving, #custom_val_tuingrootte 
{ position: absolute; }

#custom_val_tuintype     { top:872px; left:13px; }
#custom_val_tuinligging  { top:872px; left:112px; }
#custom_val_tuinomgeving { top:872px; left:462px; }
#custom_val_tuingrootte  { top:872px; left:728px; }

/* Plaatsing (onder meer custom) validators 'personalia' */

#validator1_naam, #validator2_naam, #custom_val_adres, #validator1_busnr, #validator2_busnr, 
#validator_busletter, #validator_email
{ position: absolute; }

#validator1_naam, #validator2_naam   { top:1335px; left:272px; }
#validator1_busnr, #validator2_busnr { top:1391px; left:712px; }
#custom_val_adres    { top:1364px; left:272px; }  
#validator_busletter { top:1391px; left:793px; }
#validator_email     { top:1420px; left:272px; }

/* Selectie vrije soorten */

.zoeksoorten
{ width:173px; margin-top:20px; }

#sugg_extra_soort1, #sugg_extra_soort2, #sugg_extra_soort3, #sugg_extra_soort4,
#sugg_extra_soort5, #sugg_extra_soort6, #sugg_extra_soort7, #sugg_extra_soort8
{ position: absolute; width:305px; }

#sugg_extra_soort1 { top: 649px; left: 36px; }
#sugg_extra_soort2 { top: 674px; left: 36px; }
#sugg_extra_soort3 { top: 699px; left: 36px; }
#sugg_extra_soort4 { top: 724px; left: 36px; }
#sugg_extra_soort5 { top: 748px; left: 36px; }
#sugg_extra_soort6 { top: 772px; left: 36px; }
#sugg_extra_soort7 { top: 796px; left: 36px; }
/* #sugg_extra_soort8 { top: 796px; left: 36px; } */

#validator_extra_soort1, #validator_extra_soort2, #validator_extra_soort3,
#validator_extra_soort4, #validator_extra_soort5, #validator_extra_soort6,
#validator_extra_soort7, #validator_extra_soort8,
#rqvalidator_extra_soort1, #rqvalidator_extra_soort2, #rqvalidator_extra_soort3,
#rqvalidator_extra_soort4, #rqvalidator_extra_soort5, #rqvalidator_extra_soort6,
#rqvalidator_extra_soort7, #rqvalidator_extra_soort8
{
    position: absolute;
}

#validator_extra_soort1, #rqvalidator_extra_soort1 { top: 649px; left: 234px; }
#validator_extra_soort2, #rqvalidator_extra_soort2  { top: 674px; left: 234px; }
#validator_extra_soort3, #rqvalidator_extra_soort3  { top: 699px; left: 234px; }
#validator_extra_soort4, #rqvalidator_extra_soort4  { top: 724px; left: 234px; }
#validator_extra_soort5, #rqvalidator_extra_soort5  { top: 748px; left: 234px; }
#validator_extra_soort6, #rqvalidator_extra_soort6  { top: 772px; left: 234px; }
#validator_extra_soort7, #rqvalidator_extra_soort7  { top: 796px; left: 234px; }
/* #validator_extra_soort8, #rqvalidator_extra_soort8  { top: 796px; left: 234px; } */

.suggest_link 
{
	background-color: #ffffff;
	padding: 2px 6px 2px 6px;
}
.suggest_link_over 
{
	background-color: #3366CC;
	padding: 2px 6px 2px 6px;
}

#opmerkingen_veld
{
    position: absolute; left: 45px; top:1483px; color: blue; width:900px; height:120px;
    border:0px solid white;
}


/* Cross-browser fancy buttons */
/* BUTTONS */

.buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

 /*   font-family:Arial, Verdana, sans-serif; */
    font-size:130%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; 
}

.buttons button
{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}

.buttons button[type]
{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}

*:first-child+html button[type]
{
    padding:4px 10px 3px 7px; /* IE7 */
}

.buttons button img, .buttons a img
{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* STANDARD */

button:hover, .buttons a:hover
{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}

.buttons a:active
{
    background-color:#6299c5;
   border:1px solid #6299c5; 
    color:#fff;
}

/* POSITIVE */

button.positive, .buttons a.positive
{
    color:#529214;
}

.buttons a.positive:hover, button.positive:hover
{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}

.buttons a.positive:active
{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}



