/* 
Author(s): Doug Varn, Beth Budwig
Date Created: 9/11/08
Notes: Handles styling for all jquery plugins.
History:
*/

/* SCROLLERS (VIA JQUERY CAROUSELLITE PLUGIN) */
/* styles general to all scrollers */
.scroller{float:left; border:1px solid #ccc;}
.scroller h2{float:left;}
/* buttons */
.scroller .prev, .scroller .prev2{float:left; width:15px; background:#d2cabe url(arrow_scrollers_left.gif) no-repeat center; border-width:0px;}
.scroller .prev.hover, .scroller .prev2.hover{background-color:#f1bd59; cursor:pointer;}
.scroller .next, .scroller .next2{float:right; width:15px; background:#d2cabe url(arrow_scrollers_right.gif) no-repeat center; border-width:0px;}
.scroller .next.hover, .scroller .next2.hover{background-color:#f1bd59; cursor:pointer;}  /*IE6 is so retarded, if you combine this and line 14 into one line, it breaks, so pls leave on one line*/
/* scroller stage area */
.scroller div {float:left; position: relative; overflow: hidden; left:0; top:0; margin:0;}
.scroller ul{list-style-type:none; position: relative; overflow:hidden;}
.scroller li{float:left; position: relative; overflow: hidden; left:-1px;} /* -1px tucks the first left border under the left arrow*/
.scroller dl{border-left: 1px solid #E7E2D9; text-align: center; }
.scroller dt img, .scroller li img{border: 1px solid #999;}
/* caption */
.scroller dd {clear:both; line-height:11px;}
dd a.scrollerLink{color: #C63C05; font-size: .7em; font-family: Arial, Helvetica, sans; text-decoration: none; line-height:100%;}
dd a:hover.scrollerLink{ text-decoration: underline; } /* margin-right:5px fixes it */

.scrollerBoxCaption{padding:0.5em 0 .25em.25em; margin-bottom:0; clear:both;}
.shopOverviewContainer .scrollerBoxCaption, .shopIndexContainer .scrollerBoxCaption, .shopOverviewFilteredContainer .scrollerBoxCaption {display:none;}

/* 1 prod scroller with 100X130 sized images */
.prodScroller1Container {width:231px; border-top:none;}
.prodScroller1Container h2{width:220px; padding:5px 0 5px 11px; border:1px solid #ccc; border-width:1px 0; background: top left url(prod_scroller_header_tile.gif) repeat-x;} /* width = container width - left padding */
.prodScroller1Container button {height:195px;}
/* scroller stage area */
.prodScroller1{height:195px; width: 201px;} /* width=whole width-combined button width; redundancy nec for non-JS users */
.prodScroller1 li{width: 201px;} /* width = (container width - button widths) */
.prodScroller1 li dl{height:175px; margin: 10px 0;} /* height = button height - margin heights */
.prodScroller1 li dt{width:100px; padding:6px 53px 2px 48px;} /* combined l/r paddings = li width - dt|img width */
.prodScroller1 li dd{margin: 0 6px 2px;} /*  space above and around caption */

/* 2 prod scroller with 60X75 sized images
the "2" stuff is to make a second version of the scroller on the same page that isn't linked to the first */
.prodScroller2Container {width:231px; border-top:none;}
.prodScroller2Container h2{width:220px; padding:5px 0 5px 11px; border:1px solid #ccc; border-width:1px 0; background: top left url(prod_scroller_header_tile.gif) repeat-x;} /* width = container width - left padding */
.prodScroller2Container button {height:173px;} /* was 165px on shop detail and bundle pgs - is the change OK? */
/* scroller stage area */
.prodScroller2, .prodScroller2_2 { height:173px; width: 201px; } /* redundancy nec for non-JS users */
.prodScroller2 li dl, .prodScroller2_2 li dl{height:157px; margin: 8px 0;} /* height = button height - margin heights */
.prodScroller2 li dt, .prodScroller2_2 li dt{width: 65px; padding: 10px 16px 0 19px;} /* combined l/r paddings = li width - dt|img width */
.prodScroller2 li dd, .prodScroller2_2 li dd {margin: 2px 6px;} /*  space above and around caption */

/* new stuff */
.prodScroller2 li, .prodScroller2_2 li{width: 191px; padding:5px; vertical-align:middle; height:163px;} /* width = (container width - button widths)/2, rounded down */
.prodScroller2 .pricing, .prodScroller2_2 .pricing {float:left; width:110px; padding:12px 0 10px 1px;}
.prodScroller2 .pricing *, .prodScroller2_2 .pricing * {display:block; padding:0 0 5px;}
.prodScroller2 .savePrice, .prodScroller2_2 .savePrice {color:#C63C05;}
.prodScroller2 .strike, .prodScroller2_2 .strike {display: inline; padding:0;}
.prodScroller2 .yourPrice, .prodScroller2_2 .yourPrice{font-size:1em; margin:0;}
.prodScroller2 .yourPrice strong, .prodScroller2_2 .yourPrice strong {color:#C63C05; font-size:1.05em; display:inline; padding:0;}
.prodScroller2, .prodScroller2_2 {font-size:.7em;}
.prodScroller2 .shadowContainer, .prodScroller2_2 .shadowContainer {float:left; margin:12px 5px 12px 12px;}
.prodScroller2 a.scrollerLink, .prodScroller2_2 a.scrollerLink{clear:both; display:block; padding:6px 6px 2px; color: #666; font-size: 1.1em; font-weight:bold; font-family: Arial, Helvetica, sans; text-decoration: none; line-height:1.25em;}
.prodScroller2 a:hover.scrollerLink, .prodScroller2_2 a:hover.scrollerLink{ text-decoration: underline; } /* margin-right:5px fixes it */

/* 3 prod scroller with 60X75 sized images */
.prodScroller3Container {width:346px; border-top:none;}
.prodScroller3Container h2{width:335px; padding:5px 0 5px 11px; border:1px solid #ccc; border-width:1px 0; background: top left url(prod_scroller_header_tile.gif) repeat-x;} /* width = container width - left padding */
.prodScroller3Container button {height:173px;}
/* scroller stage area */
.prodScroller3{height:173px; width: 316px;} /* width=whole width-combined button width; redundancy nec for non-JS users */
.prodScroller3 li{width: 105px;} /* width = (container width - button widths)/3, rounded down */
.prodScroller3 li dl{height:143px; margin: 15px 0;} /* height = button height - margin heights */
.prodScroller3 li dt{width: 65px; padding: 6px 16px 0 19px;} /* combined l/r paddings = li width - dt|img width */
.prodScroller3 li dd{margin: 2px 6px;} /*  space above and around caption */

/* 4 prod scroller with 100X130 sized images plus bundle promo beneath */
#fourProdScrollerArea {clear:left; float:left;}
#fourProdScrollerArea h2{width:749px; margin:8px 0 8px 5px;}
.prodScroller4Container{width:749px; background-color: #fff;} /* shadow */
.prodScroller4Container button {height:195px;}
/* scroller stage area */
.prodScroller4{height: 195px; width:719px;}  /* redundancy nec for non-JS users */
.prodScroller4 li{width: 179px;} /* width = (container width - button widths)/4, rounded down */
.prodScroller4 li dl{height:175px; margin:10px 0px;}  /* height = button height - margin heights */
.prodScroller4 li dt{width:100px; padding:5px 41px 2px 38px;}  /* combined l/r paddings = li width - dt|img width */
.prodScroller4 li dd{margin:0 6px 2px;} /*  space above and around caption */

/* HOP-UPS (VIA JQUERY CLUETIP PLUGIN) */
/* cluetip specific */
#cluetip-title #cluetip-close {float:right; position:relative; margin:1px 5px 5px;}
/* #cluetip-waitimage {width: 43px; height: 11px; position: absolute; background-image: url(http://static.nolo.com/rx/images/tooltip/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;} */
.cluetip-default #cluetip-outer {background-color:#fff; border:1px solid #999;}
.cluetip-default h3#cluetip-title {padding:6px 7px 5px 15px; font-size:.95em; font-weight:normal; background-color:#f1bd59; border-bottom:1px solid #999; color:#fff; text-transform:uppercase; letter-spacing:.18em; line-height:1.25em;}
/* .cluetip-default #cluetip-title a {color: #d9d9c2; font-size: 0.95em;}   */
.cluetip-default #cluetip-inner {padding:12px 0 0 0;}
.clue-right-default .cluetip-arrows {background-image:url(darrowleft.gif);}
.clue-left-default .cluetip-arrows {background-image:url(darrowright.gif); left:100%;}

/* styles for cart/checkout hop-up sections */
#cluetip{clear:both; width:233px; padding:0; border:1px solid #CDCDCC; border-top:0;}
#cluetip h2{margin:0 10px 6px; padding:11px 0 6px 3px; text-align:left; border-bottom:1px solid #e7e2d9; font-weight:normal; font-size:.875em;}
#cluetip-inner{margin:0 15px 15px; padding:0;}
#cluetip td, #cluetip th{border:1px solid #E7E2D9; font-size:.7em; text-align:left; padding:2px 0px 2px 3px;}
#cluetip td{width:36%; border-left:0;}
#cluetip tbody td, #cluetip tbody th{border-top:0;}
#cluetip tbody th, #cluetip th#region{text-align:right; padding: 2px 5px 2px 0;}
#cluetip li{margin:0px; padding:0; line-height:1.05em; list-style:none;}
#cluetip caption, #cluetip li strong, #cluetip label, #cluetip h3 {font-weight:bold; padding-bottom:4px; line-height:1em; color:#dd7918; font-size:.75em;}
#cluetip li em{display:block; line-height:1.25em; margin:3px 0 .5em; font-size:.7em;}
#cluetip p strong{color:#dd7918;}
#cluetip a.top{margin:0 15px 15px; display:block;}
#cluetip label{clear:both; display:block; padding-top:10px;}
#cluetip input.switchImg{margin-top:12px;}
#cluetip h2.contentHeader {display:none;}
#cluetip #cluetip-inner a.top {display:none;} /* hide back to tops for hopup content divs */

#cluetip #cluetipem1 {font-size:1em; font-weight:bold;}