compass-jquery-plugin 0.2.6.0 → 0.3.0.beta.1

data/templates/ribbon/jquery.ribbon.js

@@ -0,0 +1,226 @@
+/*
+Copyright (c) 2009 Mikael Söderström.
+Contact: vimpyboy@msn.com
+
+Feel free to use this script as long as you don't remove this comment.
+*/
+
+(function($) {
+    var isLoaded;
+    var isClosed;
+
+    $.fn.Ribbon = function(ribbonSettings) {
+        var settings = $.extend({ theme: 'windows7', backStage: false }, ribbonSettings || {});
+
+        $('.ribbon a').each(function() {
+            if ($(this).attr('accesskey')) {
+                $(this).append('<div rel="accesskeyhelper" style="display: none; position: absolute; background-image: url(images/accessbg.png); background-repeat: none; width: 16px; padding: 0px; text-align: center; height: 17px; line-height: 17px; top: ' + $(this).offset().top + 'px; left: ' + ($(this).offset().left + $(this).width() - 15) + 'px;">' + $(this).attr('accesskey') + '</div>');
+            }
+        });
+
+        $('head').append('<link href="/stylesheets/compiled/jquery.ui/ribbon.' + settings.theme + '.css" rel="stylesheet" type="text/css" />" />');
+
+        if (!isLoaded) {
+            SetupMenu(settings);
+        }
+
+        $(document).keydown(function(e) { ShowAccessKeys(e); });
+        $(document).keyup(function(e) { HideAccessKeys(e); });
+
+        function SetupMenu(settings) {
+            $('.menu li a:first').addClass('active');
+            $('.menu li ul').hide();
+            $('.menu li a:first').parent().children('ul:first').show();
+            $('.menu li a:first').parent().children('ul:first').addClass('submenu');
+            $('.menu li > a').click(function() { ShowSubMenu(this); });
+            $('.orbButton').click(function() { ShowMenu(settings.backStage); });
+            $('.orb ul').hide();
+            $('.orb ul ul').hide();
+            $('.orb li ul li ul').show();
+            $('.orb li li ul').each(function() { $(this).prepend('<div style="background-color: #EBF2F7; height: 25px; line-height: 25px; width: 292px; padding-left: 9px; border-bottom: 1px solid #CFDBEB;">' + $(this).parent().children('a:first').text() + '</div>'); });
+            $('.orb li li a').each(function() { if ($(this).parent().children('ul').length > 0) { $(this).addClass('arrow'); }});
+            $('.orb .ribbon-backstage a').live('click', function() { $('.orb ul').fadeOut('fast'); });
+
+            //$('.ribbon-list div').each(function() { $(this).parent().width($(this).parent().width()); });
+
+            $('.ribbon-list div').click(function(e) {
+                var elwidth = $(this).parent().width();
+                var insideX = e.pageX > $(this).offset().left && e.pageX < $(this).offset().left + $(this).width();
+                var insideY = e.pageY > $(this).offset().top && e.pageY < $(this).offset().top + $(this).height();
+
+                $('.ribbon-list div ul').fadeOut('fast');
+
+                if (insideX && insideY) {
+                    $(this).attr('style', 'background-image: ' + $(this).css('background-image'));
+
+                    $(this).parent().width(elwidth);
+
+                    $(this).children('ul').width(elwidth - 4);
+                    $(this).children('ul').fadeIn('fast');
+                }
+            });
+
+            $('.ribbon-list div').parents().click(function(e) {
+            	$('.ribbon-list div ul:visible').each(function() {
+            		var outsideX = e.pageX < $('.ribbon-list div ul:visible').parent().offset().left || e.pageX > $('.ribbon-list div ul:visible').parent().offset().left + $('.ribbon-list div ul:visible').parent().width();
+            		var outsideY = e.pageY < $('.ribbon-list div ul:visible').parent().offset().top || e.pageY > $('.ribbon-list div ul:visible').parent().offset().top + $('.ribbon-list div ul:visible').parent().height();
+	                if (outsideX || outsideY) {
+	                    $('.ribbon-list div ul:visible').each(function() {
+	                        $(this).fadeOut('fast');
+	                    });
+	                    $('.ribbon-list div').css('background-image', '');
+	                }
+               	});
+           	});
+			
+            $('.orb li li a').mouseover(function() { ShowOrbChildren(this); });
+
+            $('.menu li > a').dblclick(function() {
+                $('ul .submenu').animate({ height: "hide" });
+                $('body').animate({ paddingTop: $(this).parent().parent().parent().parent().height() });
+                isClosed = true;
+            });
+        }
+
+        $('.ribbon').parents().click(function(e) {
+            var outsideX = e.pageX < $('.orb ul:first').offset().left || e.pageX > $('.orb ul:first').offset().left + $('.orb ul:first').width();
+            var outsideY = e.pageY < $('.orb ul:first img:first').offset().top || e.pageY > $('.orb ul:first').offset().top + $('.orb ul:first').height();
+
+            if ((outsideX || outsideY) && !settings.backStage) {
+                $('.orb ul').fadeOut('fast');
+            }
+        });
+
+        if (isLoaded) {
+            $('.orb li:first ul:first img:first').remove();
+            $('.orb li:first ul:first img:last').remove();
+            $('.ribbon-list div img[src*="/arrow_down.png"]').remove();
+        }
+
+        if (!settings.backStage) {
+            $('.orb li:first ul:first').append('<img src="/images/jquery.ui/ribbon.' + settings.theme + '/menu_bottom.png" style="margin-left: -10px; margin-bottom: -22px;" />');
+            $('.orb li:first ul:first').prepend('<img src="/images/jquery.ui/ribbon.' + settings.theme + '/menu_top.png" style="margin-left: -10px; margin-top: -22px;" />');
+        }
+
+        $('.ribbon-list div').each(function() {
+			if ($(this).children('ul').length > 0) { 
+				$(this).append('<img src="/images/jquery.ui/ribbon.' + settings.theme + '/arrow_down.png" style="float: right; margin-top: 5px;" />')
+			}
+		});
+
+        //Hack for IE 7.
+        if (navigator.appVersion.indexOf('MSIE 6.0') > -1 || navigator.appVersion.indexOf('MSIE 7.0') > -1) {
+            $('ul.menu li li div').css('width', '90px');
+            $('ul.menu').css('width', '500px');
+            $('ul.menu').css('float', 'left');
+            $('ul.menu .submenu li div.ribbon-list').css('width', '100px');
+            $('ul.menu .submenu li div.ribbon-list div').css('width', '100px');
+        }
+
+        $('a[href=' + window.location.hash + ']').click();
+
+        //Add backstage class
+        if (settings.backStage) {
+            $('ul.ribbon .orb > li > ul').addClass('ribbon-backstage');
+            $('ul.ribbon-backstage').width('3000px');
+            $('ul.ribbon-backstage').height($(document).height());
+
+            $('ul.ribbon-backstage > li').width('130px');
+            $('ul.ribbon-backstage > li > a').width('125px');
+
+            $('ul.ribbon-backstage > li').addClass('ribbon-backstage-firstLevel');
+
+            $('ul.ribbon-backstage .ribbon-backstage-firstLevel > ul').addClass('ribbon-backstage-subMenu');
+
+            $('ul.ribbon-backstage .ribbon-backstage-firstLevel .ribbon-backstage-subMenu > div').addClass('ribbon-backstage-subMenu-header');
+        }
+
+        $('.ribbon-backstage-rightColumnWide').hide();
+        $('.ribbon-backstage-rightColumnSmall').hide();
+
+        isLoaded = true;
+
+        function ResetSubMenu() {
+            $('.menu li a').removeClass('active');
+            $('.menu ul').removeClass('submenu');
+            $('.menu li ul').hide();
+        }
+
+        function ShowSubMenu(e) {
+            $('.orb ul').fadeOut('fast');
+
+            var isActive = $(e).next().css('display') == 'block';
+            ResetSubMenu();
+
+            $(e).addClass('active');
+            $(e).parent().children('ul:first').addClass('submenu');
+
+            $(e).parent().children('ul:first').show();
+            $('body').css('padding-top', '120px');
+
+            isClosed = false;
+        }
+
+        function ShowOrbChildren(e, init) {
+            if (!settings.backStage) {
+                if (($(e).parent().children('ul').css('display') == 'none' || $(e).parent().children('ul').length == 0) && $(e).parent().parent().parent().parent().hasClass('orb')) {
+                    $('.orb li li ul').fadeOut('fast');
+
+                    if ($(e).parent().children('ul').length > 0)
+                        $(e).parent().children('ul').fadeIn('fast');
+                }
+            }
+
+            if (settings.backStage) {
+                if ($(e).parent().children('ul').length == 0 && $('ul.ribbon-backstage .ribbon-backstage-firstLevel .ribbon-backstage-subMenu:first:hidden').length > 0 && $(e).parent().parent().parent().parent().hasClass('orb')) {
+                    $('.orb li li ul').fadeOut('fast');
+                    $('.orb li li > div').fadeOut('fast');
+                    $('ul.ribbon-backstage .ribbon-backstage-firstLevel:first .ribbon-backstage-subMenu:first').fadeIn('fast');
+                    $('ul.ribbon-backstage .ribbon-backstage-firstLevel:first div').fadeIn('fast');
+                }
+
+                if ($(e).parent().children('ul').css('display') == 'none' && $(e).parent().children('ul').length > 0 && $(e).parent().parent().parent().parent().hasClass('orb')) {
+                    $('.orb li li ul').fadeOut('fast');
+                    $('.orb li li > div').fadeOut('fast');
+                    $(e).parent().children('ul').fadeIn('fast');
+                    $(e).parent().children('div').fadeIn('fast');
+                }
+
+                if (init) {
+                    $('.orb li li ul').hide();
+                    $('.orb li li > div').hide();
+                    $(e).parent().children('ul').fadeIn('fast');
+                    $(e).parent().children('div').fadeIn('fast');
+                }
+            }
+        }
+
+        function ShowMenu(backStage) {
+            //Show standard menu
+            if (!backStage) {
+                $('.orb ul').animate({ opacity: 'toggle' }, 'fast');
+                return;
+            }
+
+            //Show backstage
+            $('ul.ribbon-backstage .ribbon-backstage-firstLevel .ribbon-backstage-subMenu').height($(window).height() * 0.90);
+            $('ul.ribbon-backstage .ribbon-backstage-firstLevel div.ribbon-backstage-rightColumnWide').height($(window).height() * 0.90).width($(window).width());
+            $('ul.ribbon-backstage .ribbon-backstage-firstLevel div.ribbon-backstage-rightColumnSmall').parent().children('ul').width($(window).width()).addClass('ribbon-backstage-leftColumnWide');
+            $('ul.ribbon-backstage .ribbon-backstage-firstLevel div.ribbon-backstage-rightColumnSmall').height($(window).height() * 0.90).width('200px');
+            $('ul.ribbon-backstage .ribbon-backstage-firstLevel div.ribbon-backstage-rightColumnSmall').css('left', ($(window).width() - 200)).css('line-height', '17px');
+
+            $('.orb ul').animate({ opacity: 'toggle' }, 'fast');
+            ShowOrbChildren($('.orb li li a:first'), true);
+        }
+
+        function ShowAccessKeys(e) {
+            if (e.altKey) {
+                $('div[rel="accesskeyhelper"]').each(function() { $(this).css('top', $(this).parent().offset().top).css('left', $(this).parent().offset().left - 20 + $(this).parent().width()); $(this).show(); });
+            }
+        }
+
+        function HideAccessKeys(e) {
+            $('div[rel="accesskeyhelper"]').hide();
+        }
+    }
+})(jQuery);

data/templates/ribbon/jquery.ribbon.min.js

@@ -0,0 +1,14 @@
+(function(a){var f,h;a.fn.Ribbon=function(j){function k(b){a(".menu li a:first").addClass("active");a(".menu li ul").hide();a(".menu li a:first").parent().children("ul:first").show();a(".menu li a:first").parent().children("ul:first").addClass("submenu");a(".menu li > a").click(function(){l(this)});a(".orbButton").click(function(){m(b.backStage)});a(".orb ul").hide();a(".orb ul ul").hide();a(".orb li ul li ul").show();a(".orb li li ul").each(function(){a(this).prepend('<div style="background-color: #EBF2F7; height: 25px; line-height: 25px; width: 292px; padding-left: 9px; border-bottom: 1px solid #CFDBEB;">'+
+a(this).parent().children("a:first").text()+"</div>")});a(".orb li li a").each(function(){a(this).parent().children("ul").length>0&&a(this).addClass("arrow")});a(".orb .ribbon-backstage a").live("click",function(){a(".orb ul").fadeOut("fast")});a(".ribbon-list div").click(function(c){var e=a(this).parent().width(),g=c.pageX>a(this).offset().left&&c.pageX<a(this).offset().left+a(this).width();c=c.pageY>a(this).offset().top&&c.pageY<a(this).offset().top+a(this).height();a(".ribbon-list div ul").fadeOut("fast");
+if(g&&c){a(this).attr("style","background-image: "+a(this).css("background-image"));a(this).parent().width(e);a(this).children("ul").width(e-4);a(this).children("ul").fadeIn("fast")}});a(".ribbon-list div").parents().click(function(c){a(".ribbon-list div ul:visible").each(function(){var e=c.pageX<a(".ribbon-list div ul:visible").parent().offset().left||c.pageX>a(".ribbon-list div ul:visible").parent().offset().left+a(".ribbon-list div ul:visible").parent().width(),g=c.pageY<a(".ribbon-list div ul:visible").parent().offset().top||
+c.pageY>a(".ribbon-list div ul:visible").parent().offset().top+a(".ribbon-list div ul:visible").parent().height();if(e||g){a(".ribbon-list div ul:visible").each(function(){a(this).fadeOut("fast")});a(".ribbon-list div").css("background-image","")}})});a(".orb li li a").mouseover(function(){i(this)});a(".menu li > a").dblclick(function(){a("ul .submenu").animate({height:"hide"});a("body").animate({paddingTop:a(this).parent().parent().parent().parent().height()});h=true})}function n(){a(".menu li a").removeClass("active");
+a(".menu ul").removeClass("submenu");a(".menu li ul").hide()}function l(b){a(".orb ul").fadeOut("fast");a(b).next().css("display");n();a(b).addClass("active");a(b).parent().children("ul:first").addClass("submenu");a(b).parent().children("ul:first").show();a("body").css("padding-top","120px");h=false}function i(b,c){if(!d.backStage)if((a(b).parent().children("ul").css("display")=="none"||a(b).parent().children("ul").length==0)&&a(b).parent().parent().parent().parent().hasClass("orb")){a(".orb li li ul").fadeOut("fast");
+a(b).parent().children("ul").length>0&&a(b).parent().children("ul").fadeIn("fast")}if(d.backStage){if(a(b).parent().children("ul").length==0&&a("ul.ribbon-backstage .ribbon-backstage-firstLevel .ribbon-backstage-subMenu:first:hidden").length>0&&a(b).parent().parent().parent().parent().hasClass("orb")){a(".orb li li ul").fadeOut("fast");a(".orb li li > div").fadeOut("fast");a("ul.ribbon-backstage .ribbon-backstage-firstLevel:first .ribbon-backstage-subMenu:first").fadeIn("fast");a("ul.ribbon-backstage .ribbon-backstage-firstLevel:first div").fadeIn("fast")}if(a(b).parent().children("ul").css("display")==
+"none"&&a(b).parent().children("ul").length>0&&a(b).parent().parent().parent().parent().hasClass("orb")){a(".orb li li ul").fadeOut("fast");a(".orb li li > div").fadeOut("fast");a(b).parent().children("ul").fadeIn("fast");a(b).parent().children("div").fadeIn("fast")}if(c){a(".orb li li ul").hide();a(".orb li li > div").hide();a(b).parent().children("ul").fadeIn("fast");a(b).parent().children("div").fadeIn("fast")}}}function m(b){if(b){a("ul.ribbon-backstage .ribbon-backstage-firstLevel .ribbon-backstage-subMenu").height(a(window).height()*
+0.9);a("ul.ribbon-backstage .ribbon-backstage-firstLevel div.ribbon-backstage-rightColumnWide").height(a(window).height()*0.9).width(a(window).width());a("ul.ribbon-backstage .ribbon-backstage-firstLevel div.ribbon-backstage-rightColumnSmall").parent().children("ul").width(a(window).width()).addClass("ribbon-backstage-leftColumnWide");a("ul.ribbon-backstage .ribbon-backstage-firstLevel div.ribbon-backstage-rightColumnSmall").height(a(window).height()*0.9).width("200px");a("ul.ribbon-backstage .ribbon-backstage-firstLevel div.ribbon-backstage-rightColumnSmall").css("left",
+a(window).width()-200).css("line-height","17px");a(".orb ul").animate({opacity:"toggle"},"fast");i(a(".orb li li a:first"),true)}else a(".orb ul").animate({opacity:"toggle"},"fast")}function o(b){b.altKey&&a('div[rel="accesskeyhelper"]').each(function(){a(this).css("top",a(this).parent().offset().top).css("left",a(this).parent().offset().left-20+a(this).parent().width());a(this).show()})}function p(){a('div[rel="accesskeyhelper"]').hide()}var d=a.extend({theme:"windows7",backStage:false},j||{});a(".ribbon a").each(function(){a(this).attr("accesskey")&&
+a(this).append('<div rel="accesskeyhelper" style="display: none; position: absolute; background-image: url(images/accessbg.png); background-repeat: none; width: 16px; padding: 0px; text-align: center; height: 17px; line-height: 17px; top: '+a(this).offset().top+"px; left: "+(a(this).offset().left+a(this).width()-15)+'px;">'+a(this).attr("accesskey")+"</div>")});a("head").append('<link href="/stylesheets/compiled/jquery.ui/ribbon.'+d.theme+'.css" rel="stylesheet" type="text/css" />" />');f||k(d);a(document).keydown(function(b){o(b)});
+a(document).keyup(function(b){p(b)});a(".ribbon").parents().click(function(b){var c=b.pageX<a(".orb ul:first").offset().left||b.pageX>a(".orb ul:first").offset().left+a(".orb ul:first").width();b=b.pageY<a(".orb ul:first img:first").offset().top||b.pageY>a(".orb ul:first").offset().top+a(".orb ul:first").height();if((c||b)&&!d.backStage)a(".orb ul").fadeOut("fast")});if(f){a(".orb li:first ul:first img:first").remove();a(".orb li:first ul:first img:last").remove();a('.ribbon-list div img[src*="/arrow_down.png"]').remove()}if(!d.backStage){a(".orb li:first ul:first").append('<img src="/images/jquery.ui/ribbon.'+
+d.theme+'/menu_bottom.png" style="margin-left: -10px; margin-bottom: -22px;" />');a(".orb li:first ul:first").prepend('<img src="/images/jquery.ui/ribbon.'+d.theme+'/menu_top.png" style="margin-left: -10px; margin-top: -22px;" />')}a(".ribbon-list div").each(function(){a(this).children("ul").length>0&&a(this).append('<img src="/images/jquery.ui/ribbon.'+d.theme+'/arrow_down.png" style="float: right; margin-top: 5px;" />')});if(navigator.appVersion.indexOf("MSIE 6.0")>-1||navigator.appVersion.indexOf("MSIE 7.0")>
+-1){a("ul.menu li li div").css("width","90px");a("ul.menu").css("width","500px");a("ul.menu").css("float","left");a("ul.menu .submenu li div.ribbon-list").css("width","100px");a("ul.menu .submenu li div.ribbon-list div").css("width","100px")}a("a[href="+window.location.hash+"]").click();if(d.backStage){a("ul.ribbon .orb > li > ul").addClass("ribbon-backstage");a("ul.ribbon-backstage").width("3000px");a("ul.ribbon-backstage").height(a(document).height());a("ul.ribbon-backstage > li").width("130px");
+a("ul.ribbon-backstage > li > a").width("125px");a("ul.ribbon-backstage > li").addClass("ribbon-backstage-firstLevel");a("ul.ribbon-backstage .ribbon-backstage-firstLevel > ul").addClass("ribbon-backstage-subMenu");a("ul.ribbon-backstage .ribbon-backstage-firstLevel .ribbon-backstage-subMenu > div").addClass("ribbon-backstage-subMenu-header")}a(".ribbon-backstage-rightColumnWide").hide();a(".ribbon-backstage-rightColumnSmall").hide();f=true}})(jQuery);

data/templates/ribbon/jquery.ui/ribbon.simple.scss

@@ -0,0 +1,271 @@
+// Generated by compass-jquery-plugin/gem-tasks/ribbon.rake
+
+.clear {
+  clear: both;
+  font-size: 1px;
+  line-height: 1px; }
+
+ul.ribbon {
+  margin: 0px;
+  padding: 0px;
+  font-size: 0.8em;
+  * {
+    margin: 0px;
+    padding: 0px;
+    list-style-type: none; }
+  ul ul {
+    /*display: none;*/
+    ul {
+      display: block;
+      li {
+        display: block;
+        float: none; } } }
+  float: left;
+  position: relative;
+  width: 100%;
+  .orb {
+    display: block;
+    width: 56px;
+    height: 22px;
+    background-image: image_url("jquery.ui/ribbon.simple/orb.png");
+    background-position: right bottom;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    padding: 0px;
+    position: relative;
+    z-index: 100;
+    margin-top: -4px;
+    top: 1px;
+    li ul {
+      background-image: image_url("jquery.ui/ribbon.simple/menu_middle.png");
+      background-repeat: repeat-y;
+      background-position: right; }
+    &:hover {
+      background-image: image_url("jquery.ui/ribbon.simple/orb_hover.png"); }
+    span {
+      display: none; }
+    li {
+      margin-top: 10px;
+      margin-left: 10px; }
+    ul {
+      background-color: white;
+      width: 499px;
+      padding: 10px;
+      margin-top: 0px;
+      margin-left: -11px;
+      z-index: 25;
+      position: absolute;
+      top: 10px;
+      left: 11px; }
+    li ul li {
+      margin-top: 0px;
+      margin-left: -9px;
+      padding-left: 9px;
+      width: 205px;
+      a {
+        width: 190px;
+        &.arrow {
+          background-image: image_url("jquery.ui/ribbon.simple/arrow.png");
+          background-repeat: no-repeat;
+          background-position: center right; } } } } }
+
+li.arrow {
+  background-image: image_url("jquery.ui/ribbon.simple/arrow_down.png");
+  background-repeat: no-repeat;
+  background-position: center right; }
+
+ul {
+  &.ribbon {
+    .orb {
+      li ul li {
+        ul {
+          position: absolute;
+          top: 13px;
+          left: 230px;
+          background-image: none;
+          background-color: Transparent;
+          width: 291px;
+          padding: 0px;
+          margin-left: -14px;
+          margin-top: 0px;
+          li {
+            width: 100%;
+            margin: 0px;
+            height: 53px;
+            line-height: 53px;
+            a {
+              width: 100%;
+              margin: 0px;
+              height: 53px;
+              line-height: 53px;
+              font-weight: bold; }
+            &:hover {
+              background-image: image_url("jquery.ui/ribbon.simple/orb_submenu_item_hover.png");
+              background-repeat: repeat-x;
+              height: 51px;
+              margin: 0px;
+              line-height: 51px;
+              a {
+                height: 51px;
+                line-height: 51px; } } } }
+        &:hover {
+          background-image: image_url("jquery.ui/ribbon.simple/menu_item_hover.png");
+          background-repeat: no-repeat;
+          padding-left: 8px;
+          border: 1px solid #ffb700;
+          height: 40px;
+          line-height: 38px; } }
+      ul a {
+        clear: both;
+        display: block;
+        vertical-align: middle;
+        position: relative;
+        text-decoration: none;
+        width: 214px;
+        height: 42px;
+        line-height: 42px;
+        &:hover {
+          height: 40px;
+          line-height: 40px; }
+        img {
+          position: absolute;
+          bottom: 7px; }
+        &:hover img {
+          position: absolute;
+          bottom: 6px; } }
+      li ul li ul li {
+        a img {
+          position: absolute;
+          bottom: 13px; }
+        &:hover a img {
+          position: absolute;
+          bottom: 12px; } }
+      ul a span {
+        display: inline;
+        left: 40px;
+        top: 0px;
+        position: absolute; } }
+    a {
+      outline: none; } }
+  &.menu {
+    clear: both;
+    padding-left: 60px;
+    margin-top: -32px;
+    margin-left: 10px;
+    width: 1000px;
+    li {
+      float: left;
+      a {
+        display: block;
+        padding-top: 3px;
+        text-decoration: none;
+        margin-right: 0px;
+        margin-top: 10px;
+        height: 20px;
+        width: 75px;
+        text-align: center;
+        &.active {
+          background-color: #d9e3f3;
+          background-image: image_url("jquery.ui/ribbon.simple/menuitem_background.png");
+          background-repeat: no-repeat; } } }
+    .submenu {
+      display: block;
+      position: absolute;
+      left: 0px;
+      width: 100%;
+      height: 90px;
+      border: 1px solid #3b5a82;
+      border-bottom: 1px solid #9faec2;
+      border-top: 0px;
+      background-image: image_url("jquery.ui/ribbon.simple/menu_background.png");
+      background-repeat: repeat-x;
+      border-top: 0px;
+      margin-left: -1px;
+      z-index: 0;
+      border-top: 1px solid #8db2e3;
+      li {
+        height: 80px;
+        cursor: pointer;
+        margin-top: 5px;
+        position: relative;
+        padding: 0px 5px 0px 5px; } } } }
+
+.submenu h2 {
+  font-family: Calibri;
+  font-size: 11px;
+  font-weight: normal;
+  margin: 0px auto;
+  top: 65px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  position: absolute; }
+
+ul.menu li {
+  ul {
+    li div {
+      padding: 5px;
+      padding-top: 1px;
+      text-align: center;
+      margin: 2px;
+      height: 55px;
+      float: left;
+      &:hover {
+        padding: 4px;
+        padding-top: 0px;
+        background-image: image_url("jquery.ui/ribbon.simple/item_background.png");
+        background-repeat: repeat-x;
+        height: 52px;
+        border: 1px solid #ffb700; } }
+    div.ribbon-list {
+      padding: 0px 5px 0px 5px;
+      &:hover {
+        background-image: none;
+        border: 0px;
+        padding: 0px 5px 0px 5px; }
+      div {
+        padding: 1px;
+        text-align: left;
+        margin: 1px;
+        height: 18px;
+        line-height: 18px;
+        float: none; }
+      input {
+        margin-top: 3px;
+        margin-right: 3px; }
+      div {
+        img {
+          float: left;
+          padding: 2px;
+          padding-right: 3px; }
+        &:hover {
+          padding: 0px;
+          background-image: image_url("jquery.ui/ribbon.simple/item_small_background.png");
+          background-repeat: repeat-x;
+          height: 18px;
+          border: 1px solid #ffb700; } }
+      ul {
+        background-color: white;
+        position: absolute;
+        margin-left: -1px;
+        border: 1px solid #8492a6;
+        li {
+          background-image: image_url("jquery.ui/ribbon.simple/menu_dropdownitembg.png");
+          background-repeat: repeat-y;
+          margin: 0px;
+          border: 0px;
+          height: auto;
+          padding: 1px;
+          padding-left: 30px;
+          &:hover {
+            background-image: image_url("jquery.ui/ribbon.simple/menu_dropdownitembghover.png");
+            background-repeat: repeat-x;
+            border: 1px solid #ffb700;
+            padding: 0px;
+            padding-left: 29px; } } } }
+    li div img {
+      padding-top: 5px;
+      display: block;
+      margin: 0px auto; } }
+  li {
+    border-right: 1px solid #aabbcc; } }