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

@royal-blue: #1e77bd;
@off-white: #f0f0ec;
@slate-blue: #6993a9;
@sky: #c8d7df;
@white-smoke: #f5f5f5;
@charcoal-grey: #353d40;
@grass-green: #81c45c;
@checkbox-input-label: #292929;

.v7.semantic-atlas#site-holder
{
	&.home,
	&.topic
	{
		#site-header .wrapper
		{
			width: 940px;
			margin: auto;
		}

		#site-main
		{
			width: 940px;
			background-color: white;
			box-sizing: border-box;
		}
	}

	.level-1,
	.level-2,
	.children span
	{
		cursor: pointer;

		a
		{
			text-decoration: none;
		}
	}

	.level-1 a
	{
		display: block;
		font: bold 24px @title-font;
		text-decoration: none;
		color: @accent-color;
		line-height: 1.42;
		letter-spacing: -0.2px;

		&:hover
		{
			color: @slate-blue;
		}
	}

	.children span,
	.level-2
	{
		display: inline-block;
		.padding-left-right(10px, 10px);
		border-radius: 2px;
		margin-bottom: 4px;

		a
		{
			color: @slate-blue;
			letter-spacing: -0.1px;
		}

		&:hover
		{
			background-color: @sky;

			a
			{
				color: white;
			}
		}
	}

	.level-2,
	.children .level-2
	{
		background-color: fadeout(@sky, 80%);

		a
		{
			font: bold 18px @title-font;
			line-height: 32px;
		}
	}

	&.home .level-2 a
	{
		font-weight: normal;
	}

	.children span
	{
		display: inline-block;
		background-color: fadeout(@sky, 60%);

		a
		{
			font: 16px @title-font;
			line-height: 32px;
		}
	}

	.children
	{
		.padding-left-right(20px, 20px);
	}

	h4.level-1
	{
		margin: 10px 0;
	}

	.level-3:first-child,
	.children + .level-3
	{
		position: relative;

		&:before
		{
			content: '';
			display: inline-block;
			.hires('/Img/v7/semantic/ico-arrow-tip', 'png', 'contain');
			background-position: center;
			background-repeat: no-repeat;
			height: 32px;
			width: 20px;
			position: absolute;
			left: -20px;
		}
	}

	h2
	{
		font: bold 30px @title-font;
		line-height: 1.13;
		letter-spacing: -0.2px;
		color: @charcoal-grey;
	}

	.bread-crumb
	{
		text-transform: uppercase;
		color: @slate-blue;
		font-size: 14px;
		padding: 0;
		overflow: hidden;
		border: none;
		display: block;
		min-height: 15px;

		em
		{
			margin: 0 4px;
		}
	}

	.explore-data-item
	{
		display: none;

		&.has-data
		{
			display: inline;
			color: @accent-color;
		}
	}

	.concept-group
	{
		padding-left: 10px;
	}

	span.timeseries
	{
		display: block;
		text-decoration: underline;
		cursor: pointer;
		padding-top: 5px;
	}

	div.timeseries
	{
		display: none;
		font-size: 10pt;

		&.visible
		{
			display: block;
		}

		> a
		{
			display: block;
			color: @text-color;
		}
	}

	h5
	{
		margin: 0;
	}

	.search-result-item.concept-result table.rankings em
	{
		vertical-align: middle;
		margin: 0 10px;
		display: inline-block;
		width: 7px;
		height: 17px;
		background-image: url('/img/v2/dsbrowser/arrow-filter.png');
		background-repeat: no-repeat;
	}

	&.groupings .search-result-item.concept-result table.rankings caption span
	{
		cursor: default;
	}

	div.search-result-item.concept-result table.rankings
	{
		.group-row
		{
			cursor: pointer;

			em
			{
				margin: 0 3px;

				&:last-child
				{
					display: none;
				}
			}
		}

		.timeseries span
		{
			.margin-left-right(2px, 2px);
			color: @text-color;
		}

		td.td-value
		{
			padding: 5px 0;
			font-size: 0;
			color: #8c8c8c;
			width: 40%;

			> *
			{
				font-size: 10pt;
			}

			.group-row
			{
				display: inline-block;
				.margin-left-right(2px, 2px);

				span
				{
					.margin-left-right(2px, 2px);
				}
			}

			.value
			{
				font-size: 16pt;
				font-weight: bold;
				color: @text-color;
				text-decoration: none;
			}

			.time
			{
				display: block;
				margin-top: 2px;
			}
		}

		.more
		{
			min-width: 150px;
			text-align: right;

			> span
			{
				color: #8c8c8c;
				font-size: 10pt;
			}

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

		.concepts
		{
			margin: 5px 0 2px 0;
			line-height: 24px;
		}

		caption
		{
			padding-bottom: 0;
			border-bottom: none;

			> div
			{
				position: absolute;
				margin: 0;
			}
		}

		thead
		{
			border-bottom: 1px solid #c8c8c8;

			tr
			{
				height: ~"calc(25px + 0.5em)";
			}

			.more
			{
				.padding-left-right(10px, 10px);
			}

			.timeseries
			{
				color: #8c8c8c;
				font-size: 10pt;
				font-weight: normal;
				text-decoration: none;
			}
		}
	}

	.concept
	{
		font-weight: normal;
	}

	&.debug .concept
	{
		.margin-left-right(2px, 2px);

		&.concept-type-topic
		{
			padding: 0 4px;
			border: 2px solid #FFA500;
		}

		&.concept-type-namedentity
		{
			padding: 0 4px;
			border: 2px solid #EE82EE;
		}

		&.concept-type-attribute
		{
			padding: 0 4px;
			border: 2px solid #0000FF;
		}

		&.concept-type-indicator
		{
			padding: 0 4px;
			border: 2px solid #008000;
		}

		&.concept-type-unit
		{
			padding: 0 4px;
			border: 2px solid #A52A2A;
		}

		&.concept-type-region
		{
			padding: 0 4px;
			border: 2px solid @accent-color;
		}
	}

	.debug-content-filter
	{
		.hide &
		{
			display: none;
		}

		width: 100%;
		background: #F0FAFC;
		font: bold 1em @title-font;
		height: 30px;
		overflow: hidden;
		margin: 20px 0 0 -15px;
		background-color: @off-white;
		.margin-left-right(0, 0);
		width: ~"calc(100% - 30px)";
		padding: 15px 15px;


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

		div
		{
			float: left;
			display: inline-block;
			font-size: 1.1em;
			margin-top: 3px;

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

		ul
		{
			display: inline-block;
			font-weight: normal;
			font-size: .8em;
			list-style: none;
			padding: 0;
			margin: 0;
			.margin-left-right(15px, 0);

			li
			{
				display: inline-block;
				text-align: center;
				border: 1px solid @accent-color;
				cursor: pointer;
				color: @accent-color;
				padding: 3px 5px;

				&:first-child
				{
					border-top-left-radius: 2px;
					border-bottom-left-radius: 2px;
					border-right-width: 0px;
				}

				&:last-child
				{
					border-top-right-radius: 2px;
					border-bottom-right-radius: 2px;
					border-left-width: 0px;
				}

				&.active
				{
					background: @accent-color;
					color: white;
				}

				html[dir='rtl'] &
				{
					&:first-child
					{
						border-top-right-radius: 2px;
						border-bottom-right-radius: 2px;
						border-left-width: 0;
						border-top-left-radius: 0;
						border-bottom-left-radius: 0;
						border-right-width: 1px;
					}

					&:last-child
					{
						border-top-right-radius: 0;
						border-bottom-right-radius: 0;
						border-left-width: 1px;
						border-top-left-radius: 2px;
						border-bottom-left-radius: 2px;
						border-right-width: 0;
					}
				}
			}

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

		.ui-button
		{
			background: #090;
			color: white;
			display: inline-block;
			float: right;
			padding: 5px 10px;
			text-decoration: none;
			.margin-left-right(0, 15px);
			border-radius: 2px;
			font-size: 1em;
			font-weight: bold;

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

		> div
		{
			margin-top: -4px;
		}

		.debug-content-caption
		{
			text-transform: uppercase;
			font: normal 18px @title-font;
		}

		ul.buttons li
		{
			text-transform: uppercase;
			font: bold 16px @title-font;
			border: 1px solid @sky;
			color: @charcoal-grey;
			background-color: #ffffff;
			min-width: 33px;
			padding: 9px 10px;

			&.active
			{
				background-color: @royal-blue;
				color: #ffffff;
			}
		}

		a.ui-button
		{
			margin-top: -5px;
		}
	}

	span.separator
	{
		display: inline-block;
		border-radius: 50%;
		height: .5em;
		width: .5em;
		background-color: #8c8c8c;
		.margin-left-right(5px, 5px);

		&:last-child
		{
			display: none;
		}
	}

	.other
	{
		position: relative;
		text-align: right;
		min-width: 100px;
		font-size: 16px;

		.other-sources
		{
			color: lighten(@accent-color, 10%);

			img
			{
				margin-left: 5px;
				margin-bottom: -2px;
			}
		}

		.source-menu
		{
			display: none;
			cursor: default;
			position: absolute;
			text-align: left;
			top: 32px;
			z-index: 10000;
			right: -13px;
			overflow: visible;
			display: none;
			cursor: pointer;
			font-size: 17px;

			.arrow-holder
			{
				z-index: 100;

				.arrow
				{
					height: 6px;
					width: 10px;
					display: block;
					position: relative;
					top: 2px;
					padding: 0px;
					padding-left: 32px;
					margin: 0px;
					background-repeat: no-repeat;
					background-position: right -3px;
					.hires('/Img/v2/page/gadgets/gadget-dropdown-menu_new_triangle');

					@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)
					{
						height: 12px;
						width: 18px;
						top: 4px;
					}
				}
			}

			.source-menu-body
			{
				padding: 5px 0;
				border: 1px solid #cccccc;
				-moz-box-shadow: 0px 1px 5px 1px #cecece;
				-webkit-box-shadow: 0px 1px 5px 1px #cecece;
				box-shadow: 0px 1px 5px 1px #cecece;
				background-color: white;

				a
				{
					width: auto;
					padding: 5px 15px 6px 10px;
					height: 14px;
					font-size: 12px;
					font-family: @title-font;
					vertical-align: middle;
					text-decoration: none;
					color: @accent-color;
					display: block;
					white-space: nowrap;

					em
					{
						font-size: 13px;
						color: #888d96;
					}

					&:hover
					{
						color: @accent-color;
						background-color: #dcf5ff;

						html[data-community='True'] &
						{
							background-color: #dedede;
						}

						em
						{
							color: @accent-color;
						}
					}
				}
			}
		}
	}

	.widget
	{
		display: block;
		position: relative;

		.other
		{
			position: absolute;
			bottom: 0;
			right: 0;

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