RubyGems - roda-component - Versions diffs - 0.0.10 → 0.1.0 - Mend

roda-component 0.0.10 → 0.1.0

Files changed (692) hide show

data/test/dummy/public/chat/bower/jScrollPane/scroll_to_animate.html ADDED

@@ -0,0 +1,197 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+		"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+	<head>
+		<title>jScrollPane scrollTo/ scrollBy with animation demo page</title>
+		<!-- styles specific to demo site -->
+		<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
+		<!-- styles needed by jScrollPane - include in your own sites -->
+		<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+		<style type="text/css" id="page-css">
+			/* Styles specific to this particular page */
+			.scroll-pane
+			{
+				width: 100%;
+				height: 200px;
+				overflow: auto;
+			}
+			div#forms
+			{
+				overflow: hidden;
+			}
+			form
+			{
+				float: left;
+				width: 50%;
+				padding: 0 0 1em;
+			}
+		</style>
+		<!-- latest jQuery direct from google's CDN -->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- the mousewheel plugin -->
+		<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
+		<!-- the jScrollPane script -->
+		<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
+		<!-- scripts specific to this demo site -->
+		<script type="text/javascript" src="script/demo.js"></script>
+		<script type="text/javascript" id="sourcecode">
+			$(function()
+			{
+				var pane = $('.scroll-pane');
+				pane.jScrollPane(
+					{
+						showArrows: true,
+						animateScroll: true
+					}
+				);
+				var api = pane.data('jsp');
+				$('#but-scroll-to').bind(
+					'click',
+					function()
+					{
+						// Note, there is also scrollToX and scrollToY methods if you only
+						// want to scroll in one dimension
+						api.scrollTo(parseInt($('#toX').val()), parseInt($('#toY').val()));
+						return false;
+					}
+				);
+				$('#but-scroll-by').bind(
+					'click',
+					function()
+					{
+						// Note, there is also scrollByX and scrollByY methods if you only
+						// want to scroll in one dimension
+						api.scrollBy(parseInt($('#byX').val()), parseInt($('#byY').val()));
+						return false;
+					}
+				);
+			});
+		</script>
+	</head>
+	<body>
+		<div id="top-nav">
+			<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="index.html#examples">Examples</a></li>
+				<li><a href="index.html#themes">Themes</a></li>
+				<li><a href="index.html#usage">How to use</a></li>
+				<li><a href="faqs.html">FAQs</a></li>
+				<li><a href="known_issues.html">Known issues</a></li>
+				<li><a href="index.html#support">Support</a></li>
+				<li><a href="index.html#download">Download</a></li>
+			</ul>
+		</div>
+		<div id="container">
+			<h1>jScrollPane - scrollTo/ scrollBy with animation page</h1>
+			<p>
+				This example extends the basic <a href="scroll_to.html">scrollTo/ scrollBy</a> demo and passes
+				<strong><a href="settings.html#animateScroll">animateScroll</a>: true</strong> in the settings.
+				This means that when you call <a href="api.html#scrollTo">scrollTo</a> or <a href="api.html#scrollBy">
+				scrollBy</a> the transition to the new state is animated.
+			</p>
+			<p>
+				Note that the <a href="api.html#animate">animate</a> function which is called is a property on the
+				jScrollPane API method. This means that you are free to overwrite it if you want to implement custom
+				animation settings for your paricular use case. If you just want to tweak the speed and easing of the
+				default animation then you can use the <a href="settings.html#animateDuration">animateDuration</a> and
+				<a href="settings.html#animateEase">animateEase</a> settings properties.
+			</p>
+			<div id="forms">
+				<form>
+					<fieldset>
+						<legend>scrollTo functionality</legend>
+						<label for="toX">To x:</label>
+						<input type="text" id="toX" name="toX" value="0" />
+						<label for="toY">To y:</label>
+						<input type="text" id="toY" name="toY" value="0" />
+						<input type="submit" id="but-scroll-to" value="Scroll to" />
+					</fieldset>
+				</form>
+				<form>
+					<fieldset>
+						<legend>scrollBy functionality</legend>
+						<label for="byX">By x:</label>
+						<input type="text" id="byX" name="byX" value="0" />
+						<label for="byY">By y:</label>
+						<input type="text" id="byY" name="byY" value="0" />
+						<input type="submit" id="but-scroll-by" value="Scroll by" />
+					</fieldset>
+				</form>
+			</div>
+			<div class="scroll-pane">
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+				<p style="width: 900px;">
+					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+				</p>
+				<p>
+					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
+					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
+					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
+					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
+					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
+					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
+					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
+					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
+					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
+					id mollis nisi. Donec fermentum vehicula porta.
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
+					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
+					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
+					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
+					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+					luctus, metus
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+				</p>
+			</div>
+			<h2>Page javascript</h2>
+			<div id="sourcecode-display">
+				<p>The contents of this div will be replaced by the javascript added to this page</p>
+			</div>
+			<h2>Page CSS</h2>
+			<div id="css-display">
+				<p>The contents of this div will be replaced by the CSS added to this page</p>
+			</div>
+		</div>
+	</body>
+</html>

data/test/dummy/public/chat/bower/jScrollPane/settings.html ADDED

@@ -0,0 +1,202 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+		"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+	<head>
+		<title>jScrollPane - settings object documentation</title>
+		<!-- styles specific to demo site -->
+		<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
+		<!-- latest jQuery direct from google's CDN -->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- scripts specific to this demo site -->
+		<script type="text/javascript" src="script/demo.js"></script>
+	</head>
+	<body>
+		<div id="top-nav">
+			<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="index.html#examples">Examples</a></li>
+				<li><a href="index.html#themes">Themes</a></li>
+				<li><a href="index.html#usage">How to use</a></li>
+				<li><a href="faqs.html">FAQs</a></li>
+				<li><a href="known_issues.html">Known issues</a></li>
+				<li><a href="index.html#support">Support</a></li>
+				<li><a href="index.html#download">Download</a></li>
+			</ul>
+		</div>
+		<div id="container">
+			<h1>jScrollPane - settings object documentation</h1>
+			<p>
+				This page details the various options that you can pass into the settings object when you initialise
+				jScrollPane. Note that there is also a number of changes you can make through the <a href="api.html">
+				API</a> after the scrollpane is already initialised and a number of <a href="events.html">events</a> you
+				can listen to.
+			</p>
+			<h2 id="showArrows">showArrows <span class="setting-type">- boolean (default false)</span></h2>
+			<p>
+				Whether arrows should be shown on the generated scroll pane. When set to false only the scrollbar track
+				and drag will be shown, if set to true then arrows buttons will also be shown. <a href="arrows.html">
+				Demo</a>.
+			</p>
+			<h2 id="maintainPosition">maintainPosition <span class="setting-type">- boolean (default true)</span></h2>
+			<p>
+				Whether the scrollpane should attempt to maintain it's position whenever it is reinitialised. If true
+				then the viewport of the scrollpane will remain the same when it is reinitialised, if false then the
+				viewport will jump back up to the top when the scrollpane is reinitialised. See also
+				<a href="#stickToBottom">stickToBottom</a> and <a href="#stickToRight">stickToRight</a>.
+			</p>
+			<h2 id="stickToBottom">stickToBottom<span class="setting-type">- boolean (default false)</span></h2>
+			<p>
+				If <a href="#maintainPosition">maintainPosition</a> is true and the scrollpane is scrolled to the
+				bottom then the scrollpane then the scrollpane will remain scrolled to the bottom even if new content
+				is added to the pane which makes it taller.
+			</p>
+			<h2 id="stickToRight">stickToRight<span class="setting-type">- boolean (default false)</span></h2>
+			<p>
+				If <a href="#maintainPosition">maintainPosition</a> is true and the scrollpane is scrolled to its
+				right edge then the scrollpane then the scrollpane will remain scrolled to the right edge even if new
+				content is added to the pane which makes it wider.
+			</p>
+			<h2 id="autoReinitialise">autoReinitialise <span class="setting-type">- boolean (default false)</span></h2>
+			<p>
+				Whether jScrollPane should automatically reinitialise itself periodically after you have initially
+				initialised it. This can help with instances when the size of the content of the scrollpane (or the
+				surrounding element) changes. However, it does involve an overhead of running a javascript function on
+				a timer so it is recommended only to activate where necessary. <a href="auto_reinitialise.html">Demo</a>.
+			</p>
+			<h2 id="autoReinitialiseDelay">autoReinitialiseDelay <span class="setting-type">- int (default 500)</span></h2>
+			<p>
+				The number of milliseconds between each reinitialisation (if <a href="#autoReinitialise">autoReinitialise</a>
+				is true).
+			</p>
+			<h2 id="verticalDragMinHeight">verticalDragMinHeight <span class="setting-type">- int (default 0)</span></h2>
+			<p>
+				The smallest height that the vertical drag can have. The size of the drag elements is based on the
+				proportion of the size of the content to the size of the viewport but is contrained within the minimum
+				and maximum dimensions given. <a href="drag_size.html">Demo</a>.
+			</p>
+			<h2 id="verticalDragMaxHeight">verticalDragMaxHeight <span class="setting-type">- int (default 99999)</span></h2>
+			<p>
+				See <a href="#verticalDragMinHeight">verticalDragMinHeight</a>.
+			</p>
+			<h2 id="horizontalDragMinWidth">horizontalDragMinWidth <span class="setting-type">- int (default 0)</span></h2>
+			<p>
+				See <a href="#verticalDragMinHeight">verticalDragMinHeight</a>.
+			</p>
+			<h2 id="horizontalDragMaxWidth">horizontalDragMaxWidth <span class="setting-type">- int (default 99999)</span></h2>
+			<p>
+				See <a href="#verticalDragMinHeight">verticalDragMinHeight</a>.
+			</p>
+			<h2 id="contentWidth">contentWidth <span class="setting-type">- int (default undefined)</span></h2>
+			<p>
+				The width of the content of the scroll pane. The default value of undefined will allow jScrollPane to
+				calculate the width of it's content. However, in some cases you will want to disable this (e.g. to
+				prevent horizontal scrolling or where the calculation of the size of the content doesn't return reliable
+				results)
+			</p>
+			<h2 id="animateScroll">animateScroll <span class="setting-type">- boolean (default false)</span></h2>
+			<p>
+				Whether to use animation when calling <a href="api.html#scrollTo">scrollTo</a> or <a href="api.html#scrollBy">
+				scrollBy</a>. You can control the animation speed and easing by using the <a href="#animateDuration">
+				animateDuration</a> and <a href="#animateEase">animateEase</a> settings or if you want to exercise more
+				complete control then you can override the <a href="api.html#animate">animate</a> API method.
+				<a href="scroll_to_animate.html">Demo</a>.
+			</p>
+			<h2 id="animateDuration">animateDuration <span class="setting-type">- int (default 300)</span></h2>
+			<p>
+				The number of milliseconds taken to animate to a new position (see <a href="#animateScroll">animateScroll
+				</a>).
+			</p>
+			<h2 id="animateEase">animateEase <span class="setting-type">- string (default 'linear')</span></h2>
+			<p>
+				The type of easing to use when animating to a new position (see <a href="#animateScroll">animateScroll
+				</a> and <a href="http://api.jquery.com/animate/#easing">easing</a>).
+			</p>
+			<h2 id="hijackInternalLinks">hijackInternalLinks <span class="setting-type">- boolean (default false)</span></h2>
+			<p>
+				Whether internal links on the page should be hijacked so that if they point so content within a
+				jScrollPane then they automatically scroll the jScrollPane to the correct place. <a href="anchors.html">
+				Demo</a>.
+			</p>
+			<h2 id="verticalGutter">verticalGutter <span class="setting-type">- int (default 4)</span></h2>
+			<p>
+				The amount of space between the side of the content and the vertical scrollbar.
+			</p>
+			<h2 id="horizontalGutter">horizontalGutter <span class="setting-type">- int (default 4)</span></h2>
+			<p>
+				The amount of space between the bottom of the content and the horizontal scrollbar.
+			</p>
+			<h2 id="mouseWheelSpeed">mouseWheelSpeed <span class="setting-type">- int (default 10)</span></h2>
+			<p>
+				A multiplier which is used to control the amount that the scrollpane scrolls each time the mouse wheel
+				is turned. If a recent version of the mousewheel plugin is used then the `deltaFactor` from that is used
+				to get a [more reliable](https://github.com/brandonaaron/jquery-mousewheel#getting-the-scroll-distance)
+				indication of how far the user wanted to scroll.
+			</p>
+			<h2 id="arrowButtonSpeed">arrowButtonSpeed <span class="setting-type">- int (default 10)</span></h2>
+			<p>
+				A multiplier which is used to control the amount that the scrollpane scrolls each time on of the arrow
+				buttons is pressed.
+			</p>
+			<h2 id="arrowRepeatFreq">arrowRepeatFreq <span class="setting-type">- int (default 100)</span></h2>
+			<p>
+				The number of milliseconds between each repeated scroll event when the mouse is held down over one of
+				the arrow keys.
+			</p>
+			<h2 id="arrowScrollOnHover">arrowScrollOnHover <span class="setting-type">- boolean (default false)</span></h2>
+			<p>
+				Whether the arrow buttons should cause the jScrollPane to scroll while you are hovering over them.
+				<a href="arrow_hover.html">Demo</a>.
+			</p>
+			<h2 id="verticalArrowPositions">
+				verticalArrowPositions <span class="setting-type">- string [split|before|after|os] (default split)</span>
+			</h2>
+			<p>
+				Where the vertical arrows should appear relative to the vertical track. <a href="arrow_positions.html">
+				Demo</a>.
+			</p>
+			<h2 id="horizontalArrowPositions">
+				horizontalArrowPositions <span class="setting-type">- string [split|before|after|os] (default split)</span>
+			</h2>
+			<p>
+				Where the horizontal arrows should appear relative to the horizontal track. <a href="arrow_positions.html">
+				Demo</a>.
+			</p>
+			<h2 id="enableKeyboardNavigation">
+				enableKeyboardNavigation <span class="setting-type">- boolean (default true)</span>
+			</h2>
+			<p>
+				Whether keyboard navigation should be enabled (e.g. whether the user can focus the scrollpane and then
+				use the arrow (and other) keys to navigate around.
+			</p>
+			<h2 id="hideFocus">
+				hideFocus <span class="setting-type">- boolean (default false)</span>
+			</h2>
+			<p>
+				Whether the focus outline should be hidden in all browsers. For best accessibility you should not change
+				this option. You can style the outline with the CSS property outline and outline-offset.
+			</p>
+			<h2 id="clickOnTrack">
+				clickOnTrack <span class="setting-type">- boolean (default true)</span>
+			</h2>
+			<p>
+				Whether clicking on the track (e.g. the area behind the drag) should scroll towards the point clicked on.
+				Defaults to true as this is the native behaviour in these situations.
+			</p>
+			<h2 id="trackClickSpeed">trackClickSpeed <span class="setting-type">- int (default 30)</span></h2>
+			<p>
+				A multiplier which is used to control the amount that the scrollpane scrolls each trackClickRepeatFreq
+				while the mouse button is held down over the track.
+			</p>
+			<h2 id="trackClickRepeatFreq">trackClickRepeatFreq <span class="setting-type">- int (default 100)</span></h2>
+			<p>
+				The number of milliseconds between each repeated scroll event when the mouse is held down over the
+				track.
+			</p>
+		</div>
+	</body>
+</html>

data/test/dummy/public/chat/bower/jScrollPane/short.html ADDED

@@ -0,0 +1,82 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+		"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+	<head>
+		<title>Short jScrollPane demo</title>
+		<!-- styles specific to demo site -->
+		<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
+		<!-- styles needed by jScrollPane - include in your own sites -->
+		<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+		<style type="text/css" id="page-css">
+			/* Styles specific to this particular page */
+			.scroll-pane
+			{
+				width: 100%;
+				max-height: 200px;
+				overflow: auto;
+			}
+		</style>
+		<!-- latest jQuery direct from google's CDN -->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- the mousewheel plugin -->
+		<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
+		<!-- the jScrollPane script -->
+		<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
+		<!-- scripts specific to this demo site -->
+		<script type="text/javascript" src="script/demo.js"></script>
+		<script type="text/javascript" id="sourcecode">
+			$(function()
+			{
+				$('.scroll-pane').jScrollPane();
+			});
+		</script>
+	</head>
+	<body>
+		<div id="top-nav">
+			<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="index.html#examples">Examples</a></li>
+				<li><a href="index.html#themes">Themes</a></li>
+				<li><a href="index.html#usage">How to use</a></li>
+				<li><a href="faqs.html">FAQs</a></li>
+				<li><a href="known_issues.html">Known issues</a></li>
+				<li><a href="index.html#support">Support</a></li>
+				<li><a href="index.html#download">Download</a></li>
+			</ul>
+		</div>
+		<div id="container">
+			<h1>jScrollPane - demo page showing "no scroll necessary"</h1>
+			<p>
+				This demonstration shows how jScrollPane won't add scrollbars if you apply it to an element which
+				doesn't require scrolling.
+			</p>
+			<div class="scroll-pane">
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+			</div>
+			<h2>Page javascript</h2>
+			<div id="sourcecode-display">
+				<p>The contents of this div will be replaced by the javascript added to this page</p>
+			</div>
+			<h2>Page CSS</h2>
+			<div id="css-display">
+				<p>The contents of this div will be replaced by the CSS added to this page</p>
+			</div>
+		</div>
+	</body>
+</html>