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

div#atlas-header > div > span.like-header, div#atlas-header > span.like-header
{
	display: inline-block;
	margin-bottom: 15px;
	font-size: 1.5em;
	font-family: @title-font;
	clear: left;
	font-weight: bold;
}

p.atlas-banner
{
	min-height: 45px;
	margin-top: 0;
	padding-top: 1em;
	font: 1.1em @title-font;
	font-weight: bold;
	border: 1px dotted @accent-color;
	text-align: center;

	a.button
	{
		margin-left: 1em;
		background-color: @accent-color;
		color: white;
		padding: 4px 12px;
		text-decoration: none;
		display: inline-block;
		font-weight: normal;
		font-size: smaller;
	}
}

div#site-holder.v7
{
	background-color: #f0f0ec;

	div#atlas
	{
		h1
		{
			font-size: 30px;
			font-weight: bold;
			color: #353d40;
		}

		.description
		{
			font-size: 16px;
			font-weight: normal;
			color: #292929;
		}

		div#indicator
		{
			span
			{
				&.italic
				{
					font-style: normal;
					display: block;
					margin: 10px 0;
				}
			}
		}

		table
		{
			&.knoema-table
			{
				width: 360px;
				margin-left: 550px;

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

				th,
				td
				{
					font-size: 16px;
				}

				th
				{
					height: 30px;
					background-color: #f0f0ec;
					color: #353d40;
					text-transform: uppercase;
				}

				td
				{
					height: 36px;
				}

				tr
				{
					background: #f5f5f5;

					&.odd
					{
						background: none;
					}
				}
			}
		}

		div#chart
		{
			width: 535px;

			&.compare
			{
				width: 100%;
			}
		}
	}
}

body.fullscreen #site-holder #site-main #atlas-header
{
	width: 910px;
	margin: 0 auto;
}

div#atlas
{
	min-height: 600px;

	&.no-data
	{
		min-height: initial;
	}

	body.fullscreen #site-holder #site-main &
	{
		width: 910px;
		margin: 0 auto;
	}

	h1
	{
		font-size: 130%;
		font-weight: normal;
		font-family: @title-font;
	}

	.description
	{
		text-align: justify;
		margin-top: 0;
		font-size: small;
	}

	&.whatis-description
	{
		div#chart
		{
			margin-top: 0;
		}

		table.knoema-table
		{
			margin-top: 13px;
		}

		div#indicator
		{
			.value
			{
				padding-bottom: 25px;
			}

			div.yodatai-description
			{
				padding-bottom: 2px;
			}
		}
	}

	h4.whatis-description
	{
		font-size: 110%;
		font-weight: bold;
		font-family: @title-font;
		margin-top: 10px;
		margin-bottom: 5px;
	}

	div#indicator
	{
		margin-top: 20px;
		overflow: hidden;

		.value
		{
			float: left;
			text-align: center;
			margin-right: 20px;

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

		h4.whatis-description
		{
			font-size: 100%;
			margin-top: 15px;
			margin-bottom: 0;
		}

		span
		{
			&.strong
			{
				font-size: 2.5em;
				font-weight: bold;
			}

			&.italic
			{
				font-style: italic;
				direction: ltr;
				unicode-bidi: embed;
			}
		}
	}

	table
	{
		&.knoema-table
		{
			width: 290px;
			margin-top: 20px;
			margin-left: 620px;

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

			td a, td a:visited
			{
				color: @accent-color;
			}

			td.percent
			{
				width: 70px;
			}

			td[colspan="2"]
			{
				.padding-left-right(5em, 0);

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

				.fa
				{
					color: black;
				}
			}
		}

		tr.odd
		{
			background: #f0f0f0;
		}
	}

	div#chart
	{
		float: left;
		margin-top: 20px;
		width: 600px;
		position: relative;
		min-height: 450px;

		.highcharts-container
		{
			position: relative !important;
		}

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

		&.compare
		{
			width: 100%;
			float: none;
		}

		& > div:first-child
		{
			text-align: center;

			div#indicator-preview-host
			{
				width: 100%;
				height: 400px;
			}
		}

		span
		{
			font-size: .8em;
		}

		.premium-overlay
		{
			height: 100%;
		}

		.gadget-host
		{
			position: relative;

			.premium-helper
			{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 20px;
				z-index: 2;
			}
		}
	}

	div#country-values
	{
		padding-top: 15px;
		width: 100%;

		div.region
		{
			&:last-child
			{
				margin-right: 0;

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

			padding-top: 5px;
			width: 130px;
			height: 81px;
			margin: 0 15px 15px 0;
			display: inline-block;
			text-align: center;
			background: #f0f0f0;
			border-bottom: 5px solid #f0f0f0;

			&.current
			{
				min-width: 130px;
				width: auto;
				.padding-left-right(5px, 0);
				
				html[dir='rtl'] &
				{
					.padding-left-right(0, 5px);
				}
			}

			html[dir='rtl'] &
			{
				margin: 0 0px 15px 15px;
			}

			&:first-child p
			{
				font-size: 14pt;

				span
				{
					display: inline-block;
					position: relative;
					top: -6px;
				}
			}

			h4
			{
				font-weight: normal;
				font-size: 10pt;
				height: 38px;

				a
				{
					color: @accent-color;
					font-family: @title-font;
				}
			}

			p
			{
				width: 100%;
				margin: 0;
				font-family: @title-font;
				font-size: 14pt;

				span
				{
					font-weight: normal;
					font-size: 8pt;
					font-style: italic;
					color: #888;
				}
			}
		}
	}

	div.indicator-middle
	{
		padding-top: 30px;
		overflow: auto;

		h4
		{
			margin: 0;
			margin-left: 25px;
			margin-bottom: 5px;
			font-weight: normal;
			font-size: .9em;
		}

		.last-submissions
		{
			float: none;
			width: 310px;
		}
	}

	div.indicator-bottom
	{
		table
		{
			width: 100%;
			margin-left: 0;
		}
	}
}

html.ie, html.firefox
{
	div#atlas div#country-values div.region:first-child
	{
		top: 3px;
	}
}

#see-also table.rankings td
{
	cursor: default;

	&.name,
	&.more
	{
		a
		{
			border-bottom: 0px;
			text-decoration: underline;
		}
	}
}

.no-data_variants
{
	display: table;
	float: left;
	width: 278px;
	height: 178px;
	background: #F0F0EC;
	color: #353D40;
	font-weight: bold;
	font-size: larger;
	text-transform: uppercase;
	text-align: center;
	border: 1px solid #F0F0EC;
	text-decoration: none;
	margin-top: 10px;
	.margin-left-right(0, 35px);

	span
	{
		vertical-align: middle;
		display: table-cell;
	}

	&.last
	{
		.margin-left-right(0, 0);
	}

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

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

		&.first
		{
			.margin-left-right(0, 0);
		}
	}
}

#update-alert-dialog
{
	margin-top: 20px;
}