/** * IceMegaMenu Extension for Joomla 1.7 By IceTheme * * * @copyright Copyright (C) 2008 - 2011 IceTheme.com. All rights reserved. * @license GNU General Public License version 2 * * @Website http://www.icetheme.com/Joomla-Extensions/icemegamenu.html * @Support http://www.icetheme.com/Forums/IceMegaMenu/ * */ div.icemegamenu { position:relative; margin:0 0 0 3px; } div.icemegamenu ul#icemegamenu { margin: 60px auto; border: 1px solid #222; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); border-radius: 6px; box-shadow: 0 1px 1px #777; display:block; list-style:none; margin:0; padding: 0; z-index:5; position:absolute; top:0; left:0;} div.icemegamenu ul#icemegamenu li { display:block; list-style:none; margin:0; padding:0; position:relative; border-right: 1px solid #222; box-shadow: 1px 0 0 #444; float:left;} div.icemegamenu ul#icemegamenu li:last-child { border-right:none; box-shadow:none} div.icemegamenu ul#icemegamenu li a.iceMenuTitle, div.icemegamenu ul#icemegamenu li span.separator{ text-decoration:none; display:block; padding:10px 26px; color:#ccc; margin:0 0 0 1px; text-shadow:1px 1px 1px #000; -webkit-transition:all .3s linear; -moz-transition:all .3s linear; -o-transition:all .3s linear; transition:all .3s linear} div.icemegamenu ul#icemegamenu li span.icemega_title { font-size:1.25em;} /* subtiles they appear on the top of the menu item when you move the mouse over */ div.icemegamenu ul#icemegamenu li span.icemega_desc { display:block; font-family:Arial, Helvetica, sans-serif; padding:0; font-size:.9em; line-height:1em; color:#fff!important; color:rgba(255,255,255,.85)!important; background-color:#CD7B00; text-shadow:none!important; background-image: -moz-linear-gradient(#FF9901, #CD7B00); background-image: -webkit-linear-gradient(#FF9901, #CD7B00); background-image: -o-linear-gradient(#FF9901, #CD7B00); background-image: -ms-linear-gradient(#FF9901, #CD7B00); background-image: linear-gradient(#FF9901, #CD7B00); padding:3px 9px 4px; position:absolute; top:-28px; opacity:0; right:0; border-radius:5px; -webkit-transition:all .3s linear; -moz-transition:all .3s linear; -o-transition:all .3s linear; transition:all .3s linear} /* ie8 hack */ @media \0screen { div.icemegamenu ul#icemegamenu li span.icemega_desc { top:-19px} } /* ie7 hack */ *+html div.icemegamenu ul#icemegamenu li span.icemega_desc { top:-19px} div.icemegamenu ul#icemegamenu li span.icemega_desc:after{ content:""; border-style: dashed; border-color: transparent; border-width: 0.6em; display: -moz-inline-box; display: inline-block; /* Use font-size to control the size of the arrow. */ height: 0; line-height: 0; position: relative; vertical-align: middle; width: 0; border-top-width: .7em; border-top-style: solid; border-top-color: #CD7B00; position:absolute; bottom:-14px; left:7px; opacity:0; -webkit-transition:opacity .3s linear; -moz-transition:opacity .3s linear; -o-transition:opacity .3s linear; transition:opacity .3s linear} div.icemegamenu ul#icemegamenu li:hover span.icemega_desc, div.icemegamenu ul#icemegamenu li.active span.icemega_desc { top:-19px} div.icemegamenu ul#icemegamenu li:hover span.icemega_desc, div.icemegamenu ul#icemegamenu li:hover span.icemega_desc:after, div.icemegamenu ul#icemegamenu li.active span.icemega_desc, div.icemegamenu ul#icemegamenu li.active span.icemega_desc:after { opacity:1;} /* when is current and active*/ div.icemegamenu ul#icemegamenu li.active a.iceMenuTitle, div.icemegamenu ul#icemegamenu li.active span.separator, div.icemegamenu ul#icemegamenu li:hover a.iceMenuTitle, div.icemegamenu ul#icemegamenu li:hover span.separator { background:#222} div.icemegamenu ul#icemegamenu li.active a.iceMenuTitle, div.icemegamenu ul#icemegamenu li.active span.separator, div.icemegamenu ul#icemegamenu li:hover a.iceMenuTitle, div.icemegamenu ul#icemegamenu li:hover span.separator { color:#F0C237; text-shadow:1px 1px 1px #000;} /* All submenu OLs and ULs */ #icemegamenu ul.icesubMenu { margin: 20px 0 0 0; padding:0 0 10px; opacity: 0; visibility: hidden; position: absolute; top:34px; left: 0; z-index: 9999; background: #222; background: -moz-linear-gradient(#444, #111); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); box-shadow: 0 -1px 0 rgba(255,255,255,.3); border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;} /* arrow on the top of the dropdown */ #icemegamenu ul.sub_level_1 div li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444;} #icemegamenu ul.sub_level_1 div div li:first-child > a:after { display:none} #icemegamenu ul.icesubMenu div > ul { margin:0; padding:0} #icemegamenu li:hover > ul { opacity: 1; visibility: visible; margin: 0!important;} div.icemegamenu #icemegamenu ul.icesubMenu li { box-shadow:none; float:none; border:none} div.icemegamenu #icemegamenu ul.icesubMenu li a.iceMenuTitle, div.icemegamenu #icemegamenu ul.icesubMenu li span.separator { display:block; padding:5px 0 8px 16px; color:#ccc; text-shadow:1px 1px 1px #000; margin:0 15px; background:url(../images/point.png) no-repeat 0% 45%; border-bottom:1px dotted #555;} /*ie7 hack */ *+html div.icemegamenu #icemegamenu ul.icesubMenu li a.iceMenuTitle, *+html div.icemegamenu #icemegamenu ul.icesubMenu li span.separator { width:235px;} div.icemegamenu #icemegamenu ul.icesubMenu li a.iceMenuTitle:hover, div.icemegamenu #icemegamenu ul.icesubMenu li span.separator:hover { background-image:url(../images/point_hover.png);} div.icemegamenu #icemegamenu ul.icesubMenu li a.iceMenuTitle span.icemega_desc { display:block; position:relative; padding:0; top:auto; font-size:12px; color:#999!important; margin-top:-2px; right:auto; background:none; font-family:Verdana, Geneva, sans-serif;} div.icemegamenu #icemegamenu ul.icesubMenu li a.iceMenuTitle span.icemega_desc:after { display:none} /* when is parent */ div.icemegamenu #icemegamenu ul.icesubMenu li.parent { background:url(../images/arrow.png) no-repeat 93% 45%;} /* when is active */ div.icemegamenu #icemegamenu ul.icesubMenu li.active a.iceMenuTitle { background-image:url(../images/point_hover.png);} /* Second Level Dropdown */ div.icemegamenu #icemegamenu ul.sub_level_2, div.icemegamenu #icemegamenu ul.sub_level_3, div.icemegamenu #icemegamenu ul.sub_level_4, div.icemegamenu #icemegamenu ul.sub_level_5 { top: -1px; left: 248px; box-shadow:none; border:1px solid #444; border-top-color:#555; margin: 0 0 0 20px;} /* sub menu links on hover or focus */ #icemegamenu li a.iceMenuTitle:hover, #icemegamenu li a.iceMenuTitle:hover span, div.icemegamenu #icemegamenu ul.icesubMenu li.active a span { color:#F0C237!important; font-weight:normal;} /* for the modules insdie the dropdown */ .icesubMenu .icemega_cover_module { position:relative; overflow:hidden; width:auto!important; padding:10px 15px} div#subMenusContainer .icemega_cover_module { padding-left:0; padding-right:0} .icesubMenu .icemega_cover_module .icemega_modulewrap { position:relative; color:#fff; color:rgba(255,255,255,.7);} /* ie7 hack */ *+html .icesubMenu .icemega_cover_module .icemega_modulewrap { color:#fff} .icesubMenu .icemega_cover_module .icemega_modulewrap span.iceModuleTile { color:#fff; font-size:1.25em; text-shadow:1px 1px 1px rgba(0,0,0,.8); margin-bottom:2px; display:block;} .icesubMenu .icemega_cover_module .icemega_modulewrap p:last-child { margin-bottom:.25em} .icesubMenu .icemega_cover_module .icemega_modulewrap a { color:#F0C237;}