/* Note: common design styles like borders, red color items, etc should be controlled by adding a class to the required element so that they only need to be added to the style sheet once, and be turned on and off in the markup or with javascript. As long as inline style="" declarations are avoided, this will let us change things on the fly.
 * i.e. <div class='our-price emphasis'>Our price: 19.99</div>
 */

.border {
	border: 1px solid #ccc;
}
.border-top {
	border-top: 1px solid #ccc;
}
a.emphasis, .emphasis, #product-body a:link.emphasis, #product-body a:visited.emphasis {
	color:#f00;
}
br.clear {
	clear:both;
	height:0px;
	margin:0;
	padding:0;
	line-height:0;
}
#product-body div.top {
	margin:10px 0;
	padding-top:10px;
	border-top:1px solid #ccc;
	text-align:right;
	font-weight:bold;
}
div.top a {
	padding-left:6;/*3px image + 3px padding*/
	background:url(http://lib.store.yahoo.net/lib/ylighting/sprite-single-arrow-up.gif) left no-repeat;
}
.area-title {
	color:#666;
	font-size:105%;
}
.glossary-definition {
	display:none;
}
#cluetip .glossary-definition {
	display:block;
}
#valueProp,
#valueProp div,
#valueProp p {
	display:none;
}
/*
 * Global Sprites
 */
.sprite-ratings {
	background:url(http://lib.store.yahoo.net/lib/ylighting/sprite-ratings.png) no-repeat;
	text-indent:-99999;
}
.sprite-ratings.sprite-ratings-5 {background-position:0 0}
.sprite-ratings.sprite-ratings-4-5 {background-position:0 -16}
.sprite-ratings.sprite-ratings-4 {background-position:0 -31}
.sprite-ratings.sprite-ratings-3-5 {background-position:0 -46}
.sprite-ratings.sprite-ratings-3 {background-position:0 -61}
.sprite-ratings.sprite-ratings-2-5 {background-position:0 -76}
.sprite-ratings.sprite-ratings-2 {background-position:0 -91}
.sprite-ratings.sprite-ratings-1-5 {background-position:0 -106}
.sprite-ratings.sprite-ratings-1 {background-position:0 -121}
.sprite-ratings.sprite-ratings--5 {background-position:0 -136}
.sprite-ratings.sprite-ratings-0 {background-position:0 -151}
/*
 * Product Page
 */
#product-body {
	clear:both;
}

#product-body div,
#product-right ul,
#product-right li { /*reset all styles to have no margin or padding, to eliminate browser differences and override styles from edison and ylighting*/
	margin:0;
	padding:0;
}

#product-body a:link {
	color:#777;
}
#product-body a:visited {
	color:#777;
}
#product-body a:hover {
	color:#666;
}
#product-body a:focus {
	color:#777;
}
#product-body a:active {
	color:#777;
}

#next-back {
	float:right;
	clear:left;
}
#product-body .our-price,
#cluetip .our-price {
	font-size:115%;
	color:#f00;
}
#product-body .was-price {
	text-decoration:line-through;
	color:#777;
}
#product-body .compare-price {
	color:#777;
}

/*
 * product-left block
 */
div#product-left {
	float:left;
	width:360px;
	margin-right:6px;
	/*border:1px solid #f00;*/
}
/*
 * holonyak-product-image
 */
#mainImage{
	margin-bottom:10px;
}
#product-left .view-larger {
	float:right;
	margin-bottom:0;
	padding-right:15px; /* 4 px padding + 11px image between image and text*/
	background:url(http://lib.store.yahoo.net/lib/ylighting/sprite-view-larger-arrow.gif) right no-repeat;
}
/*
 * holonyak-more-images-swap
 */
div#product-left div#picture-gallery {
	float:left;
	margin-top:0;
	padding-top: 10px;
	border-top:1px solid #ccc;
	width:360px;
}
div#picture-gallery .area-title span { /*the more-images-text, added via javascript*/
	padding-left:3px;
	font-weight:bold;
	text-decoration:underline;
}
#picture-gallery a span,
#picture-gallery a:hover span {
display:none;
}
#picture-gallery a span {
display:none;
}
#picture-gallery a.trigger_product_zoom img {
	float:left;
	padding:1px;
	margin:10px 10px 0 0;
	width: 45px;
	height: 45px;
	border:1px solid #ccc;
}
/*
 * END product-left block
 */

/*
 * product-right block
 */
#product-right,
div#product-body .product-order { /*common layout styles for the blocks on the right side of the product page*/
	/*border:1px solid #f00;*/
	float:right;
	width:556px;
}
table#product-right {
	margin-bottom:6px;
}
table#product-right td.spacer {
	width:6px;
	font-size:0px;
	color:#fff;
}

/*
 * holonyak-product-info
 */
td#product-info { /* do not apply styles to this or change any values, style in div#product-info .inner .content */
	border:1px solid #ccc;
	padding:10px;
	vertical-align:top;
}
#product-info h1 {
	margin:0 0 8px 0;
	padding:0;
	font-size:200%;
	font-weight:normal;
}

#product-info div.price-block div {
	margin-bottom:3px;
}
#product-info .free-shipping {
	float:left;
}
#product-info #price-match {
	float:right;
	font-weight:bold;
	line-height:105%;
	padding:3px 17px 3px 0;/* 3px padding + 14px image*/
	background:url(http://lib.store.yahoo.net/lib/ylighting/sprite-info-icon.gif) right no-repeat;
}
#product-info div#product-info-ratings-reviews,
#product-info .product-tags {
	margin-top:10px;
	padding-top:10px;
	border-top:1px solid #ccc;
}
div#product-info-ratings-reviews a {
	margin-right:10px;
}
#product-info .average-rating {
	margin-bottom:6px;
	font-weight:bold;
}
#product-body div.x-out-of-5 {
	padding-left:84px; /*79px image + 5px padding*/
	display:inline;
}
#product-info .product-tags {
	list-style-type: none;
	list-style-image:none;
}
#product-info .product-tags li:first-child {
	padding-left:0;
	border:0;
}
#product-info .product-tags li {
	padding: 0 4px;
	float:left;
	border-left:1px solid #ccc;
}
.product-tags .quick-ship {
	font-style:italic;
}
/*
 * holonyak-product-menu
 */
div#product-body #product-menu { /* do not apply styles to this */
	vertical-align:top;
	width: 153px;
	padding:10px 10px 0 10px;
	border:1px solid #ccc;
}

div#product-body td#product-menu h5 {
	margin:0 0 3px 0;
	font-weight:bold;
}
div#product-body #product-menu ul { /*Related Info and Tools*/
	list-style-type:none;
	list-style-image:none;
	margin:0 0 10px 0px;
}
div#product-body #product-menu ul li a {
	padding:4px 0;
	display:block;
	border-top: 1px solid #ccc;
	cursor:pointer;
}
div#product-body #product-menu ul li:first-child a {
	display:block;
	border-top:0;
}
div#product-info-ratings-reviews a span,
div#product-body #product-menu a span{ /* the arrow image beside the menu link*/
	padding-right:7px;
	background: url(http://lib.store.yahoo.net/lib/ylighting/sprite-single-arrow-right.gif) right no-repeat;
}

/*
 * holonyak-product-order
 */
div#product-body .product-order .content {
	padding:10px;
	border:1px solid #ccc;
}
#product-body .product-order .content h1 {
	display:inline;
}
div#product-body .product-order div.content p {
	margin:7px 0 0 0;
	padding:0;
}
.product-order .price-block{
	float:right;
	padding-left:10px;
}
div#product-body form.product-order div.product-order-button-block {
	margin-top:10px;
	line-height:25px;
	font-weight:bold;
}
.product-order .product-order-button-block div {
	float:right;
}
/*
 *  END product-right block
 */

/*
 * holonyak-required-accessories-block
 * holonyak-cross-sells
 */
div#related-items,
div#cross-sells { 
	border-top: 1px solid #ccc;
	padding-top: 10px;
	margin:10px 0;
	float:left;
	width:100%;
}
#related-items .area-title,
#cross-sells .area-title {
	line-height:20px;
	margin-bottom: 20px;
}

a.view-mode { /*also common to the cross-sells area */
	display:block;
	padding-right:46px;
	vertical-align:text-bottom;
	cursor:pointer;
	line-height:20px;
	float:right;
	font-weight:normal;
	background:url(http://lib.store.yahoo.net/lib/ylighting/sprite-view-mode.png) 100% -21px no-repeat;
}
a.view-mode:hover {
	background:url(http://lib.store.yahoo.net/lib/ylighting/sprite-view-mode.png) 100% 0 no-repeat;
}
.compact a.view-mode {
	background:url(http://lib.store.yahoo.net/lib/ylighting/sprite-view-mode.png) 100% 0 no-repeat;
}
.compact a.view-mode:hover {
	background:url(http://lib.store.yahoo.net/lib/ylighting/sprite-view-mode.png) 100% -21px no-repeat;
}

/*
 * holonyak-draw-product-cells
 */
div#product-body .product-cell {
	float:left;
	margin:9px;
}
#product-body .product-cell div.product-image {
	border-bottom:4px solid #fff;

}
#product-body .product-cell div.product-image:hover {
	border-bottom:4px solid #f00;
}
#product-body .product-cell .product-details a,
#product-body .product-cell .product-details a:link,
#product-body .product-cell .product-details a:visited,
#cluetip .product-details a,
#cluetip .product-details a:link,
#cluetip .product-details a:visited {
	text-decoration:none;
	border-bottom:0;
	font-weight:bold;
}
#product-body .product-details {
	margin-top:8px;
	width:134px;
}
#product-body .product-cell .sprite-ratings {
	height:14px;
	padding-left:82px;
	text-indent:0;
}
#product-body .product-cell a.image {
	height:136px;
	width:136px;
	border:1px solid #ccc;
	margin-bottom: 4px;
	display:block;
}
#product-body .product-cell a.image img {
	vertical-align:middle;
	border:0;
	padding:1px;;
}


/*
 * holonyak-product-tabs
 */
div#product-body .ui-tabs-panel {
	padding-top:14px;
}
div#product-body div#thetabs {
	float:left;
	margin-top:20px;
	width:100%;
}
#thetabs a {
	text-decoration:underline;
}

#product-body #tabreviews .content,
#product-body #tabcustomerquestions .content {
	margin-top:10px;
	padding-right:10px;
	max-height:300px;
	overflow:auto;
}
#product-body #tabreviews .review .sprite-ratings {
	float:left;
	margin:0 10px 0 0;
	text-indent:-99999;
	width:79px;
	height:14px;
}

/*
 * Glossary
 * apply styles to the glossary here, to style the actual tip "container" use the section clueTip CSS below. Use caution there.
 */
a.glossary,
#thetabs a.glossary { /* glossary / cluetip  links, the 'glossary' class is added by javascript when clueTip runs at pageload*/
	text-decoration:none;
	border-bottom:1px dotted #aaa;
}
.glossary-definition h6 {
	margin:0 0 10px 0;
}
/*
 * END Glossary
 */

/*
 * clueTip CSS
 * These styles affect the basic functionality of the plugin, border, spacing, etc. Use caution. To style the content within the cluetip, go to the 'glossary' style section above
 */

/* global */
#cluetip-close img {
  border: 0;
}
#cluetip-title {
  overflow: hidden;
}
#cluetip-close {
  float: right;
  position: relative;
}
#cluetip-waitimage {
  width: 43px;
  height: 11px;
  position: absolute;
  background-image: url(images/wait.gif);
}
.cluetip-arrows {
  display: none;
  position: absolute;
  top: 0;
  left: -11px;
  height: 22px;
  width: 11px;
  background-repeat: no-repeat;
  background-position: 0 0;
}
#cluetip-extra {
  display: none;
}
/***************************************
   =cluetipClass: 'default' 
-------------------------------------- */

#cluetip.cluetip-default {
  margin-top:-30px; /*set .cluetip-arrows to the opposite  */
}
.cluetip-default {
  /*margin-top:-30px; /*set .cluetip-arrows to the opposite  */
  background-color: #fff;
}
.cluetip-default #cluetip-outer {
  position: relative;
  background-color: #fff;
  border:1px solid #ccc;
}
#cluetip .dropShadow {
	margin:1px;
}
.cluetip-default h3#cluetip-title {
  margin: 0 0 5px;
  padding: 8px 10px 4px;
  font-size: 1.1em;
  font-weight: normal;
  background-color: #ccc;
  color: #fff;
}
.cluetip-default #cluetip-inner {
  padding: 10px;
}
.cluetip-default div#cluetip-close { 
  text-align: right;
  margin: 0 5px 5px;
  color: #900;
}

/* default arrows */
.cluetip-arrows {
	margin-top:30px;/*set to the opposite value of .cluetip-default*/
}
.clue-right-default .cluetip-arrows {
  background-image: url(http://lib.store.yahoo.net/lib/ylighting/sprite-glossary-arrow-left.png);
  width:10px;
  height:13px;
  left:-7px;
}
.clue-left-default .cluetip-arrows {
  background-image: url(http://lib.store.yahoo.net/lib/ylighting/sprite-glossary-arrow-right.png);
  left: 100%;
  margin-right: -11px;
  width:10px;
  height:13px;
}
.clue-top-default .cluetip-arrows {
  background-image: url(images/darrowdown.gif);
  top: 100%;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;  
}  
.clue-bottom-default .cluetip-arrows {
  background-image: url(images/darrowup.gif);
  top: -11px;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;
}
/***************************************
   =cluetipClass: 'product-cell'
   * this replaces the related-items and cross-sell section, since both will have the same function, the have been left in for reference
-------------------------------------- */
#cluetip.cluetip-product-cell {
  margin-top:-20px; /*set .cluetip-arrows to the opposite  */
  //margin-top:15px; /* IE Hack */
}
.cluetip-product-cell #cluetip-outer {
  position: relative;
  background-color: #fff;
  border:1px solid #ccc;
}
.cluetip-product-cell #cluetip-inner {
  padding: 10px;
}
.clue-right-product-cell .cluetip-arrows {
  margin-top:20px;
  background-image: url(http://lib.store.yahoo.net/lib/ylighting/sprite-glossary-arrow-left.png);
  width:10px;
  height:13px;
  left:-7px;
}
.clue-left-product-cell .cluetip-arrows {
  margin-top:20px;
  background-image: url(http://lib.store.yahoo.net/lib/ylighting/sprite-glossary-arrow-right.png);
  left: 100%;
  margin-right: -9px;
  margin-left:-2px;
  width:10px;
  height:13px;
}
/*
 *  END clueTip CSS
 */


#thetabs div ul,
#thetabs div li,
#thetabs div p { 
   color: #666;
   font-size: 105%;
}