/* top level
--------------------------------------------*/
.barra_menu
{
    /* You will get totally diffrent menu alignment and layout by setting following margin, width, and float with different values.
    For detailed instruction please visit www.menucool.com/horizontal/change-menu-alignment  */
    margin: 0 auto; 
	width: auto;
	min-width: 301px;
	float: left;
    /*following "behavior" works for IE6, IE7, and IE8. Other browsers will ignore it.*/
    /*Note: htc file path(if using relative path) inside the CSS file should be relative to the page, not to the CSS file (this is unlike image path inside the CSS that is relative to the CSS file location only). 
    So we recommend using the absolute path for the behavior file.*/
    behavior: url("cssmenu.htc");
    position: relative;
    z-index: 4;
    height: 80px;
/*    border: 1px solid #BBB;*/
    list-style: none;
    padding: 0;
	margin-top: -5px;
}

.barra_menu li
{
    padding: 0;
    float: left;
    height: 85px;
	width: 42px;
    position: relative;/*delete it if you want submenu to be positioned relative to the whole menu instead of this li element*/
    color: black;
    z-index: 5;
}

.barra_menu li img
{
	padding-top: 5px;
}

.barra_menu a
{
    padding: 0;
    line-height: 36px; /*Note: keep this value the same as the height of .barra_menu li */
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    outline: 0;
    text-decoration: none;
    color: black;
    position: relative;
	left: -1px;
	width: 73px;
}

.barra_menu li:hover
{
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
	
    -moz-box-shadow: 2px 2px 15px 0px #333333;
    -webkit-box-shadow: 2px 2px 15px 0px #333333;
    box-shadow: 2px 2px 15px 0px #333333; 
}

.barra_menu li:hover a, .barra_menu li.onhover a
{
    background: #ffffff;
    color: #000;
    z-index: 9;
	height: 85px;
	width: 73px;
	
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}
.barra_menu a.arrow
{
/*    background: url(arrow.gif) no-repeat right center;*/
}
 
        
/*Used to align a top-level item to the right*/        
.barra_menu li.menuRight
{
    float: right;
    margin-right: 0px;
}
        
/*for the top-level separators*/
.barra_menu li.separator
{
    font-size: 0;
    overflow: hidden;
/*    border-left:1px solid #F7F7F7;*/
/*    border-right:1px solid #BBBBBB;*/
    z-index:4;
	left: 43px;
}
               
        
/* sub level
--------------------------------------------*/
        
.barra_menu .drop
{
    position: absolute;
    z-index:5;
    left: -9999px;
/*    border-bottom: 2px solid #ff0084;*/
    background: #FFF;            
    text-align: left;
    padding: 20px;  
    color: #ff0084;
    top: 85px;
}

.barra_menu .drop a
{
    padding-left: 0px;
    padding-right: 0px;
    line-height: 26px;
    font-size: 12px;
    font-weight: normal;
    display: inline;
    text-align: left;
	color: #0395CC;
    
    position: static;
    z-index: 0;
    background-image:none;
}

.barra_menu li:hover .drop, .barra_menu li.onhover .drop
{
    left: -1px;/*Use this property to change offset of the dropdown*/
	right: 0px;
/*    background: white url(pruebas/bg-right.png) no-repeat right bottom;*/
}
.barra_menu li:hover .dropToLeft, .barra_menu li.onhover .dropToLeft
{
    left: auto;
    right: 0px;
/*    background: white url(pruebas/bg-left.png) no-repeat 0 bottom;*/
}
.barra_menu li:hover .dropToLeft2, .barra_menu li.onhover .dropToLeft2
{
    left: auto;
    right: -30px;
}

/* Elements within the drop down sub-menu
--------------------------------------------*/

.barra_menu div.drop div div
{
    padding: 6px 10px;
	
}
.barra_menu li:hover .drop a, .barra_menu li.onhover .drop a
{
    background: none;
    background-image:none;
    padding:0 0;
}
.barra_menu div.drop div a
{
    line-height: 20px;  
    color: #0F4F89;
    background: none;
	color: #ff0084;
}
.barra_menu div.drop div a:hover
{
    text-decoration: underline;
    cursor: pointer;
    color: #FF6600;
}

.barra_menu div.left { float:left; padding-right: 20px; }

        
/* CSS3 effects
--------------------------------------------*/

/*for top-level*/     
.decor1_1 
{
/*
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    -moz-box-shadow: 0px 1px 4px #ccc;
    -webkit-box-shadow: 0px 1px 4px #ccc;
    box-shadow: 0px 1px 4px #ccc;*/
            
}

/*for submenu.*/    
.decor1_2 
{
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 10px 10px 10px;

    -moz-box-shadow: 2px 2px 15px 0px #333333;
    -webkit-box-shadow: 2px 2px 15px 0px #333333;
    box-shadow: 2px 2px 15px 0px #333333; /* Derecha, abajo, difuminado, desplazamiento hacia todos lados */
}