1 files changed, 43 insertions, 187 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 7bc4c80e..8ce60a10 100644
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -1,33 +1,5 @@
 @charset "UTF-8";
 /* <copyright> This file contains proprietary software owned by Motorola Mobility, Inc.<br/> No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved. </copyright> */
-/*  */
-/* ninja.scss Main SCSS file for ninja, compiled by SASS into the file ninja.css. */
-/* _colors.scss Defines the colors for the UI of the application. To create a new theme, copy this file and change the values as desired. Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values. */
-/* Colors for radio buttons and other form elements */
-/* Base colors for dividers   Dividers consist of a div with a background color and either  a top & bottom border (in the case of horizontal dividers) or a left & right border (in the case of vertical dividers), for a total of three different colors.  */
-/* top and left */
-/* Middle */
-/* Bottom and right */
-/* Main background color of entire app */
-/* Main app background color. */
-/* rgba version */
-/* Main app border color */
-/* color of drop shadows */
-/* Stage color */
-/* body border color */
-/* Body background color */
-/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */
-/* Colors for tools: background, text, how they interact with the UI */
-/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */
-/* used for editable items in their non-edit state, etc. */
-/* Border for panel and for block elements */
-/* Shadow for text and block elements */
-/* Colors for scroll bars */
-/* _fonts.scss Defines the fonts for the application. */
-/* Droid Sans: Normal, bold asdf*/
-/* themes/themename/mixins.scss Mixins that are theme-dependent (e.g. sprite mixins, etc) */
-/* mixins.scss Generic mixins.  Theme-specific mixins (e.g. for sprites)  should go in the theme/themename/mixins.scss file. */
-/* Base.scss Base styles for entire application. Note that colors and font definitions go in  _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss */
 .clear { display: block; clear: both; height: 0px; overflow: hidden; }
 
 .bold { font-weight: bold; }
@@ -44,29 +16,16 @@
 
 .layout-table .flexor div:last-child { float: right; }
 
-/* Begin: Basic skinning for form fields */
-/* Reset all */
-input.nj-skinned, textarea.nj-skinned, button.nj-skinned, select.nj-skinned, select.nj-skinned option, button.nj-skinned { -webkit-appearance: none; outline: none; }
+input.nj-skinned, textarea.nj-skinned, button.nj-skinned, select.nj-skinned, select.nj-skinned option { -webkit-appearance: none; outline: none; }
 
-/* Base styles */
 input[type="text"].nj-skinned, input[type="password"].nj-skinned, input[type="search"].nj-skinned, textarea.nj-skinned, select.nj-skinned, select.nj-skinned option { border: 1px solid #313131; color: white; background-color: #444444; font-size: 12px; font-family: 'Droid Sans', sans-serif; }
 
-/* Disabled styles */
 input.nj-skinned:disabled, textarea.nj-skinned:disabled, select.nj-skinned:disabled, button.nj-skinned:disabled { opacity: 0.4; }
 
-/* Text inputs and select boxes */
 input[type="text"].nj-skinned, input[type="password"].nj-skinned, input[type="search"].nj-skinned, select.nj-skinned, select.nj-skinned option { height: 13px; }
 
-/*
-input[type="text"].nj-skinned:focus,
-input[type="password"].nj-skinned:focus,
-input[type="search"].nj-skinned:focus,
-textarea.nj-skinned:focus,
-select.nj-skinned:focus,
-select.nj-skinned option:focus {
-        -webkit-box-shadow: 0px 0px 3px $color-focus-outline;
-}
-*/
+input[type="text"].nj-skinned:focus, input[type="password"].nj-skinned:focus, input[type="search"].nj-skinned:focus, textarea.nj-skinned:focus, select.nj-skinned:focus, select.nj-skinned option:focus { -webkit-box-shadow: 0px 0px 3px #b4b4b4; }
+
 select.nj-skinned { background-image: url("../images/dropdown-bg.png"); background-repeat: no-repeat; background-position: right center; font-size: 12px; height: 16px; padding-right: 20px; }
 
 input[type="search"].nj-skinned { height: 17px; -webkit-box-shadow: none; }
@@ -75,23 +34,22 @@ input[type="search"].nj-skinned::-webkit-search-cancel-button { -webkit-appearan
 
 input[type="search"].nj-skinned::-webkit-search-cancel-button:after { content: "\2716"; }
 
-/* Buttons */
-button.nj-skinned { font-size: 9px; cursor: pointer; }
+button.nj-skinned { font-size: 9px; cursor: pointer; display: block; border: 0px; margin: 0px; padding: 4px; border: 1px #313131 solid; background-color: #474747; background-image: -webkit-linear-gradient(top, #505050 0%, #3c3c3c 100%); border-radius: 4px; color: white; text-transform: uppercase; cursor: pointer; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
+
+button.nj-skinned:active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%); }
+
+button.nj-skinned:hover { -webkit-box-shadow: 0px 0px 3px #b4b4b4; }
 
-/* Radio buttons */
 input[type="radio"].nj-skinned { background-color: #474747; background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); color: #c8c8c8; border: 2px solid #282828; width: 12px; height: 12px; overflow: hidden; border-radius: 10px; font-size: 16px; line-height: 7px; text-indent: -7px; cursor: pointer; -webkit-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); }
 
-input[type="radio"].nj-skinned:checked { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; }
+input[type="radio"].nj-skinned:checked { background: -webkit-radial-gradient(center, circle cover, #c8c8c8 0%, #c8c8c8 15%, #c8c8c8 30%, rgba(0, 0, 0, 0) 31%), -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; }
 
 input[type="radio"].nj-skinned:hover { border: 2px solid #282828; }
 
-input[type="radio"].nj-skinned:checked:after { content: "\a0 \a0 \2022"; }
-
 input[type="radio"].nj-skinned:active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #646464 100%); }
 
 input[type="radio"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; cursor: default; }
 
-/* Checkboxes */
 input[type="checkbox"].nj-skinned { background-color: #474747; background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); color: #c8c8c8; border: 1px solid #282828; width: 10px; height: 10px; font-size: 12px; overflow: visible; cursor: pointer; -webkit-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); line-height: 9px; }
 
 input[type="checkbox"].nj-skinned:checked:after { content: "\2714"; }
@@ -100,16 +58,12 @@ input[type="checkbox"].nj-skinned:active { background-image: -webkit-linear-grad
 
 input[type="checkbox"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); cursor: default; }
 
-/* End: Basic skinning for form fields */
-/* Begin:  Basic skinning for visual dividers */
 .nj-divider { background-color: black; border-width: 0px; overflow: hidden; }
 
 .nj-divider.divider-horizontal { border-top: 1px solid #232323; border-bottom: 1px solid #3a3a3a; height: 1px; }
 
 .nj-divider.divider-vertical { border-left: 1px solid #232323; border-right: 1px solid #3a3a3a; width: 1px; }
 
-/* End: Basic skinning for visual dividers */
-/* MainWindow.scss Styles governing the main window and overall layout of the application. Note that colors and font definitions go in _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss */
 body { position: absolute; margin: 0px; width: 100%; height: 100%; background-color: black; overflow: hidden; -webkit-user-select: none; font-family: 'Droid Sans', sans-serif; }
 
 #appContainer { position: absolute; margin: 0px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; width: 100%; height: 100%; border-left: 16px solid #000; border-right: 16px solid #000; border-top: 28px solid #000; -webkit-box-sizing: border-box; max-width: 100%; max-height: 100%; }
@@ -126,9 +80,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; }
 
-#bottomPanelContainer { /*border: 1px solid #333;
-background: transparent;
-*/ min-height: 80px; max-height: 50%; overflow: auto; }
+#bottomPanelContainer { background: transparent; min-height: 80px; max-height: 50%; overflow: auto; }
 
 .panelContainer { display: block; -webkit-box-orient: vertical; position: relative; }
 
@@ -166,9 +118,9 @@ background: transparent;
 
 #sceneBar { height: 70px; background-color: #474747; }
 
-#mainContainer #rulerTop { /* TODO: temporary background please replace when component is implemented */ background: url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; }
+#mainContainer #rulerTop { background: url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; }
 
-#rulerLeft { /* TODO: temporary background please replace when component is implemented */ background: url("../images/temp/ruler-left.png"); width: 16px; }
+#rulerLeft { background: url("../images/temp/ruler-left.png"); width: 16px; }
 
 #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; }
 
@@ -184,7 +136,6 @@ background: transparent;
 
 .resizeBar { -webkit-transition: all 0.15s linear; }
 
-/* Splitters Collapsed */
 .panelContainer, .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; }
 
 .panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex: 0.1 !important; }
@@ -203,18 +154,10 @@ background: transparent;
 
 .bottomSplitter.collapsed { -webkit-transform: rotate(0deg); }
 
-/*
-
-
-.stageContentShadow { -webkit-box-shadow: 3px 5px 4px $color-app-shadow; -moz-box-shadow: 3px 5px 4px $color-app-shadow; box-shadow: 3px 5px 4px $color-app-shadow;
-}
+.stageContentShadow { -webkit-box-shadow: 3px 5px 4px rgba(0, 0, 0, 0.5); -moz-box-shadow: 3px 5px 4px rgba(0, 0, 0, 0.5); box-shadow: 3px 5px 4px rgba(0, 0, 0, 0.5); }
 
-*/
-/*
-.baseBox { display:-webkit-box; display:-moz-box; display: box;
-}
+.baseBox { display: -webkit-box; display: -moz-box; display: box; }
 
-/* Generic style to make any element unselectable */
 .unselectable { -webkit-user-select: none; }
 
 .verticalBox { -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; }
@@ -235,19 +178,17 @@ background: transparent;
 
 #middleDocArea { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; margin: 1px; margin-bottom: 3px; border-style: solid; border-width: 1px; }
 
-/* Used for the Iframe Version
-#mainStageIFrame { border: none; margin: 4px;
-}
-*/
+#mainStageIFrame { border: none; margin: 4px; }
+
 #mainStageArea { -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; overflow: scroll; position: relative; margin: 0px; padding: 0px; border: none; }
 
-#pasteBoard { /*position: relative;*/ top: 0px; left: 0px; margin: 0px; padding: 0px; border: none; /*overflow: scroll;*/ }
+#pasteBoard { top: 0px; left: 0px; margin: 0px; padding: 0px; border: none; }
 
 #stageBG { width: 100%; height: 100%; background-color: red; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 150px; z-index: 0; }
 
 #stageUserContent { width: 100%; height: 100%; background-color: transparent; border: 1px solid black; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 150px; z-index: 1; }
 
-#stageParent { /* we aren't entirely sure why this works but putting a slight opacity on this div seems to keep the users content from breaking through the overlay canvas and eating mouse events John Mayhew */ z-index: 2; opacity: 0.99; /*height: 1000px;*/ /*width: 2000px;*/ position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; /*background-color: red;*/ }
+#stageParent { z-index: 2; opacity: 0.99; position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; }
 
 .global3DSettings { -webkit-transform-style: preserve-3d; -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 
@@ -271,23 +212,13 @@ background: transparent;