From fb54d037964eea1eef01342094974e36f4cbc0d6 Mon Sep 17 00:00:00 2001
From: Marc Harter <wavded@gmail.com>
Date: Sat, 6 Aug 2011 15:09:55 -0500
Subject: [PATCH] added gshellish theme

---
 humane-themes/gshellish.css | 96 +++++++++++++++++++++++++++++++++++++
 index.html                  |  1 +
 2 files changed, 97 insertions(+)
 create mode 100644 humane-themes/gshellish.css

diff --git a/humane-themes/gshellish.css b/humane-themes/gshellish.css
new file mode 100644
index 0000000..bca6f5b
--- /dev/null
+++ b/humane-themes/gshellish.css
@@ -0,0 +1,96 @@
+@import 'http://fonts.googleapis.com/css?family=Ubuntu&v2';
+
+/* recommended base settings */
+html, body { height: 100%; }
+.humane {
+  filter                : progid:DXImageTransform.Microsoft.alpha(opacity=100);
+  -ms-filter            : "progid:DXImageTransform.Microsoft.alpha(opacity=100)";
+  position              : fixed;
+  _position             : absolute; /* ie6 */
+  -moz-transition       : all .2s ease-in;  /* .2s transition */
+  -webkit-transition    : all .2s ease-in;
+  -o-transition         : all .2s ease-in;
+  -ms-transition        : all .2s ease-in;
+  transition            : all .2s ease-in;
+  z-index               : -1;
+}
+.humane.humane-show { z-index: 100000; }
+/* ie hover state, recommended */
+.humane:hover {
+  filter                : progid:DXImageTransform.Microsoft.alpha(opacity=20);
+  -ms-filter            : "progid:DXImageTransform.Microsoft.alpha(opacity=20)";
+}
+/* standards hover state, recommended */
+div.humane.humane-show:hover { opacity: 0.2; }
+
+/* custom settings */
+.humane {
+  font-family           : Ubuntu, Verdana, sans-serif;
+  font-size             : 25px;
+  letter-spacing        : -1px;
+  bottom                : 0;
+  left                  : 0;
+  opacity               : 0;
+  width                 : 100%;
+  color                 : #000;
+  padding               : 10px;
+  text-align            : center;
+  background-color      :                                                       rgb(50,50,50);
+  background-color      :                                                      rgba(50,50,50,0.0);
+  background-image      : -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.0)), to(rgba(0,0,0,0.8)));
+  background-image      : -webkit-linear-gradient(                        top, rgba(50,50,50,0.0),     rgba(0,0,0,0.8));
+  background-image      : -moz-linear-gradient(                           top, rgba(50,50,50,0.0),     rgba(0,0,0,0.8));
+  background-image      : -ms-linear-gradient(                            top, rgba(50,50,50,0.0),     rgba(0,0,0,0.8));
+  background-image      : -o-linear-gradient(                             top, rgba(50,50,50,0.0),     rgba(0,0,0,0.8));
+  background-image      : linear-gradient(                                top, rgba(50,50,50,0.0),     rgba(0,0,0,0.8));;
+  text-shadow           : 0 -1px 1px #ddd;
+  -moz-box-shadow       : 0 4px 4px -4px #000;
+  -webkit-box-shadow    : 0 4px 4px -4px #000;
+  box-shadow            : 0 4px 4px -4px #000;
+  -webkit-transform     : translateY(100px);
+  -moz-transform        : translateY(100px);
+  -o-transform          : translateY(100px);
+  -ms-transform         : translateY(100px);
+  transform             : translateY(100px);
+}
+
+/* custom animation for css transition supported browsers */
+.humane.humane-show {
+  opacity: 1;
+  -webkit-transform     : translateY(0px);
+  -moz-transform        : translateY(0px);
+  -o-transform          : translateY(0px);
+  -ms-transform         : translateY(0px);
+  transform             : translateY(0px);
+}
+
+/* other customizations */
+.humane p, .humane li {
+  color                 : #fff;
+  margin                : 1em;
+  display               : inline;
+  padding               : 10px 20px;
+  -moz-border-radius    : 10px 10px 0 0;
+  -webkit-border-radius : 10px 10px 0 0;
+  border-radius         : 10px 10px 0 0;
+  background-color      :                                                       rgb(50,50,50);
+  background-color      :                                                      rgba(50,50,50,0.8);
+  background-image      : -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.8)), to(rgba(0,0,0,0.8)));
+  background-image      : -webkit-linear-gradient(                        top, rgba(50,50,50,0.8),     rgba(0,0,0,0.8));
+  background-image      : -moz-linear-gradient(                           top, rgba(50,50,50,0.8),     rgba(0,0,0,0.8));
+  background-image      : -ms-linear-gradient(                            top, rgba(50,50,50,0.8),     rgba(0,0,0,0.8));
+  background-image      : -o-linear-gradient(                             top, rgba(50,50,50,0.8),     rgba(0,0,0,0.8));
+  background-image      : linear-gradient(                                top, rgba(50,50,50,0.8),     rgba(0,0,0,0.8));;
+  -moz-box-shadow       : 0 0 4px #000;
+  -webkit-box-shadow    : 0 0 4px #000;
+  box-shadow            : 0 0 4px #000;
+}
+.humane ul {
+  list-style            : none;
+  margin                : 0;
+  padding               : 0;
+}
+.humane .error {
+  color                 : red;
+  text-shadow           : 0 -1px 1px #f11;
+}
diff --git a/index.html b/index.html
index 2e76d58..d8cc28f 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,7 @@ <h1>Humane JS</h1>
          <option selected>bold-dark</option>
          <option>bold-light</option>
          <option>libnotify</option>
+         <option>gshellish</option>
       </select>
 
       <a href='javascript:humane("Welcome Back")'>