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

@accent-text-color-hover: #6993a9;
@charcoal: #353d40;
@off-white: #f0f0ec;
@section-light-gray: #f7f7f7;
@section-blue: #6993a9;
@sky: #c8d7df;
@light-gray: #292929;
@slate-blue: #6993a9;
@royal-blue: #1e77bd;

body
{
	background-color: white;
}

div#site-holder
{
	width: 100%;
	min-width: 940px;
	overflow-x: hidden;

	&.page-edit-mode
	{
		background-color: #EDF2F6;

		#site-header
		{
			display: none;
		}

		#site-main
		{
			margin-top: 130px;
			box-shadow: none;
			padding-top: 15px;

			&.themed
			{
				margin-top: 170px;
			}
		}
	}
}

div#site-main
{
	width: 910px;
	margin: auto;
	position: relative;

	&.page-edit-mode
	{
		position: static;
	}

	div#site-holder.v4 &
	{
		box-shadow: none;
		width: 100%;
		margin: auto;
		padding: 0;
	}

	&.view, &.dsbrowser
	{
		width: 940px;
		padding: 0;

		&.presentation
		{
			margin-top: 85px;
			padding-top: 15px;
		}
	}

	&.data-product
	{
		padding-top: 0;
		box-shadow: 0 20px 100px 50px #ecece7; //reduced offset-y because of product header
	}

	&.search
	{
		background: url(/img/v4/bg_under_search.png) repeat-x left 55px;

		&.data-product
		{
			background: none;
		}
	}

	&.wide.v7
	{
		width: 100%;
		padding: 0;
		margin-top: 0;
		border-top: 1px solid #eee;
	}

	&.our-products,
	&.knoema-professional,
	&.v7.signup,
	&.v7.signin
	{
		width: 100%;
		margin-top: 0 !important;
		border-top: 1px solid #eee;
	}

	&.top-margin
	{
		margin-top: 20px;
	}

	&.search
	{
		border-top: 1px solid #eee;
	}
}

div#site-header
{
	background-color: white;
}

div#site-footer-links
{
	width: 940px;
	margin: auto;
	background-color: white;
	margin-top: -20px;

	div#site-holder.v4 &
	{
		width: 100%;
	}
}

div#site-navigation
{
	display: none;
}

div#site-footer-copyright
{
	background-color: @charcoal;
	.hires('/Img/v7/bg-gray', 'jpg', 578px 482px);
	background-position: center;
	background-size: 578px 482px;
	font: normal 16px @title-font;
	color: @accent-text-color;
	text-align: center;
	padding: 90px 0 0 0;
	position: relative;

	.wrapper
	{
		width: 940px;
		margin: auto;
		text-align: left;
		overflow: hidden;
		position: relative;
		z-index: 1;

		html[dir='rtl'] &
		{
			text-align: right;
		}

		div
		{
			vertical-align: top;
			display: inline-block;
			zoom: 1;

			h4
			{
				margin: 0;
				font: bold 16px @title-font;
				text-transform: uppercase;
				height: 44px;
			}

			ul
			{
				margin: 0;
				padding: 0;

				li
				{
					list-style-type: none;
				}
			}
		}

		.footer-columns
		{
			margin: 0;
			margin-bottom: 245px;
			font-size: 0;
			overflow: visible;
			width: 500px;
			white-space: nowrap;

			& > div
			{
				white-space: normal;
				font-size: 16px;
				max-width: 190px;

				&.small
				{
					max-width: 100px;
				}

				margin-right: 30px;

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

			a
			{
				margin-bottom: 12px;
			}
		}


		.first-column
		{
			width: 423px;
			margin: 0 0 34px 0;
		}

		a
		{
			font: normal 16px @title-font;
			display: inline-block;
			color: @accent-text-color;
			text-decoration: none;

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

		.social a
		{
			margin: 0 20px;
			vertical-align: middle;
			display: inline-block;
			width: 32px;
			height: 32px;
			border: none;
			background-position: 0 0;

			&:hover
			{
				background-position: -32px 0;
			}

			&:first-child
			{
				margin-left: 0;

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

			&.facebook
			{
				.hires('/img/v7/ico-sn-fb', @backgroundSize: 64px 32px);
			}

			&.linked-in
			{
				.hires('/img/v7/ico-sn-in', @backgroundSize: 64px 32px);
			}

			&.twitter
			{
				.hires('/img/v7/ico-sn-tw', @backgroundSize: 64px 32px);
			}
		}

		.knoema-logo
		{
			.knoema-logo('%23fff', 200, 47);
			background-size: contain;
			background-repeat: no-repeat;
		}

		#mission
		{
			display: inline-block;
			width: 311px;
		}
	}

	#copyright
	{
		font: normal 16px @title-font;
		color: white;
		width: 100%;
		display: block;
		bottom: 10px;
		position: absolute;
		text-align: left;
		padding: 35px 0;
		border-top: 1px solid #797e80;

		html[dir='rtl'] &
		{
			text-align: right;

			&.plain
			{
				text-align: left;
				left: 0px;
			}
		}

		span
		{
			display: inline-block;
			padding: 0 1em;
			margin: 0 1em;
			line-height: 1em;
			border-left: 1px solid white;

			html[dir='rtl'] &
			{
				border-left: none;
				border-right: 1px solid white;
			}
		}
	}
}

div#pager
{
	font-family: @text-font;
}

div#site-search
{
	.v4 &
	{
		width: 910px;
		margin: 20px auto 0 auto;
		padding: 0 0 10px 0;
		background: none;
	}

	div#site-search-button
	{
		position: absolute;
		right: 0;
		padding: 0 25px;
		color: white;
		background-color: @accent-color;
		font: bold 10.5pt @title-font;
		border-radius: 3px;
		line-height: 38px;
		height: 38px;
		background-image: none;
		cursor: pointer;

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

		.v4 &, .data-product &
		{
			position: absolute;
			top: 12px;
			right: 10px;
			padding: 0;
			background-position: 0 -16px;
			background-repeat: no-repeat;
			width: 15px;
			height: 16px;
			background-color: transparent;
			.hires('/img/v4/icon_search');

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

	div#search-progress
	{
		top: 12px;
		right: 110px;

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

		.data-product &
		{
			right: 35px;

			html[dir='rtl'] &
			{
				right: unset;
				left: 35px;
			}
		}
	}

	div#site-search-examples
	{
		font: 9pt @title-font;
		color: @accent-color;

		label
		{
			color: #a0a0a0;
		}

		a
		{
			color: @accent-color;
			text-decoration: none;
			border-bottom: none;
			font: 9pt @title-font;
		}

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

	ul li
	{
		font-family: @text-font;
	}
}

div#search-pager a
{
	font-family: @text-font;
	color: @accent-color;
}

.search-autocomplete-results
{
	&.home:not(.visible)
	{
		z-index: 10;
		margin-top: -1px;
		box-sizing: border-box;
		margin-left: 1px;

		.search-autocomplete-select
		{
			background-color: #f7f7f7;
			font-weight: bold;
		}
	}

	ul li
	{
		font: normal 20px @title-font;
		.padding-left-right(14px, 14px);
		color: #292929;
	}
}

a#gadget-bin-img
{
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

.page-section
{
	padding: ~"110px calc((100% - 940px) / 2)";
	margin-top: 0;
	box-sizing: border-box;
	position: relative;

	.header-statement
	{
		display: inline-block;
		width: 580px;
	}

	&.dark
	{
		background-color: @charcoal;
		color: white;

		h1, h2, h3, h4, h5, h6
		{
			color: white;
		}
	}

	&.dark-map
	{
		color: @accent-text-color;
		.hires('/Img/v7/bg-gray', 'jpg', @backgroundSize: 578px 482px);
		background-position: center;
		background-size: 578px 482px;
		background-color: @charcoal;
		height: 356px;
		box-sizing: border-box;
		padding-top: 55px;
		padding-bottom: 55px;

		p
		{
			color: @accent-text-color;
		}

		& > :not(.dark-gradient)
		{
			z-index: 1;
			position: relative;
		}
	}

	&.gray
	{
		background-color: @off-white;
	}

	&.light-gray
	{
		background-color: @section-light-gray;
	}

	&.blue
	{
		background-color: @section-blue;
		color: white;

		h1, h2, h3, h4, h5, h6, p
		{
			color: white;
		}
	}

	&.light-map
	{
		color: @accent-text-color;
		.hires('/Img/v7/bg-lightgrey', @ext:'jpg', @backgroundSize: 578px 480px);
		background-position: center;
		background-size: 578px 480px;
		height: 260px;
		box-sizing: border-box;
	}

	h1
	{
		font: 56px @title-font;
		line-height: 90%;
		letter-spacing: -0.01em;
	}

	h2, h3, h4
	{
		margin: 0;
		font: bold 36px @title-font;
		color: @charcoal;
		letter-spacing: -0.01em;
	}

	h3, h4
	{
		font-size: 18px;
	}

	p
	{
		color: #292929;
		line-height: 140%;
		letter-spacing: 0.01em;
	}

	.column
	{
		display: inline-block;
		width: 49%;
		box-sizing: border-box;
		vertical-align: top;

		&:first-child
		{
			padding-right: 100px;

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

		&:last-child
		{
			padding-left: 100px;

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

	&.products ul
	{
		white-space: nowrap;
		
		li
		{
			white-space: normal;
		}
	}
}

.dark-gradient
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
	background: linear-gradient(to top, fade(@charcoal, 0%) 0%, fade(@charcoal, 60%) 100%);
}

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

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

.products
{
	.uppercase
	{
		text-transform: uppercase;
	}

	h2
	{
		margin-bottom: 40px;
	}

	h2 + p
	{
		color: white;
		font-size: 16px;
		font-weight: normal;
	}

	ul
	{
		list-style-type: none;
		font-size: 0;
		padding: 0;
		margin-top: 60px;
		position: relative;

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

	li
	{
		font-size: 16px;
		display: inline-block;
		width: 260px;
		margin: 0;
		padding: 42px 45px;
		text-align: center;
		vertical-align: middle;
		min-height: 352px;
		height: auto;
		background-color: white;
		box-sizing: border-box;

		&.free
		{
			width: 312px;

			p
			{
				margin-bottom: 66px;
			}
		}

		&.pro
		{
			width: 322px;
			background-color: @sky;
			padding-top: 62px;
		}

		&.enterprise
		{
			width: 306px;
			padding: 42px 43px;
		}

		h4, p
		{
			color: @charcoal;
		}

		p
		{
			text-align: left;
			margin-bottom: 45px;

			html[dir='rtl'] &
			{
				text-align: right;
			}
		}

		a.explore
		{
			font-weight: bold;
			line-height: 2.13em;
			letter-spacing: -0.1px;
			color: @accent-color;
			text-decoration: none;
		}
	}
}

.v7.authenticated-user
{
	#site-search
	{
		padding-top: 15px;
		padding-bottom: 15px;

		> div[itemscope]
		{
			position: relative;

			#search-progress
			{
				top: 8px;
				right: 26px;

				html[dir=rtl] &
				{
					left: 24px;
					right: auto;
				}
			}
		}

		form
		{
			position: relative;
		}

		#search-query
		{
			width: ~"calc(100% - 30px)";
			color: #292929;
			background-image: none;
			background-color: @sky;
			border: 1px solid white;
			box-sizing: border-box;
			padding: 10px 15px;
			margin: 0 15px;
			font: normal 20px @title-font;
			line-height: 18px;

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

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

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

			&::selection
			{
				background-color: @secondary-color;
				color: #fff;
			}

			&::-moz-selection
			{
				background-color: @secondary-color;
				color: #fff;
			}
		}

		#site-search-button
		{
			background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19px' height='19px' viewBox='0 0 19.03 19.03'%3E%3Cdefs%3E%3Cstyle%3E .cls-1,.cls-3%7Bfill:none%7D.cls-1%7Bstroke:%23353d40;stroke-width:1.5px%7D.cls-2%7Bstroke:none%7D %3C/style%3E%3C/defs%3E%3Cg id='ico-search' transform='translate(-1060 -72)'%3E%3Cg id='Ellipse_1' class='cls-1' data-name='Ellipse 1' transform='translate(1060 72)'%3E%3Ccircle cx='8' cy='8' r='8' class='cls-2'/%3E%3Ccircle cx='8' cy='8' r='7.25' class='cls-3'/%3E%3C/g%3E%3Cpath id='Line_98' d='M5 5L0 0' class='cls-1' data-name='Line 98' transform='translate(1073.5 85.5)'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center center;
			width: 19px;
			height: 19px;
			padding: 10px;
			margin-right: 15px;

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

		#site-search-examples
		{
			display: none;
		}
	}

	.page-section
	{
		height: auto;

		h3
		{
			color: @charcoal;
			font-size: 36px;
			font-weight: bold;
			text-transform: uppercase;
			text-align: center;
			margin-bottom: 50px;
		}

		&#home-tags
		{
			padding-top: 40px;
			padding-bottom: 60px;

			#atlas-topics, #atlas-countries, #sources
			{
				line-height: 28px;

				h3
				{
					a
					{
						font-size: 24px;
						text-transform: uppercase;
						color: @slate-blue;
					}
				}

				a
				{
					font-size: 18px;
					color: black;
				}

				.more
				{
					color: @royal-blue;
					font-size: 16px;
					font-weight: bold;
				}
			}
		}

		&.blog
		{
			padding-top: 78px;

			.column
			{
				width: 470px;
				box-sizing: border-box;
				padding-left: 15px;
				padding-right: 15px;
				font-size: 14px;
				line-height: 20px;

				a
				{
					text-decoration: none;

					h2
					{
						color: @slate-blue;
						text-transform: uppercase;
						font-size: 24px;
						margin-bottom: 10px;
					}
				}
			}
		}
	}
}