<rml>
<head>
	<link type="text/template" href="template.rml"/>
	<title>Datagrid Tutorial</title>
	<style>
		body
		{
			width: 400px;
			height: 300px;

			margin: auto;
		}
		
		defender
		{
			display: block;
			width: 64px;
			height: 16px;
			
			defender-decorator: defender;
			defender-image-src: ../../../assets/high_scores_defender.tga;
		}
		
		defender.alien_1
		{
			defender-image-src: ../../../assets/high_scores_alien_1.tga;
		}
		
		defender.alien_2
		{
			defender-image-src: ../../../assets/high_scores_alien_2.tga;
		}
		
		defender.alien_3
		{
			defender-image-src: ../../../assets/high_scores_alien_3.tga;
		}
		
		datagridheader
		{
			width: auto;
			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;
		}
		
		datagridbody
		{
			color: black;
			text-align: center;
			
			margin-left: 4px;
			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;
		}
		
		datagrid datagridrow:nth-child(even)
		{
			background: #FFFFFFA0;
		}
		
		datagridexpand
		{
			display: block;
			
			margin: 1px 0px 1px 5px;
			height: 17px;
			width: 17px;
			
			icon-decorator: image;
			icon-image: ../../../assets/invader.tga 3px 232px 20px 249px;
		}
		
		datagridexpand:hover
		{
			icon-image-s: 21px 38px;
		}
		
		datagridexpand:active
		{
			icon-image-s: 39px 56px;
		}
		
		datagridexpand.collapsed
		{
			icon-image-t: 250px 267px;
		}
	</style>
</head>
<body template="window">
	<datagrid source="high_scores.scores">
		<col fields="name" width="40%">Pilot:</col>
		<col fields="colour" formatter="ship" width="20%">Ship:</col>
		<col fields="wave" width="20%">Wave:</col>
		<col fields="score" width="20%">Score:</col>
	</datagrid>
</body>
</rml>
