@import url(../common/variables.less);
.offer-info-box{
	overflow:hidden;
	position:relative;
	.col-left-mr{
		margin-right:300px;
	}
	.col-left{
		.offerList-head{
			overflow:hidden;
			height:34px;
			border:@common_border;
			background: (@header_bgcolor_min + @header_bgcolor_max)/2;
			background: -moz-linear-gradient(top,  @header_bgcolor_min, @header_bgcolor_max);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(@header_bgcolor_min), color-stop(@header_bgcolor_max)); 
			background: -webkit-linear-gradient(top,  @header_bgcolor_min,@header_bgcolor_max); 
			background: -o-linear-gradient(top,  @header_bgcolor_min,@header_bgcolor_max); 
			background: -ms-linear-gradient(top,  @header_bgcolor_min,@header_bgcolor_max); 
			background: linear-gradient(to bottom,  @header_bgcolor_min,@header_bgcolor_max); 
			.offerList-title{
				color:@common_title_font_color;
				font-weight:700;
				font-size:14px;
				float:left;
				display:inline-block;
				margin:6px 0 0 14px;
				overflow:hidden;
			}
			.offer-statistic{
				display:inline-block;
				float:right;
				margin:8px 10px 0 0;
				color:@common_title_font_color;
				overflow:hidden;
				b{
					color:@hover_font_color;
				}
				span.space-6{
					margin-left:6px;
				}
				padding-left:63px;
				background-image:@bgImgUrl;
				background-position:0 3px;
				background-repeat:no-repeat;
			}
			.clear-span{
				display:block;
				float:none;
				clear:both;
			}
		}
		.offerList-body{
			position:relative;
			height:132px;
			overflow:hidden;
			border:@common_border;
			border-top:none;
			.pre-btn{
				position:absolute;
				top:54px;
				left:0;
				z-index:1;
				display:none;
				a{
					display:block;
					width:12px;
					height:22px;
					background-image:@bgImgUrl;
					background-position:right -58px;
					&:hover{
						background-position:-14px -58px;
					}
				}
			}
			.next-btn{
				position:absolute;
				top:54px;
				display:none;
				right:0;
				z-index:1;
				a{
					display:block;
					width:12px;
					height:22px;
					background-image:@bgImgUrl;
					background-position:-30px -58px;
					&:hover{
						background-position:left -58px;
					}
				}
			}
			.offer-list-container{
				position:absolute;
				width:200%;
				.clear-div{
					clear:both;
					float:none;
				}
				.offer-list{
					width:50%;
					float:left;
					table-layout : fixed;
					thead{
						.column-1{
							width:34.5%;
						}
						.column-2{
							width:15%;
						}
						.column-3{
							width:17%;
						}
						.column-4{
							width:33.5%;
						}
					}
					tbody{
						tr{
							&:hover{
								background-color:@table_tr_hover_color;
							}
							td{
								border-bottom:@table_tr_border;
								padding-left:20px;
								div{
									height:32px;
									line-height:32px;
									overflow:hidden;
									a{
										display:block;
										color:@common_text_font_color;
										&:hover{
											color:@hover_font_color;
										}
										span{
											color:@price_font_color;
										}
										b{
											color:@price_font_color;
											font-size:16px;
											font-weight:normal;
											background-image:@bgImgUrl;
											background-position:0 -100px;
											background-repeat:no-repeat;
											padding-left:12px;
										}
									}

								}
							}
							td.first-child{
								padding-left:25px;
							}
							td.last-child{
								padding-right:25px;
							}
						}
					}
				}
			}
		}
		.offerList-foot{
			overflow: hidden;
			border:1px solid #d1d1d1;
			border-top:none;
			background-color:#fafafa;
			padding:0 10px 0 16px;
			height:32px;
			b{
				color:#bbb;
				font-weight: normal;
				display:inline-block;
				margin:7px 10px 0 10px;
				float:left;
			}
			a{
				display:inline-block;
				margin-top:7px;
				color:@common_title_font_color;
				&:hover{
					color:@hover_font_color;
				}
				float:left;
			}
			a.other-offer-link{
				display:inline-block;
				float:right;
				color:@link_font_color;
				padding-right:19px;
				background-image:@bgImgUrl;
				background-repeat:no-repeat;
				background-position:right -16px;
				&:hover{
					color:@hover_font_color;
					background-position:right -34px;
				}
			}
			.clear-span{
				display:block;
				float:none;
				clear:both;
			}	
		}
	}
	
	.col-right{
		display:none;
		width:290px;
		position:absolute;
		top:0;
		right:0;
		.raw-chart{
			border:@common_border;
			h2{
				border-bottom:@common_border;
				font-weight:700;
				font-size:14px;
				color:@common_title_font_color;
				padding:6px 0 7px 14px;
				background: (@header_bgcolor_min + @header_bgcolor_max)/2;
				background: -moz-linear-gradient(top,  @header_bgcolor_min, @header_bgcolor_max);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(@header_bgcolor_min), color-stop(@header_bgcolor_max)); 
				background: -webkit-linear-gradient(top,  @header_bgcolor_min,@header_bgcolor_max); 
				background: -o-linear-gradient(top,  @header_bgcolor_min,@header_bgcolor_max); 
				background: -ms-linear-gradient(top,  @header_bgcolor_min,@header_bgcolor_max); 
				background: linear-gradient(to bottom,  @header_bgcolor_min,@header_bgcolor_max); 
			}
			.chart-select{
				padding:8px 0 0 24px;
				a{
					text-decoration: none;
					display:inline-block;
					margin-right:2px;
					padding: 0 8px;
					line-height:20px;
					color:@common_title_font_color;
					&:hover{
						color:#cc0000;
					}
				}
				a.current{
					background-color:#eee;
				}
			}
			.chart-table{
				display:none;
			}
		}
		
	}
}