/** 
  * The polish.css files contains all
  * design information about a project.
  * It can be adjusted for specific devices
  * or device groups by putting it in the 
  * appropriate sub-folder.
  * If you want to adjust a design for all
  * Nokia devices, define it in "resources/Nokia/polish.css"
  * and so on. Only new and different settings
  * need to be specified in such polish.css files. 
  */

/**
  * the colors which are defined in
  * the colors section can later be referenced.
  * This makes changes easy, since the color
  * just needs to be changed in one position.
  * Even default colors (like blue, green, lime, etc)
  * can be changed here. 
  */
colors {
	bgColor:  argb( 150, 20, 121, 8);
	highlightedBgColor:  rgb(20,121,8);
	fontColor: rgb( 0, 3, 0 );
	highlightedFontColor: rgb(0,255,0);
}

/**
  * the fonts-section defines fonts for later re-use.
  */
fonts {
}

/**
  * the backgrounds-section defines backgrounds for later re-use.
  */
backgrounds {
	froggerBackground {
		type: scaling-image;
		color: bgColor;
		image: url( bg.png );
		scale-mode: scale;
	}

}

default {
	font-color: fontColor;
}

/**
  * The title style is a predefined style which is used
  * for all screen-titles.
  */
title {
	padding: 2;
	margin-top: 0;
	margin-bottom: 5;
	margin-left: 0;
	margin-right: 0;
	font-face: proportional;
	font-size: large;
	font-style: bold;
	font-color: highlightedFontColor;
	background: none;
	border: none;
	layout: horizontal-center | horizontal-expand;
}


/**
  * The focused style is a predefined style which
  * is used by lists, forms, choice-groups and so on.
  * This style will be used for highlighting the currently
  * focused item.
  */
focused {
	padding: 5;
	padding-horizontal: 2;
	background-color:bgColor;
	/*
	background {
		type: round-rect-opening;
		color: highlightedBgColor;
		steps: 4;
		border-color: bgColor;
		border-width: 2;
	}
	*/
	font {
		style: bold;
		color: highlightedFontColor;
		size: small;
		bitmap: example;
	}
	label-style: labelFocused;
	layout: expand | center;
}




/** 
  * The .mainMenu style is a static style, which
  * is set in the MIDlet source-code with the //#style directive.
  * If the source-code would not have defined this
  * style, we could use the dynamic style "list" to design all
  * list-screens. 
  */
.mainScreen {
	padding: 5;
	padding-left: 15;
	padding-right: 15;
	background: froggerBackground;
	layout: horizontal-expand | horizontal-center | vertical-center;
	screen-change-animation: verticalflash;
	/*
	view-type: dropping;
	*/
}

.settingsScreen extends .mainScreen {
}

.exclusiveChoice {
	view-type: exclusive;
	exclusiveview-arrow-color: highlightedFontColor;
	exclusiveview-arrow-position: bothsides;
	exclusiveview-expand-background: false;
	layout: expand | center;
}

.exclusiveChoiceItem {
	font-color: fontColor;
	layout: expand | center;
}


.aboutScreen extends .mainScreen {
	screen-change-animation: left;
}

.aboutText {
	font {
		color: highlightedFontColor;
	}
	background-color: bgColor;
}

.input {
	font {
		color: fontColor;
	}
	/*
	textfield-caret-char: :;
	*/
	layout: expand | left;
}

.input:hover {
	background-color: bgColor;
}


/**
  * The .mainMenuItem style is also a static style, which
  * is set in the MIDlet source-code with the //#style directive.
  * If the source-code would not have defined this
  * style, we could use the dynamic style "listitem" to design all
  * items on the list-screens. 
  * An interesting attribute is the "icon-image" URL, which uses
  * the %INDEX% keyword. The first list-item will use the image
  * "icon0.png", the second "icon1.png" and so on. 
  */
.mainMenuItem {
	margin: 2; /* for the missing border of the focused style */
	padding: 5;
	background: none;
	font-color: fontColor;
	font-style: bold;
	font-size: small;
	text-effect: shadow;
	text-shadow-color: white;
	layout: center;
	checkbox-plain: none;
	checkbox-selected: url(checked.png);
	text-wrap: false;
}

.mainMenuItem:hover {
	font-color-animation {
		on: focus;
		range: fontColor..highlightedFontColor;
		repeat: always;
	}
	background-color:bgColor;
}

label {
	font-color: fontColor;
	font-size: small;
	layout: newline-after;
	/*
	min-width: 40;
	max-width: 40;
	*/
}

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




/*********************   MENU BAR     *******************************************************************************************************/
/* You need to activate the extended menubar that allows this finetuned design by setting the 
   "polish.MenuBar.useExtendedMenuBar" variable to "true" in your build.xml script. */

menubar
{
	padding-top: 3px;
	padding: 2px;
	background-color: bgColor;
}

menu {
	margin-left: 2px;
	margin-right: 2px;
	min-width: 60%;
	padding: 2px;
	background {
		type: round-rect;
		color: bgColor;
	}
}

/**
  * 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 {
	margin-top: 2px;
	padding: 2px;
	padding-left: 5px;
	font {
		color: fontColor;
		size: medium;
		style: bold;
	}
	layout: left;
	/**
	 * Yes, it's possible to use preprocessing within CSS files. Use any preprocessing
	 * variables like polish.midp2 or polish.api.nokia-ui. You can also access resource
	 * information using these property functions:
	 * - exists( resourcename ): checks whether a resource is defined for the current target device
	 * - imagewidth( imagename ): retrieves the width of the given image
	 * - imageheight( imagename ): retrieves the height of the given image
	 */
	//#if ${ exists( arrowRight.png ) }
		command-child-indicator: url(arrowRight.png);
	//#else
		command-child-indicator-color: blue;
		command-child-indicator-width: 8;
		command-child-indicator-height: 10;
	//#endif
}

.menuItem:hover {
	background-color: highlightedBgColor;
	font-color: highlightedFontColor;
	layout: left | horizontal-expand;
}

leftcommand
{
	margin: 0px; /* default */
	padding-top: 3px;
	padding-bottom: 0px;
	font-color: highlightedFontColor;
	font-style: bold;
	layout: left;
}

leftcommand:pressed {
	font-color: #333;
}

rightcommand extends leftcommand
{
	layout: right;
}

rightcommand:pressed {
	font-color: #333;
}


