MDL-35654 theme_anomaly: Added custom menu renderer to aid RTL styling of menu
authorMary Evans <lazydaisy@visible-expression.co.uk>
Fri, 28 Sep 2012 01:18:48 +0000 (02:18 +0100)
committerMary Evans <lazydaisy@visible-expression.co.uk>
Fri, 28 Sep 2012 01:57:54 +0000 (02:57 +0100)
theme/anomaly/config.php
theme/anomaly/pix/menu/nav-arrow-left.jpg [new file with mode: 0644]
theme/anomaly/pix/menu/nav-arrow-right.jpg [new file with mode: 0644]
theme/anomaly/pix/menu/nav-arrowover-left.jpg [new file with mode: 0644]
theme/anomaly/pix/menu/nav-arrowover-right.jpg [new file with mode: 0644]
theme/anomaly/renderers.php
theme/anomaly/style/general.css
theme/anomaly/style/menu.css [new file with mode: 0644]

index 1f32394..d435a8d 100644 (file)
@@ -7,7 +7,7 @@
 
 $THEME->name = 'anomaly';
 
-$THEME->sheets = array('base', 'general', 'browser','dock');
+$THEME->sheets = array('base', 'general', 'browser', 'dock', 'menu');
 /// This variable is an array containing the names of all the
 /// stylesheet files you want included in this theme, and in what order
 ////////////////////////////////////////////////////////////////////////////////
diff --git a/theme/anomaly/pix/menu/nav-arrow-left.jpg b/theme/anomaly/pix/menu/nav-arrow-left.jpg
new file mode 100644 (file)
index 0000000..177f823
Binary files /dev/null and b/theme/anomaly/pix/menu/nav-arrow-left.jpg differ
diff --git a/theme/anomaly/pix/menu/nav-arrow-right.jpg b/theme/anomaly/pix/menu/nav-arrow-right.jpg
new file mode 100644 (file)
index 0000000..e9a89f5
Binary files /dev/null and b/theme/anomaly/pix/menu/nav-arrow-right.jpg differ
diff --git a/theme/anomaly/pix/menu/nav-arrowover-left.jpg b/theme/anomaly/pix/menu/nav-arrowover-left.jpg
new file mode 100644 (file)
index 0000000..596b6ff
Binary files /dev/null and b/theme/anomaly/pix/menu/nav-arrowover-left.jpg differ
diff --git a/theme/anomaly/pix/menu/nav-arrowover-right.jpg b/theme/anomaly/pix/menu/nav-arrowover-right.jpg
new file mode 100644 (file)
index 0000000..15f8cf1
Binary files /dev/null and b/theme/anomaly/pix/menu/nav-arrowover-right.jpg differ
index d5b8296..016f2fb 100644 (file)
@@ -81,4 +81,89 @@ class theme_anomaly_core_renderer extends core_renderer {
         return $output;
     }
 
+    /**
+     * Renders a custom menu object (located in outputcomponents.php)
+     *
+     * The custom menu this method override the render_custom_menu function
+     * in outputrenderers.php
+     * @staticvar int $menucount
+     * @param custom_menu $menu
+     * @return string
+     */
+    protected function render_custom_menu(custom_menu $menu) {
+
+        // If the menu has no children return an empty string
+        if (!$menu->has_children()) {
+            return '';
+        }
+
+        // Add a login or logout link
+        if (isloggedin()) {
+            $branchlabel = get_string('logout');
+            $branchurl   = new moodle_url('/login/logout.php');
+        } else {
+            $branchlabel = get_string('login');
+            $branchurl   = new moodle_url('/login/index.php');
+        }
+        $branch = $menu->add($branchlabel, $branchurl, $branchlabel, -1);
+
+        // Initialise this custom menu
+        $content = html_writer::start_tag('ul', array('class'=>'dropdown dropdown-horizontal'));
+        // Render each child
+        foreach ($menu->get_children() as $item) {
+            $content .= $this->render_custom_menu_item($item);
+        }
+        // Close the open tags
+        $content .= html_writer::end_tag('ul');
+        // Return the custom menu
+        return $content;
+    }
+
+    /**
+     * Renders a custom menu node as part of a submenu
+     *
+     * The custom menu this method override the render_custom_menu_item function
+     * in outputrenderers.php
+     *
+     * @see render_custom_menu()
+     *
+     * @staticvar int $submenucount
+     * @param custom_menu_item $menunode
+     * @return string
+     */
+    protected function render_custom_menu_item(custom_menu_item $menunode) {
+        // Required to ensure we get unique trackable id's
+        static $submenucount = 0;
+        $content = html_writer::start_tag('li');
+        if ($menunode->has_children()) {
+            // If the child has menus render it as a sub menu
+            $submenucount++;
+            if ($menunode->get_url() !== null) {
+                $url = $menunode->get_url();
+            } else {
+                $url = '#cm_submenu_'.$submenucount;
+            }
+            $content .= html_writer::start_tag('span', array('class'=>'customitem'));
+            $content .= html_writer::link($url, $menunode->get_text(), array('title'=>$menunode->get_title()));
+            $content .= html_writer::end_tag('span');
+            $content .= html_writer::start_tag('ul');
+            foreach ($menunode->get_children() as $menunode) {
+                $content .= $this->render_custom_menu_item($menunode);
+            }
+            $content .= html_writer::end_tag('ul');
+        } else {
+            // The node doesn't have children so produce a final menuitem
+
+            if ($menunode->get_url() !== null) {
+                $url = $menunode->get_url();
+            } else {
+                $url = '#';
+            }
+            $content .= html_writer::link($url, $menunode->get_text(), array('title'=>$menunode->get_title()));
+        }
+        $content .= html_writer::end_tag('li');
+        // Return the sub menu
+        return $content;
+    }
+
 }
\ No newline at end of file
index d695186..cfc2ecf 100644 (file)
@@ -11,21 +11,17 @@ a:visited {
 a:hover {
     text-decoration: underline;
 }
-
 img.icon,
 img.iconhelp {
     vertical-align: middle;
 }
-
 html, body {
     background-color: #C8C9C7;
 }
-
 #page-content {
     background-color: #FFF;
     min-width: 0;
 }
-
 /** Header **/
 
 #page-header {
@@ -36,14 +32,12 @@ html, body {
     padding: 0;
     width: 100%;
 }
-
 h1.headermain {
     float: left;
     font-size: 2.3em;
     margin: 15px;
     line-height: 1;
 }
-
 #page-header .headermain span {
     color: #C8C9C7;
 }
@@ -54,7 +48,6 @@ h1.headermain {
     border-bottom-color: #3A4D28;
     border-bottom-width: 3px;
 }
-
 #page-header .navbar {
     background-color: #697F55;
     width: 100%;
@@ -96,7 +89,6 @@ h1.headermain {
     background-color: #E3E3E3;
     padding: 4px 5px;
 }
-
 .coursebox {
     width: 100%;
     margin: 10px 0;
@@ -120,55 +112,44 @@ h1.headermain {
 .course-content .headingblock.outline {
     margin-top: 0;
 }
-
 .course-content .section.main {
     border:1px solid #E3E3E3;
     margin-bottom: 10px;
 }
-
 .course-content .section.main .left.side {
     float:left;width:20px;padding:5px;
 }
-
 .course-content .section.main .right.side {
     float: right;
     width: 20px;
     padding: 5px;
 }
-
 .course-content .section.main .content {
     padding: 5px 5px 10px;
     background-color: #FFF;
 }
-
 .course-content .section.main .content .section_add_menus {
     text-align: right;
 }
-
 #page-report-outline-user .section {
     border: 1px solid #DDD;
     margin: 0 5% 1.5em 5%;
 }
-
 #page-report-outline-user .section h2,
 #page-report-outline-user .section .content {
     margin: 5px 1em;
 }
-
 #page-report-outline-user .section table td {
     border: 0;
 }
-
 .generaltable {
     border: 1px solid #DDD;
 }
-
 .generaltable .cell {
     background-color: #FFF;
     border:1px solid #EEE;
     border-collapse: collapse;
 }
-
 .generaltable .header {
     background-color: #EEE;
     border: 1px solid #EEE;
@@ -180,17 +161,14 @@ h1.headermain {
     margin-top: 15px;
     margin-bottom: 15px;
 }
-
 .loginbox .loginform {
     margin-top: 15px;
 }
-
 .loginbox .loginform .form-label {
     width: 44%;
     float: left;
     text-align: right;
 }
-
 .loginbox .loginform .form-input {
     width: 55%;
     float: right;
@@ -200,42 +178,34 @@ h1.headermain {
 .loginbox .loginform .form-input input {
     width: 6em;
 }
-
 .loginbox.twocolumns {
     border: 1px solid #DDD;
 }
-
 .loginbox.twocolumns .loginpanel {
     float: left;
     width: 49%;
     text-align: center;
 }
-
 .loginbox.twocolumns .signuppanel {
     float: left;
     width: 50%;
     border-left: 1px solid #DDD;
 }
-
 .loginbox.twocolumns .signuppanel h2 {
     text-align: center;
 }
-
 .loginbox.twocolumns .signuppanel div {
     margin: 1em;
 }
-
 .loginbox.twocolumns .signuppanel div li {
     font-size: 90%;
 }
-
 .loginbox .loginsub {
     margin-left: 10%;
     margin-right: 10%;
     padding: 10px;
     margin-bottom: 5px;
 }
-
 .loginbox .guestsub {
     margin-left: 10%;
     margin-right: 10%;
@@ -243,7 +213,6 @@ h1.headermain {
     margin-bottom: 5px;
     border-top: 1px solid #DDD;
 }
-
 .dir-rtl .loginbox .loginform .form-input {width:50%}
 
 /** Blocks **/
@@ -260,15 +229,12 @@ h1.headermain {
 .block h4 {
     margin: 0;
 }
-
 .block .header {
     margin: 10px 6px 3px 6px;
 }
-
 .block .content {
     margin: 10px 6px 3px 6px;
 }
-
 /** Admin **/
 .box.adminwarning {
     text-align: center;
@@ -282,62 +248,50 @@ h1.headermain {
     font-size: 90%;
     padding: 10px 10%;
 }
-
 #adminsettings fieldset {
     border: 1px solid #C8C9C7;
     background-color: #E3E3E3;
 }
-
 #adminsettings fieldset .generalbox {
     margin: 1em 0.5em;
     border-color: #C8C9C7;
 }
-
 #adminsettings .form-buttons {
     margin-left: 13em;
 }
-
 .form-item {
     width: 100%;
     margin: 1em 1em 2em 1em;
 }
-
 .form-item .form-label {
     width: 12.5em;
     text-align: right;
     float: left;
     margin-right: 0.5em;
 }
-
 .form-item .form-label .form-shortname {
     display: block;
     color: #666;
     font-size: 75%;
 }
-
 .form-item .form-setting {
     margin-left: 13em;
 }
-
 .form-item .form-setting .defaultsnext {
     display:inline;
 }
-
 .form-item .form-setting .form-defaultinfo {
     display: inline;
     margin-left: 0.5em;
     font-size: 90%;
     color: #666;
 }
-
 .form-item .form-description {
     margin: 0.5em 1em 0.5em 13em;
 }
-
 .form-item .form-textarea textarea {
     width: 495px;
 }
-
 #authmenu .informationbox {
     width: 80%;
     margin: 0 auto 10px;
@@ -347,13 +301,11 @@ h1.headermain {
 #authmenu table td {
     border-width: 0;
 }
-
 #categoryquestions {
     margin-left: auto;
     margin-right: auto;
     width: 100%;
 }
-
 #categoryquestions th,
 .user th,
 .user th.header,
@@ -365,7 +317,6 @@ h1.headermain {
     border: 2px solid #697F55;
     border-bottom-color: #111;
 }
-
 .user th a:link,
 #categoryquestions th a:link,
 .group  th a:link,
@@ -373,7 +324,6 @@ h1.headermain {
     color: #FFF;
     text-decoration: none;
 }
-
 .user th a:visited,
 #categoryquestions th a:visited,
 .group th a:visited,
@@ -381,7 +331,6 @@ h1.headermain {
     color: #FFF;
     text-decoration: underline;
 }
-
 .user tr td.cell,
 #categoryquestions tr td.cell,
 .group tr td.cell,
@@ -389,39 +338,32 @@ h1.headermain {
     border: 1px solid #C8C9C7;
     border-width: 0 1px;
 }
-
 .user .r1 .cell,
 #categoryquestions .r1 .cell,
 .group .r1 .cell,
 .admin table .r1 .cell {
     background-color: #EEE;
 }
-
 .singlebutton,
 .buttons {
     text-align: center;
     margin: 20px;
 }
-
 .buttons form {
     display: inline;
 }
-
 .buttons div {
     display: inline;
 }
-
 .buttons .singlebutton {
     display: inline;
     padding: 5px;
     margin: 0;
 }
-
 .admin .generalbox {
     background-color: #EEE;
     border-color: #C8C9C7;
 }
-
 #admin-mnet-index table td,
 #files-index .column-content table td {
     border-width: 0;
@@ -436,7 +378,6 @@ h1.headermain {
 .tag-management-form {
     text-align:center;
 }
-
 #tag-management-list {
     margin-top:1em;
 }
@@ -446,12 +387,10 @@ h1.headermain {
     border-width: 0;
     vertical-align: top;
 }
-
 .userinfobox .side {
     width: 120px;
     text-align: center;
 }
-
 .userinfobox .list .label {font-weight:bold;text-align:right;
 }
 
@@ -463,7 +402,6 @@ h1.headermain {
     border: 1px solid #DDD;
     border-collapse: separate;
 }
-
 .forumpost,
 .forumpost .left.picture {
     background-color: #EEE;
@@ -484,13 +422,11 @@ h1.headermain {
 .forumpost .topic .author {
     padding-left: 10px;
 }
-
 .forumpost .content,
 .forumpost .options {
     background-color: white;
     padding-top: 10px;
 }
-
 .forumpost .content .shortenedpost a {
     margin: 0 10px;
     padding: 0;
@@ -505,7 +441,6 @@ h1.headermain {
 .forumpost .options .link {
     padding-right: 10px;
 }
-
 .forumpost .content .shortenedpost a,
 .forumpost .content .shortenedpost span.post-word-count,
 .forumpost .commands,
@@ -517,13 +452,11 @@ h1.headermain {
 .forumpost .row .left {
     clear: left;
 }
-
 .forumpost .posting.shortenedpost {margin-left: 10px;}
 
 #page-mod-forum-discuss #page-header { /* fixes broken header in forum discuss */
     margin-top: 10px;
 }
-
 /** Calendar **/
 .block.block_calendar_month td,
 .block.block_calendar_month th {
@@ -533,12 +466,10 @@ h1.headermain {
     width: 14%;
     line-height: 18px;
 }
-
 #calendar abbr,
 .block.block_calendar_month abbr {
     border-bottom-width: 0;
 }
-
 #calendar .weekend,
 .block.block_calendar_month .weekend {
     color: #A00;
@@ -547,19 +478,16 @@ h1.headermain {
 .block.block_calendar_month .today {
     border: 1px solid #444;
 }
-
 #calendar .eventnone a,
 .block.block_calendar_month .eventnone a {
     color:#444;
 }
-
 #calendar {
     width: 98%;
     margin: 0 1%;
     border-spacing: 5px;
     border-collapse: separate;
 }
-
 #calendar td,
 #calendar th {
     border-width: 0;
@@ -569,43 +497,35 @@ h1.headermain {
     line-height: 18px;
     vertical-align: top;
 }
-
 #calendar .maincalendar {
     width: auto;
     border: 1px solid #DDD;
 }
-
 #calendar .maincalendar .heightcontainer {
     height: 100%;
     position: relative;
     margin: 1em;
 }
-
 #calendar .maincalendar .header {
     padding: 5px;
     font-weight: bold;
 }
-
 #calendar .maincalendar .header .buttons {
     float: right;
 }
-
 #calendar .maincalendar table {
     width: 100%;
 }
-
 #calendar .maincalendar .calendar-controls {
     width: 100%;
     overflow: hidden;
     font-size: 1.1em;
 }
-
 #calendar .maincalendar .calendar-controls .previous {
     display: block;
     float: left;
     width: 20%;
 }
-
 #calendar .maincalendar .calendar-controls .current {
     display: block;
     float: left;
@@ -613,43 +533,35 @@ h1.headermain {
     text-align: center;
     margin-top: 0;
 }
-
 #calendar .maincalendar .calendar-controls .next {
     display: block;
     float: left;
     width: 20%;
     text-align: right;
 }
-
 #calendar .sidecalendar {
     width: 200px;
 }
-
 #calendar .sidecalendar h2,
 #calendar .sidecalendar h3 {
     margin: 5px;
     font-size: 95%;
 }
-
 #calendar .sidecalendar .block {
     border: 1px solid #DDD;
     margin-bottom: 10px;
     text-align: center;
 }
-
 #calendar .sidecalendar .block table {
     margin: 0 auto 5px;
 }
-
 #calendar .sidecalendar .block .filters table {
     width: 95%;
     margin: 0 auto 1em;
 }
-
 #calendar .sidecalendar .block .minicalendarblock {
     border-top: 1px solid #DDD;
 }
-
 #calendar .filters table {
     padding: 2px;
     background-color: #EEE;
@@ -657,7 +569,6 @@ h1.headermain {
     border-spacing: 2px;
     border-collapse: separate;
 }
-
 #calendar .filters table td {
     font-size: 100%;
     width: auto;
@@ -667,91 +578,73 @@ h1.headermain {
     border: 1px solid #444;
     overflow: hidden;
 }
-
 #calendar .calendar_event_global {
     background-color: #D6F8CD;
 }
-
 #calendar .calendar_event_course {
     background-color: #FFD3BD;
 }
-
 #calendar .calendar_event_group {
     background-color: #FEE7AE;
 }
-
 #calendar .calendar_event_user {
     background-color: #DCE7EC;
 }
-
 #calendar .maincalendar .calendarmonth {
     border-collapse: separate;
 }
-
 #calendar .maincalendar .calendarmonth th {
     font-size: 0.9em;
     border-bottom: 2px solid #444;
 }
-
 #calendar .maincalendar .calendarmonth td {
     border: 1px solid #EEE;
     border-bottom-color: #CCC;
     border-right-color: #CCC;
     height: 6em;
 }
-
 #calendar .maincalendar .calendarmonth td div {margin:4px;font-size:0.9em;
 }
 
 #calendar .maincalendar .calendarmonth td .day {font-weight:bold;
 }
-
 #calendar .maincalendar .calendarmonth tr td:first-child {
     border-left-color: #CCC;
 }
-
 #calendar .maincalendar .event {
     border-spacing: 0;
     border: 1px solid #DDD;
     background-color: #EEE;
 }
-
 #calendar .maincalendar .event .picture {
     width: 32px;
     text-align: center;
 }
-
 #calendar .maincalendar .event .topic {
     width: auto;
     padding: 5px;
 }
-
 #calendar .maincalendar .event .side {
     width: 32px;
 }
-
 #calendar .maincalendar .event .description {
     width: auto;
     border-top: 1px solid #DDD;
     border-left:1px solid #DDD;
     padding: 5px;
 }
-
 #calendar .maincalendar .bottom {
     text-align: center;
 }
-
 #calendar .calendarmonth ul {
     margin: 0;
     padding: 0;
 }
-
 #calendar .calendarmonth ul li {
     list-style: none;
     margin: 0;
     padding: 2px;
 }
-
 /** User **/
 
 .user .rolesform,
@@ -760,14 +653,11 @@ h1.headermain {
 .user #participantsform {
     text-align:center;
 }
-
 .user #participantsform table {
     margin-top:1em;
 }
-
 .user #participantsform td {text-align:left;
 }
-
 .user table.controls {
     margin: 5px auto;
     border: 1px solid #DDD;
@@ -777,7 +667,6 @@ h1.headermain {
 .user table.controls td {
     border-width:0px;
 }
-
 /** Overide for RTL layout **/
 
 .dir-rtl #page-header .navbar .breadcrumb {
@@ -787,53 +676,6 @@ h1.headermain {
     float:left;
 }
 
-/** Custom menu **/
-
-#custommenu {
-    margin-bottom: 0;
-}
-
-#custommenu .yui3-menu-horizontal .yui3-menu-content,
-#custommenu .yui3-menu-horizontal.javascript-disabled .yui3-menu-content,
-#custommenu .yui3-menu-horizontal .yui3-menu-content ul,
-#custommenu .yui3-menu-horizontal.javascript-disabled .yui3-menu-content ul,
-#custommenu .yui3-menu-horizontal.javascript-disabled .yui3-menu-content li li:hover > a,
-#custommenu .yui3-menu-horizontal .yui3-menu-label,
-#custommenu .yui3-menuitem,
-#custommenu .yui3-menuitem .yui3-menuitem-content {
-    border-width: 0;
-}
-
-#custommenu .yui3-menu .yui3-menu-label,
-#custommenu .yui3-menu .yui3-menuitem-content {
-    color: #FFF;
-    font-weight: bold;
-    line-height: 30px;
-    padding: 0 14px;
-}
-
-#custommenu .custom_menu_submenu .yui3-menu-content{
-    background-color: #3A4D28;
-}
-
-#custommenu .yui3-menuitem-active .yui3-menuitem-content {
-    background-image: none;
-}
-
-#custommenu .custom_menu_submenu .yui3-menu-label,
-#custommenu .custom_menu_submenu .yui3-menuitem-content {
-    line-height: 25px;
-    padding: 0 20px;
-}
-
-#custommenu .yui3-menu-label-active,
-#custommenu .yui3-menu-label-menuvisible,
-#custommenu .yui3-menuitem-active .yui3-menuitem-content,
-#custommenu .yui3-menu .yui3-menu .yui3-menuitem-active .yui3-menuitem-content,
-#custommenu .yui3-menu-horizontal.javascript-disabled li a:hover {
-    background-color: #697F55;
-}
-
 /* Add Block
 -------------------------*/
 .block .content .singleselect form#add_block .select.menubui_addblock { width: 160px;}
diff --git a/theme/anomaly/style/menu.css b/theme/anomaly/style/menu.css
new file mode 100644 (file)
index 0000000..09a8c14
--- /dev/null
@@ -0,0 +1,221 @@
+/* Custom menu, in LTR mode
+--------------------------*/
+#custommenu {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    clear: both;
+    height: 30px;
+    background: #222;
+    margin:0;
+}
+/*
+Dropdown Menu - CSS from DeCaf Theme by Lei Zhang
+-------------------------------------------------*/
+ul.dropdown span.customitem {
+    padding: 0;
+    border: 0;
+    width: 100%;
+}
+ul.dropdown span.customitem {
+    padding: 0;
+    width: 100%;
+}
+ul.dropdown li a,
+ul.dropdown span.customitem a {
+    padding: 6px 20px;
+}
+ul.dropdown span.customitem a:hover {
+    border: 0;
+}
+#custommenu ul.dropdown ul {
+    padding:0;
+    width: auto;
+}
+#custommenu ul.dropdown ul a {
+    padding: 4px 18px;
+}
+#custommenu ul.dropdown > li span a {
+    height: 16px;
+}
+ul.dropdown,
+ul.dropdown li,
+ul.dropdown ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+ul.dropdown {
+    position:relative;
+    top: 0;
+    z-index: 597;
+    float:left;
+    font-size: 13px;
+}
+ul.dropdown li {
+    float: left;
+    line-height: 1.3em;
+    vertical-align: middle;
+    background-color: transparent;
+    color: #FFF;
+    zoom: 1;
+}
+ul.dropdown li.hover,
+ul.dropdown li:hover {
+    position: relative;
+    z-index: 599;
+    cursor: default;
+}
+ul.dropdown ul {
+    visibility: hidden;
+    position: absolute;
+    top: 100%;
+    z-index: 598;
+    left: 0;
+    right: auto;
+    margin-top: -1px; /** this setting is important do not change **/
+    font-size: 100%;
+}
+ul.dropdown ul li {
+    float:none;
+    background-color: #3A4D28;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #3A4D28 #697F55 #5A6D49; /** menu item border **/
+    padding: 0;
+}
+ul.dropdown ul ul {
+    top: 0;
+    right: auto;
+    left: 100%;
+    margin-top: 0;
+    border-top: none;
+    border-left: none;
+    font-weight: 400;
+}
+ul.dropdown li:hover > ul {
+    visibility: visible;
+}
+ul.dropdown span,
+ul.dropdown span a,
+ul.dropdown li.clickable-with-children > a {
+    width: auto;
+    padding: 2px 6px 4px 20px;
+    color: #FFF;
+}
+ul.dropdown ul span,
+ul.dropdown ul span a,
+ul.dropdown ul li.clickable-with-children > a {
+    background-color: #3A4D28;
+    background-image: url([[pix:theme|menu/nav-arrow-right]]);
+    background-position: 100% 50%;
+    background-repeat: no-repeat;
+    color: #FFF;
+}
+ul.dropdown ul ul span,
+ul.dropdown ul ul span a,
+ul.dropdown ul ul li.clickable-with-children > a {
+    background-color: #3A4D28;
+    background-image: url([[pix:theme|menu/nav-arrow-right]]);
+    background-position: 100% 50%;
+    background-repeat: no-repeat;
+    color: #FFF;
+}
+ul.dropdown a:link,
+ul.dropdown a:visited {
+    color: white;
+    text-decoration: none;
+}
+ul.dropdown a:hover {
+    border: 0 none;
+    background-color: #697F55;
+    color: #FFF;
+}
+ul.dropdown ul ul li {
+    background-color: #3A4D28;
+}
+ul.dropdown ul ul ul li {
+    background-color: #3A4D28;
+}
+ul.dropdown li a,
+ul.dropdown span,
+ul.dropdown span a {
+    border: 0 none;
+}
+ul.dropdown ul li a,
+ul.dropdown ul span,
+ul.dropdown ul span a {
+    border: 0;
+}
+ul.dropdown ul ul li a,
+ul.dropdown ul ul span,
+ul.dropdown ul ul span a {
+    border: 0 none;
+}
+ul.dropdown ul ul ul li a,
+ul.dropdown ul ul ul span,
+ul.dropdown ul ul ul span a {
+    border: 0 none;
+}
+ul.dropdown a,
+ul.dropdown span {
+    display: block;
+}
+ul.dropdown ul a {
+    width: 166px;
+    padding: 2px 0 4px 5px;
+}
+ul.dropdown ul a.open:hover {
+   background-color: #697F55;
+    color: #FFF;
+}
+ul.dropdown ul li:hover > span,
+ul.dropdown ul li:hover > span a {
+    background-color: #697F55;
+    background-image:url([[pix:theme|menu/nav-arrowover-right]]);
+    color:  #FFF;
+}
+ul.dropdown li.clickable-with-children:hover > a {
+    background-image:url([[pix:theme|menu/nav-arrowover-right]]);
+}
+ul.dropdown *.open,
+ul.dropdown li:hover > span,
+ul.dropdown li:hover > span a {
+    background-color: #697F55;
+    color: #FFF;
+}
+ul.dropdown ul ul *.open,
+ul.dropdown ul ul li:hover > span,
+ul.dropdown ul ul li:hover > span a {
+    background-color: #697F55;
+    background-image: url([[pix:theme|menu/nav-arrowover-right]]);
+    color: #FFF;
+}
+
+/* Custom menu, in RTL mode
+---------------------------*/
+.dir-rtl #custommenu ul.dropdown {
+    float: right;
+}
+.dir-rtl #custommenu ul.dropdown ul{
+    right: 0;
+    left: auto;
+}
+.dir-rtl #custommenu ul.dropdown ul ul {
+    right: 203px;
+    left: auto;
+}
+.dir-rtl #custommenu ul.dropdown ul span,
+.dir-rtl #custommenu ul.dropdown ul span a,
+.dir-rtl #custommenu ul.dropdown ul li.clickable-with-children > a {
+    background-image: url([[pix:theme|menu/nav-arrow-left]]);
+    background-position: 0 50%;
+    background-repeat: no-repeat;
+}
+.dir-rtl #custommenu ul.dropdown ul li:hover > span,
+.dir-rtl #custommenu ul.dropdown ul li:hover > span a {
+    background-image: url([[pix:theme|menu/nav-arrowover-left]]);
+}
+.dir-rtl #custommenu ul.dropdown li.clickable-with-children:hover > a {
+    background-image: url([[pix:theme|menu/nav-arrowover-left]]);
+}