/* ABOUTME: Styles for the parts of the interim two-page site that the mirrored CMS stylesheets don't cover. */
/* ABOUTME: The maintenance banner and the homepage contact block. */

.maintenance-banner
{
	background: #bb9a33;
	color: white;
	padding: 14px 0;
	font-size: 17px;
	line-height: 1.5;
	text-align: center;
}

.maintenance-banner p
{
	margin: 0;
	padding: 0 16px;
}

.maintenance-banner a
{
	color: white;
	text-decoration: underline;
}

div#contact
{
	background: #f4f4f4;
}

div#contact .H1-strip-heading
{
	border-bottom: 2px solid #d9d9d9;
	margin-bottom: 30px;
}

div#contact .strip-content
{
	padding: 60px 16px 90px;
}

div#contact table.resp-table td
{
	padding: 10px 20px 10px 0;
}

@media (max-width: 760px)
{
	div#contact table.resp-table,
	div#contact table.resp-table tbody,
	div#contact table.resp-table tr,
	div#contact table.resp-table td
	{
		display: block;
		width: 100% !important;
	}
}

/* Below this width the header is fixed at 50px tall, so the banner starts beneath it */
@media screen and (max-width: 800px), screen and (max-width: 1024px) and (orientation: landscape)
{
	.maintenance-banner
	{
		margin-top: 50px;
	}
}

/* The crime picker heading is 46px everywhere and overflows its fixed-height box on phones */
@media screen and (max-width: 800px)
{
	.reporting-main .main-dropdown .blue-cta-area p.reporting-cta-text
	{
		font-size: 24px;
		line-height: 1.2;
		padding-right: 80px;
	}
}

/* On phones the Chief's portrait sits centred above the message instead of floating beside it */
@media screen and (max-width: 800px)
{
	div#strip6 .column-main img
	{
		display: block;
		float: none !important;
		margin: 0 auto 20px !important;
	}
}

/* The Accessible Employers logo follows the email inline in the CMS copy; give it its own line */
div#contact table.resp-table td img
{
	display: block;
	margin: 15px 0 !important;
}

/* Keep phone numbers in the banner on one line */
.maintenance-banner a[href^="tel:"],
.maintenance-banner .nowrap
{
	white-space: nowrap;
}

/* The Chief's portrait is floated by the CMS; contain it so it can't push the deputy photos sideways when the columns stack */
div#strip6 .column-main::after
{
	clear: both;
	content: "";
	display: table;
}