@import "/css/less/fonts";
@import "/css/less/boilerplate";
@import "/css/style.css";
@import "/css/catalog.css";
@import "/css/less/common";



/* ------- variables -------- */
@title_color:#0071bb;
@date_label_color:#ffab00;
/*----------------------------*/

/*						GLOBAL          */
.date{
		display:inline-block;
		.box-sizing(border-box);
		position:relative;
		.sizes(auto,28px);
		padding:0 10px;
		background-color: @date_label_color;
		.borderRadius(5px);
		
		span{
			color:#fff;
			font:bold 13px/28px Arial;
		}

		ins{
			display:block;
			position: absolute;
			.sizes(0px,0px);
			left:50%;
			margin-left:-6px;
			bottom:-6px;
    	border-left: 6px solid transparent;
    	border-right: 6px solid transparent;
    	border-top: 6px solid @date_label_color;
		}
}
.to_list{
	display:block;
	position:relative;
	margin:50px 0;
	font:13px/13px Arial;
	color:#00aef0;

	&:hover{
		text-decoration:none;
	}
}

/*---------- News List -----------------*/
.news_list{
	display:block;
	.box-sizing(border-box);
	position:relative;
	.sizes(100%, auto);

	ul{
		display:block;
		.sizes(100%, auto);
		padding:0;
		margin:0;
		list-style: none;
	}

}
.news_list li{
	display:inline-block;
	.box-sizing(border-box);
	position:relative;
	.sizes(50%, auto);
	padding-right:30px;
	margin-bottom:45px;
	vertical-align: top;
}

.news_list li,
.news_detail{
	@img_w:140px;
	@img_h:140px;
	
	.image{
		display:block;
		position:relative;
		.sizes(@img_w,@img_h);
		float:left;
		text-align: center;
		line-height: @img_h;

		img{
			display:inline-block;
			position:relative;
			max-height: 100%;
			margin:0 auto;
			line-height: @img_h;
			vertical-align: middle;
		}
	}

	.data{
		position:relative;
		margin-left: @img_w;
	}

	article{
		margin-top:30px;
		overflow: hidden;

		&:after{
			display:block;
			position:relative;
			.sizes(597px,22px);
			content:'';
			margin:0px auto 0 auto;
			bottom:0px;
    	.sprite(@sprite_path, 0, -48px);
    }
	}

	article img{
		display:block;
		position:relative;
		margin:20px auto;
	}

	h3{
		margin:15px 0;
		a{
			font:18px/20px 'calibriregular';
			color:@title_color;
			text-decoration: none;
			&:hover{
				text-decoration:underline;
			}
		}
	}
	.text{
		font:13px/18px Arial;
		color:#000;
	}
	p{
		margin-bottom:30px;
	}
}/* li */

.news_detail .data{
	margin-left:0;
}

/*---------- News Detail -----------------*/

.news_detail{
	display:block;
	margin-right:340px;
}


/* 					Right Side 				*/
.right_side{
	@width:300px;
	@left_padding:50px;

	display:block;
	position:relative;
	.box-sizing(border-box);
	.sizes(@width,auto);
	margin-right: 20px;


	.block{
		position:relative;
		.box-sizing(border-box);
		.sizes(@width,auto);
		margin-top:45px;
		padding-left:@left_padding;
		padding-bottom:33px;
		border-bottom:1px solid #e9e7e7;
		ul{display:block;padding:0}
	}

	.social{
		.sizes(@width,132px);
		background: url('/img/test/social_fake.png');
	}

	.other_news{
						
		li{
			margin-top:10px;
		}
		.date{
			margin-bottom: 10px;
		}

		a{
			font:13px/13px Arial;
			color:#000;

			&:hover{
				text-decoration:none;
			}
		}
	}

	.addons{
		
		@img_w:85px;
		@img_h:64px;
		@img_right_margin:15px;

		li{
			display:block;
			position:relative;
			margin-top:10px;
		}
		.image{
			display:inline-block;
			position:relative;
			.sizes(@img_w, @img_h);
			line-height: @img_h;
		}
		img{
			display:inline-block;
			position:relative;
			max-width: 100%;
			margin:0 auto;
			vertical-align: middle;
			line-height: @img_h;
		}
		.data{
			display:inline-block;
			.sizes(@width - @left_padding - @img_w - @img_right_margin, auto);
			margin-left:@img_right_margin;
		}
		
		h4 a{
			font:13px/13px Arial;
			color:#000;
			
			&:hover{
				text-decoration:none;
			}
		}
		.price{
			margin:5px 0;
			font:21px/21px 'calibriregular';
			color:#000;
		}
	}


	/* global */
	button{
		.red_button(139px,32px);
	}

	h3{
		font:21px/21px 'calibriregular';
		color:@title_color;
		margin-bottom:30px;
	}

}