/**
 * The CSS in this file is for styling the demo page,
 * Meny's critical styles (such as transforms) are applied
 * via JavaScript.
 *
 * See the documentation here: https://github.com/hakimel/meny#meny
 *
 * @author Hakim El Hattab | http://hakim.se
 */

* {
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	overflow: hidden;
}

::-moz-selection {
background-color: yellow;
}

::selection {
background-color: yellow;
}

body {
	background-image: url(../images/cartographer.png);
	background-repeat: repeat;
	color: #1b1d19;
	font-family: Helvetica, Arial, 'Lucida Grande', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 24px;
}

a {
	border-bottom: 1px dotted #222;
	color: #222;
	text-decoration: none;
}
	a:hover {
		border-bottom: none;
		color: #ccc;
	}

.meny {
	display: none;
	padding: 50px 0 0 25px;
	overflow: auto;
	background-image: url(../images/dvsup.png);

	-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
			box-sizing: border-box;
}
	.meny ul {
		list-style-type: none;
		margin: 24px 0 0 20px;
	}
		.meny ul li a {
			display: inline-block;
			font-weight: 600;
			width: 200px;
			border-bottom: none;
			color: #cf5300;
			text-decoration: none;
			-webkit-transition:color 0.1s ease-in-out;
				-moz-transition:color 0.1s ease-in-out;
					-o-transition:color 0.1s ease-in-out;
						transition:color 0.1s ease-in-out;
		}
			.meny ul li a:before {
				content: '\029BE';
				margin-right: 10px;
			}

			.meny ul li a:hover {
				color: yellow;
			}

/**
 * Hint graphic that appears while menu is inactive
 */
.meny-arrow {
	position: absolute;
	z-index: 10;
	font-size: 20px;
	color: #cf5300;

	-webkit-transition: opacity 0.4s ease 0.4s;
		-moz-transition: opacity 0.4s ease 0.4s;
		-ms-transition: opacity 0.4s ease 0.4s;
		-o-transition: opacity 0.4s ease 0.4s;
			transition: opacity 0.4s ease 0.4s;
}
	.meny-left .meny-arrow {
		left: 14px;
		top: 46%;
	}
	.meny-active .meny-arrow {
		opacity: 0;

		-webkit-transition: opacity 0.2s ease;
			-moz-transition: opacity 0.2s ease;
			-ms-transition: opacity 0.2s ease;
			-o-transition: opacity 0.2s ease;
				transition: opacity 0.2s ease;
	}

/**
 * Main contents area
 */
.contents {
	background: #fff;
	padding: 40px 70px;
	width: 100%;
	height: 100%;
	overflow-y: auto;

	-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
			box-sizing: border-box;
}
	.contents>article {
		border-top: 1px solid #ccc;
		max-width: 525px;
		padding-top: 1em;
	}
	.contents p {
		margin-bottom: 2em;
	}

/**
 * Additional styles
 */
 header	 {
	padding-bottom: 9px;
 }

 h3 a {
	border-bottom: none;
	color: #000;
 }

	h3 a:hover {
		border-bottom: 9px solid #cf5300;
		color: #000;
		padding-bottom: 4px;
	}

.live {
	color: yellow;
}

	.live:before {
		content:'\029BF';
		margin-right: 10px;
	}

.bib {
	margin-bottom: 1em !important;
	padding-left: 2em;
	text-indent: -2em;
}

.indent {
	margin: 2em;
}

.outdent {
	margin-left: 2em !important;
	text-indent: -2em;
}

h4:first-child {
	margin-top: 0;
}

h4 {
	margin: 3em 0 1em 0;
}

ul {
	list-style-position: inside;
	list-style-type: circle;
	margin: 24px 2em;
}

.rule {
	border-bottom: 1px solid #ccc;
	margin-bottom: 2em;
}

.translation {
	color: #999;
	margin-left: 2em;
}

/* Slideshow */

.slideshow {
	position: relative;
	margin: 0 0 4em 0;
	height: 480px;
}

.slideshow li {
	position: absolute;
	left: ;
	top: 1em;
	width: 320px;
	height: 480px;
	display: none;
	list-style: none;
}
.slideshow li:first-child {
	display: block;
}

.scrollToTop {
    background-color: #ccc;
    border-bottom: none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    color: white;
    display: none;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 0 1em;
    position: fixed;
    right: 24px; bottom: 20px;
    text-align: center;
}

.scrollToTop:hover {
    color: red;
}