/* Vertical Icons Menu (Theme 1) - Animation 1 */
body{
	margin:0;
	}
/* ========== MAIN DIV THAT HOLDS THE ENTIRE MENU ========== */
.menu{
	width:38px;
	position:fixed;
	top:31%;
	left:0;
	background:#333;
	-webkit-box-shadow:1px 0 4px #A4A4A4;
	-moz-box-shadow:1px 0 4px #A4A4A4;
	box-shadow:1px 0 4px #A4A4A4;
	}
/* ========== DIV THAT HOLDS MAIN LINKS ========== */	
.menu ul{
	margin:0;
	padding:0;
	list-style:none;
	}	
/* ========== MAIN LINKS ========== */	
.menu ul li{
	position:relative;
	}
.menu > ul > li > a{
	display:block;
	width:38px;
	height:34px;
	color:#FFF;
	text-decoration:none;
	overflow:hidden;
	-webkit-transition:all 200ms linear 10ms;
	-moz-transition:all 200ms linear 10ms;
	-ms-transition:all 200ms linear 10ms;
	-o-transition:all 200ms linear 10ms;
	transition:all 200ms linear 10ms;
	}
/* ========== ICONS ========== */		
.menu ul li a i{
	width:38px;
	height:100%;
	float:left;
	font-size:21px;
	line-height:34px;
	text-align:center;
	}
/* ========== TEXT ========== */		
.menu ul li a h3{
	display:block;
	margin:4px 0 0 1px;
	float:left;
	font:normal 15px Tahoma, Geneva, sans-serif;
	}	
.menu ul li a h3:before{
	content:'|';
	margin-right:5px;
	font-size:18px;
	}
/* ========== MAIN LINKS ON MOUSEOVER ========== */
.menu ul:hover li.active > a{
	background:transparent
	}	
.menu ul li.active > a{
	background:#09F;
	} 		
.menu > ul > li:hover > a, .menu ul li.active:hover > a{
	width:150px;
	background:#09F;
	}
/* ========== MAIN LINKS ON MOUSE CLICK ========== */
.menu ul li a:active, .menu ul li.active > a:active{
	background:#0085DD;
	}	
/* ========== DROPDOWN MENU ========== */
.menu ul ul{
	width:108px;
	position:absolute;
	left:100%;
	visibility:hidden;
	opacity:0;
	z-index:11;
	margin-left:2px;
	background:#333;
	border:solid 1px #2E2E2E;
	-webkit-border-top-right-radius:3px;
	-webkit-border-bottom-right-radius:3px;
	-moz-border-radius:0 0px 3px 3px;
	border-radius:0 0px 3px 3px;
	-webkit-box-shadow:0 3px 2px -2px #999;
	-moz-box-shadow:0 3px 2px -2px #999;
	box-shadow:0 3px 2px -2px #999;
	-webkit-transition:all 200ms ease-in-out 10ms;
	-moz-transition:all 200ms ease-in-out 10ms;
	-ms-transition:all 200ms ease-in-out 10ms;
	-o-transition:all 200ms ease-in-out 10ms;
	transition:all 200ms ease-in-out 10ms;
	}	
.menu ul li:hover > ul{
	visibility:visible;
	opacity:1;
	}
/* ========== LINKS IN DROPDOWN MENU ========== */	
.menu ul ul li a{
	display:block;
	position:relative;
	padding:5px 0 5px 10px;
	font:12px Tahoma, Geneva, sans-serif;
	color:#FFF;
	text-decoration:none;
	border-bottom:solid 1px #3C3C3C;
	-webkit-transition:color 180ms linear 20ms, background 180ms linear 20ms;
	-moz-transition:color 180ms linear 20ms, background 180ms linear 20ms;
	-ms-transition:color 180ms linear 20ms, background 180ms linear 20ms;
	-o-transition:color 180ms linear 20ms, background 180ms linear 20ms;
	transition:color 180ms linear 20ms, background 180ms linear 20ms;
	}
.menu ul ul li:last-child a{
	border-bottom:none;
	-webkit-border-bottom-right-radius:3px;
	-webkit-border-bottom-left-radius:3px;
	-moz-border-radius:0 0 3px 3px;
	border-radius:0 0 3px 3px;
	}	
.menu ul ul li a i{
	position:absolute;
	right:-6px;
	font-size:15px;
	line-height:14px;
	}	
/* ========== LINKS ON MOUSEOVER IN DROPDOWN MENU ========== */
.menu ul ul li:hover > a{
	color:#51B9FF;
	background:#2C2C2C;
	}
/* ========== LINKS ON MOUSE CLICK IN DROPDOWN MENU ========== */
.menu ul ul li a:active{
	background:#272727;
	}	
/* ========== DROPDOWN MENU LVL 2,3,4... ========== */	
.menu ul ul ul{
	position:absolute;
	top:-1px;
	left:106px;
	-webkit-border-radius:3px;
	-webkit-border-top-left-radius:0;
	-moz-border-radius:0 3px 3px 3px;
	border-radius:0 3px 3px 3px;
	}	
/* LizardThemes/September2013 */