/* 垂直滾動 */
/* root element for scrollable */
.vertical {
    position:relative;
    overflow:hidden;
    height: 265px;
    width: 200px;
}
/* root element for scrollable items */
.subMenu1 .items,.subMenu2 .items {
    position:absolute;
    height:20000em;
    margin: 0px;
}
/* single scrollable item */
.subMenu1 .item,.subMenu2 .item {
    margin: 10px 0;
    padding: 15px;
}
.flexdropdownmenu a.prev{
	background-image: url(../images/icon/arrowUp.png);
	background-repeat: no-repeat;
	background-position: 10px 0px;
	height: 11px;
	width: 30px;
	display: block;
	text-indent: -3000px;
	margin: 5px 0;
	cursor:pointer
}
.flexdropdownmenu a.prev:hover { background-position: 10px -11px;}
.flexdropdownmenu a.next{
	background-image: url(../images/icon/arrowDown.png);
	background-repeat: no-repeat;
	background-position: 10px 0px;
	height: 11px;
	width: 30px;
	display: block;
	text-indent: -3000px;
	margin: 5px 0;
	cursor:pointer
}

.flexdropdownmenu a.next:hover { background-position: 10px -11px;}
.vertical .subMenuArea{ height: 280px; overflow: hidden; font-size: 13px;}
.vertical .subMenuArea .subMenuList{ width: 165px; padding: 2px 10px 3px 25px; display: block; margin-top: 1px;}
.vertical .subMenuArea .subMenuList:link	{ color: #666;}
.vertical .subMenuArea .subMenuList:visited	{ text-decoration: none; color: #666;}
.vertical .subMenuArea .subMenuList:hover	{
	background-image: url(../images/menuBg-over.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	text-decoration: none;
	color: #690052;
}
.vertical .subMenuArea .subMenuList:active	{ text-decoration: none; color: #666;}
.vertical .subMenuArea .sel	{
	background-image: url(../images/menuBg-over.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	text-decoration: none;
	color: #690052;
}


/* 水平滾動 */
/* root element for the scrollable.  when scrolling occurs this element stays still. */
.scrollable {
    /* required settings */
    position:relative;
    overflow:hidden;
	float: left;
}
.productBtn .scrollable{ width: 1000px; height: 160px; overflow: hidden;}
.detailPic .scrollable{ width: 400px; height: 365px;}
.smallPic .scrollable{ width: 465px; height: 110px; padding: 5px 0;}
.relatedProducts .scrollable{ width: 895px; height: 280px; padding: 5px 0; margin: 0 15px;}
.mobile .smallPic .scrollable{ width: 952px; height: 110px; padding: 5px 0;}

/*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}

.scrollable .items div { float: left; margin: 0 auto;}
.productBtn .items div{ width: 1023px;}
.detailPic .items div{
	width: 365px;
	height: 365px;
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
}
.smallPic .items div{ width: 465px;}
.relatedProducts .items div{ width: 895px;}
.mobile .smallPic .items div{ width: 952px;}

/* single scrollable item */
.productBtn img {
	margin-right: 23px;
    width: 315px;
    height: 157px;
}

/* active item */
.scrollable .active {
    border: 2px solid #000;
    position: relative;
    cursor: default;
}

/* this makes it possible to add next button beside scrollable */
/* prev, next, prevPage and nextPage buttons */
a.browse {
	background-position: 0px 0px;
	background-repeat: no-repeat;
	width: 15px;
	height: 22px;
	display: block;
	cursor: pointer;
	float: left;
}
.productBtn a.browse{ margin: 65px 0;}
.detailPic a.browse{ width: 35px; height: 54px;}
.smallPic a.browse{ margin: 50px 3px 0 3px;}
.relatedProducts  a.browse{ margin: 125px 0 0 0;}
.mobile .smallPic a.browse{ margin: 50px 2px 0 2px;}

/* right */
a.right { background-image: url(../images/icon/arrowRight_s.png);}
a.right:hover { background-position: 0px -22px;}
.productBtn a.right{ position: absolute; left: 50%; margin-left: 480px; z-index: 20;}
.detailPic a.right {
	background-image: url(../images/icon/arrowRight.png);
	position: absolute; margin-left: 50%; z-index: 20;
	top: 165px;
}
.detailPic a.right:hover { background-position: 0px -54px;}


/* left */
a.left { background-image: url(../images/icon/arrowLeft_s.png);}
a.left:hover  { background-position: 0px -22px;}
.productBtn a.left { position: absolute; left: 50%; margin-left: -498px; z-index: 20;}
.detailPic a.left {
	background-image: url(../images/icon/arrowLeft.png);
	position: absolute; margin-left: 50%; z-index: 20;
	top: 165px;
}
.detailPic a.left:hover  { background-position: 0px -54px;}


/* disabled navigational button */
a.disabled { 
 filter:alpa(opacity=20);   /* old IE */
 filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20,FinishOpacity=15, Style=3, StartX=0, FinishX=100, StartY=0,FinishY=16);/*supported by current IE*/
 opacity:0.2;
}

.flexdropdownmenu a.disabled { 
	background-image: none;
	cursor:auto;
	opacity: 0;
}

.flexdropdownmenu2 a.next{
	background-image: none;
	background-repeat: no-repeat;
	background-position: 10px 0px;
	height: 11px;
	width: 30px;
	display: block;
	text-indent: -3000px;
	margin: 5px 0;
	cursor:auto
}

.flexdropdownmenu2 a.prev{
	background-image: none;
	background-repeat: no-repeat;
	background-position: 10px 0px;
	height: 11px;
	width: 30px;
	display: block;
	text-indent: -3000px;
	margin: 5px 0;
	cursor:auto
}