/* CSS Document - http://webtuts.wat2tutorial.com */
div.button {
    width: 140px;
	height:auto;
}
span.main a {
    display: block;
    width: 140px;	
    height: 93px;
	text-align: center;	
    color: #FFF;
    font: bold 17px/50px Arial;
    text-decoration: none;
    text-transform: uppercase;
}
span.top a {
    display: block;
    z-index: -1;	
    width: 140px;	
    height: 93px;
    color: #FFF;
    margin: -93px 0px 0px 0px;
    font: bold 13px/35px Arial;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;	
    transition: margin 0.5s ease;
    -webkit-transition: margin 0.5s ease;
    -moz-transition: margin 0.5s ease;
    -o-transition: margin 0.5s ease;
    -ms-transition: margin 0.5s ease;
}
span.bottom a{
    display: block;
    position: absolute;	
    z-index: -1;	
    width: 140px;	
    height: 93px;	
    background: #000;
    color: #FFF;		
    margin: 0px 0 0px 0px;
    font: bold 13px/45px Arial;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;	
    transition: margin 0.5s ease;
	-webkit-transition: margin 0.5s ease;
    -moz-transition: margin 0.5s ease;
    -o-transition: margin 0.5s ease;
    -ms-transition: margin 0.5s ease;
}
div.button span a {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;	
    
}

/*---------------  HOVER  ---------------
-----------------------------------------*/
.button:hover span.top a{ 
	margin: -102px 0 0 0px; 
}
.button:hover span.bottom a{ 
	margin: -102px 0 0 0px; 
}

/*---------------  ACTIVE  -------------- 
-----------------------------------------*/
.button a:active {
   
}
.button:active span.top a{
	margin: -120px 0 0 0px; 
}
.button:active span.bottom a{ 
	margin: -7px 0 0 0px 
}