/* Reset */
* {
  margin: 0px;
  padding: 0px;
}
a img {
  border: none;
}
/* General positioning */
html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  overflow: hidden;
  font-family: verdana, sans;
}
body {
  background: #bac7d8 url(../graphics/sky.jpg) no-repeat top center;
}
#grass {
  width: 100%;
  height: 20%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: url(../graphics/grass.png) no-repeat center top;	
}
#site {
  z-index: 1;
}
#header {
  position: absolute;
  top: -20px;
  left: -50px;
}
#logos {
  position: absolute;
  bottom: -5px;
  right: 120px; 
}
#menu {
  position: absolute;
  right: 100px;
  top: -10px;
}
.button1, .button2, .button3, .button4 {
  width: 127px;
  height: 122px;
  float: left;
}
.button1 a, .button2 a, .button3 a, .button4 a {
  float: left;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
/* Button 1 */
.button1 {
  margin-right:15px;
  background: url(../graphics/button1_bg.png) no-repeat center center;	
}
.button1 a {
  margin-left: 5px;
  background: url(../graphics/button1.png) no-repeat center center;	  
}
.button1 a:hover {
  background: url(../graphics/button1_over.png) no-repeat center center;	  
}

/* Button 2 */
.button2 {
  background: url(../graphics/button2_bg.png) no-repeat center center;	
}
.button2 a {
  background: url(../graphics/button2.png) no-repeat center center;	  
}
.button2 a:hover {
  background: url(../graphics/button2_over.png) no-repeat center center;	  
}

/* Button 3 */
.button3 {
  background: url(../graphics/button3_bg.png) no-repeat center center;	
}
.button3 a {
  background: url(../graphics/button3.png) no-repeat center center;	  
}
.button3 a:hover {
  background: url(../graphics/button3_over.png) no-repeat center center;	  
}


/* Button 4 */
.button4 {
  background: url(../graphics/button4_bg.png) no-repeat center center;	
}
.button4 a {
  background: url(../graphics/button4.png) no-repeat center center;	  
}
.button4 a:hover {
  background: url(../graphics/button4_over.png) no-repeat center center;	  
}


#medaile {
  position: absolute;
  left: -20px;
  top: 250px;
  width: 240px;
  height: 230px;
}
#medaile a {
  float: left;
  width: 100%;
  height: 100%;
  background: url(../graphics/medaile1.png) no-repeat center;
  text-decoration: none;	  
}
#medaile a:hover {
  background: url(../graphics/medaile1_over.png) no-repeat center;	  
}
#medaile a img {
  float: right;
  margin-top: 130px;
}
#bottom_menu {
  position: absolute;
  left: 110px;
  bottom: 65px;
  font-weight: bold;
  font-size: 10px;
}
#bottom_menu a {
  color: #000;
}

#content {
  position: absolute;
  top: 130px;
  left: 220px;
  width: 710px;
  height: 400px;
}
#content h2, #popup h2 {
  color: #008d43;
  font-size: 22px;
  margin-bottom: 10px;
  height: 21px;
}
#content p, #content li, #popup p, #popup li {
  color: #00458e;
  font-size: 13px;
  font-weight: bold;
}
#content ul, #content ol {
  margin: 10px 30px;
  padding-left: 30px;
}
#content li {
}
#content a, #popup a {
  color: #00458e;
  color: #fabe2a;
  color: #008d43;
  

}
#halsband {
  width: 225px;
  height: 128px;
  background: url(../graphics/halsband.png);
}
#inner_halsband {
  float: right;
  width: 175px;
  margin-top: 20px;
}
#inner_halsband label {
  font-size: 12px;
  font-weight: bold;
  float: left;
  width: 140px;
  clear: both;
}
#inner_halsband input {
   width: 140px;
}
table.invul {
  border-left: solid 1px #00458e;
  border-bottom: solid 1px #00458e;
}
table.invul td, table.invul th {
  font-size: 12px;
  padding: 3px;
}
table.invul th {
  background: #00458e;
  color: #fff;
}
table.invul td {
  border-top: solid 1px #00458e;
  border-right: solid 1px #00458e;
}

#inner_popup {
  margin: 40px 70px;
  width: 420px;
}
#mask {
  background: url(../graphics/mask.png);

}
#close_popup {
  width: 41px;
  height: 41px;
  background: url(../graphics/close.png);
  margin: 0px 10px 0px 0px;
  cursor: hand;
  cursor: pointer;
}
td.graph_txt {
  font-size: 12px;
  font-weight: bold;
  padding-left: 5px;
}
strong {
  color: #008d43;
}

#soepel_in_6_weken {
  background: url(../graphics/headings.png) 0px 0px no-repeat;
  text-indent: -1000px;
}
#de_groenlipmossel {
  background: url(../graphics/headings.png) 0px -30px no-repeat;
  text-indent: -1000px;
}
#invullen {
  background: url(../graphics/headings.png) 0px -58px no-repeat;
  text-indent: -1000px;
}
#geen_buzzer {
  background: url(../graphics/headings.png) 0px -87px no-repeat;
  text-indent: -1000px;
}
#resultaten {
  background: url(../graphics/headings.png) 0px -116px no-repeat;
  text-indent: -1000px;
}
#prijzen {
  background: url(../graphics/headings.png) 0px -203px no-repeat;
  text-indent: -1000px;
}
#contact {
  background: url(../graphics/headings.png) 0px -233px no-repeat;
  text-indent: -1000px;
}
#voorwaarden {
  background: url(../graphics/headings.png) 0px -262px no-repeat;
  text-indent: -1000px;
}
#bedankt {
  background: url(../graphics/headings.png) 0px -291px no-repeat;
  text-indent: -1000px;
}
.verder {
  float: right;
  margin-top: 5px;
  background: url(../graphics/verder.png) no-repeat;
  border: none;
  width: 111px;
  height: 26px;
  cursor: hand;
  cursor: pointer;
}
.send {
  float: right;
  margin-top: 30px;
  margin-right: 100px;
  width: 160px;
  height: 51px;
  background: url(../graphics/button.png);
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  cursor: hand;
  cursor: pointer;
  border: none;  
}
.inactivebar {
  height: 190px;
  width: 58px;
  background: url(../graphics/staaf_inactive.png) top left;
  text-align: center;
  color: #fff;
  padding-top: 20px;
}
.activebar {
  height: 100px;
  width: 58px;
  background: url(../graphics/staaf_bg.png) top left;
  text-align: center;
  color: #fff;
  padding-top: 20px;
}