body { background: #5870dc; font-family: Lato; font-size: 18px; height: 100%; margin: 0; overflow: hidden; padding: 0 }
input,textarea { font-family: Lato; font-size: 18px }

div#main { background: white; border-left: 6px solid #ddd; box-shadow: 0 0 100px rgba(0, 0, 0, 0.2); box-sizing: border-box; height: 100%; margin: 0 0 0 auto; max-width: 906px; overflow: auto; padding: 0 60px 0 40px; position: relative }
div#closeMainButton { color: rgba(0, 0, 0, 0.4); cursor: pointer; font-size: 50px; line-height: 50px; position: fixed; right: 0; text-align: center; top: 0; width: 50px; z-index: 1000 }
div#closeMainButton:hover { color: rgba(0, 0, 0, 0.6) }
div#main > div.pageBottom { height: 200px }

/* Text */

h1 { font-size: 30px; font-weight: 800; margin: 0 0 30px 0; padding-top: 60px; position: relative }
h1.chapter { font-size: 50px; font-variant: small-caps; font-weight: 800; line-height: 40px; margin: 60px 0 30px 0; page-break-before: always; }
h2 { font-size: 22px; font-weight: 800; margin: 40px 0 20px 0; position: relative }
h3 { font-size: 18px; font-weight: bold; margin: 30px 0 12px 0 }
h4 { font-size: 18px; font-weight: bold; margin: 30px 0 12px 0 }
p { font-size: 16px;  margin: 12px 0 }
p.gap { margin-top: 30px }
pre { font-family: 'Source Code Pro'; margin: 12px 0 }
a { color: #116dcc; text-decoration: none }
a:hover { text-decoration: underline }
code { font-family: 'Source Code Pro' }
var { font-family: 'Source Code Pro'; font-style: normal }
code.box, var.box, span.box { background: rgba(0, 0, 0, 0.1); border-radius: 2px; padding: 1px 4px }

ul { list-style-type: square; margin: 12px 0; padding-left: 40px }
li { margin: 8px 0 }

h1 > svg.tick { cursor: pointer; position: absolute; right: 0; top: 64px }


div.footnotes { color: #999; font-size: 16px; margin: 20px 0 }
div.footnotes a { color: #444 }

div.tbd { background: #ecc; border-radius: 3px; color: #660808; font-size: 16px; padding: 20px }

/* Tables */
table.shades { border-spacing: 0; box-sizing: border-box; margin: 10px 0 }
table.shades th { background: #ddd; font-weight: bold; padding: 5px 20px; text-align: left }
table.shades td { background: #f5f5f5; padding: 5px 20px; text-align: left }
table.shades tr:nth-child(2n+1) td { background: #eee }
table.shades tr.i0 td { background: #f5f5f5 }
table.shades tr.i1 td { background: #eee }
table.shades tr.gap td { background: none }
table.shades.large th { padding: 10px 20px }
table.shades.large td { padding: 10px 20px }
table.shades.compact th { padding: 5px 5px }
table.shades.compact td { padding: 5px 5px }
div.tablenote { color: #999; font-size: 18px; margin: 10px 0 }

/* Source code */
pre.cCode { margin: 12px 0; text-align: left }
pre.commandLineText { margin: 12px 0; text-align: left }

/* Examples with results */
div.example { margin: 10px 0; position: relative }
div.example > img { cursor: pointer; position: absolute; right: 10px; top: 10px }
div.example pre.cCode { background: #eee; margin: 0; padding: 20px }
div.example pre.output { background: #444; color: white; margin: 0; overflow-x: auto; padding: 20px }
div.example pre.output.error { color: #f99 }
div.example div.cCode { background: #eee; overflow-x: auto; padding: 20px 0 }
div.example div.cCode pre { margin: 0; padding: 0 20px }
div.example div.cCode pre.highlight { border-left: 10px solid #444; padding: 0 20px 0 10px }

/* Gray boxes */
div.white { margin: 10px 0; overflow: auto; padding: 0 20px }
div.gray { background: #eee; margin: 10px 0; overflow: auto; padding: 20px }
div.gray > :first-child { margin-top: 0 }
div.gray > :last-child { margin-bottom: 0 }
pre.gray { background: #eee; margin: 10px 0; overflow: auto; padding: 20px }

/* Verification boxes */
div.verification { background: #eec; color: #666608; font-size: 16px; overflow: auto; padding: 20px }
div.verification tt { font-weight: bold }
div.verification tt.box { background: rgba(0, 0, 0, 0.1); border-radius: 2px; padding: 1px 4px }
div.verification > :first-child { margin-top: 0 }
div.verification > :last-child { margin-bottom: 0 }
div.verification li { margin: 6px 0 }
div.verification ul:last-child { margin-bottom: 0 }
div.verification h4 { font-size: 16px }
div.verification pre { margin-left: 20px }

/* Solutions (not activated any more) */
div.showSolution { margin: 12px 0 20px 0 }
div.showSolution.open { margin: 12px 0 0 0 }
div.showSolution div { background: #bbdd99; color: #366608; cursor: pointer; display: inline-block; font-weight: bold; line-height: 36px; margin-right: 10px; padding: 0 20px; vertical-align: top }
div.showSolution div.open { background: #99cc66; border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
div.solution { border: 10px solid #99cc66; display: none; margin-bottom: 20px }
div.solution.open { display: block }
div.solution div.cCode { padding: 20px 0 }
div.solution div.cCode pre { margin: 0; padding: 0 20px }
div.solution div.cCode pre.highlight { border-left: 10px solid #37531b; padding: 0 20px 0 10px }
div.solution pre.cCode { margin: 20px }
div.solution pre.output { background: #37531b; color: white; margin: 0; padding: 20px }

/* Buttons */
div.button { background: #06c; border-radius: 3px; color: white; cursor: pointer; display: inline-block; height: 40px; line-height: 40px; margin-right: 10px; padding: 0 16px }
div.button.main { font-weight: bold }
div.button.small { color: white; cursor: pointer; font-size: 15px; height: 30px; line-height: 30px; margin-right: 10px; padding: 0 12px }
div.button.remove { background: #c00; border-radius: 15px; height: 30px; line-height: 30px; padding: 0 0; text-align: center; width: 30px }

/* Exams */
h2 > div.points { color: #999; font-weight: bold; position: absolute; right: 0; top: 0 }

/* Welcome */
div#welcomeScreen { background: #d1c197; height: 100%; left: 0; overflow: auto; position: fixed; top: 0; width: 100%; z-index: 100 }
div#welcomeScreen > div { height: 900px; overflow: hidden }
div#welcomeScreen div.background { position: relative }
div#welcomeScreen div.background > svg { left: -2000px; position: absolute; top: -2200px }
div#welcomeScreen div.foreground { margin: 0 auto; max-width: 500px; position: relative; text-align: center }
div#welcomeScreen div.foreground > svg.panel { display: block; margin: 100px auto 50px auto }
div#welcomeScreen div.foreground div.button { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); font-weight: bold; padding: 0 30px }
div#welcomeScreen div.foreground > div.notes { color: #666; margin-top: 10px; padding: 40px 20px }

@media screen and (min-width:900px) {
	div#welcomeScreen { align-items: center; display: flex; justify-content: center; overflow: hidden }
	div#welcomeScreen > div { background: black; height: 2px; overflow: visible; position: relative; width: 2px }
	div#welcomeScreen div.background {  }
	div#welcomeScreen div.background svg { left: -2500px; position: absolute; top: -2500px }
	div#welcomeScreen div.foreground { left: -450px; position: absolute; text-align: center; top: 30px; width: 500px }
	div#welcomeScreen div.foreground svg.panel { left: 600px; margin: 0; position: absolute; top: -250px }
	div#welcomeScreen div.foreground div.button { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); font-weight: bold; padding: 0 30px }
	div#welcomeScreen div.foreground div.notes { margin-top: 10px }
}

/* Small screens */

@media screen and (max-width:906px) {
	div#main { border-left: none; margin: 0 }
}

@media screen and (max-width:800px) {
	div#main { padding: 0 20px 200px 20px }
	div#main > div.pageBottom { height: 100px }
	div.white { margin-left: -20px; margin-right: -20px }
	div.gray { margin-left: -20px; margin-right: -20px }
	pre.gray { margin-left: -20px; margin-right: -20px }
	div.example { margin-left: -20px; margin-right: -20px }
	div.verification { margin-left: -20px; margin-right: -20px }
}


/* Print */

@media print {

	body * { visibility: hidden; transform: scale(1); transform-origin:top center; } 
	div#main * { visibility: visible } 
	div#main { border-left: none; box-shadow: none; visibility: visible; background: white; height: auto; max-width: 906px; overflow: auto;  position: absolute; padding: 0 60px 0 210px; }

	a[href]:after {
		content: ' [' attr(href) ']';
	}
	
	a[href].executable:after {
		content: none;
	}

	a[href].executable {
		text-decoration: none;
	}


	h1 { counter-increment: section; font-size: 20px; font-weight: 800; margin: 0 0 30px 0; padding-top: 60px; position: relative; page-break-after: avoid }
	h1.chapter { counter-reset: section; counter-increment: chapter; font-size: 50px; font-variant: small-caps; font-weight: 800; line-height: 40px; margin: 60px 0 30px 0; page-break-before: always; }
	h1 > svg.tick {width: 0px;}
	h2 { font-size: 16px; font-weight: 800; margin: 40px 0 20px 0; position: relative; page-break-after: avoid }
	h3 { font-size: 12px; font-weight: bold; margin: 30px 0 12px 0; page-break-after: avoid }
	h4 { font-size: 12px; font-weight: bold; margin: 30px 0 12px 0; page-break-after: avoid }
	h1.chapter:before {
	  content: counter(chapter)". ";
	}
	h1:before {
	  content: counter(chapter)"." counter(section)" ";
	}

	p { margin: 10px 0 }
	p.gap { margin-top: 20px }
	pre {font-size: 16px; font-family: 'Source Code Pro'; margin: 10px 0;  page-break-inside: avoid }
	svg {transform: scale(0.7); transform-origin: top left; page-break-inside: avoid }
	img {transform: scale(0.7); transform-origin: top left; page-break-inside: avoid }
	table {font-size: 16px; page-break-inside: avoid }
	div#main > div.pageBottom { height: 0px }

}

/* Fonts */

@font-face {
	font-family: Lato;
	font-style: normal;
	font-weight: normal;
	src: url(LatoLatin-Regular.woff) format('woff'), url(LatoLatin-Regular.woff2) format('woff2')
	}

@font-face {
	font-family: Lato;
	font-style: normal;
	font-weight: bold;
	src: url(LatoLatin-Bold.woff) format('woff'), url(LatoLatin-Bold.woff2) format('woff2')
	}

@font-face {
	font-family: Lato;
	font-style: normal;
	font-weight: 300;
	src: url(LatoLatin-Light.woff) format('woff'), url(LatoLatin-Light.woff2) format('woff2')
	}

@font-face {
	font-family: Lato;
	font-style: normal;
	font-weight: 800;
	src: url(LatoLatin-Black.woff) format('woff'), url(LatoLatin-Black.woff2) format('woff2')
	}

@font-face {
	font-family: Lato;
	font-style: italic;
	font-weight: normal;
	src: url(LatoLatin-Italic.woff) format('woff'), url(LatoLatin-Italic.woff2) format('woff2')
	}

@font-face {
	font-family: Lato;
	font-style: italic;
	font-weight: bold;
	src: url(LatoLatin-BoldItalic.woff) format('woff'), url(LatoLatin-BoldItalic.woff2) format('woff2')
	}

@font-face {
	font-family: 'Source Code Pro';
	font-style: normal;
	font-weight: normal;
	src: url(SourceCodePro-Regular.woff2) format('woff2')
	}

@font-face {
	font-family: 'Source Code Pro';
	font-style: italic;
	font-weight: normal;
	src: url(SourceCodePro-Italic.woff2) format('woff2')
	}

@font-face {
	font-family: 'Source Code Pro';
	font-style: normal;
	font-weight: bold;
	src: url(SourceCodePro-Bold.woff2) format('woff2')
	}

@font-face {
	font-family: 'Source Code Pro';
	font-style: italic;
	font-weight: bold;
	src: url(SourceCodePro-BoldItalic.woff2) format('woff2')
	}

@font-face {
	font-family: 'Source Code Pro';
	font-style: normal;
	font-weight: 600;
	src: url(SourceCodePro-SemiBold.woff2) format('woff2')
	}

@font-face {
	font-family: 'Source Code Pro';
	font-style: italic;
	font-weight: 600;
	src: url(SourceCodePro-SemiBoldItalic.woff2) format('woff2')
	}