// <copyright>
Copyright (c) 2012, Motorola Mobility, Inc
All Rights Reserved.
BSD License.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

  - Redistributions of source code must retain the above copyright notice,
    this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
    notice, this list of conditions and the following disclaimer in the
    documentation and/or other materials provided with the distribution.
  - Neither the name of Motorola Mobility nor the names of its contributors
    may be used to endorse or promote products derived from this software
    without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
POSSIBILITY OF SUCH DAMAGE.
</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

//  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: 100%;
}

//  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, .branch-label {
    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  

//  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: 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%;
    overflow: hidden;
}
.panel .resizeBar {
    height:4px;
    cursor: row-resize;
}

.panels .panel {
    min-height: 25px;
    -webkit-box-flex:0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    //-webkit-transition: all 100ms ease-out;
    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;
}

.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,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') 5px 3px no-repeat;
    width:25px;
    cursor: pointer;
    border: none transparent;
}
.panel .head.collapsed .arrowIcon {
    -webkit-transform:rotate(-90deg);
}

.panel .head .closeBtn {
    background: url('data:image/png;base64,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') center center no-repeat;
    width:25px;
    opacity: 0.4;
    cursor: pointer;
    display:none;
}

.panel .head .closeBtn:hover {
    opacity: 1;
}

.panel .panelBody {
    border-right: 1px solid #3a3a3a;
    border-bottom: 1px solid #3a3a3a;
    overflow: hidden;
}
.panel .panelBodyContent {
    border: 1px solid #000;
    background: #474747;
}

.panel .panelObjects {
    border-bottom: 1px solid #232323;
    overflow: hidden;
    min-width:225px;
    font-size : 11px;
    resize:none;
    box-shadow: inset 0px 0px 4px #333;
}

.panelOject {
    overflow-y:auto;
    overflow-x:hidden;
    border-style: solid;
    border-width: 1px;
}

.panel.collapsed .panelBody {
    overflow: hidden;
    height:0px;
}

.rightPanelContainer {
-webkit-box-orient: vertical;
display: -webkit-box;
}

#rightPanelContainer .panel.collapsed {
    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
    -webkit-box-flex:0.01;
    overflow: hidden;
}

.panel.collapsed .arrowIcon {
    -webkit-transform:rotate(-90deg);
}

.rightPanelContent {
    position:absolute;
    overflow-y:hidden;
    height:100%;
    width:100%;
}
#rightPanelContainer .panel {
    -webkit-box-flex:100;
}


/* Drag & Drop Code  TODO: Most likely need to be somewhere else */
body section .dragging {
    opacity: 0.4;
}
body .main .dragOver:not(.dragging) {
    background-color: #917B56;
}

.panelDisabled {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6000;
  color: white;
  text-align: center;
  line-height: 100px;
  box-shadow: inset 0 0 14px #111111;

  background: rgba(30, 30, 30, 0.8);
}