From cb266a79c03968cf68efca015b2db8d6d221ac6d Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Fri, 27 Jan 2012 16:15:38 -0800
Subject: Fixes to radio button base styles. Comment clean-up.

---
 _scss/imports/scss/_Base.scss             |  49 +++----
 _scss/imports/scss/_Components.scss       |   4 +-
 _scss/imports/scss/_MainWindow.scss       |  30 ++--
 _scss/imports/scss/_MenuUI.scss           |  15 +-
 _scss/imports/scss/_PanelUI.scss          |  99 +++++++-------
 _scss/imports/scss/_ScrollBars.scss       |  42 +++---
 _scss/imports/scss/_Stage.scss            |  52 +++++++
 _scss/imports/scss/_Tools.scss            |  48 +++----
 _scss/imports/scss/_ToolsSample.scss      |   2 +-
 _scss/imports/scss/_mixins.scss           |  10 +-
 _scss/imports/scss/_toolbar.scss          |  18 +--
 _scss/imports/themes/default/_colors.scss |  65 +++++----
 _scss/imports/themes/default/_fonts.scss  |   5 -
 _scss/imports/themes/default/_mixins.scss |   6 +-
 _scss/ninja.scss                          |   8 +-
 css/ninja.css                             | 220 ++++++------------------------
 16 files changed, 288 insertions(+), 385 deletions(-)

diff --git a/_scss/imports/scss/_Base.scss b/_scss/imports/scss/_Base.scss
index f9a1cfa3..75ccc07d 100755
--- a/_scss/imports/scss/_Base.scss
+++ b/_scss/imports/scss/_Base.scss
@@ -4,12 +4,12 @@
 // (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 // </copyright>
 
-/*
- * 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
- */
+
+//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;
@@ -42,8 +42,8 @@
     float: right;
 }
 
-/* Begin: Basic skinning for form fields */
-/* Reset all */
+// Begin: Basic skinning for form fields 
+// Reset all 
 input.nj-skinned, 
 textarea.nj-skinned, 
 button.nj-skinned,
@@ -54,7 +54,7 @@ button.nj-skinned {
 	outline: none;
 }
 
-/* Base styles */
+// Base styles
 input[type="text"].nj-skinned,
 input[type="password"].nj-skinned,
 input[type="search"].nj-skinned,
@@ -68,7 +68,7 @@ select.nj-skinned option {
 	font-family: 'Droid Sans', sans-serif;
 }
 
-/* Disabled styles */
+// Disabled styles
 input.nj-skinned:disabled,
 textarea.nj-skinned:disabled,
 select.nj-skinned:disabled,
@@ -76,7 +76,7 @@ button.nj-skinned:disabled {
 	opacity: 0.4;
 }
 
-/* Text inputs and select boxes */
+// Text inputs and select boxes 
 input[type="text"].nj-skinned,
 input[type="password"].nj-skinned,
 input[type="search"].nj-skinned,
@@ -84,7 +84,7 @@ 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,
@@ -93,7 +93,7 @@ select.nj-skinned:focus,
 select.nj-skinned option:focus {
 	-webkit-box-shadow: 0px 0px 3px $color-focus-outline;
 }
-*/
+
 
 select.nj-skinned {
     background-image: url("../images/dropdown-bg.png");
@@ -118,13 +118,13 @@ input[type="search"].nj-skinned::-webkit-search-cancel-button:after {
 	content:"\2716";
 }
 
-/* Buttons */
+// Buttons 
 button.nj-skinned {
 	font-size: 9px;
     cursor: pointer;
 }
 
-/* Radio buttons */
+// Radio buttons 
 input[type="radio"].nj-skinned {
 	background-color: $color-menu-bg;
 	background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
@@ -143,15 +143,18 @@ input[type="radio"].nj-skinned {
     box-shadow: 0px 0px 2px $color-radio-shadow;
 }
 input[type="radio"].nj-skinned:checked {
-	background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
+	background: -webkit-radial-gradient(center, 
+										circle cover, 
+										$color-radio 0%, 
+										$color-radio 15%, 
+										$color-radio 30%, 
+										$color-transparent 31%), 
+										-webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
 	border: 2px solid $color-radio-border;
 }
 input[type="radio"].nj-skinned:hover {
 	border: 2px solid $color-radio-border;
 }
-input[type="radio"].nj-skinned:checked:after {
-	content:"\a0 \a0 \2022";
-}
 input[type="radio"].nj-skinned:active {
 	background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%);
 }
@@ -160,7 +163,7 @@ input[type="radio"].nj-skinned:disabled {
 	border: 2px solid $color-radio-border;
 	cursor: default;
 }
-/* Checkboxes */
+// Checkboxes 
 input[type="checkbox"].nj-skinned {
 	background-color: $color-menu-bg;
 	background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
@@ -190,9 +193,9 @@ input[type="checkbox"].nj-skinned:disabled {
 	background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
 	cursor: default;
 }
-/* End: Basic skinning for form fields */
+// End: Basic skinning for form fields 
 
-/* Begin:  Basic skinning for visual dividers */
+// Begin:  Basic skinning for visual dividers 
 .nj-divider {
 	background-color: $color-divider-second;
 	border-width: 0px;
@@ -208,4 +211,4 @@ input[type="checkbox"].nj-skinned:disabled {
 	border-right: 1px solid $color-divider-third;
 	width: 1px;
 }
-/* End: Basic skinning for visual dividers */
+// End: Basic skinning for visual dividers 
diff --git a/_scss/imports/scss/_Components.scss b/_scss/imports/scss/_Components.scss
index 2fda5afc..c4182c73 100755
--- a/_scss/imports/scss/_Components.scss
+++ b/_scss/imports/scss/_Components.scss
@@ -6,7 +6,7 @@
 
 
 
-/* Begin: Styles for the Tree component */
+// Begin: Styles for the Tree component  
 
 .tree
 {
@@ -30,4 +30,4 @@
     -webkit-transition: -webkit-transform 0.05s linear;
 }
 
-/* End: styles for the Tree component */
\ No newline at end of file
+// End: styles for the Tree component  
\ No newline at end of file
diff --git a/_scss/imports/scss/_MainWindow.scss b/_scss/imports/scss/_MainWindow.scss
index c5552e4e..b33426ba 100755
--- a/_scss/imports/scss/_MainWindow.scss
+++ b/_scss/imports/scss/_MainWindow.scss
@@ -4,12 +4,12 @@
 // (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 // </copyright>
 
-/*
- * 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
- */
+
+// 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;
@@ -83,9 +83,9 @@
 }
 
 #bottomPanelContainer {
-    /*border: 1px solid #333;
+    //border: 1px solid #333;
     background: transparent;
-    */
+     
     min-height:80px;
     max-height:50%;
     overflow:auto;
@@ -200,14 +200,14 @@
 }
 
 #mainContainer #rulerTop {
-    /* TODO: temporary background please replace when component is implemented */
+    // TODO: temporary background please replace when component is implemented  
     background: url("../images/temp/ruler-top.png");
     height:15px;
     margin-bottom: 0px;
 }
 
 #rulerLeft {
-    /* TODO: temporary background please replace when component is implemented */
+    // TODO: temporary background please replace when component is implemented  
     background: url("../images/temp/ruler-left.png");
     width:16px;
 }
@@ -246,7 +246,7 @@
 
 .resizeBar { -webkit-transition: all 0.15s linear; }
 
-/* Splitters Collapsed */
+// Splitters Collapsed  
 .panelContainer, .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in;  }
 .panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex:0.1 !important; }
 .disableTransition { -webkit-transition: none !important; -webkit-box-flex:0 !important; }
@@ -258,7 +258,7 @@
 .topSplitter.collapsed { -webkit-transform:rotate(180deg); }
 .bottomSplitter.collapsed { -webkit-transform:rotate(0deg); }
 
-/*
+//
 
 
 .stageContentShadow {
@@ -267,15 +267,15 @@
     box-shadow: 3px 5px 4px $color-app-shadow;
 }
 
-*/
-/*
+ 
+//
 .baseBox {
     display:-webkit-box;
     display:-moz-box;
     display: box;
 }
 
-/* Generic style to make any element unselectable */
+// Generic style to make any element unselectable  
 .unselectable {
     -webkit-user-select: none;
 }
diff --git a/_scss/imports/scss/_MenuUI.scss b/_scss/imports/scss/_MenuUI.scss
index e821e5cc..e1fb149a 100755
--- a/_scss/imports/scss/_MenuUI.scss
+++ b/_scss/imports/scss/_MenuUI.scss
@@ -4,12 +4,11 @@
 // (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 // </copyright>
 
-/*
- * MenuUI.scss
- * Styles governing the main dropdown menu.
- * Note that colors and font definitions go in 
- * _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
- */
+// MenuUI.scss
+// Styles governing the main dropdown menu.
+// Note that colors and font definitions go in 
+// _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
+  
 .menuBar {
     width:100%;
     border-style: solid;
@@ -49,8 +48,8 @@
     background : $color-menu-active-bg;
 }
 
-/*Styles for positioning and display
-Supports fly-out of sub-menus two levels deep only */
+// Styles for positioning and display
+Supports fly-out of sub-menus two levels deep only  
 
 .menuBar ul ul {
     position: absolute;
diff --git a/_scss/imports/scss/_PanelUI.scss b/_scss/imports/scss/_PanelUI.scss
index e72a1502..ac82adf8 100755
--- a/_scss/imports/scss/_PanelUI.scss
+++ b/_scss/imports/scss/_PanelUI.scss
@@ -4,24 +4,23 @@
 // (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 // </copyright>
 
-/*
- * PanelUI.scss
- * Styles governing the panels in the UI.
- * Note that colors and font definitions go in 
- * _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
- */
-/* layout for the container of all panels within a dock area */
+// 
+// PanelUI.scss
+// Styles governing the panels in the UI.
+// Note that colors and font definitions go in 
+// _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
+  
+//  layout for the container of all panels within a dock area  
 .panelContainer {
     margin: 0px;
     padding: 0px 0px;
     position:relative;
-    /*
-    this is here to hopefully show vertical scroll bars when the panels exceed the height of the panel
-    unfortunately it doesn't seem to work properly. this is probably due to some of our box styling or positioning
-    overflow: auto;  */
+   // this is here to hopefully show vertical scroll bars when the panels exceed the height of the panel
+   //  unfortunately it doesn't seem to work properly. this is probably due to some of our box styling or positioning
+    overflow: auto;   
 }
 
-/* base layout style for all panels*/
+//  base layout style for all panels 
 .panelDisclosureIcon
 {
     background-image:url("../images/panels/panelDisclosureIcon.png");
@@ -40,7 +39,7 @@
 }
 
 .panelCollapseArrowFill {
-    color: rgba(76,76,76,1); /* this is never really used but is set so we can get it via javascript to draw the control via script on the canvas */
+    color: rgba(76,76,76,1); //  this is never really used but is set so we can get it via javascript to draw the control via script on the canvas  
     padding:0px 4px;
 }
 
@@ -87,11 +86,11 @@
     padding-right:3px;
     width:32px;
 
-    /*This is a hack to get the tools panel to extend all the way to the bottom.*/
+    // This is a hack to get the tools panel to extend all the way to the bottom. 
     padding-bottom:450px;
 }
 
-/* sizes for the specific panels */
+//  sizes for the specific panels  
 
 #toolPropertiesPanel {
     height: 32px;
@@ -102,7 +101,7 @@
     height: 116px;
 }
 
-/* Only used by Animation Presets Panel currently */
+//  Only used by Animation Presets Panel currently  
 
 .treeComponent
 {
@@ -119,7 +118,7 @@
     list-style: none;
 }
 
-/*This sets the style for a tree folder's icon*/
+// This sets the style for a tree folder's icon 
 ul.treeComponent > img:first-child
 {
     margin-left: -35px;
@@ -139,7 +138,7 @@ ul.treeComponent > img:first-child
     margin-left: -20px;
     padding-right:10px;
     vertical-align:middle;
-    /*border-bottom:1px solid #555555;*/
+    // border-bottom:1px solid #555555; 
 }
 
 .treeCategory
@@ -153,8 +152,8 @@ ul.treeComponent > img:first-child
 	color: $color-panel-text;
 }
 
-/* ======  Used by Properties Panel ====== */
-/* Removed the outline text input style -> Causing problems with the Canvas */
+//  ======  Used by Properties Panel ======  
+//  Removed the outline text input style -> Causing problems with the Canvas  
 
 .propertiesPanel
 {
@@ -210,7 +209,7 @@ ul.treeComponent > img:first-child
     background-color: $color-panel-shadow;
 }
 
-/* ======  Indexed table row and column classes for Properties Panel layout ====== */
+//  ======  Indexed table row and column classes for Properties Panel layout ======  
 .propRow1{
     width:100%;
 }
@@ -313,7 +312,7 @@ ul.treeComponent > img:first-child
 
 
 
-/* Begin: Project Panel UI classes */
+//  Begin: Project Panel UI classes  
 .Project-Panel {
 	height: 100%;
 }
@@ -354,14 +353,14 @@ ul.treeComponent > img:first-child
     margin-bottom: 36px;
 
 }
-/*
+// 
 #pp-container-list,
 #pp-container-assets {
     height: 310px;
     width: 100%;
     overflow: auto;
 }
-*/
+ 
 
 .pp-scroll-main {
 	display: block;
@@ -388,12 +387,12 @@ ul.treeComponent > img:first-child
 #pp-view-assets {
 	display: none;
 }
-/*
+// 
 #pp-container-assets .pp-scroll-linked,
 #pp-container-list .pp-scroll-linked {
 	width: 420px;
 }
-*/
+ 
 
 .pp-header-container {
     position: relative;
@@ -518,10 +517,10 @@ span.pp-span-all:focus {
 	display: block;
 	width: 9px;
 	height: 5px;
-	/*
+	// 
 	margin-right: 10px;
 	margin-top: 2px;
-	*/
+	 
 	background-image: url("../images/panels/project-panel/icon-sort-arrow.png");
 	background-repeat: no-repeat;
 	position: absolute;
@@ -559,7 +558,7 @@ span.pp-span-all:focus {
 	color: $color-menu-bg;
 }
 
-/* Icons! */
+//  Icons!  
 #pp-container-list li,
 #pp-container-list span.span-space {
     background-repeat: no-repeat;
@@ -660,7 +659,7 @@ span.pp-span-all:focus {
 }
 
 
-/* Buttons */
+//  Buttons  
 .pp-button, 
 #pp-col-buttons .pp-button div {
 	margin: 0px;
@@ -748,7 +747,7 @@ div.pp-button.button-divider div {
 	display: none;
 }
 
-/* Hide and Show different types of assets */
+//  Hide and Show different types of assets  
 .pp-type-script,
 .pp-type-video,
 .pp-type-audio,
@@ -777,7 +776,7 @@ div.pp-button.button-divider div {
 	display: block;
 }
 
-/* New file flyout */
+//  New file flyout  
 .pp-popup {
 	position: absolute;
 	top: -53px;
@@ -796,7 +795,7 @@ div.pp-button.button-divider div {
 	margin: 0px;
 	padding: 0px;
 }
-/* Search subwidget */
+//  Search subwidget  
 #pp-search {
 	position: absolute;
 	display: block;
@@ -850,7 +849,7 @@ div.pp-button.button-divider div {
 }
 
 
-/* Inline editor styling */
+//  Inline editor styling  
 #pp-container-assets input.inline-editor {
 	height: 11px;
 	width: 80%;
@@ -862,7 +861,7 @@ div.pp-button.button-divider div {
 }
 
 
-/* End: Tree component for Project Panel */
+//  End: Tree component for Project Panel  
 
 
 .subToolHolderPanel{
@@ -873,17 +872,17 @@ div.pp-button.button-divider div {
     margin-top:-6px
 }
 
-/*.marginposition{*/
-    /*margin-top:-26px*/
-/*}*/
-/* Begin: Properties Panel styles */
+// .marginposition{ 
+    // margin-top:-26px 
+// } 
+//  Begin: Properties Panel styles  
 
 .properties_panel {
 	overflow-x: hidden;
 	color: $color-panel-text;
 }
 
-/* Begin: styling the form elements */
+//  Begin: styling the form elements  
 .properties_panel select {
     -webkit-appearance: none;
     font-size: 9px;
@@ -932,10 +931,10 @@ button.panel-button {
 	background-color: $color-panel-input-bg;
 	color: $color-panel-input;
 }
-/* End: styling the form elements */
+//  End: styling the form elements  
 
 
-/* main section styles */
+//  main section styles  
 .pp_sectionHeader{
     font-size:12px;
     padding-left:37px;
@@ -952,7 +951,7 @@ button.panel-button {
     margin-top: 5px;
 }
 
-/* control groups */
+//  control groups  
 .pp_group{
     width: 100%;
     clear: both;
@@ -969,7 +968,7 @@ button.panel-button {
     left: 25px;
 }
 
-/* controls */
+//  controls  
 .pp_proplabel{
     float: left;
     width: auto;
@@ -1004,7 +1003,7 @@ button.panel-button {
     line-height: 12px;
     height: 16px;
 }
-/* Style overrides/extensions for tabular layout classes within panels */
+//  Style overrides/extensions for tabular layout classes within panels  
 .panel .layout-cell {
     vertical-align: top;
     text-align: left;
@@ -1025,7 +1024,7 @@ button.panel-button {
 .panel .layout-table.table-2col-wide .layout-cell {
 	width: 50%;
 }
-/* Slider properties */
+//  Slider properties  
 .slider_props .layout-table.table-2col-wide .layout-cell:first-child,
 .button_props .layout-table.table-2col-wide .layout-cell:first-child,
 .hottext_props .layout-table.table-2col-wide .layout-cell:first-child,
@@ -1079,7 +1078,7 @@ button.panel-button {
     margin-bottom: 10px;
 }
 
-/* Begin: Styles for DivPIProperties */
+//  Begin: Styles for DivPIProperties  
 .pp_colorpicker{
     width: 35px;
     height: 20px;
@@ -1100,13 +1099,13 @@ button.panel-button {
     border-width: none;
     margin: -1px 8px 0px 34px;
 }
-/* End Styles for DivPIProperties */
+//  End Styles for DivPIProperties  
 
 
 
-/* End: Properties Panel styles */
+//  End: Properties Panel styles  
 
-/* New Panel Layout Stuff */
+//  New Panel Layout Stuff  
 
 .panels {
     display: -webkit-box;
diff --git a/_scss/imports/scss/_ScrollBars.scss b/_scss/imports/scss/_ScrollBars.scss
index 9066c3ff..1c2f30ea 100755
--- a/_scss/imports/scss/_ScrollBars.scss
+++ b/_scss/imports/scss/_ScrollBars.scss
@@ -4,25 +4,25 @@
 // (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 // </copyright>
 
-/* Begin: Scroll Bar skinning */
+//  Begin: Scroll Bar skinning  
 ::-webkit-scrollbar {
     width: 11px;
     height: 11px;
 }
 
-/* Turn off single button up on top, and down on bottom */
+//  Turn off single button up on top, and down on bottom  
 ::-webkit-scrollbar-button:start:decrement,
 ::-webkit-scrollbar-button:end:increment {
-    display: none;  /*we have these off by default */
+    display: none;  // we have these off by default  
 }
 
-/* Turn off the down area up on top, and up area on bottom */
+//  Turn off the down area up on top, and up area on bottom  
 ::-webkit-scrollbar-button:vertical:start:increment,
 ::-webkit-scrollbar-button:vertical:end:decrement {
     display: none;
 }
 
-/* Turn off the down area up on top, and up area on bottom */
+//  Turn off the down area up on top, and up area on bottom  
 ::-webkit-scrollbar-button:horizontal:start:increment,
 ::-webkit-scrollbar-button:horizontal:end:decrement {
     display: none;
@@ -36,27 +36,27 @@
     background-color: $color-sb-border;
 }
 
-/* Track area above thumb and below up button */
+//  Track area above thumb and below up button  
 ::-webkit-scrollbar-track-piece:vertical:start {
     background-color: transparent;
 }
 
-/* Track area left of thumb and right of button */
+//  Track area left of thumb and right of button  
 ::-webkit-scrollbar-track-piece:horizontal:start {
     background-color: transparent;
 }
 
-/* Track area below thumb and down button */
+//  Track area below thumb and down button  
 ::-webkit-scrollbar-track-piece:vertical:end {
     background-color: transparent;
 }
 
-/* Track area right of thumb and left of button */
+//  Track area right of thumb and left of button  
 ::-webkit-scrollbar-track-piece:horizontal:end {
     background-color: transparent;
 }
 
-/* The thumb itself */
+//  The thumb itself  
 ::-webkit-scrollbar-thumb:vertical {
     border-color: $color-sb-border;
     border-style: solid;
@@ -101,13 +101,13 @@
 }
 
 ::-webkit-scrollbar-corner {
-    /*background-color: black;*/
-    /*
-        For some reason this is the only way I can find to not show the corner.
-        Setting the ::-webkit-scrollbar-corner:disabled style doesn't work as that
-        pseudo-class seems to be ignored.
-        John Mayhew
-    */
+    // background-color: black; 
+
+	//For some reason this is the only way I can find to not show the corner.
+	//Setting the ::-webkit-scrollbar-corner:disabled style doesn't work as that
+	//pseudo-class seems to be ignored.
+	//John Mayhew
+     
     background-color: $color-sb-border;
 }
 ::-webkit-scrollbar-corner:window-inactive {
@@ -124,12 +124,12 @@
     background-repeat: no-repeat;
 }
 
-/* disabled state */
+//  disabled state  
 ::-webkit-scrollbar-track:disabled {
     display: none;
 }
 
-/* These don't seem to be necessary or in some cases, they just seem to be ignored
+//  These don't seem to be necessary or in some cases, they just seem to be ignored
 :-webkit-scrollbar-track:vertical:disabled {
     display: none;
 }
@@ -153,6 +153,6 @@
 ::-webkit-resizer:disabled {
     display: none;
 }
-*/
-/* End: Scroll Bar Skinning */
+ 
+//  End: Scroll Bar Skinning  
 
diff --git a/_scss/imports/scss/_Stage.scss b/_scss/imports/scss/_Stage.scss
index bed29d98..faf8ee94 100755
--- a/_scss/imports/scss/_Stage.scss
+++ b/_scss/imports/scss/_Stage.scss
@@ -20,6 +20,40 @@
     border-width: 1px;
 }
 
+//  Used for the Iframe Version
+#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; 
+}
+
+
 #stageBG {
     width:100%;
     height:100%;
@@ -50,6 +84,24 @@
     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; 
+}
+
 .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);
diff --git a/_scss/imports/scss/_Tools.scss b/_scss/imports/scss/_Tools.scss
index 8614285f..935c4cd6 100755
--- a/_scss/imports/scss/_Tools.scss
+++ b/_scss/imports/scss/_Tools.scss
@@ -4,15 +4,15 @@
 // (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 // </copyright>
 
-/*
- * Tools.scss
- * For individual tool styles in the toolbar, see toolbar.scss.
- * Note that colors and font definitions go in 
- * _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
- * 
- */
+// 
+// Tools.scss
+// For individual tool styles in the toolbar, see toolbar.scss.
+// Note that colors and font definitions go in 
+// _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
+// 
+  
 
-/*Made changes to toolButton */
+// Made changes to toolButton  
 
 .toolButton {
     width:26px;
@@ -33,7 +33,7 @@
 
 .subOption{
     float:left;
-    /*margin:10px;*/
+    // margin:10px; 
     margin-top: 5px;
     margin-left: 10px;
     margin-right: 10px;
@@ -57,8 +57,8 @@
 .toolSeparator {
     height:1px;
     width:30px;
-    /*margin-left: 3px;*/
-    /*margin-right: 3px;*/
+    // margin-left: 3px; 
+    // margin-right: 3px; 
 }
 
 .toolSeparatorTop {
@@ -94,13 +94,13 @@
 }
 
 
-/* Added new styling Sub Tool Shape Options*/
+//  Added new styling Sub Tool Shape Options 
 
 .textBox {
 
    padding-top:3px;
    min-width:10em;
-   /*height:14px;*/
+   // height:14px; 
    margin-left:5px;
    position:relative;
    margin-top:0px;
@@ -113,7 +113,7 @@
    float:left;
    display:block;
    background-color: $color-tool-select-bg;
-   /*-webkit-border-radius: 0;*/
+   // -webkit-border-radius: 0; 
    border: 1px solid $color-tool-select-border;
    color:$color-tool-text;
    outline:none;
@@ -129,8 +129,8 @@
    padding-top:3px;
    margin-left:10px;
    font-size:12px;
-   /*display:inline;*/
-   /*line-height:10px;*/
+   // display:inline; 
+   // line-height:10px; 
    float:left;
    margin-right:5px;
 }
@@ -201,7 +201,7 @@
 {
     display:inline;
     float:left;
-    /*margin-left: 20px;*/
+    // margin-left: 20px; 
 }
 
 .leftLabel{
@@ -209,7 +209,7 @@
 	float:left;
 }
 
-/* Skin Radio Buttons */
+//  Skin Radio Buttons  
 input[type="radio"] {
     -webkit-appearance: none;
     background: $color-radio-bg;
@@ -236,7 +236,7 @@ input[type="radio"]:checked {
     border-style: solid;
 }
 
-/*disabled settings for checkbox and radiobutton*/
+// disabled settings for checkbox and radiobutton 
 input[type="radio"]:disabled {
     opacity: .3;
     background: $color-radio-border;
@@ -258,8 +258,8 @@ input[type="radio"]:disabled {
 }
 
 .checkBoxLabel{
-    /*margin-top:0.5em;*/
-    /*margin-left:-5em;*/
+    // margin-top:0.5em; 
+    // margin-left:-5em; 
     padding-top:3px;
     font-size:12px;
     float:left;
@@ -286,7 +286,7 @@ input[type="radio"]:disabled {
 .toolButtonSelectedColor {
     border-top-color: $color-tool-border-selected;
     border-left-color: $color-tool-border-selected;
-  /*  background: $color-tool-bg-active;*/
+  //   background: $color-tool-bg-active; 
 
 }
 
@@ -328,7 +328,7 @@ input[type="radio"]:disabled {
   @include marginTop(5px);
 }
 
-/* Begin: styles for tag toolbar */
+//  Begin: styles for tag toolbar  
 #tagToolContainer input.tag-type,
 #rotateObjectToolContainer input.tag-type,
 #translateObjectToolContainer input.tag-type {
@@ -484,4 +484,4 @@ input[type="radio"]:disabled {
 
 }
 
-/* Endi: styles for tag toolbar */
\ No newline at end of file
+//  Endi: styles for tag toolbar  
\ No newline at end of file
diff --git a/_scss/imports/scss/_ToolsSample.scss b/_scss/imports/scss/_ToolsSample.scss
index 8c354f14..2e1da9a8 100755
--- a/_scss/imports/scss/_ToolsSample.scss
+++ b/_scss/imports/scss/_ToolsSample.scss
@@ -5,7 +5,7 @@
 // (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 // </copyright>
 
-/*Image Sprinting */
+// Image Sprinting
 .ovalToolUp {
   background-image: url("../images/SpriteSheets/NinjaSpriteSheet.png");
   background-repeat: no-repeat;
diff --git a/_scss/imports/scss/_mixins.scss b/_scss/imports/scss/_mixins.scss
index e654aecf..061262f7 100755
--- a/_scss/imports/scss/_mixins.scss
+++ b/_scss/imports/scss/_mixins.scss
@@ -4,11 +4,11 @@
 // (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 // </copyright>
 
-/*
- * mixins.scss
- * Generic mixins.  Theme-specific mixins (e.g. for sprites) 
- * should go in the theme/themename/mixins.scss file.
- */
+
+// mixins.scss
+// Generic mixins.  Theme-specific mixins (e.g. for sprites) 
+// should go in the theme/themename/mixins.scss file.
+
 
 // Mixin to set the Opacity of an Element
 @mixin opacity($opacity){
diff --git a/_scss/imports/scss/_toolbar.scss b/_scss/imports/scss/_toolbar.scss
index 64fb32de..048c1f88 100755
--- a/_scss/imports/scss/_toolbar.scss
+++ b/_scss/imports/scss/_toolbar.scss
@@ -4,14 +4,14 @@
 // (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 // </copyright>
 
-/*
- * toolbar.scss
- * Styles governing the individual tools.
- * Note that colors and font definitions go in 
- * _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
- */
-
-/* New Tool List CSS */
+// 
+// toolbar.scss
+// Styles governing the individual tools.
+// Note that colors and font definitions go in 
+// _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
+  
+
+//  New Tool List CSS  
 .SelectionToolPressed {
     @include background-pos(12,1,26px,23px);
     @include opacity(1.0);
@@ -219,7 +219,7 @@
     opacity: 0.7;
 }
 
-/* Selection Tool Options */
+//  Selection Tool Options  
 .topAlignUp {
 
   @include background-pos(8,2,26px,23px);
diff --git a/_scss/imports/themes/default/_colors.scss b/_scss/imports/themes/default/_colors.scss
index 2fbe7956..34d5ffc9 100755
--- a/_scss/imports/themes/default/_colors.scss
+++ b/_scss/imports/themes/default/_colors.scss
@@ -4,14 +4,13 @@
 // (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 // </copyright>
 
-/*
- * _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.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 */
+
+//  Colors for radio buttons and other form elements  
 $color-radio-border: rgb(40,40,40);
 $color-radio-shadow: rgba(200,200,200,0.5);
 $color-radio-gradient-top: rgb(100,100,100);
@@ -22,29 +21,29 @@ $color-input: rgb(255,255,255);
 $color-input-bg: rgb(68, 68, 68);
 $color-input-border: rgb(49, 49, 49);
 $color-focus-outline: rgb(180, 180, 180);
+$color-transparent: rgba(0,0,0,0);
 
-/* 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.
- * 
- */
-$color-divider-first: rgb(35,35,35); /* top and left */
-$color-divider-second: rgb(0,0,0); /* Middle */
-$color-divider-third: rgb(58,58,58); /* Bottom and right */
+//  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.
+// 
+  
+$color-divider-first: rgb(35,35,35); //  top and left  
+$color-divider-second: rgb(0,0,0); //  Middle  
+$color-divider-third: rgb(58,58,58); //  Bottom and right  
 
-/* Main background color of entire app */
-$color-app-bg: rgb(0,0,0); /* Main app background color. */
-$color-app-bg-a1: rgba(0,0,0,1);  /* rgba version */
-$color-app-border: rgb(51,51,51); /* Main app border color */
-$color-app-shadow: rgba(0,0,0,.5); /* color of drop shadows */
-$color-stage: rgb(128,128,128); /* Stage color */
-$color-body-border: rgb(0,0,0); /* body border color */
-$color-body-bg: rgb(255,255,255); /* Body background color */
+//  Main background color of entire app  
+$color-app-bg: rgb(0,0,0); //  Main app background color.  
+$color-app-bg-a1: rgba(0,0,0,1);  //  rgba version  
+$color-app-border: rgb(51,51,51); //  Main app border color  
+$color-app-shadow: rgba(0,0,0,.5); //  color of drop shadows  
+$color-stage: rgb(128,128,128); //  Stage color  
+$color-body-border: rgb(0,0,0); //  body border color  
+$color-body-bg: rgb(255,255,255); //  Body background color  
 
-/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */
+//  Colors for main dropdown menus: background & text for both regular and highlighted states, dividers  
 $color-menu-bg: rgb(71,71,71);
 $color-menu-text: rgb(255,255,255);
 $color-menu-hilite-bg: rgb(178,178,178);
@@ -54,7 +53,7 @@ $color-menu-border: rgb(0,0,0);
 $color-menu-active-bg: rgb(181,122,10);
 
 
-/* Colors for tools: background, text, how they interact with the UI */
+//  Colors for tools: background, text, how they interact with the UI  
 $color-tool-bg: rgb(41,41,41);
 $color-tool-bg-active: rgb(178,178,178);
 $color-tool-border-selected: rgb(89,89,89);
@@ -69,15 +68,15 @@ $color-tool-select-border: rgb(0,0,0);
 $color-tool-select-hover-bg: rgb(221,221,221);
 
 
-/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */
+//  Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc.  
 $color-panel-bg: $color-menu-bg;
 $color-panel-text: $color-menu-text;
 $color-panel-input: $color-panel-text;
 $color-panel-hilite-bg: $color-menu-hilite-bg;
 $color-panel-hilite-text: $color-menu-hilite-text;
-$color-panel-clickable: rgb(215,215,215); /* used for editable items in their non-edit state, etc. */
-$color-panel-border: $color-menu-border; /* Border for panel and for block elements */
-$color-panel-shadow: rgb(58,58,58); /* Shadow for text and block elements */
+$color-panel-clickable: rgb(215,215,215); //  used for editable items in their non-edit state, etc.  
+$color-panel-border: $color-menu-border; //  Border for panel and for block elements  
+$color-panel-shadow: rgb(58,58,58); //  Shadow for text and block elements  
 $color-panel-input-bg: rgb(68, 68, 68);
 $color-panel-dividerlabel-bg: rgb(62, 62, 62);
 $color-panel-input-border: rgb(49, 49, 49);
@@ -85,7 +84,7 @@ $color-panel-divider-top: rgb(62, 62, 62);
 $color-panel-divider: $color-menu-divider;
 $color-panel-divider-bottom: rgb(86, 86, 86);
 
-/* Colors for scroll bars */
+//  Colors for scroll bars  
 $color-sb-border: rgb(0,0,0);
 $color-sb-1: rgb(140,140,140);
 $color-sb-2: rgb(173,173,173);
diff --git a/_scss/imports/themes/default/_fonts.scss b/_scss/imports/themes/default/_fonts.scss
index 9410dfd2..9174cff3 100755
--- a/_scss/imports/themes/default/_fonts.scss
+++ b/_scss/imports/themes/default/_fonts.scss
@@ -4,9 +4,4 @@
 // (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 // </copyright>
 
-/*
- * _fonts.scss
- * Defines the fonts for the application.
- */
 
-/* Droid Sans: Normal, bold asdf*/
diff --git a/_scss/imports/themes/default/_mixins.scss b/_scss/imports/themes/default/_mixins.scss
index e6a38a93..9f61e7ef 100755
--- a/_scss/imports/themes/default/_mixins.scss
+++ b/_scss/imports/themes/default/_mixins.scss
@@ -4,10 +4,8 @@
 // (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 // </copyright>
 
-/*
- * themes/themename/mixins.scss
- * Mixins that are theme-dependent (e.g. sprite mixins, etc)
- */
+// themes/themename/mixins.scss
+// Mixins that are theme-dependent (e.g. sprite mixins, etc)
 
 $Mx:0;
 $My:0;
diff --git a/_scss/ninja.scss b/_scss/ninja.scss
index 9980b04a..11c04afb 100755
--- a/_scss/ninja.scss
+++ b/_scss/ninja.scss
@@ -6,11 +6,11 @@
  (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.
- */
+
+// ninja.scss
+// Main SCSS file for ninja, compiled by SASS into the file ninja.css.
+
 
 // Import theme settings
 @import "imports/themes/default/colors";
diff --git a/css/ninja.css b/css/ninja.css
index 2fcb1380..9126c1d3 100755
--- 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; }
 
-/* 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,18 @@ 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; }
 
-/* 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 +54,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 +76,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 +114,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 +132,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 +150,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 +174,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,19 +208,13 @@ background: transparent;
 
 #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; }
 
-/* PanelUI.scss Styles governing the panels in the UI. Note that colors and font definitions go in  _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss */
-/* layout for the container of all panels within a dock area */
-.panelContainer { margin: 0px; padding: 0px 0px; position: relative; /*
-this is here to hopefully show vertical scroll bars when the panels exceed the height of the panel
-unfortunately it doesn't seem to work properly. this is probably due to some of our box styling or positioning
-overflow: auto;  */ }
+.panelContainer { margin: 0px; padding: 0px 0px; position: relative; overflow: auto; }
 
-/* base layout style for all panels*/
 .panelDisclosureIcon { background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; width: 16px; height: 16px; float: left; -webkit-transition-property: rotate; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: linear; padding-right: 2px; }
 
 .panelBackground { color: white; background: #292929; }
 
-.panelCollapseArrowFill { color: #4c4c4c; /* this is never really used but is set so we can get it via javascript to draw the control via script on the canvas */ padding: 0px 4px; }
+.panelCollapseArrowFill { color: #4c4c4c; padding: 0px 4px; }
 
 .panelContentColor { background: #474747; border-color: black; }
 
@@ -297,31 +228,26 @@ overflow: auto;  */ }
 
 .panelCloseIcon:hover { opacity: 1.0; }
 
-.toolsPanelContainer { margin-top: -2px; margin-left: -2px; padding-top: 20px; padding-left: 3px; padding-right: 3px; width: 32px; /*This is a hack to get the tools panel to extend all the way to the bottom.*/ padding-bottom: 450px; }
+.toolsPanelContainer { margin-top: -2px; margin-left: -2px; padding-top: 20px; padding-left: 3px; padding-right: 3px; width: 32px; padding-bottom: 450px; }
 
-/* sizes for the specific panels */
 #toolPropertiesPanel { height: 32px; margin: 0px; }
 
 #timelinePanel { height: 116px; }
 
-/* Only used by Animation Presets Panel currently */
 .treeComponent { -webkit-user-select: none; font-size: 11px; margin-left: 20px; cursor: default; color: white; }
 
 .treeComponent ul { position: relative; list-style: none; }
 
-/*This sets the style for a tree folder's icon*/
 ul.treeComponent > img:first-child { margin-left: -35px; margin-right: 5px; -webkit-transition: -webkit-transform 0.1s linear; }
 
 .treeComponent li { position: relative; list-style: none; border-bottom: 1px solid #505050; }
 
-.treeComponent li img { margin-left: -20px; padding-right: 10px; vertical-align: middle; /*border-bottom:1px solid #555555;*/ }
+.treeComponent li img { margin-left: -20px; padding-right: 10px; vertical-align: middle; }
 
 .treeCategory { font-weight: bold; }
 
 .treeItem { font-weight: normal; vertical-align: middle; color: white; }
 
-/* ======  Used by Properties Panel ====== */
-/* Removed the outline text input style -> Causing problems with the Canvas */
 .propertiesPanel { min-height: 300px; margin-top: 4px; }
 
 .panelHRule { border: none; display: block; float: left; clear: both; width: 100%; height: 3px; background-color: #505050; }
@@ -332,7 +258,6 @@ ul.treeComponent > img:first-child { margin-left: -35px; margin-right: 5px; -web
 
 .piCollapsibleSectionHeader { font-size: 12px; padding-left: 10px; vertical-align: top; height: 16px; background-color: #3a3a3a; }
 
-/* ======  Indexed table row and column classes for Properties Panel layout ====== */
 .propRow1 { width: 100%; }
 
 .propRow1Col1 { width: 30%; text-align: right; }
@@ -393,7 +318,6 @@ ul.treeComponent > img:first-child { margin-left: -35px; margin-right: 5px; -web
 
 .splitterBackground { background: black; }
 
-/* Begin: Project Panel UI classes */
 .Project-Panel { height: 100%; }
 
 #pp-container { height: 100%; background-color: #292929; border: 0px; overflow-y: hidden !IMPORTANT; position: relative; }
@@ -404,23 +328,16 @@ ul.treeComponent > img:first-child { margin-left: -35px; margin-right: 5px; -web
 
 #pp-col-files { display: block; position: absolute; height: auto; overflow: hidden; bottom: 0; top: 0; left: 0; right: 0; border: 2px solid black; border-bottom-width: 0px; background-color: #474747; margin-left: 30px; margin-right: 10px; margin-bottom: 36px; }
 
-/*
-#pp-container-list,
-#pp-container-assets { height: 310px; width: 100%; overflow: auto;
-}
-*/
+#pp-container-list, #pp-container-assets { height: 310px; width: 100%; overflow: auto; }
+
 .pp-scroll-main { display: block; position: absolute; height: auto; bottom: 0; top: 0; left: 0; right: 0; margin-top: 18px; overflow: auto; }
 
 .pp-scroll-main .pp-scroll-linked { display: block; position: absolute; height: auto; bottom: 0; top: 0; left: 0; right: 0; overflow: visible; }
 
 #pp-view-assets { display: none; }
 
-/*
-#pp-container-assets .pp-scroll-linked,
-#pp-container-list .pp-scroll-linked {
-	width: 420px;
-}
-*/
+#pp-container-assets .pp-scroll-linked, #pp-container-list .pp-scroll-linked { width: 420px; }
+
 .pp-header-container { position: relative; overflow: hidden; border-bottom: 1px solid black; background-color: #3a3a3a; min-width: 390px; }
 
 .pp-header { border-right: 1px solid black; color: white; padding-top: 4px; padding-left: 6px; font-weight: bold; display: block; float: left; overflow: visible; position: relative; }
@@ -473,10 +390,7 @@ span.pp-span-all:focus { -webkit-box-shadow: none; background-color: #b4b4b4; bo
 
 .pp-sort-arrow { display: none; }
 
-.pp-sort .pp-sort-arrow { display: block; width: 9px; height: 5px; /*
-margin-right: 10px;
-margin-top: 2px;
-*/ background-image: url("../images/panels/project-panel/icon-sort-arrow.png"); background-repeat: no-repeat; position: absolute; top: 5px; right: 10px; }
+.pp-sort .pp-sort-arrow { display: block; width: 9px; height: 5px; margin-right: 10px; margin-top: 2px; background-image: url("../images/panels/project-panel/icon-sort-arrow.png"); background-repeat: no-repeat; position: absolute; top: 5px; right: 10px; }
 
 .pp-sort.sort-ascending .pp-sort-arrow { background-position: 0 0; }
 
@@ -490,7 +404,6 @@ margin-top: 2px;
 
 #pp-view-assets #pp-container-assets :focus, #pp-view-assets #pp-container-assets .focused { background-color: #b4b4b4; border-color: #b4b4b4; color: #474747; }
 
-/* Icons! */
 #pp-container-list li, #pp-container-list span.span-space { background-repeat: no-repeat; }
 
 #pp-container-list li.directory.open > span.pp-span-all > span.pp-col-files > span.span-space { background-image: url("../images/panels/project-panel/icon-file-folderopen.png"); background-position: 100% 0px; }
@@ -531,7 +444,6 @@ margin-top: 2px;
 
 #pp-container-list span.span-space { display: block; float: left; margin-right: 5px; height: 15px; }
 
-/* Buttons */
 .pp-button, #pp-col-buttons .pp-button div { margin: 0px; padding: 0px; width: 26px; height: 25px; background-repeat: no-repeat; overflow: hidden; }
 
 .pp-button { margin-top: 5px; cursor: pointer; position: relative; left: 2px; }
@@ -576,7 +488,6 @@ div.pp-button.button-divider div { height: 1px; width: 24px; background-color: b
 
 .pp-button.button-undefined { display: none; }
 
-/* Hide and Show different types of assets */
 .pp-type-script, .pp-type-video, .pp-type-audio, .pp-type-image, .pp-type-flash, .pp-type-other { display: none; }
 
 .pp-show-all .pp-asset-col div { display: block; }
@@ -591,12 +502,10 @@ div.pp-button.button-divider div { height: 1px; width: 24px; background-color: b
 
 .pp-show-flash .pp-type-flash { display: block; }
 
-/* New file flyout */
 .pp-popup { position: absolute; top: -53px; left: -40px; width: 80px; height: 50px; overflow: hidden; border-radius: 5px; background-color: #292929; border: 2px solid #333333; z-index: 100; display: none; }
 
 .pp-popup p { color: white; margin: 0px; padding: 0px; }
 
-/* Search subwidget */
 #pp-search { position: absolute; display: block; height: 24px; border: 2px solid black; background-color: #474747; margin-left: 30px; margin-right: 10px; left: 0px; bottom: 10px; right: 0px; }
 
 #pp-search label { position: absolute; top: 7px; left: 12px; width: 20px; height: 20px; background-image: url("../images/panels/project-panel/icon-button-search.png"); background-repeat: no-repeat; z-index: 10; }
@@ -611,21 +520,14 @@ div.pp-button.button-divider div { height: 1px; width: 24px; background-color: b
 
 #pp-view-assets #pp-container-assets .pp-filter-hidden { display: none; }
 
-/* Inline editor styling */
 #pp-container-assets input.inline-editor { height: 11px; width: 80%; background-color: #242424 !important; color: #b2b2b2 !important; top: -2px; border-width: 0px; font-size: 11px; }
 
-/* End: Tree component for Project Panel */
 .subToolHolderPanel { margin-left: 42px; }
 
 .subToolPanel { margin-top: -6px; }
 
-/*.marginposition{*/
-/*margin-top:-26px*/
-/*}*/
-/* Begin: Properties Panel styles */
 .properties_panel { overflow-x: hidden; color: white; }
 
-/* Begin: styling the form elements */
 .properties_panel select { -webkit-appearance: none; font-size: 9px; color: white; background-color: #444444; border: 1px solid #313131; width: 120px; height: 15px; outline: none; background-image: url("../images/dropdown-bg.png"); background-repeat: no-repeat; background-position: right center; }
 
 .properties_panel select:focus { outline: none; border: 1px solid #313131; }
@@ -638,20 +540,16 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba
 
 .properties_panel .hottextunit input { width: 40px; height: 12px; font-size: 10px; -webkit-appearance: none; border-color: #313131; background-color: #444444; color: white; }
 
-/* End: styling the form elements */
-/* main section styles */
 .pp_sectionHeader { font-size: 12px; padding-left: 37px; height: 15px; background-color: #3e3e3e; background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; background-position: 11px 0px; margin-bottom: 8px; }
 
 .pp_section { width: 227px; margin-top: 5px; }
 
-/* control groups */
 .pp_group { width: 100%; clear: both; margin-left: 5px; }
 
 .pp_propset { float: left; width: auto; height: 20px; }
 
 .pp_lock { position: absolute; top: -2px; left: 25px; }
 
-/* controls */
 .pp_proplabel { float: left; width: auto; }
 
 .pp_proplabel_sm { float: left; width: auto; }
@@ -664,7 +562,6 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba
 
 .properties_panel label { display: block; float: left; line-height: 12px; height: 16px; }
 
-/* Style overrides/extensions for tabular layout classes within panels */
 .panel .layout-cell { vertical-align: top; text-align: left; }
 
 #props_defaultids label, .panel .layout-table .layout-cell:first-child, .panel .layout-table.table-2col .layout-cell:first-child { width: 70px; text-align: right; margin-right: 7px; }
@@ -675,7 +572,6 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba
 
 .panel .layout-table.table-2col-wide .layout-cell { width: 50%; }
 
-/* Slider properties */
 .slider_props .layout-table.table-2col-wide .layout-cell:first-child, .button_props .layout-table.table-2col-wide .layout-cell:first-child, .hottext_props .layout-table.table-2col-wide .layout-cell:first-child, .imagecont_props .layout-table.table-2col-wide .layout-cell:first-child, .toggle_props .layout-table.table-2col-wide .layout-cell:first-child, .image_props .layout-table.table-2col-wide .layout-cell:first-child { width: 100%; }
 
 .image_props .layout-table.table-2col-wide .layout-cell:first-child { width: 200%; }
@@ -698,16 +594,12 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba
 
 .properties_panel .layout-table { position: relative; margin-bottom: 10px; }
 
-/* Begin: Styles for DivPIProperties */
 .pp_colorpicker { width: 35px; height: 20px; overflow: hidden; text-indent: -9999px; padding: 0px 0px 0px 0px; display: block; float: left; cursor: pointer; background-color: #333; border: solid 1px #000; }
 
 .pp_strokelabel { border: none; margin: -1px 8px 0px 27px; }
 
 .pp_filllabel { border-width: none; margin: -1px 8px 0px 34px; }
 
-/* End Styles for DivPIProperties */
-/* End: Properties Panel styles */
-/* New Panel Layout Stuff */
 .panels { display: -webkit-box; position: absolute; -webkit-box-orient: vertical; -webkit-box-align: stretch; height: 100%; width: 100%; }
 
 .panel .resizeBar { height: 4px; cursor: row-resize; }
@@ -754,7 +646,6 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba
 
 .over { border-top: 1px solid #0000FF; }
 
-/* MenuUI.scss Styles governing the main dropdown menu. Note that colors and font definitions go in  _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss */
 .menuBar { width: 100%; border-style: solid; border-width: 1px; height: 22px; color: white; background: #474747; border-color: black; }
 
 .menuBar ul { list-style: none; margin: 0; padding: 0; float: left; cursor: default; }
@@ -767,9 +658,7 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba
 
 .menuBar li:active { background: #b57a0a; }
 
-/*Styles for positioning and display
-Supports fly-out of sub-menus two levels deep only */
-.menuBar ul ul { position: absolute; z-index: 500; }
+Supports fly-out of sub-menus two levels deep only .menuBar ul ul { position: absolute; z-index: 500; }
 
 .menuBar ul ul ul { position: absolute; top: 0; left: 100%; }
 
@@ -777,19 +666,17 @@ nav.menuBar ul ul, nav.menuBar ul li:hover ul ul, nav.menuBar ul ul li:hover ul
 
 nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul li:hover ul { display: block; }
 
-/* Tools.scss For individual tool styles in the toolbar, see toolbar.scss. Note that colors and font definitions go in  _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss  */
-/*Made changes to toolButton */
 .toolButton { width: 26px; height: 23px; padding: 0px; margin: 1px; border-width: 1px; border-style: solid; }
 
 .subToolButton { float: left; }
 
-.subOption { float: left; /*margin:10px;*/ margin-top: 5px; margin-left: 10px; margin-right: 10px; }
+.subOption { float: left; margin-top: 5px; margin-left: 10px; margin-right: 10px; }
 
 .toolButton:active { border-top-width: 1px; border-top-style: solid; border-left-width: 1px; border-left-style: solid; }
 
 .toolButtonSelected { border-top-width: 1px; border-top-style: solid; border-left-width: 1px; border-left-style: solid; }
 
-.toolSeparator { height: 1px; width: 30px; /*margin-left: 3px;*/ /*margin-right: 3px;*/ }
+.toolSeparator { height: 1px; width: 30px; }
 
 .toolSeparatorTop { margin-top: 3px; margin-bottom: 0px; }
 
@@ -803,14 +690,13 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul
 
 .drawingMode { outline: blue solid thin; }
 
-/* Added new styling Sub Tool Shape Options*/
-.textBox { padding-top: 3px; min-width: 10em; /*height:14px;*/ margin-left: 5px; position: relative; margin-top: 0px; }
+.textBox { padding-top: 3px; min-width: 10em; margin-left: 5px; position: relative; margin-top: 0px; }
 
-.selectBox { width: 10em; opacity: 0.9; margin-left: 10px; float: left; display: block; background-color: #666666; /*-webkit-border-radius: 0;*/ border: 1px solid black; color: white; outline: none; }
+.selectBox { width: 10em; opacity: 0.9; margin-left: 10px; float: left; display: block; background-color: #666666; border: 1px solid black; color: white; outline: none; }
 
 .selectBox:hover, .selectBox:active { background-color: #dddddd; opacity: 1; color: black; }
 
-.label { padding-top: 3px; margin-left: 10px; font-size: 12px; /*display:inline;*/ /*line-height:10px;*/ float: left; margin-right: 5px; }
+.label { padding-top: 3px; margin-left: 10px; font-size: 12px; float: left; margin-right: 5px; }
 
 .subToolPropertiespanel { margin-left: 43px; }
 
@@ -830,25 +716,23 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul
 
 .cornerRadius.bottomRight { margin-top: 3px; -webkit-transform: rotate(180deg); margin-right: -2px; }
 
-#toolOptionsContainer { display: inline; float: left; /*margin-left: 20px;*/ }
+#toolOptionsContainer { display: inline; float: left; }
 
 .leftLabel { margin-top: 3px; float: left; }
 
-/* Skin Radio Buttons */
 input[type="radio"] { -webkit-appearance: none; background: black; width: 28px; height: 24px; vertical-align: middle; border-width: 1px; border-style: solid; border-color: #282828; font-size: 10px; color: #c8c8c8; margin: 4px; }
 
 input[type="radio"]:hover { border-width: 1px; border-style: solid; }
 
 input[type="radio"]:checked { background: #282828; border-width: 1px; border-style: solid; }
 
-/*disabled settings for checkbox and radiobutton*/
 input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1px; border-style: solid; }
 
 .toolPropertiesContainer { float: left; margin-left: 10%; width: 100%; }
 
 .optionButtons { padding: 2px; margin: 1px 4px; float: left; }
 
-.checkBoxLabel { /*margin-top:0.5em;*/ /*margin-left:-5em;*/ padding-top: 3px; font-size: 12px; float: left; margin-right: 5px; }
+.checkBoxLabel { padding-top: 3px; font-size: 12px; float: left; margin-right: 5px; }
 
 .customTextBox { float: right; margin-left: 2em; margin-right: 4em; margin-top: 3px; height: 15px; }
 
@@ -856,7 +740,7 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 
 .toolButtonColor:active { background: #b2b2b2; }
 
-.toolButtonSelectedColor { border-top-color: #595959; border-left-color: #595959; /*  background: $color-tool-bg-active;*/ }
+.toolButtonSelectedColor { border-top-color: #595959; border-left-color: #595959; }
 
 .toolSeparatorTopColor { background: #232323; }
 
@@ -874,7 +758,6 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; bor