/* top level
--------------------------------------------*/
.menuTemplate1
{
    /* 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;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("/horizontal/menuh/cssmenu.htc");
    position:relative;
    z-index:4;
    height: 36px;
    /*background: #00B3E4 url(bg.gif);*/
    background: #D80000 url(bg.gif);
    /*border: 1px solid #BBB;*/
     border: 1px solid #007293;
    font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
    list-style: none;
    padding: 0;
}
.menuTemplate1 li
{
    padding: 0;
    float: left;
    height: 36px;
    position: relative;/*delete it if you want submenu to be positioned relative to the whole menu instead of this li element*/
    color: White;
    z-index:5;
}

.menuTemplate1 a
{
    padding: 0 30px;
    line-height: 36px; /*Note: keep this value the same as the height of .menuTemplate1 li */
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    outline: 0;
    text-decoration: none;
    color: White;
    position: relative;
}
.menuTemplate1 li:hover a, .menuTemplate1 li.onhover a
{
    background: white url(bg.gif) repeat-x 0 -48px;
    color: #000;
    z-index: 9;
}
.menuTemplate1 a.arrow
{
    background: url(arrow.gif) no-repeat right center;
}
 
        
/*Used to align a top-level item to the right*/        
.menuTemplate1 li.menuRight
{
    float: right;
    margin-right: 0px;
}
        
        
/*for the top-level separators*/
.menuTemplate1 li.separator
{
    font-size:0;
    overflow:hidden;
    border-left:1px solid #F7F7F7;
    border-right:1px solid #BBBBBB;
    z-index:4;
}
               
        
/* sub level
--------------------------------------------*/
        
.menuTemplate1 .drop
{
    position: absolute;
    z-index:5;
    left: -9999px;
    border: 1px solid #DDD;
    border-bottom:3px solid #00B3E4;
    background: #FFF;            
    text-align: left;
    padding: 20px;  
    color:#000080;
    top:34px;              
}

.menuTemplate1 .drop a
{
    padding-left: 0px;
    padding-right: 0px;
    line-height: 26px;
    font-size: 14px;
    font-weight: normal;
    display: inline;
    text-align: left;
    
    position: static;
    z-index: 0;
    background-image:none;
}

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

.menuTemplate1 li:hover .dropToLefta1, .menuTemplate1 li.onhover .dropToLefta1
{
    left: 15;
    right: auto;
    background:white url(bg-left.png) no-repeat 0 bottom;
}

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

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

.menuTemplate1 div.left {float:left;}

        
/* 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: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    -moz-box-shadow: 0px 12px 20px #CCCCCC;
    -webkit-box-shadow: 0px 12px 20px #CCCCCC;
    box-shadow: 0px 12px 20px #CCCCCC;  
}


/* Menu II #######################################*/

.menuTemplate2
{
    /* 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;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("/horizontal/menuh/cssmenu.htc");
    position:relative;
    z-index:4;
    height: 36px;
    /*background: #00B3E4 url(bg.gif);*/
    background: #0C940F url(bg.gif);
    /*border: 1px solid #BBB;*/
     border: 1px solid #007293;
    font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
    list-style: none;
    padding: 0;
}
.menuTemplate2 li
{
    padding: 0;
    float: left;
    height: 36px;
    position: relative;/*delete it if you want submenu to be positioned relative to the whole menu instead of this li element*/
    color: White;
    z-index:5;
}

.menuTemplate2 a
{
    padding: 0 30px;
    line-height: 36px; /*Note: keep this value the same as the height of .menuTemplate2 li */
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    outline: 0;
    text-decoration: none;
    color: White;
    position: relative;
}
.menuTemplate2 li:hover a, .menuTemplate2 li.onhover a
{
    background: white url(bg.gif) repeat-x 0 -48px;
    color: #000;
    z-index: 9;
}
.menuTemplate2 a.arrow
{
    background: url(arrow.gif) no-repeat right center;
}
 
        
/*Used to align a top-level item to the right*/        
.menuTemplate2 li.menuRight
{
    float: right;
    margin-right: 0px;
}
        
        
/*for the top-level separators*/
.menuTemplate2 li.separator
{
    font-size:0;
    overflow:hidden;
    border-left:1px solid #F7F7F7;
    border-right:1px solid #BBBBBB;
    z-index:4;
}
               
        
/* sub level
--------------------------------------------*/
        
.menuTemplate2 .drop
{
    position: absolute;
    z-index:5;
    left: -9999px;
    border: 1px solid #DDD;
    border-bottom:3px solid #00B3E4;
    background: #FFF;            
    text-align: left;
    padding: 20px;  
    color:#000080;
    top:34px;              
}

.menuTemplate2 .drop a
{
    padding-left: 0px;
    padding-right: 0px;
    line-height: 26px;
    font-size: 14px;
    font-weight: normal;
    display: inline;
    text-align: left;
    
    position: static;
    z-index: 0;
    background-image:none;
}

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

.menuTemplate2 li:hover .dropToLefta1, .menuTemplate1 li.onhover .dropToLefta1
{
    left: 15;
    right: auto;
    background:white url(bg-left.png) no-repeat 0 bottom;
}

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

.menuTemplate2 div.drop div div
{
    padding: 6px 20px;
}
.menuTemplate2 li:hover .drop a, .menuTemplate1 li.onhover .drop a
{
    background: none;
    background-image:none;
    padding:0 0;
}
.menuTemplate2 div.drop div a
{
    line-height: 24px;  
    color: #0F4F89;
    background:none;
}
.menuTemplate2 div.drop div a:hover
{
    text-decoration:underline;
    cursor:pointer;
    color:Red;
}

.menuTemplate2 div.left {float:left;}

        
/* 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: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    -moz-box-shadow: 0px 12px 20px #CCCCCC;
    -webkit-box-shadow: 0px 12px 20px #CCCCCC;
    box-shadow: 0px 12px 20px #CCCCCC;  
}












/* Menu III #######################################*/

.menuTemplate3
{
    /* 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;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("/horizontal/menuh/cssmenu.htc");
    position:relative;
    z-index:4;
    height: 36px;
    /*background: #00B3E4 url(bg.gif);*/
    background: #B117B1 url(bg.gif);
    /*border: 1px solid #BBB;*/
     border: 1px solid #007293;
    font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
    list-style: none;
    padding: 0;
}
.menuTemplate3 li
{
    padding: 0;
    float: left;
    height: 36px;
    position: relative;/*delete it if you want submenu to be positioned relative to the whole menu instead of this li element*/
    color: White;
    z-index:5;
}

.menuTemplate3 a
{
    padding: 0 30px;
    line-height: 36px; /*Note: keep this value the same as the height of .menuTemplate2 li */
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    outline: 0;
    text-decoration: none;
    color: White;
    position: relative;
}
.menuTemplate3 li:hover a, .menuTemplate2 li.onhover a
{
    background: white url(bg.gif) repeat-x 0 -48px;
    color: #000;
    z-index: 9;
}
.menuTemplate3 a.arrow
{
    background: url(arrow.gif) no-repeat right center;
}
 
        
/*Used to align a top-level item to the right*/        
.menuTemplate3 li.menuRight
{
    float: right;
    margin-right: 0px;
}
        
        
/*for the top-level separators*/
.menuTemplate3 li.separator
{
    font-size:0;
    overflow:hidden;
    border-left:1px solid #F7F7F7;
    border-right:1px solid #BBBBBB;
    z-index:4;
}
               
        
/* sub level
--------------------------------------------*/
        
.menuTemplate3 .drop
{
    position: absolute;
    z-index:5;
    left: -9999px;
    border: 1px solid #DDD;
    border-bottom:3px solid #00B3E4;
    background: #FFF;            
    text-align: left;
    padding: 20px;  
    color:#000080;
    top:34px;              
}

.menuTemplate3 .drop a
{
    padding-left: 0px;
    padding-right: 0px;
    line-height: 26px;
    font-size: 14px;
    font-weight: normal;
    display: inline;
    text-align: left;
    
    position: static;
    z-index: 0;
    background-image:none;
}

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

.menuTemplate3 li:hover .dropToLefta1, .menuTemplate1 li.onhover .dropToLefta1
{
    left: 15;
    right: auto;
    background:white url(bg-left.png) no-repeat 0 bottom;
}

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

.menuTemplate3 div.drop div div
{
    padding: 6px 20px;
}
.menuTemplate3 li:hover .drop a, .menuTemplate1 li.onhover .drop a
{
    background: none;
    background-image:none;
    padding:0 0;
}
.menuTemplate3 div.drop div a
{
    line-height: 24px;  
    color: #0F4F89;
    background:none;
}
.menuTemplate3 div.drop div a:hover
{
    text-decoration:underline;
    cursor:pointer;
    color:Red;
}

.menuTemplate3 div.left {float:left;}

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