html { font-size: 62.5%; } 
body { background: url('../images/background-paper.png') #fffefe; color: #333; font-family: 'Merriweather', serif; font-size: 1.8rem; line-height: 1.5; margin: 0; }
a {}
	a:link, a:visited { color: #6da81b; }
	a:hover, a:active { color: #333; }
	#toc a { margin-left: 4px; }
	.reference a:link, .reference a:visited { color: #4e4ec2; }
	.reference a:hover, .reference a:active { color: #fff; }
code { color: #4e4ec2; font-family: 'Monaco', monospace; white-space: nowrap; }
div {}
	.container { margin: 50px auto; width: 70%; }
	.reference { background: #aebde3; border: 1px solid #8181c2; margin: 1em 0; padding: 20px 30px; }
	.responsive-container { height: 0; padding: 0 0 48% 0; position: relative; }
	.responsive-container iframe, .responsive-container object, .responsive-container embed {
	    height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
	.stripe { background: #ccc; overflow: auto; }
	.syntaxhighlighter { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
		margin: 2em 0 !important; padding: 20px 30px; }
	.task { background: #ccc; margin-top: 40px; padding: 20px 30px; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; margin: 0; }
	h1 { font-size: 5.0rem; line-height: 1; margin-bottom: 50px; }
	h2 { font-size: 4.0rem; margin-bottom: 10px; }
	h3 { color: #4e4ec2; font-size: 3.5rem; margin-bottom: 1em; }
	h4 { font-size: 3.0rem }
	h5 { font-size: 2.5rem; }
	h6 { font-size: 2.0rem; }
	h2 span, h3 span { color: #a1a1c2; margin-right: 5px; }
hr { background: #ccc; border: 0; color: #ccc; height: 1px; margin: 50px 0; }
img { max-width: 100%; }
#toc ol { list-style: none; }
	ol ol { margin: 10px 0 16px 0; }
	ol ol li { margin-left: 10px; }

.sprite { background-image: url('../images/sprite.png'); background-repeat: no-repeat; display: inline-block; }
.number { height: 60px; vertical-align: -14px; width: 60px; }
.one { background-position: 0 0; }
.two { background-position: -60px 0; }
.three { background-position: -120px 0; }
.four { background-position: -180px 0; }
h3 span.icon { height: 80px; margin-right: 18px; vertical-align: -28px; width: 80px; }
.one1 { background-position: 0 -60px; }
.one2 { background-position: -80px -60px; }
.one3 { background-position: -160px -60px; }
.one4 { background-position: -320px -60px; }
.one5 { background-position: -240px -60px; }
.one6 { background-position: -400px -60px; }
.one7 { background-position: -480px -60px; }
.two1 { background-position: 0 -140px; }
.two2 { background-position: -80px -140px; }
.two3 { background-position: -320px -140px; }
.two4 { background-position: -160px -140px; }
.two5 { background-position: -240px -140px; }
.two6 { background-position: -400px -140px; }
.two7 { background-position: -480px -140px; }
.three1 { background-position: 0 -220px; }
.three2 { background-position: -80px -220px; }
.three3 { background-position: -160px -220px; }
.three4 { background-position: -240px -220px; }
.three5 { background-position: -320px -220px; }
.three6 { background-position: -400px -220px; }
.three7 { background-position: -480px -220px; }
.four1 { background-position: 0 -300px; }
.four2 { background-position: -80px -300px; }
.four3 { background-position: -160px -300px; }
.four4 { background-position: -240px -300px; }
.four5 { background-position: -320px -300px; }
.four6 { background-position: -400px -300px; }
.four7 { background-position: -480px -300px; }

@media (max-width: 979px) {
	.sprite { float: left; }
	h2 span.number { margin-right: 18px; vertical-align: 0; }
	h3 span.icon { vertical-align: 0; }
	h2:after, h3:after { clear: both; content: ""; display: table; }
	h1 { font-size: 34px; }
	h2 { font-size: 30px; line-height: 30px; }
	h3 { font-size: 30px; line-height: 30px; }
	h4 { font-size: 26px; }
	h5 { font-size: 22px; }
	h6 { font-size: 18px; }
	#toc ol { padding: 0; }
}

@media (max-width: 1200px) {
	.container { width: 90%; }
	code { white-space: normal; }
}