/* Debugger styles */

@define white: #ffffff;
@define red: #ff0000;
@define green: #00ff00;
@define blue: #0000ff;
@define black: #000000;
@define yellow: #ffff00;
@define purple: #800080;
@define backgroundgray : #383635ff;
@define foregroundgray : #A6A4A1ff;
@define transparent: #00000000;
@define platformfont: "Motiva Sans";
@define monospacefont: "Courier New";


//
// Scroll bar styles
//
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;

	// NOTE: The transition duration and timing function must match constants used in code:
	// k_flScrollTransitionTime, k_flScrollTransitionFunc, so dont change without talking with a dev
	transition-property: transform;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

VerticalScrollBar .ScrollThumb
{
	background-color: #d2d2d2dd;

	// NOTE: The transition duration and timing function must match constants used in code:
	// k_flScrollTransitionTime, k_flScrollTransitionFunc, so dont change without talking with a dev
	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;

	// NOTE: The transition duration and timing function must match constants used in code:
	// k_flScrollTransitionTime, k_flScrollTransitionFunc, so dont change without talking with a dev
	transition-property: transform;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

HorizontalScrollBar .ScrollThumb
{
	background-color: #d2d2d2dd;

	// NOTE: The transition duration and timing function must match constants used in code:
	// k_flScrollTransitionTime, k_flScrollTransitionFunc, so dont change without talking with a dev
	transition-property: position;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

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

	color: #111111ff;
}


//
// Debugger
//
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: 12;

}

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

.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: 12px;
	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;
}

//
// Styles for anything on the toolbar
//
.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;
}


//
// Styles for layout
//

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
{
	/* shouldn't 100% height work here? forcing down with some margin.. but need to fix */
	margin-top: 1px;
}

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

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

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

//
// Styles for debug parents panel
//
DebugPanelParents
{
	width: 100%;
	padding: 5px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #ECF2F9 ), to( #9DBCDE ) );
	flow-children: right;
	font-size: 14;
}

DebugPanelParents #SelectedPanelName
{
	font-weight: bold;
}

// bugbug cboyd - can turn the following two styles into one with comma sep
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;
}

//
// Styles for debug panel
//

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%;
}

//
// Styles for computed panel
//

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

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

.StyleLink:hover
{
	color: red;
}

//
// Styles for individual style debug panels
//

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

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

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

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

//
// DebugInheritedStylesHeader
//
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
// 
DebugStyleSeparator
{
	width: 100%;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #ECF2F9 ), to( #9DBCDE ) );
	padding: 4px;
	margin-bottom: 10px;
}


//
// HTTP styles used by labels
//

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;
}