/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
a.relatedItmTitle{font:normal normal 12px Tahoma;color:#000!important;text-decoration:none}
hr.dtlsPage{height:1px;font-size:0px;line-height:0px;color:#ccc;background:#ccc;margin:0px 10px}
/*#WhoBoughtProductsCont,#NewRelatedProductsCont{width:700px;margin-right:23px;height:140px}
#NewRelatedProducts .newArrivalBg{margin-left:-130px}*/
#Offers{/* required settings */
	position:relative;overflow:hidden;width:650px!important;height:280px!important;margin:15px 50px;#margin-top:-10px /* custom decorations ;border:1px solid #cfcfcf*/}
#NewArrival{/* required settings */
	position:relative;overflow:hidden;width:415px;height:170px;margin-right:8px /* custom decorations */}
#NewRelatedProducts{/* required settings */
	position:relative;overflow:hidden;width:670px;height:100px;margin-right:15px /* custom decorations */}
#Stores{/* required settings */
	position:relative;overflow:hidden;width:190px;height:500px}
#Stores div{height:450px}
#imgsGalry{width:230px!important;float:right}
#imgsGalry .scrollable p{float:left;margin:0px;width:64px}
#imgsGalry .scrollable{position:relative!important;overflow:hidden;margin-right:-8px;width:196px;height:64px;float:right!important;right:12px;display:inline}
#imgsGalry .scrollable .items{clear:both;width:20000em;position:absolute;color:#cad9e1;left:0px}
#imgsGalry p img{margin:5px 0 0 5px!important}
/*
	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.
*/


#Offers img{float:left;width:650px;margin-right:50px;height:280px}


#NewArrival img{float:left;width:130px;height:98px;padding-bottom:5px;/*;margin:10px 0px 5px 5px;border:1px solid #ccc*/}
/*#NewRelatedProducts img{float:left;width:128px;height:98px;margin:10px 0px 5px 5px;border:1px solid #ccc}*/
#Stores img{float:left;clear:both;border:1px solid #ccc;width:188px;height:130px;margin:15px 0px !important}
/* active item */
.scrollable .active{border:2px solid #000;position:relative;cursor:default}
/* this makes it possible to add next button beside scrollable */
#OffersCont{float:left;z-index:100;background:#fff;border-bottom:1px #d9d9d7 solid;border-left:1px #d9d9d7 solid;border-right:1px #d9d9d7 solid}
/* prev, next, prevPage and nextPage buttons */
#Offers a.browse{background:url('/EmallStyleLibrary/Images/scrollerArrows.png') no-repeat;display:block;width:40px;height:71px;float:left;margin:100px 10px;cursor:pointer;font-size:1px}
/*#OffersCont a.browse{#margin-top:-190px}*/
#OffersCont a.browse{#margin-top:-175px}

#TopTen a.browse{background:url('/EmallStyleLibrary/Images/scrollerArrows.png') no-repeat;display:block;width:40px;height:71px;float:left;margin:130px 10px;cursor:pointer;font-size:1px}
#imgsGalry a.prev,#imgsGalry a.next{background:url('/EmallStyleLibrary/Images/mediArrows.png') no-repeat;display:block;width:6px;height:10px;float:left;cursor:pointer;font-size:1px;padding-bottom:50px}
#StoresCont a.browse{background:url('/EmallStyleLibrary/Images/smallArrows.gif') no-repeat;display:block;width:6px;height:10px;float:left;margin:10px;cursor:pointer;font-size:1px}
a.browse{background:url('/EmallStyleLibrary/Images/scrollerArrows.png') no-repeat;display:block;width:40px;height:71px;float:left;margin:130px 10px;cursor:pointer;font-size:1px}
/*#WhoBoughtProductsCont a.browse, */#NewArrivalCont a.browse/*, #NewRelatedProductsCont a.browse*/{float:left;z-index:100;background:url('/EmallStyleLibrary/Images/smallArrows.gif') no-repeat;margin:0px;width:6px;height:10px}
/* right */
a.right, a.right:hover{background-position:0 -79px;margin:-180px 0 0 700px;#margin-left:-50px;#left:0px;float:right;clear:right;z-index:900;position:absolute;#position:relative}
#Offers a.right, #Offers a.right:hover{background-position:0 -79px;margin-left:700px;#margin-left:-50px;#left:0px;float:right;clear:right;z-index:1000;position:absolute;#position:relative}
#OffersCont a.left, #OffersCont a.left{#position:absolute;#margin-top:120px}
#TopTen a.right, #TopTen a.right:hover{background-position:0 -79px;margin-left:700px;#margin-left:-50px;#left:0px;float:right;clear:right;z-index:1000;position:absolute;#position:relative}
#StoresCont a.right, #StoresCont a.right:hover{background-position:0 -12px;float:right;clear:right;z-index:900;margin-right:75px}
a.rightNewArrival, a.rightNewArrival:hover{background-position:0px 0px!important;float:right;clear:right;z-index:900;margin:-100px 0 0 1px!important}
/*a.rightNewRelatedProducts, a.rightNewRelatedProducts:hover{background-position:0px 0px!important;float:right;clear:right;z-index:900;margin:-50px 710px 0 1px!important}
#WhoBoughtProductsCont a.rightNewRelatedProducts, #WhoBoughtProductsCont a.rightNewRelatedProducts:hover{background-position:0px 0px!important;float:right;clear:right;z-index:900;margin:-50px 710px 0 1px!important}*/
/* left */
a.left, a.left:hover{margin-right:700px;background-position:0 0;z-index:900;position:absolute;#position:relative}
#Offers a.left, #Offers a.left:hover{margin-right:-50px;background-position:0 0;z-index:1000;position:absolute;#position:relative}
#OffersCont a.left, #OffersCont a.left:hover{margin-right:710px;#margin-right:660px}
#TopTen a.left, #TopTen a.left:hover{margin-right:-50px;background-position:0 0;z-index:1000;position:absolute;#position:relative}
#StoresCont a.left, #StoresCont a.left:hover{background-position:0 0;z-index:900;margin-left:75px}
a.leftNewArrival, a.leftNewArrival:hover{background-position:0px -12px!important;z-index:900;margin:70px -5px 0 420px!important;position:absolute}
/*a.leftNewRelatedProducts, a.leftNewRelatedProducts:hover{background-position:0px -12px!important;z-index:900;margin:60px -120px 0 420px!important;position:absolute}
#WhoBoughtProductsCont a.leftNewRelatedProducts, #WhoBoughtProductsCont a.leftNewRelatedProducts:hover{background-position:0px -12px!important;z-index:900;margin:60px -230px 0 420px!important;position:absolute}*/
/* disabled navigational button */
a.disabled{visibility:hidden !important}


/*fix related items*/
/*#NewRelatedProducts .add2btn{margin-right:40px}*/
#imgsGalry a.next{width:6px;margin:-60px 0 -60px 0;z-index:900;background-position:-6px 0;float:right;clear:right;text-decoration:none!important}
#imgsGalry a.prev{width:6px;margin:5px -32px 0 0;z-index:900;background-position:0 0;text-decoration:none!important}
form#aspnetForm{overflow:hidden!important}
/*********************scrollable-navigator.css*********************/
/* position and dimensions of the navigator */
#OffersCont .navi{height:20px;position:relative;margin:-5px 50px 0 0!important;z-index:1000;#float:left}

/* items inside navigator */
.navi a{width:8px;height:8px;float:right;margin:3px;background:url('/EmallStyleLibrary/Images/navigator.png') 0 0 no-repeat;display:block;font-size:1px}
/* mouseover state */
.navi a:hover{background-position:0 -8px}
/* active state (current page state) */
.navi a.active{background-position:0 -16px}

#imgsGalry{float:right!important;position:absolute!important}

#NewArrival .items div{float:right}
#NewArrival .items{left:0px}

/* scrollable */
.scrollable .items{/* this cannot be too large */width:20000em;position:absolute;clear:both}
.items div{float:right}
#OffersCont .items div, #StoresBannerRotator .items div, #TopTen .items div, #HotDeals .items div, #Packages .items div , #ProductWithGift .items div{float:left}
#TopTen .items div .TopTenBg .f, #HotDeals .items div .TopTenBg .f, #Packages .items div .TopTenBg .f, #ProductWithGift .items div .TopTenBg .f{float:right!important}

#Offers .items{margin-top:10px}
/* scroll of TopTen*/
#TopTenCont{width:190px}
#TopTen{position:relative;overflow:hidden;width:190px;height:100px;border:1px solid #ccc;padding-bottom:50px}
#TopTenCont .navi{width:150px;height:10px}
#TopTen img.featProdImg{float:left;width:190px;height:100px}
#TopTenCont .add2btn{margin:0 0 0 5px;*margin:0 5px 0 0;}

/* the below classes added by doaa */
/* scroll of HotDeals */
#HotDealsCont {width:190px}
#HotDeals{position:relative;overflow:hidden;width:190px;height:100px;border:1px solid #ccc;padding-bottom:50px}
#HotDealsCont .navi{width:150px;height:10px}
#HotDeals img.featProdImg{float:left;width:190px;height:100px}
#HotDealsCont .add2btn{margin:0 0 0 5px;*margin:0 5px 0 0}

/* scroll of Packages */
#PackagesCont {width:190px}
#Packages{position:relative;overflow:hidden;width:190px!important;height:100px!important;border:1px solid #ccc;padding-bottom:50px}
#PackagesCont .navi{width:150px;height:10px}
#Packages img.featProdImg{float:left;width:190px;height:100px}
#PackagesCont .add2btn{margin:0 0 0 5px;*margin:0 5px 0 0}

/* sroll of ProductWithGift */
#ProductWithGiftCont {width:190px}
#ProductWithGift{position:relative;overflow:hidden;width:190px!important;height:100px!important;border:1px solid #ccc;padding-bottom:50px}
#ProductWithGiftCont .navi{width:150px;height:10px}
#ProductWithGift img.featProdImg{float:left;width:190px;height:100px}
#ProductWithGiftCont .add2btn{margin:0 0 0 5px;*margin:0 5px 0 0}

/* StoresBannerRotator */
/*#StoresBannerRotator{float:left;z-index:100;background:#fff;border-bottom:1px #d9d9d7 solid;border-left:1px #d9d9d7 solid;border-right:1px #d9d9d7 solid}
#StoresBannerRotator{#margin-top:-190px}
#StoresBannerRotator a.left, #StoresBannerRotator a.left{#position:absolute;#margin-top:120px}
#StoresBannerRotator a.left, #StoresBannerRotator a.left:hover{margin-right:710px;#margin-right:660px}
#StoresBannerRotator .navi{height:20px;position:relative;margin:-5px 50px 0 0!important;z-index:1000;#float:left}
*/

/* StoresBannerRotator */
.ItemsStoresBannerRotator img{width:620px!important;height:140px!important}
.ItemsStoresBannerRotator{margin:0 0 10px 40px!important}
#OffersCont #Offers{height:140px;*height:150px;}
.StoresBannerRotatorCont #Offers{margin:0px 50px!important;*margin:10px 50px 15px!important;}
.StoresBannerRotatorCont .navi a.active{display:none!important}
.StoresBannerRotatorCont #Offers .items{margin-top:15px}
.StoresBannerRotatorCont{margin-bottom:10px!important}