From 22dd294bc4ef2494c1862f3147f7196d1623b58b Mon Sep 17 00:00:00 2001
From: "Rob G. Healey" <robhealey1@gmail.com>
Date: Wed, 25 Jan 2012 04:52:29 +0000
Subject: [PATCH] Adding Cascading Style Sheet for the beginning of HTML5/ CSS3
 Drop Down menus option in NarrativeWeb.

svn: r18768
---
 src/plugins/webstuff/css/Makefile.am          |   1 +
 .../webstuff/css/Web_DropDown-Menus.css       | 146 ++++++++++++++++++
 src/plugins/webstuff/webstuff.py              |   4 +
 3 files changed, 151 insertions(+)
 create mode 100644 src/plugins/webstuff/css/Web_DropDown-Menus.css

diff --git a/src/plugins/webstuff/css/Makefile.am b/src/plugins/webstuff/css/Makefile.am
index 22876a432..f2bf7a06f 100644
--- a/src/plugins/webstuff/css/Makefile.am
+++ b/src/plugins/webstuff/css/Makefile.am
@@ -15,6 +15,7 @@ DATAFILES = \
 	Web_Basic-Lilac.css \
 	Web_Basic-Peach.css \
 	Web_Basic-Spruce.css \
+	Web_DropDown-Menus.css \
 	Web_Fade-Menus.css \
 	Web_Horizontal-Menus.css \
 	Web_Mainz.css \
diff --git a/src/plugins/webstuff/css/Web_DropDown-Menus.css b/src/plugins/webstuff/css/Web_DropDown-Menus.css
new file mode 100644
index 000000000..debe8692d
--- /dev/null
+++ b/src/plugins/webstuff/css/Web_DropDown-Menus.css
@@ -0,0 +1,146 @@
+/*     Main
+------------------------------------------------------ */
+#menu {
+    width: 100%;
+    margin: 0;
+    padding: 10px 0 0 0;
+    list-style: none;
+    background: #111;
+    background: -moz-linear-gradient(#444, #111);
+    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
+    background: -webkit-linear-gradient(#444, #111);
+    background: -o-linear-gradient(#444, #111);
+    background: -ms-linear-gradient(#444, #111);
+    background: linear-gradient(#444, #111);
+    -moz-border-radius: 50px;
+    border-radius: 50px;
+    -moz-box-shadow: 0 2px 1px #9c9c9c;
+    -webkit-box-shadow: 0 2px 1px #9c9c9c;
+    box-shadow: 0 2px 1px #9c9c9c;
+}
+#menu li {
+    float: left;
+    padding: 0 0 10px 0;
+    position: relative;
+}
+#menu a {
+    float: left;
+    height: 25px;
+    padding: 0 25px;
+    color: #999;
+    text-transform: uppercase;
+    font: bold 12px/25px Arial, Helvetica;
+    text-decoration: none;
+    text-shadow: 0 1px 0 #000;
+}
+#menu li:hover > a {
+    color: #fafafa
+}
+
+*html #menu li a:hover /* IE6 */
+{
+    color: #fafafa
+}
+#menu li:hover > ul {
+    display: block
+}
+
+/*     Sub-menu
+------------------------------------------------------ */
+#menu ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: none;
+    position: absolute;
+    top: 35px;
+    left: 0;
+    z-index: 99999;
+    background: #444;
+    background: -moz-linear-gradient(#444, #111);
+    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
+    background: -webkit-linear-gradient(#444, #111);
+    background: -o-linear-gradient(#444, #111);
+    background: -ms-linear-gradient(#444, #111);
+    background: linear-gradient(#444, #111);
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+#menu ul li {
+    float: none;
+    margin: 0;
+    padding: 0;
+    display: block;
+    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
+    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
+    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
+}
+#menu ul li:last-child {
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+#menu ul a {
+    padding: 10px;
+    height: auto;
+    line-height: 1;
+    display: block;
+    white-space: nowrap;
+    float: none;
+    text-transform: none;
+}
+*html #menu ul a /* IE6 */
+{
+    height: 10px;
+    width: 150px;
+}
+*:first-child+html #menu ul a /* IE7 */
+{
+    height: 10px;
+    width: 150px;
+}
+#menu ul a:hover {
+    background: #0186ba;
+    background: -moz-linear-gradient(#04acec,  #0186ba);
+    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
+    background: -webkit-linear-gradient(#04acec,  #0186ba);
+    background: -o-linear-gradient(#04acec,  #0186ba);
+    background: -ms-linear-gradient(#04acec,  #0186ba);
+    background: linear-gradient(#04acec,  #0186ba);
+}
+#menu ul li:first-child a {
+    -moz-border-radius: 5px 5px 0 0;
+    border-radius: 5px 5px 0 0;
+}
+#menu ul li:first-child a:after {
+    content: '';
+    position: absolute;
+    left: 30px;
+    top: -8px;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 8px solid #444;
+}
+#menu ul li:first-child a:hover:after {
+    border-bottom-color: #04acec
+}
+#menu ul li:last-child a {
+    -moz-border-radius: 0 0 5px 5px;
+    border-radius: 0 0 5px 5px;
+}
+
+/*     Clear floated elements
+------------------------------------------------------ */
+#menu:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+}
+
+* html #menu             { zoom: 1; } /* IE6 */
+*:first-child+html #menu { zoom: 1; } /* IE7 */
diff --git a/src/plugins/webstuff/webstuff.py b/src/plugins/webstuff/webstuff.py
index 300a20c8a..6ecded5c6 100644
--- a/src/plugins/webstuff/webstuff.py
+++ b/src/plugins/webstuff/webstuff.py
@@ -126,6 +126,10 @@ def load_on_reg(dbstate, uistate, plugin):
         ["Fade-Menus", 0, "", 
          path_css('Web_Fade-Menus.css'), None, [], [] ],
 
+        # webkit/Html5/CSS3 Drop Down Menus Style Sheet
+        ["DropDown-Menus", 0, "",
+         path_css("Web_DropDown-Menus.css"), None, [], [] ],
+
         # Vertical Navigation Menus Style Sheet
         ["Vertical-Menus", 0, "", 
          path_css('Web_Vertical-Menus.css'), None, [], [] ],