diff --git a/.gitignore b/.gitignore
index 92287f8..6a96b3f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,4 @@
-node_modules/.bin/r.js
-node_modules/requirejs/README.md
-node_modules/requirejs/bin/r.js
-node_modules/requirejs/package.json
-node_modules/requirejs/require.js
+*node_modules*
+*.sass-cache*
+css
+js/app*
\ No newline at end of file
diff --git a/Makefile b/Makefile
index f731909..c1229b3 100644
--- a/Makefile
+++ b/Makefile
@@ -1,3 +1,3 @@
commonjs:
- @node_modules/requirejs/bin/r.js -convert js/controllers-src/ js/controllers/
+ @node_modules/requirejs/bin/r.js -convert js/src js/app/
@echo "JS Compiled."
\ No newline at end of file
diff --git a/config.rb b/config.rb
new file mode 100644
index 0000000..8e6931f
--- /dev/null
+++ b/config.rb
@@ -0,0 +1,11 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+output_style = :expanded or :nested or :compact or :compressed
diff --git a/css/styles.css b/css/styles.css
deleted file mode 100644
index 88fc5a1..0000000
--- a/css/styles.css
+++ /dev/null
@@ -1,499 +0,0 @@
-* {
- margin:0px;
- padding:0px;
- list-style:none;
-}
-
-:focus {
- outline:none !important;
-}
-
-body {
- background:#ccc;
-}
-
-a {
- color:indigo;
- text-decoration:none;
-}
-
-a:hover {
- text-decoration:underline;
-}
-
-/* Piano Wrapper */
-#p-wrapper {
- background:#000;
- background:-webkit-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%);
- background:-moz-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%);
- background:-ms-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%);
- background:-o-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%);
- background:linear-gradient(-60deg,#000,#333,#000,#666,#333 70%);
- width:100%;
- position:relative;
- -webkit-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000;
- -moz-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000;
- box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000;
- border:2px solid #333;
- -webkit-border-radius:0 0 5px 5px;
- -moz-border-radius:0 0 5px 5px;
- border-radius:0 0 5px 5px;
- -webkit-animation:taufik 2s;
- -moz-animation:taufik 2s;
- animation:taufik 2s;
- margin: 0 auto;
-}
-
-/* Tuts */
-ul#piano {
- display:block;
- width:1560px;
- height:240px;
- border-top:2px solid #222;
- margin: 0 auto;
-}
-
-ul#piano li {
- list-style:none;
- float:left;
- display:inline;
- width:30px;
- position:relative;
- text-align:center;
- color:#fff;
- font-size:10px;
- font-family: arial, sans-serif;
- line-height: 17px;
-}
-
-ul#piano li a,ul#piano li div.anchor {
- display:block;
- height:220px;
- background:#fff;
- background:-webkit-linear-gradient(-30deg,#f5f5f5,#fff);
- background:-moz-linear-gradient(-30deg,#f5f5f5,#fff);
- background:-ms-linear-gradient(-30deg,#f5f5f5,#fff);
- background:-o-linear-gradient(-30deg,#f5f5f5,#fff);
- background:linear-gradient(-30deg,#f5f5f5,#fff);
- border:1px solid #ccc;
- -webkit-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7);
- -moz-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7);
- box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7);
- -webkit-border-radius:0 0 3px 3px;
- -moz-border-radius:0 0 3px 3px;
- border-radius:0 0 3px 3px;
-}
-
-ul#piano li a:active,ul#piano li div.anchor:active {
- -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4);
- -moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);
- box-shadow:0 2px 2px rgba(0,0,0,0.4);
- position:relative;
- top:2px;
- height:216px;
-}
-
-ul#piano li a:active:before,ul#piano li div.anchor:active:before {
- content:"";
- width:0px;
- height:0px;
- border-width:216px 5px 0px;
- border-style:solid;
- border-color:transparent transparent transparent rgba(0,0,0,0.1);
- position:absolute;
- left:0px;
- top:0px;
-}
-
-ul#piano li a:active:after,ul#piano li div.anchor:active:after {
- content:"";
- width:0px;
- height:0px;
- border-width:216px 5px 0px;
- border-style:solid;
- border-color:transparent rgba(0,0,0,0.1) transparent transparent;
- position:absolute;
- right:0px;
- top:0px;
-}
-
-/* Black Tuts */
-ul#piano li span {
- position:absolute;
- top:0px;
- left:-12px;
- width:20px;
- height:120px;
- background:#333;
- background:-webkit-linear-gradient(-20deg,#333,#000,#333);
- background:-moz-linear-gradient(-20deg,#333,#000,#333);
- background:-ms-linear-gradient(-20deg,#333,#000,#333);
- background:-o-linear-gradient(-20deg,#333,#000,#333);
- background:linear-gradient(-20deg,#333,#000,#333);
- z-index:10;
- border-width:1px 2px 7px;
- border-style:solid;
- border-color:#666 #222 #111 #555;
- -webkit-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4);
- -moz-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4);
- box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4);
- -webkit-border-radius:0 0 2px 2px;
- -moz-border-radius:0 0 2px 2px;
- border-radius:0 0 2px 2px;
-}
-
-ul#piano li span:active {
- border-bottom-width:2px;
- height:123px;
- -webkit-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000;
- -moz-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000;
- box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000;
-}
-
-/* Tooltips */
-ul#piano li b {
- position:absolute;
- top:0px;
- margin-top:-10px;
- background:#111;
- color:#fff;
- font:bold 14px 'Trebuchet MS',Arial,Sans-Serif;
- border:2px solid #e6e6e6;
- -webkit-border-radius:7px;
- -moz-border-radius:7px;
- border-radius:7px;
- width:100px;
- height:30px;
- padding:10px;
- left:-40px;
- z-index:100;
- visibility:hidden;
- opacity:0;
- -webkit-box-shadow:0 2px 10px rgba(0,0,0,0.5);
- -moz-box-shadow:0 2px 10px rgba(0,0,0,0.5);
- box-shadow:0 2px 10px rgba(0,0,0,0.5);
- -webkit-transition:all 0.2s ease-out;
- -moz-transition:all 0.2s ease-out;
- -ms-transition:all 0.2s ease-out;
- -o-transition:all 0.2s ease-out;
- -transition:all 0.2s ease-out;
-}
-
-/* Tooltip Arrow */
-ul#piano li b:before {
- content:"";
- display:block;
- position:absolute;
- top:100%;
- left:50px;
- border-width:8px;
- border-style:solid;
- border-color:#e6e6e6 transparent transparent transparent;
-}
-
-ul#piano li b:after {
- content:"";
- display:block;
- position:absolute;
- top:100%;
- left:53px;
- border-width:5px;
- border-style:solid;
- border-color:#111 transparent transparent transparent;
-}
-
-ul#piano li:hover b {
- visibility:visible;
- opacity:1;
- margin-top:10px;
-}
-
-/* Drop Down Menus */
-ul#piano li ul,#search,#contact {
- position:absolute;
- border:2px solid #e6e6e6;
- margin-top:-100px;
- top:100%;
- left:0px;
- z-index:1000;
- visibility:hidden;
- opacity:0;
- -webkit-box-shadow:0 2px 7px #000;
- -moz-box-shadow:0 2px 7px #000;
- box-shadow:0 2px 7px #000;
- -webkit-transition:all 0.2s ease-out 0.2s;
- -moz-transition:all 0.2s ease-out 0.2s;
- -ms-transition:all 0.2s ease-out 0.2s;
- -o-transition:all 0.2s ease-out 0.2s;
- transition:all 0.2s ease-out 0.2s;
-}
-
-#search,#contact {
- background:#333;
- padding:40px 10px 8px;
- -webkit-border-radius:0 0 18px 0;
- -moz-border-radius:0 0 18px 0;
- border-radius:0 0 18px 0;
-}
-
-#search input[type="text"],#contact input[type="text"] {
- border:1px solid #aaa;
- font:normal 12px Cambria,Georgia,Serif;
- padding:2px 5px 2px;
- width:120px;
- margin-bottom:2px;
- margin-right:2px;
- position:relative;
- color:#aaa;
- -webkit-box-shadow:inset 0 0 5px #ccc;
- -moz-box-shadow:inset 0 0 5px #ccc;
- box-shadow:inset 0 0 5px #ccc;
- -webkit-border-radius:0 0 10px 0;
- -moz-border-radius:0 0 10px 0;
- border-radius:0 0 10px 0;
-}
-
-#contact textarea {
- border:1px solid #aaa;
- font:normal 12px Cambria,Georgia,Serif;
- padding:2px 5px;
- width:270px;
- height:100px;
- margin-top:4px;
- position:relative;
- color:#aaa;
- -webkit-box-shadow:inset 0 0 5px #ccc;
- -moz-box-shadow:inset 0 0 5px #ccc;
- box-shadow:inset 0 0 5px #ccc;
- -webkit-border-radius:0 0 10px 0;
- -moz-border-radius:0 0 10px 0;
- border-radius:0 0 10px 0;
-}
-
-#contact input[type="submit"] {
- background:-webkit-linear-gradient(top,#666,#000,#333);
- background:-moz-linear-gradient(top,#666,#000,#333);
- background:-ms-linear-gradient(top,#666,#000,#333);
- background:-o-linear-gradient(top,#666,#000,#333);
- background:linear-gradient(top,#666,#000,#333);
- border:none;
- -webkit-border-radius:3px;
- -moz-border-radius:3px;
- border-radius:3px;
- -webkit-box-shadow:0 1px 1px #000;
- -moz-box-shadow:0 1px 1px #000;
- box-shadow:0 1px 1px #000;
- padding:3px 10px 4px;
- margin:4px 2px;
- font:normal 10px Verdana,Arial,Sans-Serif;
- color:#ccc;
- float:right;
-}
-
-#search input:focus,#contct input:focus,#contact textarea:focus {
- color:#000;
-}
-
-/* Loupe */
-#search:after {
- content:"";
- width:5px;
- height:5px;
- border:1px solid #666;
- -webkit-border-radius:10px;
- -moz-border-radius:10px;
- border-radius:10px;
- position:absolute;
- left:100%;
- margin-left:-25px;
- top:46px;
- z-index:100;
-}
-
-#search:before {
- content:"";
- width:2px;
- height:0px;
- border:1px solid #666;
- position:absolute;
- z-index:3;
- left:100%;
- margin-left:-28px;
- top:53px;
- -webkit-transform:rotate(-42deg);
- -moz-transform:rotate(-42deg);
- -ms-transform:rotate(-42deg);
- -o-transform:rotate(-42deg);
- transform:rotate(-42deg);
-}
-
-ul#piano li li {
- width:150px;
- height:auto;
- display:block;
- float:none;
- background:transparent;
-}
-
-ul#piano li li a,ul#piano li li a:active {
- height:auto;
- display:block;
- padding:10px 15px;
- background:#333;
- font:normal 12px Arial,Sans-Serif;
- color:#fff;
- text-decoration:none;
- -webkit-box-shadow:none;
- -moz-box-shadow:none;
- box-shadow:none;
- border-radius:0px;
- -webkit-border-radius:0px;
- -moz-border-radius:0px;
- border-width:1px 0;
- border-style:solid;
- border-color:#444 transparent #222 transparent;
- top:0px;
- margin-top:0px;
-}
-
-ul#piano li li a:active:before,ul#piano li li a:active:after {
- border:none !important;
-}
-
-ul#piano li:hover ul,ul#piano li:hover #search,ul#piano li:hover #contact {
- visibility:visible;
- opacity:1;
- margin-top:15px;
-}
-
-ul#piano li li a:hover {
- background:#111;
- border-top-color:#222;
- border-bottom-color:#000;
-}
-
-/* Paper */
-.credit {
- margin:50px;
- width:390px;
- height:50px;
- padding:30px;
- position:relative;
- background:#fff;
- font:italic 1em Cambria,Georgia,Serif;
- color:#666;
- background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff));
- background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9);
- background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9);
- background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9);
- background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9);
- border:1px solid #ccc;
- -webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.1);
- -moz-box-shadow:1px 1px 4px rgba(0,0,0,0.1);
- box-shadow:1px 1px 4px rgba(0,0,0,0.1);
- -webkit-border-bottom-right-radius:60px 5px;
- -moz-border-radius-bottomright:60px 5px;
-
- border-bottom-right-radius:60px 5px;
- -webkit-animation:taufik 1s;
- -moz-animation:taufik 1s;
- animation:taufik 1s;
-}
-
-.credit:before {
- content:"";
- width:98%;
- z-index:-1;
- height:100%;
- padding:0 0 1px 0;
- position:absolute;
- bottom:0;
- right:0;
- background:#fff;
- background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff));
- background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9);
- background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9);
- background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9);
- background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9);
- border:1px solid #ccc;
- -webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
- -moz-box-shadow:1px 1px 8px rgba(0,0,0,0.1);
- box-shadow:1px 1px 8px rgba(0,0,0,0.1);
- -webkit-border-bottom-right-radius:60px 5px;
- -moz-border-radius-bottomright:60px 5px;
-
- border-bottom-right-radius:60px 5px;
- -webkit-transform:skew(2deg,2deg) translate(-4px,8px);
- -moz-transform:skew(2deg,2deg) translate(-4px,8px);
- -ms-transform:skew(2deg,2deg) translate(-4px,8px);
- -o-transform:skew(2deg,2deg) translate(-4px,8px);
- transform:skew(2deg,2deg) translate(-4px,8px);
-}
-
-.credit:after {
- content:"";
- width:98%;
- z-index:-1;
- height:98%;
- padding:0 0 1px 0;
- position:absolute;
- bottom:0;
- right:0;
- background:#f3f3f3;
- background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff));
- background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9);
- background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9);
- background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9);
- background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9);
- border:1px solid #ccc;
- -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.1);
- -moz-box-shadow:0px 0px 8px rgba(0,0,0,0.1);
- box-shadow:0px 0px 8px rgba(0,0,0,0.1);
- -webkit-transform:rotate(-4deg) translate(-14px,-2px);
- -moz-transform:rotate(-4deg) translate(-14px,-2px);
- -ms-transform:rotate(-4deg) translate(-14px,-2px);
- -o-transform:rotate(-4deg) translate(-14px,-2px);
- transform:rotate(-4deg) translate(-14px,-2px);
-}
-
-.credit_ribbon {
- position:absolute;
- top:0;
- left:0;
- width:115px;
- height:35px;
- background:rgba(0,0,0,0.1);
- background:-webkit-gradient(linear,555% 20%,0% 92%,from(rgba(0,0,0,0.1)),to(rgba(0,0,0,0.0)),color-stop(.1,rgba(0,0,0,0.2)));
- background:-moz-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0));
- background:-ms-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0));
- background:-o-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0));
- background:linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0));
- border-left:1px dashed rgba(0,0,0,0.1);
- border-right:1px dashed rgba(0,0,0,0.1);
- -webkit-box-shadow:0px 1px 7px rgba(0,0,0,0.2);
- -moz-box-shadow:0px 1px 7px rgba(0,0,0,0.2);
- box-shadow:0px 1px 7px rgba(0,0,0,0.2);
- -webkit-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px);
- -moz-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px);
- -o-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px);
- transform:rotate(-30deg) skew(0,0) translate(-30px,-20px);
-}
-
-.clear {
- clear:both;
-}
-
-
-/* Animation */
-@-webkit-keyframes taufik {
- from {opacity:0;}
- to {opacity:1;}
-}
-@-moz-keyframes taufik {
- from {opacity:0;}
- to {opacity:1;}
-}
-@keyframes taufik {
- from {opacity:0;}
- to {opacity:1;}
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index 0a88315..3d880c9 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
-
+
diff --git a/js/controllers/keysController.js b/js/controllers/keysController.js
deleted file mode 100644
index 5305677..0000000
--- a/js/controllers/keysController.js
+++ /dev/null
@@ -1,15 +0,0 @@
-define(function (require, exports, module) {'use strict';
-
-var $ = require('jquery'),
- Fiber = require('fiber');
-
-
-module.exports = Fiber.extend(function (base) {
-
- return {
- init: function (options) {
-
- },
- };
-});
-});
diff --git a/js/controllers-src/keysController.js b/js/src/controllers/keysController.js
similarity index 100%
rename from js/controllers-src/keysController.js
rename to js/src/controllers/keysController.js
diff --git a/sass/main.scss b/sass/main.scss
new file mode 100644
index 0000000..7b32d6f
--- /dev/null
+++ b/sass/main.scss
@@ -0,0 +1,9 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * */
+
+@import "compass/reset";
+
+/* MODULES */
+@import "modules/piano";
diff --git a/sass/modules/_piano.scss b/sass/modules/_piano.scss
new file mode 100644
index 0000000..565bc5b
--- /dev/null
+++ b/sass/modules/_piano.scss
@@ -0,0 +1,402 @@
+/* Piano Wrapper */
+
+#p-wrapper {
+ background: #000;
+ background: -webkit-linear-gradient(-60deg, black, #333333, black, #666666, #333333 70%);
+ background: -moz-linear-gradient(-60deg, black, #333333, black, #666666, #333333 70%);
+ background: -ms-linear-gradient(-60deg, black, #333333, black, #666666, #333333 70%);
+ background: -o-linear-gradient(-60deg, black, #333333, black, #666666, #333333 70%);
+ background: linear-gradient(-60deg, black, #333333, black, #666666, #333333 70%);
+ width: 100%;
+ position: relative;
+ -webkit-box-shadow: 0 2px 0px #666666, 0 3px 0px #555555, 0 4px 0px #444444, 0 6px 6px black, inset 0 -1px 1px rgba(255, 255, 255, 0.5), inset 0 -4px 5px black;
+ -moz-box-shadow: 0 2px 0px #666666, 0 3px 0px #555555, 0 4px 0px #444444, 0 6px 6px black, inset 0 -1px 1px rgba(255, 255, 255, 0.5), inset 0 -4px 5px black;
+ box-shadow: 0 2px 0px #666666, 0 3px 0px #555555, 0 4px 0px #444444, 0 6px 6px black, inset 0 -1px 1px rgba(255, 255, 255, 0.5), inset 0 -4px 5px black;
+ border: 2px solid #333;
+ -webkit-border-radius: 0 0 5px 5px;
+ -moz-border-radius: 0 0 5px 5px;
+ border-radius: 0 0 5px 5px;
+ -webkit-animation: taufik 2s;
+ -moz-animation: taufik 2s;
+ animation: taufik 2s;
+ margin: 0 auto;
+}
+
+/* Tuts */
+
+ul#piano {
+ display: block;
+ width: 1560px;
+ height: 240px;
+ border-top: 2px solid #222;
+ margin: 0 auto;
+ li {
+ list-style: none;
+ float: left;
+ display: inline;
+ width: 30px;
+ position: relative;
+ text-align: center;
+ color: #fff;
+ font-size: 10px;
+ font-family: arial, sans-serif;
+ line-height: 17px;
+ a, div.anchor {
+ display: block;
+ height: 220px;
+ background: #fff;
+ background: -webkit-linear-gradient(-30deg, whitesmoke, white);
+ background: -moz-linear-gradient(-30deg, whitesmoke, white);
+ background: -ms-linear-gradient(-30deg, whitesmoke, white);
+ background: -o-linear-gradient(-30deg, whitesmoke, white);
+ background: linear-gradient(-30deg, whitesmoke, white);
+ border: 1px solid #ccc;
+ -webkit-box-shadow: inset 0 1px 0px white, inset 0 -1px 0px white, inset 1px 0px 0px white, inset -1px 0px 0px white, 0 4px 3px rgba(0, 0, 0, 0.7);
+ -moz-box-shadow: inset 0 1px 0px white, inset 0 -1px 0px white, inset 1px 0px 0px white, inset -1px 0px 0px white, 0 4px 3px rgba(0, 0, 0, 0.7);
+ box-shadow: inset 0 1px 0px white, inset 0 -1px 0px white, inset 1px 0px 0px white, inset -1px 0px 0px white, 0 4px 3px rgba(0, 0, 0, 0.7);
+ -webkit-border-radius: 0 0 3px 3px;
+ -moz-border-radius: 0 0 3px 3px;
+ border-radius: 0 0 3px 3px;
+ }
+ a:active, div.anchor:active {
+ -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
+ position: relative;
+ top: 2px;
+ height: 216px;
+ }
+ a:active:before, div.anchor:active:before {
+ content: "";
+ width: 0px;
+ height: 0px;
+ border-width: 216px 5px 0px;
+ border-style: solid;
+ border-color: transparent transparent transparent rgba(0, 0, 0, 0.1);
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+ a:active:after, div.anchor:active:after {
+ content: "";
+ width: 0px;
+ height: 0px;
+ border-width: 216px 5px 0px;
+ border-style: solid;
+ border-color: transparent rgba(0, 0, 0, 0.1) transparent transparent;
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ }
+ span {
+ position: absolute;
+ top: 0px;
+ left: -12px;
+ width: 20px;
+ height: 120px;
+ background: #333;
+ background: -webkit-linear-gradient(-20deg, #333333, black, #333333);
+ background: -moz-linear-gradient(-20deg, #333333, black, #333333);
+ background: -ms-linear-gradient(-20deg, #333333, black, #333333);
+ background: -o-linear-gradient(-20deg, #333333, black, #333333);
+ background: linear-gradient(-20deg, #333333, black, #333333);
+ z-index: 10;
+ border-width: 1px 2px 7px;
+ border-style: solid;
+ border-color: #666 #222 #111 #555;
+ -webkit-box-shadow: inset 0px -1px 2px rgba(255, 255, 255, 0.4), 0 2px 3px rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: inset 0px -1px 2px rgba(255, 255, 255, 0.4), 0 2px 3px rgba(0, 0, 0, 0.4);
+ box-shadow: inset 0px -1px 2px rgba(255, 255, 255, 0.4), 0 2px 3px rgba(0, 0, 0, 0.4);
+ -webkit-border-radius: 0 0 2px 2px;
+ -moz-border-radius: 0 0 2px 2px;
+ border-radius: 0 0 2px 2px;
+ &:active {
+ border-bottom-width: 2px;
+ height: 123px;
+ -webkit-box-shadow: inset 0px -1px 1px rgba(255, 255, 255, 0.4), 0 1px 0px rgba(0, 0, 0, 0.8), 0 2px 2px rgba(0, 0, 0, 0.4), 0 -1px 0px black;
+ -moz-box-shadow: inset 0px -1px 1px rgba(255, 255, 255, 0.4), 0 1px 0px rgba(0, 0, 0, 0.8), 0 2px 2px rgba(0, 0, 0, 0.4), 0 -1px 0px black;
+ box-shadow: inset 0px -1px 1px rgba(255, 255, 255, 0.4), 0 1px 0px rgba(0, 0, 0, 0.8), 0 2px 2px rgba(0, 0, 0, 0.4), 0 -1px 0px black;
+ }
+ }
+ b {
+ position: absolute;
+ top: 0px;
+ margin-top: -10px;
+ background: #111;
+ color: #fff;
+ font: bold 14px 'Trebuchet MS',Arial,Sans-Serif;
+ border: 2px solid #e6e6e6;
+ -webkit-border-radius: 7px;
+ -moz-border-radius: 7px;
+ border-radius: 7px;
+ width: 100px;
+ height: 30px;
+ padding: 10px;
+ left: -40px;
+ z-index: 100;
+ visibility: hidden;
+ opacity: 0;
+ -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+ -webkit-transition: all 0.2s ease-out;
+ -moz-transition: all 0.2s ease-out;
+ -ms-transition: all 0.2s ease-out;
+ -o-transition: all 0.2s ease-out;
+ -transition: all 0.2s ease-out;
+ &:before {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 100%;
+ left: 50px;
+ border-width: 8px;
+ border-style: solid;
+ border-color: #e6e6e6 transparent transparent transparent;
+ }
+ &:after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 100%;
+ left: 53px;
+ border-width: 5px;
+ border-style: solid;
+ border-color: #111 transparent transparent transparent;
+ }
+ }
+ &:hover b {
+ visibility: visible;
+ opacity: 1;
+ margin-top: 10px;
+ }
+ ul {
+ position: absolute;
+ border: 2px solid #e6e6e6;
+ margin-top: -100px;
+ top: 100%;
+ left: 0px;
+ z-index: 1000;
+ visibility: hidden;
+ opacity: 0;
+ -webkit-box-shadow: 0 2px 7px #000;
+ -moz-box-shadow: 0 2px 7px #000;
+ box-shadow: 0 2px 7px #000;
+ -webkit-transition: all 0.2s ease-out 0.2s;
+ -moz-transition: all 0.2s ease-out 0.2s;
+ -ms-transition: all 0.2s ease-out 0.2s;
+ -o-transition: all 0.2s ease-out 0.2s;
+ transition: all 0.2s ease-out 0.2s;
+ }
+ }
+}
+
+/* Black Tuts */
+
+/* Tooltips */
+
+/* Tooltip Arrow */
+
+/* Drop Down Menus */
+
+#search, #contact {
+ position: absolute;
+ border: 2px solid #e6e6e6;
+ margin-top: -100px;
+ top: 100%;
+ left: 0px;
+ z-index: 1000;
+ visibility: hidden;
+ opacity: 0;
+ -webkit-box-shadow: 0 2px 7px #000;
+ -moz-box-shadow: 0 2px 7px #000;
+ box-shadow: 0 2px 7px #000;
+ -webkit-transition: all 0.2s ease-out 0.2s;
+ -moz-transition: all 0.2s ease-out 0.2s;
+ -ms-transition: all 0.2s ease-out 0.2s;
+ -o-transition: all 0.2s ease-out 0.2s;
+ transition: all 0.2s ease-out 0.2s;
+}
+
+#search, #contact {
+ background: #333;
+ padding: 40px 10px 8px;
+ -webkit-border-radius: 0 0 18px 0;
+ -moz-border-radius: 0 0 18px 0;
+ border-radius: 0 0 18px 0;
+}
+
+#search input[type="text"] {
+ border: 1px solid #aaa;
+ font: normal 12px Cambria,Georgia,Serif;
+ padding: 2px 5px 2px;
+ width: 120px;
+ margin-bottom: 2px;
+ margin-right: 2px;
+ position: relative;
+ color: #aaa;
+ -webkit-box-shadow: inset 0 0 5px #ccc;
+ -moz-box-shadow: inset 0 0 5px #ccc;
+ box-shadow: inset 0 0 5px #ccc;
+ -webkit-border-radius: 0 0 10px 0;
+ -moz-border-radius: 0 0 10px 0;
+ border-radius: 0 0 10px 0;
+}
+
+#contact {
+ input[type="text"] {
+ border: 1px solid #aaa;
+ font: normal 12px Cambria,Georgia,Serif;
+ padding: 2px 5px 2px;
+ width: 120px;
+ margin-bottom: 2px;
+ margin-right: 2px;
+ position: relative;
+ color: #aaa;
+ -webkit-box-shadow: inset 0 0 5px #ccc;
+ -moz-box-shadow: inset 0 0 5px #ccc;
+ box-shadow: inset 0 0 5px #ccc;
+ -webkit-border-radius: 0 0 10px 0;
+ -moz-border-radius: 0 0 10px 0;
+ border-radius: 0 0 10px 0;
+ }
+ textarea {
+ border: 1px solid #aaa;
+ font: normal 12px Cambria,Georgia,Serif;
+ padding: 2px 5px;
+ width: 270px;
+ height: 100px;
+ margin-top: 4px;
+ position: relative;
+ color: #aaa;
+ -webkit-box-shadow: inset 0 0 5px #ccc;
+ -moz-box-shadow: inset 0 0 5px #ccc;
+ box-shadow: inset 0 0 5px #ccc;
+ -webkit-border-radius: 0 0 10px 0;
+ -moz-border-radius: 0 0 10px 0;
+ border-radius: 0 0 10px 0;
+ }
+ input[type="submit"] {
+ background: -webkit-linear-gradient(top, #666666, black, #333333);
+ background: -moz-linear-gradient(top, #666666, black, #333333);
+ background: -ms-linear-gradient(top, #666666, black, #333333);
+ background: -o-linear-gradient(top, #666666, black, #333333);
+ background: linear-gradient(top, #666666, black, #333333);
+ border: none;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-box-shadow: 0 1px 1px #000;
+ -moz-box-shadow: 0 1px 1px #000;
+ box-shadow: 0 1px 1px #000;
+ padding: 3px 10px 4px;
+ margin: 4px 2px;
+ font: normal 10px Verdana,Arial,Sans-Serif;
+ color: #ccc;
+ float: right;
+ }
+}
+
+#search input:focus, #contct input:focus, #contact textarea:focus {
+ color: #000;
+}
+
+/* Loupe */
+
+#search {
+ &:after {
+ content: "";
+ width: 5px;
+ height: 5px;
+ border: 1px solid #666;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+ position: absolute;
+ left: 100%;
+ margin-left: -25px;
+ top: 46px;
+ z-index: 100;
+ }
+ &:before {
+ content: "";
+ width: 2px;
+ height: 0px;
+ border: 1px solid #666;
+ position: absolute;
+ z-index: 3;
+ left: 100%;
+ margin-left: -28px;
+ top: 53px;
+ -webkit-transform: rotate(-42deg);
+ -moz-transform: rotate(-42deg);
+ -ms-transform: rotate(-42deg);
+ -o-transform: rotate(-42deg);
+ transform: rotate(-42deg);
+ }
+}
+
+ul#piano li {
+ li {
+ width: 150px;
+ height: auto;
+ display: block;
+ float: none;
+ background: transparent;
+ a {
+ height: auto;
+ display: block;
+ padding: 10px 15px;
+ background: #333;
+ font: normal 12px Arial,Sans-Serif;
+ color: #fff;
+ text-decoration: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ border-radius: 0px;
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ border-width: 1px 0;
+ border-style: solid;
+ border-color: #444 transparent #222 transparent;
+ top: 0px;
+ margin-top: 0px;
+ &:active {
+ height: auto;
+ display: block;
+ padding: 10px 15px;
+ background: #333;
+ font: normal 12px Arial,Sans-Serif;
+ color: #fff;
+ text-decoration: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ border-radius: 0px;
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ border-width: 1px 0;
+ border-style: solid;
+ border-color: #444 transparent #222 transparent;
+ top: 0px;
+ margin-top: 0px;
+ &:before, &:after {
+ border: none !important;
+ }
+ }
+ }
+ }
+ &:hover {
+ ul, #search, #contact {
+ visibility: visible;
+ opacity: 1;
+ margin-top: 15px;
+ }
+ }
+ li a:hover {
+ background: #111;
+ border-top-color: #222;
+ border-bottom-color: #000;
+ }
+}
\ No newline at end of file