doctype html
html(lang="en")
	head
		title Testing Different Sizes
		meta(charset='utf-8')
		meta(name='description', content='TimelineJS Embed')
		meta(name='apple-mobile-web-app-capable', content='yes')
		meta(name='apple-touch-fullscreen', content='yes')
		meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0')
		// CSS
		link(rel='stylesheet', href='../css/timeline.css?v1')
		//FONT
		link(rel='stylesheet', href='../css/fonts/font.default.css?v1')
		// Style
		style.
			html, body {
				height:100%;
				width:100%;
				padding: 0px;
				margin: 0px;
			}
			#timeline0, #timeline1, #timeline2, #timeline3, #timeline4 {
				height:600px;
				width:100%;
				margin-bottom:50px;
				margin-left:50px;
				//border: 1px solid #999;
			}
			#timeline0 {
				width:800px;
			}
			#timeline1 {
				width:700px;
			}
			#timeline2 {
				width:600px;
			}
			#timeline3 {
				width:500px;
			}
			#timeline4 {
				width:400px;
			}


		// HTML5 shim, for IE6-8 support of HTML elements
		//if lt IE 9
			script(src='https://html5shim.googlecode.com/svn/trunk/html5.js')

	body
		h2(style="margin-left:50px")  800px
		div#timeline0

		h2(style="margin-left:50px")  700px
		div#timeline1

		h2(style="margin-left:50px")  600px
		div#timeline2

		h2(style="margin-left:50px")  500px
		div#timeline3
		
		h2(style="margin-left:50px")  400px
		div#timeline4
		
		// JavaScript
		script(src='../js/timeline.js')
		script.
			var timeline_00 = new TL.Timeline('timeline0', 'marktwain.json', {is_embed:true});
			var timeline_01 = new TL.Timeline('timeline1', 'marktwain.json', {is_embed:true});
			var timeline_02 = new TL.Timeline('timeline2', 'marktwain.json', {is_embed:true});
			var timeline_03 = new TL.Timeline('timeline3', 'marktwain.json', {is_embed:true});
			var timeline_04 = new TL.Timeline('timeline4', 'marktwain.json', {is_embed:true});