colors {
	bgColor: white;
	highlightedBgColor: #7272f4;
	titleColor: #7272f4;
	screenBgColor: white;
	fontColor: black;
	focusedFontColor: black;
	inactiveFontColor: gray;
}

backgrounds {
	contBackground {
		type: round-rect;
		color: #7f7f7f;
	}
}

borders {
	contBorder {
		type: round-rect;
		width: 2;
		color: #777;
	}
}

.gradientFramedForm {
	padding: 5%;
	background-color: screenBgColor;
	layout: vertical-center | horizontal-center;
	content-background: contBackground;
	content-border: contBorder;
}

scrollbar {
	background-color: #7272f4;
	scrollbar-slider-width: 4;
}

rightframe {
	layout: vertical-expand | vertical-center;
}

.colorChoiceGroup {
	padding: 2px;
	include-label: true;
	/*
	layout: expand | center;
	*/
	background-color: bgColor;

	/*
	view-type: exclusive;
	exclusiveview-right-arrow: url( right.png );
	exclusiveview-left-arrow: url( left.png );
	exclusiveview-roundtrip: true;
	*/
	/* Alternatively you might want to use the horizontal-choice view-type:
	*/
	view-type: horizontal-choice;
	horizontalview-right-arrow: url( right.png );
	horizontalview-left-arrow: url( left.png );
	horizontalview-roundtrip: true;
	/* 
	*/
	
}

.colorChoiceGroup:hover {
	font-color: focusedFontColor;
	background {
		type: web20;
		color: highlightedBgColor;
		circle-anchor: top;
		circle-color: #A2A2f9;
		padding: 3;
		padding-top: 0;
		padding-bottom: 8;
	}
	label-style: .labelFocused;
}

.colorChoiceItem {
	padding: 2;
	font-color: fontColor;
	font-size: small;
	/** use expand layout only when using view-type: exclusive for the ChoiceGroup
	layout: expand | center;
	**/
}

.colorChoiceItem:hover {
	font-style: bold;
	font-color: #a00;
}

.meaninglessSelectableItem {
	font-color: #222;
	layout: center;
}


focused {
	padding: 2;
	font-color: focusedFontColor;
	layout: expand | center;
	background {
		type: web20;
		color: highlightedBgColor;
		circle-anchor: top;
		circle-color: #A2A2f9;
		padding: 3;
		padding-top: 0;
		padding-bottom: 8;
	}
	label-style: .labelFocused;
}

title {
	font-color: titleColor;
	text-effect: shadow;
	text-shadow-color: inactiveFontColor;
	layout: expand | center;
	border {
		type: bottom;
		color: #333;
	}
}

label {
	padding-left: 2;
	font-color: inactiveFontColor;
	font-size: small;
}


.labelFocused extends label {
	font-color: fontColor;
}

/************************ TextField Demo ********************************************************************/


.note {
	font-size: small;
	font-style: italic;
}

.colorInput {
	background-color: silver;
	layout: expand;
}

.colorInput:hover {
	background-color: white;
}
/************************ Default Command Demo ********************************************************************/

.horizontalFrame {
	view-type: horizontal;
}

.popupAlert {
	repaint-previous-screen: true;
	margin: 20%;
	layout: bottom | horizontal-center;
	background-color: #afff;
}

.itemWithDefaultCommand {
	font-color: #333;
}

.itemWithDefaultCommand:hover {
	background-color: #333;
	font-color: #eee;
}

/************************* Calendar Demo **************************************************************************/

.itemDatePicker {
	padding: 0px;
	layout: horizontal-center | vertical-center | expand;
	label-style: calendarMonth;
	calendar-day-style: calendarDay;
	calendar-day-inactive-style: inactiveDay;
	calendar-day-invalid-style: invalidDay;
	table-line-stroke: invisible;
	table-row-height: 11%;
}

.itemDatePicker:hover {
}

.calendarMonth {
	padding: 3px;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 1px;
	font-color: #777;
	font-style: bold;
	font-size: large;
	before: url( arrow-left.png );
	after: url( arrow-right.png );
	layout: expand | center | vertical-center | newline-after;
	background {
		type: round-rect;
		arc: imageheight( arrow-left.png ) + 6;
		color: #ddd;
	}
}

.calendarMonth:hover {
	background-color: #222;
	font-color: #fff;
}

.calendarWeekday {
	margin: 1px;
	padding: 0px;
	layout: center | bottom;
	font-style: bold;
	font-size: small;
	font-color: #543707;
	min-item-width: 14.2%;
}

.calendarDay extends .calendarWeekday {
	background-color: #fff;
	font-color: #00d;
	layout: horizontal-center | vertical-center;
}

.calendarDay:hover {
	padding: -3px;
	border {
		color: #f90;
		width: 3px;
	}
}

.calendarCurrentday extends .calendarDay {
	background {
		type: vertical-gradient;
		top-color: #38719b;
		bottom-color: #00447c;
	}
	font-color: #fff;
}

.calendarCurrentday:hover {
	padding: -3px;
	border {
		color: #f90;
		width: 3px;
	}
}

.inactiveDay extends .calendarWeekday {
	font-color: #fff;
	background-color: #fff;
	layout: horizontal-center | vertical-center;
}

.invalidDay extends calendarDay {
	font-color: #666;
}




/************************  Commands Menu  ****************************************************************/

menu {
	padding: 0px;
	padding-bottom: 3px;
	width: 60%;
	font-size: medium;
	view-type: slide-up;
	background {
		type: round-tab;
		color: #301e3a;
	}
	expand-items: true;
	focused-style-first: menuItemFocusedFirst;
}


/**
  * The menuItem style is a predefined style
  * for the actual commands in a fullscreen-menu.
  * When the menuItem style is not defined,
  * the menu style will be used instead. 
  */
menuItem {
	padding: 3;
	font {
		color: white;
		size: medium;
		style: bold;
	}
	layout: left;
	border {
		type: bottom;
		color: #999;
	}
}

/**
  * This is a custom style for focused menu items.  
  */
.menuItem:hover {
	background-color: #6dd0f7;
	font-color: black;
	layout: left | horizontal-expand;
}

/**
  * The focused style for the first menu item uses a round-tab background:  
  */
.menuItemFocusedFirst extends menuItem {
	font-color: black;
	layout: left | horizontal-expand;
	background {
		type: round-tab;
		color: #6dd0f7;
	}
}



menubar {
	background {
		type: split;
		top-color: #301e3a;
		bottom-color: #150020;
	}
}

leftcommand {
	padding: 2;
	font-color: white;
	text-effect: split;
	text-split-bottom-color: #ddd;
}

leftcommand:pressed {
	font-color: yellow;
}

rightcommand extends leftcommand {
	layout: right;
}

rightcommand:pressed {
	font-color: yellow;
}
