#ItemCarousel {	padding-top:5px; height: 70px; width: 100%; overflow: hidden; }
#ItemCarouselIconBar { display: block; height: 25px; background-color: #e0e0e0; }
#ItemCarouselItemInfo,
#ItemCarouselItemInfoKEY,
#ItemCarouselItemInfoTABS {	display: block; margin: 0px; padding: 0px; overflow: hidden; width: 100%; height: 100%; }
#ItemCarouselItemInfo { padding-top: 4px; width: 100%;padding-left:2px; }

#wizardheader .wizardtab .wizardtabiframe { background-image: url("pnet/prodtheme/prodimage/graybar.gif"); background-repeat: repeat-x; color: white; }
span.itemimage { display:block; float:left; opacity:0.5; filter:alpha(opacity=50); /* For IE8 and earlier */ border: 2px solid #BBB; 
				height: 36px; width: 36px; margin:2px; overflow: hidden; }
span.current, span.highlight { border: 2px solid #264160 !important; opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ }
span.itemimage > img { postion: relative; padding: 2px; height: 32px; width: 32px; overflow: hidden; }

div#nextprev { position: absolute; top: 45%; width: 100%; height: 56px; }

div.itemnavi { display: block; margin: 0 auto; width: 100%; text-align: center; }
div.itemnavi img.previtem { height: 16px; width: 16px; float: left; padding-left: 7px; }
div.itemnavi img.nextitem { height: 16px; width: 16px; float: right; padding-right: 7px; }

a.prev, a.next { height: 24px; width: 20px; }

/* Scrollable css */
.ItemCarouselScrollableContainer { margin:0 auto; width:100%; height:48px; overflow: hidden !important;}
/*  root element for the scrollable. When scrolling occurs this element stays still.  */
.ItemCarouselScrollable { position:relative; margin:0 auto; border:1px solid #ccc; overflow:hidden !important; height: 44px !important; width: 440px !important;
						  float:left;	/* this makes it possible to add next button beside scrollable */
							/*    background:url(/media/img/gradient/h300.png) repeat-x; */ 
}
/* active item */
.ItemCarouselScrollable .active { border:2px solid #000; position:relative; cursor:default; }
/* 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. */
.ItemCarouselScrollable .items { /* this cannot be too large */ width:20000em;  position:absolute; clear:both; }
.items div.page { float:left; width:680px; }

/* Scrollable Button css */
/* prev, next, prevPage and nextPage buttons */
a.browse { 	display:block; width:30px; height:30px; float:left; margin:7px 10px; cursor:pointer; font-size:1px;
			background:url(/pnet/prodtheme/prodimage/itemcarouselnextprev.png) no-repeat;}
/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
/* left */
a.left { margin-left: 0px; }
a.left:hover  { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
/* up and down */
a.up, a.down  { float: none; margin: 10px 50px; background:url(/pnet/prodtheme/prodimage/vert_large.png) no-repeat;
}
/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }
/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }
/* disabled navigational button */
a.disabled { visibility:hidden !important; }

/* Scrollable Navigator css */
.navi { display: block; margin:0 auto; width:200px; height:20px; }	/* position and dimensions of the navigator */
.navi a { width:8px; height:8px; float:left; margin:3px; display:block; font-size:1px; 
    background:url(/pnet/prodtheme/prodimage/itemcarouselnavigator.png) 0 0 no-repeat; }	/* items inside navigator */
.navi a:hover { background-position:0 -8px; }	/* mouseover state */
.navi a.active { background-position:0 -16px; }	/* active state (current page state) */

/* WizardItemCarouselDisplay */
li { list-style-type: none; }
.ProductHeader.last { border-bottom: 1px solid #EBEDEB; }
.lastOne { border-bottom: 1px solid #EBEDEB; }
#ProductMainRight .MyProductList .ProductHeader {
	padding: 0px; 
	margin: 0px; 
	width: 100%;
	display: block;
	border-top: 1px solid #EBEDEB;
    padding: 2px 0px;
    overflow: hidden;
}
#InfoKEY, #Summary, #Details, #Allowance, #ConfigurableItems, #URL, #Movement, #Schedule {
	display: block;
	/*
    border-top: 1px solid black;
    padding: 2px 0px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    */
}

div#InfoKEY > div.ProductImage {
	width: 20%;
	font-weight: bold;
	margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 0px;
	float: left;
	padding-right:5px;
	padding-left:5px;
}
div#InfoKEY > div.ProductImageInfo { float: right; width: 50%; margin-left: 0.25em;	}
.ProductNameHeader { color: #70BF60; font-size: 12pt; font-weight: bold; display: block;}
.MyProductList { margin-left: 0px; padding: 5px; }

#ItemIconBar { display: block; height: 25px; background-color: #e0e0e0; }
#ItemIconBar span { float: left; margin-left: auto; margin-right: auto;	padding:3px; height: 18px; }
#ItemIconBar span.itemnumber { float: right; font-weight: bold; padding:3px; }
#ImagePreview > div > img {	width: 50px; height: 50px; }

/* Compare Tray */
.compareTray {	background: 0; height: 33px; width: 100%; padding: 0px; }
.compareTray ul { margin: 0px; float: right; width: 150px; }
.compateTray ul li img { width:24px; height: 20px; }
.compareTray ul li {	background: url("/pnet/prodtheme/prodimage/itemcarousal-compare-item-bg.png") repeat scroll 0 0 transparent;
						border: 1px solid #9A9B9B;
						display: block; float: left; height: 26px; margin: 0 7px 0 0; position: relative; text-align: center; width: 26px; }
.compareTray ul li .remove {	background: url("/pnet/prodtheme/prodimage/itemcarousal-compare-item-remove.png") no-repeat scroll 0 0 transparent;
					display: block; height: 13px; position: absolute; right: -5px; top: -5px; width: 13px; cursor:pointer; }
.compareTray button.compare { float: right; }
.compareTray span.compare { float: left; }

/* the overlayed element */
.compare_overlay { display:none; z-index:10000; background-color: #f4f4f4; width:450px; height:450px; min-height:200px; border:1px solid #666; overflow: hidden; position: absolute;
				    /* CSS3 styling for latest browsers */
				    -moz-box-shadow:0 0 90px 5px #000;
				    -webkit-box-shadow: 0 0 90px #000; 
}

/* container for external content.*/
div.contentWrap { width: 100%; height:100%; overflow-y:hidden; background-color: #f4f4f4;}
/* close button positioned on upper right corner */
.compare_overlay .close { position:absolute; right:8px; top: 8px; cursor:pointer; z-index:10001; }

/* WizardItemCarouselCompare */
#Image { border-top: 1px solid black; padding: 2px 0px; overflow: hidden; width: 100%; height: 100%; }
div#info > div.ProductImage { width: 20%; font-weight: bold; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; float: left; padding-right:5px; padding-left:5px; }

#compare .product-content-top { min-height: 278px; background-color: #f4f4f4;}
#compare .product-content { position: relative; clear: left; padding-bottom: 0; min-height: 415px; background-color: #f4f4f4;}

table.compare-product tr.itemHeader { background: none repeat scroll 0 0 #E7E7E7; font-family: arial black; font-size: 12px; height: 30px; line-height: 30px; padding: 0 10px;
				text-align: left; width: 100%; color: #49494A; border: 1px solid #C3C4C4; }
table.compare-product tr.highlight, table.compare-product tr.highlight td { background: none repeat scroll 0 0 #E3F3F3; }
table.compare-product td.compare-product { margin: 0; padding: 0; background-color: white; background: white;}
table.compare-product td span.itemnumber { text-align: center; }
table.compare-product td span.remove-product { margin: 5px; }

.clear { clear: both; }