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

div#site-holder
{
	div#site-header div.wrapper, div#site-main
	{
		width: 950px;
	}

	div#intro, div#feature-banner
	{
		width: 980px;
	}

	div#site-footer-links
	{
		width: 980px;
	}

	div#atlas-header h1
	{
		margin: 0;
		text-align: center;
		font: bold 2em @title-font;
	}

	div#atlas
	{
		h2
		{
			margin: 0;
			text-align: center;
			font: normal 16pt @title-font;
		}

		p
		{
			color: #777;
			margin: 1em 0;
			text-align: justify;
			font-size: 90%;
		}
	}
}

table.stickyHeader
{
	font-size: 90%;
}

th
{
	font-weight: normal;
	color: @accent-color;
	font-size: .8em;

	span
	{
		display: inline-block;
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
		float: left;
		width: 35px;
		white-space: nowrap;

		html[dir=rtl] &
		{
			-moz-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			-o-transform: rotate(90deg);
			-webkit-transform: rotate(90deg);
			transform: rotate(90deg);
		}
	}
}

thead
{
	background: white;

	th
	{
		vertical-align: bottom;
		padding-bottom: 1.5em;
		height: 180px;

		&.sortable
		{
			cursor: pointer;
			overflow: hidden;

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

		&.countries
		{
			padding-bottom: 5px;
			text-align: left;

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

		&.even
		{
			background: #eee;
		}
	}

	.countries-filter-field
	{
		background-position: -2px -3px;
		padding: 5px 5px 3px 27px;
		html[dir=rtl] &
		{
			background-position: right -2px;
			padding: 5px 27px 3px 5px;
		}

		background-repeat: no-repeat;
		background-color: #fff;
		.hires("/img/v4/matrix-search-icon");
		width: 81%;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 3px;
		font-size: 10pt;
		margin: 0 2px;
	}

	.placeholder
	{
		color: #aaa;
	}
}

tbody th
{
	text-align: right;
	height: 35px;
	padding-right: .5em;

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

td
{
	text-align: center;

	a
	{
		color: black;
		text-decoration: none;
	}

	&.scale0
	{
		background: white;
	}

	&.scale1
	{
		background: #EDF8FB;
	}

	&.scale2
	{
		background: #CCECE6;
	}

	&.scale3
	{
		background: #99D8C9;
	}

	&.scale4
	{
		background: #66C2A4;
	}

	&.scale5
	{
		background: #129447;

		a
		{
			color: white;
		}
	}
}

tbody
{
	tr.odd
	{
		background: #eee;
	}

	tr.hidden
	{
		display: none;
	}
}



div#atlas
{
	position: relative;

	div.stickyHeader
	{
		position: fixed;
		_position: absolute;
		top: 0;
		overflow: hidden;
		height: 210px !important;
		z-index: 2;

		table
		{
			border-collapse: separate;
			-moz-box-shadow: 0px 3px 10px 0px #999;
			-webkit-box-shadow: 0px 3px 10px 0px #999;
			box-shadow: 0px 3px 10px 0px #999;
			border-radius: 1px; // this is the fix for iPad safari. Only with this style it respects box-shadow
		}

		&.hide
		{
			display: none;
		}
	}

	#not-found-container
	{
		color: #777;
		margin: 50px 250px;
		width: 100%;
	}
}