/* Twist Home Preview 0.11.0: the approved mobile homepage live on the real homepage, phones only (767px and below).
   home-live.css is home.css scoped under .twhp-live (tools/scope_css.py); this file switches the two versions and
   undoes the preview-only framing and the theme's element styles inside the mobile homepage. */

/* ---------- Which version shows ---------- */
@media (max-width: 767px) {
	body.twhp-live-on .page-wrapper {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.twhp-live {
		display: none !important;
	}
}

/* ---------- The mobile homepage fills the screen: no phone frame, no grey surround ---------- */
.twhp-live {
	background: #fff;
}

.twhp-live .twhp-phone,
.twhp-live .twhp-phone:not(#twhp-x) {
	max-width: none;
	min-height: 0;
	margin: 0;
	border: 0;
	box-shadow: none;
}

/* ---------- Theme element styles that would otherwise reach inside: back to the browser defaults the
   standalone preview was designed on (the mobile homepage's own rules are more specific and still win) ---------- */
.twhp-live p {
	margin: 1em 0;
}

.twhp-live ul,
.twhp-live ol {
	margin: 1em 0;
	padding-left: 40px;
}

.twhp-live li {
	margin: 0;
}

.twhp-live a:hover,
.twhp-live a:focus {
	color: inherit;
	text-decoration: none;
}

.twhp-live button {
	font-family: inherit;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}