/* CSS3 TRANSITION ONLY EFFECT */
#paneltwo { 
	width:300px;
	list-style:none; 
	position:relative;
	display:inline;
}

#paneltwo li {  
	border-radius:3px 3px 3px 3px; 
	margin-top:5px;
	width:155px;
	float:left;
	overflow:hidden;
	position:relative;
	
	border-left:1px solid #A2DB9F; 
        border-top:1px solid #A2DB9F; 
        border-right:1px solid #FDFEFD; 
        border-bottom:1px solid #A2DB9F;
}

#paneltwo li.mask { /* It allows us to hide the link behind it */
	background-color: #A2DB9F;
	z-index:10; 
	overflow:hidden;
}

#paneltwo li a { 
	color:#fff; 
	display:block; 
	padding:10px;
}



#paneltwo li.linkOne, 
#paneltwo li.linkTwo, 
#paneltwo li.linkThree, 
#paneltwo li.linkFour, 
#paneltwo li.linkFive {   
        -moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
}

#paneltwo:hover li.linkOne, 
#paneltwo:hover li.linkTwo, 
#paneltwo:hover li.linkThree, 
#paneltwo:hover li.linkFour, 
#paneltwo:hover li.linkFive { 	
        -moz-transform:translateX(0px);
	-moz-transition: all 1s ease-in-out; 
	-webkit-transform:translateX(0px);
	-webkit-transition: all 1s ease-in-out; 
	-o-transform:translateX(0px);
	-o-transition: all 1s ease-in-out; 
}

#paneltwo li.linkOne {
	background-color: #3b5998;
	
	-moz-transform:translateX(-100%); 
	-moz-transition-delay:0.6s; 
	
	-webkit-transform:translateX(-100%); 
	-webkit-transition-delay:0.6s; 
	
	-o-transform:translateX(-100%); 
	-o-transition-delay:0.6s; 
	
	z-index:5; 
}

#paneltwo li.linkTwo { 
	
	background-color: #55ACEE;
	
	-moz-transform:translateX(-200%); 
	-moz-transition-delay:0.5s; 
	
	-webkit-transform:translateX(-200%); 
	-webkit-transition-delay:0.5s; 
	
	-o-transform:translateX(-200%); 
	-o-transition-delay:0.5s; 
	
	z-index:4;
}

#paneltwo li.linkThree { 
	
	background-color: #DD4B39;
	
	-moz-transform:translateX(-300%); 
	-moz-transition-delay:0.4s; 
	
	-webkit-transform:translateX(-300%); 
	-webkit-transition-delay:0.4s; 
	
	-o-transform:translateX(-300%); 
	-o-transition-delay:0.4s;
	
	z-index:3;
}



#paneltwo:hover li.linkOne { 
	-moz-transition-delay:0s; 
	-webkit-transition-delay:0s; 
	-o-transition-delay:0s; 
	z-index:5;
}

#paneltwo:hover li.linkTwo { 
	-moz-transition-delay:0.2s;
	-webkit-transition-delay:0.2s;
	-o-transition-delay:0.2s; 
	z-index:4;
}

#paneltwo:hover li.linkThree { 
	-moz-transition-delay:0.4s;
	-webkit-transition-delay:0.4s;
	-o-transition-delay:0.4s; 
	z-index:3;
}

