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

div.sign-up.trial
{
	a
	{
		color: @accent-color;
		font: 10pt @title-font;
	}

	h2
	{
		font: normal 20pt @title-font;
		text-align: center;
		margin-bottom: 0;
	}

	h3
	{
		font: bold 12pt @title-font;
		text-align: center;
		margin: 10px 0 40px 0;
	}

	div.container
	{
		overflow: hidden;
	}

	div.benefits
	{
		position: absolute;
		left: 50%;
		margin: 20px 0 0 -340px;
		width: 680px;
		background-color: #f5f5f5;
		border: 1px solid #DCDCDC;

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

		div.header
		{
			background-color: @accent-color;
			height: 40px;

			span
			{
				position: relative;
				top: 8px;
				//left: 80px;
				left: 100px;
				color: white;
				font: bold 12pt @title-font;

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

		div.options
		{
			width: 280px;
			text-align: center;

			div
			{
				width: 240px;
				margin: auto;
				padding-bottom: 15px;

				&.i1
				{
					padding-top: 20px;
				}

				h4
				{
					color: #808080;
					font: 10.5pt @title-font;
					margin-top: 5px;
				}

				h5
				{
					font: bold 10pt @title-font;
					margin: 0;
				}


				span
				{
					display: inline-block;
				}

				&.i1 span
				{
					width: 98px;
					height: 66px;
					background-image: url("/img/v4/trial/icon_no_skills_required.png");
				}

				&.i2 span
				{
					width: 72px;
					height: 85px;
					background-image: url("/img/v4/trial/icon_bootstrap_portal.png");
				}

				&.i3 span
				{
					width: 76px;
					height: 73px;
					background-image: url("/img/v4/trial/icon_customizable.png");
				}

				&.i4 span
				{
					width: 72px;
					height: 64px;
					background-image: url("/img/v4/trial/icon_support.png");
				}
			}
		}
	}

	div#register-form
	{
		position: relative;
		left: 50%;
		width: 350px;
		background-color: white;
		border: 1px solid #DCDCDC;
		padding: 20px 20px 0 20px;
		min-height: 640px;
		margin: 0 0 40px -60px;

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

		span.title
		{
			font: bold 12pt @title-font;
			display: inline-block;
			margin-bottom: 10px;
		}

		span.subtitle
		{
			font: bold small @title-font;
			color: black;
			display: inline-block;
			margin-top: 10px;
		}

		span.comment
		{
			color: #505050;
		}

		.passwords
		{
			height: auto;
			margin-bottom: 20px;
		}

		input#CommunityId
		{
			width: 220px !important;
			margin-top: 0;
			float: left;

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

			+ strong
			{
				display: inline-block;
				margin-top: 10px;
			}
		}

		div#id-busy, div#id-invalid, div#id-available
		{
			display: none;

			span
			{
				font-size: .7em;
				font-weight: normal;
				color: #c13a3f;
			}
		}

		div#id-available span
		{
			color: #39922c;
		}
	}
}

div.trial-activation
{
	font-family: @title-font;

	div.img.box
	{
		display: inline-block;
		width: 111px;
		height: 92px;
		background-image: url("/img/v4/trial/icon_box.png");
		float: left;
		margin: 30px;

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

	div.text-block
	{
		margin-left: 171px;

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

		span
		{
			color: #808080;
			font-size: 0.9em;
			float: left;
			margin: 8px 20px 0 0;

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

		input[type='submit']
		{
			background: none repeat scroll 0 0 #0077CA;
			border: 0 none;
			color: #FFFFFF;
			font-size: 0.8em;
			font-weight: bold;
			padding: 0.5em 2em;
			text-align: center;
		}
	}
}

div.trial-thank-you
{
	font-family: @title-font;

	div.img.rocket
	{
		display: inline-block;
		width: 52px;
		height: 129px;
		background-image: url("/img/v4/trial/icon_rocket.png");
		float: left;
		margin: 54px 50px 0;

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

	div.text-block
	{
		margin-left: 152px;

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

		span
		{
			color: #808080;
			font-size: 0.9em;
			float: left;
			margin: 20px 20px 0 0;

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

		a.launch-btn
		{
			background: none repeat scroll 0 0 #0077CA;
			border: 0 none;
			color: #FFFFFF;
			font-size: 0.8em;
			font-weight: bold;
			padding: 0.5em 2em;
			text-align: center;
			text-decoration: none;
		}
	}
}