/**
 * 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: //github.com/hakimel/meny#meny
 *
 * @author Hakim El Hattab | //hakim.se
 */

* {
	margin: 0;
	padding: 0;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0px 0px 2px 3px rgba(0,0,0,0.6);
	background-color: #F5F5F5;
	border: 1px solid black;
	border-radius: 5px;
}

::-webkit-scrollbar {
	width: 13px;
	height: 13px;
	border-radius: 1px;
	background-color: #CCCCCC;
}

::-webkit-scrollbar-thumb {
	border: 3px ridge #f3f3f3;
	border-radius: 5px;
	background-color: #000;
	background-image: -webkit-gradient(linear, 99% 0%, 0% 99%, from(#000000), to(#000000), color-stop(.5,skyblue)); 
}

::-webkit-scrollbar-thumb:active {
	background-image: -webkit-gradient(linear, 99% 0%, 0% 99%, from(skyblue), to(skyblue), color-stop(.5,#000000));
}

::-webkit-scrollbar-button {
	border-radius: 1px;
	border: 0.1px solid #000;
	width: 25px;
	height: 25px;
	background-color: #CCCCCC;
}

/*
	html::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
		border-radius: 5px;
		background-color: #080510;
	}

	html::-webkit-scrollbar {
		width: 5px;
		background-color: #080510;
	}

	html::-webkit-scrollbar-thumb {
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-color: #D62929;
	}
	
*/

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

body {
	background-color: #222;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
	background-repeat: repeat;

	font-family: 'Lato', Helvetica, sans-serif;
	font-size: 16px;
	color: #222;
}

	a {
/*		color: #c75c75; */
		color: grey;
		text-decoration: none;
		-webkit-transition: 2.4s color ease-in;
		   -moz-transition: 2.4s color ease-in;
			-ms-transition: 2.4s color ease-in;
			 -o-transition: 2.4s color ease-in;
				transition: 2.4s color ease-in;
	}
	a:hover {
		color: cyan;
		opacity: 0.9;
		-webkit-transition: 0.2s color ease-out;
		   -moz-transition: 0.2s color ease-out;
			-ms-transition: 0.2s color ease-out;
			 -o-transition: 0.2s color ease-out;
				transition: 0.2s color ease-out;
		font-weight: bold;
	
	}
		
	a:hover::after {
		color: royalblue;
		opacity: 0.9;
		-webkit-transition: 0.2s color ease-out;
		   -moz-transition: 0.2s color ease-out;
			-ms-transition: 0.2s color ease-out;
			 -o-transition: 0.2s color ease-out;
				transition: 0.2s color ease-out;
		font-weight: bold;
	
	}


	h1,
	h2 {
		font-size: 24px;
	}

	.meny {
		display: none;
		padding: 20px;
		overflow: auto;
		background: #333;
		color: #eee;

		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
	}

	.meny ul {
		margin-top: 0;
		padding: 0;
		list-style-type: none;
	}

	
	.meny ul li {
		display: inline-block;
		width: 200px;
		list-style: none;
		font-size: 20px;
		padding: 3px 10px; 
		font-weight: strong;
	}
	
	.meny ul li:before {
		content: '';
		margin-right: 5px; 
		color: rgba( 255, 255, 255, 0.2 );
	}
	
	
/*	.meny a {
		display: block;
		color: #FFF;
		background-color: #036;
		width: 9em;
		padding: 3px 12px 3px 8px;
		text-decoration: none;
		border-bottom: 1px solid #fff;
		font-weight: bold;
	}

	.meny a:hover {
		background-color: #369;
		color: #FFF;
	}

	.meny li li a {
		display: block;
		color: #FFF;
		background-color: #69C;
		width: 9em;
		padding: 3px 3px 3px 17px;
		text-decoration: none;
		border-bottom: 1px solid #fff;
		font-weight: normal;
	}

	
	
/**
 * Hint graphic that appears while menu is inactive
 */
.meny-arrow {
	position: absolute;
	z-index: 10;

	border: 10px solid transparent;

	-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: 50%;
		margin-top: -16px;
		border-left: 16px solid #333;
	}
	.meny-right .meny-arrow {
		right: 14px;
		top: 50%;
		margin-top: -16px;
		border-right: 16px solid #333;
	}
	.meny-top .meny-arrow {
		left: 50%;
		top: 14px;
		margin-left: -16px;
		border-top: 16px solid #333;
	}
	.meny-bottom .meny-arrow {
		left: 50%;
		bottom: 14px;
		margin-left: -16px;
		border-bottom: 16px solid #333;
	}
	.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: #eee;
	padding: 20px 40px;
	width: 100%;
	height: 100%;
	overflow-y: auto;

	-webkit-overflow-scrolling: touch;
	-webkit-transform-style: preserve-3d;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
	.contents>article {
		max-width: 400px;
	}
	.contents p {
		margin: 10px 0 10px 0;
		font-size: 16px;
		line-height: 1.32;
	}
	.contents small {
		display: block;
		margin-top: 10px;
		padding-top: 10px;
		color: #333;
		font-size: 0.85em;
		border-top: 1px dashed #ccc;

		-webkit-text-size-adjust: none;
	}
	.contents .sharing {
		position: absolute;
		bottom: 20px;
	}

	.dead-center-no-content {
			background: black;
			color: white;
			border-radius: 1em;
			padding: 1em;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%)
	}	
	.dead-center-content {
			border-radius: 1em;
			padding: 1em;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-right: -50%;
			transform: translate(-50%, -50%)
	}