@charset "utf-8";
/* CSS Document */

a { outline: none;  }
a img { border: none;  }

/* Moomenu */


#nav,#nav ul {


    list-style: none outside none;

    margin: 0;

    padding: 0;

    

}


#nav {

    background: url('../imagenes/pro-span-title.png') no-repeat scroll 0 0 transparent;

    font-size: 12px;

    height: 65px;

    padding: 0 0 0 1px;

    position: relative;

    width: 1222px;


}

#nav ul {


    background-color: #222;

    border:1px solid #222;

    border-radius: 0 5px 5px 5px;

    border-width: 0 1px 1px;

    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);

    left: -9999px;
    overflow: hidden;

    position: absolute;

    top: -9999px;

    z-index: 2;
    
    text-align: center;

    -moz-transform: scaleY(0);

    -ms-transform: scaleY(0);

    -o-transform: scaleY(0);

    -webkit-transform: scaleY(0);

    transform: scaleY(0);


   

  /*-moz-transform-origin: 0 0;

    -ms-transform-origin: 0 0;

    -o-transform-origin: 0 0;

    -webkit-transform-origin: 0 0;

    transform-origin: 0 0;


    -moz-transition: -moz-transform 0.1s linear;

    -ms-transition: -ms-transform 0.1s linear;

    -o-transition: -o-transform 0.1s linear;

    -webkit-transition: -webkit-transform 0.1s linear;

    transition: transform 0.1s linear;

*/
}



#nav li {


    background: url('../imagenes/menu_line.png') no-repeat scroll right 1px transparent;
    float: left;
    position: relative;
    margin: 0;
}


#nav li a {

    color: #ffffff;

    display: block;

    float: left;

    font-weight: normal;

    height: 28px;

    padding: 23px 20px 0;

    position: relative;

    text-decoration: none;

    text-shadow: 1px 1px 1px #000000;
    font-size: 15px;

}


#nav li:hover > a {

    color: #000000;


}








#nav li:hover, 
#nav a:focus, 
#nav a:hover, 




#nav a:active {

    background-color: rgba(255,  255,  255,  0.1);
    outline: 0 none;
    border-radius: 5px;
    text-color: #aa77aa;
    
    
}


#nav li:hover ul.subs {

    background: url('../imagenes/span-submenu.png') repeat scroll 0 0 transparent;
    left: 0;
    top: 53px;
    border-radius: 5px;
    width: 280px;
    

    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);

    -o-transform: scaleY(1);

    -webkit-transform: scaleY(1);

    transform: scaleY(1);
    color: #000000;

}


#nav ul li {

    background: none;

    width: 100%;


}


#nav ul li a {


    float: none;
    

}


#nav ul li:hover > a {


    background-color: rgba(255,  255,  255,  0.1);

    color: #000000;


}



#lavalamp {


    background: url('../imagenes/lavalamp.png') no-repeat scroll 0 0 transparent;

    height: 16px;

    left: 8px;

    position: absolute;

    top: 0px;

    width: 64px;


    -moz-transition: all 300ms ease;

    -ms-transition: all 300ms ease;

    -o-transition: all 300ms ease;

    -webkit-transition: all 300ms ease;

    transition: all 300ms ease;


}




#lavalamp:hover {

    -moz-transition-duration: 3000s;

    -ms-transition-duration: 3000s;

    -o-transition-duration: 3000s;

    -webkit-transition-duration: 3000s;

    transition-duration: 3000s;


}

#nav li:nth-of-type(1):hover ~ #lavalamp {

    
     left: 8px;


}


#nav li:nth-of-type(2):hover ~ #lavalamp {


    left: 104px;


}


#nav li:nth-of-type(3):hover ~ #lavalamp {


    left: 220px;


}


#nav li:nth-of-type(4):hover ~ #lavalamp {


    left: 333px;


}


#nav li:nth-of-type(5):hover ~ #lavalamp {


    left: 492px;


}


#nav li:nth-of-type(6):hover ~ #lavalamp {


    left: 650px;


}


#nav li:nth-of-type(7):hover ~ #lavalamp {


    left: 770px;


}


#nav li:nth-of-type(8):hover ~ #lavalamp {


    left: 910px;


}


#nav li:nth-of-type(9):hover ~ #lavalamp {


    left: 1200px;


}


#nav li:nth-of-type(10):hover ~ #lavalamp {


    left: 23px;
    top: 58px;
}