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

@block-width: 940px;
@slate-blue: #6993a9;
@light-gray: #292929;
@sky: #c8d7df;
@validation-red: #ff5500;
@charcoal-grey: #353d40;

.cheat-sheet
{
	.ui-button
	{
		font-size: 19px;
		text-transform: uppercase;
		padding: .8em 2.4em;
		border-radius: 2px;
		box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
	}

	.page-section
	{
		&.sky
		{
			background-color: @sky;
		}

		p
		{
			letter-spacing: 0;
		}

		h1, h2
		{
			text-transform: uppercase;
		}

		h2, h3
		{
			text-align: center;
			font-size: 36px;
		}

		&.light-map
		{
			height: auto;
		}

		.inline-block
		{
			display: inline-block;
			vertical-align: middle;
			box-sizing: border-box;
			margin: 0;
		}

		label
		{
			display: none;

			.ie9 &
			{
				display: inline;
			}

			float: left;

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

		input[type=text], input[type=email]
		{
			height: 56px;
			width: 100%;
			background-color: @sky;
			border: 1px solid white;
			box-sizing: border-box;
			padding: 25px 30px;

			&::placeholder
			{
				color: @light-gray !important;
				opacity: .6;
			}

			&:-ms-input-placeholder
			{
				color: @light-gray !important;
			}

			&::-ms-input-placeholder
			{
				color: @light-gray !important;
			}
		}

		.size-0
		{
			display: none;
		}

		.size-30
		{
			width: @block-width * .3;
		}

		.size-33
		{
			width: @block-width * .333;
		}

		.size-40
		{
			width: @block-width * .4;
		}

		.size-50
		{
			width: @block-width * .5;
		}

		.size-60
		{
			width: @block-width * .6;
		}

		.size-70
		{
			width: @block-width * .7;
		}

		.size-100
		{
			width: 100%;
		}

		.section-desc
		{
			display: block;
			font-weight: bold;
			font-size: 18px;
			text-transform: uppercase;
			color: @slate-blue;
			letter-spacing: -0.01em;
			margin-bottom: 29px;
		}

		.center
		{
			text-align: center;
		}

		.inline-block-title
		{
			margin-bottom: 6px;

			h1
			{
				margin-top: 0;
				margin-bottom: 18px;
			}

			.desc
			{
				margin-bottom: 29px;
			}

			get-it-now
			{
				margin-top: 6px;
			}
		}

		ul
		{
			list-style: none;

			li
			{
				position: relative;
				line-height: 3em;
				padding-left: 42px;

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

				&:before
				{
					content: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 1' enable-background='new 0 0 24 1' xml:space='preserve'%3E%3Crect fill='%236993a9' width='24' height='1'/%3E%3C/svg%3E%0A");
					display: inline-block;
					width: 24px;
					height: 1px;
					position: absolute;
					top: -5px;
					left: 0;

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

		&.whats-inside
		{
			h2
			{
				margin-bottom: 10px;
			}

			.inline-block
			{
				vertical-align: top;

				&.odd
				{
					padding-top: 8px;
				}

				&.even
				{
					padding-top: 8px;
				}
			}
		}

		&.download
		{
			h2
			{
				margin-bottom: 44px;
			}

			.get-it-now
			{
				margin-left: 14px;

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

			h3
			{
				margin-top: 76px;
				margin-bottom: 22px;
			}

			.size-100
			{
				text-align: center;

				.ui-button.get-it-now
				{
					width: auto;
					margin: 0;
				}
			}


			.ui-button
			{
				box-sizing: border-box;

				&.get-it-now
				{
					width: ~"calc(100% - 14px)";
				}

				&.social
				{
					width: 100%;
					height: 80px;
					line-height: 50px;

					&.facebook
					{
						width: ~"calc(100% - 7px)";
						margin-right: 7px;

						html[dir=rtl] &
						{
							margin-right: 0;
							margin-left: 7px;
						}
					}

					&.twitter
					{
						margin-left: 3.5px;
						margin-right: 3.5px;
						width: ~"calc(100% - 7px)";
					}

					&.linkedin
					{
						width: ~"calc(100% - 7px)";
						margin-left: 7px;

						html[dir=rtl] &
						{
							margin-left: 0;
							margin-right: 7px;
						}
					}
				}
			}
		}

		&.other
		{
			h2
			{
				margin-bottom: 33px;
			}

			ul
			{
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 10px;

				li
				{
					line-height: 2.5em;

					a, a:visited
					{
						text-decoration: none;
						color: @charcoal-grey;

						&:hover
						{
							color: @accent-color;
						}
					}

					.chevron-right
					{
						display: inline-block;
						.hires('/img/v7/chevron-right');
						width: 12px;
						height: 12px;
						position: relative;
						top: 1px;
						margin-left: 5px;

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

	.pic
	{
		background-repeat: no-repeat;
	}

	.pic-thumbnail
	{
		width: 340px;
		height: 425px;
		margin-top: -7px;
		background-position: left;

		html[dir='rtl'] &
		{
			background-position: right;
		}
	}

	.pic-thumbnail-other
	{
		width: 240px;
		height: 300px;
		background-position: center;
		margin: auto;
	}

	.highres
	{
		display: none;

		@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2ppx), only screen and (min-device-pixel-ratio: 2)
		{
			display: block;
			background-size: cover;
		}
	}

	.small
	{
		display: block;
		background-size: contain;

		@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2ppx), only screen and (min-device-pixel-ratio: 2)
		{
			display: none;
		}
	}
}