changed Macros.hx that it supports template .css

Hello Ian,

the change seems to work now. I have tested it with this css code:

```css
@ {
	scale: 1.7;
	borderColor: 0xa5b8da;
	padding: 1;
	@border(@size=1) {
		borderColor: borderColor;
		borderSize: @size;
	}
	@padding(val=1) {
		paddingLeft: @val;
		paddingTop: @val;
		paddingBottom: @val;
		paddingRight: @val;
	}
}

#popupRoot {
	width: 760;
	height: 560;
	backgroundColor: 0xFFFFFF;
	borderColor: borderColor;
	@padding;
	spacingY: 0;
	cornerRadius: 3;
	filter: dropShadow(4, 45, 0x808080, 1, 4, 4, 1, 3);
}

#modalOverlay {
	backgroundColor: 0xE9EDF5;
	alpha: .6;
}

Text {
	fontSize: 16 * scale;
	fontName: "_sans";
}

VBox {
	@border(0);
	@padding(0);
	spacingY: 5;
	cornerRadius: 2;
}

HBox {
	@border(0);
	@padding(0);
	spacingX: 5;
	cornerRadius: 2;
}

Grid {
	@border(0);
	@padding(0);
	spacingX: 5;
	spacingY: 5;
	cornerRadius: 2;
}

ScrollView {
	@border(1);
	color: 0x000000;
	@padding(1);
	spacingX: 2;
	spacingY: 2;
	cornerRadius: 2;
	inlineScrolls: true;
	autoHideScrolls: true;
}

ScrollView VBox {
	backgroundColor: 0xFFFFFF;
	borderColor: 0x000000;
	color: 0x000000;
	@padding(0);
	borderSize: 0;
	spacingX: 5;
	spacingY: 5;
}

Button {
	@padding(8);
	backgroundColor: 0x606c88;
	backgroundColorGradientEnd: 0x3f4c6b;
	color: 0xFFFFFF;
	borderColor: 0x495267;
	cornerRadius: 3;
	borderSize: 1;
	fontSize: 16 * scale;
	fontName: "_sans";
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
	iconPosition: "left";
}

Button:over {
	backgroundColor: 0x4b546a;
	backgroundColorGradientEnd: 0x2c354b;
	color: 0xFFFFFF;
	borderColor: 0x363d4c;
}

Button:down {
	backgroundColor: 0x8C95A9;
	backgroundColorGradientEnd: 0x767F95;
	color: 0xFFFFFF;
	borderColor: 0x363d4c;
}

VScroll {
	width: 5;
	height: 100;
	@padding(0);
	spacingY: 0;
	cornerRadius: 0;
	hasButtons: false;
	alpha: 0.5;
}

VScroll Button {
	backgroundColor: 0x606c88;
	backgroundColorGradientEnd: 0x606c88;
	borderColor: 0x606c88;
	cornerRadius: 3;
	filter: null;
	iconPosition: "center";
}

VScroll Button:over {
	backgroundColor: 0x4b546a;
	backgroundColorGradientEnd: 0x4b546a;
	borderColor: 0x4b546a;
}

VScroll Button:down {
	backgroundColor: 0x4b546a;
	backgroundColorGradientEnd: 0x4b546a;
	borderColor: 0x4b546a;
}

HScroll {
	width: 100;
	height: 5;
	@padding(0);
	spacingX: 1;
	cornerRadius: 0;
	hasButtons: false;
	alpha: 0.5;
}
			
HScroll Button {
	backgroundColor: 0x606c88;
	backgroundColorGradientEnd: 0x606c88;
	borderColor: 0x606c88;
	cornerRadius: 3;
	filter: null;
	iconPosition: "center";
}

HScroll Button:over {
	backgroundColor: 0x4b546a;
	backgroundColorGradientEnd: 0x4b546a;
	borderColor: 0x4b546a;
}

HScroll Button:down {
	backgroundColor: 0x4b546a;
	backgroundColorGradientEnd: 0x4b546a;
	borderColor: 0x4b546a;
}
			
HProgress {
	width: 100;
	height: 20;
	backgroundColor: 0xFFFFFF;
	borderColor: 0x363d4c;
	@padding(1);
	cornerRadius: 3;
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
}

HProgress #background {
	width: 100%;
	height: 100%;
	backgroundColor: borderColor;
	borderColor: borderColor;
	cornerRadius: 3;
}

HProgress #value {
	height: 100%;
	backgroundColor: 0x606c88;
	backgroundColorGradientEnd: 0x3f4c6b;
	borderColor: borderColor;
	cornerRadius: 3;
}

VProgress {
	width: 20;
	height: 100;
	backgroundColor: 0xFFFFFF;
	borderColor: 0x363d4c;
	@padding;
	cornerRadius: 3;
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
}

VProgress #background {
	width: 100%;
	height: 100%;
	backgroundColor: borderColor;
	borderColor: borderColor;
	cornerRadius: 3;
}

VProgress #value {
	width: 100%;
	backgroundColor: 0x606c88;
	backgroundColorGradientEnd: 0x3f4c6b;
	borderColor: borderColor;
	cornerRadius: 3;
	gradientType: "horizontal";
}

HSlider {
	width: 150;
	height: 34;
}

HSlider #background {
	width: 100%;
	height: 10;
	backgroundColor: borderColor;
	borderColor: 0x363d4c;
	cornerRadius: 3;
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, false);
}

HSlider #value {
	height: 10;
	backgroundColor: 0x819bcb;
	backgroundColorGradientEnd: 0x536f9d;
	borderColor: 0x363d4c;
	cornerRadius: 3;
	cornerRadiusTopRight: 0;
	cornerRadiusBottomRight: 0;
}

HSlider Button {
	width: 40;
	height: 100%;
	icon: "styles/gradient/gripper_horizontal.png";
	iconPosition: "center";
}

VSlider {
	width: 34;
	height: 150;
}

VSlider #background {
	width: 10;
	height: 100%;
	backgroundColor: borderColor;
	borderColor: 0x363d4c;
	cornerRadius: 3;
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, false);
}

VSlider #value {
	width: 10;
	backgroundColor: 0x819bcb;
	backgroundColorGradientEnd: 0x536f9d;
	borderColor: 0x363d4c;
	cornerRadius: 3;
	cornerRadiusTopRight: 0;
	cornerRadiusTopLeft: 0;
	gradientType: "horizontal";
}

VSlider Button {
	width: 100%;
	height: 40;
	icon: "styles/gradient/gripper_vertical.png";
	iconPosition: "center";
}

ListView {
	@border(1);
	color: 0x000000;
	@padding;
	spacingX: 2;
	spacingY: 2;
	cornerRadius: 2;
	backgroundColor: 0xFFFFFF;
	inlineScrolls: true;
	autoHideScrolls: true;
}

ListView VBox {
	color: 0x000000;
	@padding(0);
	borderSize: 0;
	spacingX: 0;
	spacingY: 0;
	cornerRadius: 0;
}

ListViewItem {
	color: 0x000000;
	paddingLeft: 2;
	paddingTop: 14;
	paddingBottom: 14;
	paddingRight: 2;
	borderSize: 0;
	spacingX: 2;
	spacingY: 2;
	cornerRadius: 2;
}


ListView #even {
	backgroundColor: 0xE9EDF5;
	color: 0x000000;
	cornerRadius: 2;
}

ListView #odd {
	backgroundColor: 0xFFFFFF;
	color: 0x000000;
	cornerRadius: 2;
}

ListViewItem:over {
	backgroundColor: 0x606c88;
}

ListViewItem #text {
	color: 0x000000;
}

ListViewItem #text:over {
	color: 0xFFFFFF;
}

ListViewItem #subtext {
	color: 0x606c88;
	fontSize: 11 * scale;
}

ListViewItem #subtext:over {
	color: 0xFFFFFF;
}

ListViewItem:selected {
	backgroundColor: 0x3f4c6b;
}

ListViewItem #text:selected {
	color: 0xFFFFFF;
}

ListViewItem #subtext:selected {
	color: 0xFFFFFF;
}

CheckBox {
	spacingX: 2;
}

CheckBoxValue {
	width: 18;
	height: 18;
}

CheckBoxValue #unselected {
	backgroundColor: 0xFFFFFF;
	backgroundColorGradientEnd: 0xFFFFFF;
	borderColor: 0x363d4c;
	@padding;
	cornerRadius: 3;
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
}

CheckBoxValue #selected {
	backgroundColor: 0xFFFFFF;
	backgroundColorGradientEnd: 0xFFFFFF;
	borderColor: 0x363d4c;
	@padding;
	cornerRadius: 3;
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
	icon: "styles/gradient/cross_dark.png";
	iconPosition: "center";
}

OptionBox {
	spacingX: 2;
}

OptionBoxValue {
	width: 18;
	height: 18;
}

OptionBoxValue #unselected {
	backgroundColor: 0xFFFFFF;
	backgroundColorGradientEnd: 0xFFFFFF;
	borderColor: 0x363d4c;
	@padding;
	cornerRadius: 3;
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
}

OptionBoxValue #selected {
	backgroundColor: 0xFFFFFF;
	backgroundColorGradientEnd: 0xFFFFFF;
	borderColor: 0x363d4c;
	@padding;
	cornerRadius: 3;
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
	icon: "styles/gradient/circle_dark.png";
	iconPosition: "center";
}

TextInput, Code, RTF {
	width: 150;
	height: 30;
	borderColor: 0x363d4c;
	backgroundColor: 0xFFFFFF;
	@padding(2);
	cornerRadius: 2;
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
	fontSize: 13 * scale;
	fontName: "_sans";
}

TabBar {
	backgroundColor: 0xFFFFFF;
	height: 50;
	paddingTop: 15;
	paddingLeft: 5;
	paddingRight: 5;
}

TabBar HBox {
	spacingX: 3;
}

TabBar Button {
	@padding(5);
	height: 35;
	backgroundColor: borderColor;
	backgroundColorGradientEnd: 0x7089b3;
	color: 0xFFFFFF;
	borderColor: 0x7d99ca;
	cornerRadius: 2;
	cornerRadiusBottomLeft: 0;
	cornerRadiusBottomRight: 0;
}

TabBar Button:over {
	backgroundColor: 0x819bcb;
	backgroundColorGradientEnd: 0x536f9d;
	color: 0xFFFFFF;
	borderColor: 0x5d7fbc;
}

TabBar Button:down {
	backgroundColor: 0xf4f5f5;
	backgroundColorGradientEnd: 0xdfdddd;
	color: 0x363d4c;
	borderColor: 0xdfdddd;
}

TabView {
	backgroundColor: 0xdfdddd;
}

Stack {
	@padding(5);
}

TabView Stack {
	@padding(10);
}

MenuBar {
	backgroundColor: 0xdfdddd;
	width: 100%;
	height: 45 * scale;
	paddingLeft: 5;
	paddingTop: 5 * scale;
	paddingRight: 5;
	paddingBottom: 5 * scale;
	cornerRadius: 0;
	filter: dropShadow(2, 90, 0x808080, 1, 0, 4, 1, 3);
}

MenuBar Button {
	backgroundColor: borderColor;
	backgroundColorGradientEnd: 0x7089b3;
	color: 0xFFFFFF;
	borderColor: 0x495267;
}

MenuBar Button:over {
	backgroundColor: 0x819bcb;
	backgroundColorGradientEnd: 0x536f9d;
	color: 0xFFFFFF;
	borderColor: 0x495267;
}

MenuBar Button:down {
	backgroundColor: 0x606c88;
	backgroundColorGradientEnd: 0x3f4c6b;
	color: 0xFFFFFF;
	borderColor: 0x495267;
}

List, Date {
	@padding(8);
	backgroundColor: 0x606c88;
	backgroundColorGradientEnd: 0x3f4c6b;
	color: 0xFFFFFF;
	borderColor: 0x495267;
	cornerRadius: 3;
	borderSize: 1;
	fontSize: 16 * scale;
	fontName: "_sans";
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
	icon: "styles/gradient/arrow_down.png";
	iconPosition: "farRight";
	labelPosition: "left";
	selectionMethod: "popup";
}

List:over, Date:over {
	backgroundColor: 0x4b546a;
	backgroundColorGradientEnd: 0x2c354b;
	color: 0xFFFFFF;
	borderColor: 0x363d4c;
}

List:down, Date:down {
	backgroundColor: 0x8C95A9;
	backgroundColorGradientEnd: 0x767F95;
	color: 0xFFFFFF;
	borderColor: 0x363d4c;
}

MenuBar List {
	backgroundColor: borderColor;
	backgroundColorGradientEnd: 0x7089b3;
	color: 0xFFFFFF;
	borderColor: 0x495267;
}

MenuBar List:over {
	backgroundColor: 0x819bcb;
	backgroundColorGradientEnd: 0x536f9d;
	color: 0xFFFFFF;
	borderColor: 0x495267;
}

MenuBar List:down {
	backgroundColor: 0x606c88;
	backgroundColorGradientEnd: 0x3f4c6b;
	color: 0xFFFFFF;
	borderColor: 0x495267;
}

DropDownList {
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
}

ListView VBox Button {
	backgroundColor: borderColor;
	backgroundColorGradientEnd: 0x7089b3;
	color: 0xFFFFFF;
	borderColor: 0x495267;
}

ListView VBox Button:over {
	backgroundColor: 0x819bcb;
	backgroundColorGradientEnd: 0x536f9d;
	color: 0xFFFFFF;
	borderColor: 0x495267;
}

ListView VBox Button:down {
	backgroundColor: 0x606c88;
	backgroundColorGradientEnd: 0x3f4c6b;
	color: 0xFFFFFF;
	borderColor: 0x495267;
}

ListView VBox List {
	backgroundColor: borderColor;
	backgroundColorGradientEnd: 0x7089b3;
	color: 0xFFFFFF;
	borderColor: 0x495267;
}

ListView VBox List:over {
	backgroundColor: 0x819bcb;
	backgroundColorGradientEnd: 0x536f9d;
	color: 0xFFFFFF;
	borderColor: 0x495267;
}

ListView VBox List:down {
	backgroundColor: 0x606c88;
	backgroundColorGradientEnd: 0x3f4c6b;
	color: 0xFFFFFF;
	borderColor: 0x495267;
}

Popup {
	backgroundColor: 0xE9EDF5;
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
	borderColor: 0x495267;
	cornerRadius: 3;
	borderSize: 1;
	@padding(2);
	width: 350;
}

Popup #titleBar {
	backgroundColor: 0x4b546a;
	height: 30;
	paddingTop: 4;
	paddingLeft: 5;
}

Popup #content {
	@padding(5);
}

Popup #titleBar Text {
	color: 0xFFFFFF;
}

Popup #buttonBar {
	paddingTop: 10;
	paddingBottom: 5;
	height: 54;
}

ListPopupContent {
	@padding(0);
}

ListPopupContent ListView {
	@padding(0);
	borderSize: 0;
}

Accordion {
	backgroundColor: 0xdfdddd;
	spacingX: 0;
	spacingY: 0;
	padding: 0;
}

Accordion VBox, Accordion HBox, Accordion Grid {
	@padding(5);
	spacingX: 0;
	spacingY: 0;
}

AccordionButton {
	@padding(8);
	backgroundColor: borderColor;
	backgroundColorGradientEnd: 0x7089b3;
	color: 0xFFFFFF;
	borderColor: 0x495267;
	cornerRadius: 0;
	borderSize: 1;
	fontSize: 16 * scale;
	fontName: "_sans";
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
	iconPosition: "farLeft";
	labelPosition: "left";
	icon: "styles/gradient/arrow_right2.png";
}

AccordionButton:over {
	backgroundColor: 0x819bcb;
	backgroundColorGradientEnd: 0x536f9d;
	color: 0xFFFFFF;
	borderColor: 0x495267;
}

AccordionButton:down {
	backgroundColor: 0x606c88;
	backgroundColorGradientEnd: 0x3f4c6b;
	color: 0xFFFFFF;
	borderColor: 0x495267;
	icon: "styles/gradient/arrow_down.png";
}

RTFView {
	spacingY: 8;
}

RTFView List {
	backgroundColor: 0xf4f5f5;
	backgroundColorGradientEnd: 0xdfdddd;
	color: 0x363d4c;
	borderColor: 0xdfdddd;
	icon: "styles/gradient/arrow_down_dark.png";
}

RTFView List:over {
	backgroundColor: borderColor;
	backgroundColorGradientEnd: 0x7089b3;
	borderColor: 0x7d99ca;
	color: 0xFFFFFF;
	icon: "styles/gradient/arrow_down.png";
}

RTFView List:down {
	backgroundColor: 0x819bcb;
	backgroundColorGradientEnd: 0x536f9d;
	borderColor: 0x5d7fbc;
	color: 0xFFFFFF;
	icon: "styles/gradient/arrow_down.png";
}

RTFView RTFToolButton {
	paddingLeft: 8;
	paddingTop: 5;
	paddingBottom: 5;
	paddingRight: 8;
	backgroundColor: 0xf4f5f5;
	backgroundColorGradientEnd: 0xdfdddd;
	color: 0x363d4c;
	borderColor: 0xdfdddd;
	width: 42;
	height: 100%;
	cornerRadius: 3;
	borderSize: 1;
	fontSize: 13 * scale;
	fontName: "_sans";
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
	iconPosition: "center";
}

RTFView RTFToolButton:over {
	backgroundColor: borderColor;
	backgroundColorGradientEnd: 0x7089b3;
	borderColor: 0x7d99ca;
}

RTFView RTFToolButton:down {
	backgroundColor: 0x819bcb;
	backgroundColorGradientEnd: 0x536f9d;
	borderColor: 0x5d7fbc;
}

RTFView #bold {
	icon: "img/rtfview/edit-bold.png";
}

RTFView #italic {
	icon: "img/rtfview/edit-italic.png";
}

RTFView #underline {
	icon: "img/rtfview/edit-underline.png";
}

RTFView #bullet {
	icon: "img/rtfview/edit-list.png";
}

RTFView #alignLeft {
	icon: "img/rtfview/edit-alignment-left.png";
}

RTFView #alignCenter {
	icon: "img/rtfview/edit-alignment-center.png";
}

RTFView #alignRight {
	icon: "img/rtfview/edit-alignment-right.png";
}

RTFView #alignJustify {
	icon: "img/rtfview/edit-alignment-justify.png";
}

CalendarView {
	width: 250;
	height: 250;
	spacingX: 5;
	spacingY: 5;
	@padding(5);
	borderSize: 1;
	borderColor: 0x495267;
	backgroundColor: 0xE9EDF5;
	cornerRadius: 3;
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
}

Calendar {
	width: 250;
	height: 250;
	spacingX: 2;
	spacingY: 2;
	@padding(0);
	borderSize: 0;
	filter: null;
}

CalendarDay {
	paddingLeft: 8;
	paddingTop: 5;
	paddingBottom: 5;
	paddingRight: 8;
	backgroundColor: borderColor;
	backgroundColorGradientEnd: 0x7089b3;
	borderColor: 0x7d99ca;
	color: 0xFFFFFF;
	cornerRadius: 3;
	borderSize: 1;
	fontSize: 16 * scale;
	fontName: "_sans";
	filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
	iconPosition: "left";
}

CalendarDay:over {
	backgroundColor: 0x4b546a;
	backgroundColorGradientEnd: 0x2c354b;
	color: 0xFFFFFF;
	borderColor: 0x363d4c;
}

CalendarDay:down {
	backgroundColor: 0x8C95A9;
	backgroundColorGradientEnd: 0x767F95;
	color: 0xFFFFFF;
	borderColor: 0x363d4c;
}

Calendar #selectedDay {
	backgroundColor: 0x4b546a;
	backgroundColorGradientEnd: 0x2c354b;
	color: 0xFFFFFF;
	borderColor: 0x363d4c;
}

Calendar #selectedDay:over {
	backgroundColor: 0x4b546a;
	backgroundColorGradientEnd: 0x2c354b;
	color: 0xFFFFFF;
	borderColor: 0x363d4c;
}

Calendar #selectedDay:down {
	backgroundColor: 0x4b546a;
	backgroundColorGradientEnd: 0x2c354b;
	color: 0xFFFFFF;
	borderColor: 0x363d4c;
}

CalendarPopupContent CalendarView {
	@padding(0);
	borderSize: 0;
	filter: null;
}


```