#main_nav {
list-style: none; margin: 0; padding: 0;
position:relative;
overflow:hidden;
margin: 24px 0 0 0;
}
#main_nav:hover li a#portafolio { background-position: -254px; }
#main_nav:hover li a#blog { background-position: -134px; }
#main_nav:hover li a#extras { background-position: -178px; }
#main_nav:hover li a#nosotros { background-position: -228px; }
#main_nav:hover li a#contacto { background-position: -232px; }

#main_nav li { float: left; }
#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 41px; } 

#portafolio { background: url(../img/portafolio.gif); width: 127px; }
#portafolio:hover { background: url(../img/portafolio.gif) 0 0 !important; }
#portafolio.active { background: url(../img/portafolio.gif) -127px 0; }

#blog { background: url(../img/blog.gif); width: 67px; }
#blog:hover { background: url(../img/blog.gif) 0 0 !important; }
#blog.active { background: url(../img/blog.gif) -67px 0; } 

#extras { background: url(../img/extras.gif); width: 89px; }
#extras:hover { background: url(../img/extras.gif) 0 0 !important; }

#nosotros { background: url(../img/nosotros.gif); width: 114px; }
#nosotros:hover { background: url(../img/nosotros.gif) 0 0 !important; }
#nosotros.active { background: url(../img/nosotros.gif) -114px 0; } 

#contacto { background: url(../img/contacto.gif); width: 116px; }
#contacto:hover { background: url(../img/contacto.gif) 0 0 !important; }
#contacto:active { background: url(../img/contacto.gif) -116px 0; }