@import '../default.less';
@import '../mixins.less';
//DON'T ADD IMPORTS, ABOVE ARE TO MAKE INTELLISENSE WORK

@state-blue: #6993a9;
@desc-color: #292929;
@grass-green: #81c45c;
@grass-green-hover: #67af40;
@royal-blue: #1e77bd;
@charcoal-grey: #353d40;

.datafinder
{
	font-family: @title-font;


	.container
	{
		position: relative;
		width: 940px;
		margin: auto;
	}

	.row
	{
		overflow: hidden;

		h2
		{
			font-size: 24px;
			padding: 20px 0 10px 0;
			display: inline-block;
			margin: 0;
			color: @charcoal-grey;
			text-transform: uppercase;
			width: 400px;
		}

		p
		{
			width: 400px;
			font-size: 18px;
			line-height: 24px;
		}

		.try-now
		{
			background-color: #00cc75;
			color: white;
			padding: 7px 40px;
			display: inline-block;
			text-decoration: none;
			border-radius: 3px;
			font-size: 1.4em;
			font-weight: bold;
		}

		&.laptop
		{
			background-position: center top;
			width: 100%;
			height: 500px;

			.description
			{
				width: 340px;
				padding-right: 40px;
				vertical-align: top;
				display: inline-block;

				html[dir='rtl'] &
				{
					.padding-left-right(40px, 0);
				}
			}

			.video
			{
				display: inline-block;
				padding-top: 100px;
			}

			html[dir='rtl'] &
			{
				transform: scaleX(-1);
			}

			p
			{
				font-size: 16px;
				color: #000;
				display: inline-block;
				margin: 0 0 20px 0;
				width: auto;
				line-height: 20px;
			}

			.small
			{
				font-size: 14px;
			}

			.blue
			{
				color: @state-blue;
			}

			h1
			{
				font-size: 56px;
				color: #000;
				padding: 60px 0 20px 0;
				margin: 0;
				font-weight: normal;
				display: inline-block;
				line-height: 56px;
			
				sup
				{
					color: @state-blue;
					text-transform: none;
					font-size: 18px;
					font-weight: normal;
					top: -23px;
					margin-left: 3px;
				}
			}

			h3
			{
				text-align: center;
				font-style: italic;
				font-weight: normal;
				margin-top: 0;
			}

			.try-now
			{
				color: #00cc75;
				background-color: white;
			}

			html[dir='rtl'] &
			{
				.container
				{
					transform: scaleX(-1);
				}
			}

			.datafinder-img
			{
				position: absolute;
				top: 30px;
				left: 485px;

				html[dir='rtl'] &
				{
					left: 0;
				}
			}
		}

		.column
		{
			display: inline-block;
			vertical-align: top;
			width: 465px;

			html[dir='rtl'] &
			{
				float: right;
			}
		}

		.image
		{
			width: 470px;
			height: 300px;
			box-shadow: 0 0 5px 2px #eaeaea;
		}

		&.search
		{
			background-color: #f2f2f0;
			margin-top: 60px;
			padding: 60px 0;

			.image
			{
				.hires('/img/v4/datafinder/pic-search', @ext: 'gif');
			}
		}

		&.filter
		{
			padding: 60px 0;
			h2, p
			{
				float: right;

				html[dir='rtl'] &
				{
					float: left;
				}
			}

			.image
			{
				.hires('/img/v4/datafinder/pic-filter', @ext: 'gif');
			}
		}

		&.refresh
		{
			background-color: #f2f2f0;
			padding: 60px 0;
			.image
			{
				.hires('/img/v4/datafinder/pic-refresh', @ext: 'gif');
			}

			span
			{
				font-weight: bold;
			}
		}

		&.try
		{
			background-color: #f2f2f0;
			padding: 40px 0 60px 0;
			text-align: center;
		}
	}

	.datafinder-download-btn
	{
		display: inline-block;
		width: 200px;
		height: 28px;
		text-align: center;
		text-transform: uppercase;
		background-color: @grass-green;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24);
		font-size: 14px;
		font-weight: bold;
		color: @charcoal-grey;
		line-height: 1;
		padding-top: 12px;
		border-radius: 2px;
		cursor: pointer;
		text-decoration: none;
		outline: none;

		&:hover
		{
			background-color: @grass-green-hover;
		}
	}

	.datafinder-learnmore-btn
	{
		display: inline-block;
		height: 28px;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		color: @royal-blue;
		line-height: 1;
		padding: 10px 15px 0px 0px;
		cursor: pointer;
		.hires('/img/v7/datafinder/fa-chevron', @backgroundSize: 6px);
		background-position-x: calc(~'100% - 5px');
		background-position-y: center;
		background-size: 6px;
		background-repeat: no-repeat;
		text-decoration: none;
		outline: none;

		&:hover
		{
			text-decoration: underline;
		}

		html[dir='rtl'] &
		{
			padding: 10px 0px 0px 20px;
			.hires('/img/v7/datafinder/fa-chevron-rtl', @backgroundSize: 6px);
			background-position-x: 5px;
		}
	}

	.datafinder-img
	{
		display: block;
		width: 448px;
		height: 314px;
		.hires('/img/v7/datafinder/home','png?v=1', @backgroundSize: contain);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}
}

div#home-datafinder
{
	h2
	{
		text-align: center;
		font-weight: bold;
		text-transform: uppercase;

		sup
		{
			color: @state-blue;
			text-transform: none;
			font-size: 16px;
			font-weight: normal;
			top: -18px;
		}
	}

	#datafinder-desc
	{
		margin-top: 30px;
		font-size: 18px;
		line-height: 24px;
		color: @desc-color;

		.col-50
		{
			display: inline-block;
			width: 450px;
			overflow: hidden;
		}

		#dd-text
		{
			margin-bottom: 40px;
		}

		h4
		{
			color: @state-blue;
			font-size: 21px;
			line-height: 30px;
		}

		.datafinder-download-btn
		{
			margin-right: 20px;

			html[dir='rtl'] &
			{
				.margin-left-right(20px, 0);
			}
		}

		.small
		{
			font-size: 14px;
		}

		.blue
		{
			color: @state-blue;
		}
	}
}