* {
  font-size:8pt;
  /*font-family:georgia, arial, helvetica, sans-serif;*/
  font-family:"Trebuchet Ms", Helvetica, Arial, Verdana, sans-serif;  
  line-height:19px;
}
h1 {
  font-size:21pt;
} 
h2 {
  font-size:16pt;
} 
h3 {
  font-size:13pt;
} 
h4 {
  font-size:11pt;
} 
h5 {
  font-size:9pt;
} 
h6 {
  font-size:7pt;
} 
h1, h2, h3, h4, h5, h6{
  margin:0;
  padding:0;
}
hr{
  color:#FC0;
} 
img{
  border-style:none;
} 
iframe, input[type=text]{
  border:1px solid #06F;
} 
input[type=text]{
  padding:5px;
} 
body{
  margin:0;
  padding:0;
  background:#4487D8 url(bg.jpg) repeat-x;  
} 


#dummy{
  margin:10px auto;
  width:970px;        
}


#wrap{
  float:left;
  overflow:hidden;
  width:100%;
  background:#FFF;
  margin-bottom:30px;
}


#header, #main_menu{
  width:940px;
  float:left;
}
#header{
  background:transparent url(banner_left.jpg) bottom left repeat-x;
  height:231px;
  margin:15px 15px 0 15px;
}
#header #cari{
  background:transparent url(header.jpg) no-repeat;
  height:33px;
  width:100%;
  float:left;
     
}
#header #banner{
  background: transparent url(banner_right1.jpg) no-repeat top right;
  float:right;
  height:198px;
  width:100%;
}
#main_menu{
  background:transparent url(menu.jpg) repeat-x;
  height:39px;
  margin:0 15px 0 15px;
  padding:0;
}
#main_menu li{
  float:left;
  list-style:none;
  border-right:1px solid #2C5C9A;
}
#main_menu li a{
  font-size:13px;
  text-decoration:none;
  color:#BBB;
  line-height:39px;
  padding:10px 15px;
}
#main_menu li a:hover, #main_menu li a.visit{
  color:#FFF;
  background:#2C5D98 url(menu_visit.jpg) repeat-x;
  line-height:39px;
}


#content{
  width:938px;
  float:left;
  margin:0 15px 0 15px;
  border:1px solid #BBB;
  min-height:400px;
}
#penuh{
  float:left;
  margin:15px;
  width:908px;  
}
#penuh h1{
  margin-bottom:7px;
}
#penuh #product_list{
  list-style:none;
  border-top:1px solid #BBB;
  float:left;
  margin:0;
  padding:0;
  width:202px;
  position:absolute;
}
#penuh #product_list li a{
  line-height:30px;
  border-width:0 1px 1px 1px;
  border-style:solid;
  border-color:#FFF;
  float:left;
  width:200px;
  background:transparent url(menu.jpg) repeat-x;
  text-decoration:none;
  color:#BBB;
}
#penuh #product_list li a:hover{
  border-width:0 1px 1px 1px;
  border-style:solid;
  border-color:#BBB;
  background:#FFF;
  color:#000;
}
#penuh #product_list li a.active{
  border-width:0 0 1px 1px;
  border-style:solid;
  border-color:#BBB;
  background:#FFF;
  color:#000;
}
#penuh #product_desc{
  border:1px solid #BBB;
  margin-left:200px;
  float:left;
  width:700px;
  min-height:200px;
  padding:10px 0;
}
#penuh #product_desc #product_desc_in{
  float:left;
  margin:0 10px;
  width:680px;
}
#penuh .itemnya{
  float:left;
  border:1px solid #BBB;
  text-decoration:none;
  width:160px;
  height:120px;
  margin:2px;
}
#penuh .itemnya:hover{
  text-decoration:underline;
  background:#3E7CC7 url(menu_visit.jpg) repeat-x bottom;
  color:#FFF;
}
#penuh .petunjuk{
  text-decoration:none;  
}
#penuh .petunjuk:hover{
  text-decoration:underline;
}
#tree1{
  width:300px;
  min-height:200px;
  overflow:hidden;
  padding-left:10px;
}
#product_detail{
  width:584px;
  min-height:200px;
  margin-left:10px; 
  position:relative; 
}
#product_detail .back{
  position:absolute;
  z-index:0;
  zoom: 1;
	filter: alpha(opacity=40);
	opacity: 0.4;  
}
#tree1, #product_detail{
  border:1px solid #DDD;
  float:left;  
}


#footer{
  width:938px;
  float:left;
  margin:0 15px 15px 15px;
  border-width:0 1px 1px 1px;
  border-style:solid; 
  border-color:#BBB;
  background-color:#666;
  color:#AAA;
}
#footer .left{
  margin-left:15px;
  line-height:37px;
  float:left;
}
#footer .code{
  float:right;
  margin-right:15px;
  line-height:37px;
}


#left_wrap{
  margin:15px 0 15px 15px;
  float:left;
  width:590px;  
}
#left_wrap h3{
  border:2px solid #D7E9FF;
  background-color:#e8eff9;
  line-height:30px;
}
#right_wrap{
  width:300px;
  float:right;
  margin:15px;  
}
.right{
  float:right;
  margin-bottom:15px;
  border-top:1px solid #BBB;
  background:transparent url(menu.jpg) repeat-x;
}
.right h4{
  line-height:40px;
  color:#FFF;  
  float:left;
  margin:0 20px;  
}
.right, .right h4{
  width:302px;
}


.item{
  position:relative;
  margin-top:15px;
  border:1px solid #DDD;  
}
.item .hot{
  background: transparent url(hot_item.png) no-repeat;
}
.item .new{
  background: transparent url(new_item.png) no-repeat;  
}
.item .hot, .item .new{
  height:56px;
  width:56px;
  position:absolute;
  z-index:100;
}


font{
  float:left;
  width:60px;
}
.validate{
  color:#F00;
  float:right;
}
input{
  margin-bottom:2px;
}

             
/* paging */
.paging {
  float: left;
  width: 100%;
}
.paging .yes {
  border: 1px solid #085C74;
  color: #FFF;
  background: #0186A9 url(button.gif) repeat-x;
}
.paging .no, .paging .yes:hover {
  border: 1px solid #666;
  color: #666;
  background: #0186A9 url(nopaging.gif) repeat-x;
}
.paging .yes, .paging .no, .paging span {
  height: 16px;
  width: 16px;
  line-height: 15px;
  text-decoration: none;
  margin: 1px 0 0 1px;
  float: left;
  text-align: center;   
}


/* popup */
#backgroundPopup {
  z-index:101;
  position: fixed;
  display:none;
  height:100%;
  width:100%;
  background:#000000;
  top:0px;
  left:0px;
}
#toPopup {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 10px solid #ccc;
  border-radius: 3px 3px 3px 3px;
  color: #333333;
  display: none;
  left: 50%;
  margin-left: -402px;
  position: fixed;
  top: 20%;
  width: 800px;
  z-index: 102;
}
div.loader {
  background: url("loading.gif") no-repeat scroll 0 0 transparent;
  height: 32px;
  width: 32px;
  display: none;
  z-index: 9999;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-left: -10px;
}
div.close {
  background: url("closebox.png") no-repeat scroll 0 0 transparent;
  cursor: pointer;
  height: 30px;
  position: absolute;
  right: -27px;
  top: -24px;
  width: 30px;
}
span.ecs_tooltip {
  background: none repeat scroll 0 0 #000000;
  border-radius: 2px 2px 2px 2px;
  color: #FFFFFF;
  display: none;
  font-size: 11px;
  height: 16px;
  opacity: 0.7;
  padding: 4px 3px 2px 5px;
  position: absolute;
  right: -62px;
  text-align: center;
  top: -51px;
  width: 93px;
}
span.arrow {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #000000;
  display: block;
  height: 1px;
  left: 40px;
  position: relative;
  top: 3px;
  width: 1px;
}
div#popup_content {
  margin: 4px 7px;
  overflow-y:scroll;
  height:200px;
}
.desc{
  margin:5px 5px 15px 5px;
  
}

/*css untuk gambar*/
.simple-img {
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  border-color: #CCC;
  background-color: #FFF;  
  padding: 5px 5px 5px;
  float:left;        
}

#mundur{
  float:left;
  width:100%;
  text-decoration:none;
}
#mundur:hover{
  text-decoration:underline;
}

/* untuk paging */
.paging {
  float: left;
  width: 100%;
}

.paging .yes { 
  border: 1px solid #085C74;
  color: #FFF;
  background: #0186A9 url(button.gif) repeat-x;
}

.paging .no, .paging .yes:hover {
  border: 1px solid #666;
  color: #666;
  background: #0186A9 url(nopaging.gif) repeat-x;
}

.paging .yes, .paging .no, .paging span {
  height: 16px;
  width: 16px;
  line-height: 15px;
  text-decoration: none;
  margin: 1px 0 0 1px;
  float: left;
  text-align: center;   
}