Fix decorators in samples (except Lua)

Samples/assets/cursor.rml

@@ -8,8 +8,7 @@
 				height: 19px;
 				
 				<!-- Add a simple image decorator onto the body element. -->
-				cursor-decorator: image;
-				cursor-image: invader.tga 56px 212px 68px 231px;
+				decorator: image( invader.tga 56px 212px 68px 231px );
 			}
 		</style>
 	</head>

Samples/assets/invader.rcss

@@ -32,6 +32,10 @@ div#title_bar
 	text-align: left;
 }
 
+@decorator icon : image {
+	image-src: invader.tga;
+}
+
 div#title_bar div#icon
 {
 	position: absolute;
@@ -40,12 +44,9 @@ div#title_bar div#icon
 	
 	width: 51px;
 	height: 39px;
-	
-	icon-decorator: image;
-	icon-image-src: invader.tga;
 }
 
-@decorator title-bar : tiled-horizontal {
+@decorator title_bar : tiled-horizontal {
 	left-image: invader.tga 147px 0px 229px 85px;
 	center-image: invader.tga stretch 229px 0px 230px 85px;
 	right-image: invader.tga 231px 0px 246px 85px;
@@ -65,18 +66,19 @@ div#title_bar span
 	outline-width: 1px;
 	outline-color: black;
 
-	decorator: title-bar;
+	decorator: title_bar;
 }
 
 @decorator window : tiled-box {
 	top-left-image: invader.tga 0px 0px 133px 140px;
-	top-right-image: invader.tga 136px 0px 146px 140px;
 	top-image: invader.tga stretch 134px 0px 135px 140px;
-	bottom-left-image: invader.tga 0px 140px 11px 151px;
-	bottom-right-image: invader.tga 136px 140px 146px 151px;
-	bottom-image: invader.tga stretch 11px 140px 12px 151px;
+	top-right-image: invader.tga 136px 0px 146px 140px;
 	left-image: invader.tga stretch 0px 139px 10px 140px;
 	center-image: invader.tga stretch 11px 139px 12px 140px;
+	right-image: none;
+	bottom-left-image: invader.tga 0px 140px 11px 151px;
+	bottom-image: invader.tga stretch 11px 140px 12px 151px;
+	bottom-right-image: invader.tga 136px 140px 146px 151px;
 }
 
 
@@ -153,8 +155,7 @@ input.submit
 	text-align: center;
 	tab-index: auto;
 
-	background-decorator: image;
-	background-image: invader.tga 247px 0px 406px 45px;
+	decorator: image(invader.tga 247px 0px 406px 45px);
 }
 
 button:focus,
@@ -170,18 +171,18 @@ input.submit:focus
 button:hover,
 input.submit:hover
 {
-	background-image-t: 45px 90px;
+	decorator: image(invader.tga 247px 45px 406px 90px);
 }
 
 button:active,
 input.submit:active
 {
-	background-image-t: 90px 135px;
+	decorator: image(invader.tga 247px 90px 406px 135px);
 }
 
 input.submit:disabled
 {
-	background-image-t: 0px 45px;
+	decorator: image(invader.tga 247px 0px 406px 45px);
 	image-color: rgba(50, 150, 150, 120);
 	cursor: unavailable;
 }
@@ -193,9 +194,11 @@ input.text
 	height: 31px;
 	padding: 10px 10px 0px;
 
-	background-decorator: tiled-horizontal;
-	background-left-image: invader.tga 162px 192px 176px 223px;
-	background-center-image: invader.tga stretch 176px 192px 177px 223px;
+	decorator: tiled-horizontal( 
+		invader.tga 162px 192px 176px 223px, /* left */
+		invader.tga stretch 176px 192px 177px 223px,  /* center */
+		none  /* right becomes mirrored from left */
+	);
 }
 
 input.text,
@@ -219,7 +222,7 @@ datagrid input.text
 
 	font-size: 15px;
 	
-	background-decorator: none;
+	decorator: none;
 }
 
 
@@ -240,14 +243,13 @@ dataselect selectvalue
 	height: 28px;
 	padding: 9px 10px 0px 10px;
 
-	background-decorator: image;
-	background-image: invader.tga 162px 192px 307px 229px;
+	decorator: image( invader.tga 162px 192px 307px 229px );
 }
 
 select selectvalue:hover,
 dataselect selectvalue:hover
 {
-	background-image-t: 230px 267px;
+	decorator: image( invader.tga 162px 230px 307px 267px );
 }
 
 select selectarrow,
@@ -256,14 +258,13 @@ dataselect selectarrow
 	width: 30px;
 	height: 37px;
 	
-	icon-decorator: image;
-	icon-image: invader.tga 307px 192px 337px 229px;
+	decorator: image( invader.tga 307px 192px 337px 229px );
 }
 
 select selectarrow:hover,
 dataselect selectarrow:hover
 {
-	icon-image-t: 230px 267px;
+	decorator: image( invader.tga 307px 230px 337px 267px );
 }
 
 select selectarrow:active,
@@ -271,7 +272,7 @@ select selectarrow:checked,
 dataselect selectarrow:active,
 dataselect selectarrow:checked
 {
-	icon-image-t: 268px 305px;
+	decorator: image( invader.tga 307px 268px 337px 305px );
 }
 
 select selectbox,
@@ -283,19 +284,24 @@ dataselect selectbox
 	padding: 1px 4px 4px 4px;
 }
 
+
+@decorator selectbox : tiled-box {
+	top-left-image: invader.tga 281px 275px 292px 284px;
+	top-right-image: invader.tga 294px 275px 305px 284px;
+	top-image: invader.tga stretch 292px 275px 293px 284px;
+	bottom-left-image: invader.tga 281px 285px 292px 296px;
+	bottom-right-image: invader.tga 294px 285px 305px 296px;
+	bottom-image: invader.tga stretch 292px 285px 293px 296px;
+	left-image: invader.tga stretch 281px 283px 292px 284px;
+	center-image: invader.tga stretch 292px 283px 293px 284px;
+}
+
+
 select selectbox,
 dataselect selectbox,
 datagrid datagridbody
 {
-	background-decorator: tiled-box;
-	background-top-left-image: invader.tga 281px 275px 292px 284px;
-	background-top-right-image: invader.tga 294px 275px 305px 284px;
-	background-top-image: invader.tga stretch 292px 275px 293px 284px;
-	background-bottom-left-image: invader.tga 281px 285px 292px 296px;
-	background-bottom-right-image: invader.tga 294px 285px 305px 296px;
-	background-bottom-image: invader.tga stretch 292px 285px 293px 296px;
-	background-left-image: invader.tga stretch 281px 283px 292px 284px;
-	background-center-image: invader.tga stretch 292px 283px 293px 284px;
+	decorator: selectbox;
 }
 
 select selectbox option,
@@ -331,71 +337,71 @@ input.checkbox
 
 input.radio
 {
-	icon-decorator: image;
-	icon-image: invader.tga 407px 0px 437px 30px;
+	decorator: image(invader.tga 407px 0px 437px 30px);
 }
 
 input.radio:hover
 {
-	icon-image-s: 437px 467px;
+	decorator: image(invader.tga 437px 0px 467px 30px);
 }
 
 input.radio:active
 {
-	icon-image-s: 467px 497px;
+	decorator: image(invader.tga 467px 0px 497px 30px);
 }
 
 input.radio:checked
 {
-	icon-image-t: 30px 60px;
+	decorator: image(invader.tga 407px 30px 437px 60px);
 }
 
 input.radio:checked:hover
 {
-	icon-image-s: 437px 467px;
-	icon-image-t: 30px 60px;
+	decorator: image(invader.tga 437px 30px 467px 60px);
 }
 
 input.radio:checked:active
 {
-	icon-image-s: 467px 497px;
-	icon-image-t: 30px 60px;
+	decorator: image(invader.tga 467px 30px 497px 60px);
 }
 
 input.checkbox
 {
-	icon-decorator: image;
-	icon-image: invader.tga 407px 60px 437px 90px;
+	decorator: image(invader.tga 407px 60px 437px 90px);
 }
 
 input.checkbox:hover
 {
-	icon-image-s: 437px 467px;
+	decorator: image(invader.tga 437px 60px 467px 90px);
 }
 
 input.checkbox:active
 {
-	icon-image-s: 467px 497px;
+	decorator: image(invader.tga 467px 60px 497px 90px);
 }
 
 input.checkbox:checked
 {
-	icon-image-t: 90px 120px;
+	decorator: image(invader.tga 407px 90px 437px 120px);
 }
 
 input.checkbox:checked:hover
 {
-	icon-image-s: 437px 467px;
-	icon-image-t: 90px 120px;
+	decorator: image(invader.tga 437px 90px 467px 120px);
 }
 
 input.checkbox:checked:active
 {
-	icon-image-s: 467px 497px;
-	icon-image-t: 90px 120px;
+	decorator: image(invader.tga 467px 90px 497px 120px);
 }
 
 
+@decorator datagridheader : tiled-horizontal {
+	left-image: invader.tga 127px 192px 143px 223px;
+	center-image: invader.tga stretch 143px 192px 145px 223px;
+	right-image: invader.tga 145px 192px 160px 223px;
+}
+
 
 datagrid datagridheader
 {
@@ -403,10 +409,7 @@ datagrid datagridheader
 	height: 25px;
 	padding: 5px 10px 0px 10px;
 
-	background-decorator: tiled-horizontal;
-	background-left-image: invader.tga 127px 192px 143px 223px;
-	background-center-image: invader.tga stretch 143px 192px 145px 223px;
-	background-right-image: invader.tga 145px 192px 160px 223px;
+	decorator: datagridheader;
 }
 
 datagrid datagridbody
@@ -428,27 +431,25 @@ datagridexpand
 	height: 17px;
 	width: 17px;
 	
-	icon-decorator: image;
-	icon-image: invader.tga 3px 232px 20px 249px;
+	decorator: image( invader.tga 3px 232px 20px 249px );
 }
 
 datagridexpand:hover
 {
-	icon-image-s: 21px 38px;
+	decorator: image( invader.tga 21px 232px 38px 249px );
 }
 
 datagridexpand:active
 {
-	icon-image-s: 39px 56px;
+	decorator: image( invader.tga 39px 232px 56px 249px );
 }
 
 datagridexpand.collapsed
 {
-	icon-image-t: 250px 267px;
+	decorator: image( invader.tga 3px 250px 20px 267px );
 }
 
 
-
 scrollbarvertical
 {
 	margin-top: -6px;
@@ -459,10 +460,31 @@ scrollbarvertical
 
 scrollbarvertical slidertrack
 {
-	background-decorator: tiled-vertical;
-	background-top-image: invader.tga 70px 199px 97px 201px;
-	background-center-image: invader.tga stretch 70px 201px 97px 202px;
-	background-bottom-image: invader.tga 70px 203px 97px 204px;
+	decorator: tiled-vertical(
+		invader.tga 70px 199px 97px 201px, /* top-image */
+		invader.tga stretch 70px 201px 97px 202px, /* center-image */
+		invader.tga 70px 203px 97px 204px /* bottom-image */
+	);
+}
+scrollbarvertical slidertrack:active
+{
+	image-color: #aaa;
+}
+
+@decorator sliderbar : tiled-vertical {
+	top-image: invader.tga 56px 152px 79px 175px;
+	center-image: invader.tga stretch 56px 175px 79px 175px;
+	bottom-image: invader.tga 56px 176px 79px 198px;
+}
+@decorator sliderbar-hover : sliderbar {
+	top-image-s: 80px 103px;
+	center-image-s: 80px 103px;
+	bottom-image-s: 80px 103px;
+}
+@decorator sliderbar-active : sliderbar {
+	top-image-s: 104px 127px;
+	center-image-s: 104px 127px;
+	bottom-image-s: 104px 127px;
 }
 
 scrollbarvertical sliderbar
@@ -471,56 +493,51 @@ scrollbarvertical sliderbar
 	width: 23px;
 	min-height: 46px;
 
-	background-decorator: tiled-vertical;
-	background-top-image: invader.tga 56px 152px 79px 175px;
-	background-center-image: invader.tga stretch 56px 175px 79px 175px;
-	background-bottom-image: invader.tga 56px 176px 79px 198px;
+	decorator: sliderbar;
 }
 
 scrollbarvertical sliderbar:hover
 {
-	background-top-image-s: 80px 103px;
-	background-center-image-s: 80px 103px;
-	background-bottom-image-s: 80px 103px;
+	decorator: sliderbar-hover;
 }
 
 scrollbarvertical sliderbar:active
 {
-	background-top-image-s: 104px 127px;
-	background-center-image-s: 104px 127px;
-	background-bottom-image-s: 104px 127px;
+	decorator: sliderbar-active;
 }
 
-scrollbarvertical sliderarrowdec
+scrollbarvertical sliderarrowdec,
+scrollbarvertical sliderarrowinc
 {
 	width: 27px;
 	height: 24px;
-	
-	icon-decorator: image;
-	icon-image: invader.tga 0px 152px 27px 176px;
 }
 
-scrollbarvertical sliderarrowdec:hover,
-scrollbarvertical sliderarrowinc:hover
+scrollbarvertical sliderarrowdec
 {
-	icon-image-t: 177px 201px;
+	decorator: image( invader.tga 0px 152px 27px 176px );
 }
-
-scrollbarvertical sliderarrowdec:active,
-scrollbarvertical sliderarrowinc:active
+scrollbarvertical sliderarrowdec:hover
+{
+	decorator: image( invader.tga 0px 177px 27px 201px );
+}
+scrollbarvertical sliderarrowdec:active
 {
-	icon-image-t: 202px 226px;
+	decorator: image( invader.tga 0px 202px 27px 226px );
 }
 
 scrollbarvertical sliderarrowinc
 {
-	width: 27px;
-	height: 24px;
-	
-	icon-decorator: image;
-	icon-image: invader.tga 28px 152px 55px 176px;
+	decorator: image( invader.tga 28px 152px 55px 176px );
+}
+scrollbarvertical sliderarrowinc:hover
+{
+	decorator: image( invader.tga 28px 177px 55px 201px );
+}
+scrollbarvertical sliderarrowinc:active
+{
+	decorator: image( invader.tga 28px 202px 55px 226px );
 }
-
 
 
 scrollbarhorizontal

Samples/basic/transform/src/main.cpp

@@ -43,8 +43,8 @@ public:
 		if (document != NULL)
 		{
 			document->GetElementById("title")->SetInnerRML(title);
-			document->SetProperty("left", Rocket::Core::Property(position.x, Rocket::Core::Property::PX));
-			document->SetProperty("top", Rocket::Core::Property(position.y, Rocket::Core::Property::PX));
+			document->SetProperty(Rocket::Core::PropertyId::Left, Rocket::Core::Property(position.x, Rocket::Core::Property::PX));
+			document->SetProperty(Rocket::Core::PropertyId::Top, Rocket::Core::Property(position.y, Rocket::Core::Property::PX));
 			document->Show();
 		}
 	}

Samples/basic/treeview/data/treeview.rml

@@ -7,33 +7,32 @@
 		{
 			width: 450px;
 			height: 400px;
-            
-            margin: auto;
+			margin: auto;
 		}
 		
 		/* Hide the window icon. */
-        div#title_bar div#icon
-        {
-            display: none;
-        }
-        
-        datagridcell
-        {
-            text-align: left;
-        }
-        
-        datagridexpand
-        {
-            display: inline-block;
-            vertical-align: -3px;
-            margin-right: 2px;
-        }
-        
-        spacer
-        {
-            display: inline-block;
-            width: 25px;
-        }
+		div#title_bar div#icon
+		{
+			display: none;
+		}
+		
+		datagridcell
+		{
+			text-align: left;
+		}
+		
+		datagridexpand
+		{
+			display: inline-block;
+			vertical-align: -3px;
+			margin-right: 2px;
+		}
+		
+		spacer
+		{
+			display: inline-block;
+			width: 25px;
+		}
 	</style>
 </head>
 <body template="window">

Samples/invaders/data/background.rml

@@ -7,6 +7,16 @@
 				height: 100%;
 				z-index: -1;
 			}
+			
+			@decorator star : starfield {
+				num-layers: 5;
+				top-colour: #fffc;
+				bottom-colour: #fff3;
+				top-speed: 80.0;
+				bottom-speed: 20.0;
+				top-density: 8;
+				bottom-density: 20;
+			}
 
 			starfield
 			{
@@ -15,14 +25,7 @@
 				height: 100%;
 				z-index: 1;
 
-				star-decorator: starfield;
-				star-num-layers: 5;
-				star-top-colour: #fffc;
-				star-bottom-colour: #fff3;
-				star-top-speed: 80.0;
-				star-bottom-speed: 20.0;
-				star-top-density: 8;
-				star-bottom-density: 20;
+				decorator: star;
 			}
 		</style>
 	</head>

Samples/invaders/data/game.rml

@@ -20,6 +20,12 @@
 				width: 100%;
 				height: 100%;
 			}
+			
+			@decorator div : tiled-horizontal {
+				left-image: ../../assets/invader.tga 147px 55px 229px 0px;
+				center-image: ../../assets/invader.tga stretch 229px 55px 230px 0px;
+				right-image: ../../assets/invader.tga 231px 55px 246px 0px;
+			}
 
 			div
 			{
@@ -29,10 +35,7 @@
 
 				font-size: 20px;
 
-				background-decorator: tiled-horizontal;
-				background-left-image: ../../assets/invader.tga 147px 55px 229px 0px;
-				background-center-image: ../../assets/invader.tga stretch 229px 55px 230px 0px;
-				background-right-image: ../../assets/invader.tga 231px 55px 246px 0px;
+				decorator: div;
 			}
 
 			div#score_div
@@ -58,6 +61,14 @@
 				float: right;
 				width: 80px;
 			}
+			
+			@decorator icon : image {
+				image: ../../assets/invader.tga 0px 152px 0px 191px;
+			}
+			@decorator icon-score : icon { image-s: 434px 485px; }
+			@decorator icon-hiscore : icon { image-s: 281px 332px; }
+			@decorator icon-waves : icon { image-s: 332px 383px; }
+			@decorator icon-lives : icon { image-s: 383px 434px; }
 
 			icon
 			{
@@ -68,30 +79,26 @@
 
 				width: 51px;
 				height: 39px;
-				
-				icon-decorator: image;
-				icon-image-src: ../../assets/invader.tga;
-				icon-image-t: 152px 191px;
 			}
 
 			div#score_div icon
 			{
-				icon-image-s: 434px 485px;
+				decorator: icon-score;
 			}
 
 			div#hiscore_div icon
 			{
-				icon-image-s: 281px 332px;
+				decorator: icon-hiscore;
 			}
 
 			div#waves_div icon
 			{
-				icon-image-s: 332px 383px;
+				decorator: icon-waves;
 			}
 
 			div#lives_div icon
 			{
-				icon-image-s: 383px 434px;
+				decorator: icon-lives;
 			}
 		</style>
 	</head>

Samples/invaders/data/help.rml

@@ -17,8 +17,7 @@
 			
 			div#title_bar div#icon
 			{
-				icon-image-s: 128px 179px;
-				icon-image-t: 152px 191px;
+				decorator: image( ../../assets/invader.tga 128px 152px 179px 191px);
 			}
 		</style>
 	</head>

Samples/invaders/data/high_score.rml

@@ -13,8 +13,7 @@
 			
 			div#title_bar div#icon
 			{
-				icon-image-s: 281px 331px;
-				icon-image-t: 152px 191px;
+				decorator: image( ../../assets/invader.tga 281px 152px 331px 191px);
 			}
 			
 			datagrid
@@ -37,8 +36,7 @@
 				width: 64px;
 				height: 16px;
 				
-				defender-decorator: defender;
-				defender-image-src: high_scores_defender.tga;
+				decorator: defender( high_scores_defender.tga );
 			}			
 		</style>
 	</head>

Samples/invaders/data/main_menu.rml

@@ -10,11 +10,9 @@
 
 				margin: auto;
 			}
-			
 			div#title_bar div#icon
 			{
-				icon-image-s: 179px 230px;
-				icon-image-t: 152px 191px;
+				decorator: image( ../../assets/invader.tga 179px 152px 230px 191px);
 			}
 		</style>
 	</head>

Samples/invaders/data/options.rml

@@ -13,9 +13,7 @@
 
 			div#title_bar div#icon
 			{
-				icon-image-s: 230px 281px;
-				icon-image-t: 152px 191px;
-
+				decorator: image( ../../assets/invader.tga 230px 152px 281px 191px);
 				display: none;
 			}
 

Samples/invaders/data/pause.rml

@@ -13,8 +13,7 @@
 			
 			div#title_bar div#icon
 			{
-				icon-image-s: 332px 383px;
-				icon-image-t: 191px 231px;
+				decorator: image( ../../assets/invader.tga 332px 191px 383px 231px);
 			}
 		</style>
 	</head>

Samples/invaders/data/start_game.rml

@@ -13,8 +13,7 @@
 			
 			div#title_bar div#icon
 			{
-				icon-image-s: 230px 281px;
-				icon-image-t: 152px 191px;
+				decorator: image( ../../assets/invader.tga 230px 152px 281px 191px);
 			}
 			
 			form div

Samples/invaders/src/DecoratorInstancerDefender.cpp

@@ -33,6 +33,7 @@
 DecoratorInstancerDefender::DecoratorInstancerDefender()
 {
 	id_image_src = RegisterProperty("image-src", "").AddParser("string").GetId();
+	RegisterShorthand("decorator", "image-src", Rocket::Core::ShorthandType::FallThrough);
 }
 
 DecoratorInstancerDefender::~DecoratorInstancerDefender()

Samples/invaders/src/EventHandlerOptions.cpp

@@ -141,9 +141,9 @@ void EventHandlerOptions::ProcessEvent(Rocket::Core::Event& event, const Rocket:
 			// The 'value' parameter of an onchange event is set to the value the control would send if it was
 			// submitted; so, the empty string if it is clear or to the 'value' attribute of the control if it is set.
 			if (event.GetParameter< String >("value", "").empty())
-				bad_warning->SetProperty("display", Property(Style::Display::None));
+				bad_warning->SetProperty(PropertyId::Display, Property(Style::Display::None));
 			else
-				bad_warning->SetProperty("display", Property(Style::Display::Block));
+				bad_warning->SetProperty(PropertyId::Display, Property(Style::Display::Block));
 		}
 	}
 	else if (value == "enable_accept")

Samples/tutorial/datagrid/data/tutorial.rcss

@@ -7,18 +7,21 @@ body
 	color: white;
 }
 
+@decorator window : tiled-box 
+{
+	top-left-image: ../../../assets/invader.tga 0px 0px 133px 140px;
+	top-right-image: ../../../assets/invader.tga 136px 0px 146px 140px;
+	top-image: ../../../assets/invader.tga stretch 134px 0px 135px 140px;
+	bottom-left-image: ../../../assets/invader.tga 0px 140px 11px 151px;
+	bottom-right-image: ../../../assets/invader.tga 136px 140px 146px 151px;
+	bottom-image: ../../../assets/invader.tga stretch 11px 140px 12px 151px;
+	left-image: ../../../assets/invader.tga stretch 0px 139px 10px 140px;
+	center-image: ../../../assets/invader.tga stretch 11px 139px 12px 140px;
+}
+
 body.window
 {
-	background-decorator: tiled-box;
-	background-top-left-image: ../../../assets/invader.tga 0px 0px 133px 140px;
-	background-top-right-image: ../../../assets/invader.tga 136px 0px 146px 140px;
-	background-top-image: ../../../assets/invader.tga stretch 134px 0px 135px 140px;
-	background-bottom-left-image: ../../../assets/invader.tga 0px 140px 11px 151px;
-	background-bottom-right-image: ../../../assets/invader.tga 136px 140px 146px 151px;
-	background-bottom-image: ../../../assets/invader.tga stretch 11px 140px 12px 151px;
-	background-left-image: ../../../assets/invader.tga stretch 0px 139px 10px 140px;
-	background-center-image: ../../../assets/invader.tga stretch 11px 139px 12px 140px;
-	
+	decorator: window;
 	padding: 10px 15px;
 }
 
@@ -28,6 +31,13 @@ div#title-bar
 	top: -43px;
 }
 
+@decorator title-bar : tiled-horizontal 
+{
+	left-image: ../../../assets/invader.tga 147px 0px 229px 85px;
+	center-image: ../../../assets/invader.tga stretch 229px 0px 230px 85px;
+	right-image: ../../../assets/invader.tga 231px 0px 246px 85px;
+}
+
 div#title-bar span
 {
 	padding-left: 85px;
@@ -39,11 +49,7 @@ div#title-bar span
 	font-weight: bold;
 
 	text-shadow: 2px 2px black;
-
-	background-decorator: tiled-horizontal;
-	background-left-image: ../../../assets/invader.tga 147px 0px 229px 85px;
-	background-center-image: ../../../assets/invader.tga stretch 229px 0px 230px 85px;
-	background-right-image: ../../../assets/invader.tga 231px 0px 246px 85px;
+	decorator: title-bar;
 }
 
 div#content
@@ -62,12 +68,37 @@ scrollbarvertical
 	margin-right: -11px;
 }
 
+@decorator slidertrack : tiled-horizontal 
+{
+	top-image: ../../../assets/invader.tga 56px 199px 83px 201px;
+	center-image: ../../../assets/invader.tga stretch 56px 201px 83px 202px;
+	bottom-image: ../../../assets/invader.tga 56px 203px 83px 204px;
+}
+
 scrollbarvertical slidertrack
 {
-	background-decorator: tiled-vertical;
-	background-top-image: ../../../assets/invader.tga 56px 199px 83px 201px;
-	background-center-image: ../../../assets/invader.tga stretch 56px 201px 83px 202px;
-	background-bottom-image: ../../../assets/invader.tga 56px 203px 83px 204px;
+	decorator: slidertrack;
+}
+
+@decorator sliderbar : tiled-horizontal 
+{
+	top-image: ../../../assets/invader.tga 56px 152px 79px 175px;
+	center-image: ../../../assets/invader.tga stretch 56px 175px 79px 175px;
+	bottom-image: ../../../assets/invader.tga 56px 176px 79px 198px;
+}
+
+@decorator sliderbar-hover : sliderbar
+{
+	background-top-image-s: 80px 103px;
+	background-center-image-s: 80px 103px;
+	background-bottom-image-s: 80px 103px;
+}
+
+@decorator sliderbar-active : sliderbar
+{
+	background-top-image-s: 104px 127px;
+	background-center-image-s: 104px 127px;
+	background-bottom-image-s: 104px 127px;
 }
 
 scrollbarvertical sliderbar
@@ -76,24 +107,17 @@ scrollbarvertical sliderbar
 	width: 23px;
 	min-height: 46px;
 
-	background-decorator: tiled-vertical;
-	background-top-image: ../../../assets/invader.tga 56px 152px 79px 175px;
-	background-center-image: ../../../assets/invader.tga stretch 56px 175px 79px 175px;
-	background-bottom-image: ../../../assets/invader.tga 56px 176px 79px 198px;
+	decorator: sliderbar;
 }
 
 scrollbarvertical sliderbar:hover
 {
-	background-top-image-s: 80px 103px;
-	background-center-image-s: 80px 103px;
-	background-bottom-image-s: 80px 103px;
+	decorator: sliderbar-hover;
 }
 
 scrollbarvertical sliderbar:active
 {
-	background-top-image-s: 104px 127px;
-	background-center-image-s: 104px 127px;
-	background-bottom-image-s: 104px 127px;
+	decorator: sliderbar-active;
 }
 
 scrollbarvertical sliderarrowdec,
@@ -105,24 +129,26 @@ scrollbarvertical sliderarrowinc
 
 scrollbarvertical sliderarrowdec
 {
-	icon-decorator: image;
-	icon-image: ../../../assets/invader.tga 0px 152px 27px 176px;
+	decorator: image( ../../../assets/invader.tga 0px 152px 27px 176px );
+}
+scrollbarvertical sliderarrowdec:hover
+{
+	decorator: image( ../../../assets/invader.tga 0px 177px 27px 201px );
+}
+scrollbarvertical sliderarrowdec:active
+{
+	decorator: image( ../../../assets/invader.tga 0px 202px 27px 226px );
 }
 
 scrollbarvertical sliderarrowinc
 {
-	icon-decorator: image;
-	icon-image: ../../../assets/invader.tga 28px 152px 55px 176px;
+	decorator: image( ../../../assets/invader.tga 28px 152px 55px 176px );
 }
-
-scrollbarvertical sliderarrowdec:hover,
 scrollbarvertical sliderarrowinc:hover
 {
-	icon-image-t: 177px 201px;
+	decorator: image( ../../../assets/invader.tga 28px 177px 55px 201px );
 }
-
-scrollbarvertical sliderarrowdec:active,
 scrollbarvertical sliderarrowinc:active
 {
-	icon-image-t: 202px 226px;
+	decorator: image( ../../../assets/invader.tga 28px 202px 55px 226px );
 }

Samples/tutorial/datagrid/data/tutorial.rml

@@ -10,16 +10,15 @@
 
 			margin: auto;
 		}
-        
-        defender
-        {
-            display: block;
-            width: 64px;
-            height: 16px;
+    
+		defender
+		{
+				display: block;
+				width: 64px;
+				height: 16px;
 
-            defender-decorator: defender;
-            defender-image-src: ../../../assets/high_scores_defender.tga;
-        }
+				decorator: defender( ../../../assets/high_scores_defender.tga );
+		}
 	</style>
 </head>
 <body template="window">

Samples/tutorial/datagrid/src/DecoratorInstancerDefender.cpp

@@ -16,7 +16,8 @@
 
 DecoratorInstancerDefender::DecoratorInstancerDefender()
 {
-	RegisterProperty("image-src", "").AddParser("string");
+	id_image_src = RegisterProperty("image-src", "").AddParser("string").GetId();
+	RegisterShorthand("decorator", "image-src", Rocket::Core::ShorthandType::FallThrough);
 }
 
 DecoratorInstancerDefender::~DecoratorInstancerDefender()
@@ -28,7 +29,7 @@ Rocket::Core::Decorator* DecoratorInstancerDefender::InstanceDecorator(const Roc
 {
 	ROCKET_UNUSED(name);
 
-	const Rocket::Core::Property* image_source_property = properties.GetProperty("image-src");
+	const Rocket::Core::Property* image_source_property = properties.GetProperty(id_image_src);
 	Rocket::Core::String image_source = image_source_property->Get< Rocket::Core::String >();
 
 	DecoratorDefender* decorator = new DecoratorDefender();

Samples/tutorial/datagrid/src/DecoratorInstancerDefender.h

@@ -36,6 +36,9 @@ public:
 
 	/// Releases the instancer.
 	void Release();
+
+private:
+	Rocket::Core::PropertyId id_image_src;
 };
 
 #endif

Samples/tutorial/datagrid_tree/data/tutorial.rcss

@@ -7,18 +7,21 @@ body
 	color: white;
 }
 
+@decorator window : tiled-box 
+{
+	top-left-image: ../../../assets/invader.tga 0px 0px 133px 140px;
+	top-right-image: ../../../assets/invader.tga 136px 0px 146px 140px;
+	top-image: ../../../assets/invader.tga stretch 134px 0px 135px 140px;
+	bottom-left-image: ../../../assets/invader.tga 0px 140px 11px 151px;
+	bottom-right-image: ../../../assets/invader.tga 136px 140px 146px 151px;
+	bottom-image: ../../../assets/invader.tga stretch 11px 140px 12px 151px;
+	left-image: ../../../assets/invader.tga stretch 0px 139px 10px 140px;
+	center-image: ../../../assets/invader.tga stretch 11px 139px 12px 140px;
+}
+
 body.window
 {
-	background-decorator: tiled-box;
-	background-top-left-image: ../../../assets/invader.tga 0px 0px 133px 140px;
-	background-top-right-image: ../../../assets/invader.tga 136px 0px 146px 140px;
-	background-top-image: ../../../assets/invader.tga stretch 134px 0px 135px 140px;
-	background-bottom-left-image: ../../../assets/invader.tga 0px 140px 11px 151px;
-	background-bottom-right-image: ../../../assets/invader.tga 136px 140px 146px 151px;
-	background-bottom-image: ../../../assets/invader.tga stretch 11px 140px 12px 151px;
-	background-left-image: ../../../assets/invader.tga stretch 0px 139px 10px 140px;
-	background-center-image: ../../../assets/invader.tga stretch 11px 139px 12px 140px;
-	
+	decorator: window;
 	padding: 10px 15px;
 }
 
@@ -28,6 +31,13 @@ div#title-bar
 	top: -43px;
 }
 
+@decorator title-bar : tiled-horizontal 
+{
+	left-image: ../../../assets/invader.tga 147px 0px 229px 85px;
+	center-image: ../../../assets/invader.tga stretch 229px 0px 230px 85px;
+	right-image: ../../../assets/invader.tga 231px 0px 246px 85px;
+}
+
 div#title-bar span
 {
 	padding-left: 85px;
@@ -39,11 +49,7 @@ div#title-bar span
 	font-weight: bold;
 
 	text-shadow: 2px 2px black;
-
-	background-decorator: tiled-horizontal;
-	background-left-image: ../../../assets/invader.tga 147px 0px 229px 85px;
-	background-center-image: ../../../assets/invader.tga stretch 229px 0px 230px 85px;
-	background-right-image: ../../../assets/invader.tga 231px 0px 246px 85px;
+	decorator: title-bar;
 }
 
 div#content
@@ -62,12 +68,37 @@ scrollbarvertical
 	margin-right: -11px;
 }
 
+@decorator slidertrack : tiled-horizontal 
+{
+	top-image: ../../../assets/invader.tga 56px 199px 83px 201px;
+	center-image: ../../../assets/invader.tga stretch 56px 201px 83px 202px;
+	bottom-image: ../../../assets/invader.tga 56px 203px 83px 204px;
+}
+
 scrollbarvertical slidertrack
 {
-	background-decorator: tiled-vertical;
-	background-top-image: ../../../assets/invader.tga 56px 199px 83px 201px;
-	background-center-image: ../../../assets/invader.tga stretch 56px 201px 83px 202px;
-	background-bottom-image: ../../../assets/invader.tga 56px 203px 83px 204px;
+	decorator: slidertrack;
+}
+
+@decorator sliderbar : tiled-horizontal 
+{
+	top-image: ../../../assets/invader.tga 56px 152px 79px 175px;
+	center-image: ../../../assets/invader.tga stretch 56px 175px 79px 175px;
+	bottom-image: ../../../assets/invader.tga 56px 176px 79px 198px;
+}
+
+@decorator sliderbar-hover : sliderbar
+{
+	background-top-image-s: 80px 103px;
+	background-center-image-s: 80px 103px;
+	background-bottom-image-s: 80px 103px;
+}
+
+@decorator sliderbar-active : sliderbar
+{
+	background-top-image-s: 104px 127px;
+	background-center-image-s: 104px 127px;
+	background-bottom-image-s: 104px 127px;
 }
 
 scrollbarvertical sliderbar
@@ -76,24 +107,17 @@ scrollbarvertical sliderbar
 	width: 23px;
 	min-height: 46px;
 
-	background-decorator: tiled-vertical;
-	background-top-image: ../../../assets/invader.tga 56px 152px 79px 175px;
-	background-center-image: ../../../assets/invader.tga stretch 56px 175px 79px 175px;
-	background-bottom-image: ../../../assets/invader.tga 56px 176px 79px 198px;
+	decorator: sliderbar;
 }
 
 scrollbarvertical sliderbar:hover
 {
-	background-top-image-s: 80px 103px;
-	background-center-image-s: 80px 103px;
-	background-bottom-image-s: 80px 103px;
+	decorator: sliderbar-hover;
 }
 
 scrollbarvertical sliderbar:active
 {
-	background-top-image-s: 104px 127px;
-	background-center-image-s: 104px 127px;
-	background-bottom-image-s: 104px 127px;
+	decorator: sliderbar-active;
 }
 
 scrollbarvertical sliderarrowdec,
@@ -105,24 +129,26 @@ scrollbarvertical sliderarrowinc
 
 scrollbarvertical sliderarrowdec
 {
-	icon-decorator: image;
-	icon-image: ../../../assets/invader.tga 0px 152px 27px 176px;
+	decorator: image( ../../../assets/invader.tga 0px 152px 27px 176px );
+}
+scrollbarvertical sliderarrowdec:hover
+{
+	decorator: image( ../../../assets/invader.tga 0px 177px 27px 201px );
+}
+scrollbarvertical sliderarrowdec:active
+{
+	decorator: image( ../../../assets/invader.tga 0px 202px 27px 226px );
 }
 
 scrollbarvertical sliderarrowinc
 {
-	icon-decorator: image;
-	icon-image: ../../../assets/invader.tga 28px 152px 55px 176px;
+	decorator: image( ../../../assets/invader.tga 28px 152px 55px 176px );
 }
-
-scrollbarvertical sliderarrowdec:hover,
 scrollbarvertical sliderarrowinc:hover
 {
-	icon-image-t: 177px 201px;
+	decorator: image( ../../../assets/invader.tga 28px 177px 55px 201px );
 }
-
-scrollbarvertical sliderarrowdec:active,
 scrollbarvertical sliderarrowinc:active
 {
-	icon-image-t: 202px 226px;
+	decorator: image( ../../../assets/invader.tga 28px 202px 55px 226px );
 }

Samples/tutorial/datagrid_tree/data/tutorial.rml

@@ -17,23 +17,29 @@
 			width: 64px;
 			height: 16px;
 			
-			defender-decorator: defender;
-			defender-image-src: ../../../assets/high_scores_defender.tga;
+			decorator: defender( ../../../assets/high_scores_defender.tga );
 		}
 		
 		defender.alien_1
 		{
-			defender-image-src: ../../../assets/high_scores_alien_1.tga;
+			decorator: defender( ../../../assets/high_scores_alien_1.tga );
 		}
 		
 		defender.alien_2
 		{
-			defender-image-src: ../../../assets/high_scores_alien_2.tga;
+			decorator: defender( ../../../assets/high_scores_alien_2.tga );
 		}
 		
 		defender.alien_3
 		{
-			defender-image-src: ../../../assets/high_scores_alien_3.tga;
+			decorator: defender( ../../../assets/high_scores_alien_3.tga );
+		}
+		
+		@decorator datagridheader : tiled-horizontal 
+		{
+			left-image: ../../../assets/invader.tga 127px 192px 143px 223px;
+			center-image: ../../../assets/invader.tga stretch 143px 192px 145px 223px;
+			right-image: ../../../assets/invader.tga 145px 192px 160px 223px;
 		}
 		
 		datagridheader
@@ -42,10 +48,19 @@
 			height: 25px;
 			padding: 5px 10px 0px 10px;
 		
-			background-decorator: tiled-horizontal;
-			background-left-image: ../../../assets/invader.tga 127px 192px 143px 223px;
-			background-center-image: ../../../assets/invader.tga stretch 143px 192px 145px 223px;
-			background-right-image: ../../../assets/invader.tga 145px 192px 160px 223px;
+			decorator: datagridheader;
+		}
+		
+		@decorator datagridbody : tiled-box 
+		{
+			top-left-image: ../../../assets/invader.tga 281px 275px 292px 284px;
+			top-right-image: ../../../assets/invader.tga 294px 275px 305px 284px;
+			top-image: ../../../assets/invader.tga stretch 292px 275px 293px 284px;
+			bottom-left-image: ../../../assets/invader.tga 281px 285px 292px 296px;
+			bottom-right-image: ../../../assets/invader.tga 294px 285px 305px 296px;
+			bottom-image: ../../../assets/invader.tga stretch 292px 285px 293px 296px;
+			left-image: ../../../assets/invader.tga stretch 281px 283px 292px 284px;
+			center-image: ../../../assets/invader.tga stretch 292px 283px 293px 284px;
 		}
 		
 		datagridbody
@@ -57,15 +72,7 @@
 			margin-right: 3px;
 			padding: 0px 4px 4px 4px;
 			
-			background-decorator: tiled-box;
-			background-top-left-image: ../../../assets/invader.tga 281px 275px 292px 284px;
-			background-top-right-image: ../../../assets/invader.tga 294px 275px 305px 284px;
-			background-top-image: ../../../assets/invader.tga stretch 292px 275px 293px 284px;
-			background-bottom-left-image: ../../../assets/invader.tga 281px 285px 292px 296px;
-			background-bottom-right-image: ../../../assets/invader.tga 294px 285px 305px 296px;
-			background-bottom-image: ../../../assets/invader.tga stretch 292px 285px 293px 296px;
-			background-left-image: ../../../assets/invader.tga stretch 281px 283px 292px 284px;
-			background-center-image: ../../../assets/invader.tga stretch 292px 283px 293px 284px;
+			decorator: datagridbody;
 		}
 		
 		datagrid datagridrow:nth-child(even)
@@ -73,6 +80,25 @@
 			background: #FFFFFFA0;
 		}
 		
+		@decorator expand : image {
+			image: ../../../assets/invader.tga 3px 232px 20px 249px;
+		}
+		@decorator expand-hover : expand {
+			icon-image-s: 21px 38px;
+		}
+		@decorator expand-active : expand {
+			icon-image-s: 39px 56px;
+		}
+		@decorator collapse : expand {
+			icon-image-t: 39px 56px;
+		}
+		@decorator collapse-hover : expand-hover {
+			icon-image-t: 39px 56px;
+		}
+		@decorator collapse-active : expand-active {
+			icon-image-t: 39px 56px;
+		}
+		
 		datagridexpand
 		{
 			display: block;
@@ -81,23 +107,32 @@
 			height: 17px;
 			width: 17px;
 			
-			icon-decorator: image;
-			icon-image: ../../../assets/invader.tga 3px 232px 20px 249px;
+			decorator: expand;
 		}
 		
 		datagridexpand:hover
 		{
-			icon-image-s: 21px 38px;
+			decorator: expand-hover;
 		}
 		
 		datagridexpand:active
 		{
-			icon-image-s: 39px 56px;
+			decorator: expand-active;
 		}
 		
 		datagridexpand.collapsed
 		{
-			icon-image-t: 250px 267px;
+			decorator: collapse;
+		}
+		
+		datagridexpand.collapsed:hover
+		{
+			decorator: collapse-hover;
+		}
+		
+		datagridexpand.collapsed:active
+		{
+			decorator: collapse-active;
 		}
 	</style>
 </head>

Samples/tutorial/datagrid_tree/src/DecoratorInstancerDefender.cpp

@@ -16,7 +16,8 @@
 
 DecoratorInstancerDefender::DecoratorInstancerDefender()
 {
-	RegisterProperty("image-src", "").AddParser("string");
+	id_image_src = RegisterProperty("image-src", "").AddParser("string").GetId();
+	RegisterShorthand("decorator", "image-src", Rocket::Core::ShorthandType::FallThrough);
 }
 
 DecoratorInstancerDefender::~DecoratorInstancerDefender()
@@ -28,7 +29,7 @@ Rocket::Core::Decorator* DecoratorInstancerDefender::InstanceDecorator(const Roc
 {
 	ROCKET_UNUSED(name);
 
-	const Rocket::Core::Property* image_source_property = properties.GetProperty("image-src");
+	const Rocket::Core::Property* image_source_property = properties.GetProperty(id_image_src);
 	Rocket::Core::String image_source = image_source_property->Get< Rocket::Core::String >();
 
 	DecoratorDefender* decorator = new DecoratorDefender();

Samples/tutorial/datagrid_tree/src/DecoratorInstancerDefender.h

@@ -36,6 +36,9 @@ public:
 
 	/// Releases the instancer.
 	void Release();
+
+private:
+	Rocket::Core::PropertyId id_image_src;
 };
 
 #endif

Samples/tutorial/template/data/tutorial.rcss

@@ -7,17 +7,21 @@ body
 	color: white;
 }
 
+@decorator window : tiled-box 
+{
+	top-left-image: ../../../assets/invader.tga 0px 0px 133px 140px;
+	top-right-image: ../../../assets/invader.tga 136px 0px 146px 140px;
+	top-image: ../../../assets/invader.tga stretch 134px 0px 135px 140px;
+	bottom-left-image: ../../../assets/invader.tga 0px 140px 11px 151px;
+	bottom-right-image: ../../../assets/invader.tga 136px 140px 146px 151px;
+	bottom-image: ../../../assets/invader.tga stretch 11px 140px 12px 151px;
+	left-image: ../../../assets/invader.tga stretch 0px 139px 10px 140px;
+	center-image: ../../../assets/invader.tga stretch 11px 139px 12px 140px;
+}
+
 body.window
 {
-	background-decorator: tiled-box;
-	background-top-left-image: ../../../assets/invader.tga 0px 0px 133px 140px;
-	background-top-right-image: ../../../assets/invader.tga 136px 0px 146px 140px;
-	background-top-image: ../../../assets/invader.tga stretch 134px 0px 135px 140px;
-	background-bottom-left-image: ../../../assets/invader.tga 0px 140px 11px 151px;
-	background-bottom-right-image: ../../../assets/invader.tga 136px 140px 146px 151px;
-	background-bottom-image: ../../../assets/invader.tga stretch 11px 140px 12px 151px;
-	background-left-image: ../../../assets/invader.tga stretch 0px 139px 10px 140px;
-	background-center-image: ../../../assets/invader.tga stretch 11px 139px 12px 140px;
+	decorator: window;
 }
 
 div

Samples/tutorial/tutorial_drag/data/tutorial.rcss

@@ -16,8 +16,7 @@ icon
     padding: 60px 10px 0px 10px;
     margin: 10px;
     
-    background-decorator: image;
-    background-image: ../../../assets/present.tga 0px 0px 100px 100px;
+    decorator: image( ../../../assets/present.tga 0px 0px 100px 100px );
     
     font-size: 12px;
     text-align: center;

Samples/tutorial/tutorial_drag/src/Inventory.cpp

@@ -8,8 +8,8 @@ Inventory::Inventory(const Rocket::Core::String& title, const Rocket::Core::Vect
 	if (document != NULL)
 	{
 		document->GetElementById("title")->SetInnerRML(title);
-		document->SetProperty("left", Rocket::Core::Property(position.x, Rocket::Core::Property::PX));
-		document->SetProperty("top", Rocket::Core::Property(position.y, Rocket::Core::Property::PX));
+		document->SetProperty(Rocket::Core::PropertyId::Left, Rocket::Core::Property(position.x, Rocket::Core::Property::PX));
+		document->SetProperty(Rocket::Core::PropertyId::Top, Rocket::Core::Property(position.y, Rocket::Core::Property::PX));
 		document->Show();
 	}
 }

Source/Core/StyleSheetParser.cpp

@@ -189,7 +189,7 @@ bool StyleSheetParser::ParseDecoratorBlock(DecoratorSpecificationMap& decorator_
 		if (it != decorator_map.end())
 		{
 			// Yes, try to retrieve the property specification from the parent type, and add its property values.
-			property_specification = Factory::GetDecoratorPropertySpecification(it->first);
+			property_specification = Factory::GetDecoratorPropertySpecification(it->second.decorator_type);
 			properties = it->second.properties;
 			decorator_type = it->second.decorator_type;
 		}