@charset "UTF-8";
/* CSS Document */
body{ margin:0px; background:#000000; color:#FFF; font-family:arial; font-size:12px;}
.tabel{ border:solid 0px #000; width:100%;}

.header{ height:150px; width:100%; background:url(images/bg_cokelat.jpg); }
.isi_header{ height:150px; width:1200px; background:url(images/header.jpg); }
.menubar{ height:30px; width:100%; background:url(images/bg_menuatas.jpg);}

.banner{ height:200px; width:600px;}
.isi_banner{ height:200px; width:600px; background-color:#7C7C7C; }
/* .menubar a => mengatur style untuk tag html A di dalam tag html ber-class menubar*/

.content{ width:100%; background:#364E1A;}
.isi_content{ width:1200px; background:url(images/tengah.jpg) no-repeat}

.footer{ width:100%; background:url(images/bg_putih.jpg);}
.isi_footer{ width:1200px; background:url(images/footer.jpg) }

.menufooter{ height:100px; width:100%; padding:0px; text-align:center; background:url(images/bg_footer.jpg);}
.menufooter a{ text-decoration:underline; color:#333;}

.side-left{ padding:10px;}
.side-right{ padding:10px;}
.side-content{ padding:10px;}

.imgproduct { 
   border: 8px solid #7c7c7c;
    display: inline-block;
}

a.menu_atas1{ background:url(images/menu_atas1.png); width:60px; height:20px; float:left; margin:0px;}
a.menu_atas1:hover{ background:url(images/menu_atas1.png) no-repeat 0 -20px;}

a.menu_atas2{ background:url(images/menu_atas2.png); width:80px; height:20px; float:left; margin:0px;}
a.menu_atas2:hover{ background:url(images/menu_atas2.png) no-repeat 0 -20px;}

a.menu_atas3{ background:url(images/menu_atas3.png); width:110px; height:20px; float:left; margin:0px;}
a.menu_atas3:hover{ background:url(images/menu_atas3.png) no-repeat 0 -20px;}

a.menu_atas4{ background:url(images/menu_atas4.png); width:60px; height:20px; float:left; margin:0px;}
a.menu_atas4:hover{ background:url(images/menu_atas4.png) no-repeat 0 -20px;}

a.menu_atas5{ background:url(images/menu_atas5.png); width:80px; height:20px; float:left; margin:0px;}
a.menu_atas5:hover{ background:url(images/menu_atas5.png) no-repeat 0 -20px;}


a.menu_bawah1{ background:url(images/menu_bawah1.png); width:100px; height:20px; float:left; margin:0px;}
a.menu_bawah1:hover{ background:url(images/menu_bawah1.png) no-repeat 0 -20px;}

a.menu_bawah2{ background:url(images/menu_bawah2.png); width:140px; height:20px; float:left; margin:0px;}
a.menu_bawah2:hover{ background:url(images/menu_bawah2.png) no-repeat 0 -20px;}

a.menu_bawah3{ background:url(images/menu_bawah3.png); width:180px; height:20px; float:left; margin:0px;}
a.menu_bawah3:hover{ background:url(images/menu_bawah3.png) no-repeat 0 -20px;}

a.menu_bawah4{ background:url(images/menu_bawah4.png); width:100px; height:20px; float:left; margin:0px;}
a.menu_bawah4:hover{ background:url(images/menu_bawah4.png) no-repeat 0 -20px;}

a.menu_bawah5{ background:url(images/menu_bawah5.png); width:140px; height:20px; float:left; margin:0px;}
a.menu_bawah5:hover{ background:url(images/menu_bawah5.png) no-repeat 0 -20px;}






a.link_buku{ color:#69A6B0; text-decoration: none; font-size:18px; font-weight:bold; font-face:tahoma;}
a.link_buku:hover{ color:#000000; text-decoration:underline; font-size:18px; font-weight:bold;}






#container{
	width: 600px;

	padding: 0 0 0 0;
	position: relative;
}

img{
	display: block;
}

#gallery, #thumbs{
	float: left;
}

#gallery{
	width: 600px;
	height: 250px;
	overflow: hidden;
}

#gallery img{
	position: absolute;
}

#thumbs{
	width: 0px;
	height: 0px;
	overflow: hidden;
}

#next{
	display: block;
	width: 0px;
	height: 0px;
	background: url(img/arrow.png);
	position: relative;
	top: 0px;
	left: 0px;
}

#next:hover{
	background: url(img/arrowmo.png);
}

.clear{
	clear: both;
}