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

@product-text-font: @text-font;

div.column
{
	display: inline-block;
	vertical-align: top;
}

div.solutions
{
	margin: 0 5px;

	h1
	{
		font: normal 26pt @product-text-font;
		padding: 25px 0;
		width: 650px;
		text-align: center;
		margin: auto;
	}

	h2
	{
		color: @accent-color;
		background-color: white;
	}

	div.item
	{
		div.title
		{
			text-align: center;
			padding: 30px 0;

			div
			{
				background: url('/img/v4/hr.png') repeat-x center center;
				height: 2px;
			}

			a
			{
				text-decoration: none;

				h2
				{
					font: bold 26pt @product-text-font;
					display: inline-block;
					position: relative;
					top: -25px;
					z-index: 10;
					margin: 0;
					padding: 0 15px;
				}
			}
		}

		div.description
		{
			div.column.long
			{
				width: 650px;

				h3
				{
					font: normal 18pt @product-text-font;
					margin-top: 0;
				}

				h4
				{
					font: normal 12pt @product-text-font;
					margin: 0 0 10px 0;
					color: black;
				}

				span
				{
					font: normal 12pt @product-text-font;
					color: #888;
				}
			}

			div.column.short
			{
				width: 245px;

				div.examples
				{
					span
					{
						font: normal 13pt @product-text-font;
						color: black;
						margin: 5px 0 5px 20px;
						display: block;
					}

					a
					{
						font: normal 13pt @product-text-font;
						display: inline-block;
						margin-left: 20px;
						color: #0077CA;
						text-decoration: none;
						border-bottom: 1px solid #d0dcf2;

						&.last
						{
							margin-bottom: 30px;
						}
					}

					a
					{
						text-decoration: none;

						img
						{
							width: 190px;
							height: 190px;
						}
					}

					&.right-aligned
					{
						span, a
						{
							margin-left: 50px;
						}

						span.ex
						{
							float: right;
						}
					}
				}
			}


			.ex(@url)
			{
				display: inline-block;
				width: 210px;
				height: 210px;
				margin: 0;
				background-repeat: no-repeat;
				.hires(@url);
			}

			span#cdr
			{
				.ex('/img/v4/icon_cdr');
			}

			span#odp
			{
				.ex('/img/v4/icon_odp');
			}

			span#cdn
			{
				.ex('/img/v4/icon_cdn');
			}

			span#rds
			{
				.ex('/img/v4/icon_rds');
			}

			div.learn-more
			{
				margin-top: 25px;

				a
				{
					background-color: #0077CA;
					padding: 5px 10px;
					color: white;
					text-decoration: none;

					span
					{
						width: 13px;
						height: 13px;
						background-repeat: no-repeat;
						display: inline-block;
						vertical-align: middle;
						margin-left: 5px;
						.hires('/img/v4/icon_more_for_btn');
					}
				}
			}
		}
	}	
}

div.solution
{
	margin: 0 5px;

	div.column.nav
	{
		padding-top: 40px;
		width: 190px;

		a
		{
			font: normal 13pt @product-text-font;
			color: black;
			text-decoration: none;
			border-bottom: 1px solid #bab9b4;
		}
	}

	div.column.title
	{
		width: 500px;
		text-align: center;
		height: 200px;

		h1
		{
			font: normal 26pt @product-text-font;
		}

		span
		{
			z-index: 20;
			position: relative;
			top: 10px;

			.title-img(@url)
			{
				display: inline-block;
				width: 210px;
				height: 210px;
				.hires(@url);
			}

			&#cdr
			{
				.title-img('/img/v4/icon_cdr');
			}

			&#cdn
			{
				.title-img('/img/v4/icon_cdn');
			}

			&#od
			{
				.title-img('/img/v4/icon_odp');
			}

			&#rds
			{
				.title-img('/img/v4/icon_rds');
			}
		}
	}

	div.column.other
	{
		width: 200px;
		padding-top: 40px;

		span
		{
			font: normal 13pt @product-text-font;
			display: block;
			margin-bottom: 5px;
		}

		a
		{
			font: normal 13pt @product-text-font;
			display: inline-block;
			color: #0077CA;
			text-decoration: none;
			border-bottom: 1px solid #d0dcf2;
			margin-bottom: 2px;
		}
	}

	div.column.examples
	{
		width: 190px;

		span
		{
			font: normal 18pt @product-text-font;
		}
	}

	div.column.steps
	{
		width: 510px;
		text-align: center;

		.step(@x: 0)
		{
			display: inline-block;
			background-repeat: no-repeat;
			background-position: @x 0;
			width: 32px;
			height: 32px;
			cursor: pointer;
			.hires('/img/v4/icon_arrows');
		}

		.step-hover(@x: 0)
		{
			.hires('/img/v4/icon_arrows_hover');
		}

		span#prev
		{
			.step();

			&:hover
			{
				.step-hover();
			}
		}

		span#next
		{
			.step(-32px);

			&:hover
			{
				.step-hover(-32px);
			}
		}

		span#current
		{
			font: normal 22pt @product-text-font;
			letter-spacing: 5px;
			margin: 0 20px;
			position: relative;
			top: -5px;
		}
	}

	div.column.links
	{
		width: 190px;

		a
		{
			font: normal 13pt @product-text-font;
			display: inline-block;
			color: #0077ca;
			text-decoration: none;
			border-bottom: 1px solid #aebdd2;
			margin-bottom: 2px;

			&#syngenta
			{
				margin-left: 50px;
			}
		}
	}

	div.description
	{
		padding-top: 160px;

		div.column.short
		{
			width: 370px;

			h2
			{
				font: normal 18pt @product-text-font;
				margin-top: 15px;
			}
		}

		div.column.long
		{
			width: 480px;
			margin-left: 30px;

			h3
			{
				font: normal 12pt @product-text-font;
				color: black;
			}

			span
			{
				font: normal 12pt @product-text-font;
				color: #888;
			}
		}

		div.column.cdr1, div.column.cdr2
		{
			&.cdr1
			{
				width: 240px;
			}

			&.cdr2
			{
				width: 220px;
				margin-left: 15px;
			}

			span
			{
				display: block;
				margin-bottom: 10px;

				b
				{
					color: #046e62;
				}
			}
		}
	}

	div.features
	{
		background-color: #f0f0f0;
		padding-top: 30px;
		margin: 40px 0 60px 0;
		border-radius: 3px;

		div.column
		{
			width: 270px;
			margin: 0 0 30px 20px;

			&.l-200
			{
				width: 200px;
			}

			&.l-320
			{
				width: 320px;
			}

			&.l-400
			{
				width: 400px;
			}

			&.l-450
			{
				width: 450px;
			}

			span
			{
				font: normal 11.5pt @product-text-font;
				display: block;
				color: #888;
			}
		}

		.feature-img(@prefix, @i)
		{
			float: left;
			margin-right: 10px;
			display: inline-block;
			height: 54px;
			width: 54px;
			.hires("/img/v4/@{prefix}_0@{i}");
		}

		&.cdr
		{
			span.img
			{
				&#i1 { .feature-img('pr2/icon_cdr', 1) }
				&#i2 { .feature-img('pr2/icon_cdr', 2) }
				&#i3 { .feature-img('pr2/icon_cdr', 3) }
				&#i4 { .feature-img('pr2/icon_cdr', 4) }
				&#i5 { .feature-img('pr2/icon_cdr', 5) }
			}
		}

		&.cdn
		{
			span.img
			{
				&#i1 { .feature-img('pr4/icon_cdn', 1) }
				&#i2 { .feature-img('pr4/icon_cdn', 2) }
				&#i3 { .feature-img('pr4/icon_cdn', 3) }
				&#i4 { .feature-img('pr4/icon_cdn', 4) }
			}
		}

		&.od
		{
			span.img
			{
				&#i1 { .feature-img('pr3/icon_od', 1) }
				&#i2 { .feature-img('pr3/icon_od', 2) }
				&#i3 { .feature-img('pr3/icon_od', 3) }
				&#i4 { .feature-img('pr3/icon_od', 4) }
				&#i5 { .feature-img('pr3/icon_od', 5) }
			}
		}

		&.rds
		{
			span.img
			{
				&#i1 { .feature-img('pr5/icon_rds', 1) }
				&#i2 { .feature-img('pr5/icon_rds', 2) }
				&#i3 { .feature-img('pr5/icon_rds', 3) }
				&#i4 { .feature-img('pr5/icon_rds', 4) }
			}
		}
	}

	div.laptop
	{
		margin: 40px 0 60px 0;
		background: url(/img/v4/galery_laptop.png) no-repeat;
		width: 940px;
		height: 487px;

		div
		{
			width: 610px;
			height: 382px;
			position: relative;
			top: 40px;
			left: 166px;

			&#odata-africa
			{
				.hires('/img/v4/odata_ex');
			}

			&#odata-perm
			{
				.hires('/img/v4/odata_perm_ex');
			}

			&#syngenta
			{
				background: url(/img/v4/syngenta_ex.png) no-repeat;
			}

			&#cdn
			{
				.hires('/img/v4/cdn_ex')
			}
		}
	}

	div.contact
	{
		margin-top: 20px;
		text-align: center;

		span
		{
			font: normal 30pt @product-text-font;
			display: block;
		}

		a
		{
			font: normal 16pt @product-text-font;
			display: inline-block;
			text-decoration: none;
			color: white;
			background-color: #0077ca;
			border-radius: 3px;
			cursor: pointer;
			padding: 12px 50px;
			margin-top: 30px;
		}
	}
}