/**
 * @version		$Id$
 * @author		JoomlaUX!
 * @package		Joomla.Site
 * @subpackage	mod_jux_megamenu
 * @copyright	Copyright (C) 2008 - 2013 by JoomlaUX. All rights reserved.
 * @license		http://www.gnu.org/licenses/gpl.html GNU/GPL version 3
*/

#js-mainnav.megamenu.red {
	/*background: #9B1200 url('../../images/grad1-mask.png') repeat-x top; /* you can change/delete the transparent gradient image or the background color */*/
	background: transparent;
}


#js-mainnav.megamenu.red #js-megaMenuToggle {
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

/* lv - 0
-----------------------------------*/
/* Styling ---*/


#js-mainnav.megamenu.red ul.level1 li:hover,
#js-mainnav.megamenu.red ul.level1 li.over, 
#js-mainnav.megamenu.red ul.level1 li.haschild-over { background: rgb(211, 33, 9); }

#js-mainnav.megamenu.red ul.level1 li.haschild,
#js-mainnav.megamenu.red ul.level1 li.haschild-over {
	background-image: url(../../images/arrow.png);
	background-repeat: no-repeat;
	background-position: 95% center;
}

 /* CHILD CONTENT
-----------------------------------*/
#js-mainnav.megamenu.red .childcontent-inner {
	background-color: #5B5B5B; /*change here the color to match the new color you have set for mainnav */
	color: #fff; /* after changing code above, you might want to change this color to make the text color readable  */ 
	
}



#js-mainnav.megamenu.red .childcontent .group h3 {
	background: none;
	color: #fff;
}


#js-mainnav.megamenu.red .childcontent .moduletable { color: #fff; }

#js-mainnav.megamenu.red .childcontent .js-moduletable a:hover,
#js-mainnav.megamenu.red .childcontent .js-moduletable a:focus,
#js-mainnav.megamenu.red .childcontent .js-moduletable a:active {
	color: #fff;
}



#js-mainnav.megamenu.red .group-title .menu-title {
	color: #fff;
}

#js-mainnav.megamenu.red .group-title .menu-desc {
	color: #999;
}

/* Left alignment */
#js-mainnav.megamenu.red ul.level0 li.megacss.submenu-align-left > .childcontent {
	margin-left: 1px!important;
}

#megamenucss .red .megamenu .dropdown-menu ul.level1 li.megacss:hover>a.megacss,#megamenucss .red .dropdown-menu ul.level1 li.megacss a.megacss:hover{
    background: #b8b8b8!important;
    color: #ffffff!important;
}
#megamenucss #js-mainnav.red .js-megamenu{
	background: transparent !important;
}



/*planb style*/

#megamenucss ul.level0 > li {
	width: 122px;
	box-sizing: border-box;

}

#megamenucss .red.megamenu ul.level0 > li.megacss:hover > a.megacss,
#megamenucss #js-mainnav.megamenu.red ul.level0 li.active a{
    background: #DAA103 !important;
    color: #fff !important;
}


#megamenucss ul.level0 {
	border-right: 1px solid #DAA103;
    border-left: 1px solid #FFDF87;
}



#megamenucss ul.level0 > li > a {
	border-right: 1px solid #DAA103;
    border-left: 1px solid #FFDF87;
    
    height: 80px;
    box-sizing: border-box;

	padding: 56px 2px 0 !important;

    text-align: center !important;
    font-size: 10px;
    text-transform: uppercase;

    font-family: 'arial' !important;
    color: #000;
    position: relative;
}

#megamenucss ul.level0 > li:hover > a {
	border-right: 1px solid #5B5B5B;
    border-left: 1px solid #5B5B5B;
}

#megamenucss ul.level0 > li > a:before {
	content: "";
	display: block;
	position: absolute;
	top: 3px;
    left: 50%;
    
	width: 50px;
	margin-left: -25px;
	height: 50px;

	z-index: 99;
}

#megamenucss ul.level0 > li:nth-child(1) > a:before {
	background: url(/stories/mainmenu/1.png) 0 0 no-repeat;
	background-size: 100%;
}

#megamenucss ul.level0 > li:nth-child(2) > a:before {
	background: url(/stories/mainmenu/2.png) 0 0 no-repeat;
	background-size: 100%;
}

#megamenucss ul.level0 > li:nth-child(3) > a:before {
	background: url(/stories/mainmenu/3.png) 0 0 no-repeat;
	background-size: 100%;
}

#megamenucss ul.level0 > li:nth-child(4) > a:before {
	background: url(/stories/mainmenu/4.png) 0 0 no-repeat;
	background-size: 100%;
}

#megamenucss ul.level0 > li:nth-child(5) > a:before {
	background: url(/stories/mainmenu/5.png) 0 0 no-repeat;
	background-size: 100%;
}

#megamenucss ul.level0 > li:nth-child(6) > a:before {
	background: url(/stories/mainmenu/6.png) 0 0 no-repeat;
	background-size: 100%;
}

#megamenucss ul.level0 > li:nth-child(7) > a:before {
	background: url(/stories/mainmenu/7.png) 0 0 no-repeat;
	background-size: 100%;
}

#megamenucss ul.level0 > li:nth-child(8) > a:before {
	background: url(/stories/mainmenu/8.png) 0 0 no-repeat;
	background-size: 100%;
}






/*
#megamenucss .childcontent .menu > li > a {
	color: #fff !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    display: block;
    padding-bottom: 10px;
    margin-bottom: 11px;
    padding-top: 30px;
    clear: both;
    
}

#megamenucss .childcontent .menu > li.parent > a {
	text-align: center;
    border-bottom: 1px double rgb(130, 130, 130);
}

#megamenucss .childcontent .menu li a:hover,
#megamenucss .childcontent .menu li.active > a {
	text-decoration: underline !important;
}

#megamenucss .childcontent .menu > li:first-child > a {
	padding-top: 0 !important;
}

#megamenucss .childcontent .menu > li > ul > li {
	float: left;
    width: 193px;
    box-sizing: border-box;
    padding: 4px 0;
}

#megamenucss .childcontent .menu > li > ul > li a {
	font-size: 14px;
}

#megamenucss .childcontent .menu > li > ul > li a {
	color: #fff !important;
}
*/