From 2e58595d5c58ad9937bfc4f85ba8894970d4719f Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Wed, 8 Feb 2012 13:56:54 -0800
Subject: adding new scss folder
---
scss/config.rb | 11 +
scss/imports/codemirror/_codemirror.scss | 75 ++
scss/imports/codemirror/_css.scss | 15 +
scss/imports/codemirror/_javascript.scss | 12 +
scss/imports/scss/_Base.scss | 231 ++++++
scss/imports/scss/_Components.scss | 33 +
scss/imports/scss/_MainWindow.scss | 338 ++++++++
scss/imports/scss/_MenuUI.scss | 75 ++
scss/imports/scss/_PanelUI.scss | 1256 ++++++++++++++++++++++++++++++
scss/imports/scss/_ScrollBars.scss | 158 ++++
scss/imports/scss/_Stage.scss | 194 +++++
scss/imports/scss/_Tools.scss | 487 ++++++++++++
scss/imports/scss/_ToolsSample.scss | 14 +
scss/imports/scss/_UserContent.scss | 10 +
scss/imports/scss/_mixins.scss | 20 +
scss/imports/scss/_toolbar.scss | 290 +++++++
scss/imports/themes/_test.scss | 55 ++
scss/imports/themes/default/_colors.scss | 94 +++
scss/imports/themes/default/_fonts.scss | 7 +
scss/imports/themes/default/_mixins.scss | 37 +
scss/ninja.scss | 42 +
21 files changed, 3454 insertions(+)
create mode 100755 scss/config.rb
create mode 100644 scss/imports/codemirror/_codemirror.scss
create mode 100644 scss/imports/codemirror/_css.scss
create mode 100644 scss/imports/codemirror/_javascript.scss
create mode 100644 scss/imports/scss/_Base.scss
create mode 100644 scss/imports/scss/_Components.scss
create mode 100644 scss/imports/scss/_MainWindow.scss
create mode 100644 scss/imports/scss/_MenuUI.scss
create mode 100644 scss/imports/scss/_PanelUI.scss
create mode 100644 scss/imports/scss/_ScrollBars.scss
create mode 100644 scss/imports/scss/_Stage.scss
create mode 100644 scss/imports/scss/_Tools.scss
create mode 100644 scss/imports/scss/_ToolsSample.scss
create mode 100644 scss/imports/scss/_UserContent.scss
create mode 100644 scss/imports/scss/_mixins.scss
create mode 100644 scss/imports/scss/_toolbar.scss
create mode 100644 scss/imports/themes/_test.scss
create mode 100644 scss/imports/themes/default/_colors.scss
create mode 100644 scss/imports/themes/default/_fonts.scss
create mode 100644 scss/imports/themes/default/_mixins.scss
create mode 100755 scss/ninja.scss
diff --git a/scss/config.rb b/scss/config.rb
new file mode 100755
index 00000000..23327bde
--- /dev/null
+++ b/scss/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 = ""
+images_dir = "../images/"
+javascripts_dir = "../js"
+output_style = :compact
+line_comments = false
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
diff --git a/scss/imports/codemirror/_codemirror.scss b/scss/imports/codemirror/_codemirror.scss
new file mode 100644
index 00000000..281e7a9a
--- /dev/null
+++ b/scss/imports/codemirror/_codemirror.scss
@@ -0,0 +1,75 @@
+/*
+ This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+.CodeMirror {
+ overflow: auto;
+ height: 300px;
+ line-height: 1em;
+ font-family: monospace;
+ _position: relative; /* IE6 hack */
+ background: white;
+}
+
+.CodeMirror-gutter {
+ position: absolute; left: 0; top: 0;
+ background-color: #f7f7f7;
+ border-right: 1px solid #eee;
+ min-width: 2em;
+ height: 100%;
+}
+.CodeMirror-gutter-text {
+ color: #aaa;
+ text-align: right;
+ padding: .4em .2em .4em .4em;
+}
+.CodeMirror-lines {
+ padding: .4em;
+}
+
+.CodeMirror pre {
+ border-width: 0; margin: 0; padding: 0; background: transparent;
+ font-family: inherit;
+}
+
+.CodeMirror-cursor {
+ z-index: 10;
+ position: absolute;
+ visibility: hidden;
+ border-left: 1px solid black !important;
+}
+.CodeMirror-focused .CodeMirror-cursor {
+ visibility: visible;
+}
+
+span.CodeMirror-selected {
+ background: #ccc !important;
+ color: HighlightText !important;
+}
+.CodeMirror-focused span.CodeMirror-selected {
+ background: Highlight !important;
+}
+
+
+.CodeMirror-matchingbracket {color: #0f0 !important;}
+.CodeMirror-nonmatchingbracket {color: #f22 !important;}
+
+.completions {
+ position: absolute;
+ z-index: 10;
+ overflow: hidden;
+ -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+ -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+ box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+}
+
+.completions select {
+ background: #fafafa;
+ outline: none;
+ border: none;
+ padding: 0;
+ margin: 0;
+ font-family: monospace;
+}
diff --git a/scss/imports/codemirror/_css.scss b/scss/imports/codemirror/_css.scss
new file mode 100644
index 00000000..fb870e84
--- /dev/null
+++ b/scss/imports/codemirror/_css.scss
@@ -0,0 +1,15 @@
+/*
+ This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+span.css-at {color: #708;}
+span.css-unit {color: #281;}
+span.css-value {color: #708;}
+span.css-identifier {color: black;}
+span.css-selector {color: #11B;}
+span.css-important {color: #00F;}
+span.css-colorcode {color: #299;}
+span.css-comment {color: #A70;}
+span.css-string {color: #A22;}
diff --git a/scss/imports/codemirror/_javascript.scss b/scss/imports/codemirror/_javascript.scss
new file mode 100644
index 00000000..1124e279
--- /dev/null
+++ b/scss/imports/codemirror/_javascript.scss
@@ -0,0 +1,12 @@
+/*
+ This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+span.js-keyword {color: #90b;}
+span.js-atom {color: #291;}
+span.js-variabledef {color: #00f;}
+span.js-localvariable {color: #049;}
+span.js-comment {color: #a70;}
+span.js-string {color: #a22;}
diff --git a/scss/imports/scss/_Base.scss b/scss/imports/scss/_Base.scss
new file mode 100644
index 00000000..8a743174
--- /dev/null
+++ b/scss/imports/scss/_Base.scss
@@ -0,0 +1,231 @@
+//
+// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+//
+
+
+//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;
+}
+:focus {
+ outline: none;
+ border: none;
+ -webkit-box-shadow: 0px 0px 1px 1px $color-focus-outline;
+
+}
+.layout-table {
+ display: table;
+}
+.layout-row {
+ display: table-row;
+}
+.layout-cell {
+ display: table-cell;
+}
+.layout-table .flexor div:first-child {
+ float: left;
+}
+.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 {
+ -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 $color-input-border;
+ color: $color-input;
+ background-color: $color-input-bg;
+ 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;
+}
+
+
+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;
+}
+input[type="search"].nj-skinned::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+ font-size: 10px;
+ height: 10px;
+ width: 10px;
+}
+input[type="search"].nj-skinned::-webkit-search-cancel-button:after {
+ content:"\2716";
+}
+
+// Buttons
+button.nj-skinned {
+ font-size: 9px;
+ cursor: pointer;
+ display: block;
+ border: 0px;
+ margin: 0px;
+ padding: 4px;
+ border: 1px $color-input-border solid;
+ background-color: $color-menu-bg;
+ background-image: -webkit-linear-gradient(top, $color-formgrad-top 0%, $color-formgrad-bottom 100%);
+ border-radius: 4px;
+ color: $color-menu-text;
+ text-transform: uppercase;
+ cursor: pointer;
+ text-shadow: 1px 1px 1px $color-app-shadow
+}
+button.nj-skinned:active {
+ background-image: -webkit-linear-gradient(top, $color-formgrad-bottom 0%, $color-formgrad-top 100%);
+}
+button.nj-skinned:hover {
+ -webkit-box-shadow: 0px 0px 3px $color-focus-outline;
+}
+
+// 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%);
+ color: $color-radio;
+ border: 2px solid $color-radio-border;
+ 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 $color-radio-shadow;
+ -moz-box-shadow: 0px 0px 2px $color-radio-shadow;
+ box-shadow: 0px 0px 2px $color-radio-shadow;
+}
+input[type="radio"].nj-skinned:checked {
+ 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:active {
+ background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%);
+}
+input[type="radio"].nj-skinned:disabled {
+ background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%);
+ border: 2px solid $color-radio-border;
+ cursor: default;
+}
+// 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%);
+ color: $color-radio;
+ border: 1px solid $color-radio-border;
+ width: 10px;
+ height: 10px;
+ font-size: 12px;
+ overflow: visible;
+ cursor: pointer;
+ -webkit-box-shadow: 0px 0px 2px $color-radio-shadow;
+ -moz-box-shadow: 0px 0px 2px $color-radio-shadow;
+ box-shadow: 0px 0px 2px $color-radio-shadow;
+ line-height: 9px;
+}
+
+input[type="checkbox"].nj-skinned:checked {
+
+}
+input[type="checkbox"].nj-skinned:checked:after {
+ content:"\2714";
+}
+input[type="checkbox"].nj-skinned:active {
+ background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%);
+}
+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
+
+// Begin: Basic skinning for visual dividers
+.nj-divider {
+ background-color: $color-divider-second;
+ border-width: 0px;
+ overflow: hidden;
+}
+.nj-divider.divider-horizontal {
+ border-top: 1px solid $color-divider-first;
+ border-bottom: 1px solid $color-divider-third;
+ height: 1px;
+}
+.nj-divider.divider-vertical {
+ border-left: 1px solid $color-divider-first;
+ border-right: 1px solid $color-divider-third;
+ width: 1px;
+}
+// End: Basic skinning for visual dividers
diff --git a/scss/imports/scss/_Components.scss b/scss/imports/scss/_Components.scss
new file mode 100644
index 00000000..c4182c73
--- /dev/null
+++ b/scss/imports/scss/_Components.scss
@@ -0,0 +1,33 @@
+//
+// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+//
+
+
+
+// Begin: Styles for the Tree component
+
+.tree
+{
+ -webkit-user-select:none;
+ cursor:default;
+ float: left;
+ padding-left: 0;
+ color: $color-panel-text;
+}
+
+.tree li
+{
+ -webkit-margin-before: 0px;
+ -webkit-margin-after: 0px;
+ list-style-type:none;
+}
+
+.tree li > text > img
+{
+ margin-right:8px;
+ -webkit-transition: -webkit-transform 0.05s linear;
+}
+
+// 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
new file mode 100644
index 00000000..23ace69b
--- /dev/null
+++ b/scss/imports/scss/_MainWindow.scss
@@ -0,0 +1,338 @@
+//
+// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+//
+
+
+// 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:$color-app-bg;
+ 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%;
+}
+
+#appContainer > section {
+ display: -webkit-box;
+ -webkit-box-flex:0;
+}
+
+#appContainer #appWorkspace {
+ -webkit-box-flex:1;
+ -webkit-box-align: stretch;
+}
+
+#appWorkspace {
+ display: -webkit-box;
+ -webkit-box-orient: horizontal;
+ -webkit-box-pack: center;
+ -webkit-box-align: center;
+ -webkit-box-sizing: stretch;
+ position:relative;
+ padding:2px 0px;
+ border: 1px solid #333;
+ overflow: hidden;
+}
+
+#topMenu {
+ background-color: #474747;
+ position:absolute;
+ height:28px;
+ width:100%;
+ top:0px;
+ left:0px;
+ z-index: 9999;
+}
+
+#topPanelContainer,
+#leftPanelContainer,
+#rightPanelContainer,
+#bottomPanelContainer {
+ background-color: #282828;
+}
+#topPanelContainer {
+ overflow: hidden;
+ margin-bottom:2px;
+ height:32px;
+}
+
+#bottomPanelContainer {
+ //border: 1px solid #333;
+ background: transparent;
+
+ min-height:80px;
+ max-height:50%;
+ overflow:auto;
+
+}
+
+.panelContainer {
+ display:block;
+ -webkit-box-orient: vertical;
+ position:relative;
+}
+
+#leftPanelContainer {
+ width:40px;
+ -webkit-box-align:stretch;
+ -webkit-box-sizing: border-box;
+ margin-left:2px;
+
+}
+#rightPanelContainer {
+ width:253px;
+ min-width:253px;
+ max-width:45%;
+ -webkit-box-sizing: border-box;
+ right:0px;
+ margin-right:2px;
+ border-right:2px solid #282828;
+}
+
+#mainContainer {
+ -webkit-box-flex:1;
+ margin: 0px 2px;
+ display: -webkit-box;
+ position:relative;
+}
+
+.mainContainerContent {
+ position:absolute;
+ display: -webkit-box;
+ width:100%;
+ height:100%;
+ -webkit-box-orient: vertical;
+
+}
+
+.mainContainerContent > #mainContent {
+ -webkit-box-flex:1;
+ display: -webkit-box;
+ -webkit-box-orient: horizontal;
+ margin-top:0px;
+}
+.mainContainerContent > section {
+ margin-top: 2px;
+ -webkit-box-flex:0;
+}
+.mainContainerContent > section:first-child {
+ margin-top: 0px;
+}
+
+#documentTabs {
+ background-color:#4d4d4d;
+}
+
+.splitter {
+ height:16px;
+ width:100%;
+ opacity: 0.4;
+ background: no-repeat center center url(data:image/png;base64,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) #000;
+ cursor:pointer;
+}
+
+.leftSplitter, .rightSplitter {
+ background-image:url('data:image/png;base64,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');
+ width:16px;
+ height:100%;
+ z-index: 199;
+ position: absolute;
+ top:0px;
+ left:0px;
+}
+.rightSplitter {
+ right:0px;
+ left:auto;
+}
+
+.bottomSplitter, .rightSplitter {
+ -webkit-transform: rotate(180deg);
+}
+
+.splitter:hover:not(.disabled) {
+ opacity: 1;
+}
+
+
+#leftPanelContainer {
+ -webkit-box-orient: vertical;
+}
+
+#leftPanelContainer .splitter {
+ -webkit-transform: rotate(270deg);
+ width:14px;
+ height:100%;
+}
+
+.splitter.bottom {
+ -webkit-transform: rotate(180deg);
+}
+
+#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;
+}
+
+#rulerLeft {
+ // TODO: temporary background please replace when component is implemented
+ background: url("../images/temp/ruler-left.png");
+ width:16px;
+}
+
+#stateBar {
+ height:20px;
+ background-color: #282828;
+ margin-bottom:0px;
+}
+
+#stageContainer {
+ -webkit-box-flex:1;
+ position:relative;
+}
+
+.timelineResizer {
+ background: #000 center center no-repeat url('data:image/gif;base64,R0lGODlhGQADAMQAAD49PXx8fGppaSYmJl9fXysrKykpKW5uboqJiUxMTGlpaV9eXjo6OoeHhyUkJD09PSoqKmpqaj8/P4qKiiQkJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdEMUI3NjM1QkQ1QTExRTBBMTJFQzE1RDk5REVFRkI4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdEMUI3NjM2QkQ1QTExRTBBMTJFQzE1RDk5REVFRkI4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0QxQjc2MzNCRDVBMTFFMEExMkVDMTVEOTlERUVGQjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0QxQjc2MzRCRDVBMTFFMEExMkVDMTVEOTlERUVGQjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAGQADAAAFH6ABDVRpnujpQAXxKFIUz3JNzwKwMEcz/cCgMIgIJEIAOw==');
+ width:100%;
+ height:6px;
+ cursor: row-resize;
+}
+.timelineResizer.collapsed {
+ height:0px !important;
+ margin:0px !important;
+ padding:0px !important;
+}
+
+.rightPanelResizer {
+ background: #282828 center center no-repeat; //url('data:image/gif;base64,R0lGODlhAwAZALMAABsbGyAgIC0tLTAwMDs7O0xMTFZWVltbW2lpaXZ2dgAAAAAAAAAAAAAAAAAAAAAAACH5BAkAAAoAIf/8SUNDUkdCRzEwMTIAAAUwYXBwbAIgAABtbnRyUkdCIFhZWiAH2QACABkACwAaAAthY3NwQVBQTAAAAABhcHBsAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWFwcGwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkc2NtAAABCAAAAvJkZXNjAAAD/AAAAG9nWFlaAAAEbAAAABR3dHB0AAAEgAAAABRyWFlaAAAElAAAABRiWFlaAAAEqAAAABRyVFJDAAAEvAAAAA5jcHJ0AAAEzAAAADhjaGFkAAAFBAAAACxn/1RSQwAABLwAAAAOYlRSQwAABLwAAAAObWx1YwAAAAAAAAARAAAADGVuVVMAAAAmAAACfmVzRVMAAAAmAAABgmRhREsAAAAuAAAB6mRlREUAAAAsAAABqGZpRkkAAAAoAAAA3GZyRlUAAAAoAAABKml0SVQAAAAoAAACVm5sTkwAAAAoAAACGG5iTk8AAAAmAAABBHB0QlIAAAAmAAABgnN2U0UAAAAmAAABBGphSlAAAAAaAAABUmtvS1IAAAAWAAACQHpoVFcAAAAWAAABbHpoQ04AAAAWAAAB1HJ1UlUAAAAiAAACpHBsUEwAAAAsAAACxgBZAGwAZQBpAG4AZf8AbgAgAFIARwBCAC0AcAByAG8AZgBpAGkAbABpAEcAZQBuAGUAcgBpAHMAawAgAFIARwBCAC0AcAByAG8AZgBpAGwAUAByAG8AZgBpAGwAIABHAOkAbgDpAHIAaQBxAHUAZQAgAFIAVgBCTgCCLAAgAFIARwBCACAw1zDtMNUwoTCkMOuQGnUoACAAUgBHAEIAIIJyX2ljz4/wAFAAZQByAGYAaQBsACAAUgBHAEIAIABHAGUAbgDpAHIAaQBjAG8AQQBsAGwAZwBlAG0AZQBpAG4AZQBzACAAUgBHAEIALQBQAHIAbwBmAGkAbGZukBoAIABSAEcAQgAgY8+P8GX/h072AEcAZQBuAGUAcgBlAGwAIABSAEcAQgAtAGIAZQBzAGsAcgBpAHYAZQBsAHMAZQBBAGwAZwBlAG0AZQBlAG4AIABSAEcAQgAtAHAAcgBvAGYAaQBlAGzHfLwYACAAUgBHAEIAINUEuFzTDMd8AFAAcgBvAGYAaQBsAG8AIABSAEcAQgAgAEcAZQBuAGUAcgBpAGMAbwBHAGUAbgBlAHIAaQBjACAAUgBHAEIAIABQAHIAbwBmAGkAbABlBB4EMQRJBDgEOQAgBD8EQAQ+BEQEOAQ7BEwAIABSAEcAQgBVAG4AaQB3AGUAcgBzAGEAbABuAHkAIABwAHIAbwBm/wBpAGwAIABSAEcAQgAAZGVzYwAAAAAAAAAUR2VuZXJpYyBSR0IgUHJvZmlsZQAAAAAAAAAAAAAAFEdlbmVyaWMgUkdCIFByb2ZpbGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABadQAArHMAABc0WFlaIAAAAAAAAPNSAAEAAAABFs9YWVogAAAAAAAAdE0AAD3uAAAD0FhZWiAAAAAAAAAoGgAAFZ8AALg2Y3VydgAAAAAAAAABAc0AAHRleHQAAAAAQ29weXJpZ2h0IDIwMDcgQXBwbGUgSW5jLkMsIGFsbCByaWdodHMgcmVzZXJ2ZWQuAHNmMzIAAAAAAAEMQgAABd7///MmAAAHkgAA/ZH///ui///9owAAA9wAAMBsACwAAAAAAwAZAAAEGjAUAgQCJoGh8+4ah4XgN5qemJYqeQoHUAgRADs=');
+ width:4px;
+ cursor: col-resize;
+}
+.rightPanelResizer.collapsed {
+ width:0px;
+}
+
+.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; }
+.disableTransition { -webkit-transition: none !important; -webkit-box-flex:0 !important; }
+
+#rightPanelContainer.collapsed, #leftPanelContainer.collapsed { width:0px !important; min-width:0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; }
+#topPanelContainer.collapsed, #bottomPanelContainer.collapsed { height:0px !important; min-height:0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; }
+.leftSplitter.collapsed { -webkit-transform:rotate(180deg); }
+.rightSplitter.collapsed { -webkit-transform:rotate(0deg); }
+.topSplitter.collapsed { -webkit-transform:rotate(180deg); }
+.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;
+}
+
+
+//
+.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;
+}
+
+// TODO: REMOVE THIS
+#rightPanelContent {
+ overflow-y:hidden;
+}
+
+.contextMenu {
+ position:absolute;
+ z-index:999;
+}
+
+#openDocumentsTabComponent {
+ height: 25px;
+ position: relative;
+ overflow: hidden;
+ color: white;
+}
+
+#openDocuments {
+ float: left;
+ height: 25px;
+ width: 100%;
+ font-size: 12px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ text-decoration: none;
+}
+
+#openDocuments li {
+ border-right: 1px solid black;
+ cursor: pointer;
+ display: inline;
+ float: left;
+ padding: 0.5em 1em;
+ text-shadow: 1px 1px 1px #000000;
+ vertical-align: middle;
+}
+
+#openDocuments li:hover, #openDocuments li:active, #openDocuments li.activeTab {
+ background-color: #7f7f7f;
+}
+
+#documentBar {
+ height: 25px;
+ width: 1000px;
+ position: relative;
+ overflow: hidden;
+ color: white;
+}
diff --git a/scss/imports/scss/_MenuUI.scss b/scss/imports/scss/_MenuUI.scss
new file mode 100644
index 00000000..e1fb149a
--- /dev/null
+++ b/scss/imports/scss/_MenuUI.scss
@@ -0,0 +1,75 @@
+//
+// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+//
+
+// 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: $color-menu-text;
+ background: $color-menu-bg;
+ border-color: $color-menu-border;
+}
+
+.menuBar ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ float: left;
+ cursor: default;
+}
+
+.menuBar li {
+ font-size: 9pt;
+ padding: 4px 10px;
+ display: block;
+ position: relative;
+ background : $color-menu-bg;
+ color : $color-menu-text;
+}
+
+.menuBar li li {
+ width: 10em;
+}
+.menuBar li:hover {
+ background : $color-menu-hilite-bg;
+ color : $color-menu-hilite-text;
+}
+
+.menuBar li:active {
+ background : $color-menu-active-bg;
+}
+
+// Styles for positioning and display
+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%;
+}
+
+nav.menuBar ul ul,
+nav.menuBar ul li:hover ul ul,
+nav.menuBar ul ul li:hover ul ul {
+ display: none;
+}
+
+nav.menuBar ul li:hover ul,
+nav.menuBar ul ul li:hover ul,
+nav.menuBar ul ul ul li:hover ul {
+ display: block;
+}
\ No newline at end of file
diff --git a/scss/imports/scss/_PanelUI.scss b/scss/imports/scss/_PanelUI.scss
new file mode 100644
index 00000000..21ada556
--- /dev/null
+++ b/scss/imports/scss/_PanelUI.scss
@@ -0,0 +1,1256 @@
+//
+// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+//
+
+//
+// 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;
+}
+
+// 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: $color-panel-text;
+ background: $color-tool-bg;
+}
+
+.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
+ padding:0px 4px;
+}
+
+.panelContentColor {
+ background: $color-panel-bg;
+ border-color: $color-panel-border;
+}
+.panelCaptionColor {
+ color: $color-panel-text;
+}
+
+.panelCaption {
+ padding: 2px 0px;
+ cursor:default;
+}
+
+.panelContainerTransition {
+ -moz-transition: width 0.3s ease-out, height 0.2s ease-out, opacity 0.2s ease-out;
+ -o-transition: width 0.3s ease-out, height 0.2s ease-out, opacity 0.2s ease-out;
+ -webkit-transition: width 0.3s ease-out, height 0.2s ease-out, opacity 0.2s ease-out;
+}
+
+.panelCloseIcon
+{
+ background-image:url("../images/panels/closeIcon.png");
+ background-repeat:no-repeat;
+ width:15px;
+ height:14px;
+ float:right;
+ opacity:0.5;
+}
+
+.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;
+}
+
+// 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: $color-panel-text;
+}
+
+.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 $color-panel-divider;
+}
+
+.treeComponent li img
+{
+ margin-left: -20px;
+ padding-right:10px;
+ vertical-align:middle;
+ // border-bottom:1px solid #555555;
+}
+
+.treeCategory
+{
+ font-weight : bold;
+}
+
+.treeItem {
+ font-weight : normal;
+ vertical-align:middle;
+ color: $color-panel-text;
+}
+
+// ====== 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: $color-panel-divider;
+}
+
+.vr
+{
+ position:absolute;
+ display:inline;
+ border:none;
+ clear:both;
+ width:2px;
+ height:26px;
+
+ background-image: -webkit-gradient(
+ linear,
+ left bottom,
+ right bottom,
+ color-stop(0.4, $color-menu-border),
+ color-stop(0.8, $color-panel-shadow)
+ )
+}
+
+.panelInputText
+{
+ resize: none;
+ color: white;
+ background-color: $color-panel-input-bg;
+ border: 1px solid $color-panel-input-border;
+ width : 100px;
+ outline: none;
+}
+
+.piCollapsibleSectionHeader
+{
+ font-size:12px;
+ padding-left:10px;
+ vertical-align:top;
+ height:16px;
+ background-color: $color-panel-shadow;
+}
+
+// ====== Indexed table row and column classes for Properties Panel layout ======
+.propRow1{
+ width:100%;
+}
+.propRow1Col1{
+ width:30%;
+ text-align:right;
+}
+.propRow1Col2{
+ width:70%;
+}
+
+.propRow2{
+ width:100%;
+}
+.propRow2Col1{
+ width:30%;
+}
+.propRow2Col2{
+ width:20%;
+}
+.propRow2Col3{
+ width:20%;
+}
+.propRow2Col4{
+ width:40%;
+}
+
+.propRow3{
+ width:100%;
+}
+.propRow3Col1{
+ width:5%;
+}
+.propRow3Col2{
+ width:5%;
+}
+.propRow3Col3{
+ width:20%;
+}
+.propRow3Col4{
+ width:20%;
+}
+.propRow3Col5{
+ width:20%;
+}
+.propRow3Col6{
+ width:30%;
+}
+
+.propRow4{
+ width:100%;
+}
+.propRow4Col1{
+ width:30%;
+}
+.propRow4Col2{
+ width:20%;
+}
+.propRow4Col3{
+ width:20%;
+}
+.propRow4Col4{
+ width:40%;
+}
+.propRow4Col5{
+ width:30%;
+}
+.propRow4Col6{
+ width:20%;
+}
+.propRow4Col7{
+ width:20%;
+}
+.propRow4Col8{
+ width:40%;
+}
+
+.testClass{
+ background-color:green;
+ border-radius: 35px;
+ position:relative;
+}
+
+.topRightCornerIcon{
+ -webkit-transform: rotate(90deg);
+}
+.topLeftCornerIcon{
+ -webkit-transform: rotate(0deg);
+}
+.bottomRightCornerIcon{
+ -webkit-transform: rotate(180deg);
+}
+.bottomLeftCornerIcon{
+ -webkit-transform: rotate(270deg);
+}
+
+.splitterBackground {
+ background: $color-app-bg;
+}
+
+
+
+// Begin: Project Panel UI classes
+.Project-Panel {
+ height: 100%;
+}
+#pp-container {
+ height: 100%;
+ background-color: $color-tool-bg;
+ border: 0px;
+ overflow-y: hidden !IMPORTANT;
+ position: relative;
+}
+
+#pp-container h3 {
+ font-weight: normal;
+ padding-left: 2em;
+ color: $color-menu-hilite-bg;
+}
+#pp-col-buttons {
+ position: absolute;
+ top: 8px;
+ left: -1px;
+ height: 100%;
+ width: 28px;
+}
+#pp-col-files {
+ display: block;
+ position:absolute;
+ height:auto;
+ overflow: hidden;
+ bottom:0;
+ top:0;
+ left:0;
+ right:0;
+ border: 2px solid $color-menu-border;
+ border-bottom-width: 0px;
+ background-color: $color-menu-bg;
+ margin-left: 30px;
+ margin-right: 10px;
+ margin-bottom: 36px;
+
+}
+//
+#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-header-container {
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid $color-menu-border;
+ background-color: $color-panel-shadow;
+ min-width: 390px;
+}
+.pp-header {
+ border-right: 1px solid $color-menu-border;
+ color: $color-panel-text;
+ padding-top: 4px;
+ padding-left: 6px;
+ font-weight: bold;
+ display: block;
+ float: left;
+ overflow: visible;
+ position: relative;
+}
+.pp-header .pp-resize-grip {
+ width: 7px;
+ height: 18px;
+ overflow: hidden;
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ cursor: col-resize;
+ z-index: 10;
+}
+.pp-header-container .header-file {
+ min-width: 100px;
+ width: 160px;
+}
+.pp-header-container .header-size {
+ min-width: 50px;
+ width: 50px;
+}
+.pp-header-container .header-type {
+ min-width: 50px;
+ width: 50px;
+}
+.pp-header-container .header-date {
+ min-width: 100px;
+ width: 120px;
+}
+
+#pp-container-list ul {
+ margin-top: 0px;
+ margin-left: 11px;
+}
+#pp-container-list ul.tree {
+ border-right: 1px solid $color-menu-divider;
+}
+#pp-container-list ul.tree > li:first-child > .pp-span-all:first-child {
+ font-weight: bold;
+}
+
+#pp-container-list ul ul {
+ margin: 0px;
+ padding: 0px;
+ display: block;
+}
+#pp-container-list li {
+ padding-top: 3px;
+ padding-bottom: 3px;
+ font-size: 11px;
+ border-bottom: 1px solid $color-menu-divider;
+ color: $color-menu-text;
+ width: 100%;
+}
+
+#pp-container-list li.open li:last-child {
+ border-bottom: 0px;
+ padding-bottom: 0px;
+}
+#pp-container-list li.open li:first-child {
+ border-top: 1px solid $color-menu-divider;
+}
+#pp-container #pp-container-list li.closed ul {
+ display: none;
+ padding-top: 3px;
+}
+#pp-container-list li.open ul {
+ display: block;
+ padding-top: 3px;
+}
+#pp-container-list li.directory {
+ cursor: pointer;
+}
+#pp-container-list li.file {
+ cursor: default;
+}
+span.pp-span-all {
+ display: block;
+}
+span.pp-span-all:focus {
+ -webkit-box-shadow: none;
+ background-color: $color-focus-outline;
+ border-color: $color-focus-outline;
+ color: $color-menu-bg;
+}
+
+#pp-view-assets .pp-asset-col {
+ float: left;
+}
+#pp-view-assets .pp-col-files {
+ width: 167px;
+}
+#pp-view-assets .pp-col-size {
+ width: 57px;
+}
+#pp-view-assets .pp-col-type {
+ width: 57px;
+}
+#pp-view-assets .pp-col-date {
+ width: 127px;
+}
+.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.sort-ascending .pp-sort-arrow {
+ background-position: 0 0;
+}
+.pp-sort.sort-descending .pp-sort-arrow {
+ background-position: 0px -5px;
+}
+#pp-view-assets .pp-asset-col div {
+ color: $color-panel-text;
+ padding-left: 5px;
+ border-bottom: 1px solid $color-menu-divider;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ font-size: 11px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border-right: 1px solid $color-menu-divider;
+}
+#pp-view-assets .focused {
+ background-color: #ccc;
+}
+#pp-view-assets :focus {
+ -webkit-box-shadow: none;
+}
+
+#pp-view-assets #pp-container-assets :focus,
+#pp-view-assets #pp-container-assets .focused {
+ background-color: $color-focus-outline;
+ border-color: $color-focus-outline;
+ color: $color-menu-bg;
+}
+
+// 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;
+}
+#pp-container-list li.directory.closed >span.pp-span-all> span.pp-col-files > span.span-space {
+ background-image:url("../images/panels/project-panel/icon-file-folderclosed.png");
+ background-position: 100% 0px;
+}
+#pp-container-list li.file span.span-space {
+ background-image: url("../images/panels/project-panel/icon-file-misc.png");
+ background-position: 100% 0px
+}
+#pp-container-list li.file.png span.span-space,
+#pp-container-list li.file.gif span.span-space,
+#pp-container-list li.file.jpg span.span-space,
+#pp-container-list li.file.jpeg span.span-space,
+#pp-view-assets .pp-col-files .pp-type-image {
+ background-image: url("../images/panels/project-panel/icon-file-image.png");
+}
+#pp-container-list li.file.html span.span-space,
+#pp-container-list li.file.htm span.span-space,
+#pp-container-list li.file.js span.span-space,
+#pp-container-list li.file.css span.span-space,
+#pp-view-assets .pp-col-files .pp-type-script {
+ background-image: url("../images/panels/project-panel/icon-file-script.png");
+}
+#pp-container-list li.file.mp4 span.span-space,
+#pp-container-list li.file.avi span.span-space,
+#pp-container-list li.file.mpeg span.span-space,
+#pp-container-list li.file.mpg span.span-space,
+#pp-view-assets .pp-col-files .pp-type-video {
+ background-image: url("../images/panels/project-panel/icon-file-video.png");
+}
+#pp-container-list li.file.mp3 span.span-space,
+#pp-container-list li.file.mp4 span.span-space,
+#pp-container-list li.file.wav span.span-space,
+#pp-view-assets .pp-col-files .pp-type-audio {
+ background-image: url("../images/panels/project-panel/icon-file-audio.png");
+}
+
+#pp-view-assets .pp-col-files .pp-type-other {
+ background-image: url("../images/panels/project-panel/icon-file-misc.png");
+}
+
+#pp-view-assets .pp-col-files .pp-type-flash {
+ background-image: url("../images/panels/project-panel/icon-file-flash.png");
+}
+#pp-view-assets .pp-col-files .pp-type-component {
+ background-image: url("../images/panels/project-panel/icon-file-component.png");
+}
+#pp-view-assets .pp-col-files .pp-type-tag {
+ background-image: url("../images/panels/project-panel/icon-file-tag.png");
+}
+#pp-view-assets .pp-col-files div {
+ background-repeat: no-repeat;
+ background-position: 7px 2px;
+ padding-left: 25px;
+}
+
+#pp-view-assets h3 {
+ text-align: center;
+ display: none;
+}
+
+#pp-container-list span.pp-col-files,
+#pp-container-list span.pp-col-size,
+#pp-container-list span.pp-col-date {
+ display: block;
+ float: left;
+ white-space: nowrap;
+ overflow: hidden;
+ line-height: 15px;
+ text-overflow: ellipsis;
+}
+
+#pp-container-list span.pp-col-size,
+#pp-container-list span.pp-col-date {
+ padding-left: 10px;
+}
+#pp-container-list span.pp-col-size {
+ width: 47px;
+}
+#pp-container-list span.pp-col-date {
+ width: 97px;
+}
+#pp-container-list span.pp-col-files {
+ width: 151px;
+}
+#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;
+}
+.pp-disabled .pp-button {
+ cursor: default;
+ opacity: 0.50;
+}
+.pp-disabled .pp-button:focus {
+ -webkit-box-shadow: none;
+}
+#pp-container-list h3 {
+ display: none;
+}
+.pp-disabled #pp-container-list h3 {
+ display: block;
+ text-align: center;
+}
+
+.pp-button.active {
+ background-image: url("../images/panels/project-panel/icon-button-selected.png");
+}
+.pp-disabled .pp-button.active {
+ background-image: none;
+}
+.pp-button.active:focus {
+ outline: none;
+}
+.pp-button:active:focus {
+ outline: none;
+}
+.pp-button.button-project div {
+ background-image: url("../images/panels/project-panel/icon-button-project.png")
+}
+.pp-button.button-component div {
+ background-image: url("../images/panels/project-panel/icon-button-component.png")
+}
+.pp-button.button-script div {
+ background-image: url("../images/panels/project-panel/icon-button-script.png")
+}
+.pp-button.button-video div {
+ background-image: url("../images/panels/project-panel/icon-button-video.png")
+}
+.pp-button.button-audio div {
+ background-image: url("../images/panels/project-panel/icon-button-audio.png")
+}
+.pp-button.button-image div {
+ background-image: url("../images/panels/project-panel/icon-button-image.png")
+}
+.pp-button.button-tag div {
+ background-image: url("../images/panels/project-panel/icon-button-tag.png")
+}
+.pp-button.button-flash div {
+ background-image: url("../images/panels/project-panel/icon-button-flash.png")
+}
+.pp-button.button-showall div {
+ background-image: url("../images/panels/project-panel/icon-button-showall.png")
+}
+
+#pp-col-buttons .nj-divider.divider-horizontal {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+div.pp-button.button-divider div {
+ height: 1px;
+ width: 24px;
+ background-color: $color-tool-separator-middle;
+ border-top: 1px solid $color-tool-separator-top;
+ border-bottom: 1px solid $color-tool-separator-bottom;
+ cursor: default;
+}
+
+.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;
+}
+
+.pp-show-scripts .pp-type-script {
+ display: block;
+}
+.pp-show-videos .pp-type-video {
+ display: block;
+}
+.pp-show-audio .pp-type-audio {
+ display: block;
+}
+.pp-show-images .pp-type-image {
+ display: block;
+}
+.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: $color-tool-bg;
+ border: 2px solid $color-app-border;
+ z-index: 100;
+ display: none;
+}
+.pp-popup p {
+ color: $color-menu-text;
+ margin: 0px;
+ padding: 0px;
+}
+// Search subwidget
+#pp-search {
+ position: absolute;
+ display: block;
+ height: 24px;
+ border: 2px solid $color-menu-border;
+ background-color: $color-menu-bg;
+ 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;
+}
+#pp-search input {
+ width: 100%;
+ height: 16px;
+ margin-left: 7px;
+ margin-top: 0px;
+ padding-left: 15px;
+ top: -3px;
+ position: relative;
+}
+#pp-search div.pp-button {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ float: right;
+ margin-left: 5px;
+ background-repeat: no-repeat;
+ background-position: 0 2px;
+ overflow: visible;
+ top: -6px;
+}
+#pp-search div.button-add {
+ background-image: url("../images/panels/project-panel/icon-button-plus.png");
+}
+#pp-search div.button-delete {
+ background-image: url("../images/panels/project-panel/icon-button-delete.png");
+}
+#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: $color-panel-hilite-text !IMPORTANT;
+ color: $color-panel-hilite-bg !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: $color-panel-text;
+}
+
+// Begin: styling the form elements
+.properties_panel select {
+ -webkit-appearance: none;
+ font-size: 9px;
+ color: $color-panel-text;
+ background-color: $color-panel-input-bg;
+ border: 1px solid $color-panel-input-border;
+ 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 $color-panel-input-border;
+}
+.properties_panel .layout-table .layout-cell input[type="text"] {
+ height: 11px;
+ width: 120px;
+ font-size: 10px;
+ border: 1px solid $color-panel-input-border;
+ background-color: $color-panel-input-bg;
+ outline: none;
+}
+.properties_panel input[type="checkbox"] {
+ position: relative;
+ top: -2px;
+}
+
+button.panel-button {
+ -webkit-appearance: none;
+ font-size: 9px;
+ color: $color-panel-text;
+ background-color: $color-panel-input-bg;
+ border: 1px solid $color-panel-input-border;
+ cursor: pointer;
+ margin-left: 75%;
+}
+.properties_panel .hottextunit input {
+ width: 40px;
+ height: 12px;
+ font-size: 10px;
+ -webkit-appearance: none;
+ border-color: $color-panel-input-border;
+ background-color: $color-panel-input-bg;
+ color: $color-panel-input;
+}
+// End: styling the form elements
+
+
+// main section styles
+.pp_sectionHeader{
+ font-size:12px;
+ padding-left:37px;
+ height:15px;
+ background-color: $color-panel-dividerlabel-bg;
+ 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;
+}
+.pp_inputText {
+ resize: none;
+ color: $color-panel-text;
+ background-color: $color-panel-input-bg;
+ border: 1px solid $color-panel-input-border;
+ width : 120px;
+ height: 10px;
+ outline: none;
+ font-size: 11px;
+ margin-bottom: 9px;
+ padding-left: 2px;
+}
+.pp_hottext{
+ float: left;
+ width: auto;
+}
+.pp_check{
+ float: left;
+ width: auto;
+}
+.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;
+}
+.panel .layout-table.table-2col-wide {
+ width: 100%;
+}
+.layout-table.table-2col-wide .layout-row {
+ width: 100%;
+}
+.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%;
+}
+.hottext_props .layout-table.table-2col-wide .layout-cell {
+ margin-bottom: 6px;
+}
+.panel .layout-table.table-2col-wide .layout-cell:first-child {
+ text-align: right;
+}
+.panel .layout-table.table-2col-wide .layout-cell:last-child {
+ padding-left: 7px;
+}
+.panel .layout-table.table-4col .layout-cell:first-child {
+ width: 30px;
+ text-align: right;
+ margin-right: 7px;
+}
+.panel .layout-table .flexor {
+ padding-right: 7px;
+}
+
+.panel .layout-table .flexor {
+ width: 80px;
+ padding-right: 7px;
+}
+.panel .layout-table.table-4col .flexor {
+ width: 55px;
+}
+
+
+
+.pp_divider {
+ height: 1px;
+ overflow: hidden;
+ background-color: $color-panel-divider-bottom;
+ border-top: 1px solid $color-panel-divider-top;
+ margin-left: 4px;
+ margin-right: 10px;
+ margin-bottom: 8px;
+}
+.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;
+}
+
+.panels .panel {
+ min-height: 25px;
+ -webkit-box-flex:0;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ //taking out transitions due to glitching ui -webkit-transition: 0.2s all linear;
+ background:#282828;
+ height:200px;
+ padding:0px 2px;
+ -webkit-box-sizing:border-box;
+}
+
+.panels .panel .panelBody {
+ -webkit-box-flex:1;
+ -webkit-box-sizing:border-box;
+ -webkit-box-orient: vertical;
+ -webkit-box-align: stretch;
+ position:relative;
+ resize: vertical;
+ overflow: auto;
+ height:200px;
+
+}
+.panel .panelBodyContent {
+ -webkit-box-sizing: border-box;
+ -webkit-box-align:stretch;
+ position:absolute;
+ height:100%;
+ width:100%;
+}
+
+.panel .panelBodyContent .panelObjects {
+ -webkit-box-sizing: border-box;
+ position:absolute;
+ height:100%;
+ width:100%;
+}
+
+.panel .head {
+ display: -webkit-box;
+ -webkit-box-orient: horizontal;
+ -webkit-box-align: stretch;
+ height:25px;
+ line-height: 25px;
+}
+.panel .head span {
+ height:25px;
+ line-height: 25px;
+ display: -webkit-box;
+ -webkit-box-flex:0;
+}
+
+.panel .head .panelTitle {
+ -webkit-box-flex:1;
+ color:#FFF;
+}
+
+.panel .head .arrowIcon {
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAP9JREFUeNrEk02KhDAQhV+GCPEELnSVA3gMr+mJbFHxdyTTm25/cJ9aCJlVy9iaYcDFFARS5OV7L4RixhhcqQ9crMsA/tpIKY3WGuu62sWcw3VdKKXYAaC1RhRF8DwPjuPsFuccnHOM44g4js+fIIRA133+GjdJEgghzgFExO73LyzLcnr5+Xwgz3MQEbMmEEKgbdtTwO2WbhpbAhARU0phnuedaBgGFEUBImJEdP4LP8lN08D3/a1P0/TgbEsAImJ932Oaps29LMvN/U8JAKCqKgRBgCzLrO47wBuZdV1nwjBEXdcAwGwA9homKeX7mdFaw3XdA0ApdQT82zB9DwCCtIRuTJsRWAAAAABJRU5ErkJggg==') 5px 3px no-repeat;
+ width:25px;
+ cursor: pointer;
+}
+.panel .head.collapsed .arrowIcon {
+ -webkit-transform:r