/* {margin:0;padding:0}*/

/*body {
  background-color:#DEDBC6;
  padding:50px;
}*/

/* Slider */
#slider {
  display:block;
  max-width: 100%;
  width:100%; /* dimensi lebar */
  height:335px; /* dimensi tinggi */
  margin:0px auto 0;
  background:white url('./images/nivo-loading.gif') no-repeat 50% 50%;
  overflow:hidden; /* Sembunyikan muatan elemen '.container' yang berlebih dari '#slider' */
  position:relative;
}

/* Untuk caption */
#slider figcaption {
  display:block;
  background-color:black;
  font:normal normal 11px Arial,Sans-Serif;
  color:white;
  opacity:.8;
  padding:10px 15px;
  position:absolute;
  right:0;
  bottom:-100px; /* sembunyikan dengan cara ini :) */
  left:0;
  z-index:4;
}

#slider img {
  display:block;
  margin:0 0;
  max-width: 100%;
  width:100%; /* dimensi lebar */
  height:335px; /* dimensi tinggi */
  position:absolute;
  top:0;
  left:0;
}

/* Navigasi */
#slider-nav {
  display:block;
  width:300px;
  margin:0px auto;
  text-align:center;
}

#slider-nav a {
  display:inline-block;
  width:0px;
  height:0px;
  background-color:#bbb;
  font-size:0;
  color:transparent;
  overflow:hidden;
  text-indent:-99px;
  margin:0 0px 0 0;
  border:0px solid white;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
}

#slider-nav .active {
  background-color:#6A7E00;
}

/**
 * Tip yang baik untuk slideshow berupa gambar:
 * Sembunyikan tampilan sampai semua gambar benar-benar termuat agar saat gambar sedang dimuat, dia tidak merusak pemandangan kita :)
 */
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}