body {
   /*  height: auto;
    position: relative; */
	padding: 0;
	margin: 0;
	height: 100%;
    /* Required for static Slidebars to function properly. */
}

/* main page */
  article
{
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 15px 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%;  
	min-height: 400px;
	
/* 	position: fixed;
	width: 70%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 30px 15%;
	background-color: #fff;
	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%; */
} 

.dashboard-wrapper article{
	padding: 15px 5%; 
}


article:after
{
	position: absolute;
	content: ' ';
	left: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	background-image: -webkit-linear-gradient(right, #c1d0df 0%, transparent 100%);
	background-image: -moz-linear-gradient(right, #c1d0df 0%, transparent 100%);
	background-image: -ms-linear-gradient(right, #c1d0df 0%, transparent 100%);
	background-image: -o-linear-gradient(right, #c1d0df 0%, transparent 100%);
	background-image: linear-gradient(right, #c1d0df 0%, transparent 100%);
	pointer-events: none;
} 

/* navigation */
 #nav-a
{
	position: absolute;
	left: -15em;
	top: 0;
    bottom: 0;
	background-color: #FFFFFF;
	border-right: 50px solid #336699;
	box-shadow: 6px 0 5px -2px #c1d0df; 
	z-index: 1;
	cursor: pointer;
}
 #nav-a:after
{
	position: absolute;
	display: table;
	content: ' ';
	width: 0;
	height: 0;
	right: -70px;
	top: 50%;
	border-width: 15px 10px;
	border-style: solid;
	border-color: transparent transparent transparent #336699;
} 
#nav-a ul
{
	width: 14em;
	height: 100%;
	list-style-type: none;
	margin: 0;
	padding: 1em;
}
#nav-a a:link, #nav-a a:visited
{
	display: block;
	width: 100%;
	font-weight: bold;
	line-height: 2.4em;
	text-indent: 10px;
	text-decoration: none;
	color: #2C3E50;
	border-radius: 4px;
	outline: 0 none;
}
#nav-a a:hover, #nav-a a:focus
{
	color: #fff;
	background-color: #336699;/* 
	text-shadow: 0 0 4px #fff; */
	box-shadow: inset 0 2px 2px #c1d0df;
} 

/* hovering */
article, article:after, #nav-a, #nav-a *
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}

#nav-a:hover
{
	left: 0;
	height: 100%;
}

#nav-a:hover ~ article
{
	-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
	-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
	-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
	-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
	transform: translateX(16em) perspective(600px) rotateY(10deg);
}

#nav-a:hover ~ article:after
{
	left: 60%;
}