The Default Frontal Style Sheet

<style><![CDATA[
	document
		{
			width: 100% leftover;
			height: 100% leftover;
		}
	*:link				{ use-hand-cursor: true;  }
	*:visited			{ use-hand-cursor: true;  }
	*:disabled:link		{ use-hand-cursor: false; }
	*:disabled:visited	{ use-hand-cursor: false; }
	.frButtonNext, .frButtonPrev
		{
			is-link: true;
			is-marker: true;
			jump-delta: 1;
			@onClick { var mgr = gE  ( gA ( "mgrId" ) ); mgr.jumpTo ( mgr.getNext ( gS ( "jump-delta" ), ! gS ( "stop-at-end" ) ) ); }
			@onSelect 
				{
					if ( event is com.frontalcode.ContainerMgrEvent )
						markedElement = event.manager.getNext ( gS ( "jump-delta" ), ! gS ( "stop-at-end" ), event.next );
					else
						markedElement = gE  ( gA ( "mgrId" ) ).getNext ( gS ( "jump-delta" ), ! gS ( "stop-at-end" ) );
				}
		}
	.frButtonPrev		{ jump-delta: -1; }
	.frMarker
		{
			is-link: true;
			is-marker: true;
			@onClick { gE ( gA ( "mgrId" ) ).jumpTo ( gA ( "elemNdx" ) ); }
		}
	img				
		{ 
			width: auto; 
			height: auto;
			wants-reset: true;
		}
	img:isSymbol:link 		{ go-to-label: link; }
	img:isSymbol:visited 	{ go-to-label: visited; }
	img:isSymbol:selected 	{ go-to-label: selected; }
	img:isSymbol:focus 		{ go-to-label: focus; }
	img:isSymbol:hover 		{ go-to-label: hover; }
	img:isSymbol:active		{ go-to-label: active; }
	img:isSymbol:disabled 	{ go-to-label: disabled; }
	text
		{
			cache-as-bitmap: true;
		}
	.frLink
		{
			is-link: true;
			@onClick 
				{
					if ( attributeExists ( "fref" ) )
					{
						document.open ( gA ( "fref" ), gA ( "target" ) );
					}
					else if ( attributeExists ( "href" ) )
					{
						flash.net.navigateToURL ( new flash.net.URLRequest ( gA ( "href" ) ), gA ( "target" ) );
					}
				}
		}
	.frScrollbarVert [name=up] 
		{
			is-link: true;
			@onMouseDown { getScrollbarContainer ( ).startPressScrollButton ( false ); }
			@onMouseUp   { getScrollbarContainer ( ).stopPressScrollButton ( ); }
			@onRollOut   { getScrollbarContainer ( ).stopPressScrollButton ( ); }
		}
	.frScrollbarVert [name=down] 
		{
			is-link: true;
			@onMouseDown { getScrollbarContainer ( ).startPressScrollButton ( true ); }
			@onMouseUp   { getScrollbarContainer ( ).stopPressScrollButton ( ); }
			@onRollOut   { getScrollbarContainer ( ).stopPressScrollButton ( ); }
		}
	.frScrollbarVert [name=track]
		{
			height: 100% leftover;
			width: auto;
			overflow: visible;
			layout: stack;
		}
	.frScrollbarVert [name=trackButton]
		{
			is-link: true;
			width: 100% leftover;
			height: 100% leftover;
			overflow: visible;
			background-color: #cccccc;
			border-color: #999999;
			border-width: 1px;
			@onMouseDown { getScrollbarContainer ( ).startPressScrollbarTrack ( event ); }
			@onMouseUp   { getScrollbarContainer ( ).stopPressScrollbarTrack ( ); }
			@onRollOut   { getScrollbarContainer ( ).stopPressScrollbarTrack ( ); }
		}
	.frScrollbarVert [name=slider]
		{
			is-link: true;
			width: 100% leftover;
			height: 20px;
			overflow: visible;
			background-color: #666666;
			border-color: #999999;
			border-width: 1px;
			@onMouseDown		{ getScrollbarContainer ( ).startDragScrollbarSlider ( ); }
			@onMouseUpAnywhere	{ getScrollbarContainer ( ).stopDragScrollbarSlider ( ); }
		}
	.frScrollbarVert
		{
			wants-reset: true;
			height: auto;
			width: auto;
			overflow: visible;
			@onReset { parent.scrollTop = 0; }
		}
	.frScrollbarHoriz [name=left] 
		{
			float: left;
			is-link: true;
			@onMouseDown { getScrollbarContainer ( ).startPressScrollButton ( false, false ); }
			@onMouseUp   { getScrollbarContainer ( ).stopPressScrollButton ( false ); }
			@onRollOut   { getScrollbarContainer ( ).stopPressScrollButton ( false ); }
		}
	.frScrollbarHoriz [name=right] 
		{
			float: left;
			is-link: true;
			@onMouseDown { getScrollbarContainer ( ).startPressScrollButton ( true, false ); }
			@onMouseUp   { getScrollbarContainer ( ).stopPressScrollButton ( false ); }
			@onRollOut   { getScrollbarContainer ( ).stopPressScrollButton ( false ); }
		}
	.frScrollbarHoriz [name=track]
		{
			float: left;
			width: 100% leftover;
			height: 100%;
			overflow: visible;
			layout: stack;
		}
	.frScrollbarHoriz [name=trackButton]
		{
			is-link: true;
			width: 100% leftover;
			height: 100% leftover;
			overflow: visible;
			background-color: #cccccc;
			border-color: #999999;
			border-width: 1px;
			@onMouseDown { getScrollbarContainer ( ).startPressScrollbarTrack ( event, false ); }
			@onMouseUp   { getScrollbarContainer ( ).stopPressScrollbarTrack ( false ); }
			@onRollOut   { getScrollbarContainer ( ).stopPressScrollbarTrack ( false ); }
		}
	.frScrollbarHoriz [name=slider]
		{
			is-link: true;
			height: 100% leftover;
			width: 20px;
			overflow: visible;
			background-color: #666666;
			border-color: #999999;
			border-width: 1px;
			@onMouseDown		{ getScrollbarContainer ( ).startDragScrollbarSlider ( ); }
			@onMouseUpAnywhere	{ getScrollbarContainer ( ).stopDragScrollbarSlider ( ); }
		}
	.frScrollbarHoriz
		{
			wants-reset: true;
			height: auto;
			width: auto;
			overflow: visible;
			@onReset { parent.scrollLeft = 0; }
		}
	input[type=hidden]
		{
			display: none;
			@getValue { return gA ( "value" ); }
		}
	input[type=button], input[type=submit]
		{
			@onFirstDocumentPreRender
				{
					input = new fl.controls.Button ( ); 
					movie.addChildAt ( input, 0 );
					if ( gA ( "type" ) == "submit" )
					{
						if ( form != null && gS ( "custom-default-button" ) !== false ) form.defaultButton = this;
						dynamic.clickHandler = function ( ) { dynamic.clicked = true; if ( form != null ) form.submit ( ); dynamic.clicked = false; }
						addListener ( input, flash.events.MouseEvent.CLICK, dynamic.clickHandler );
					}
					needsRender = true;
				}
			@onCustomRender 
				{ 
					if ( ! isNaN ( width ) ) input.width = width;
					if ( ! isNaN ( width ) ) input.height = height;
					input.label = node.text ( ).toString ( );
					input.drawNow ( ); 
				}
			@getValue { if ( dynamic.clicked ) return attributeExists ( "value" ) ? gA ( "value" ) : input.label; return undefined; }
		}
	input[type=checkbox]
		{
			@onFirstDocumentPreRender
				{
					input = new fl.controls.CheckBox ( ); 
					movie.addChildAt ( input, 0 ); 
					needsRender = true;
				}
			@onCustomRender 
				{ 
					var styles = { "custom-label-placement": "labelPlacement", "custom-selected": "selected" };
					for ( var style in styles ) if ( gS ( style ) != null ) input [ styles [ style ] ] = gS ( style );
					if ( ! isNaN ( width ) ) input.width = width;
					if ( ! isNaN ( width ) ) input.height = height;
					input.label = node.text ( ).toString ( );
					input.drawNow ( ); 
				}
			@getValue { return attributeExists ( "value" ) ? ( input.selected ? gA ( "value" ) : undefined ) : input.selected; }
		}
	input[type=radio]
		{
			@onFirstDocumentPreRender
				{
					input = new fl.controls.RadioButton ( );
					if ( form != null && attributeExists ( "name" ) )
					{
						if ( form.dynamic.radioButtonGroups == null ) form.dynamic.radioButtonGroups = { };
						if ( form.dynamic.radioButtonGroups [ gA ( "name" ) ] == null ) form.dynamic.radioButtonGroups [ gA ( "name" ) ] = new fl.controls.RadioButtonGroup ( gA ( "name" ) );
						input.group = form.dynamic.radioButtonGroups [ gA ( "name" ) ]; 
					}
					input.value = gA ( "value" );
					movie.addChildAt ( input, 0 ); 
					needsRender = true;
				}
			@onCustomRender 
				{ 
					var styles = { "custom-label-placement": "labelPlacement", "custom-selected": "selected" };
					for ( var style in styles ) if ( gS ( style ) != null ) input [ styles [ style ] ] = gS ( style );
					if ( ! isNaN ( width ) ) input.width = width;
					if ( ! isNaN ( width ) ) input.height = height;
					input.label = node.text ( ).toString ( );
					input.drawNow ( ); 
				}
			@getValue 
				{
					if ( form != null && attributeExists ( "name" ) )
					{
						return form.dynamic.radioButtonGroups [ gA ( "name" ) ].selectedData;
					}
					else
					{
						return input.value; 
					}
				}
		}
	input[type=file]
		{
			@buttonLabel: Choose Files
			@message: no files selected
			@onFirstDocumentPreRender
				{
					input = new fl.controls.Button ( );
					movie.addChildAt ( input, 0 );
					dynamic.fileReferenceList = new flash.net.FileReferenceList ( );
					dynamic.fileReference = new flash.net.FileReference ( );
					dynamic.fileReferenceBrowsed = false;
					dynamic.clickHandler = function ( event ) 
					{ 
						var filters = [ ];
						for each ( var name in getAttributes ( ) ) 
						{
							if ( name.toLowerCase ( ).indexOf ( "description" ) == 0 )
							{
								var suffix = name.substr ( 11 );
								var extension = attributeExists ( "extension" + suffix ) ? gA ( "extension" + suffix ) : null;
								var macType = attributeExists ( "macType" + suffix ) ? gA ( "macType" + suffix ) : null;
								if ( extension != null ) filters.push ( new flash.net.FileFilter ( gA ( name ), extension, macType ) );
							}
						}
						if ( gS ( "custom-allow-multiple-selection" ) )
						{
							dynamic.fileReferenceList.browse ( filters ); 
						}
						else
						{
							dynamic.fileReference.browse ( filters ); 
							dynamic.fileReferenceBrowsed = true;
						}
					}
					dynamic.onSelectHandler = function ( event ) { dynamic.showFileSelection ( ); }
					dynamic.showFileSelection = function ( )
					{
						var fileSelectionNdx = attributeExists ( "fileSelectionNdx" ) ? gA ( "fileSelectionNdx" ) : ( gA ( "name" ) + "FileSelection" );
						var fileSelection = parentContainer.gE ( fileSelectionNdx, true, false );
						if ( fileSelection != null ) 
						{
							var msg = gA ( "message" );
							if ( gS ( "custom-allow-multiple-selection" ) )
							{
								if ( dynamic.fileReferenceList.fileList != null && dynamic.fileReferenceList.fileList.length > 0 )
								{
									var names = [ ];
									for each ( var file in dynamic.fileReferenceList.fileList ) names.push ( file.name );
									msg = names.join ( ", " );
								}
							}
							else
							{
								if ( dynamic.fileReferenceBrowsed && dynamic.fileReference.name != null ) msg = dynamic.fileReference.name;
							}
							fileSelection.text = msg;
						}
					}
					addListener ( input, flash.events.MouseEvent.CLICK, dynamic.clickHandler );
					addListener ( dynamic.fileReferenceList, flash.events.Event.SELECT, dynamic.onSelectHandler );
					addListener ( dynamic.fileReference, flash.events.Event.SELECT, dynamic.onSelectHandler );
					needsRender = true;
				}
			@onCustomRender 
				{ 
					input.label = gA ( "buttonLabel" );
					if ( ! isNaN ( width ) ) input.width = width;
					if ( ! isNaN ( width ) ) input.height = height;
					input.drawNow ( );
					dynamic.showFileSelection ( );
				}
			@getValue { return gS ( "custom-allow-multiple-selection" ) ? dynamic.fileReferenceList : dynamic.fileReference; }
		}
	input[type=list], input[type=select]
		{
			@onFirstDocumentPreRender
				{
					input = gA ( "type" ) == "list" ? new fl.controls.List ( ) : new fl.controls.ComboBox ( );
					var data = [ ];
					var itemNode = new flash.xml.XMLDocument ( node.toXMLString ( ) ).firstChild.firstChild;
					while ( itemNode != null )
					{ 
						if ( itemNode.nodeName == "item" ) data.push ( { label: itemNode.childNodes, value: itemNode.attributes [ "value" ] != null ? itemNode.attributes [ "value" ] : itemNode.childNodes } );
						itemNode = itemNode.nextSibling;
					}
					input.dataProvider = new fl.data.DataProvider ( data );
					movie.addChildAt ( input, 0 ); 
					needsRender = true;
				}
			@onCustomRender 
				{ 
					var styles = gA ( "type" ) == "list" ? { "custom-allow-multiple-selection": "allowMultipleSelection" } : { };
					for ( var style in styles ) if ( gS ( style ) != null ) input [ styles [ style ] ] = gS ( style );
					if ( ! isNaN ( width ) ) input.width = width;
					if ( ! isNaN ( width ) ) input.height = height;
					input.drawNow ( ); 
				}
			@getValue 
				{
					var value = undefined;
					if ( gA ( "type" ) == "list" )
					{
						for ( var i = 0; i < input.selectedItems.length; i++ )
						{
							if ( value == undefined ) value = [ ];
							value.push ( input.selectedItems [ i ].value );
						}
						if ( ! input.allowMultipleSelection && value != undefined && value.length > 0 ) value = value [ 0 ];
					}
					else
					{
						if ( input.selectedItem != null ) value = input.selectedItem.value;
					}
					return value;
				}
		}
	input[type=text], input[type=password], input[type=textarea]
		{
			@onFirstDocumentPreRender
				{
					input = gA ( "type" ) == "textarea" ? new fl.controls.TextArea ( ) : new fl.controls.TextInput ( );
					if ( gA ( "type" ) == "password" ) input.displayAsPassword = true;
					input.text = node.text ( ).toString ( );
					movie.addChildAt ( input, 0 ); 
					needsRender = true;
				}
			@onCustomRender 
				{ 
					if ( ! isNaN ( width ) ) input.width = width;
					if ( ! isNaN ( width ) ) input.height = height;
					input.drawNow ( ); 
				}
			@onFocusInRaw { if ( input != null && input.text == node.text ( ).toString ( ) ) input.text = ""; }
			@onFocusOutRaw { if ( input != null && input.text == "" ) input.text = node.text ( ).toString ( ); }
			@getValue { return input.text; }
		}
	input[type=stepper]
		{
			@onFirstDocumentPreRender
				{
					input = new fl.controls.NumericStepper ( ); 
					movie.addChildAt ( input, 0 ); 
					needsRender = true;
				}
			@onCustomRender 
				{ 
					var styles = { "custom-minimum": "minimum", "custom-maximum": "maximum", "custom-step-size": "stepSize" };
					for ( var style in styles ) if ( gS ( style ) != null ) input [ styles [ style ] ] = gS ( style );
					input.value = node.text ( ).toString ( );
					if ( ! isNaN ( width ) ) input.width = width;
					if ( ! isNaN ( width ) ) input.height = height;
					input.drawNow ( ); 
				}
			@getValue { return input.value; }
		}
	input [type=button]
		{
			// XXX Baffling. If the last selector is an element with
			// an attribute selector then we get 10 renders. This is
			// even we don't even parse the thing! Is the E4X parser
			// getting confused? 
		}
	.frProgressIndicator [name=track]
		{
			background-color: #cccccc;
			border-color: #999999;
			border-width: 1px;
			width: 50%;
			height: 5px;
			margin: auto;
		}
	.frProgressIndicator [name=indicator]
		{
			height: 100%;
			width: 0%;
			background-color: #666666;
		}
	.frProgressIndicator
		{
			top: 0px;
			left: 0px;
			@onProgress 
			{
				if ( progress.fraction < 1 ) 
				{
					sS ( "display", "block" );
					gE ( "indicator", false ).sS ( "width", progress.fraction * 100 + "%" );
				}
				else
				{
					sS ( "display", "none" );
				}
			}
		}
]]></style>
<template name="frScrollbarVert">
	<div class="frScrollbarVert">
		<!-- <div name="up" /> -->
		<div name="track">
			<div name="trackButton" />
			<div name="slider" />
		</div>
		<!-- <div name="down" /> -->
	</div>
</template>
<template name="frScrollbarHoriz">
	<div class="frScrollbarHoriz">
		<!-- <div name="left" /> -->
		<div name="track">
			<div name="trackButton" />
			<div name="slider" />
		</div>
		<!-- <div name="right" /> -->
	</div>
</template>
<template name="frProgressIndicator">
	<div class="frProgressIndicator">
		<div name="track">
			<div name="indicator" />
		</div>
	</div>
</template>