html{
    background-color: #efefef;
}

body {
    font-family:'verdana', 'Lucida Grande', Helvetica, Arial;
    font-size: 12px;
    color:  #3a3a3a;
    margin: 0px;
}                                                                                                                                  

.fout_blok {
    display:block;
    float:none;
    clear: none;
    width:92%; max-width:580px;
    padding:10px;
    margin:8px auto;
    color:#be0f06;
    font-weight: bold;
    background-color:#fda09c;
    border:1px solid #E5332A;
}

.goed_blok {
    display:block;
    clear: none;
    width:92%; max-width:580px;
    padding:10px;
    margin:8px auto;
    color:#229200;
    font-weight: bold;
    background-color:#c7feb6;
    border:1px solid #56e52a;
}

a.button_afrekenen {
    display:block;
    float:left;                  
    clear:none;
    width:150px;
    height:16px;
    padding:6px;
    text-align:center;
    cursor:pointer;
    font-size:14px;
    color:#ffffff;
    background:#456c89;
    border:1px solid #ffffff;
}
    
a.button_detail_bestel {
    display:block;
    float:left;
    width:218px;
    height:22px;
    padding-top:6px;
    text-align:center;
    color:#ffffff;                                             
    margin-bottom: 10px;
    cursor:pointer;
    font-weight: bold;

    background-color:#456c89;
}

.button_detail {
    display:block;
    float:left;                  
    clear:none;
    width:150px;
    height:16px;
    padding:6px;
    text-align:center;
    cursor:pointer;
    font-size:14px;
    color:#47657f;
    background:#ffffff;
    border:1px solid #47657f;
}


a.button_wijzig_wachtwoord {
    display:block;
    float:left;
    clear: none;
    width:150px;
    height:21px;
    padding-top:7px;
    text-align:center;
    color:#ffffff;
    cursor:pointer;
    font-weight: bold;

    background-color:#456c89;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.links_wit {
    color:  #ffffff ;
}

a {color:#3a3a3a;text-decoration:none;}
a:hover {text-decoration:underline;}



h1 {font-size:17px;
    margin:0px;
    padding:0px;
}

h2 {font-size:18px;
    margin:0px;
    padding:0px;
}

h4 {
    font-size:14px;
    margin: 0px;
    font-weight: bold;
}


.koptekst{
    font-weight:bold;
    font-size:14px;
    padding:5px;
    height:17px;
 } 


/*--------------------- sliders loginblok ----------------*/



    .slidingDiv{
        position:absolute; 
        height:auto;
        width:auto;
        top:17px;
        left:0px;
        padding:0 5px;
        display:none;
        z-index: 250;
        background-image: url(./img/bg_account_top.jpg);
        background-position: top;
        background-repeat: no-repeat;
        background-color:#3a3a3a;
    }

    #account_kop {
        display:block; 
        float:left;
        clear:none;
        width:180px;
        height:auto;
        padding:20px;
        overflow:visible;
        text-align:left;
        line-height: 2;
        color:#ffffff;
    }

    

    
/*--------------------- einde sliders loginblok ----------------*/




.informatie_blok {
    display:block;
    clear: none;
    width:92%; max-width:580px;
    padding:10px;
    margin:30px auto;
    font-weight: bold;
    border:2px solid #47657f;
    text-align:center;
    font-size: 16px;
}

/********************************************************/
/********************************************************/
/********************************************************/
/* --------------------- desktop ----------------------- */
/********************************************************/
/********************************************************/
/********************************************************/


@media screen and (min-width: 1024px)
{

    #page { width : 100%; overflow:hidden;}

/* --------------------- content ----------------------- */

    #content_container { 
        float:left;
        clear:both;
        width:100%;
        height:auto;
    }

    #content { 
        display:block;
        margin:10px auto;
        width:1024px;
        height:auto;
        overflow:hidden;
        background-color: #ffffff;
        box-shadow: 2px 2px 6px #bbbbbb;
    }

    .progressbar {
       display:block;
       float:left;
       clear:both;
       width:100%;
       height:auto;
       padding: 8px 0;
       margin-bottom:8px;
       border-bottom: 1px solid #777777;
    }

    .progressbar_bestelling {
       display: block;
       float:left;
       width:20%;
       font-weight: bold;
       text-align: center;
       color:#434343;
    }  

    .progressbar_bestelling_tekst {
        display: block;
    }  

    .progressbar_bestelling_tekst a{
        display: block;
        color:#434343;
        text-decoration: underline;
    }  

    .progressbar_bestelling_ico {
        display: block;
        width:20px;
        height:18px;
        margin:0 auto;
        overflow:hidden;
    }  

    .progressbar_bestelling_ico img {
        margin-left:-20px;
    }  

    .progressbar_bestelling_ico a img{
        border-bottom:1px solid #ffffff;
    }  

    .progressbar_bestellingactief {
        display: block;
        float:left;
        width:20%;
        font-weight: bold;
        text-align: center;
        color:#47657f;
    }

    .progressbar_bestellingactief_tekst {
        display: block;
        color:#47657f;
    }  

    .progressbar_bestellingactief_tekst a{
        display: block;
        color:#47657f;
    }  

    .progressbar_bestellingactief_ico {
        display: block;
        width:20px;
        height:16px;
        margin:0 auto;
        overflow:hidden;
    }  
    
    .progressbar_bestellingactief_ico img{
        margin-left:0px;
    }  

    #nieuwsbrief_container {
        display:block;
        clear: none;
        width:100%;
        height:auto;
        margin:8px auto;
        overflow:hidden;
    }    

    #nieuwsbrief_blok {
        display:block;
        clear: none;
        width:96%; max-width:680px;
        margin:0 auto;
        padding:2%;
        text-align: center;
    }

/* -------------- infopagina's -------------- */

    #info_pages_container {
        display:block;
        clear: none;
        width:100%; max-width:1280px;
        height:auto;
        margin:8px auto;
        overflow:hidden;
        background-image: url(/customized/img/bg_overzicht.png);
        background-position: left;
        background-repeat: repeat-y;
    }

    #info_menu_blok {
        display:block;
        float:left;
        clear: none;
        width:19%;
        margin:0 auto;
        padding:1% 1% 1% 2%;
        line-height: 1.7;
    }
    
    #info_pages_blok {
        display:block;
        float:left;
        clear: none;
        width:76%;
        height:auto;
        margin:0 auto;
        padding:1%;
      }

    .info_pages_blok_half {
        display:block;
        float:left;
        clear: none;
        width:48%;
        height:auto;
        margin:0 1%;
    }

    .info_pages_koptekst{
        width:100%;
        margin:4px 0;
        padding:0;
        color:#47657f;
    }
    

/* -------------- infopagina's -------------- */    
    
    
/* --------------------- einde content ----------------------- */
  
}

/********************************************************/
/********************************************************/
/********************************************************/
/* ------------------ einde desktop ------------------- */
/********************************************************/
/********************************************************/
/********************************************************/


/********************************************************/
/********************************************************/
/********************************************************/
/* --------------------- tablet ----------------------- */
/********************************************************/
/********************************************************/
/********************************************************/

@media screen and (max-width: 1023px) 
{

    .slidingDiv{
        position:absolute; 
        height:auto;
        width:auto;
        top:29px;
        left:-80px;
        padding:0 5px;
        display:none;
        z-index: 250;
        background-color:#3a3a3a;
    }

    
/* --------------------- content ----------------------- */

    #content_container { 
        float:left;
        clear:both;
        width:100%;
        height:auto;
    }

    #content { 
        display:block;
        margin:10px auto;
        width : 100%; max-width:768px;
        height:auto;
        overflow:hidden;
        padding-top:0px;
        background-color: #ffffff;
        box-shadow: 2px 2px 6px #bbbbbb;
    }

    .progressbar {
       display:block;
       float:left;
       clear:both;
       width:100%;
       height:auto;
       padding: 8px 0;
       margin-bottom:8px;
       border-bottom: 1px solid #777777;
    }

    .progressbar_bestelling {
       display: block;
       float:left;
       width:20%;
       font-weight: bold;
       text-align: center;
       color:#3a3a3a;
    }  

    .progressbar_bestelling_tekst {
        display: block;
    }  

    .progressbar_bestelling_tekst a{
        display: block;
        color:#3a3a3a;
        text-decoration: underline;
    }  

    .progressbar_bestelling_ico {
        display: block;
        width:20px;
        height:18px;
        margin:0 auto;
        overflow:hidden;
    }  

    .progressbar_bestelling_ico img {
        margin-left:-20px;
    }  

    .progressbar_bestelling_ico a img{
        border-bottom:1px solid #ffffff;
    }  

    .progressbar_bestellingactief {
        display: block;
        float:left;
        width:20%;
        font-weight: bold;
        text-align: center;
        color:#47657f;
    }

    .progressbar_bestellingactief_tekst {
        display: block;
        color:#47657f;
    }  

    .progressbar_bestellingactief_tekst a{
        display: block;
        color:#47657f;
    }  

    .progressbar_bestellingactief_ico {
        display: block;
        width:20px;
        height:16px;
        margin:0 auto;
        overflow:hidden;
    }  
    
    .progressbar_bestellingactief_ico img{
        margin-left:0px;
    }  

    #nieuwsbrief_container {
        display:block;
        clear: none;
        width:100%;
        height:auto;
        margin:8px auto;
        overflow:hidden;
    }    

    #nieuwsbrief_blok {
        display:block;
        clear: none;
        width:96%; max-width:680px;
        margin:0 auto;
        padding:2%;
        text-align: center;
    }

/* -------------- infopagina's -------------- */

    #info_pages_container {
        display:block;
        clear: none;
        width:100%; max-width:1280px;
        min-height:500px;
        margin:8px auto;
        overflow:hidden;
    }

    #info_menu_blok {
        display:block;
        float:left;
        clear: none;
        width:19%;
        margin:0 auto;
        padding:1% 1% 1% 2%;
        line-height: 1.7;
    }
    
    #info_pages_blok {
        display:block;
        float:left;
        clear: none;
        width:76%;
        height:auto;
        margin:0 auto;
        padding:1%;
      }

    .info_pages_blok_half {
        display:block;
        float:left;
        clear: none;
        width:48%;
        height:auto;
        margin:0 1%;
    }

    .info_pages_koptekst{
        width:100%;
        margin:4px 0;
        padding:0;
        color:#47657f;
    }

    .info_pages_koptekst a{
        color:#47657f;
    }
/* --------------------- einde content ----------------------- */

    .image-link-column { 
        display:block;
        float:left;
        clear:none;
        width : 98%;
        height:auto;
        margin:1%;
        text-align: center;
        overflow:hidden; 
    }

    .image-link { 
        display:block;
        float:left;
        clear:none;
        width : 23%;
        height:auto;
        padding:2% 1%;
    }

    .image-link img{ 
        display:block;
        max-width: 100%;
        height: auto;
        margin:auto;
    }
  
    


}  

/********************************************************/
/********************************************************/
/********************************************************/
/* ------------------ einde tablet -------------------- */
/********************************************************/
/********************************************************/
/********************************************************/


/********************************************************/
/********************************************************/
/********************************************************/
/* --------------------- tussenmaat ----------------------- */
/********************************************************/
/********************************************************/
/********************************************************/

@media screen and (max-width: 767px) 
{
    .slidingDiv{
        position:absolute; 
        height:auto;
        width:auto;
        top:29px;
        left:-150px;
        padding:0 5px;
        display:none;
        z-index: 250;
        background-color:#3a3a3a;
    }

/* -------------- infopagina's -------------- */
    #info_pages_container {
        display:block;
        clear: none;
        width:96%; 
        height:auto;
        margin:8px auto;
        padding:0 2%;
        overflow:hidden;
        background-color: #ffffff;
    }

    #info_menu_blok {
        display:block;
        float:left;
        clear: none;
        width:98%;
        margin:0 auto;
        padding:1%;
        line-height: 1.7;
        border-bottom:1px solid #d0d0d0;
    }
    
    #info_pages_blok {
        display:block;
        float:left;
        clear: none;
        width:100%;
        height:auto;
        margin:0 auto;
      }

    .info_pages_blok_half {
        display:block;
        float:left;
        clear: none;
        width:48%;
        height:auto;
        margin:0 1%;
    }

    .info_pages_koptekst{
        width:100%;
        margin:4px 0;
        padding:0;
        color:#47657f;
    }

    .info_pages_koptekst a{
        color:#47657f;
    }
/* -------------- infopagina's -------------- */    

    .image-link-column { 
        display:block;
        float:left;
        clear:none;
        width : 98%;
        height:auto;
        margin:1%;
        text-align: center;
        overflow:hidden; 
    }

    .image-link { 
        display:block;
        float:left;
        clear:none;
        width : 48%;
        height:auto;
        padding:1%;
    }

    .image-link img{ 
        display:block;
        max-width: 100%;
        height: auto;
        margin:auto;
    }
  
    

}  

/********************************************************/
/********************************************************/
/********************************************************/
/* ------------------ einde tussenmaat -------------------- */
/********************************************************/
/********************************************************/
/********************************************************/



/********************************************************/
/********************************************************/
/********************************************************/
/* --------------------- mobile ----------------------- */
/********************************************************/
/********************************************************/
/********************************************************/

@media screen and (min-width: 320px) and (max-width: 479px)
{
   #page { width : 100% }

   
/* --------------------- content ----------------------- */

    #content_container { 
        float:left;
        clear:both;
        width:100%;
        height:auto;
    }

    #content { 
        display:block;
        margin:10px auto;
        width : 100%;
        height:auto;
        overflow:hidden; 
    }
  
    .progressbar {
       display:block;
       float:left;
       clear:both;
       width:100%;
       height:auto;
       padding: 8px 0;
       margin-bottom:8px;
       border-bottom: 1px solid #777777;    }

    .progressbar_bestelling {
       display: block;
       float:left;
       width:20%;
       font-weight: bold;
       text-align: center;
       color:#ffffff;
    }  

    .progressbar_bestelling_tekst {
        display:none;
    }  

    .progressbar_bestelling_tekst a{
        display:none;
    }  

    .progressbar_bestelling_ico {
        display: block;
        width:20px;
        height:18px;
        margin:0 auto;
        overflow:hidden;
    }  

    .progressbar_bestelling_ico img {
        margin-left:-20px;
    }  

    .progressbar_bestelling_ico a img{
        border-bottom:1px solid #ffffff;
    }  

    .progressbar_bestellingactief {
        display: block;
        float:left;
        width:20%;
        font-weight: bold;
        text-align: center;
        color:#47657f;
    }

    .progressbar_bestellingactief_tekst {
        display:none;
    }  

    .progressbar_bestellingactief_tekst a{
        display:none;
    }  

    .progressbar_bestellingactief_ico {
        display: block;
        width:20px;
        height:16px;
        margin:0 auto;
        overflow:hidden;
    }  
    
    .progressbar_bestellingactief_ico img{
        margin-left:0px;
    }  

    .omruilen_selectie_blok {
        display:block;
        clear: both;
        width:302px;
        min-height:40px;
        margin:0 auto;
        padding-top:11px;
        color:#434343;
        font-weight: bold;
        padding:8px;
        border-radius: 8px;
        background-color:#c7feb6;
        border:1px solid #56e52a;
    } 
     
    .omruilen_selectie_mededeling {
        display:block;
        float:left;
        clear: none;
        width:100%;
        margin-right:0px;
        margin-bottom:10px;
        line-height: 20px;
        color:#434343;
        font-weight: bold;
    } 

    .omruilen_selectie_button {
        display:block;
        clear: none;
        width:175px;
        height:40px;
        margin:0 auto;
        overflow:hidden;
    } 
     
/* -------------- infopagina's -------------- */
    #info_pages_container {
        display:block;
        clear: none;
        width:96%; 
        height:auto;
        margin:8px auto;
        padding:0 2%;
        overflow:hidden;
        background-color: #ffffff;
    }

    #info_menu_blok {
        display:block;
        float:left;
        clear: none;
        width:98%;
        margin:0 auto;
        padding:1%;
        line-height: 1.7;
        border-bottom:1px solid #d0d0d0;
    }
    
    
    #info_pages_blok {
        display:block;
        float:left;
        clear: none;
        width:100%;
        height:auto;
        margin:0 auto;
      }

    .info_pages_blok_half {
        display:block;
        float:left;
        clear: none;
        width:98%;
        height:auto;
        margin:1%;
    }

    .info_pages_koptekst{
        width:98%;
        margin:4px 0;
        padding:0 1%;
        color:#47657f;
    }

    .info_pages_koptekst a{
        color:#47657f;
    }
    #wachtwoord_container {
        display:block;
        clear: none;
        width:100%;
        height:auto;
        margin:8px auto;
        overflow:hidden;
    }

    #wachtwoord_blok {
        display:block;
        clear: none;
        width:96%;
        margin:0 auto;
        padding:2%;
        text-align: center;
    }

    #nieuwsbrief_container {
        display:block;
        clear: none;
        width:100%;
        height:auto;
        margin:8px auto;
        overflow:hidden;
    }

    #nieuwsbrief_blok {
        display:block;
        clear: none;
        width:96%; ;
        margin:0 auto;
        padding:2%;
        text-align: center;
    }

    
/* -------------- infopagina's -------------- */    


/* --------------------- einde content ----------------------- */

    .image-link-column { 
        display:block;
        float:left;
        clear:none;
        width : 98%;
        height:auto;
        margin:1%;
        text-align: center;
        overflow:hidden; 
    }

    .image-link { 
        display:block;
        float:left;
        clear:none;
        width : 98%;
        height:auto;
        padding:2% 1%;
    }

    .image-link img{ 
        display:block;
        max-width: 100%;
        height: auto;
        margin:auto;
    }
  
    
   
}  

/********************************************************/
/********************************************************/
/********************************************************/
/* ------------------ einde mobiel -------------------- */
/********************************************************/
/********************************************************/
/********************************************************/