@charset "utf-8";

/*
Yong Sheng Confectionery | yongsheng.com.my
v.0.1a, version date: 25 Ogos 2008.

Cobweb Sdn Bhd <http://www.cobweb.com.my/>
Designer : Bryan Ngiam <mailto:bryan_ck@hotmail.com>
Thanks for looking at my source codes!! 
*/

@import url(reset.css);

/*BODY*/
body { font: 75% Arial, Helvetica, sans-serif; color: #555; background: #2b0707 url(../images/ys-bg.png) 0 0;}
html { height: 100%; }
body { min-height: 100%; height: 100%; }

/*GLOBAL SETTING*/
h1 { font: bold 105%/1.4em Helvetica, Arial, san serif; color: #ab0c0c;}
h2 { font: 2em/1.4em Helvetica, Arial, san serif; color: #2b0707; padding: 15px 0;}
h3 { font: 1.5em/1.4em Helvetica, Arial, san serif; color: #999; background: url(../images/ico_orange.jpg) no-repeat left 5px; padding-left: 20px; }
h4 { font: bold 2em/1.4em Ariel, Helvetica, san serif; color: #d8b16e;}
h5 { font: italic bold 1.5em/1.4em Ariel, Helvetica, san serif; color: #d8b16e;}
h6 { font: 2em/1.4em Ariel, Helvetica, san serif; color: #fff;}
a { color: #FF0066; text-decoration: none;}
a:hover { color: #ab0c0c;}
p { padding: 5px 0;}
.grey { color: #999;}
.right { float: right;}
.td { padding: 5px;}
.red { color: #ab0c0c; }
.inputstyles {margin: 1px; padding: 1px; border: 1px solid #ccc; font: 1em Arial, Helvetica, sans-serif; width: 350px; }

/*LAYOUT*/
#page { width: 960px; height: 100%; background: #FFF; margin: 0 auto; /*position: absolute; left: 50%; margin-left: -485px;*/ border: #150303 solid; border-width: 0 5px;}
#wrap_left { float: left; width: 630px; margin-left: 12px; background: url(../images/topbanner.jpg) no-repeat 0 0; }
#wrap_right { float: right; width: 295px; margin-right: 12px; background: url(../images/pic_right_shadow.jpg) repeat-y center top;}
#wrap_right_pic { width: 285px; margin-left: 5px; background: #f2869c url(../images/pic_right.jpg) no-repeat center bottom;}
#wrap_right_pic_cat { width: 285px; margin-left: 5px; background: #FEBA00 url(../images/pic_right_cat.jpg) no-repeat center top;}
#content { width: 630px; }
#content h4 { margin: 10px 0 0 10px;}

/*
#wrap_right { float:right; width:295px; height: 100%; position: absolute; right: 15px; background: url(../images/pic_right_shadow.jpg) repeat-y center top;}
#wrap_right_pic { width:285px; height: 100%; position: absolute; right: 5px; background: #410000 url(../images/pic_right.jpg) no-repeat center top;}
*/

/*LOGO*/
#logo { float: left; width: 230px; height: 90px; background: url(../images/logo.jpg) no-repeat 0 0; margin: 10px 5px 5px;}
#pdficon { float: right; margin-top: 50px; margin-right:280px; width: 110px; }
#pdficon img { margin: 0 10px 5px; }
	
/*MENU*/
#menu { width: 630px; height:48px; background: url(../images/mn_bg.jpg) repeat-x 0 0;}
#menu .mnleft { float:left; width: 10px; height:48px; background: url(../images/mn_left.jpg) no-repeat 0 0;}
#menu .mnright { float:right; width: 10px; height: 48px; background:url(../images/mn_right.jpg) right 0;}
#menu ul { float: left; margin-top: 17px;}
#menu ul li { display: inline; padding: 0 6px;}
#menu a { font-size: 1.2em; font-weight:bold; color: #FFF; text-decoration: none;}
#menu a:hover { color: #FFCC00;}

/*CAT MENU*/
#wrap_right_pic_cat p { padding: 0 0 1px;}
#wrap_right_pic_cat ul { padding: 0 20px; list-style:none;}
#wrap_right_pic_cat li { padding: 5px 0 10px; font:1em Helvetica, Arial, sans-serif; font-weight: bold ; color:#f36f21; border-bottom: 0.08em #FF6600 dotted; display: block;}
#wrap_right_pic_cat a { color:#ab0c0c; display: block; }
#wrap_right_pic_cat a:hover { color: #FFFFFF;}

/*SLIDE*/
#slide { width: 610px; height: 322px; background:url(../images/slide.jpg) no-repeat center top; padding: 10px; }

/*BOX*/
#box { width: 210px; float: left;}
#box .top { width: 210px; height: 10px; background:url(../images/box_top.jpg) no-repeat 0 0; }
#box .con { width: 190px; min-height: 165px; background: url(../images/box_bg.jpg) repeat-y 0 0; padding: 2px 9px; }
#box .con img { margin: 5px 0 0; text-align: center; border: 1px #ffde7d solid;}
#box .more { width: 186px; height: 20px; background: url(../images/box_bg.jpg) repeat-y 0 0; padding: 0 12px; }
#box .more img { float:left; }
#box .more p { float:right; margin: 2px 0 0; color:#ab0c0c; padding: 0; }
#box .bottom { width: 210px; height:10px; background:url(../images/box_bottom.jpg) no-repeat 0 0;}
#box h1 { margin-left: 2px; width:15em;}


/*CONTAINER*/
#container { width: 630px; }
#container .top { width: 630px; height: 10px; background: url(../images/con_top.jpg) no-repeat 0 0; }
#container .con { width: 590px; background: url(../images/con_bg.jpg) repeat-y 0 0; padding: 0 20px 10px;}
#container .con img { padding: 5px 0;}
#container .bottom { width: 630px; height:10px; background: url(../images/con_bottom.jpg) no-repeat 0 0;}
#container .con .Bimg { float: left; padding: 0; margin: 5px 15px 20px 0; border: 1px #ffde7d solid;}
#container .outlets { width: 590px; background: url(../images/con_bg.jpg) repeat-y 0 0; padding: 0 20px 10px;}
#container .outlets p { padding-left: 20px; margin-left: 10px; background: url(../images/ico_orange.jpg) no-repeat left 5px; font-weight: bold;}
#container .delivery { width: 590px; background: url(../images/con_bg.jpg) repeat-y 0 0; padding: 0 20px 10px;}
#container .delivery p { padding-left: 20px; margin-left: 10px; background: url(../images/ico_orange.jpg) no-repeat left 5px;}
#container .td { font-weight: bold; }
#container .td2 { line-height: 18px; }
#container .td2 p { padding-left: 20px; }
#container .con p { padding-left: 20px; }

#container .news { width: 590px; background: url(../images/con_bg.jpg) repeat-y 0 0; padding: 0 20px 10px;}




/*PRODUCT DETAIL*/
#PIDdetail h5 { width: 270px; margin-bottom: 10px; }

/*FOOTER*/
#footer { width: 620px; margin: 0 auto; padding: 20px 0 30px; font-size: 0.9em;}
#footer a { color: #aaa;}
#footer a:hover { color: #FF0066;}

/*PAGINATION*/
.pagination{ margin-top:20px; padding: 10px 0; border-bottom: 2px #f5f5f5 solid; border-top: 2px #f5f5f5 solid; }
.pagination ul{ margin: 0 20px 0; padding: 0; text-align: right; /*Set to "right" to right align pagination interface*/ font-size: 1.3em; }
.pagination li{ list-style-type: none; display: inline; padding-bottom: 1px; color: #ab0c0c; }
.pagination a, .pagination a:visited{ padding: 0 5px; text-decoration: none; color: #ab0c0c; font-weight: bold;}
.pagination a:hover, .pagination a:active{ color: #FF0066; font-weight: bold;}
.pagination a.currentpage{ color: #333 !important; font-size: 1.5em; font-weight: bold; cursor: default; vertical-align: -2px; }
.pagination a.disablelink, .pagination a.disablelink:hover{ cursor: default; color: #929292; font-weight: normal !important; }


.ellipsis{ white-space:nowrap; width:100%; overflow:hidden;	font:bold "Helvetica","Arial", "san serif";	-o-text-overflow:ellipsis; /*Opera 9*/ text-overflow: ellipsis; }
.ellipsis window{	width:100%; -moz-user-focus:normal;	-moz-user-select:text; }
.ellipsis description{ -moz-user-focus:normal; -moz-user-select:text; }