<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>YUI 3.x: CSS Fonts Contextual Example</title>
    <link rel="stylesheet" href="{{yuiBuildUrl}}/cssreset/cssreset.css" type="text/css">
    <link rel="stylesheet" href="{{yuiBuildUrl}}/cssfonts-context/cssfonts-context.css" type="text/css">
    <script src="{{yuiSeedUrl}}"></script>
</head>
<body>

	<div class="yui3-cssfonts">
        <br>
        ************************************************************************************************************************************************
		<h1>In Context</h1>

		<h1>This is a H1 element.</h1>
		<h2>This is a H2 element.</h2>
		<h3>This is a H3 element.</h3>
		<h4>This is a H4 element.</h4>
		<h5>This is a H5 element.</h5>
		<h6>This is a H6 element.</h6>

		<ul>
			<li>This is a LI in a UL</li>
		</ul>

		<ol>
			<li>This is a LI in a UL</li>
		</ol>

		<dl>
			<dt>This is a DT in a DL</dt>
			<dd>This is a DD in a DL</dd>
		</dl>

		<form>
			<input type="text" value="This is an INPUT type TEXT in a FORM"/>

			<select>
				<option>This is an OPTION in a SELECT</option>
				<option>This is an OPTION in a SELECT</option>
				<optgroup>
					<option>This is an OPTION in a OPTGROUP in a SELECT</option>
					<option>This is an OPTION in a OPTGROUP in a SELECT</option>
				</optgroup>
				<option>This is an OPTION in a SELECT</option>
			</select>

			<textarea name="ta1">This is text in a TEXTAREA in a FORM</textarea>

			<fieldset>
				<textarea name="ta2">This is text in a TEXTAREA in a FIELDSET in a FORM</textarea>
			</fieldset>

			<button>This is a BUTTON</button>

		</form>

		<p>This paragraph contains a bunch of phrase elements. Up first in an <a href="test">[A]nchor</a>, followed by an <abbr title="test">ABBR with a title value</abbr>, followed by an <acronym title="test">ACRONYM with a title value</acronym>, followed by an <address>ADDRESS</address>, followed by a <cite>CITE</cite> element, followed by a <code>CODE</code> element, followed by a <del>DEL</del> element, followed by a <em>EM</em> element, followed by a <ins>INS</ins> element, followed by a <kbd>KBD</kbd> element, followed by a <q>Q</q> element, followed by a <samp>SAMP</samp> element, followed by a <span>SPAN</span> element, followed by a <strong>STRONG</strong> element, followed by a <tt>TT</tt> element, followed by a <var>VAR</var> element, all within a containing P.</p>

		<blockquote>This is a BLOCKQUOTE element.</blockquote>

		<table>
			<caption>This is a CAPTION in a TABLE</caption>
			<thead>
				<tr>
					<th>This is a TH in a TR in a THEAD in a TABLE</th>
					<td>This is a TD in a TR in a THEAD in a TABLE</td>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th>This is a TH in a TR in a TFOOT in a TABLE</th>
					<td>This is a TD in a TR in a TFOOT in a TABLE</td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<th>This is a TH in a TR in a TBODY in a TABLE</th>
					<td>This is a TD in a TR in a TBODY in a TABLE</td>
				</tr>
			</tbody>
		</table>

	</div>

	<div>
        <br>
        ************************************************************************************************************************************************
		<h1>Out of Context</h1>

		<h1>This is a H1 element.</h1>
		<h2>This is a H2 element.</h2>
		<h3>This is a H3 element.</h3>
		<h4>This is a H4 element.</h4>
		<h5>This is a H5 element.</h5>
		<h6>This is a H6 element.</h6>

		<ul>
			<li>This is a LI in a UL</li>
		</ul>

		<ol>
			<li>This is a LI in a UL</li>
		</ol>

		<dl>
			<dt>This is a DT in a DL</dt>
			<dd>This is a DD in a DL</dd>
		</dl>

		<form>
			<input type="text" value="This is an INPUT type TEXT in a FORM"/>

			<select>
				<option>This is an OPTION in a SELECT</option>
				<option>This is an OPTION in a SELECT</option>
				<optgroup>
					<option>This is an OPTION in a OPTGROUP in a SELECT</option>
					<option>This is an OPTION in a OPTGROUP in a SELECT</option>
				</optgroup>
				<option>This is an OPTION in a SELECT</option>
			</select>

			<textarea name="ta1">This is text in a TEXTAREA in a FORM</textarea>

			<fieldset>
				<textarea name="ta2">This is text in a TEXTAREA in a FIELDSET in a FORM</textarea>
			</fieldset>

			<button>This is a BUTTON</button>

		</form>

		<p>This paragraph contains a bunch of phrase elements. Up first in an <a href="test">[A]nchor</a>, followed by an <abbr title="test">ABBR with a title value</abbr>, followed by an <acronym title="test">ACRONYM with a title value</acronym>, followed by an <address>ADDRESS</address>, followed by a <cite>CITE</cite> element, followed by a <code>CODE</code> element, followed by a <del>DEL</del> element, followed by a <em>EM</em> element, followed by a <ins>INS</ins> element, followed by a <kbd>KBD</kbd> element, followed by a <q>Q</q> element, followed by a <samp>SAMP</samp> element, followed by a <span>SPAN</span> element, followed by a <strong>STRONG</strong> element, followed by a <tt>TT</tt> element, followed by a <var>VAR</var> element, all within a containing P.</p>

		<blockquote>This is a BLOCKQUOTE element.</blockquote>

		<table>
			<caption>This is a CAPTION in a TABLE</caption>
			<thead>
				<tr>
					<th>This is a TH in a TR in a THEAD in a TABLE</th>
					<td>This is a TD in a TR in a THEAD in a TABLE</td>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th>This is a TH in a TR in a TFOOT in a TABLE</th>
					<td>This is a TD in a TR in a TFOOT in a TABLE</td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<th>This is a TH in a TR in a TBODY in a TABLE</th>
					<td>This is a TD in a TR in a TBODY in a TABLE</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
