/*
 * Table of all locales
 */

.i18n-label.latest {
	color: #46b450;
}
.i18n-label.minor-behind {
	color: #ffb900;
}
.i18n-label.major-behind-one {
	color: #f56e28;
}
.i18n-label.major-behind-many {
	color: #dc3232;
}

.i18n-filter {
	line-height: 2;
	padding: 0 .25em;
}

.i18n-filter.current-filter {
	color: #555;
}

.translators-info table thead th {
	vertical-align: top;
}

.translators-info table thead small {
	font-weight: normal;
}

.translators-info table tbody tr {
	display: none;
}

.show-all table tbody tr,
.translators-info.show-latest table tbody tr.latest,
.translators-info.show-minor-behind table tbody tr.minor-behind,
.translators-info.show-major-behind-one table tbody tr.major-behind-one,
.translators-info.show-major-behind-many table tbody tr.major-behind-many,
.translators-info.show-no-releases table tbody tr.no-releases,
.translators-info.show-no-site table tbody tr.no-site,
.translators-info.show-no-wp-project table tbody tr.no-wp-project,
.translators-info.show-has-language-pack table tbody tr.has-language-pack,
.translators-info.show-no-language-pack table tbody tr.no-language-pack,
.translators-info.show-translated-100 table tbody tr.translated-100,
.translators-info.show-translated-95 table tbody tr.translated-95,
.translators-info.show-translated-90 table tbody tr.translated-90,
.translators-info.show-translated-50-less table tbody tr.translated-50-less,
.translators-info.show-translated-50 table tbody tr.translated-50 {
	display: table-row;
}

.locale-version.latest {
	background: #c7e8ca;
}
.locale-version.minor-behind {
	background: #ffe399;
}
.locale-version.major-behind-one {
	background: #fbc5a9;
}
.locale-version.major-behind-many {
	background: #f1adad;
}

td.right {
	text-align: right;
}

td.center {
	text-align: center;
}

td.no-left-border {
	border-left: 0 !important;
}

td.no-right-border {
	border-right: 0 !important;
}

.translators-info table th,
.translators-info table td.nowrap {
	white-space: nowrap;
}

.translators-info table a:hover {
	text-decoration: underline;
}

/*
 * Details page for an individual locale
 */

#locale-header {
	padding: 0 20px 20px 20px;
	background-color: #F5F5F5;
	border: 1px solid #E3E3E3;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
}

#locale-header ul li {
	list-style-type: none;
}

#locale-details {
	font-size: 1.2em;
	padding-left: 0;
}

.validators {
	overflow: auto;
	padding: 0;
}

ul.validators {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
}

.validators li {
	list-style-type: none;
	margin-bottom: 15px;
	width: 33%;
}

.validators li .profile {
	margin: 6px 0 2px;
	font-size: 16px;
	font-weight: 400;
	line-height: 2em;
	text-decoration: none;
}

.validators li .avatar {
	float: left;
	margin: 0 10px 10px 0;
	padding: 1px;
	width: 60px;
	height: 60px;
}

.validators .user-slack {
	display: block;
}

.validators.project-validators li {
	width: 25%;
	margin-bottom: 5px;
}

.validators.project-validators li .profile {
	font-size: 13px;
	line-height: 1.5em;
}

.validators.project-validators li .avatar {
	float: left;
	width: 40px;
	height: 40px;
}

.validators.project-validators li .user-slack {
	font-size: 10px;
}

@media only screen and (max-width: 850px) {
	.validators li {
		width: 50%;
	}

	.validators.project-validators li {
		width: 33%;
	}
}

@media only screen and (max-width: 600px) {
	.validators li {
		width: 100%;
	}
	.validators.project-validators li {
		width: 50%;
	}
}

@media only screen and (max-width: 400px) {
	.validators.project-validators li {
		width: 100%;
	}
}

article.page .translators-info table {
	width: 100%;
	border: 1px solid #f1f1f1;
	border-width: 1px 1px 1px 0;
}

article.page .translators-info table tr th {
	background: #f7f7f7;
	border: 1px solid #f1f1f1;
	border-width: 0 0 0 1px;
}

article.page .translators-info table tr td {
	border: 1px solid #f1f1f1;
	border-width: 1px 0 0 1px;
}

article.page .translators-info table tr th:first-child,
article.page .translators-info table tr td:first-child {
	padding-left: 1em;
}

article.page .translators-info table tr th:last-child,
article.page .translators-info table tr td:last-child {
	padding-right: 1em;
}

article.page .translators-info table td:first-of-type {
	width: auto;
}

@media (max-width: 768px) {
	.show-all table tbody tr,
	.translators-info.show-latest table tbody tr.latest,
	.translators-info.show-minor-behind table tbody tr.minor-behind,
	.translators-info.show-major-behind-one table tbody tr.major-behind-one,
	.translators-info.show-major-behind-many table tbody tr.major-behind-many,
	.translators-info.show-no-releases table tbody tr.no-releases,
	.translators-info.show-no-site table tbody tr.no-site,
	.translators-info.show-no-wp-project table tbody tr.no-wp-project,
	.translators-info.show-has-language-pack table tbody tr.has-language-pack,
	.translators-info.show-no-language-pack table tbody tr.no-language-pack,
	.translators-info.show-translated-100 table tbody tr.translated-100,
	.translators-info.show-translated-95 table tbody tr.translated-95,
	.translators-info.show-translated-90 table tbody tr.translated-90,
	.translators-info.show-translated-50-less table tbody tr.translated-50-less,
	.translators-info.show-translated-50 table tbody tr.translated-50 {
		display: block;
	}

	.translators-info table thead th {
		display: none;
	}

	.translators-info table {
		border: none !important;
	}

	.translators-info table td {
		border-width: 0 0 1px 0 !important;
	}

	.translators-info table tr {
		border: 1px solid #f1f1f1 !important;
	}

	article.page .translators-info table tbody th,
	article.page .translators-info table tbody td {
		display: block;
		text-align: left;
	}

	article.page .translators-info table tbody tr {
		margin-top: 2em;
	}

	article.page .translators-info table tbody td {
		position: relative;
		padding: .5em .5em .5em 40%;
		vertical-align: top;
	}

	article.page .translators-info table tbody td[data-column-title]:before {
		content: attr(data-column-title);
		position: absolute;
		left: 10px;
		width: 33%;
		font-weight: bold;
	}

	article.page .translators-info table tbody td:nth-of-type(1) {
		display: inline-block;
		padding-left: 33% !important;
		padding-right: 5px;
		width: 66%;
		border-bottom: none !important;
	}

	article.page .translators-info table tbody td:nth-of-type(2) {
		display: inline-block;
		padding-left: 0;
		width: 33%;
		border-bottom: none !important;
	}

	article.page .translators-info table tbody td:nth-of-type(3) {
		border-top: 1px solid #f1f1f1 !important;
		padding-left: 33% !important;
	}

	article.page .translators-info table tbody td:nth-of-type(4) {
		display: inline-block;
		padding-left: 33% !important;
		padding-right: 5px;
		width: 66%;
		border-bottom: none !important;
	}

	article.page .translators-info table tbody td:nth-of-type(5) {
		display: inline-block;
		padding-left: 0;
		width: 33%;
		border-bottom: none !important;
	}

	article.page .translators-info table tbody td:nth-of-type(6) {
		display: inline-block;
		padding-left: 33% !important;
		width: 66%;
		border-top: 1px solid #f1f1f1 !important;
		border-bottom: none !important;
	}

	article.page .translators-info table tbody td:nth-of-type(7) {
		display: inline-block;
		padding-left: 0;
		width: 33%;
		border-top: 1px solid #f1f1f1 !important;
		border-bottom: none !important;
	}

	article.page .translators-info table tbody td:nth-of-type(8) {
		border-top: 1px solid #f1f1f1 !important;
		border-bottom: none !important;
		padding-right: 0;
		padding-left: 33% !important;
	}
}