Шаблон:JobPageHeader/styles.css

.jobpageheader {
	position: relative;
	display: flex;
	flex-direction: column;

	padding: 0.25rem;
	margin: 0.5rem 0;
	line-height: 1.3em;
	background-color: #e8eef7;
	border-radius: 8px;
	box-shadow: 0 0 0.5rem -0.1rem #a0b0c8;
}

.jobpageheader,
.jobpageheader-info,
.jobpageheader-more,
.jobpageheader-preview,
.jobpageheader-info:after {
	background-color: #e8eef7;
	border: 1px solid #c9d4e4;
}

.jobpageheader-more,
.jobpageheader-info, 
.jobpageheader-title,
.jobpageheader-preview,
.jobpageheader-info:after {
	border-radius: 6px;
}

.jobpageheader-title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	height: 1.75rem;
	padding: 0 0.5rem;
	background-color: #7a90b8;
	color: #fff;
}

.jobpageheader-content {
	display: flex;

}

.jobpageheader-preview {
	overflow: hidden;
	display: flex;
	text-align: center;
	flex-direction: column;
	width: 7.5rem;
	line-height: 1.1em;
	background-color: transparent;
}

.jobpageheader-preview-title {

    font-weight: 500;
    line-height: 1em;
    padding: 0.25em;
    background-color: #7a90b8;
    color: #fff;
    border-bottom: 2px solid #7a90b8;
}

.jobpageheader-preview-image {
	flex-grow: 1;
	align-content: center;
	padding: 0.25rem 0.5rem;
	background-color: #e8eef7;
}

.jobpageheader-info {
	flex: 1;

	overflow: hidden;
	position: relative;
	align-content: center;
	padding: 0.25rem 0.5rem;
}

.jobpageheader-info hr {
	background-color: #a0b0c8;

}

.jobpageheader-info tr td {
	padding-left: 0.25rem;
}

.jobpageheader-info tr td:first-child {
	padding: 0;

	vertical-align: top;
}



.jobpageheader-tabs,
.jobpageheader-more,
.jobpageheader-info-wrapper:after {
	transition-delay: 0s;
	transition-duration: 0.15s;
}

.jobpageheader-more {
	cursor: pointer;

	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	height: 1.75em;
	margin-bottom: -0.25rem;
	transition-property: margin, height, opacity;
}

.jobpageheader-more i {
	margin-right: 0.25rem;
}

.jobpageheader-more:hover {
	background-color: #a0b0c8;
	color: #fff;
	transition-delay: 0s;
}

.jobpageheader-more:focus {
	opacity: 0.66;
	height: 0;
	margin: 0 -0.25rem;
}

.jobpageheader-more:focus ~ .jobpageheader-tabs {
	height: auto;
	transition-delay: 0s;
}

.jobpageheader-tabs {
	overflow: hidden;
	height: 0;
	transition-property: height;
}

/* Rainbow */
.jobpageheader.rgb {

	padding: 1px;
	border: 1px solid transparent;
}

.jobpageheader.rgb .jobpageheader-content {

}

.jobpageheader.rgb .rainbow {

}

.jobpageheader.rgb .jobpageheader-title,
.jobpageheader.rgb .jobpageheader-info, 
.jobpageheader.rgb .jobpageheader-preview,
.jobpageheader.rgb .jobpageheader-more {
	background-color: #666666;
}

.jobpageheader.rgb .department-tabs {
	padding: 0.33em;
	background-color: #666666;
	border-radius: 6px;
}

.jobpageheader.rgb,
.jobpageheader.rgb .jobpageheader-info,
.jobpageheader.rgb .jobpageheader-more,
.jobpageheader.rgb .jobpageheader-preview,
.jobpageheader.rgb .jobpageheader-preview-title,
.jobpageheader.rgb .jobpageheader-info:after {
	border-color: #c9d4e4;
}

.jobpageheader.rgb .jobpageheader-title,
.jobpageheader.rgb .jobpageheader-preview-title{
	color: #1a1a1a;
}

.jobpageheader.rgb .jobpageheader-more {
	margin-bottom: -1px;
	color: #111;
	transition-property: height, margin, border;
}

.jobpageheader.rgb .jobpageheader-more:focus {
	margin: 0 0 -1px;
	border: none;
}

.jobpageheader.rgb .jobpageheader-more:hover {
	background-color: #7a90b8;
	color: #1a1a1a;
}