@import "minerva.variables";
@import "minerva.mixins";


// Typography
//
// Our content is predominately text, hence visual hierarchy must be clear.
//
// Styleguide 1.

html {
	// prevent font scaling in landscape in Safari
	-webkit-text-size-adjust: none;
	font-size: 100% * @fontScalingFactor;
}

@bodyLineHeight: 1.4;
@headingLineHeight: 1.3;

body {
	font-family: @fontFamily;
	line-height: @bodyLineHeight;
	color: #252525;
	background: #fff;
}

// Page title
// h1#section_0 is not inside .content...
#section_0 {
	line-height: @headingLineHeight;
}

.content {
	margin: .8em @contentMargin 0;

	// Headings in mobile
	//
	// All headings styled in the content div will be styled like so.
	//
	// Markup:
	// <div class="content">
	//   <h1>Heading 1</h2>
	//   <p>Paragraph of text</p>
	//   <h2>Heading 2</h2>
	//   <p>Paragraph of text</p>
	//   <h3>Heading 3</h3>
	//   <p>Paragraph of text</p>
	//   <h4>Heading 4</h4>
	//   <p>Paragraph of text</p>
	//   <h5>Heading 2</h5>
	//   <p>Paragraph of text</p>
	//   <h6>Heading 2</h6>
	//   <p>Paragraph of text</p>
	// </div>
	//
	// Styleguide 1.1.
	h1, h2, h3, h4, h5, h6 {
		line-height: @headingLineHeight;
		font-family: @fontFamilyHeading;
		padding: @headingMargin 0;
	}

	p {
		margin-bottom: .7em;
	}

	// Thumbnails
	//
	// Thumbnail images should be rendered within a thumb class
	//
	// Markup:
	// <div class="content">
	//   <div class="thumb"><img src="common/images/arrow-left.png"></div>
	// </div>
	//
	// Styleguide 1.2.
	.thumb {
		margin: 15px 0 15px 0;
		border: 1px solid #ccc;
		border-radius: 5px;
		background: #f9f9f9;
		text-align: center;
	}

	ol,
	ul {
		ol,
		ul {
			margin-left: 1em;
		}
	}
}

dl {
	margin-left: 1em;
	dt {
		font-weight: bold;
	}
}

.pre-content h1,
.content h1 {
	font-family: @fontFamilyHeading;
	font-size: 1.8em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.2em;
	font-weight: bold;
}

h4 {
	font-weight: bold;
}

sup {
	vertical-align: super;
}

sub {
	vertical-align: sub;
}

sub,
sup {
	font-size: 0.75em;
}

@media all and (max-width: @wgMFDeviceWidthMobileSmall) {
	body {
		font-size: .8em;
	}

	.content {
		margin: 0 12px;
	}
}

// Blockquotes
//
// Use the blockquote tag for quoted text.
//
// Markup:
// <blockquote>In the end, it's not the years in your life that count. It's the life in your years.</blockquote>
//
// Styleguide 1.3.
blockquote {
	quotes: "\201C" "\201D";
	padding: 1em 0 1em 10px;
	position: relative;

	&:before {
		content: open-quote;
		font-size: 3em;
	}

	&:after {
		font-size: 3em;
		content: close-quote;
		position: absolute;
		right: 0;
		bottom: 0;
	}
}