@charset "UTF-8";

/* 
 * Copyright 2013, The Thymeleaf Project (http://www.thymeleaf.org/)
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *     http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Tutorial styles for the screen (HTML) form
 */


/* ELEMENT SELECTORS */
/* ========================================================================== */

@media (min-width: 43.75em) {
	body {
		border-left: none;
	}
}

section.level1 {
	background-color: white;
}


/* COMPONENTS */
/* ========================================================================== */

@media (min-width: 43.75rem) {
	.tutorial {
		display: flex;
		height: 100vh;
	}
}

.hero-header-title {
	font-size: 3em;
}

@media (min-width: 43.75rem) {
	.hero-header-title {
		font-size: 4em;
	}
}

@media (min-width: 50rem) {
	.hero-header-title {
		font-size: 5em;
	}
}

@media (min-width: 56.25rem) {
	.hero-header-title {
		font-size: 6em;
	}
}

.hero-header-logo {
	width: 4rem;
}

@media (min-width: 43.75rem) {
	.hero-header-logo {
		width: 6rem;
	}
}

@media (min-width: 50rem) {
	.hero-header-logo {
		width: 7rem;
	}
}

@media (min-width: 56.25rem) {
	.hero-header-logo {
		width: 8em;
	}
}

.tutorial-title {
	margin-left: 0.5em;
	margin-right: 0.5em;
}

@media (min-width: 43.75rem) {
	.tutorial-title {
		font-size: 2.5em;
		margin-top: 1em;
		margin-bottom: 2em;
	}
}

@media (min-width: 50rem) {
	.tutorial-title {
		font-size: 3em;
	}
}


/* Table of contents */
/* -------------------------------------------------------------------------- */

@media (min-width: 43.75rem) {
	.toc-wrapper {
		height: 100vh;
		overflow-y: auto;
		position: static;
		width: 25%;
	}
}

#toc {
	font-size: 0.9em;
	height: 0;
	overflow: hidden;
	transition: 200ms height;
}

@media (min-width: 43.75rem) {
	#toc {
		height: auto;
		overflow: auto;
	}
}

#toc.show-toc {
	box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.6);
	height: 28.125rem;
	max-height: calc(95vh - 5.5rem);
	overflow: auto;
}

#toc a {
	border-bottom: none;
	color: #333333;
	display: block;
	padding: 0.5em;
}

#toc a:hover,
#toc a:active {
 background-color: #005f0f;
 border-bottom: none;
 color: white;
}

#toc ul {
	list-style-type: none;
	margin: 0;
}

#toc .level1 {
	padding: 0;
}

#toc .level1 > li {
	border-bottom: 1px solid #ececec;
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
}

#toc .level2 {
	font-size: 0.9em;
	padding-left: 0.5em;
}

@media (min-width: 62.5em) {
	#toc .level2 {
		padding-left: 1em;
	}
}

#toc .level3 {
	padding-left: 0.5em;
}

@media (min-width: 62.5em) {
	#toc .level3 {
		padding-left: 1em;
	}
}

#toc .level4 {
	padding-left: 0.5em;
}

@media (min-width: 62.5em) {
	#toc .level4 {
		padding-left: 1em;
	}
}


/* Content */
/* -------------------------------------------------------------------------- */

.content-wrapper {
	background-color: #ececec;
	padding-top: 3em;
}

@media (min-width: 43.75rem) {
	.content-wrapper {
		border-left: 0.25em solid #005f0f;
		height: 100vh;
		overflow-y: auto;
		padding-top: 0;
		width: 75%;
	}
}

@media (min-width: 62.5rem) {
	.content-wrapper {
		border-left-width: 0.5em;
	}
}