div[slidableLayout]
{
	position:absolute;
	left:0px;
	width:99%;	
	height:100%;
}
div[sublayout]
{
	position:absolute;
	background-color:#333;
	width:12rem;
	height:100%;
	z-index:-1;	
	top:0;
	left:0;
	color:#fff;
	overflow-y:auto;
}
div[sublayout] ul
{
	position: absolute;
	top: -2.2rem;
	left: 0.25rem;
	list-style: outside none none;
	right: 0rem;
	width: 75%;
	z-index: 0;
}
div[sublayout] a li span
{
	position:relative;
	top:30%;
}

div[sublayout] li
{
	position:relative;
	margin-bottom:-1.2rem;
	right:2em;	
	text-align:center;
	height:4rem;
	border-bottom: medium double #ccc;
}

div[sublayout] li:active	{
	background: linear-gradient(#00c8f0, #00aac8);	/*al pulsar se pone el degradado*/
}

div[sublayout] a
{	
	position:relative;
	padding:5px;
	color:#fff;
	text-decoration:none;
}

div[layout]
{
	z-index:1;
	width:100%;
	top:0;
	position:absolute;
	left:0%;
	height:100%;
	transition:all 0.5s ease-in-out;
	background-color:#000;	
}
div[layout].active
{
	position:absolute;
	left:10.5rem;
}