/* lenovo homepage "quilt" */

	/*first, the text and filter buttons above the quilt.*/
#quilt #quilt_header #quilt_header_headlines {
	float: left;
	margin: 0 0 20px 20px;
	width: 550px;
}
#quilt #quilt_header #quilt_header_headlines h2 {
	font-size: 18px;
	margin-bottom: 4px;
	font-weight: bold;
	color: #212121;
}
#quilt #quilt_header #quilt_header_headlines h3 {
	font-size: 14px;
	line-height: 1.2em;
	font-weight: normal;
	color: #555;
}
#quilt #quilt_header #quilt_filters {
	list-style-type: none;
	float: right;
	width: 292px;
	margin-right: 28px;
	margin-top: 46px;
}
#quilt #quilt_header #quilt_filters li {
	float: left;
}
#quilt #quilt_header #quilt_filters li a {
	display: block;
	height: 26px;
	overflow: hidden;
	text-indent: -9999px;
	outline: 0;
}
#quilt #quilt_header #quilt_filters li a.deals {
	width: 77px;
	background: #fff url(../images/quilt_filter_deals_off.gif);
	margin-right: 6px;
}
#quilt #quilt_header #quilt_filters li a.deals.checked {
	background: #fff url(../images/quilt_filter_deals_on.gif);
}
#quilt #quilt_header #quilt_filters li a.reviews {
	width: 87px;
	background: #fff url(../images/quilt_filter_reviews_off.gif);
	margin-right: 8px;
}
#quilt #quilt_header #quilt_filters li a.reviews.checked {
	background: #fff url(../images/quilt_filter_reviews_on.gif);
}
#quilt #quilt_header #quilt_filters li a.community {
	width: 114px;
	background: #fff url(../images/quilt_filter_community_off.gif);
}
#quilt #quilt_header #quilt_filters li a.community.checked {
	background: #fff url(../images/quilt_filter_community_on.gif);
}

	/*	the actual quilt*/
#quilt_content {
	width: 940px;
	height: 663px;
	position: relative;
}
#quilt_wrapper  {
	width: 940px;
	height: 663px; /*+15px for browser scrollbar chrome*/
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
}
#quilt_wrapper #quilt_scrollable {
/*	width: 1296px;*/
	width: auto;
	height: 648px;
	background: #000;
	position: relative;
/*	padding: 0 33px;*/
}
#quilt_wrapper #quilt_scrollable > div {
	float: left;
}

#quilt #quilt_content #quilt_left_arrow, #quilt #quilt_content #quilt_right_arrow {
	display: block !important; /*prevents arrow from disappearing at edges*/
	width: 33px;
	height: 648px;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 200;
	outline: 0;
}
#quilt #quilt_content a#quilt_left_arrow {
	background: transparent url(../images/quilt_arrow_l_2up.jpg) 0 0 no-repeat;
	left: 0;
}
#quilt #quilt_content a#quilt_right_arrow {
	background: transparent url(../images/quilt_arrow_r_2up.jpg) 0 0 no-repeat;
	right: 0;
}
#quilt #quilt_content a#quilt_left_arrow:hover, #quilt #quilt_content a#quilt_right_arrow:hover {
	background-position: 0 -648px;
}

/*	global quilt stuff */
#quilt_wrapper #quilt_scrollable .quilt_page div a {
	/*	one link per box*/
	display: block;
}
#quilt_wrapper img.twitter_logo {
	vertical-align: middle;
}
#quilt_wrapper .quilt_page {
	width: 432px;
	height: 648px;
	position: relative;
}
#quilt_wrapper .quilt_page div {
	position: absolute;
}

/*  quilt layout 1  */
#quilt_wrapper .quilt_layout_01 .ql1_1 {
	/*	background image (inline) with text overlay*/
	top: 0;
	left: 0;
}
#quilt_wrapper .ql1_1 {
	width: 288px;
	height: 216px;
	background: #262626;
	text-align: center;
}
#quilt_wrapper .ql1_1 a {
	width: 288px;
	height: 216px;
}
#quilt_wrapper .ql1_1 span {
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	padding-top: 15px;
	display: block;
}

#quilt_wrapper .quilt_layout_01 .ql1_2 {
	top: 0;
	left: 288px;
}
.quilt_tall_narrow_twitter {
	/*144x216 (vertical) twitter */
	width: 144px;
	height: 216px;	
	background: #b0b0b0 url(../images/quilt_twitter_bg_144x216.png) 0 0 no-repeat;
	text-transform: uppercase;
	font-size: 10px;
	text-align: center;
	font-weight: bold;	
}
.quilt_tall_narrow_twitter a {
	width: 144px;
	height: 216px;
	color: #000;	
}
.quilt_tall_narrow_twitter img.twitter_icon {
	width: 63px;
	margin: 27px auto 14px auto;
}
.quilt_tall_narrow_twitter a > span {
	line-height: 1.5em;
}

#quilt_wrapper .quilt_layout_01 .ql1_3 {
	/*	no text, bg image (inline) only */
	top: 216px;
	left: 0;
}
#quilt_wrapper .ql1_3 {
	width: 216px;
	height: 288px;
	background: #e4e4e4;
}
#quilt_wrapper .ql1_3 a {
	width: 216px;
	height: 288px;
}

#quilt_wrapper .quilt_layout_01 .ql1_4 {
	/*	light grey gradient quote - no image*/
	top: 216px;
	left: 216px;
}
#quilt_wrapper .ql1_4 {
	background: #848484 url(../images/quilt_light_grey_gradient_bg.png) 0 0 no-repeat;
	width: 216px;
	height: 144px;
	
	position: relative;
}
#quilt_wrapper .ql1_4 a {
	width: 216px;
	height: 144px;
	color: #fff;
}
#quilt_wrapper .ql1_4 a img.quote_logo {
	margin: 0 auto;
	display: block;
}
#quilt_wrapper .ql1_4 a span {
	color: #fff;
	position: absolute;
	left: 15px;
	top: 57px;
	font-size: 10px;
	font-style: italic;
	line-height: 13px;
}

#quilt_wrapper .quilt_layout_01 .ql1_5 {
	/*	horizontal twitter */
	top: 504px;
	left: 0;
}
.quilt_short_wide_twitter {
	width: 216px;
	height: 144px;
	background: #646464 url(../images/quilt_twitter_bg_216x144.png) 0 0 no-repeat;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}
.quilt_short_wide_twitter a {
	width: 216px;
	height: 144px;
	color: #000;
}
.quilt_short_wide_twitter img.twitter_icon {
	float: left;
	margin: 18px 0 0 30px;
}
.quilt_short_wide_twitter span {
	float: left;
	margin: 16px 0 0 8px;
}

.quilt_short_wide_customer_voice {
	width: 216px;
	height: 144px;
	background: transparent url(../images/quilt_short_wide_customer_voice_bg.png) 0 0 no-repeat;
}
.quilt_short_wide_customer_voice a {
	width: 216px;
	height: 144px;
}
.quilt_short_wide_customer_voice .qtitle {
	padding: 16px 0 0 18px;
	color: #000;
	font-size: 10px;
	font-weight: bold;
	display: block;
}
.quilt_short_wide_customer_voice .qbody {
	margin-left: 18px;
	width: 185px;
	color: #646464;
	font-size: 10px;
	display: block;
	line-height: 1.2em;
}
.quilt_short_wide_customer_voice .rating {
	position: absolute;
	top: 60px;
	left: 95px;
}
.quilt_short_wide_customer_voice .qfrom {
	position: absolute;
	top: 115px;
	
	display: block;
	width: 100%;
	text-align: center;

	color: #fff;
	font-weight: bold;
	font-size: 15px;
}



#quilt_wrapper .quilt_layout_01 .ql1_6 {
	/*	black gradient quote with product shot and logo*/
	/*product shot + logo are 1 image, inline */
	top: 360px;
	left: 216px;
}
#quilt_wrapper .ql1_6 {
	width: 216px;
	height: 288px;
	background: #131313 url(../images/quilt_black_gradient_bg.png) 0 0 no-repeat;	
	position: relative;
}
#quilt_wrapper .ql1_6 a {
	width: 216px;
	height: 288px;
	color: #fff;
	background-position: 0 0;
	background-repeat: no-repeat;
}
#quilt_wrapper .ql1_6 a span {
	position: absolute;
	top: 185px;
	left: 15px;
	font-style: italic;
	font-size: 10px;
	font-weight: normal;
	line-height:13px;
}
#quilt_wrapper #quilt_scrollable div div p {
	display: inline;
	background: #fff;
}

/*		quilt layout 2		*/
#quilt_wrapper .ql2_1 {
	/*	customer voice speech bubble */
	top: 0;
	left: 0;
}
.quilt_tall_narrow_customer_voice {
	/*	applies to .ql2_1 and .ql2_5*/
	width: 144px;
	height: 215px;
	background: transparent url(../images/quilt_userquote_bg.png) 0 0 no-repeat;	
}
.quilt_tall_narrow_customer_voice a {
	width: 144px;
	height: 215px;	
}
.quilt_tall_narrow_customer_voice .qtitle {
	padding: 16px 0 2px 19px;
	color: #000;
	font-size: 10px;
	font-weight: bold;
	width: 109px;
	display: block;
}
.quilt_tall_narrow_customer_voice .qbody {
	margin-left: 19px;
	width: 109px;	
	color: #646464;
	font-size: 10px;
	display: block;
	line-height: 1.2em;
}
.quilt_tall_narrow_customer_voice .rating {
	position: absolute;
	top: 140px;
	left: 18px;
}
.quilt_tall_narrow_customer_voice .qfrom {
	position: absolute;
	top: 187px;
	
	display: block;
	width: 100%;
	text-align: center;

	color: #fff;
	font-weight: bold;
	font-size: 15px;
}

#quilt_wrapper .ql2_2 {
	/*	photo only*/
	top: 0;
	left: 144px;
	width: 288px;
	height: 215px;
}
.ql2_2 a {
	width: 288px;
	height: 215px;	
}

#quilt_wrapper .ql2_3 {
	/*	photo only*/
	top: 215px;
	left: 0;
	width: 432px;
	height: 217px;
}
.ql2_3 a {
	width: 432px;
	height: 217px;
}

#quilt_wrapper .ql2_4 {
	/*	2/3 width quote or review */
	background: transparent url(../images/quilt_review_bg.jpg) 0 0 repeat-x;
	top: 432px;
	left: 0;

	width: 288px;
	height: 216px;	
}
.ql2_4 a {
	width: 284px;
	height: 216px;
}
.ql2_4 a .qlogo_header {
	display: block;
	text-align: center;
	margin: 0 auto;
}
.ql2_4 a span {
	font-size: 14px;
	color: #fff;
	font-style: italic;
	line-height: 1.1em;

	display: block;
	width: 240px;
	border-top: 1px dotted #fff;
	border-bottom: 1px dotted #fff;
	padding: 10px 0;
	margin: 14px auto 0 auto;
}

#quilt_wrapper .ql2_5 {
	/*	same as ql2_1 */
	top: 432px;
	left: 288px;
	
	background-color: #636363;
	padding-bottom: 1px;
}
.quilt_shim_l, .quilt_shim_r {
	height: 663px;
	width: 33px;
}
.quilt_shim_l {
	float: left;
}
.quilt_shim_r {
	float: left;
}

/*	smooth div scroll css	*/

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 75 pixels 
	   and if there is room the will grow and occupy 10% 
	   of the scrollable area (20% combined). 
	   Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/* There is a big background image and it's used to 
	solve some problems I experienced in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
/*	background-image: url(../images/arrow_left.gif);				*/
	background-color: #fff;
	background-repeat: no-repeat;
	/* Standard CSS3 opacity setting */
	opacity: 0.35; 
	/* Opacity for really old versions of 
	   Mozilla Firefox (0.9 or older) */
	-moz-opacity: 0.35;
	/* Opacity for Internet Explorer. */
	filter: alpha(opacity = 35);
	/* Use zoom to Trigger "hasLayout" in 
	   Internet Explorer 6 or older versions */	
	zoom: 1; 
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;

}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
/*	background-image: url(../images/arrow_right.gif);*/
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}
