{
	
	/*
		This time we have a slide with two tracks (a style track and a cue track), 
		so we needed to define it as a set.
	*/
	
	"tracks":[
		
		/*
			This is the cue track. We've put this track first because it 
			will cause everything to pause immediately before processing the 3rd style slide.
			(Even though they're at the same time).
		*/
		
		[
			{
				
				/*
					"wait-at" is exactly the same as "start". It's required by cue
					points as it uniquely identifies these tracks as cue tracks.
				*/
				
				"wait-at":"60%",
				
				/*
					"cued-by" and "event" are optional. Basically, they let you specify a
					selector and an event. When the named event runs on any element targeted by the selector 
					then the slide will be cued. You can also completely ignore this and use element.cue()
					instead, or use both. There's nothing particularly special about either!
					
					All the below does is call addEventListener on those selected 
					elements, which in turn calls element.cue().
					
				*/
				"cued-by":"#click-to-continue",
				"event":"mousedown"
			}
		],
		
		/*
			Below is the style track - it's very similar to the other example
			only instead we're explicitly stating some start times/ durations 
			so we can trigger two of them at the same time - the button fades out
			and the message shows up at the same time.
			
			It is continuing to spread the undefined start times evenly.
			
			E.g. ".tipTitle" starts at 30%. ".tipMessage" is 40% long.
			
		*/
		
		[
			{
				"animation":"tipUp"
			},
			{
				"selector":".tipTitle",
				"animation":"titleIn"
			},
			{
				"start":"60%",
				"duration":"40%",
				"selector":"#click-to-continue",
				"animation":"buttonOut"
			},
			{
				"start":"60%",
				"selector":".tipMessage",
				"animation":"messageUp"
			}
		]
		
	]	
}