                     

@define backgroundgray : #383635ff;
@define foregroundgray : #A6A4A1ff;
@define platformfont: "Motiva Sans";
@define monospacefont: "Courier New";


  
                    
  
VerticalScrollBar
{
	width: 6px;
	margin: 3px, 0px, 12px 3px;
	border-radius: 0px;
	height: 100%;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #c2c2c230 ), to( #d2d2d230 ) );
	horizontal-align: right;
	vertical-align: center;

	                                                                                       
	                                                                                                
	transition-property: transform;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

VerticalScrollBar .ScrollThumb
{
	background-color: #d2d2d2dd;

	                                                                                       
	                                                                                                
	transition-property: position;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

HorizontalScrollBar
{
	height: 6px;
	margin: 3px;
	width: 100%;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #c2c2c290 ), to( #d2d2d290 ) );
	border-radius: 4px;
	horizontal-align: left;
	vertical-align: bottom;

	                                                                                       
	                                                                                                
	transition-property: transform;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

HorizontalScrollBar .ScrollThumb
{
	background-color: #d2d2d2dd;

	                                                                                       
	                                                                                                
	transition-property: position;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

  
          
   
DebugTextTooltip
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( white ), to( #e4e5f0 ) );
	border-radius: 2.5px;
	border: 1px solid #767676ff;
	box-shadow: #80808090 4px 4px 4px 0px;
	padding: 4px;
	max-width: 600px;
	font-family: platformfont;
	font-size: 18px;
	color: #111111ff;

    visibility: collapse;
}

DebugTextTooltip.TooltipVisible
{
    visibility: visible;
}

DebugTextTooltip Label
{
	horizontal-align: left;
	color: black;
	transform: translatex(0px);
	padding-left: 0px;
	text-overflow: ellipsis;
}

  
           
  
Debugger
{
	perspective-origin: 50% 50%;
	position: 0px 0px 0px;
	width: 100%;
	height: 100%;
	visibility: visible;
	background-color: red;

	flow-children: down;
	font-family: Tahoma;
	color: black;
	font-size: 18px;
}

.DebugBody
{
	flow-children: down;
	height: fill-parent-flow( 1.0 );
	                          
}

.DebugBodyTop
{
	height: fill-parent-flow( 0.8 );
	flow-children: right;
	width: 100%;
}

VerticalSplitter
{
	width: 5px;
	min-height: 100%;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #d7d7d7), to( #a0a0a0 ), color-stop( 0.9, #b4b4b4 ) );
}

HorizontalSplitter
{
	height: 5px;
	min-width: 100%;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #d7d7d7), to( #a0a0a0 ), color-stop( 0.9, #b4b4b4 ) );
}

.DebugJSConsole
{
	height: fill-parent-flow( 0.2 );
	min-height: 10px;
	background-color: white;
	width: 100%;

	flow-children: down;
}

#JSConsoleText
{
	height: fill-parent-flow( 1.0 );
	background-color: white;
	color: #000000ff;
	font-size: 18px;
	font-family: Courier New;
	width: 100%;

	overflow: squish scroll;
}

#JSConsoleText
{
	margin: 0px 3px;
}

#JSConsoleText Label
{
	width: 100%;
	min-height: 100%;
}


#JSConsoleInput
{
	width: 100%;
	height: 28px;
	font-family: Courier New;
	font-size: 16px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #aaaaaaff ), to( #dededeff ) );
	color: #000000ff;

	padding: 3px 5px;

	white-space: nowrap;
}

  
                                     
  
.DebugToolbar
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #F0ECEC ), to( #D0CFCF ), color-stop( 0.8, #F0ECEC ) );
	width: 100%;
	padding: 5px;

	flow-children: right;
	min-width: 100%;
}

.DebugToolbar Button,
.DebugToolbar ToggleButton
{
	background-color: #B9D1F4;
	padding: 5px;
	margin-right: 4px;
}

.DebugToolbar Button:hover,
.DebugToolbar ToggleButton:hover
{
	background-color: #9EB9DF;
}

.DebugToolbar Button:active,
.DebugToolbar ToggleButton:active
{
	background-color: #5081C5;
}

.DebugToolbar Button:disabled,
.DebugToolbar ToggleButton:disabled
{
	background-color: #686E78;
}

.DebugToolbar ToggleButton:selected
{
	background-color: #71a4ea;
}

#InMemoryButtons
{
	horizontal-align: right;
	flow-children: right;
}

#DebugSize
{
	flow-children: right;
	margin-left: 15px;
	margin-right: 15px;
}

  
                    
  

DebugLayout
{
	background-color: white;
	width: fill-parent-flow( 0.6 );
	height: fit-children;
	min-height: 100%;
	padding: 10px;

	flow-children: down;
	overflow: squish scroll;
}

.DebugLabelPanelRow
{
	width: 100%;
	flow-children: right;
}

.DebugLayoutPanelOpen
{
	color: #000088;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: fill-parent-flow( 1.0 );
}

.DebugLabelPanelRow:hover #DebugLayoutPanelOpen
{
	background-color: #66CCFF;
}

#DebugLayoutPanelClose
{
	color: #000088;
}

.DebugLabelPanelRow:hover #DebugLayoutPanelClose
{
	background-color: #66CCFF;
}

.DebugLayoutPanelRowSelected
{
	background-color: #C6E2FF;
}

.DebugLayoutElementText
{
	color: #0000FF;
}

.DebugLayoutElementPropName
{
	color: #000088;
}

.DebugLayoutElementPropValue
{
	color: #FF0000;
}

a.DebugLayoutElementPropValue:hover
{
	color: #1111DD;
	text-decoration: underline;
}

.DebugLabelPanelRow .StyleLink
{
	horizontal-align: right;
	visibility: collapse;
}

.DebugLayoutPanelRowSelected .StyleLink
{
	visibility: visible;
}

.DebugLabelPanelRow #Indent
{
	                                                                                      
	margin-top: 1px;
}

#DebugLabelToggle
{
	margin-right: 4px;
	margin-top: 2px;
	padding: 0px;
	width: 9px;
	height: 9px;
	background-image: url("file://{images}/collapse.vtf");

	vertical-align: center;
	horizontal-align: right;

	visibility: collapse;
}

#DebugLabelToggle:selected
{
	background-image: url("file://{images}/expand.vtf");
}

.DebugLabelPanelRow.ShowChildren #DebugLabelToggle
{
	visibility: visible;
}


  
                                 
  
DebugPanelParents
{
	width: 100%;
	padding: 5px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #ECF2F9 ), to( #9DBCDE ) );
	flow-children: right-wrap;
	font-size: 16px;
}

DebugPanelParents #SelectedPanelName
{
	font-weight: bold;
}

                                                                           
DebugPanelParents Label
{
	padding: 4px;
}

DebugPanelParents Button
{
	background-color: transparent;
	padding: 4px;
}

DebugPanelParents Button Label
{
	padding: 0px;
}

DebugPanelParents Button:hover
{
	background-color: #66CCFF;
}

DebugPanelParents Button:active
{
	background-color: #5081C5;
}

  
                         
  

DebugPanel
{
	width: fill-parent-flow( 0.4 );
	height: 100%;

	flow-children: down;
}

.DebugPanelToolbar
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #F0ECEC ), to( #D0CFCF ), color-stop( 0.8, #F0ECEC ) );
	width: 100%;
	padding: 5px 5px 0px 5px;

	flow-children: right;
}

.DebugPanelToolbar Button
{
	background-color: #B9D1F4;
	padding: 5px;
	margin-right: 4px;
}

.DebugPanelToolbar Button:hover
{
	background-color: #9EB9DF;
}

.DebugPanelToolbar Button:active
{
	background-color: #5081C5;
}

#DebugPanelPages
{
	flow-children: down;
	height: 100%;
	width: 100%;
}

  
                            
  

DebugPanelComputed
{
	background-color: white;

	padding: 10px;
	width: 100%;
	height: fit-children;
	min-height: 100%;

	flow-children: down;
	overflow: squish scroll;
}

#ComputedMeasurementsHeader, #ComputedMiscHeader
{
	margin-top: 15px;
}

.DebugComputedRow
{
	margin-left: 20px;
	margin-top: 2px;
	margin-bottom: 2px;
	flow-children: right;
}

.DebugComputedName
{
	color: #6b8e23;
	width: 170px;
}

.DebugComputedValue
{
	color: black;
}

  
            
  

.StyleLink
{
	color: blue;
	vertical-align: top;
}

.StyleLink:hover
{
	color: red;
}

  
                                           
  

DebugPanelStyle
{
	background-color: white;

	padding: 10px 0px 10px 0px;
	width: 100%;
	height: fit-children;
	min-height: 100%;

	flow-children: down;
	overflow: squish scroll;
}

DebugIndividualStyle
{
	width: 100%;
	padding: 0px 10px 10px 10px;
}

DebugIndividualStyle .StyleLink
{
	horizontal-align: right;
}

#DebugPanelStyleInvalid
{
	color: black;
	background-color: red;
	font-weight: bold;
	visibility: collapse;
	vertical-align: center;
	horizontal-align: right;
	padding: 2px 4px 2px 4px;
}


  
                      
  
DebugStyleAnimation
{
	width: 100%;
	padding: 0px 10px 10px 10px;
}

DebugStyleAnimation .StyleLink
{
	horizontal-align: right;
}

.DebugKeyFrameSection
{
	flow-children: down;
}

.DebugKeyFrameRow
{
	flow-children: right;
}

.DebugFrameRow
{
	flow-children: right;
}

.DebugFrameLeftMargin
{
	width: 32px;
	flow-children: right;
}

  
                  
  

DebugStyleBlock
{
	width: 100%;
	flow-children: down;
}

DebugStyleBlock TextEntry
{
	padding: 1px 1px 1px 1px;
	min-width: 15px;
}

DebugStyleBlock #PropertySection Label
{
	padding: 1px 0px 1px 0px;
}

DebugStyleBlock TextEntry:hover
{
	background-color: #97c3f0;
}

DebugStyleBlock TextEntry:focus
{
	background-color: #3399ff;
	color: white;
}

#Selector
{
	color: black;
}

.DebugPropertySection
{
	flow-children: down;
}

.DebugPropertyRow
{
	flow-children: right;
    tooltip-position: bottom;
}

.DebugPropertyLeftMargin
{
	width: 46px;
	flow-children: right;
}

.DebugPropertyErrorBox
{
	background-color: red;
	width: 14px;
	height: 14px;
	horizontal-align: right;
	margin-right: 4px;
	margin-top: 4px;
	border-radius: 50%;
}

.DebugPropRowButton
{
	margin-top: 3px;
	margin-right: 2px;
	width: 12px;
	height: 12px;

	visibility: collapse;
}

.DebugPropRowButton Label
{

	horizontal-align: center;
	vertical-align: top;
	line-height: 10px;
	font-size: 12px;
}

.DebugPropertyRow:hover .DebugPropRowButton, .DebugFrameRow:hover #InsertFrameRowButton, .DebugFrameRow:hover #DeleteFrameRowButton
{
	visibility: visible;
}

.DebugPropRowButton:hover
{
	background-color: #C6E2FF;
}

.DebugPropertyName
{
	color: #6b8e23;
}

.DebugPropertyValue
{
	color: black;
}

.DebugPropertyColon
{
	margin-right: 4px;
	color: blue;
}

.DebugPropertySemicolon
{
	color: blue;
}

.DebugPropertyRowNotUsed .DebugPropertyName, .DebugPropertyRowNotUsed .DebugPropertyColon, .DebugPropertyRowNotUsed .DebugPropertyValue, .DebugPropertyRowNotUsed .DebugPropertySemicolon
{
	color: #C0C0C0;
}

  
                            
  

DebugAutoComplete
{
	background-color: white;
	padding: 4px;
	border: 1px solid #333333dd;
	
	flow-children: down;
	color: black;
}

DebugAutoComplete Label:focus
{
	background-color: #66CCFF;
}

  
                             
  
DebugInheritedStylesHeader
{
	width: 100%;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #ECF2F9 ), to( #9DBCDE ) );
	padding: 4px;
	margin-bottom: 10px;

	flow-children: right;
}

DebugInheritedStylesHeader .StyleLink
{
	margin-left: 4px;
}

  
                      
   
DebugStyleSeparator
{
	width: 100%;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #ECF2F9 ), to( #9DBCDE ) );
	padding: 4px;
	margin-bottom: 10px;
}


  
                             
  

a
{
	color: blue;
}

a:hover
{
	text-decoration: underline;
}

b
{
	font-weight: bold;
}

i
{
	font-style: italics;
}

strong
{
	font-weight: bold;
}

em
{
	font-style: italics;
}

h1
{
	font-weight: bold;
}

h2
{
	font-weight: bold;
}

pre
{
	font-family: monospacefont;
}