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

#invite
{
	padding-bottom: 40px;

	h2
	{
		text-align: center;
		font: bold 16pt @title-font;
		margin-top: 40px;
		margin-bottom: 0;
	}

	h3
	{
		font: italic 11.5pt @title-font;
		color: #8b8b8b;
		width: 600px;
		margin: auto;
		text-align: center;
		margin-top: 10px;

		span
		{
			color: #009900;
			font-weight: bold;
		}
	}

	p
	{
		text-align: center;
		font-family: @title-font;
		width: 700px;
		margin: 10px auto;
	}

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

		&.bottom
		{
			height: 100px;
		}

		a
		{
			display: inline-block;
			background-color: #009900;
			padding: 10px 40px;
			font: bold 12pt @title-font;
			color: #fff;
			text-decoration: none;
			border-radius: 3px;

			&:hover, &:visited
			{
				color: #fff;
			}
		}
	}

	.description
	{
		margin-top: 50px;
		text-align: center;

		ul
		{
			list-style-type: square;
			display: inline-block;
			margin: 15px auto 10px auto;
			padding: 0;

			li
			{
				color: @accent-color;
				padding: 3px 0;
				text-align: left;

				span
				{
					color: #666;
					font: 12pt @title-font;
				}
			}
		}

		.metrics
		{
			margin-top: 20px;

			div
			{
				display: inline-block;
				border-radius: 50%;
				border: 1px solid #0077ca;
				padding: 20px 0;
				width: 80px;
				display: inline-block;
				margin-right: 20px;

				span
				{
					color: #5da90b;
					display: block;
					font-size: 10.5pt;
					font-family: @title-font;

					&.bold
					{
						font-size: 12pt;
						font-weight: bold;
					}
				}
			}
		}
	}

	.intro
	{
		background: url(/img/v4/slides/welcome.png) no-repeat;
		background-size: 400px 250px;
		height: 250px;
		width: 400px;
		cursor: pointer;
		margin: 10px auto;
	}

	.people
	{
		margin: 30px auto;
		width: 420px;
		height: 133px;
		.hires('/img/v4/edu/people');
	}

	.referral-code
	{
		padding: 20px 0 25px 0;
		text-align: center;
		background-color: #f9f9f9;

		html[dir='rtl'] &
		{
			right: -15px;
			left: auto;
		}

		h3
		{
			color: @accent-color;
			font: bold 15pt @title-font;
			margin: 10px auto;
		}

		span
		{
			font: bold 16pt @title-font;
		}

		.share
		{
			margin-top: 20px;
			margin-bottom: 5px;

			a
			{
				display: inline-block;
				position: relative;
				width: 140px;
				height: 35px;
				line-height: 35px;
				border-radius: 2px;
				background-repeat: no-repeat;
				background-position: 10px;
				text-decoration: none;
				color: white;
				font-size: 12pt;
				font-weight: bold;
				font-family: @title-font;
				.margin-left-right(0, 15px);

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

				span
				{
					width: 24px;
					height: 24px;
					display: inline-block;
					position: absolute;
					left: 12px;
					top: 6px;

					html[dir='rtl'] &
					{
						left: inherit;
						right: 12px;
					}
				}

				&.email
				{
					background-color: #5da90b;

					span
					{
						.hires('/img/v4/edu/ico-mail');
					}

					&:hover
					{
						background-color: #6ABC0D;
					}
				}

				&.facebook
				{
					background-color: #3C5999;

					span
					{
						.hires('/img/v4/edu/ico-fb');
						left: 8px;

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

					&:hover
					{
						background-color: #5872B1;
					}
				}

				&.twitter
				{
					background-color: #00ABEC;

					span
					{
						.hires('/img/v4/edu/ico-tw');
					}
					
					html[dir='rtl'] &
					{
						margin-left: 0;
					}

					&:hover
					{
						background-color: #1CBBFF;
					}
				}
			}
		}

		.link
		{
			margin-top: 20px;

			label
			{
				font: 10pt @title-font;
			}

			#url
			{
				padding: 7px;
				width: 300px;
				border: 1px solid #eaeaea;
				font-size: 10.5pt;
			}
		}
	}
}

#intro-popup
{
	display: none;
	width: 800px;
	height: 450px;
	position: absolute;
	left: 50%;
	margin-left: -400px;
	top: 50%;
	margin-top: -225px;
	background-color: black;
	border: 2px solid #eaeaea;
	z-index: 12;

	span
	{
		background-color: #999;
		border-radius: 15px;
		cursor: pointer;
		font-weight: bold;
		height: 30px;
		line-height: 30px;
		position: absolute;
		right: -17px;
		text-align: center;
		top: -17px;
		width: 30px;
		color: white;
	}
}

#intro-overlay
{
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #222;
	opacity: 0.8;
	z-index: 11;
}