article

{

	position: fixed;

	width: 70%;

	left: 0;

	top: 0;

	right: 0;

	bottom: 0;

	padding: 30px 15%;



	overflow: auto;

	z-index: 0;

	-webkit-transform-origin: 0 50%;

	-moz-transform-origin: 0 50%;

	-ms-transform-origin: 0 50%;

	-o-transform-origin: 0 50%;

	transform-origin: 0 50%;

}









nav

{

	position: fixed;

	left: -19.1em;

	/*min-width:290px;*/ /*EXPERIMENTAL, REMOVE IF PROBLEMS */

	top: 0;

	bottom: 0;

	background-color: #000;

	border-right: 12px solid #000;

	box-shadow: 4px 0 5px rgba(0,0,0,0.2);

	z-index: 1;

	cursor: pointer;

}



nav:after

{

	position: absolute;

	content: ' ';

	width: 0;

	height: 0;

	right: -41px;

	top: 50%;

	z-index:-61;

	border-width: 25px 15px;

	border-style: solid;

	border-color: transparent transparent transparent #D5AB00; /*ARROW */

}



nav H1 {

	

	margin-top: 0px;

	margin-left: 6px;

	margin-bottom:0px;

	color:#D5AB00;

	font-size: 100%;

	font-family: 'Cardo', serif;

	font-weight: 700;

			text-shadow: 2px 2px #000;

			

}



nav a {text-decoration:none;}

nav a:hover {text-decoration:underline;}



nav ul

{

	width: 14em;

	list-style-type: none;

	margin: 0;

	padding: 1em;

}



nav ul li{margin: 0 0 5px 0; }



article, article:after, nav, nav *

{

	-webkit-transition: all 600ms ease;

	-moz-transition: all 600ms ease;

	-ms-transition: all 600ms ease;

	-o-transition: all 600ms ease;

	transition: all 600ms ease;

}



nav:hover

{

	left: 0;

}







nav:hover ~ article:after

{

	left: 60%;

}





@media only screen and (min-width : 0px) and (max-width : 599px) /* Set Max-Width so that it doesnt count everything above minwidth */

{

nav ul li {margin: 0 0 0px 0; font-size:10pt; }	

	

}