/* Main Navigation */ 
body {
	margin: 0px 0px 0px 0px;
}

#nav_menu { 
    position:relative; 
    margin:0px;  
    margin-top:0px; 
    padding:0px; 
    height:30px;
    width:100%;
    background-color: #46C7C7;  
} 

ul#navigation { 
    margin:0px auto; 
    position:relative; 
    float:left; 
    border-left:1px solid #c9c9c9; 
    border-right:1px solid #c9c9c9; 
    /*
    border-left:1px solid #c4dbe7; 
    border-right:1px solid #c4dbe7; 
    */
} 

ul#navigation li { 
    display:inline; 
    font-size:10px; 
    font-weight:bold; 
    margin:0; 
    padding:0; 
    float:left; 
    position:relative; 
    border-top:1px solid #c9c9c9; 
    border-bottom:2px solid #c9c9c9; 
    /*
    border-top:1px solid #c4dbe7; 
    border-bottom:2px solid #c4dbe7; 
    */
} 

ul#navigation li a { 
    padding:5px 10px; 
    /* color:#616161;  */
    color:#000000; 
    /* text-shadow:1px 1px 0px #fff;  */
    text-decoration:none; 
    display:inline-block; 
    border-right:1px solid #c9c9c9; 
    border-left:1px solid #c9c9c9; 
    border-top:1px solid #c9c9c9; 
    background: #46C7C7; 
    /*
    border-right:1px solid #fff; 
    border-left:1px solid #C2C2C2; 
    border-top:1px solid #fff; 
    background: #f5f5f5;
    */

    -webkit-transition:color 0.2s linear, background 0.2s linear;    
    -moz-transition:color 0.2s linear, background 0.2s linear;   
    -o-transition:color 0.2s linear, background 0.2s linear;     
    transition:color 0.2s linear, background 0.2s linear;    
} 


ul#navigation li a:hover { 
    background:#46C7C7; 
    color:#000000; 
    /*
    background:#f8f8f8; 
    color:#282828; 
    */
} 

ul#navigation li a.first { 
    border-left: 0 none; 
} 

ul#navigation li a.last { 
    border-right: 0 none; 
} 

ul#navigation li:hover > a { 
    background:#fff; 
} 

/* Drop-Down Navigation */ 
ul#navigation li:hover > ul 
{ 
/*these 2 styles are very important,  
being the ones which make the drop-down to appear on hover */ 
    visibility:visible; 
    opacity:1; 
} 

ul#navigation ul, ul#navigation ul li ul { 
    list-style: none; 
    margin: 0; 
    padding: 0;     

/*the next 2 styles are very important,  
being the ones which make the drop-down to stay hidden */ 
    visibility:hidden; 
    opacity:0; 
    position: absolute; 
    z-index: 99999; 
    width:180px; 
    background:#c9c9c9; 
    /* box-shadow:1px 1px 3px #ccc;  */

/* css3 transitions for smooth hover effect */ 
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;  
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear;  
    -o-transition:opacity 0.2s linear, visibility 0.2s linear;  
    transition:opacity 0.2s linear, visibility 0.2s linear;      
} 

ul#navigation ul { 
    top: 25px; 
    left: 1px; 
} 

ul#navigation ul li ul { 
    top: 0; 
    left: 181px; /* strong related to width:180px; from above */ 
} 

ul#navigation ul li { 
    clear:both; 
    width:100%; 
    border:0 none; 
    border-bottom:1px solid #c9c9c9; 
} 

ul#navigation ul li a { 
    padding:7px 15px; 
    background:46C7C7; 
    color:#000000; 
    /*
    background:none; 
    color:#616161;
    */
    /* text-shadow:1px 1px 0px #fff;  */
    text-decoration:none; 
    display:inline-block; 
    border:0 none; 
    float:left; 
    clear:both; 
    width:150px; 
}