/*----*****---- << Main Menu >> ----*****----*/
	
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */

#main-menu { float:right; }
#main-menu ul { margin: 0 auto; list-style: none; position: relative; }
#main-menu ul li { display: inline-block; padding:0; float:left}
#main-menu ul a { color: #fff; font-size: 16px; padding: 0px 15px; text-decoration: none;text-transform: capitalize; line-height:70px;}
#main-menu ul a:hover { color: white; }
#magic-line { position: absolute; bottom: -5px; left: 0; width: 100px; height: 5px;padding:0; background: #fff; }
.ie6 #main-menu ul li, .ie7 #main-menu ul li { display: inline; }
.ie6 #magic-line { bottom: -3px; }

/*----*****---- << Responsive Menu >> ----*****----*/

#main-menu ul ul{ display:none; padding:10px;}
#main-menu ul ul li{ display: block; float:none; clear:both;}
#main-menu ul ul li a{ line-height:1em; font-size:12px; padding:7px 0px; display:block; width:100%}
#main-menu ul ul li a:hover{ color:#0cc5e6}
#main-menu ul li:hover ul{ display: block; position:absolute; left:0px; top:0px; background:#000; width:160px; z-index:1000}
#main-menu ul li:hover ul ul{ display:none}
#main-menu ul ul li:hover ul{ display: block; position:absolute; left:160px; top:-35px; background:#000; width:160px; z-index:1000}
	
@media handheld, only screen and (max-width: 980px) {#main-menu ul a{ padding:31px 10px}}
@media handheld, only screen and (max-width: 980px) {#main-menu ul a{ padding:31px 7px}}
@media handheld, only screen and (max-width: 767px) {
#main-menu{ float:none}

#menu-button { float:left; background:url(../images/menu-icon.png) left center no-repeat; cursor:pointer}
#menu-button.selected,
#menu-button:active {  background:url(../images/menu-icon-active.png) left center no-repeat}
#menu-button-inner {width: 40px;height:50px;}

/* main nav */
#main-menu {clear: both;position: absolute;top: 55px;width: 120px;z-index: 10000;padding: 0px 0;background: #000;display: none; left:0px; /* visibility will be toggled with jquery */}
#main-menu li {clear: both;float: none;margin: 4px 0 4px 7px;}
#main-menu a, 
#main-menu ul a {font: inherit;background: none;padding: 0;color: #fff;border: none; font-size:12px;}
#main-menu a:hover, 
#main-menu ul a:hover { text-decoration:underline; color:#fff; font-weight:bold}
	
/* dropdown */
#main-menu ul {width: auto;position: static;display: block;border: none;background: inherit;}
#main-menu ul li {margin: 3px 0 3px 15px;}

#main-menu ul ul{ display: block; padding:0px; position:relative; margin:0px;clear:both}
#main-menu ul ul li{ display: block; float:none; clear:both; margin:0px; padding:0 0 0 5px; list-style:none;}
#main-menu ul ul li a{ line-height:1em; font-size:12px; padding:5px 0px; display:block; width: auto; z-index:1000}
#main-menu ul ul li a:hover{ color:#fff}
#main-menu ul li:hover ul{ display: block; position: relative; left:0px; top:0px; background: none; width: auto; z-index:0; margin:0px; padding:0px;}
#main-menu ul li:hover ul ul{ display: block; margin:0px; padding:0px;}
#main-menu ul ul li:hover ul{ display: block; position: relative; left:0px; top:0px; background: none; width: auto; z-index:0; margin:0px; padding:0px;}
li#magic-line { height:0px;}


}