table.resortsTable {
	width: 100%;
	border: 0;
	background: none;
}

/* Foundation stripes every table body row; this is a layout table, not data. */
table.resortsTable tbody tr,
table.resortsTable tbody tr.even,
table.resortsTable tbody tr.alt,
table.resortsTable tbody tr:nth-child(even) {
	background: none;
}

.resortsAirportFilter {
	margin-bottom: 20px;
}

.resortsAirportFilter p {
	margin: 8px 0 0;
}

table.resortsTable td {
	vertical-align: top;
	width: 33%;
	padding: 0 15px 12px 0;
}

/* Keep both brands at the same scale. SkiBeat's `.cms-page-content td` rule sizes cell
   text up to 14px, where Directski inherits Foundation's 12px. */
table.resortsTable td,
table.resortsTable td a {
	font-size: 12px;
	line-height: 18px;
}

/* Destination tree. Each level is a nested list, collapsed until its toggle is clicked. */
ul.rt-children {
	display: none;
	margin: 4px 0 0;
	padding-left: 22px;
	list-style: none;
}

ul.rt-children li {
	margin: 0 0 4px;
	line-height: 1.4;
}

li.rt-hotel {
	margin-left: 14px;
	list-style: disc;
}

a.rt-place-link {
	vertical-align: middle;
}

/* Weight carries the hierarchy: the place at the head of a column is the heaviest and
   every level nested beneath it reads lighter. */
table.resortsTable a.rt-place-link {
	font-weight: 700;
}

table.resortsTable ul.rt-children a.rt-place-link,
table.resortsTable a.rt-hotel-link {
	font-weight: 400;
}

/* Expand toggle. Drawn in css so it does not depend on remotely hosted plus/minus images.
   Properties are restated rather than inherited because the framework styles bare buttons. */
.rt-toggle {
	display: inline-block;
	width: 22px;
	height: 22px;
	min-width: 0;
	margin: 0 6px 0 0;
	padding: 0;
	vertical-align: middle;
	border: 1px solid #c8c8c8;
	border-radius: 3px;
	background: #f4f4f4;
	box-shadow: none;
	color: #444;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-transform: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Hold the resting appearance through every state, otherwise the framework button
   styles wash the glyph out on hover. */
.rt-toggle:hover,
.rt-toggle:focus,
.rt-toggle:active {
	border-color: #c8c8c8;
	background: #f4f4f4;
	color: #444;
}

.rt-toggle-icon::before {
	content: "+";
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.rt-toggle[aria-expanded="true"] .rt-toggle-icon::before {
	content: "\2212";
}

/* Topflight now follows the same simple, full-width content structure as Directski. */
.tf-destinations-page {
	padding: 30px 0 40px;
}

/* Hero header. The layout and type come from the shared .tfx-landing-page rules so this
   matches the other Topflight landing pages; only the image and centring are page specific. */
.tfx-landing-header-bg.main-hero {
	background-image: url("//res.cloudinary.com/holiday-images/image/upload/w_1600,h_400,c_fill,g_center,q_auto:eco,f_auto/v1379594677/topflight/other-information/other-info-header1-web.jpg");
}

/* Shorter than the default 55vh / 65vh landing heroes so this page's crop sits closer to the title. */
.tf-destinations-landing.tfx-landing-page .tfx-landing-header {
	height: 35vh;
}

@media only screen and (min-width: 1440px) {
	.tf-destinations-landing.tfx-landing-page .tfx-landing-header {
		height: 35vh;
	}
}

.tfx-landing-page .tfx-landing-header .copy-container h1.main-landing-page-header {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.tfx-landing-page .tfx-landing-header .copy-container {
	align-self: center;
}

/* The page h1 lives in the hero, then an h2 per product section and an h3 per country,
   so the outline stays in order. Sizes step down to match. */
.tf-destination-section + .tf-destination-section {
	margin-top: 48px;
}

.tf-destination-rule {
	margin: 0 0 20px;
	border: 0;
	border-top: 1px solid #e4e4e4;
	height: 0;
	background: none;
}

.tf-destination-title {
	margin: 0 0 12px;
	color: #010233;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.tf-destination-copy {
	max-width: 900px;
	margin: 0 0 24px;
	color: #555;
	font-size: 16px;
	line-height: 1.5;
}

.tf-destinations-page .resortsAirportFilter p,
.tf-destinations-page form.nice > .row > .columns > p {
	font-size: 14px;
	line-height: 20px;
}

.tf-destinations-page .resorts-panel h3 {
	margin: 28px 0 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

/* SkiMcNeill hangs header, content and footer off a white .sm-container that is held to
   the viewport height. This page is shorter than the viewport, so the footer finished
   early and the remaining wrapper read as a white band beneath it. Stacking the wrapper
   and letting the content grow gives that slack to the page instead of the footer. */
.sm-container {
	display: flex;
	flex-direction: column;
}

.sm-container > #pageContent {
	flex: 1 0 auto;
}