/* 
--- KARENA SAYA RAJIN ---
GLOBAL 
HEADER
MENU
MAIN-CONTENT
*/

/* PAGINATION */
ul.pagination, ul.pager
{
	margin: 2em auto auto auto; 
	padding: 0;
	list-style-type: none;
	float: left;
	text-align: center;
}

ul.pagination li, ul.pager li {
	display: inline;
}

ul.pagination li a, ul.pagination li.disabled, ul.pagination li.active, ul.pager li a, ul.pager li.disabled
{	
	text-decoration: none;
	margin: 0.2em;
	padding: 0.5em 1em;
	background-color: #1A3C7B;
	color: #fff;
}

ul.pagination li a:hover, ul.pagination li.active, ul.pager li a:hover {
	background-color: #369;
}

ul.pagination li.disabled, ul.pager li.disabled
{
	cursor: not-allowed;
	background-color: #0F8A84;
}

/* ------------------> GLOBAL */
body {margin: 0; padding: 0; background: url(../gambar/bgsip.png) repeat-x; background-color: #FFFFFF; font-family: Arial; font-size: 12px; line-height: 15px; color: #444444;}
a {text-decoration:none; color: #1A3C7B;}
a:hover {color: #1781B1;}
a:active
{
outline: none;
}
a:focus
{
-moz-outline-style: none;
}
a, input {
outline-color: invert;
outline-style: none;
outline-width: medium;
}
div#container {width: 980px; height: auto; margin: auto; overflow: hidden;}
div, p, h1,h2,h3,h4,h5,h6 {margin:0; padding:0;}
h2{padding-bottom: 20px; line-height: 25px;}

h3{padding-bottom: 2px; font-size: 14px;}

h5, h5 a {font-weight: bold; font-size: 14px; padding-bottom: 4px;}
h6 {font-size: 11px; color: #000000; font-weight: normal; font-family: Arial, Helvetica, sans-serif;}

.datelist { font-size: 10px; padding-bottom: 6px;}

ul {list-style: none;}

img { border: 0;}

.hdsimp a { }
.clear { clear: both; }

div#paging {text-align: left; line-height: 20px; margin: 10px 0 20px; position: relative; width: 700px;}

/* ------------------> HEADER */
div#header {width: 100%; height: 197px;}
div#header .left {width: 380px; float: left;}
div#header .left .logo {width: 326px; height: 80px; background: url(../gambar/sample-logo.png) no-repeat; margin-top: 18px;}
div#header .left .txt {width: 370px; height: auto; padding-left: 10px; color: #000;}
div#header .right {width: 600px; float: right;}
div#header .right table { width: 600px; height: 197px;}
div#header .right table img { padding-top: 17px;}

/* ------------------> MENU */
 div#mainmenu {width: 980px; height: 48px; background-image: url(../gambar/menu-bar.png); top: -10px; position: relative; z-index: 10;}
div#mainmenu div#menuselect {padding-top: 18px; padding-left: 18px; width: 660px; float:left;} 
div#mainmenu div#searchbox {float: right; width: 250px; height: 48px; background: url(../gambar/search_bg.png) no-repeat; margin-top: -46px; z-index: 10; position: relative; margin-right: -8px;}
/*div#mainmenu div#menuselect div.select {width: 597px; height: 13px; background: url(../gambar/menu-select.png) no-repeat;}*/

div#mainmenu div#menucart {width: 70px;float:left;padding-top: 4px;}
 

	/* SELECT */
	#select { width: 980px; z-index: 9998;}
	#select li, #select ul { margin: 0; padding: 0;}
	#select li { display: inline; height: 26px; }
	#select li a { float: left; height: 0; padding-top: 13px; overflow: hidden; background-image: url(../gambar/menu-select.png); background-repeat: no-repeat; margin-right: 45px; }
	
	/* BUTTONS */
	#select li#home a { background: url(../gambar/menu-home.png) no-repeat; width: 59px; }
	#select li#product a { background: url(../gambar/menu-product.png) no-repeat; width: 58px; }
	#select li#order a { background: url(../gambar/menu-order.png) no-repeat; width: 36px; }
	#select li#promo a { background: url(../gambar/menu-news.png) no-repeat; width: 83px; }
	#select li#article a { background: url(../gambar/menu-article.png) no-repeat; width: 51px; }
	#select li#links a { background: url(../gambar/menu-links.png) no-repeat; width: 31px; }
	#select li#contact a { background: url(../gambar/menu-contact.png) no-repeat; width: 49px; }
	
	/* OVER STATES */
	#select li#home a:hover { background-position: 0 -13px; }
	#select li#product a:hover { background-position: 0 -13px; }
	#select li#order a:hover { background-position: 0 -13px; }
	#select li#promo a:hover { background-position: 0 -13px; }
	#select li#article a:hover { background-position: 0 -13px; }
	#select li#links a:hover { background-position: 0 -13px; }
	#select li#contact a:hover { background-position: 0 -13px; }
	
/* ------------------> MAIN-CONTENT */
div#maincontent {width: 980px; min-height: 480px; margin-top: 24px;}

/* ------------------> MAIN-CONTENT LEFT*/
div#maincontent .left {width: 235px; height:auto; padding-left: 10px; padding-top: 10px; float: left;}
.left .listo {padding-top: 4px; color:#000000;}
.left .listo a {color: #000000;}
.left .listo a:hover {text-decoration: underline; color: #333333;}
.listo ul {list-style: none; line-height: normal; margin: 0; padding: 0; line-height: 18px;}
.listo .cat {padding-left: 6px; padding-bottom: 12px;}
.listo ul .cla {font-size: 14px; font-weight:bold;}
.listo .cat li {background: url(../gambar/iclist.gif) no-repeat; background-position: left 50%; padding-left: 8px;}

.ymcon { padding-top: 30px;}
.left .hotitem { padding-top: 30px;}

/* ------------------> MAIN-CONTENT RIGHT*/
div#maincontent .right {width: 705px; margin-left: 30px; float:left;}
.featured {width: 705px; height: 333px; background: url(../gambar/feat-bg.png) no-repeat;} 
.featured .slidepost {padding: 22px 0px 0px 25px;}

.homelist {width: 980px; margin-top: 20px;}
.homelist .hd, .homelist .hdsimp {width: 705px; height: 39px; background: url(../gambar/hd-panel1.jpg) no-repeat; font-size: 14px; font-weight:bold; color: #FFFFFF; padding: 10px 0px 0px 18px;}
.homelist .hdsimp { background: none; padding: 0; color: #000000; margin: -10px 0px; text-align: right; font-size: 14px; border-bottom: dotted 2px; height: auto; padding-bottom: 8px;}
.prodlist {padding-top: 6px; width: 720px; margin-left: -15px; overflow: hidden}

.prodlist .panel {width: 345px; height: 128px; float: left; background: url(../gambar/panel-prod.png) no-repeat; margin-bottom:12px; margin-left: 15px;}

.prodlist .panel .prodimg {margin: 9px 0 0 12px; float: left; width: 108px; height: 108px; }
.prodlist .panel .brand { width: 104px; height: 16px; background: url(../gambar/black_trans.png); color: #FFFFFF; font-size: 11px; padding-left: 4px; z-index: 10; float: left; top: 101px; left: -107px; position: relative;}
.prodlist .panel .brand a { color: #FFFFFF; }

.prodlist .panel .txt  {width: 206px; margin-left: 8px; float: left; margin-top: -8px;}
.prodlist .panel .txt .top {height: 94px;}
.prodlist .panel .txt .price { font-weight: bold; font-size: 17px; color:#FF0000; text-align:right; width: auto; height: 20px;}
.prodlist .panel .txt .price2 { font-weight: bold; font-size: 17px; color:#FF0000; text-align:right; width: auto; height: 20px; top:-15px; position: relative;}
.priceold { font-size: 12px; font-weight: bold; margin-bottom: 2px;  text-decoration: line-through}

.btmhome .news { width: 345px; height: auto; float: left;}
.btmhome .article { width: 345px; height: auto; float: right;}
.btmhome .hd { width: 345px; height: 39px; background: url(../gambar/hd-panel2.jpg) no-repeat; font-size: 14px; font-weight:bold; color: #FFFFFF; padding: 10px 0px 0px 18px; }
.btmhome .warp {clear: both; padding: 2px 0px; margin-bottom: 4px;}
.btmhome .date { font-size: 11px; text-align: right; padding-right: 12px;}
.btmhome .title a{font-weight: bold; font-size: 12px;}
.btmhome .hspace {min-height: 70px;}


.textlist { margin-bottom: 10px; border-bottom: dotted 1px #666666; width: 705px; }
.textlist .sublist { padding-bottom: 15px;}

/*
.newslist .date {float:left; font-size: 12px; font-weight: bold; width: 55px; text-align: center; line-height: 16px; font-family: Tahoma;}
.newslist .title {float: left; width: 548px; padding-left: 12px;line-height: 18px; padding-top: -2px;}
.newslist .title a{font-weight: bold; color: #FF0000; font-size:14px;}
.newslist .txt {}
*/

/* ------------------> MAIN-CONTENT PRODUCT*/
.homelist .productdet { width: 705px; height: auto; margin-top: 26px;}
.homelist .productdet .leftp { width: 250px; float: left; top: -2px; position: relative; background: #FFFFFF; } 
.homelist .productdet .imgwrap {width: 250px; text-align: center; display: table-cell; vertical-align: middle}
.homelist .productdet .rightp { width: 443px; float: left; margin-left: 12px; }
.homelist .productdet .content-det { clear: both; padding-top: 10px; width: 705px;}

.imgprod { width: 250px; height: 250px;}
.imgprod2 { width: 50px; height: 50px; margin: 0px 6px 10px; float: left;}

.homelist .productdet .rightp .title {font-size: 20px;line-height:normal;}
.homelist .productdet .rightp .brand {font-size: 14px;line-height:normal;margin: 5px 2px;}
.homelist .productdet .rightp .price {font-size: 16px; margin-top: 16px; font-weight: bold; }
.homelist .productdet .rightp .price .type { font-weight:normal;} .homelist .productdet .rightp .price br {margin-bottom: 6px;}
.homelist .productdet .rightp .short { margin-top: 14px; }
.homelist .productdet .rightp .viewimg { margin-top: 30px; padding-top: 20px; width: 450px; height: auto; background: url(../gambar/product-moreimg.png) no-repeat;}
.homelist .productdet .rightp .viewimg .main { float: left; margin: 0 5px; }
.homelist .productdet .rightp .viewimg img { margin: 0px 5px 8px 0px; width: 60px; height: 60px; padding: 1px; }
.homelist .productdet .rightp .viewimg img:hover { border: solid #999999 1px; padding: 0px; }

.homelist .productdet .content-det .bar { margin-top: 18px; height: 45px;}
.homelist .productdet .content-det .bar img{ margin: 0 20px; }
.homelist .productdet .content-det .content { height: auto; top: -10px; position: relative;}

.overview, .feature, .spec { width: 231px; text-align: center; padding-top: 3px; height: 18px; color: #FFFFFF; float: left;}
.overview { background: #009900; }
.overview:hover { background:  #00CC00;}
.feature { background: #333300; margin-left: 6px; }
.feature:hover { background: #666600;}
.spec { background: #3366CC; margin-left: 6px; }
.spec:hover { background: #3399FF; }
  
.item_description
{
	width: 100%;
	text-align: center; 
	padding-top: 3px; 
	height: 18px; 
	color: #FFFFFF; 
	float: left;
	background: #009900; 
}

.prodlist .panel { position: relative}
.prodlist .panel label { width: 81px; height: 81px; position: absolute; top: 0; left: 0; margin: -2px 0 0 -3px;}
	.prodlist .hotitem label { background: url(../gambar/ic-hot.png) no-repeat}
	.prodlist .bestseller label { background: url(../gambar/ic-best.png) no-repeat}
	.prodlist .newitem label { background: url(../gambar/ic-new.png) no-repeat}
	.prodlist .discount label { background: url(../gambar/ic-discount.png) no-repeat}
	.prodlist .preorder label { background: url(../gambar/ic-preorder.png) no-repeat}

.productdet .leftp label {width: 81px; height: 81px; position: absolute; top: 0; left: 0; margin: -3px 0 0 -3px;}
	.productdet .hotitem label { background: url(../gambar/ic-hot.png) no-repeat}
	.productdet .bestseller label { background: url(../gambar/ic-best.png) no-repeat}
	.productdet .newitem label { background: url(../gambar/ic-new.png) no-repeat}
	.productdet .discount label { background: url(../gambar/ic-discount.png) no-repeat}
	.productdet .preorder label { background: url(../gambar/ic-preorder.png) no-repeat}

.product-filter { top: 8px; position: relative}
	.product-filter a { display: inline-block; padding: 4px 10px; color: #FFFFFF; background: #a7a7a7; margin-right: 5px;
		-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
	.product-filter a:hover, .product-filter a.current { background: #993300;}	

/* ------------------> SEARCH-BOX*/

fieldset.search {
	border: 0;
	width: 250px;
	height: 48px;
	margin: 0;
	background: url(../gambar/search_bg.png) top left no-repeat;
	padding:0px;
	position:relative;
}

.search_box {
	border:0px; /*important*/
	background-color:transparent; /*important*/
	position:absolute; /*important*/
	top:12px;
	left:15px;
	width:200px;
	height:18px;
	color: #666666; font-size: 12px;
}

.search_box:focus {outline: none;}
 
.search_btn {
	
	display: none;
}





/* ------------------> FOOTER*/

#footer { width: 980px; clear: both; padding-top:6px; color:#333333; }
#logos { margin: auto; width: 541px; clear: both; padding-top: 40px; }
#footer .txt { background: url(../gambar/footer-bar.png) top no-repeat; text-align: center; padding-top:6px; margin-bottom: 30px;}

/* ------------------> MENU SAMPING*/
.menul p { }

.menul ul.menu, .menul ul.menu ul {
list-style: none; line-height: normal; margin: 0; padding: 0; line-height: 18px;
}

.menul ul.menu a {  display: block;  text-decoration: none; }

.menul ul.menu li {  margin-top: 1px;}

.menul ul.menu li a { color: #000; font-size: 14px; font-weight:bold; padding-top: 14px;}

.menul ul.menu li a:hover { text-decoration:none; color: #666666;}

.menul ul.menu li ul li a {font-weight: normal; background: url(../gambar/iclist.gif) no-repeat; background-position: left 50%; margin-left: 8px; padding: 0px; padding-left: 9px; font-size: 12px; padding-top: 3px;}

.menul ul.menu li ul li a:hover { }

.menul .code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.menul .code code { display: block; padding: 3px; margin-bottom: 0; }
.menul .code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.menul .indent1 { padding-left: 1em; }
.menul .indent2 { padding-left: 2em; }
.menul .indent3 { padding-left: 3em; }
.menul .indent4 { padding-left: 4em; }
.menul .indent5 { padding-left: 5em; }
	
	
.catdrop { height: 40px; left: 16px; position: relative; }

.viewtype { float: right; margin-top: -20px; top: -16px; position: relative;}

.panlist { font-size: 16px; width: 705px; float: right; font-weight: bold;}
.panlist .listn { background: #fff; padding: 12px 14px;} .panlist .listg { background: #f2f2f2; padding: 12px 14px;}
.listname { float: left; width: 485px; }
.listprice { float: right; text-align: right; width: 180px;}

.letoy { margin-left: 16px; margin-top: 10px; font-size: 14px; font-weight: bold; }

.slot { height: 24px; margin-top: 20px; border: solid 1px #BABABA; background-color: #FFFFFF; -moz-border-radius: 3em; padding-top: 8px; padding-left: 10px;}
.slot2
{ 
	border: solid 1px #BABABA; 
	background-color: #73FFB0;
	border-radius: 2px;
}

.cart_menu
{
	padding: 0;
	margin: 0;
}
.cart_menu .cart_total
{
	font-weight: bold;
	font-size: 16px;
	margin-left: 2px;
	color: #FFFFFF;
}
.cart_menu ul
{
	padding: 0;
	margin: 0;
	list-style: none;
}
.cart_menu li
{
	display: inline-block;
	position: relative;
	line-height: 22px;
	text-align: left;
}
.cart_menu li .cart_dropdown
{
	min-width: 250px;
	background: #FFFFFF;
	display: none;
	position: absolute;
	z-index: 999;
	left: 0;
	padding: 5px;
	border: 1px solid;
	border-radius: 2px;
	
}
.cart_menu li:hover .cart_dropdown{
	display: block;
}
.cart_menu li .cart_dropdown li{
	display: block;
}
.cart_menu .cart_list_item ul li
{
	line-height: 1.5em;
	border-top: 1px solid #B3C4C9;
	display:inline-block;
	padding-top: 10px;
}
.cart_menu .cart_list_item li:first-child{
	border-top: none;
}
.cart_menu .cart_list_item .cart_thumbnail
{
	width:50px;
	float:left;
}
.cart_menu .cart_list_item .cart_name
{
	width:190px;
	float:left;
	margin-left:5px;
	margin-top:-2px;
}
.cart_menu .cart_checkout
{
	text-align: right;
	border-bottom: 1px solid;
	padding-bottom: 5px;
}
.cart_menu .cart_remove_all
{
	text-align: center;
	border-top: 1px solid;
	padding-top: 5px;
}

table.checkout_table
{
	border-spacing: 0px;
	border:1px solid #788778;
	margin: 10px 0;
}
table.checkout_table td, th
{
	border:1px solid #788778;
	padding: 5px;
}