// <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>

// 
// 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,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') 5px 3px no-repeat;
    width:25px;
    cursor: pointer;
}
.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;
}

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

.panel .panelBody {
    border-right: 1px solid #3a3a3a;
    border-bottom: 1px solid #3a3a3a;
    -webkit-transition: all 0.1s linear;
    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 .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;
    height:100%;
    width:100%;
}
#rightPanelContainer .panel {
    -webkit-box-flex:100;
}


.over {
    border-top:1px solid #0000FF;
}