img.zoom {
               
}
img.zoom:hover {
               opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */
                
}


.sub-barang{
text-align:center;

width:200px;
float:left;
background-color:  #FBFBFB;

 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 
 -webkit-border-radius: 4px;
 margin:30px 5px 5px 5px;
}
.jdl-brg{
	
font-size:11px;
height:300px;

font-family: "Arial Black", Gadget, sans-serif;
}
.p-judul{
	font-size:11px;
	font-weight:bold;
	
		position:   relative;
		top: 1px;
		z-index: 2;
		color: #000;
		margin: 2px;
	}
.p-gambar{
	
 	position:   relative;
	
		top: 1px;
		z-index: 3;
		
		
	}

	
	.p-page {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}
.cursor {
	 float:right; padding:5px; background-color:#E6E6E6;

}
.cursor:hover {
	background-color:#F60;
}
.cursor  p {

	color:#000;
	
}
.cursor:hover p {
		font-weight:bold;
	color:#FFF
}
.zoomeffect {
width:100%;
height:100%;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect img {
display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;
background-color: #E6E6E6;


}

.zoomeffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}





.img-oke {
padding:0px;
background-color:000066;
border-radius:20px;
}


.sub-barang1{
text-align:center;
padding:11px;
width:47%;
float:left;
background-color:  #F0F0F0;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:5px 5px 5px 5px;
}
.sub-barang1:hover {opacity:0.3;
filter:alpha(opacity=30);
}
.jdl-brg1{

font-size:11px;
height:100px;
background-color:   #E6E6E6;



}
.p-judul1{
	font-weight: bold;
		font-family:  "Arial", Gadget, sans-serif;
		position:   relative;
		top: 1px;
		font-size:18px;
		color: #000;
		margin: 4px;
	}
	.p-judul1:hover { color:#F60;}
	
.p-gambar1{
	
 	position:   relative;
	
		top: 1px;
		z-index: 3;
		
		
		
	}
.p-data1{
	
	
		top: 1px;
		background-color:#FFF;
		
		
	}
	
	.p-page1 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up1 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}

.img-oke1 {

padding:0px;
background-color:000066;
border-radius:10px; 
}
.zoomeffect1 {
width:100%;
height:100%;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect1 img {
display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;
background-color:#F7F7F7;


}

.zoomeffect1:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}


<!--
.style9 { color: #FF0000;
 font-size: 10pt;
 
 
 
 }

 
.sub-barang3 {
text-align:center;
padding:7px;
width:330px;
float:left;
background-color:  #E6E6E6;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:5px 5px 5px 5px;
}
.jdl-brg3 {

font-size:11px;
height:280px;
background-color:  #FFF;



}
.p-judul3 {
	font-weight: bold;
		font-family:  "Arial Black", Gadget, sans-serif;
		position:   relative;
		top: 1px;
		font-size:16px;
		color:  #000;
		margin: 4px;
		
	}
.p-gambar3 {
	margin:5px;
	padding: 3px;
	text-align:center;
	font-size:8px;
		
		
	}
.p-data3 {
	
	
		top: 1px;
		background-color:#FFF;
		
		
	}
	
	.p-page3 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up3 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}

.img-oke3 {

padding:0px;
background-color:000066;
border-radius:10px; 
}
.zoomeffect3 {
width:100%;
height:100%;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect3 img {
display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;
background-color:#F7F7F7;


}

.zoomeffect3:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}


.sub-barang4 {
text-align:center;
padding:7px;
width:100%;
float:left;
background-color: #F5F5F5;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:15px 15px 15px 15px;
}
.jdl-brg4 {

font-size:11px;
height: auto;
background-color:  #FFF;
padding: 3px;



}
.p-judul4 {
	font-weight: bold;
		font-family:  "Arial Black", Gadget, sans-serif;
		position:   relative;
		top: 1px;
		font-size:18px;
		color:   #F93;
		margin: 4px;
	}
.p-gambar4 {
	padding: 3px;
	text-align:left;
	width: 65%;
		
	}
.p-data4 {
	
	
		top: 1px;
		background-color:#FFF;
		
		
	}
	
	.p-page4 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up4 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}

.img-oke4 {

padding:0px;
background-color:000066;
border-radius:10px; 
}
.zoomeffect4 {
width:100%;
height:100%;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect4 img {
display:block;
position:relative;
float:right;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:35%;
background-color:#F7F7F7;


}




.sub-barang5 {
text-align:center;
padding:7px;
width:270px;
float:left;
height:270px;
background-color:  #fff;
border: 2px solid #CCC;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:5px 5px 5px 5px;
}
.jdl-brg5 {

font-size:11px;





}
.p-judul5 {
	font-weight: bold;
		font-family:  "Arial Black", Gadget, sans-serif;
		position:   relative;
		top: 1px;
		font-size:13px;
		color:  #000;
		margin: 4px;
		
	}
.p-gambar5 {
	margin:5px;
	padding: 3px;
	text-align:center;
	font-size:8px;
		
		
	}
.p-data5 {
	
	
		top: 1px;
		background-color:#FFF;
		
		
	}
	
	.p-page5 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up5 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}

.img-oke5{

padding:0px;
background-color:000066;
border-radius:10px; 
}
.zoomeffect5 {
width:100%;
height:100%;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect5 img {
display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;
background-color:#F7F7F7;


}

.zoomeffect5:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}


















.sub-barang5A {
text-align:center;
padding:7px;
width:270px;
float:left;
height:230px;
background-color:  #fff;
border: 2px solid #CCC;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:5px 5px 5px 5px;
}
.jdl-brg5A {

font-size:11px;


}

.sub-barang5A p {
	font-weight: bold;
		font-family:  "Arial Black", Gadget, sans-serif;
		position:   relative;
	
		font-size:15px;
		color:  #000;
		margin: 4px;
		
	}

.sub-barang5A:hover p{
	color:#06C;
}
.p-gambar5 {
	margin:5px;
	padding: 3px;
	text-align:center;
	font-size:8px;
		
		
	}


.img-oke5A{


}
.zoomeffect5A {
width:100%;
height:170px;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect5A img {
display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;



}

.zoomeffect5A:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}




 
.sub-barang6 {
text-align:center;
padding:7px;
margin-left: 20px;
width:500px;
float:left;
background-color:  #FFF;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:5px 5px 5px 5px;
}
.jdl-brg6 {

font-size:11px;

background-color:  #FFF;



}
.p-judul6 {
	
		font-family:  "Arial", Gadget, sans-serif;
		position:   relative;
		top: 1px;
		font-size:18px;
		color:  #F60;
		margin: 4px;
		
	}
.p-gambar6 {
	margin:5px;
	padding: 3px;
	text-align:center;
	font-size:8px;
		
		
	}
.p-data6 {
	
	
		top: 1px;
		background-color:#FFF;
		
		
	}
	
	.p-page6 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up6 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}

.img-oke6 {
	
padding:0px;
background-color:000066;
border-radius:10px; 
}
.zoomeffect6 {
width:100%;

text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect6 img {
display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;
background-color:#F7F7F7;


}

.zoomeffect6:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}





 
.sub-barang7 {
text-align:center;
padding:7px;
width:270px;
float:left;
background-color : #FFF;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:5px 5px 5px 5px;
}
.jdl-brg7 {

font-size:11px;
height:350px;
background-color:  #FFF;



}
.p-judul7 {
	
		font-family:  "Arial", Gadget, sans-serif;
		position:   relative;
		top: 1px;
		font-size:18px;
		color:  #F60;
		margin: 3px;
		
	}
.p-gambar7 {
	margin:5px;
	padding: 3px;
	text-align:center;
	font-size:8px;
		
		
	}
.p-data7 {
	
	
		top: 1px;
		background-color:#FFF;
		
		
	}
	
	.p-page7 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up7 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}

.img-oke7 {

padding:0px;
background-color:000066;
border-radius:10px; 
}
.zoomeffect7 {
width:100%;
height:100%;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect7 img {
display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;
background-color:#F7F7F7;


}

.zoomeffect7:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}








 
.sub-barang8 {
text-align:center;
padding:6px;
width:24%;
float:left;
background-color:  #FFF;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:5px 5px 5px 5px;
}
.jdl-brg8 {

font-size:11px;
height:300px;
background-color:  #FFF;



}
.p-judul8 {

		font-family:  "Arial", Gadget, sans-serif;
		position:   relative;
		top: 1px;
		font-size:16px;
		color:  #F60;
		margin: 4px;
		
	}
.p-gambar8 {
	margin:5px;
	padding: 3px;
	text-align:center;
	font-size:8px;
		
		
	}
.p-data8 {
	
	
		top: 1px;
		background-color:#FFF;
		
		
	}
	
	.p-page8 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up8 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}

.img-oke8 {

padding:0px;
background-color:000066;
border-radius:10px; 
}
.zoomeffect8 {
width:100%;
height:100%;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect8 img {
display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;
background-color:#F7F7F7;


}

.zoomeffect8:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}






.sub-barang9 {
text-align:center;
padding:0px;
width:255px;
float:left;
background-color:  #FFF;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:4px 4px 4px 4px;
}
.jdl-brg9 {

font-size:11px;
height:285px;
background-color:  #EFEFEF;
margin: 3px;


}
.p-judul9 {

		font-family:  "Arial", Gadget, sans-serif;
		position:   relative;
		top: 1px;
		font-size:14px;
		color:  #000;
		margin: 2px;
		
		
	}
.p-gambar9 {
	margin:5px;
	padding: 3px;
	text-align:center;
	font-size:8px;
		
		
	}
.p-data9 {
	
	
		top: 1px;
		background-color:#FFF;
		
		
	}
	
	.p-page9 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up9 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}

.img-oke9 {
	
padding:15px;
background-color:000066;
border-radius:10px; 
}
.zoomeffect9 {
width:100%;
height:100%;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect9 img {

display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;



}

.zoomeffect9:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}












.sub-barang10 {
text-align:left;
padding:0px;
width:255px;
float:left;
background-color:  #FFF;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:4px 4px 4px 4px;
}
.jdl-brg10 {

font-size:11px;
height:400px;
background-color:  #FFF;
margin: 3px;


}
.p-judul10 {

		font-family:  "Arial", Gadget, sans-serif;
		position:   relative;
		top: 1px;
		font-size:18px;
		color: #F60;
		margin: 10px;
		
		
	}
.p-gambar10 {
	margin:5px;
	padding: 3px;
	text-align:center;
	font-size:12px;
		
		
	}
.p-data10 {
	margin:10px;
		
		
		
	}
	
	.p-page10 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up10 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}

.img-oke10 {
	
padding:15px;
background-color:#FFF;
border-radius:10px; 
}
.zoomeffect10 {
width:100%;
height:100%;
text-align:left;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect10 img {

display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;



}

.zoomeffect10:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}







.sub-barang11 {
	margin-top:40px;
text-align:left;
padding:7px;
width:100%;
float:left;
border: #000 solid 2px;

background-color: #FFF;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:15px 15px 15px 15px;
}
.sub-barang11:hover {
	background-color: #F60;
	
	
}
.jdl-brg11 {

font-size:11px;
height: auto;

padding: 3px;



}
.p-judul11 {
	font-weight: bold;
		font-family:  "Arial Black", Gadget, sans-serif;
		position:   relative;
		top: 1px;
		font-size:18px;
		color:   #F93;
		margin: 4px;
	}
.p-gambar11 {
	padding: 3px;
	text-align:left;
	width: 90%;
	font-size:30px;
	font-weight:bold;
	color:#000;
		
	}
.p-data11 {
	
	
		top: 1px;
		background-color:#FFF;
		
		
	}
	
	.p-page11 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up11 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}

.img-oke11 {

padding:0px;
background-color:000066;
border-radius:10px; 
}
.zoomeffect11 {
width:100%;
height:100%;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect11 img {
display:block;
position:relative;
float:left;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:35%;



}


.sub-barang12 {
text-align:left;
padding:0px;
width:255px;
float:left;
background-color:  #E4E4E4;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:4px 4px 4px 4px;
}
.jdl-brg12 {

font-size:11px;
height:500px;
background-color: #E4E4E4;
margin: 3px;

}
.p-judul12 {

		font-family:  "Arial", Gadget, sans-serif;
		position:   relative;
		top: 1px;
		font-size:18px;
		color: #F60;
		margin: 10px;
		
		
	}
.p-gambar12 {
	margin:5px;
	padding: 3px;
	text-align:center;
	font-size:12px;
		
		
	}
.p-data12 {
	margin:10px;
			color:	#000;	
		
		
	}
	
	.p-page12 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up12 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}

.img-oke12 {
	
padding:15px;


border-radius:10px; 
}
.zoomeffect12 {
width:100%;
height:100%;
text-align:left;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect12 img {

display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;



}

.zoomeffect12 :hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}





.d-tabel1  {
	background-color: #E6E6E6;
	
}

.d-tabel1  th{
	padding:10px;
	
}
.d-tabel1  td {
	padding:10px;
	border-top:1px #000 solid;
}


.p-td {
font-size:15px; color:#000; font-weight:bold;

}
.p-td2 {
font-size:14px;  

}



.sub-barang13{
text-align:center;
border:#Ffed00 solid 1px;


width:150px;
height:150px;

float:left;



 border-radius: 50%;
 margin:10px 7px 70px 20px;

}



.sub-barang13:hover{
	border: #Ffed00  groove 10px;


	}
	
	
.jdl-brg13{
	
font-size:11px;

font-family: "Arial Black", Gadget, sans-serif;

}


.zoomeffect13 {
width:100%;
height:100%;
text-align:center;
overflow:hidden;

cursor:default;

}
.zoomeffect13 p {
	padding-top:70px;
	position: relative;
	color:#F00;
	font-weight:bold;
	font-size:12px;
	
	}
.zoomeffect13 img {
display:block;
position:relative;
cursor:pointer;
 border-radius: 50%;
   -webkit-filter: grayscale(100%); /* Chrome, Opera */
    filter: grayscale(100%);
 
 
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;
background-color: #E6E6E6;


}

.zoomeffect13:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}









.sub-barang14{
text-align:center;
border:#333 solid 1px;
padding : 5px;
width:250px;
height:400px;

float:left;



 background-color: #FFF;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:15px 15px 15px 15px;
 

}



.sub-barang14:hover{
	border: #Ffed00 thick 10px;
	
	


	}
	
	
.jdl-brg14{
	
font-size:11px;

font-family: "Arial Black", Gadget, sans-serif;

}
.p-14 {
	
	font-weight:bold;
	}


.dalam14 {
	height:200px;
	
	
	}
.zoomeffect14{
width:100%;
height:100%;
text-align:center;
overflow:hidden;

cursor:default;

}
.zoomeffect14 p {
	text-align:left;
	position: relative;
	color: #333;
	
	font-size:14px;
	
	}
.zoomeffect14 img {
display:block;
position:relative;
cursor:pointer;
 
 
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;
background-color: #E6E6E6;


}

.zoomeffect13:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.info {
	border: solid 1px #F00;
	padding:5px;
	
	
	
	}
	.info p {
		color:#F00;
		font-weight:500;
		font-size:12px;
	
		}
	.info:hover {
		background-color:#F00;
	
	}
	.info:hover p {
		color:#FFF;
			
	}









.sub-barang15 {

width:250px;
background-color:#BFBFBF;
 height:100px; 
 padding-top: 30PX; 
 padding-bottom:30px; 
 text-align:center; 
 

float:left;

 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:15px 15px 15px 15px;
 

}



.sub-barang15:hover{
	background-color:#FFF;
	
	border: #F33 solid 5px;

	}
.sub-barang15 p{
	
	 color:#FFF; font-weight:bold; font-size:16px;
	 }
	 
	 .sub-barang15:hover p{
		 color: #f33;

	}
	
	.ul-15 li{
		color:#000;
		margin-top:5px;
		font-size:12px;
	}
	.ul-15 a:hover{
		
		color: #F33;
		font-weight:bold;
		
	}
	.ul-15 a{
		color:#000;
	}