/*************************************************************************
 *
 * Ontwikkeld door: Creative Dimension (http://www.creativedimension.be) 
 * In opdracht van: Joris Bleeker (http://www.jorisbleeker.nl)
 * Auteur: Ilvy Fauvarque (ilvy@creativedimension.be)
 * 
 * Deze code mag dienen als hulp of inspiratie maar mag niet exact
 * gekopieerd worden met de benodigde afbeeldingen zonder de geschreven
 * toestemming van Joris Bleeker (info@jorisbleeker.nl) 
 *
 ************************************************************************/

/**********************
 * WINKELMAND
 *********************/
 
#winkelmand {
background-color: #f0f1f1;
padding: 20px;
width: 897px; /*897*/
}

   /**********************
    * WINKELMAND MENU
    *********************/
   
   #winkelmand ul.header {
   background: url('/images/winkelmand_ul.png') no-repeat;
   background-position: bottom;
   height: 39px;
   list-style-type: none;
   width: 897px;
   }
   
      #winkelmand ul.header li {
      background: url('/images/winkelmand_tab.png') no-repeat;
      color: #3f3f41;
      display: inline;
      float: left;
      font-weight: bold;
      height: 20px; /*28*/
      margin-right: 3px;
      padding: 8px 0px 0px 15px;
      width: 206px; /*221*/
      }
      
         #winkelmand ul.header li span {
         color: #1c2f81;
         }
         
         #winkelmand ul.header li.actief {
         background: url('/images/winkelmand_tab_actief.png') no-repeat;
         color: white;
         }
         
   /**********************
    * WINKELMAND INHOUD
    *********************/
    
    #winkelmand_inhoud {
    background: url('/images/winkelmand_inhoud.png') repeat-y;
    padding: 30px;
    width: 837px; /*897*/
    }
    
      #winkelmand_inhoud table {
      width: 837px;
      }
      
         #winkelmand_inhoud tr {
         height: 50px;
         }
         
            #winkelmand_inhoud tr td {
            border-bottom: 1px solid #cfcfcf;
            }
            
               #winkelmand_inhoud tr.geen_border td {
               border: 0px;
               }            
            
            #winkelmand_inhoud tr td.kolom1 {
            width: 55px;
            }
            
            #winkelmand_inhoud tr td.border_top {
            border-top: 2px solid #58595a;
            }
            
            #winkelmand_inhoud tr td span {
            font-size: 14px;
            }  
            
               #winkelmand_inhoud tr td span.klein {
               font-size: 11px;
               }  
               
            #winkelmand_inhoud tr td input {
            border: 1px solid #c7c7c8;
            height: 18px;
            margin: 0px 10px 0px 10px;
            padding-left: 5px;
            width: 103px; /*108*/
            }                          
            
            #winkelmand_inhoud tr td select {
            border: 1px solid #999999;
            color: #1f1e21;
            height: 20px;
            width: 100px;
            }
            
               #winkelmand_inhoud tr td select.klein {
               width: 50px;
               }
               
               #winkelmand_inhoud tr td select.margin {
               margin: 0px 10px 0px 10px;
               }                             
            
            #winkelmand_inhoud tr td a.verwijder {
            background: url('/images/icon_verwijder.png') no-repeat;
            display: block;
            float: right;
            height: 16px;
            margin-right: 20px;
            width: 17px;
            }    
            
               #winkelmand_inhoud tr td a.verwijder:hover {
               background: url('/images/icon_verwijder_hover.png') no-repeat;
               }    
               
               #winkelmand_inhoud tr td a.verwijder span {
               display: none;
               }  
               
            #winkelmand_inhoud tr td a.pijl_rechts.actiecode {
            color: #1c2f81;
            background-position: right;
            font-size: 14px;
            padding-right: 30px;
            text-decoration: none;
            }      
            
               #winkelmand_inhoud tr td a.pijl_rechts.actiecode:hover {
               text-decoration: underline;
               }    
               
      #winkelmand_totaal {
      border-top: 2px solid #58595a;
      color: #1f1e21;
      font-size: 14px;
      font-weight: bold;
      margin-left: 610px;
      padding: 5px 5px 0px 5px;
      width: 150px;
      } 
      
         #winkelmand_totaal span {
         margin-right: 25px;
         text-align: right;
         width: 70px;
         float: right;
         display: block;
         }                                                 
    
   /**********************
    * WINKELMAND FOOTER
    *********************/
    
    #winkelmand_footer {
    background: url('/images/winkelmand_footer.png') no-repeat;
    height: 65px; /*80*/
    padding: 15px 30px 0px 30px;
    width: 837px; /*897*/
    }
    
      #winkelmand_knoppen {
      display: inline;
      float: right;
      width: 390px;
      }  
       
         #winkelmand_knoppen span {
         float: right;
         font-size: 11px;
         margin: 5px 115px 0px 0px;
         }
       
         #winkelmand_knoppen a {
         float: left;
         }  
         
            #winkelmand_knoppen a.verder_winkelen {
            margin: 5px 15px 0px 0px;
            } 
            
   /**********************
    * WINKELMAND INFO
    *********************/
    
    #winkelmand_info {
    margin-top: 20px;
    width: 837px;
    }            
    
      #winkelmand_info .kolom_info {
      display: inline;
      float: left;
      margin-right: 30px;
      width: 220px;
      }   
   
         #winkelmand_info .kolom_info ul {
         background: none;
         list-style-type: none;
         margin: 0px;
         padding: 0px;
         }    
         
            #winkelmand_info .kolom_info ul li {
            background: url('/images/icon_vink_grijs.png') no-repeat;
            background-position: 0px 3px;
            margin: 10px 0px 0px 0px;
            padding: 0px 0px 0px 15px;
            }    
            
         #winkelmand_info .kolom_info img {
         margin-top: 15px;
         }      
         
/**********************
 * STAP 1
 *********************/
 
#stap1 {
background: url('/images/winkelmand_inhoud.png') repeat-y;
padding: 30px;
width: 837px; /*897*/
}

   #stap1 a.pijl_rechts.stap2 {
   background-position: right;
   color: #1c2f81;
   font-weight: bold;
   padding: 0px 35px 0px 0px;
   }

   #stap1 h1 {
   color: #58595a;
   margin: 0px 0px 10px 20px;
   }
   
   .stap1_invoer {
   background-color: #f0f1f1;
   border: 1px solid #bcbcbd;
   padding: 10px 15px 10px 15px;    
   }
   
   .stap1_invoer.stap2 {
   height: 260px; 
   }
   
   .stap1_invoer dl {
   margin-top: 10px;
   width: 276px; /*306*/ 
   }
      
      .stap1_invoer dl.aflever {
      width: 240px;
      }
      
         .stap1_invoer dl.aflever dt {
         width: 90px;
         } 
         
         .stap1_invoer dl.aflever dd {
         width: 150px;
         }         
   
      .stap1_invoer dl dt {
      display: inline;
      float: left;
      height: 17px; /*20*/
      margin-bottom: 10px;
      padding-top: 3px;
      width: 108px;
      }
      
      .stap1_invoer dl dd {
      display: inline;
      float: left;
      height: 20px;
      margin-bottom: 10px;
      width: 168px;
      }  
      
         .stap1_invoer dl dd input {
         border: 1px solid #c7c7c8;
         height: 18px;
         padding-left: 3px;
         width: 163px; /*166*/
         } 
         
         .stap1_invoer dl dd select {
         border: 1px solid #c7c7c8;
         height: 20px;
         width: 168px;
         } 

      .stap1_invoer dl.stap2 dd {
      font-weight: bold;
      padding-top: 3px;
      height: 17px;
      }             
         
      .stap1_invoer input.checkbox {
      display: inline;
      float: left;
      margin-right: 10px;
      }           
      
      .stap1_invoer span {
      float: left;
      font-weight: bold;
      }  
      
      #stap1_checkboxen {
      margin-top: 270px;
      position: absolute;
      width: 300px;
      }      
      
         #stap1_checkboxen input {
         display: inline;
         float: left; 
         margin-right: 10px;     
         }
         
            #stap1_checkboxen span {
            display: inline;
            float: left;
            font-weight: bold;
            }
            
               #stap1_checkboxen span a {
               color: #2d4f9d;
               }

   #stap1_links {
   display: inline;
   float: left;
   margin: 0px 15px 15px 0px;
   width: 308px;
   }
   
      #stap1_links span.klein {
      font-size: 10px;
      }
   
   #stap1_rechts {
   display: inline;
   float: left;
   margin-right: 15px;
   }   

   /**********************
    * STAP 1 FOOTER
    *********************/    
       
      #stap1_footer {
      float: right;
      }  
      
/**********************
 * STAP 2
 *********************/ 

#stap2_controle {
display: inline;
float: left;
margin-top: 25px;
width: 227px;
}   

   #stap2_controle p {
   margin-top: 10px;
   }     
   
#stap2_bestelling {
background-color: #f0f1f1;
border: 1px solid #bcbcbd;
padding: 10px 15px 10px 15px; 
}  

   #stap2_bestelling table {
   margin-top: 10px;
   width: 790px;
   }    
   
      #stap2_bestelling table tr {
      height: 25px;
      }
      
      #stap2_bestelling table tr.geen_border td {
      border: 0px;
      }
      
         #stap2_bestelling table tr td {
         border-bottom: 1px solid #cfcfcf;
         }   
         
   #stap2_totaal {
   border-top: 2px solid #58595a;
   float: right;
   font-size: 14px;
   font-weight: bold;
   margin: 0px 17px 0px 0px;
   padding-top: 10px;
   text-align: right;
   width: 130px;
   }   
   
      #stap2_totaal span {
      margin-left: 20px;
      }   
      
/**********************
 * STAP 3
 *********************/  

#stap3 {
border: 1px solid #c7c7c7;
margin: 0 auto;
padding: 20px 0px 20px 50px;
width: 390px;
} 

   #stap3 a.betalen {
   background: url('/images/logo_ideal.png') no-repeat;
   background-position: center top;
   color: #425699;
   display: block;
   font-size: 14px;
   font-weight: bold;
   float: left;
   height: 44px;
   margin-right: 50px;
   padding-top: 60px;
   text-align: center;
   width: 80px;
   }
   
   #stap3 a.betalen.giropay {
   background: url('/images/giropay.png') no-repeat;
   height: 41px;
   width: 87px;
   }      
   
   #stap3 a.betalen.mastercard {
   background: url('/images/logo_mastercard.png') no-repeat;
   height: 41px;
   }   
   
   #stap3 a.betalen.visa {
   background: url('/images/logo_visa.png') no-repeat;
   height: 40px;
   width: 65px;
   }   
   
   #stap3 p {
   margin-top: 10px;
   } 
   
   #stap3_annuleren {
   margin: 0 auto;
   margin-top:  15px;
   width: 440px;   
   }     
   
      #stap3_annuleren a {
      color: #425699;
      font-weight: bold;
      }