/* Item Name : Universal Mega Menu Item URI : http://codecanyon.net/item/universal-responsive-mega-menu/4984236 Author URI : http://codecanyon.net/user/Pixelworkshop/ Version : 1.05 */  /*  TABLE OF CONTENTS  00 PAGE STYLING (REMOVABLE) 01 MENU BAR 1. Mega Menu Bar 2. Mega Menu Trigger Button 02 DROP DOWNS 1. Common Styling 2. Footer 3. Drop Down Containers 03 COLUMNS GRID 04 MULTILEVEL DROP DOWN 05 CONTENT & TYPOGRAPHY 1. Basic Typography 2. Lists 3. Other Styling 4. Inline Images 5. Icons 6. Form Elements 06 DROP DOWN TABS 07 MOBILE DEVICES 08 RETINA DISPLAYS  */    /*  _______________________________________  00 PAGE STYLING (REMOVABLE) _______________________________________  */    /* The following markup is used only for demonstration purposes, this whole section can be removed. */    /*  _______________________________________  01 MENU BAR _______________________________________  */     /* If you have several menus on the same page, you can here define some properties separately for each of them by using their respective ID. */  #mgmenu1 { z-index: 2212; } #mgmenu2 { margin-top: 12px; z-index: 11; }   /* 1. Mega Menu Bar */  .mgmenu_container, .mgmenu_fixed, .mgmenu_footer { width:100%; height: 41px; z-index:10; background: #fff;  } .mgmenu_container { position:relative; margin:0 auto; } .mgmenu_fixed, .mgmenu_footer { width: inherit; max-width: inherit; position:fixed; top:0; /* IE7 Fix */ *width:expression(this.parentNode.currentStyle['width']); } .mgmenu_footer { top: auto; bottom:0; } .mgmenu { font-family: Georgia, "Times New Roman", Times, serif; font-size:14px; list-style:none; padding:0; margin:0; position:relative; /* For IE7 */ line-height:1; } .mgmenu > li { position:relative; float: left; margin: 0; padding-right: 15px; background-color:#eafbf6 !important; } .mgmenu > li:hover,.mgmenu > li:hover a, .mgmenu > li.active { background-color:#fff; } .mgmenu > li:hover a { color:#0aae89; } .mgmenu li.noactive { background:none; } .mgmenu > li > a, .mgmenu > li > span { display: block; color:#72837c; /*	text-shadow:1px 1px 1px #000000;*/ font-size:14px; outline:0; text-decoration:none; padding:15px 0 14px 20px; margin-bottom:1px; margin:0px 45px 1px 0px !important; background-color:#eafbf6; } .mgmenu > li > span a { display: block; color:#72837c; /*	text-shadow:1px 1px 1px #000000;*/ font-size:14px; outline:0; text-decoration:none; } .mgmenu > li > span:hover, .mgmenu > li > a:hover, .mgmenu > li > a:focus { cursor:pointer; color:#0aae89; outline:none; background-color:#fff; } .mgmenu > li > span a:hover { color:#0aae89;} .mgmenu > li .mgmenu_drop { background-image:url url(../images/downArrow.png); background-repeat: no-repeat; background-position:right 19px; padding-right:20px; background:#003 !important; } .mgmenu_footer .mgmenu > li .mgmenu_drop { background-image:url("../img/upArrow.png"); } .mgmenu > li.right_item { float:right; margin-right:0; } .mgmenu_container > .mgmenu > li.mgmenu_button, .mgmenu_fixed > .mgmenu > li.mgmenu_button, .mgmenu_footer > .mgmenu > li.mgmenu_button { display: none; cursor: pointer; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; font-weight: bold; background-color:transparent; background-image:url("../img/toggle.png"); background-repeat: no-repeat; background-position:97% 10px; line-height:12px; padding:14px 4% 14px 4%; color:#0aae89; font-family:Georgia, "Times New Roman", Times, serif; } .mgmenu_container > .mgmenu > li.mgmenu_button_active, .mgmenu_fixed > .mgmenu > li.mgmenu_button_active, .mgmenu_footer > .mgmenu > li.mgmenu_button_active { background-color:#fff; background-image:url("../img/toggle_on.png"); background-repeat: no-repeat; background-position:97% 10px; }  /* 2. Mega Menu Trigger Button */  .mgmenu_trigger { position: fixed; z-index:2; margin:0 auto; right:0; margin-right: 20px; width:35px; height:41px; display: block;  } .mgmenu_trigger { top: 0; background-image:url("../img/button_up.png"); background-position:center center; background-repeat:no-repeat; background-color: #121212; } .mgmenu_trigger.active { background-image:url("../img/button_down.png"); } .mgmenu_footer ~ .mgmenu_trigger { top:auto; bottom: 0; background-image:url("../img/button_down.png"); } .mgmenu_footer ~ .mgmenu_trigger.active { background-image:url("../img/button_up.png"); }     /*  _______________________________________  02 DROP DOWNS _______________________________________  */     /* 1. Common Styling */   .mgmenu li .dropdown_container, .mgmenu li .dropdown_fullwidth, .mgmenu li .mgmenu_multilevel { position:absolute; top:auto; display: none; float:left; zoom:0; z-index: 10; margin:0px 0 40px -1px; padding:10px 0 10px 0; background: #fff; color: #212121; } .mgmenu li .dropdown_container { left:auto; } .mgmenu li .dropdown_fullwidth { left:0; } .mgmenu li.right_item .dropdown_container { left:auto; right:-1px; }   ul.subul { position: relative; width: auto; height: auto; padding: 0px; margin: 0px; }   ul.subul li { position:relative; display: block; list-style-type: none; height: auto; width: auto; margin: 0px 0px; padding: 5px 0px 5px 35px; z-index:10; }  a.sml { position:relative; display: block; height: 20px; width: auto; margin: 0px; padding: 10px 0px 0px 38px; color: #828d89 !important; font-size: 12px; line-height:12px; vertical-align:top; font-weight: normal; text-decoration: none;    }   a.sml:hover {color:#0aae89 !important;background-position: bottom left !important;}  .dwarr{ position:absolute; top:10px; right:15px; height: 20px; width: 20px; background: url(../images/downArrow.png) center no-repeat; }       /*  _______________________________________  07 MOBILE DEVICES _______________________________________  */     @media only screen and (min-width: 768px) and (max-width: 984px) {   .mgmenu > li { padding-right: 10px; } .mgmenu > li > a, .mgmenu > li > span { padding-left:10px; } .mgmenu .mini_icon { padding-left: 3px; }   }   @media only screen and (max-width: 767px) {   .mgmenu_container, .mgmenu_fixed, .mgmenu_footer { width:100%; height:auto; margin:0; position:relative; left:auto; top:auto; bottom:auto; } .mgmenu_footer { } .mgmenu_container .mgmenu > li, .mgmenu_fixed .mgmenu > li, .mgmenu_footer .mgmenu > li { float:none; width:auto; border:none; display: block; padding: 0; } .mgmenu > li > span, .mgmenu > li > a { display: block; } .mgmenu > li .mgmenu_drop { background-position:96% 19px; } .mgmenu > li .dropdown_container, .mgmenu > li .dropdown_fullwidth, .mgmenu_footer .mgmenu > li .dropdown_container, .mgmenu_footer .mgmenu > li .dropdown_fullwidth { position:absolute; top:auto; bottom:auto; width: 100%; margin:0 0 0 0px; }  /* Other Elements */  .mgmenu_trigger { display: none; }    }    /*  _______________________________________  08 RETINA DISPLAYS _______________________________________  */     @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {   .mgmenu > li .mgmenu_drop { background-size: 9px 5px; background-image:url("../img/downArrow@2x.png"); } .mgmenu_footer .mgmenu > li .mgmenu_drop { background-size: 9px 5px; background-image:url("../img/upArrow@2x.png"); } .mgmenu_container > .mgmenu > li.mgmenu_button, .mgmenu_fixed > .mgmenu > li.mgmenu_button, .mgmenu_footer > .mgmenu > li.mgmenu_button { background-size: 24px 24px; background-image:url("../img/toggle@2x.png"); } .mgmenu_trigger { background-size: 35px 35px; background-image:url("../img/button_up@2x.png"); } .mgmenu_trigger.active { background-size: 35px 35px; background-image:url("../img/button_down@2x.png"); } .mgmenu_footer ~ .mgmenu_trigger { background-size: 35px 35px; background-image:url("../img/button_down@2x.png"); } .mgmenu_footer ~ .mgmenu_trigger.active { background-size: 35px 35px; background-image:url("../img/button_up@2x.png"); } .mgmenu .dropdown_flyout .dropdown_parent { background-size: 5px 9px; background-image:url("../img/rightArrow@2x.png"); } .mgmenu .dropdown_flyout .dropdown_parent_left { background-size: 5px 9px; background-image:url("../img/leftArrow@2x.png"); } .mgmenu .mini_icon { background-image: url("../img/icons/mini-icons-white@2x.png"); background-repeat: no-repeat; background-size: 304px 144px; }  .mgmenu .menubar_icon ul > li > a { background-size: 24px 24px; } .mgmenu .icon_vimeo { background-image: url("../img/icons/icon_vimeo@2x.png"); } .mgmenu .icon_dribbble { background-image: url("../img/icons/icon_dribbble@2x.png"); } .mgmenu .icon_twitter { background-image: url("../img/icons/icon_twitter@2x.png"); } .mgmenu .icon_facebook { background-image: url("../img/icons/icon_facebook@2x.png"); } .mgmenu .icon_flickr { background-image: url("../img/icons/icon_flickr@2x.png"); }   }   @media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {  .mgmenu li .dropdown_flyout .dropdown_parent { background-size: 9px 5px; background-image:url("../img/downArrow-b@2x.png"); }  }