CSS provided minifies correctly on 3.4.9, fails on 4.1.9 (Node 6.11.3)

[aral]

Environment

• clean-css version - npm ls clean-css: 3.4.9 (works) 4.1.9 (fails)
• node.js version - node -v: v6.11.3
• operating system: macOS High Sierra

Summary

The following CSS minifies correctly on 3.4.9 but fails on 4.1.9.

Configuration options

new CleanCSS().minify(providedCSS).styles

Input CSS

/****************************************************************************
 *																			*
 *	App styles: prefix.														*
 *																			*
 *	(These styles are added to the start of the common.css file from		*
 *	/common/styles to create the global.css file referenced by all pages).	*
 *																			*
 ****************************************************************************/

/* Nothing yet. */
/****************************************************************************
 *																			*
 *	Common styles															*
 *																			*
 *	These styles are used by both the site and the app.						*
 *																			*
 *	(These styles are added to the end of the common.css file from			*
 *	/common/styles to create the global.css file referenced by all pages).	*
 *																			*
 *	The final global.css for the site and the app is created by:			*
 *																			*
 *			Site:							App:							*
 *																			*
 *	/site/styles/prefix.css			/app/styles/prefix.css					*
 *				+								+							*
 *	/common/styles/common.css		/common/styles/common.css				*
 *				+								+							*
 *	/site/styles/postfix.css		/app/styles/postfix.css					*
 *																			*
 ****************************************************************************/

/********************
 *		Note		*
 ********************

 See readme.md on how to style comments

 */

  /********************
 *		Sections	*
 ********************

- Fonts
- Basic styles
- Main
- Module-specific styles
- Units
- Trackers
- Block rule
- Popularity
- Statistics table
- Units
- Syntax highlighting
- Calculation list
- List of links
- Improvement statistics
- Prevalence
- Notes
- References
- Clouds of Fame and Shame
- Screenshots
- Typography
- News
- Spotlight Back Issues
- Dynamic Type

 *******************/

/****************************************************************************
 *									Fonts									*
 ****************************************************************************/

@font-face
{
	font-family:"Avenir Next";
	src:url("../fonts/avenir-next-regular/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2") format("woff2"),url("../fonts/avenir-next-regular/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff");
	font-style: normal;
	font-weight: normal;
}

@font-face
{
	font-family:"Avenir Next";
	src:url("../fonts/avenir-next-regular-italic/7377dbe6-f11a-4a05-b33c-bc8ce1f60f84.woff2") format("woff2"),url("../fonts/avenir-next-regular-italic/92b66dbd-4201-4ac2-a605-4d4ffc8705cc.woff") format("woff");
	font-style: italic;
	font-weight: normal;
}

@font-face
{
	font-family:"Avenir Next";
	src:url("../fonts/avenir-next-demi-bold/aad99a1f-7917-4dd6-bbb5-b07cedbff64f.woff2") format("woff2"),url("../fonts/avenir-next-demi-bold/91b50bbb-9aa1-4d54-9159-ec6f19d14a7c.woff") format("woff");
	font-style: normal;
	font-weight: bold;
}

/* Fallback because Mac app doesn’t style font-weight: bold; correctly as per above */
@font-face
{
	font-family:"Avenir Next Demi Bold";
	src:url("../fonts/avenir-next-demi-bold/aad99a1f-7917-4dd6-bbb5-b07cedbff64f.woff2") format("woff2"),url("../fonts/avenir-next-demi-bold/91b50bbb-9aa1-4d54-9159-ec6f19d14a7c.woff") format("woff");
	font-style: normal;
	font-weight: bold;
}

@font-face
{
	font-family:"Avenir Next Medium";
	src:url("../fonts/avenir-next-medium/627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2") format("woff2"),url("../fonts/avenir-next-medium/f26faddb-86cc-4477-a253-1e1287684336.woff") format("woff");
	font-style: normal;
	font-weight: 500;
}

/* Avenir Next Ultra Light */
@font-face
{
	font-family:"Avenir Next Ultra Light";
	src:url("../fonts/avenir-next-ultra-light/2e3f5cb9-101f-46cf-a7b3-dfaa58261e03.woff2") format("woff2"),url("../fonts/avenir-next-ultra-light/fa19948e-5e38-4909-b31e-41acd170d6f2.woff") format("woff");
	font-style: normal;
	font-weight: normal;
}

@font-face
{
	font-family: 'Cavorting';
	src: url('../fonts/cavorting/cavorting-webfont.woff2') format('woff2'),
		url('../fonts/cavorting/cavorting-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/****************************************************************************
 *								Basic styles								*
 ****************************************************************************/

html
{
	/* ↓ root size */
	font-size: 14px;
	line-height: 1.5;
}

	@media only screen and (min-width: 28.78em)
	{
		html
		{
			font-size: 16px;
		}
	}

	@media only screen and (min-width: 33.4em)
	{
		html
		{
			font-size: 18px;
		}
	}

/****************************************************************************
*							Dynamic Type (Apple)							*
****************************************************************************/
/*
 Apple’s Dynamic Type scales text according to the iOS Accessibility
 text size settings.
 As `font: keyword;` is the only way it can be used, it overrides any previous
 font rules, and it is also overridden by subsequent rules.
 In order to make the entire text and layout scale accessibly to the text size settings in iOS,
 it has to be implemented in the following way:

 1. All size units in ems, relative to a root font size (in our case px, scaled up twice for wider viewports)
 2. Use @supports so no other browsers apply the font: property, despite the -apple-system-body value not being supported
 3. For iOS devices, the px font sizes will be overridden, even if the accessibility text size hasn’t been changed, so
 we need to set our default font sizes (on the body) relative to iOS’s default browser font size (17px) to make it
 consistent with the non-iOS font size. This must be done for each viewport font size change. And also inside the
 @supports rule, so it doesn’t affect any other browser.)

 See http://www.interactiveaccessibility.com/blog/text-resizing-web-pages-ios-using-dynamic-type
 and https://webkit.org/blog/3709/using-the-system-font-in-web-content/
*/

@supports (font: -apple-system-body)
{
	html
	{
		font: -apple-system-body;
	}

	/* default size of -apple-system-body here is 17px
	 using that as a default, scale text down to equivalent of 14px (14/17).
	 Also set line-height as that is also overridden by the font shorthand
	*/
	body
	{
		font-size: 0.94em;
		line-height: 1.5;
		/* ↓ break words so they don’t flow outside of the viewport */
		word-wrap: break-word;
	}

	@media only screen and (min-width: 28.78em)
	{
		html
		{
			font: -apple-system-body;
		}

		/* default size of -apple-system-body here is 17px
		 using that as a default, scale text down to equivalent of 16px (16/17).
		 Also set line-height as that is also overridden by the font shorthand
		*/
		body
			{
				font-size: 0.82em;
				line-height: 1.5;
			}
		}
	}

	@media only screen and (min-width: 33.4em)
	{
		html
		{
			font: -apple-system-body;
		}

		/* default size of -apple-system-body here is 17px
		 using that as a default, scale text down to equivalent of 18px (18/17).
		 Also set line-height as that is also overridden by the font shorthand
		*/
		body
		{
			font-size: 1.06em;
			line-height: 1.5;
		}
	}
}


body
{
	/* ↓ white */
	background-color: #fff;
	/* ↓ dark grey – crest blue in greyscale */
	color: #303030;
	font-family: "Avenir Next", Avenir, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	/* ↓
	 stop Apple from randomly resizing text, thanks to this thread on Stack Overflow
	 http://stackoverflow.com/questions/6210788/how-to-avoid-ios-automatic-font-size-adjustment
	*/
	-webkit-text-size-adjust: 100%;
}

.wrap
{
	/* ↓ cloud */
	background-color: #007ACC;
}

main
{
	/* ↓ white */
	background-color: #fff;
	/* ↓ (in case the browser is unfamiliar with <main>) */
	display: block;
}

h1, h2, h3, h4
{
	font-weight: bold;
	line-height: 1.25;
	margin: 1.75em 0 0.75em;
}

	@media only screen and (min-width: 33.4em)
	{
		h1, h2, h3, h4
		{
			margin: 2em 0 1em;
		}
	}

h1
{
	font-size: 2em;
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
	/* ↓ as h1s are always at the top of the page */
	margin-top: 1em;
	text-align: center;
}

h2
{
	font-size: 1.75em;
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
	text-align: center;
}

/*
 when an h2 is directly after an h1
*/
h1 + h2
{
	margin-top: 0.75em;
}

h3
{
	font-size: 1.5em;
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
	text-align: center;
}

/*
 when an h3 is directly after an h2
*/
h2 + h3
{
	margin-top: 0.75em;
}

h4
{
	font-size: 1.25em;
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
}

ul, ol
{
	margin: 0.75em 0 1.75em 1em;
	padding-left: 0;
}

ul li, ol li
{
	margin: 0 0 0.5em 1.5em;
}

a
{
	/* ↓ cloud dark */
	color: #005C99;
	/* ↓ Wrap links so they don’t break the layout */
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
}

p
{
	margin: 0 0 0.75em 0;
	/* ↓ Apple Dynamic Type */
}

strong
{
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
}

table
{
	border-collapse: collapse;
	display: block;
	margin: 0 auto 1.75em;
	width: 100%;
}

/*
 hide
*/
table caption
{
	height: 0;
	overflow: hidden;
	width: 0;
}

table thead
{
	/* ↓ black */
	border-bottom: 2px solid #000;
}

table th, table td
{
	padding: 0.25em 0.5em;
}

table th
{
	font-size: 1em;
	font-family: "Avenir Next Demi Bold", Avenir, Helvetica, sans-serif;
	font-weight: bold;
	text-align: left;
	/* ↓ Wrap titles so they don’t break the layout */
	word-wrap: break-word;
}

	@media only screen and (min-width: 30em)
	{
		table thead th
		{
			font-size: 1.1em;
			text-align: center;
		}
	}

table td
{
	font-size: 0.9em;
	text-align: left;
}

	@media only screen and (min-width: 30em)
	{
		table td
		{
			font-size: 1em;
			text-align: center;
		}
	}

blockquote
{
	margin: 0 0 1.75em 0;
}

pre
{
	/* ↓ dark grey */
	color: #303030;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.1);
	/* ↓ very light grey */
	background-color: #f5f5f5;
	font-size: 0.9em;
	margin: 1.25em 0 1.75em 0;
	overflow: auto;
	padding: 0.75em;
}

code
{
	/* ↓ Wrap code segments so they don’t break the layout */
	word-wrap: break-word;
	word-break: break-all;
}

/*
 this is just to solve the way we have a widow on the Forbes site
*/
@media only screen and (min-width: 37.2em)
{
	pre.single-string
	{
		margin-right: -0.5em;
		margin-left: -0.5em;
		white-space: nowrap;
	}
}

/***************************************************************************
*									Main								*
****************************************************************************/

main
{
	margin: 0.75em 0.5em;
	max-width: 34em;
	padding: 0.5em 0.7em 2em 0.7em;
}

	@media only screen and (min-width: 33.4em)
	{
		main
		{
			margin: 0.75em auto;
			padding: 1.25em 2.5em 2em 2.5em;
		}
	}

	/* ↓ when the viewport is this narrow, it is likely because Dynamic Text is enabled and very large */
	@media only screen and (max-width: 17em)
	{
		main
		{
			padding-right: 0.2em;
			padding-left: 0.2em;
		}
	}

body.tracker h1, body.site h1
{
	/* ↓ make the non-strong part of the heading smaller */
	font-size: 1.2em;
}

body.tracker h1 strong, body.site h1 strong
{
	display: block;
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
	font-size: 2em;
	margin-top: 0.5em;
	text-align: center;
}

/*
 On Collections, the titles are longer, so there needs to be more space between the title and () section
*/
body.trackers h1 strong, body.sites h1 strong
{
	margin-bottom: 0.25em;
}

/*
 Blockquotes after the first heading (or first thing after the .main section for the app) are the summary of the site/tracker and should be displayed centered and in a slightly larger font size. */
main blockquote
{
	/* ↓ don't round */
	font-size: 1.1em;
	margin-top: 1.75em;
	margin-bottom: 0.5em;
	text-align: center;
}

main blockquote.standout
{
	/* ↓ black */
	color: #000;
	font-size: 1.25em;
	margin-top: 1.25em;
	margin-bottom: 1.25em;
}

figure
{
	margin: 0;
}

figure figcaption
{
	color: #7d7d7d;
	text-align: center;
}

figure figcaption p
{
	margin-bottom: 0;
}

/*
 Style screenshots (all images inside main) with rounded corners and drop shadows
*/
main img
{
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 0.25em;
	/* ↓ 10px shadow adjusted for 2px vertical border on image */
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
	display: block;
	margin: 1.75em 0 2.25em 0;
	/* ↓ Make images resize to fit the main area (grow or shrink) */
	max-width: 100%;
}

main figure
{
	margin: 1.75em 0 1.75em 0;
}

main figure img
{
	margin: 0 0 0.5em 0;
}

main img.no-frame
{
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/****************************************************************************
 *							Module-specific styles							*
 ****************************************************************************/

#ethical-design-violations h2
{
	margin-bottom: 0.5em;
}

#ethical-design-violations > p
{
	text-align: center;
}

/****************************************************************************
 *									Units									*
 ****************************************************************************/

table td .units
{
	font-variant: small-caps;
}


/****************************************************************************
 *									Trackers								*
 ****************************************************************************/

#ethical-design-violations p
{
	/* ↓ as the trackers have margins on top */
	margin-bottom: 0;
}

#ethical-design-violations ul
{
	/* ↓ as the trackers have margins on top */
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-between;
	align-items: flex-start;
}

.static-badge, .trackers-badge
{
	/* ↓ icon styles */
	background: top center no-repeat;
	/* ↓ shrink icons for narrower viewports */
	background-size: 6em;
	font-size: 1em;
	list-style-type: none;
	margin-top: 1.5em;
	margin-bottom: 0.25em;
	margin-left: 0;
	text-align: center;
	/* ↓ allow space for icon at top */
	padding: 7.75em 0.75em 0 0.75em;
	/* ↓ so we get 3 to a row as often as possible */
	width: 7.7em;
}

.badge-title
{
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-size: 1.2em;
	margin-top: 0;
	margin-bottom: 0;
	text-transform: uppercase;
}

#aggressive
{
	background-image: url('../images/aggressive.svg');
}

#doorslam
{
	background-image: url('../images/doorslam.svg');
}

#clickbait
{
	background-image: url('../images/clickbait.svg');
}

#fingerprint
{
	background-image: url('../images/fingerprint.svg');
}

#web-bug
{
	background-image: url('../images/web-bug.svg');
}

#tracker
{
	background-image: url('../images/trackers.svg');
}

.static-badge p, .trackers-badge p
{
	margin-bottom: 0.5em;
}

.trackers-badge
{
	/* ↓ there's no icon for the trackers badge so we don't need the padding */
	padding-top: 0;
}

.trackers-badge .badge-title
{
	/* ↓ use flexbox to ensure number inside is centered */
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.trackers-badge .number
{
	/* ↓ mid grey */
	color: #6d6d6d;
	/* ↓ force number on to its own line */
	display: block;
	/* ↓ don't flex expand or contract, always stay the width of the number */
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	font-family: "Avenir Next Ultra Light", "Avenir Next", Avenir, Helvetica, Arial, sans-serif;
	font-size: 5.2em;
	font-weight: normal;
	/* ↓ tighten kerning on the number */
	letter-spacing: -0.05em;
	/* ↓ same as top padding on other badges */
	line-height: 1.25em;
	/* ↓ offset kerning */
	margin-left: -0.1em;
	text-align: center;
	/* ↓ extra width to accommodate negative margins */
	width: 1.4em;
}

#open-trackers-popup
{
	/* ↓ dark grey */
	color: #333;
	text-decoration: none;
}

.badge-explanation
{
	margin-top: 0;
}

.trackers-badge ul
{
	/* ↓ TODO: make these display in some way */
	display: none;
}

#no-trackers p
{
	text-align: center;
}

/****************************************************************************
 *								Block rule									*
 ****************************************************************************/

#block-rule h2
{
	margin-bottom: 0.5em;
}

#block-rule p
{
	text-align: center;
}

/****************************************************************************
 *									Popularity								*
 ****************************************************************************/

#popularity p
{
	text-align: center;
}


/****************************************************************************
 *							Statistics table								*
 ****************************************************************************/

#after-better table
{
	margin-bottom: 1.75em;
}

@media only screen and (min-width: 24.3em)
{
	table th:nth-of-type(1)
	{
		width: 0.75em;
	}
}

table tbody th
{
	background: center left no-repeat;
	background-size: 1.5em 1.5em;
	/* ↓ hide text */
	text-indent: -9999px;
	padding: 0.2em 0.75em;
	/* ↓ 0.6em padding width accounts for 24px wide icons (and some padding) */
	width: 0.85em;
}

	@media only screen and (min-width: 28.57em)
	{
		table tbody th
		{
			/* ↓ show text */
			text-indent: 2em;
		}
	}

table th.weight
{
	background-image: url("../images/weight-small.svg");
}

table th.speed
{
	background-image: url("../images/speed-small.svg");
}

table th.requests
{
	background-image: url("../images/resources-small.svg");
}

	@media only screen and (min-width: 28.78em)
	{
		table th.requests
		{
			background-image: url("../images/resources-small-top-aligned.svg");
		}
	}

/*
 select empty column heading
 */
table thead tr th:nth-of-type(1)
{
	max-width: 0.85em;
}

/*
 select improvements column heading,
 wrap the heading text and hide overflow
 */
table thead tr th:nth-of-type(4)
{
	max-width: 2em;
	word-wrap: normal;
	overflow: hidden;
	padding-right: 0;
	text-overflow: ellipsis;
}

	@media only screen and (min-width: 23.57em)
	{
		table thead tr th:nth-of-type(4)
		{
			padding-right: 0.2em;
		}
	}

table tbody tr
{
	/* ↓ make rows appear more even height */
	height: 3em;
}

table tbody tr:nth-of-type(1) td,
/* ↓ first row */
table tbody tr:nth-of-type(1) th
{
	/* ↓ add space between table heading and data */
	padding-top: 0.85em;
}

table tbody td
{
	padding: 0.5em;
}

	@media only screen and (min-width: 34.2em)
	{
		table tbody td
		{
			width: 30%;
		}
	}

/*
 centre improvements data early
*/
table tbody td:nth-of-type(3)
{
	text-align: center;
}

	/*
	 centre improvements data early
	*/
	@media only screen and (min-width: 26.43em)
	{
		table tbody td:nth-of-type(3)
		{
			text-align: center;
		}
	}

.blog-post-link
{
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-size: 1.05em;
	margin-top: 0.75em;
	text-align: center;
}

/***************************************************************************
*									Units									*
****************************************************************************/

table td .units
{
	font-size: 0.85em;
	/* ↓ We don't have small caps in the web font, so use uppercase instead */
	font-variant: normal;
	text-transform: uppercase;
}

/****************************************************************************
 *							Syntax highlighting								*
 ****************************************************************************/

code .key
{
	/* ↓ cloud */
	color: #007acc;
}

code .key.top-level
{
	/* ↓ dark cloud */
	color: #005c99;
}

code .value
{
	/* ↓ dark grey */
	color: #303030;
}

/****************************************************************************
 *								Calculation list							*
 ****************************************************************************/

.calculation
{
	background: #f6f6f6 url(../images/background-calculation.svg) top left repeat;
	border: 1px solid rgba(0,0,0,0.2);
	/* ↓ 10px shadow adjusted for 2px vertical border on image */
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
	/* ↓ smaller than body text */
	font-size: 0.9em;
	margin: 1.75em 0 1.75em 0;
	padding: 0.75em 0.5em 0.5em 0.5em;
}

.calculation .final-calculation
{
	font-family: "Avenir Next Demi Bold", Avenir, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1em;
}

.calculation .final-calculation strong
{
	border-bottom: 3px double #303030;
	/* ↓ black */
	color: #000;
	display: inline-block;
	font-family: "Avenir Next Demi Bold", Avenir, Helvetica, sans-serif;
	font-weight: bold;
}

@media only screen and (min-width: 28.78em)
{
	.calculation
	{
		/* ↓ same as narrow width viewport body text */
		font-size: 1em;
		padding: 1.75em 0.5em 0.5em 0.5em;
	}

	.calculation .final-calculation
	{
		font-size: 1.1em;
	}
}

@media only screen and (min-width: 54.28em)
{
	.calculation
	{
		/* ↓ same as body text */
		font-size: 1.1em;
	}

	.calculation .final-calculation
	{
		font-size: 1.25em;
	}
}

.calculation li
{
	list-style-type: none;
	word-wrap: break-word;
}

/****************************************************************************
 *								Lists of links								*
 *		(as found in the index pages of /sites, /trackers, & /whitelist)	*
 *			(same style used for trackers list in modal window)				*
 *			(also used for sites and trackers collections)					*
 ****************************************************************************/

ul.list-of-links, #trackers-list ul, body.trackers ol, body.sites ol
{
	margin-left: 0;
	margin-top: 1.75em;
}

body.trackers ol, body.sites ol
{
	/* ↓ leave space for numbers */
	padding-left: 2.5em;
}

/*
 on collections pages, put more space below title, and align left margin of ul to ol below
*/
body.trackers h1 + ul, body.sites h1 + ul
{
	margin-top: 2em;
	padding-left: 0.5em;
}

ul.list-of-links li, #trackers-list ul li
{
	list-style-type: none;
	margin: 0;
}

ul.list-of-links li a, #trackers-list ul li
{
	/* ↓ light grey */
	border-bottom: 1px solid #ddd;
	display: block;
	padding: 0.5em 0.5em 0 0.5em;
	text-decoration: none;
}

/*
 as above but no display block as this kills the numbers
*/
body.trackers ol li, body.sites ol li
{
	/* ↓ light grey */
	border-bottom: 1px solid #ddd;
	margin: 0;
	padding: 0.5em 0.5em 0 0.5em;
	text-decoration: none;
	/* ↓ split long links across lines */
	word-wrap: break-word;
}

/*
 as not all items in the trackers list are anchors
*/
#trackers-list ul li a, body.trackers ol li a, body.sites ol li a
{
	display: block;
	text-decoration: none;
}

/*
 don’t make site and tracker collections list display the links on a separate row as above
*/
body.trackers ol li a, body.sites ol li a
{
	display: inline;
}

ul.sites
{
	margin-top: 0;
}

/****************************************************************************
 *							Improvement statistics							*
 ****************************************************************************/

.improvements
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-between;
	align-items: flex-start;
	list-style-type: none;
	margin: 1.75em auto 0 auto;
}

.improvements li
{
	/* ↓ icon styles */
	background: top center no-repeat;
	background-size: 3.75em;
	margin-right: 0.3em;
	margin-bottom: 3em;
	margin-left: 0.3em;
	/* ↓ space for icon */
	padding-top: 5em;
	text-align: center;
	width: 4.8em;
}

	@media only screen and (min-width: 20.66em)
	{
		.improvements li
		{
			width: 6em;
		}
	}

	@media only screen and (min-width: 28.78em)
	{
		.improvements li
		{
			width: 6.2em;
		}
	}

	@media only screen and (min-width: 33em)
	{
		.improvements li
		{
			width: 7.5em;
		}
	}

.improvements .requests
{
	background-image: url('../images/safer.svg');
}

.improvements .weight
{
	background-image: url('../images/lighter.svg');
}

.improvements .speed
{
	background-image: url('../images/faster.svg');
}

.improvements h3
{
	font-size: 1.25em;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}

.improvements h4
{
	font-size: 1.25em;
	margin-top: 0.75em;
	margin-bottom: 0.5em;
}

.improvements .amount
{
	font-size: 1.5em;
	/* ↓ put amount on its own line */
	display: block;
	/* ↓ don’t break amount from unit */
	word-wrap: normal;
}

.improvements .type
{
	font-weight: normal;
}

.improvements .details
{
	font-size: 0.85em;
}

	@media only screen and (min-width: 28.78em)
	{
		.improvements .details
		{
			font-size: 1em
		}
	}

.improvements .details strong
{
	font-weight: normal;
}

@media only screen and (min-width: 40em)
{
	.improvements .primary
	{
		/* ↓ put text on its own line */
		display: block;
	}
}

.statistics .amount
{
	/* ↓ as font-weight: 600 isn't supported consistently cross-browser */
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, Arial, sans-serif;
}

#after-better p,
/* ↓ table footer */
.home-statistics p
{
	font-size: 0.85em;
	text-align: center;
}

/****************************************************************************
 *								Prevalence									*
 ****************************************************************************/

#prevalence p
{
	text-align: center;
}

/****************************************************************************
 *									Notes									*
 ****************************************************************************/

#notes ul
{
	margin-top: 0;
	margin-left: 0;
}

	@media only screen and (min-width: 28.78em)
	{
		#notes ul
		{
			margin-left: 0.5em;
		}
	}

#notes ul ul
{
	margin-left: 0.25em;
	margin-top: 0.5em;
	margin-bottom: 0;
}

#notes ul li
{
	list-style-type: none;
	margin-bottom: 0.75em;
	margin-left: 1.75em;
	position: relative;
}

#notes ul ul li
{
	margin-bottom: 0.5em;
	margin-left: 0.75em;
}

#notes ul li:before
{
	background: url('../images/notes-small.svg') top left no-repeat;
	background-size: 1em;
	content: "";
	display: block;
	height: 1.2em;
	/* ↓ width of icon + padding */
	left: -2em;
	position: absolute;
	/* ↓ vertically centre */
	top: 0.1em;
	width: 1em;
}

#notes ul ul li:before
{
	background: url('../images/side-arrow.svg') center left no-repeat;
	background-size: 0.4em;
	height: 1em;
	/* ↓ width of icon + padding */
	left: -0.9em;
	width: 0.5em;
	top: 0.2em;
}

/****************************************************************************
 *								References									*
 ****************************************************************************/

#references ol
{
	margin-top: 0;
	margin-left: 0;
	padding-left: 0;
}

#references ol ol
{
	margin-top: 0.5em;
	margin-bottom: 0;
}

#references ol li
{
	margin-bottom: 0.75em;
	margin-left: 2.2em;
}

#references ol ol li
{
	margin-bottom: 0.5em;
	margin-left: 0.75em;
}

/****************************************************************************
 *						Clouds of Fame and Shame							*
 ****************************************************************************/

/*
 Heading image
*/
#cloud-of-shame-award a, #cloud-of-fame-award a, h1[id*=-cloud-of-]
{
	background-position: top center;
	background-repeat: no-repeat;
	content: '';
	/* ↓ dark grey – crest blue in greyscale */
	color: #303030;
	display: block;
	/* ↓ replace top margin for h2 below */
	margin-top: 2em;
	margin-bottom: 1.75em;
	position: relative;
	text-decoration: none;
	width: 100%;
}

h1[id*=-cloud-of-]
{
	/* ↓ replace top margin for h1 below */
	margin-top: 0.5em;
}

h1[id*=-cloud-of-] strong, body.sites h1[id*=-cloud-of-] strong
{
	/* ↓ remove top margin above cloud of text below cloud of icons */
	margin-top: 0;
}

#cloud-of-shame-award > h2, #cloud-of-fame-award > h2
{
	margin-top: 0;
}

#cloud-of-fame-award a, h1[id*=-cloud-of-fame]
{
	background-image: url('../images/cloud-of-fame-colour.svg');
	background-size: 7.57em;
	/* ↓ height of icon */
	padding-top: 7.57em;
}

#cloud-of-shame-award a, h1[id*=-cloud-of-shame]
{
	background-image: url('../images/cloud-of-shame-colour.svg');
	background-size: 7.57em;
	/* ↓ height of icon */
	padding-top: 7.57em;
}

/****************************************************************************
 *								Screenshots									*
 ****************************************************************************/

#screenshots img,
body.spotlight img[src="/sites/lifebuzz.com/lifebuzz.jpg"]
{
	margin-top: 1.75em;
	margin-bottom: 0.75em;
}

#screenshots blockquote,
body.spotlight #-cloud-of-shame-lifebuzz-by-lifebuzz-media + p + blockquote
{
	margin-top: 0;
}

/****************************************************************************
 *								Typography									*
 ****************************************************************************/

/*
 Superscript the footnote definitions
*/
a[href="#references"], a[href="#after-better"]
{
	position: relative;
	text-decoration: none;
	top: -0.5em;
	font-size: 0.7em;
	font-weight: normal;
}


/****************************************************************************
 *										News								*
 ****************************************************************************/

.news .year
{
	text-align: left;
}

.posts-list, .posts-list ul
{
	margin-top: 0;
	margin-left: 0;
}

.posts-list
{
	margin-top: 0;
}

.posts-list li
{
	clear: both;
	list-style-type: none;
	margin-left: 0;
}

/*
	clear date floats
*/
.posts-list li:after
{
	clear: both;
	display: table;
	content:"";
}

/*
	remove clearing for lists inside the posts list
*/
.posts-list li li
{
	clear: none;
}

/*
	don't clear lists floats
*/
.posts-list li li:after
{
	clear: none;
	display: none;
	content:"";
}


.posts-list .h-entry li
{
	margin-bottom: 1.2em;
}

.posts-list .p-name, .posts-list .group-name
{
	margin-top: 0;
	margin-bottom: 0.5em;
	text-align: left;
}

/*
 Make the dates stand out a little
*/
.posts-list .dt-published
{
	/* ↓ cloud */
	background-color: #007acc;
	/* ↓ put date in circle */
	border-radius: 100%;
	/* ↓ white */
	color: #fff;
	clear: both;
	display: block;
	float: left;
	font-size: 1em;
	height: 2.05em;
	line-height: 1em;
	font-family: "Avenir Next Demi Bold", Avenir, Helvetica, sans-serif;
	font-weight: bold;
	/* ↓ space between bubble and text */
	margin-right: 1.2em;
	/* ↓ make text appear more optically vertically centred */
	padding: 0.4em 0.5em 0.3em 0.5em;
	text-align: center;
	text-transform: uppercase;
	width: 1.75em;
}

/*
	when it's a major update, put more space above and below
*/
.posts-list .major-update
{
	margin-top: 1em;
	margin-bottom: 1em;
}

/*
	when it's two major updates, in a row, put even more space between
*/
.major-update + .major-update
{
	margin-top: 1.75em;
}

.posts-list .dt-published .month
{
	/* ↓ set month below date */
	display: block;
	font-size: 0.7em;
	font-weight: 500;
	text-align: center;
}

.posts-list .summary
{
	margin-left: 4em;
}

.posts-list .summary-list
{
	/* ↓ equal top + bottom margin ensures it gets properly vertically centred */
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	margin-left: 4em;
}

/* ↓ if the summary list is inside a summary div, don’t have a left margin */

.posts-list .summary .summary-list
{
	margin-left: 0;
}

.p-summary
	/* ↓ equal top + bottom margin ensures it gets properly vertically centred */
{
	margin: 1.5em 0 1.5em 0;
}

.posts-list .summary-list li
{
	/* ↓ light grey */
	border-bottom: 1px solid #ddd;
	padding: 0.75em 0;
	margin-bottom: 0;
}

.posts-list .summary-list li:first-of-type
{
	/* ↓ don’t have a top padding on the first item in the list */
	padding-top: 0;
}

.posts-list .summary-list li:last-of-type
{
	/* ↓ don’t have a border on the last item in the list */
	border-bottom: none;
	padding-bottom: 0;
}

/*
 but if there's more than one paragraph, we want it to have a margin on top
	so we can distinguish paragraphs
*/
.posts-list .summary p:nth-child(n+2), .posts-lists .summary ul li:nth-child(n+2)
{
	/* ↓ same as general p rule */
	margin-top: 0.64em;
}

/****************************************************************************
*							Spotlight Back Issues							*
****************************************************************************/

#back-issues ul
{
	margin-left: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
}

#back-issues ul li
{
	list-style-type: none;
	margin: 0;
}

#back-issues ul li a
{
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
	color: #303030;
	display: block;
	font-size: 1em;
	/* ↓ to keep a portrait shape */
	height: 15em;
	margin: 0.75em;
	padding: 0.75em 0.5em 0.5em 0.5em;
	/* ↓ center issue number */
	text-align: center;
	/* ↓ remove link underline */
	text-decoration: none;
	max-width: 12em;
}

/*
 issue title
*/
#back-issues ul li a strong
{
	display: block;
	font-size: 1.25em;
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
}

/*
 issue image
*/
#back-issues ul li a img
{
	margin: 0;
}

#back-issues ul li .issue-1 img
{
	/* ↓ manually vertically centre image on issue 1 */
	margin-top: 1.5em;
}
/****************************************************************************
 *																			*
 *	App styles: postfix.													*
 *																			*
 *	(These styles are added to the end of the common.css file from			*
 *	/common/styles to create the global.css file referenced by all pages).	*
 *																			*
 ****************************************************************************/

 /********************
 *		Sections	*
 ********************

- About the site
- Hide titles on headings
- #2 Spotlight

 *******************/

/*
 add padding to bottom of main to negate height of toolbar depending on the device orientation
*/
@media screen and (orientation:landscape)
{
	main
	{
		padding-bottom: 6.43em;
	}
}

/*
 Don’t show the icons at the top of the pages in the app.
 (As they’re in the navigation bar)
 And match padding to that on the <main> element
*/
ul.list-of-links
{
	background: none;
	padding-top: 0;
	margin-top: 0.85em;
}

/*
 Lists of links should not be indented in the app.
 (https://source.ind.ie/better/themes/issues/15)
*/
ul.list-of-links, ul.list-of-links li
{
	margin-left: 0;
}

/*
 Add some padding so links aren’t bumped against left edge of background
*/
ul.list-of-links li a
{
	padding-left: 0.35em;
}

/****************************************************************************
 *							Module-specific styles							*
 ****************************************************************************/

 /****************************************************************************
 *								About the site								*
 ****************************************************************************/

 main > blockquote
 {
 	margin-top: 1.7em;
 }

 /***************************************************************************
 *						Hide titles on headings								*
 ****************************************************************************/

h1.spotlight, h1.sites, h1.trackers, h1.news, h1.sites
{
	display: none;
}

/*
 Halve the top margins on the headings on Sites and Trackers,
 as the lack of h1s (as set above) mean the padding is inconsistent
 with the site and mac app
*/
body.sites main > h2:nth-of-type(1), body.trackers main > h2:nth-of-type(1)
{
	margin-top: 0.75em;
}

/*
 remove excess padding above first h2 on Spotlight page
 (for same reason as above)
*/
body.spotlight main > h2:nth-child(2)
{
	margin-top: 0.75em;
}

/*
 Hide the "The Better Web" title on the Mac app (it’s not there on the iOS app anyway)
*/
body.home main h1
{
	display: none;
}

/***************************************************************************
*								Spotlight #2								*
****************************************************************************/

/*
 Tweaks so Spotlight looks good in screenshots
*/

/*
 iPhone SE (320px width in portrait)
*/

@media only screen and (min-width: 320px) and (max-width: 330px)
{
	body.spotlight h1.headline
	{
		font-size: 38.5vw !important;
		margin-left: -7.5vw !important;
		margin-right: -7.5vw !important;
		margin-bottom: -10px !important;
	}
}

/*
 iPhone 7 (375px width in portrait)
*/

@media only screen and (min-width: 375px) and (max-width: 385px)
{
	body.spotlight h1.headline
	{
		font-size: 39.5vw !important;
		margin-left: -8vw !important;
		margin-right: -8vw !important;
		margin-bottom: -5px !important;
	}
}

/*
 iPhone 7 Plus (414px width in portrait)
*/

@media only screen and (min-width: 414px) and (max-width: 424px)
{
	body.spotlight h1.headline
	{
		font-size: 40vw !important;
		margin-left: -4vw !important;
		margin-right: -4vw !important;
		margin-bottom: -8px !important;
	}
}

/*
 iPad Pro 9.7inch (768px width in portrait)
*/

@media only screen and (min-width: 768px) and (max-width: 778px)
{
	body.spotlight h1.headline
	{
		font-size: 15em !important;
		margin-left: -0.114em !important;
		margin-right: -0.114em !important;
		margin-bottom: 0;
	}
}
/****************************************************************************
 *																			*
 *	Site styles: prefix.													*
 *																			*
 *	(These styles are added to the start of the common.css file from		*
 *	/common/styles to create the global.css file referenced by all pages).	*
 *																			*
 ****************************************************************************/
/****************************************************************************
 *																			*
 *	Common styles															*
 *																			*
 *	These styles are used by both the site and the app.						*
 *																			*
 *	(These styles are added to the end of the common.css file from			*
 *	/common/styles to create the global.css file referenced by all pages).	*
 *																			*
 *	The final global.css for the site and the app is created by:			*
 *																			*
 *			Site:							App:							*
 *																			*
 *	/site/styles/prefix.css			/app/styles/prefix.css					*
 *				+								+							*
 *	/common/styles/common.css		/common/styles/common.css				*
 *				+								+							*
 *	/site/styles/postfix.css		/app/styles/postfix.css					*
 *																			*
 ****************************************************************************/

/********************
 *		Note		*
 ********************

 See readme.md on how to style comments

 */

  /********************
 *		Sections	*
 ********************

- Fonts
- Basic styles
- Main
- Module-specific styles
- Units
- Trackers
- Block rule
- Popularity
- Statistics table
- Units
- Syntax highlighting
- Calculation list
- List of links
- Improvement statistics
- Prevalence
- Notes
- References
- Clouds of Fame and Shame
- Screenshots
- Typography
- News
- Spotlight Back Issues
- Dynamic Type

 *******************/

/****************************************************************************
 *									Fonts									*
 ****************************************************************************/

@font-face
{
	font-family:"Avenir Next";
	src:url("../fonts/avenir-next-regular/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2") format("woff2"),url("../fonts/avenir-next-regular/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff");
	font-style: normal;
	font-weight: normal;
}

@font-face
{
	font-family:"Avenir Next";
	src:url("../fonts/avenir-next-regular-italic/7377dbe6-f11a-4a05-b33c-bc8ce1f60f84.woff2") format("woff2"),url("../fonts/avenir-next-regular-italic/92b66dbd-4201-4ac2-a605-4d4ffc8705cc.woff") format("woff");
	font-style: italic;
	font-weight: normal;
}

@font-face
{
	font-family:"Avenir Next";
	src:url("../fonts/avenir-next-demi-bold/aad99a1f-7917-4dd6-bbb5-b07cedbff64f.woff2") format("woff2"),url("../fonts/avenir-next-demi-bold/91b50bbb-9aa1-4d54-9159-ec6f19d14a7c.woff") format("woff");
	font-style: normal;
	font-weight: bold;
}

/* Fallback because Mac app doesn’t style font-weight: bold; correctly as per above */
@font-face
{
	font-family:"Avenir Next Demi Bold";
	src:url("../fonts/avenir-next-demi-bold/aad99a1f-7917-4dd6-bbb5-b07cedbff64f.woff2") format("woff2"),url("../fonts/avenir-next-demi-bold/91b50bbb-9aa1-4d54-9159-ec6f19d14a7c.woff") format("woff");
	font-style: normal;
	font-weight: bold;
}

@font-face
{
	font-family:"Avenir Next Medium";
	src:url("../fonts/avenir-next-medium/627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2") format("woff2"),url("../fonts/avenir-next-medium/f26faddb-86cc-4477-a253-1e1287684336.woff") format("woff");
	font-style: normal;
	font-weight: 500;
}

/* Avenir Next Ultra Light */
@font-face
{
	font-family:"Avenir Next Ultra Light";
	src:url("../fonts/avenir-next-ultra-light/2e3f5cb9-101f-46cf-a7b3-dfaa58261e03.woff2") format("woff2"),url("../fonts/avenir-next-ultra-light/fa19948e-5e38-4909-b31e-41acd170d6f2.woff") format("woff");
	font-style: normal;
	font-weight: normal;
}

@font-face
{
	font-family: 'Cavorting';
	src: url('../fonts/cavorting/cavorting-webfont.woff2') format('woff2'),
		url('../fonts/cavorting/cavorting-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/****************************************************************************
 *								Basic styles								*
 ****************************************************************************/

html
{
	/* ↓ root size */
	font-size: 14px;
	line-height: 1.5;
}

	@media only screen and (min-width: 28.78em)
	{
		html
		{
			font-size: 16px;
		}
	}

	@media only screen and (min-width: 33.4em)
	{
		html
		{
			font-size: 18px;
		}
	}

/****************************************************************************
*							Dynamic Type (Apple)							*
****************************************************************************/
/*
 Apple’s Dynamic Type scales text according to the iOS Accessibility
 text size settings.
 As `font: keyword;` is the only way it can be used, it overrides any previous
 font rules, and it is also overridden by subsequent rules.
 In order to make the entire text and layout scale accessibly to the text size settings in iOS,
 it has to be implemented in the following way:

 1. All size units in ems, relative to a root font size (in our case px, scaled up twice for wider viewports)
 2. Use @supports so no other browsers apply the font: property, despite the -apple-system-body value not being supported
 3. For iOS devices, the px font sizes will be overridden, even if the accessibility text size hasn’t been changed, so
 we need to set our default font sizes (on the body) relative to iOS’s default browser font size (17px) to make it
 consistent with the non-iOS font size. This must be done for each viewport font size change. And also inside the
 @supports rule, so it doesn’t affect any other browser.)

 See http://www.interactiveaccessibility.com/blog/text-resizing-web-pages-ios-using-dynamic-type
 and https://webkit.org/blog/3709/using-the-system-font-in-web-content/
*/

@supports (font: -apple-system-body)
{
	html
	{
		font: -apple-system-body;
	}

	/* default size of -apple-system-body here is 17px
	 using that as a default, scale text down to equivalent of 14px (14/17).
	 Also set line-height as that is also overridden by the font shorthand
	*/
	body
	{
		font-size: 0.94em;
		line-height: 1.5;
		/* ↓ break words so they don’t flow outside of the viewport */
		word-wrap: break-word;
	}

	@media only screen and (min-width: 28.78em)
	{
		html
		{
			font: -apple-system-body;
		}

		/* default size of -apple-system-body here is 17px
		 using that as a default, scale text down to equivalent of 16px (16/17).
		 Also set line-height as that is also overridden by the font shorthand
		*/
		body
			{
				font-size: 0.82em;
				line-height: 1.5;
			}
		}
	}

	@media only screen and (min-width: 33.4em)
	{
		html
		{
			font: -apple-system-body;
		}

		/* default size of -apple-system-body here is 17px
		 using that as a default, scale text down to equivalent of 18px (18/17).
		 Also set line-height as that is also overridden by the font shorthand
		*/
		body
		{
			font-size: 1.06em;
			line-height: 1.5;
		}
	}
}


body
{
	/* ↓ white */
	background-color: #fff;
	/* ↓ dark grey – crest blue in greyscale */
	color: #303030;
	font-family: "Avenir Next", Avenir, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	/* ↓
	 stop Apple from randomly resizing text, thanks to this thread on Stack Overflow
	 http://stackoverflow.com/questions/6210788/how-to-avoid-ios-automatic-font-size-adjustment
	*/
	-webkit-text-size-adjust: 100%;
}

.wrap
{
	/* ↓ cloud */
	background-color: #007ACC;
}

main
{
	/* ↓ white */
	background-color: #fff;
	/* ↓ (in case the browser is unfamiliar with <main>) */
	display: block;
}

h1, h2, h3, h4
{
	font-weight: bold;
	line-height: 1.25;
	margin: 1.75em 0 0.75em;
}

	@media only screen and (min-width: 33.4em)
	{
		h1, h2, h3, h4
		{
			margin: 2em 0 1em;
		}
	}

h1
{
	font-size: 2em;
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
	/* ↓ as h1s are always at the top of the page */
	margin-top: 1em;
	text-align: center;
}

h2
{
	font-size: 1.75em;
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
	text-align: center;
}

/*
 when an h2 is directly after an h1
*/
h1 + h2
{
	margin-top: 0.75em;
}

h3
{
	font-size: 1.5em;
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
	text-align: center;
}

/*
 when an h3 is directly after an h2
*/
h2 + h3
{
	margin-top: 0.75em;
}

h4
{
	font-size: 1.25em;
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
}

ul, ol
{
	margin: 0.75em 0 1.75em 1em;
	padding-left: 0;
}

ul li, ol li
{
	margin: 0 0 0.5em 1.5em;
}

a
{
	/* ↓ cloud dark */
	color: #005C99;
	/* ↓ Wrap links so they don’t break the layout */
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
}

p
{
	margin: 0 0 0.75em 0;
	/* ↓ Apple Dynamic Type */
}

strong
{
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
}

table
{
	border-collapse: collapse;
	display: block;
	margin: 0 auto 1.75em;
	width: 100%;
}

/*
 hide
*/
table caption
{
	height: 0;
	overflow: hidden;
	width: 0;
}

table thead
{
	/* ↓ black */
	border-bottom: 2px solid #000;
}

table th, table td
{
	padding: 0.25em 0.5em;
}

table th
{
	font-size: 1em;
	font-family: "Avenir Next Demi Bold", Avenir, Helvetica, sans-serif;
	font-weight: bold;
	text-align: left;
	/* ↓ Wrap titles so they don’t break the layout */
	word-wrap: break-word;
}

	@media only screen and (min-width: 30em)
	{
		table thead th
		{
			font-size: 1.1em;
			text-align: center;
		}
	}

table td
{
	font-size: 0.9em;
	text-align: left;
}

	@media only screen and (min-width: 30em)
	{
		table td
		{
			font-size: 1em;
			text-align: center;
		}
	}

blockquote
{
	margin: 0 0 1.75em 0;
}

pre
{
	/* ↓ dark grey */
	color: #303030;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.1);
	/* ↓ very light grey */
	background-color: #f5f5f5;
	font-size: 0.9em;
	margin: 1.25em 0 1.75em 0;
	overflow: auto;
	padding: 0.75em;
}

code
{
	/* ↓ Wrap code segments so they don’t break the layout */
	word-wrap: break-word;
	word-break: break-all;
}

/*
 this is just to solve the way we have a widow on the Forbes site
*/
@media only screen and (min-width: 37.2em)
{
	pre.single-string
	{
		margin-right: -0.5em;
		margin-left: -0.5em;
		white-space: nowrap;
	}
}

/***************************************************************************
*									Main								*
****************************************************************************/

main
{
	margin: 0.75em 0.5em;
	max-width: 34em;
	padding: 0.5em 0.7em 2em 0.7em;
}

	@media only screen and (min-width: 33.4em)
	{
		main
		{
			margin: 0.75em auto;
			padding: 1.25em 2.5em 2em 2.5em;
		}
	}

	/* ↓ when the viewport is this narrow, it is likely because Dynamic Text is enabled and very large */
	@media only screen and (max-width: 17em)
	{
		main
		{
			padding-right: 0.2em;
			padding-left: 0.2em;
		}
	}

body.tracker h1, body.site h1
{
	/* ↓ make the non-strong part of the heading smaller */
	font-size: 1.2em;
}

body.tracker h1 strong, body.site h1 strong
{
	display: block;
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
	font-size: 2em;
	margin-top: 0.5em;
	text-align: center;
}

/*
 On Collections, the titles are longer, so there needs to be more space between the title and () section
*/
body.trackers h1 strong, body.sites h1 strong
{
	margin-bottom: 0.25em;
}

/*
 Blockquotes after the first heading (or first thing after the .main section for the app) are the summary of the site/tracker and should be displayed centered and in a slightly larger font size. */
main blockquote
{
	/* ↓ don't round */
	font-size: 1.1em;
	margin-top: 1.75em;
	margin-bottom: 0.5em;
	text-align: center;
}

main blockquote.standout
{
	/* ↓ black */
	color: #000;
	font-size: 1.25em;
	margin-top: 1.25em;
	margin-bottom: 1.25em;
}

figure
{
	margin: 0;
}

figure figcaption
{
	color: #7d7d7d;
	text-align: center;
}

figure figcaption p
{
	margin-bottom: 0;
}

/*
 Style screenshots (all images inside main) with rounded corners and drop shadows
*/
main img
{
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 0.25em;
	/* ↓ 10px shadow adjusted for 2px vertical border on image */
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
	display: block;
	margin: 1.75em 0 2.25em 0;
	/* ↓ Make images resize to fit the main area (grow or shrink) */
	max-width: 100%;
}

main figure
{
	margin: 1.75em 0 1.75em 0;
}

main figure img
{
	margin: 0 0 0.5em 0;
}

main img.no-frame
{
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/****************************************************************************
 *							Module-specific styles							*
 ****************************************************************************/

#ethical-design-violations h2
{
	margin-bottom: 0.5em;
}

#ethical-design-violations > p
{
	text-align: center;
}

/****************************************************************************
 *									Units									*
 ****************************************************************************/

table td .units
{
	font-variant: small-caps;
}


/****************************************************************************
 *									Trackers								*
 ****************************************************************************/

#ethical-design-violations p
{
	/* ↓ as the trackers have margins on top */
	margin-bottom: 0;
}

#ethical-design-violations ul
{
	/* ↓ as the trackers have margins on top */
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-between;
	align-items: flex-start;
}

.static-badge, .trackers-badge
{
	/* ↓ icon styles */
	background: top center no-repeat;
	/* ↓ shrink icons for narrower viewports */
	background-size: 6em;
	font-size: 1em;
	list-style-type: none;
	margin-top: 1.5em;
	margin-bottom: 0.25em;
	margin-left: 0;
	text-align: center;
	/* ↓ allow space for icon at top */
	padding: 7.75em 0.75em 0 0.75em;
	/* ↓ so we get 3 to a row as often as possible */
	width: 7.7em;
}

.badge-title
{
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-size: 1.2em;
	margin-top: 0;
	margin-bottom: 0;
	text-transform: uppercase;
}

#aggressive
{
	background-image: url('../images/aggressive.svg');
}

#doorslam
{
	background-image: url('../images/doorslam.svg');
}

#clickbait
{
	background-image: url('../images/clickbait.svg');
}

#fingerprint
{
	background-image: url('../images/fingerprint.svg');
}

#web-bug
{
	background-image: url('../images/web-bug.svg');
}

#tracker
{
	background-image: url('../images/trackers.svg');
}

.static-badge p, .trackers-badge p
{
	margin-bottom: 0.5em;
}

.trackers-badge
{
	/* ↓ there's no icon for the trackers badge so we don't need the padding */
	padding-top: 0;
}

.trackers-badge .badge-title
{
	/* ↓ use flexbox to ensure number inside is centered */
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.trackers-badge .number
{
	/* ↓ mid grey */
	color: #6d6d6d;
	/* ↓ force number on to its own line */
	display: block;
	/* ↓ don't flex expand or contract, always stay the width of the number */
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	font-family: "Avenir Next Ultra Light", "Avenir Next", Avenir, Helvetica, Arial, sans-serif;
	font-size: 5.2em;
	font-weight: normal;
	/* ↓ tighten kerning on the number */
	letter-spacing: -0.05em;
	/* ↓ same as top padding on other badges */
	line-height: 1.25em;
	/* ↓ offset kerning */
	margin-left: -0.1em;
	text-align: center;
	/* ↓ extra width to accommodate negative margins */
	width: 1.4em;
}

#open-trackers-popup
{
	/* ↓ dark grey */
	color: #333;
	text-decoration: none;
}

.badge-explanation
{
	margin-top: 0;
}

.trackers-badge ul
{
	/* ↓ TODO: make these display in some way */
	display: none;
}

#no-trackers p
{
	text-align: center;
}

/****************************************************************************
 *								Block rule									*
 ****************************************************************************/

#block-rule h2
{
	margin-bottom: 0.5em;
}

#block-rule p
{
	text-align: center;
}

/****************************************************************************
 *									Popularity								*
 ****************************************************************************/

#popularity p
{
	text-align: center;
}


/****************************************************************************
 *							Statistics table								*
 ****************************************************************************/

#after-better table
{
	margin-bottom: 1.75em;
}

@media only screen and (min-width: 24.3em)
{
	table th:nth-of-type(1)
	{
		width: 0.75em;
	}
}

table tbody th
{
	background: center left no-repeat;
	background-size: 1.5em 1.5em;
	/* ↓ hide text */
	text-indent: -9999px;
	padding: 0.2em 0.75em;
	/* ↓ 0.6em padding width accounts for 24px wide icons (and some padding) */
	width: 0.85em;
}

	@media only screen and (min-width: 28.57em)
	{
		table tbody th
		{
			/* ↓ show text */
			text-indent: 2em;
		}
	}

table th.weight
{
	background-image: url("../images/weight-small.svg");
}

table th.speed
{
	background-image: url("../images/speed-small.svg");
}

table th.requests
{
	background-image: url("../images/resources-small.svg");
}

	@media only screen and (min-width: 28.78em)
	{
		table th.requests
		{
			background-image: url("../images/resources-small-top-aligned.svg");
		}
	}

/*
 select empty column heading
 */
table thead tr th:nth-of-type(1)
{
	max-width: 0.85em;
}

/*
 select improvements column heading,
 wrap the heading text and hide overflow
 */
table thead tr th:nth-of-type(4)
{
	max-width: 2em;
	word-wrap: normal;
	overflow: hidden;
	padding-right: 0;
	text-overflow: ellipsis;
}

	@media only screen and (min-width: 23.57em)
	{
		table thead tr th:nth-of-type(4)
		{
			padding-right: 0.2em;
		}
	}

table tbody tr
{
	/* ↓ make rows appear more even height */
	height: 3em;
}

table tbody tr:nth-of-type(1) td,
/* ↓ first row */
table tbody tr:nth-of-type(1) th
{
	/* ↓ add space between table heading and data */
	padding-top: 0.85em;
}

table tbody td
{
	padding: 0.5em;
}

	@media only screen and (min-width: 34.2em)
	{
		table tbody td
		{
			width: 30%;
		}
	}

/*
 centre improvements data early
*/
table tbody td:nth-of-type(3)
{
	text-align: center;
}

	/*
	 centre improvements data early
	*/
	@media only screen and (min-width: 26.43em)
	{
		table tbody td:nth-of-type(3)
		{
			text-align: center;
		}
	}

.blog-post-link
{
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-size: 1.05em;
	margin-top: 0.75em;
	text-align: center;
}

/***************************************************************************
*									Units									*
****************************************************************************/

table td .units
{
	font-size: 0.85em;
	/* ↓ We don't have small caps in the web font, so use uppercase instead */
	font-variant: normal;
	text-transform: uppercase;
}

/****************************************************************************
 *							Syntax highlighting								*
 ****************************************************************************/

code .key
{
	/* ↓ cloud */
	color: #007acc;
}

code .key.top-level
{
	/* ↓ dark cloud */
	color: #005c99;
}

code .value
{
	/* ↓ dark grey */
	color: #303030;
}

/****************************************************************************
 *								Calculation list							*
 ****************************************************************************/

.calculation
{
	background: #f6f6f6 url(../images/background-calculation.svg) top left repeat;
	border: 1px solid rgba(0,0,0,0.2);
	/* ↓ 10px shadow adjusted for 2px vertical border on image */
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
	/* ↓ smaller than body text */
	font-size: 0.9em;
	margin: 1.75em 0 1.75em 0;
	padding: 0.75em 0.5em 0.5em 0.5em;
}

.calculation .final-calculation
{
	font-family: "Avenir Next Demi Bold", Avenir, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1em;
}

.calculation .final-calculation strong
{
	border-bottom: 3px double #303030;
	/* ↓ black */
	color: #000;
	display: inline-block;
	font-family: "Avenir Next Demi Bold", Avenir, Helvetica, sans-serif;
	font-weight: bold;
}

@media only screen and (min-width: 28.78em)
{
	.calculation
	{
		/* ↓ same as narrow width viewport body text */
		font-size: 1em;
		padding: 1.75em 0.5em 0.5em 0.5em;
	}

	.calculation .final-calculation
	{
		font-size: 1.1em;
	}
}

@media only screen and (min-width: 54.28em)
{
	.calculation
	{
		/* ↓ same as body text */
		font-size: 1.1em;
	}

	.calculation .final-calculation
	{
		font-size: 1.25em;
	}
}

.calculation li
{
	list-style-type: none;
	word-wrap: break-word;
}

/****************************************************************************
 *								Lists of links								*
 *		(as found in the index pages of /sites, /trackers, & /whitelist)	*
 *			(same style used for trackers list in modal window)				*
 *			(also used for sites and trackers collections)					*
 ****************************************************************************/

ul.list-of-links, #trackers-list ul, body.trackers ol, body.sites ol
{
	margin-left: 0;
	margin-top: 1.75em;
}

body.trackers ol, body.sites ol
{
	/* ↓ leave space for numbers */
	padding-left: 2.5em;
}

/*
 on collections pages, put more space below title, and align left margin of ul to ol below
*/
body.trackers h1 + ul, body.sites h1 + ul
{
	margin-top: 2em;
	padding-left: 0.5em;
}

ul.list-of-links li, #trackers-list ul li
{
	list-style-type: none;
	margin: 0;
}

ul.list-of-links li a, #trackers-list ul li
{
	/* ↓ light grey */
	border-bottom: 1px solid #ddd;
	display: block;
	padding: 0.5em 0.5em 0 0.5em;
	text-decoration: none;
}

/*
 as above but no display block as this kills the numbers
*/
body.trackers ol li, body.sites ol li
{
	/* ↓ light grey */
	border-bottom: 1px solid #ddd;
	margin: 0;
	padding: 0.5em 0.5em 0 0.5em;
	text-decoration: none;
	/* ↓ split long links across lines */
	word-wrap: break-word;
}

/*
 as not all items in the trackers list are anchors
*/
#trackers-list ul li a, body.trackers ol li a, body.sites ol li a
{
	display: block;
	text-decoration: none;
}

/*
 don’t make site and tracker collections list display the links on a separate row as above
*/
body.trackers ol li a, body.sites ol li a
{
	display: inline;
}

ul.sites
{
	margin-top: 0;
}

/****************************************************************************
 *							Improvement statistics							*
 ****************************************************************************/

.improvements
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-between;
	align-items: flex-start;
	list-style-type: none;
	margin: 1.75em auto 0 auto;
}

.improvements li
{
	/* ↓ icon styles */
	background: top center no-repeat;
	background-size: 3.75em;
	margin-right: 0.3em;
	margin-bottom: 3em;
	margin-left: 0.3em;
	/* ↓ space for icon */
	padding-top: 5em;
	text-align: center;
	width: 4.8em;
}

	@media only screen and (min-width: 20.66em)
	{
		.improvements li
		{
			width: 6em;
		}
	}

	@media only screen and (min-width: 28.78em)
	{
		.improvements li
		{
			width: 6.2em;
		}
	}

	@media only screen and (min-width: 33em)
	{
		.improvements li
		{
			width: 7.5em;
		}
	}

.improvements .requests
{
	background-image: url('../images/safer.svg');
}

.improvements .weight
{
	background-image: url('../images/lighter.svg');
}

.improvements .speed
{
	background-image: url('../images/faster.svg');
}

.improvements h3
{
	font-size: 1.25em;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}

.improvements h4
{
	font-size: 1.25em;
	margin-top: 0.75em;
	margin-bottom: 0.5em;
}

.improvements .amount
{
	font-size: 1.5em;
	/* ↓ put amount on its own line */
	display: block;
	/* ↓ don’t break amount from unit */
	word-wrap: normal;
}

.improvements .type
{
	font-weight: normal;
}

.improvements .details
{
	font-size: 0.85em;
}

	@media only screen and (min-width: 28.78em)
	{
		.improvements .details
		{
			font-size: 1em
		}
	}

.improvements .details strong
{
	font-weight: normal;
}

@media only screen and (min-width: 40em)
{
	.improvements .primary
	{
		/* ↓ put text on its own line */
		display: block;
	}
}

.statistics .amount
{
	/* ↓ as font-weight: 600 isn't supported consistently cross-browser */
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, Arial, sans-serif;
}

#after-better p,
/* ↓ table footer */
.home-statistics p
{
	font-size: 0.85em;
	text-align: center;
}

/****************************************************************************
 *								Prevalence									*
 ****************************************************************************/

#prevalence p
{
	text-align: center;
}

/****************************************************************************
 *									Notes									*
 ****************************************************************************/

#notes ul
{
	margin-top: 0;
	margin-left: 0;
}

	@media only screen and (min-width: 28.78em)
	{
		#notes ul
		{
			margin-left: 0.5em;
		}
	}

#notes ul ul
{
	margin-left: 0.25em;
	margin-top: 0.5em;
	margin-bottom: 0;
}

#notes ul li
{
	list-style-type: none;
	margin-bottom: 0.75em;
	margin-left: 1.75em;
	position: relative;
}

#notes ul ul li
{
	margin-bottom: 0.5em;
	margin-left: 0.75em;
}

#notes ul li:before
{
	background: url('../images/notes-small.svg') top left no-repeat;
	background-size: 1em;
	content: "";
	display: block;
	height: 1.2em;
	/* ↓ width of icon + padding */
	left: -2em;
	position: absolute;
	/* ↓ vertically centre */
	top: 0.1em;
	width: 1em;
}

#notes ul ul li:before
{
	background: url('../images/side-arrow.svg') center left no-repeat;
	background-size: 0.4em;
	height: 1em;
	/* ↓ width of icon + padding */
	left: -0.9em;
	width: 0.5em;
	top: 0.2em;
}

/****************************************************************************
 *								References									*
 ****************************************************************************/

#references ol
{
	margin-top: 0;
	margin-left: 0;
	padding-left: 0;
}

#references ol ol
{
	margin-top: 0.5em;
	margin-bottom: 0;
}

#references ol li
{
	margin-bottom: 0.75em;
	margin-left: 2.2em;
}

#references ol ol li
{
	margin-bottom: 0.5em;
	margin-left: 0.75em;
}

/****************************************************************************
 *						Clouds of Fame and Shame							*
 ****************************************************************************/

/*
 Heading image
*/
#cloud-of-shame-award a, #cloud-of-fame-award a, h1[id*=-cloud-of-]
{
	background-position: top center;
	background-repeat: no-repeat;
	content: '';
	/* ↓ dark grey – crest blue in greyscale */
	color: #303030;
	display: block;
	/* ↓ replace top margin for h2 below */
	margin-top: 2em;
	margin-bottom: 1.75em;
	position: relative;
	text-decoration: none;
	width: 100%;
}

h1[id*=-cloud-of-]
{
	/* ↓ replace top margin for h1 below */
	margin-top: 0.5em;
}

h1[id*=-cloud-of-] strong, body.sites h1[id*=-cloud-of-] strong
{
	/* ↓ remove top margin above cloud of text below cloud of icons */
	margin-top: 0;
}

#cloud-of-shame-award > h2, #cloud-of-fame-award > h2
{
	margin-top: 0;
}

#cloud-of-fame-award a, h1[id*=-cloud-of-fame]
{
	background-image: url('../images/cloud-of-fame-colour.svg');
	background-size: 7.57em;
	/* ↓ height of icon */
	padding-top: 7.57em;
}

#cloud-of-shame-award a, h1[id*=-cloud-of-shame]
{
	background-image: url('../images/cloud-of-shame-colour.svg');
	background-size: 7.57em;
	/* ↓ height of icon */
	padding-top: 7.57em;
}

/****************************************************************************
 *								Screenshots									*
 ****************************************************************************/

#screenshots img,
body.spotlight img[src="/sites/lifebuzz.com/lifebuzz.jpg"]
{
	margin-top: 1.75em;
	margin-bottom: 0.75em;
}

#screenshots blockquote,
body.spotlight #-cloud-of-shame-lifebuzz-by-lifebuzz-media + p + blockquote
{
	margin-top: 0;
}

/****************************************************************************
 *								Typography									*
 ****************************************************************************/

/*
 Superscript the footnote definitions
*/
a[href="#references"], a[href="#after-better"]
{
	position: relative;
	text-decoration: none;
	top: -0.5em;
	font-size: 0.7em;
	font-weight: normal;
}


/****************************************************************************
 *										News								*
 ****************************************************************************/

.news .year
{
	text-align: left;
}

.posts-list, .posts-list ul
{
	margin-top: 0;
	margin-left: 0;
}

.posts-list
{
	margin-top: 0;
}

.posts-list li
{
	clear: both;
	list-style-type: none;
	margin-left: 0;
}

/*
	clear date floats
*/
.posts-list li:after
{
	clear: both;
	display: table;
	content:"";
}

/*
	remove clearing for lists inside the posts list
*/
.posts-list li li
{
	clear: none;
}

/*
	don't clear lists floats
*/
.posts-list li li:after
{
	clear: none;
	display: none;
	content:"";
}


.posts-list .h-entry li
{
	margin-bottom: 1.2em;
}

.posts-list .p-name, .posts-list .group-name
{
	margin-top: 0;
	margin-bottom: 0.5em;
	text-align: left;
}

/*
 Make the dates stand out a little
*/
.posts-list .dt-published
{
	/* ↓ cloud */
	background-color: #007acc;
	/* ↓ put date in circle */
	border-radius: 100%;
	/* ↓ white */
	color: #fff;
	clear: both;
	display: block;
	float: left;
	font-size: 1em;
	height: 2.05em;
	line-height: 1em;
	font-family: "Avenir Next Demi Bold", Avenir, Helvetica, sans-serif;
	font-weight: bold;
	/* ↓ space between bubble and text */
	margin-right: 1.2em;
	/* ↓ make text appear more optically vertically centred */
	padding: 0.4em 0.5em 0.3em 0.5em;
	text-align: center;
	text-transform: uppercase;
	width: 1.75em;
}

/*
	when it's a major update, put more space above and below
*/
.posts-list .major-update
{
	margin-top: 1em;
	margin-bottom: 1em;
}

/*
	when it's two major updates, in a row, put even more space between
*/
.major-update + .major-update
{
	margin-top: 1.75em;
}

.posts-list .dt-published .month
{
	/* ↓ set month below date */
	display: block;
	font-size: 0.7em;
	font-weight: 500;
	text-align: center;
}

.posts-list .summary
{
	margin-left: 4em;
}

.posts-list .summary-list
{
	/* ↓ equal top + bottom margin ensures it gets properly vertically centred */
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	margin-left: 4em;
}

/* ↓ if the summary list is inside a summary div, don’t have a left margin */

.posts-list .summary .summary-list
{
	margin-left: 0;
}

.p-summary
	/* ↓ equal top + bottom margin ensures it gets properly vertically centred */
{
	margin: 1.5em 0 1.5em 0;
}

.posts-list .summary-list li
{
	/* ↓ light grey */
	border-bottom: 1px solid #ddd;
	padding: 0.75em 0;
	margin-bottom: 0;
}

.posts-list .summary-list li:first-of-type
{
	/* ↓ don’t have a top padding on the first item in the list */
	padding-top: 0;
}

.posts-list .summary-list li:last-of-type
{
	/* ↓ don’t have a border on the last item in the list */
	border-bottom: none;
	padding-bottom: 0;
}

/*
 but if there's more than one paragraph, we want it to have a margin on top
	so we can distinguish paragraphs
*/
.posts-list .summary p:nth-child(n+2), .posts-lists .summary ul li:nth-child(n+2)
{
	/* ↓ same as general p rule */
	margin-top: 0.64em;
}

/****************************************************************************
*							Spotlight Back Issues							*
****************************************************************************/

#back-issues ul
{
	margin-left: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
}

#back-issues ul li
{
	list-style-type: none;
	margin: 0;
}

#back-issues ul li a
{
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
	color: #303030;
	display: block;
	font-size: 1em;
	/* ↓ to keep a portrait shape */
	height: 15em;
	margin: 0.75em;
	padding: 0.75em 0.5em 0.5em 0.5em;
	/* ↓ center issue number */
	text-align: center;
	/* ↓ remove link underline */
	text-decoration: none;
	max-width: 12em;
}

/*
 issue title
*/
#back-issues ul li a strong
{
	display: block;
	font-size: 1.25em;
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
}

/*
 issue image
*/
#back-issues ul li a img
{
	margin: 0;
}

#back-issues ul li .issue-1 img
{
	/* ↓ manually vertically centre image on issue 1 */
	margin-top: 1.5em;
}
/****************************************************************************
 *																			*
 *	Site styles: postfix.													*
 *																			*
 *	(These styles are added to the end of the common.css file from			*
 *	/common/styles to create the global.css file referenced by all pages).	*
 *																			*
 ****************************************************************************/

/********************
*		Sections	*
********************

- Basic styles
- Module-specific styles
- Get Involved Section
- Header styles
- Navigation
- Footer styles
- Trackers pop up
- Trackers index
- Sites index
- Spotlight index
- News index
- Support index
- Reviews
- Main reviews page
- Countries navigation
- Dynamic Type

 *******************/

/****************************************************************************
 *								Basic styles								*
 ****************************************************************************/

body
{
	background-color: #fff; /* ↓ white */
}

/****************************************************************************
 *							Module-specific styles							*
 ****************************************************************************/

 /***************************************************************************
 *								Get Involved Section						*
 ****************************************************************************/

#get-involved > p
{
	text-align: center;
}

/****************************************************************************
 *								Header styles								*
 ****************************************************************************/

/*
 hide navigation title from view (but show it in outline)
*/
.hide
{
	display: none;
}

/****************************************************************************
 *								Navigation									*
 *			based on the Ind.ie styles, using the CSS from the forum		*
 ****************************************************************************/

.site-navigation
{
	/* ↓ cloud dark */
	background: #005c99;
	/* ↓ cloud */
	border-bottom: 5px solid #007acc;
	position: relative;
	z-index: 4;
}

.site-navigation ul
{
	margin: 0;
	padding: 0;
	/* ↓ flex box to centre children */
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

/* ↓ clearfix alternative to overflow: hidden; */
.site-navigation ul:after
{
	clear: both;
	content: '.';
	display: block;
	height: 0;
	visibility: hidden;
}

.site-navigation li
{
	float: left;
	list-style-type: none;
	margin: 0;
}

.site-navigation li a
{
	color: #fff;
	display: block;
	float: left;
	font-size: 0.9em;
	padding: 0.5em 1em;
	text-decoration: none;
	-moz-transition: background 0.3s ease;
	-ms-transition: background 0.3s ease;
	-o-transition: background 0.3s ease;
	-webkit-transition: all background ease;
	-moz-transition: all background ease;
	-ms-transition: all background ease;
	-o-transition: all background ease;
	transition: all background ease;
}

.site-navigation li a:hover,
.site-navigation li a:active
{
	/* ↓ cloud dark 25% */
	background: #0064A6;
	border-bottom: none;
}

.site-navigation li.home
{
	padding: 0;
}

.site-navigation li.home a
{
	background-image: url("/images/better.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 2em;
	height: 0;
	overflow: hidden;
	padding: 2.48em 0 0 3.3em;
	width: 0;
}

.site-navigation a[aria-selected=true],
.reviews .site-navigation li.home a,
.support .site-navigation li.support a
{
	/* ↓ cloud */
	background-color: #007acc;
	color: #fff;
}

/****************************************************************************
 *								Footer styles								*
 ****************************************************************************/

.site-footer
{
	/* ↓ cloud */
	background-color: #007ACC;
	/* ↓ white */
	color: #fff;
	font-size: 0.85em;
	/* ↓ height of cloud image */
	margin-top: 5em;
	padding-top: 1em;
	/* ↓ helps the :before */
	position: relative;
	text-align: center;
}

.footer-wrap
{
	margin: 0 auto;
	/* ↓ Padding at bottom is offset by paragraph margin */
	padding: 1.75em 1.75em 1.25em 1.75em;
	max-width: 34em;
}

.site-footer:before
{
	background: url('/images/clouds.svg') top center repeat-x;
	/* ↓ doesn’t work on webkit SVGs with repeat-x, so use media queries below */
	background-size: 120em 7em;
	content: '';
	display: block;
	/* ↓ height of image */
	height: 5em;
	left: 0;
	position: absolute;
	/* ↓ bring to top of footer (-height of image) */
	top: -5em;
	/* ↓ width of browser */
	width: 100%;
	/* ↓ push to back */
	z-index: 1;
}

/*
 Because Safari won’t repeat-x on a background SVG with a background-size in ems, we need to switch the CSS when the viewport width exceeds the background width
*/
	/* ↓ ~width of background-size */
	@media only screen and (min-width: 50em)
	{
		.site-footer:before
		{
			background: url('/images/clouds.svg') top center repeat-x;
			/* ↓ fill whole width of browser */
			background-size: 100%, cover;
			/* ↓ ~height of image, extra height so top edge of footer doesn’t show through */
			height: 6.5em;
			/* ↓ bring to top of footer (-height of image) */
			top: -5.7em;
		}

			/* ↓ adjust for new height of cloud image */
		.site-footer
		{
			margin-top: 6.5em;
		}
	}

	@media only screen and (min-width: 60em)
	{
		.site-footer:before
		{
			/* ↓ ~height of image, extra height so top edge of footer doesn’t show through */
			height: 7em;
			/* ↓ bring to top of footer (-height of image) */
			top: -6.7em;
		}

			/* ↓ adjust for new height of cloud image */
		.site-footer
		{
			margin-top: 7em;
		}
	}

	@media only screen and (min-width: 90em)
	{
		.site-footer:before
		{
			/* ↓ ~height of image, extra height so top edge of footer doesn’t show through */
			height: 8em;
			/* ↓ bring to top of footer (-height of image) */
			top: -7.9em;
		}

		.site-footer
		{
			margin-top: 8em;
		}
	}

small
{
	font-size: 0.85em;
}

#privacy small
{
	font-size: 1em;
}

.site-footer h2
{
	font-weight: normal;
	margin-top: 0;
}

.site-footer h2 a
{
	border-bottom: 1px solid #fff;
	display: inline-block;
	text-decoration: none;
}

.site-footer p
{
	margin: 0 0 0.5em 0;
}

.site-footer a
{
	/* ↓ white */
	color: #fff;
	/* ↓ to make balloon logo appear in block */
	display: block;
}

.site-footer small a
{
	/* ↓ override block rule above for links inside the paragraph text */
	display: inline;
}

.indie-logo
{
	margin-bottom: 0.75em;
}

.site-footer .download-on-the-app-store, .site-footer .download-on-mac-app-store
{
	margin-bottom: 0.75em;
}

/****************************************************************************
 *								Trackers pop-up								*
 ****************************************************************************/

#trackers-list
{
	position: relative;
	background: #fff;
	border-radius: 1.4em;
	padding: 1.25em 1.4em;
	width: auto;
	margin: 1.25em auto;
	margin-top: 0;
	max-width: 30em;
}

/***************************************************************************
 *									Home									*
 ****************************************************************************/

/*
 on home, pass the main styles to the inner .home-wrap
*/
body.home main
{
	margin: 0;
	padding: 0;
}

	@media only screen and (min-width: 33.4em)
	{
		body.home main
		{
			padding: 0;
			background-size: 1237px 121px;
			max-width: 100%;
		}
	}

.home-wrap
{
	background: #fff;
	margin: 0.75em 0.5em;
	max-width: 34em;
	padding: 0 0.7em 0.75em 0.7em;
}

	@media only screen and (min-width: 33.4em)
	{
		.home-wrap
		{
			margin: 0.75em auto;
			padding: 0 2.5em 2.1em 2.5em;
		}
	}

.home .device-wrap
{
	/* ↓ intro background colour */
	background-color: #1a9bfc;
	background-image: url('/images/clouds-white.svg'), url('/images/starburst.svg');
	background-position: bottom center, bottom center;
	background-repeat: repeat-x, no-repeat;
	background-size: 644px 61px, auto 1000%;
	padding: 0.75em 0.5em 0 0.5em;
}

	@media only screen and (min-width: 33.4em)
	{
		.home .device-wrap
		{
			background-size: 1237px 120px, auto 1000%;
			padding: 1.25em 0.75em 0 0.75em;
		}
	}

	@media only screen and (min-width: 36.18em)
	{
		.home .device-wrap
		{
			padding: 2.6em 0 0 0;
		}
	}

.home .no-frame
{
	margin: 0 auto;
	max-width: 40em;
	width: 100%;
}

.home-wrap h1
{
	font-family: "Avenir Next", Avenir, Helvetica, sans-serif;
	font-size: 2.5em;
	font-weight: normal;
	margin-bottom: 0;
}

/*
 drop the "web Better." on to a second line on small screens
*/
h1.home span.drop
{
	display: block;
}

	/*
	 don’t drop it once there’s space for it to fit on one line
	*/
	@media only screen and (min-width: 28.78em)
	{
		h1.home span.drop
		{
			display: inline;
		}
	}

.downloads
{
	margin-top: 1.75em;
}

/* ↓ clearfix alternative to overflow: hidden; */
.downloads:after
{
	clear: both;
	content: '.';
	display: block;
	height: 0;
	visibility: hidden;
}

	@media only screen and (min-width: 28.78em)
	{
		.downloads
		{
			margin-top: 1.25em;
			margin-left: auto;
			margin-right: auto;
			/* ↓ width of both badges + 0.85 margin in between */
			width: 22.2em;
		}
	}

.download-on-the-app-store, .download-on-mac-app-store
{
	display: block;
	/* ↓ space between button and title */
	margin-top: 0.75em;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 1.75em;
	/* ↓ don’t exceed the width of the footer */
	max-width: 100%;
}

.download-on-the-app-store, .download-on-the-app-store img
{
	/* ↓ actual button size */
	height: 2.85em;
	/* ↓ actual button size */
	width: 9.5em;
}

.download-on-the-app-store img
{
	/* ↓ actual button size */
	height: 2.85em;
	/* ↓ actual button size */
	width: 9.5em;
	/* ↓ don’t exceed the width of the footer */
	max-width: 100%;
}

.download-on-mac-app-store, .download-on-mac-app-store img
{
	/* ↓ actual button size */
	height: 2.85em;
	/* ↓ actual button size */
	width: 11.78em;
}

.download-on-mac-app-store img
{
	/* ↓ actual button size */
	height: 2.85em;
	/* ↓ actual button size */
	width: 11.78em;
	/* ↓ don’t exceed the width of the footer */
	max-width: 100%;
}

	@media only screen and (min-width: 25.71em)
	{
		.download-on-the-app-store, .download-on-mac-app-store
		{
			float: left;
		}

		.download-on-the-app-store
		{
			margin-right: 0.75em;
		}
	}

	@media only screen and (max-width: 30em)
	{
		.downloads .download-on-mac-app-store
		{
			/*
			 only using max-rule because I don’t want to override this specificity with every other margin rule
			*/
			margin-bottom: 0.75em;
		}
	}

	@media only screen and (min-width: 32.5em)
	{
		.download-on-the-app-store, .download-on-mac-app-store
		{
			/* ↓ space between button and title */
			margin-top: 1.2em;
			margin-bottom: 1.2em;
		}
	}

.download-on-the-app-store img, .download-on-mac-app-store img
{
	margin-top: 0;
}

/*
 undo screenshot styles
*/
main .download-on-the-app-store img, .team-photo
{
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.love
{
	background: center center no-repeat url("/images/love.svg");
	background-size: 1em;
	display: inline-block;
	height: 0;
	overflow: hidden;
	padding-top: 1em;
	padding-left: 1em;
	position: relative;
	top: 0.075em;
	width: 0;
}

.thankyou
{
	margin-top: 1.75em;
	margin-bottom: 0;
	text-align: center;
}

/*
 Photo frame.
 Technique courtesy of http://zurb.com/playground/css3-polaroids
*/
.photo-frame:after
{
	content: attr(title);
}

.photo-frame
{
	background-color: #fff;
	box-shadow: 0 3px 6px rgba(0,0,0,.25);
	/* ↓ dark grey – crest blue in greyscale */
	color: #303030;
	display: block;
	font-family: "Cavorting", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-size: 1.35em;
	margin-top: 1.5em;
	margin-right: auto;
	margin-bottom: 3rem;
	margin-left: auto;
	max-width: 460px;
	padding: 0.75em;
	text-align: center;
	text-decoration: none;
	transform: rotate(-1.5deg);
	width: 80%;
}

.team-photo
{
	margin-top: 0;
	margin-bottom: 0.75em;
}

	@media only screen and (min-width: 33.75em)
	{
		.photo-frame
		{
			width: 50%;
		}

		.team-photo
		{
			margin-bottom: 0.75em;
		}
	}

/****************************************************************************
 *								Trackers index								*
 ****************************************************************************/

/*
 Heading image
*/
h1.trackers, h1.clouds, h1.spotlight, h1.sites, h1.news, h1.support, #trackers-list h4
{
	background-size: 2.5em;
	background-position: top center;
	background-repeat: no-repeat;
	height: 0;
	margin-top: 0.25em;
	overflow: hidden;
	padding-left: 100%;
	padding-bottom: 2.5em;
	width: 0;
}

/*
 Heading image
*/
h1.trackers, #trackers-list h4
{
	background-image: url('../images/tracker.svg');
}

#trackers-list h4
{
	/* ↓ so icon size and spacing matches that of h1s */
	font-size: 2em;
	text-align: center;
}

/****************************************************************************
 *								Sites index								*
 ****************************************************************************/

h1.sites
{
	background-image: url('../images/sites.svg');
}


/****************************************************************************
 *								Spotlight index								*
 ****************************************************************************/

h1.spotlight
{
	background-image: url('../images/spotlight.svg');
}

/****************************************************************************
 *								News index									*
 ****************************************************************************/

h1.news
{
	background-image: url('../images/news.svg');
}

/****************************************************************************
 *								Support index								*
 ****************************************************************************/

h1.support
{
	background-image: url('../images/support-circle.svg');
}

body.support main ul
{
	/* ↓ prevent excess left margins on lists */
	margin-left: 0;
}

body.support main ul li
{
	/* ↓ perfectly align bullets to left edge of text above */
	margin-left: 1.15em;
}

body.support main a
{
	/* ↓ break long URLs on to multiple lines, especially for narrow viewports */
	word-wrap: break-word;
}

/*
 Icons to aid understanding of instructions in Support
 */

.inline-icon
{
	display: inline-block;
	height: 1em;
	/* ↓ vertically-centre the icon */
	margin: 0 0 -0.1em 0;
	width: 1em;
	/* ↓ undo screenshot styles */
	border: none;
	border-radius: 0;
	box-shadow: none;
}

/****************************************************************************
 *									Reviews									*
 ****************************************************************************/

.home .reviews
{
	list-style-type: none;
	margin: 0;
}

/* ↓ clearfix alternative to overflow: hidden; */
.home .reviews:after
{
	clear: both;
	content: '.';
	display: block;
	height: 0;
	visibility: hidden;
}

	@media only screen and (min-width: 46.875em)
	{
		.home .reviews
		{
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-flex-direction: row;
			-ms-flex-direction: row;
			flex-direction: row;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-justify-content: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-align-content: center;
			-ms-flex-line-pack: center;
			align-content: center;
			-webkit-align-items: center;
			-ms-flex-align: center;
			align-items: center;
			/* ↓ make reviews extra wide so 3 fit on the top row */
			margin-left: -1em;
			/* ↓ make reviews extra wide so 3 fit on the top row */
			margin-right: -1em;
		}
	}

.reviews h2
{
	margin-bottom: 1em;
}

.reviews h3
{
	margin-bottom: 0.5em;
}

.reviews h2 + .review:first-of-type h3
{
	margin-top: 0;
}

/*
 same as h3
*/
.home .review
{
	font-size: 1.4em;
	font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
	font-weight: 500;
	margin-top: 1.25em;
	margin-left: auto;
	margin-bottom: 1.75em;
	margin-right: auto;
	padding-left: 0.75em;
	padding-right: 0.75em;
	text-align: center;
}

.review .rating
{
	background: url('../images/stars.svg') center center no-repeat;
	/* ↓ display below title */
	display: block;
	/* ↓ match h3 line height */
	height: 1em;
	margin-top: 0.3em;
	margin-right: auto;
	margin-left: auto;
	/* ↓ hide text */
	text-indent: -3000px;
	/* ↓ centre inside review */
	width: 100%;
}

.review .credit
{
	text-align: center;
}

.home .reviews-link
{
	display: block;
	font-size: 0.75em;
	margin-top: 1.5em;
}

/*
 spans two lines
*/
.home .last-review
{
	margin-bottom: 0;
	max-width: 15em;
}

@media only screen and (min-width: 46.875em)
{

	.home .review
	{
		margin-top: 1em;
		margin-bottom: 0;
		width: 7em;
	}

	.home .last-review
	{
		font-size: 1em;
		-webkit-flex: 0 1 100%;
		-ms-flex: 0 1 100%;
		flex: 0 1 100%;
		margin-top: 2em;
	}

	.home .reviews-link
	{
		margin-top: 18px;
		margin-bottom: 0;
		margin-left: -60px;
		margin-right: -60px;
	}

	.home .last-review .rating
	{
		background-size: 100px;
		/* ↓ match last review line height */
		height: 1em;
		margin-top: 3px;
	}
}

/*
 Add nicer quotes
*/
.quote, .quote-mark
{
	/* ↓ make :before and :after work */
	position: relative;
}

.home .quote::before, .home .quote::after, .quote-mark-left, .quote-mark-right
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #333;
	position: relative;
}

/*
 on the reviews page, don’t oversize the quote marks
*/
.review .quote-mark-left
{
	font-size: 1em;
	width: .3em;
	margin-left: -.3em;
	margin-right: .1em;
}

.review .quote-mark-right
{
	font-size: 1em;
	width: .3em;
	margin-right: -.3em;
	margin-left: .1em;
}

.home .quote::before
{
	content: "“";
	position: absolute;
	top: -0.25em;
	left: -0.35em;
}

.home .quote::after
{
	content: "”";
	position: absolute;
	bottom: -0.25em;
	right: -0.35em;
}

/****************************************************************************
 *							Main reviews page 								*
 ****************************************************************************/

.review .description-short
{
	text-align: center;
}

	@media only screen and (min-width: 34.4em)
	{
		.review .description-short
		{
			margin-right: 40px;
			margin-left: 40px;
		}
	}

/****************************************************************************
 *							Countries Navigation							*
 ****************************************************************************/

h1.app-store-reviews
{
	margin-bottom: 24px;
}

	@media only screen and (min-width: 36.1em)
	{
		h1.app-store-reviews
		{
			margin-bottom: 36px;
		}
	}

.countries-list
{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	list-style-type: none;
	margin-left: 0;
}

.countries-list li
{
	margin-right: 6px;
	margin-left: 6px;
	margin-bottom: 12px;
	width: 60px;
}

.countries-list li a
{
	background: url('../images/flags.svg') 0 0 no-repeat;
	display: block;
	height: 0;
	padding-left: 60px;
	padding-top: 36px;
	overflow: hidden;
	width: 0;
}

.countries-list a[href="#united-states"]
{
	background-position: 0 0;
}

.countries-list a[href="#belgium"]
{
	background-position: -60px 0;
}

.countries-list a[href="#france"]
{
	background-position: -120px 0;
}

.countries-list a[href="#germany"]
{
	background-position: -180px 0;
}

.countries-list a[href="#netherlands"]
{
	background-position: -240px 0;
}

.countries-list a[href="#switzerland"]
{
	background-position: -300px 0;
}

.countries-list a[href="#turkey"]
{
	background-position: -360px 0;
}

.countries-list a[href="#uk"]
{
	background-position: -420px 0;
}

.countries-list a[href="#bulgaria"]
{
	background-position: -480px 0;
}

.countries-list a[href="#slovakia"]
{
	background-position: -540px 0;
}

.countries-list a[href="#denmark"]
{
	background-position: -600px 0;
}

.countries-list a[href="#sweden"]
{
	background-position: -660px 0;
}

.countries-list a[href="#india"]
{
	background-position: -720px 0;
}

.countries-list a[href="#finland"]
{
	background-position: -780px 0;
}

.countries-list a[href="#australia"]
{
	background-position: -840px 0;
}

.countries-list a[href="#canada"]
{
	background-position: -900px 0;
}

.countries-list a[href="#south-africa"]
{
	background-position: -960px 0;
}

.countries-list a[href="#spain"]
{
	background-position: -1020px 0;
}

.countries-list a[href="#brazil"]
{
	background-position: -1080px 0;
}

.countries-list a[href="#norway"]
{
	background-position: -1140px 0;
}

[jakubpawlowicz]

Hey @aral - could you give me any details what do you mean by "minifies correctly"? When I run it via clean-css 4.1.9 I get a warning that there are extra closing braces on lines 237 and 2109, while 3.4 doesn't report them at all. Any ideas?

[jakubpawlowicz]

@aral any updates here?

[jakubpawlowicz]

With clean-css 5.0 I get couple warnings but otherwise it doesn't throw any errors. I'm closing this issue now, but please reopen if needed.