* { margin: 0px; padding: 0px; outline-style: none; }

html {
  height: 100%;
}

body{
  height: 100%;
  background-color: #f6f6f6;
}

img a, a img{
  border: 0px;
}

#site {
  position: relative;
  padding: 0px 0px;
  margin: 0px auto;
  width: 650px;
  min-height: 600px;
  height: auto !important;
  height: 600px;
  font: 12px arial, verdana, sans-serif;  
  border: 0px solid #efefef;
  background-color: #fff;  
}

#site a:link, #site a:visited {
   color: #000;
}

#site a:hover {
  color: #018b33;
}


/* -------------------- Header -------------------- */

#header{
  position: relative;
  width: 650px;
  height: 115px;
}

#header .logo{
  width: 162px;
  height: 115px;
  float: left;
}

#header .logout {
  display: none;
}

#header .page_description{
  position: absolute;
  padding: 0px 10px 0px 0px;
  height: 25px;
  font: 20px arial, verdana, sans serif;
  color: #c0c0c0;
  line-height: 25px;
  float: right;
  text-align: right;
  bottom: 6px;
  right: 0px;
}

#print_header{
  display: none;
}

/* -------------------- Search --------------------- */

#search{
  display: none;
}

/* -------------------- Login -------------------- */

#login h3{
  margin: 20px 0px 7px 20px;  
}

#login .login_content{
  padding: 20px 0px 0px 0px;
  margin: 0px;
  height: 1px;
  width: 810px;
  min-height: 110px;
  height: auto !important;
  height: 110px;
  font-size: 0px;
  line-height: 0px;
  border-top: 1px solid #efefef;
  background-color: #f6f6f6;  
}

#login input.login{
  margin: 5px 10px 5px 8px;
  padding: 0px 0px;
  width: 115px;
  height: 15px;
  font: 10px arial, verdana, sans serif;
  color: #000000;
  font-weight: bold;
  border: 0px;  
}

#login input.submit{
  margin: 0px 0px 0px 10px;  
  width: 130px;
  height: 27px;
  border: 0px;
  background: url(pics/versturen.gif) no-repeat;    
}

#login .description{
  padding: 5px 10px 0px 0px;
  margin: 0px 0px 0px 20px;
  width: 80px;
  height: 25px;
  overflow: hidden;
  font: 11px arial, verdana, sans serif;
  font-weight: bold;
  color: #018b33;
  float: left;
  display: inline;
  text-align: right;
}

#login .value{
  margin: 0px 6px;
  padding: 0px 10px;
  height: 22px;
  width: 125px;
  float: left;
  font: 11px arial, verdana, sans serif;
  color: #000000;
  font-weight: bold;
  border: 0px;    
  background: url(pics/bg_search_input_small.jpg) top right no-repeat; 
}

#login .value_button{
  padding: 0px 10px;
  height: 22px;
  width: 125px;
  float: left;
  font: 11px arial, verdana, sans serif;
  color: #000000;
  font-weight: bold;
  border: 0px;    
}

/* -------------------- Table -------------------- */

#table{
  width: 650px;
  padding: 0px 0px 25px 0px;
  margin-bottom: 25px;
  background-color: #fff;
  border: 1px solid #666666; 
}

#table .table_header{
  padding: 0px 0px 0px 10px;
  margin: 0px 0px 0px 0px;
  height: 30px;
  font: 11px arial, verdana, sans serif;
  font-weight: bold;
  color: #ffffff;
  background: #018b33 url(pics/bg_table_header.jpg) bottom left no-repeat;
  border-bottom: 1px solid #666666;     
}

#table .table_header a:link, #table .table_header a:visited{
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;  
}

#table .rows{
  font: 11px arial, verdana, sans serif;
  font-weight: bold;
  color: #000;
  line-height: 30px;  
}

#table .rows a:link, #table .rows a:visited {
   color: #000;
}

#table .rows a:hover {
  color: #018b33;
}

#table .row_even{
  padding: 0px 10px;
  width: 630px;
  min-height: 30px;
  height: auto !important;
  height: 30px;
  border-bottom: 1px solid #c0c0c0;
  background-color: #fff;
}

#table .row_uneven{
  padding: 0px 10px;
  width: 630px;
  min-height: 30px;
  height: auto !important;
  height: 30px;
  border-bottom: 1px solid #c0c0c0;  
  background-color: #f5f5f5;
}

#table .rows .hover, #table .rows .hover{
  background-color: #e7e6e6;  
}

#table .table_header .achternaam, #table .table_header .voorletters, #table .table_header .adres,
#table .table_header .postcode, #table .table_header .woonplaats, 

#table .table_header .datum, #table .table_header .omschrijving, #table .table_header .resterend_kg
{
  padding: 0px 10px;
  margin: 0px 0px 0px 0px;
  line-height: 30px;
  float: left;
  display: inline;
  background: url(pics/stripe.jpg) top right no-repeat; 
  /*cursor: pointer;*/
}

#table .table_header .extra  {
  padding: 0px 10px;
  margin: 0px 0px 0px 0px;
  line-height: 30px;
  float: right;
  display: inline;
  background: url(pics/stripe.jpg) top right no-repeat;  
}

img.sorteren{
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 0px;
  line-height: 0px;
}

#table .table_header .achternaam_current, #table .table_header .voorletters_current, 
#table .table_header .adres_current, #table .table_header .postcode_current, #table .table_header .woonplaats_current,

#table .table_header .datum_current, #table .table_header .aankoop_kg_current, #table .table_header .bedrag_current,
#table .table_header .afgehaald_kg_current, #table .table_header .resterend_kg_current
{
  position: relative;
  padding: 0px 10px;
  margin: 0px 0px 0px 0px;
  line-height: 30px;
  float: left;
  display: inline;
  background: #018b33 url(pics/bg_tableheader_current.jpg) bottom left repeat-x;  
  cursor: pointer;
}

#table .table_header .extra, #table .table_header .resterend_kg{
  background: none;
  display: none;
}

#table .row_even a, #table .row_uneven a {
  text-decoration: none;
}

#table .row_even .achternaam, #table .row_even .voorletters, #table .row_even .adres,
#table .row_even .postcode, #table .row_even .woonplaats, 
#table .row_uneven .achternaam, #table .row_uneven .voorletters, #table .row_uneven .adres,
#table .row_uneven .postcode, #table .row_uneven .woonplaats, 

#table .row_even .datum, #table .row_even .omschrijving, #table .row_even .resterend_kg,
#table .row_uneven .datum, #table .row_uneven .omschrijving, #table .row_uneven .resterend_kg
{
  margin: 0px 0px 0px 0px;
  padding: 0px 10px;
  line-height: 30px;
  float: left;
  font-weight: normal;
  display: inline;
}

#table .row_even .extra, #table .row_uneven .extra {
  display: none;
}

#table .achternaam, #table .achternaam_current{
  width: 150px;
}

#table .voorletters, #table .voorletters_current{
  width: 85px;
}

#table .adres, #table .adres_current{
  width: 165px;
}

#table .postcode, #table .postcode_current{
  width: 75px;
}

#table .woonplaats, #table .woonplaats_current{

}

#table .datum, #table .datum_current{
  width: 85px;
}

#table .omschrijving, #table .omschrijving_current{
  width: 250px;
}

#table .resterend_kg, #table .resterend_kg_current{
  width: 70px;
}


#table .row_uneven .extra, #table .row_even .extra{
  display: none;
}



#table .table_header .achternaam img.sorteren, #table .table_header .voorletters img.sorteren, #table .table_header .adres img.sorteren,
#table .table_header .postcode img.sorteren, #table .table_header .woonplaats img.sorteren,

#table .table_header .datum img.sorteren, #table .table_header .aankoop_kg img.sorteren, #table .table_header .bedrag img.sorteren,
#table .table_header .afgehaald_kg img.sorteren, #table .table_header .resterend_kg img.sorteren
{
  display: none;
}

#table .table_header .achternaam_current img.sorteren, #table .table_header .voorletters_current img.sorteren, 
#table .table_header .adres_current img.sorteren, #table .table_header .postcode_current img.sorteren, #table .table_header .woonplaats_current img.sorteren,

#table .table_header .datum_current img.sorteren, #table .table_header .aankoop_kg_current img.sorteren, #table .table_header .bedrag_current img.sorteren,
#table .table_header .afgehaald_kg_current img.sorteren, #table .table_header .resterend_kg_current img.sorteren
{
  display: block;
}

h1, td h1 {font: 19px arial, verdana, sans-serif; font-weight: bold; color: #999999; margin-bottom: 7px;}
h2, td h2 {font: 17px arial, verdana, sans-serif; font-weight: bold; color: #999999; margin-bottom: 7px;}
h3, td h3 {font: 15px arial, verdana, sans-serif; font-weight: bold; color: #999999; margin-bottom: 7px;}
h4, td h4 {font: 14px arial, verdana, sans-serif; font-weight: bold; color: #999999; margin-bottom: 7px;}
h5, td h5 {font: 13px arial, verdana, sans-serif; font-weight: bold; color: #999999; margin-bottom: 7px;}
h6, td h6 {font: 12px arial, verdana, sans-serif; font-weight: bold; color: #999999; margin-bottom: 7px;}

ul { margin: 10px 0px 10px 15px; list-style-type: disc;}
li { margin: 0px 0px 0px 15px;}
ol { margin: 10px 0px 10px 20px;}

br.clear{height: 0px; font-size: 0px; line-height: 0px; clear: both}
div.clear{height: 0px; font-size: 0px; line-height: 0px; clear: both}

/* -------------------- AddUser ------------------ */

#add_user_button {
 display: none;
 padding: 5px 0px 5px 10px; 
}

#add_user_button img {
  cursor: pointer;
}

#add_User{
  position: relative;
}

#add_User h3{
  padding: 20px 20px 0px 20px;
}

#add_User .form{
  padding: 0px 0px 0px 0px;
  margin: 0px;
  height: 1px;
  width: 650px;
  min-height: 180px;
  height: auto !important;
  height: 180px;
  font-size: 0px;
  line-height: 0px;
  border-top: 1px solid #efefef;
  background-color: #f6f6f6;
}

#add_User .form .block_left{
  padding: 20px;
  width: 335px;
  float: left;
}

#add_User .form .block_right{
  padding: 20px 0px 20px 20px;
  width: 322px;
  float: right;
}

#add_User .form .description{
  padding: 4px 10px 0px 0px;
  margin: 0px;
  width: 80px;
  overflow: hidden;
  font: 11px arial, verdana, sans serif;
  font-weight: bold;
  color: #018b33;
  float: left;
  text-align: right;
}


#add_User .form .block_right .value select{
  padding:0px;
  margin: 0px 0px 10px 0px;
  width: 252px;
  border: 1px solid #506a20;
}

#add_User .form .value input.add_user{
  width: 150px;
  height: 15px;
  font: 10px arial, verdana, sans serif;
  color: #000000;
  font-weight: bold;
  border: 0px;
}

#add_User .form .value {
  padding: 5px 10px;
  width: 202px;
  height: 22px;
  float: left;
  font: 10px arial, verdana, sans serif;
  color: #000000;
  font-weight: bold;
  border: 0px;
  background: url(pics/bg_search_input.jpg) no-repeat;
}

#add_User .form .form_submit{
  padding: 10px 10px;
  height: 30px;
  width: 790px;
  background-color: #f6f6f6;
} 

#add_User .form input.submit_add{
  margin: 0px 0px 0px 19px;
  width: 151px;
  height: 27px;
  float: right;  
  border: 0px;
  background: url(pics/klant_toevoegen.gif);
  cursor: pointer;
}

#add_User .form input.submit_edit{
  margin: 0px 0px 0px 19px;
  width: 151px;
  height: 27px;
  float: right;  
  border: 0px;
  background: url(pics/klant_bewerken.gif);
  cursor: pointer;
}

#add_User .form input.annuleren{
  margin: 0px 0px 0px 19px;  
  width: 82px;
  height: 27px;
  float: right;
  border: 0px;
  background: url(pics/annuleren.gif);  
  cursor: pointer;
}

/* -------------------- Klantgegevens ------------------------------------ */

#klantgegevens{
  position: relative;
}

#klantgegevens h3{
  padding: 20px 20px 0px 20px;
}

#klantgegevens .control{
  display: none;
}

#klantgegevens .control img {
  margin-left: 10px;
}

* html #klantgegevens .control{
  margin: 0px 10px 0px 0px;  
}

#klantgegevens .overview{
  padding: 10px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  height: 1px;
  width: 650px;
  min-height: 70px;
  height: auto !important;
  height: 70px;
  font-size: 0px;
  line-height: 0px;
  border: 1px solid #666666;
  background-color: #f6f6f6;
}

#klantgegevens .overview .description{
  padding: 4px 10px 0px 0px;
  margin: 0px;
  width: 60px;
  height: 15px;
  overflow: hidden;
  font: 11px arial, verdana, sans serif;
  font-weight: bold;
  color: #018b33;
  float: left;
  text-align: right;
}

#klantgegevens .overview .value{
  padding: 5px 10px;
  height: 15px;
  width: 95px;
  float: left;
  font: 11px arial, verdana, sans serif;
  color: #000000;
  font-weight: bold;
  border: 0px;  
}

#klantgegevens .overview .block_left{
  padding: 0px 0px 0px 10px;
  width: 195px;
  float: left;
}

#klantgegevens .overview .block_middle{
  padding: 0px 0px 0px 40px;
  width: 200px;
  float: left;
}

#klantgegevens .overview .block_right h3{
  padding: 0px 0px 0px 20px;
  border-bottom: 1px solid #999999;    
}

#klantgegevens .overview .block_right{
  padding: 0px 0px 0px 0px;
  width: 190px;
  float: left;
  background-color: #f6f6f6;      
}

#klantgegevens .overview .block_right .description{
  width: 60px;
}

/* -------------------- Aankoop, afgehaald -------------------- */

#resterend h3 {
  padding: 10px 20px 5px 20px;
  margin: 0px;
  border-bottom: 0px solid #efefef;  
  background-color: #fff;        
}

#resterend {
  margin: 0px 15px 10px 0px;
  padding: 0px;
  width: 260px;
  height: 120px;
  float: left;  
  display: inline;
  background-color: #fff;   
}
        
#aankoop, #afgehaald {
  display: none;   
}

#resterend .description {
  padding: 4px 10px 0px 0px;
  margin: 0px 0px 0px 20px;
  width: 100px;
  height: 15px;
  overflow: hidden;
  line-height: 12px;
  font: 11px arial, verdana, sans serif;
  font-weight: bold;
  color: #018b33;
  float: left;
  display: inline;
  text-align: left;
}

#resterend .value {
  padding: 4px 0px 5px 0px;
  height: 15px;
  width: 120px;
  float: left;
  font: 11px arial, verdana, sans serif;
  color: #000000;
  font-weight: bold;
  border: 0px;  
}

#resterend form {
  position: relative;
  padding: 10px 0px;
  margin: 0px;
  width: 260px;
  height: 70px;
  overflow: hidden;
  background-color: #f6f6f6; 
  border: 1px solid #666666;   
}
       
#afdrukken{
  margin: 0px 0px 25px 0px;
  height: 15px;
  text-align: right;  
}