<div id="typoheadings" class="yjsg-row">
	<h2 class="yjsg-center">Headings</h2>
	<br />
	<br />
	<div class="yjsg-col-1-3">
		<h1>h1. Heading 1</h1>
		<p>
			Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet  faucibus.
		</p>
	</div>
	<div class="yjsg-col-1-3">
		<h2>h2. Heading 2</h2>
		<p>
			Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet  faucibus.
		</p>
	</div>
	<div class="yjsg-col-1-3">
		<h3>h3. Heading 3</h3>
		<p>
			Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet  faucibus.
		</p>
	</div>
</div>

<div class="yjsg-row">
	<div class="yjsg-col-1-3">
		<h4>h4. Heading 4</h4>
		<p>
			Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet  faucibus.
		</p>
	</div>
	<div class="yjsg-col-1-3">
		<h5>h5. Heading 5</h5>
		<p>
			Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet  faucibus.
		</p>
	</div>
	<div class="yjsg-col-1-3">
		<h6>h6. Heading 6</h6>
		<p>
			Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet  faucibus.
		</p>
	</div>
</div>
<hr>


<div class="yjsg-row">
	<h2 class="yjsg-center">Big headings</h2>
	<div class="yjsg-col-1">
		<h2 class="yjsg-font-jumbo">Jumbo font</h2>
		<h4>Add class <code> .yjsg-font-jumbo </code></h4>
		<p>
			Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet  faucibus.
		</p>
	</div>
	<div class="yjsg-col-1">
		<h2 class="yjsg-font-mega">Mega font</h2>
		<h4>Add class <code> .yjsg-font-mega </code></h4>
		<p>
			Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet  faucibus.
		</p>
	</div>

</div>
<hr>

<div id="typolists" class="yjsg-row">
	<h2 class="yjsg-center">Lists</h2>
	<br />
	<br />
	<div class="yjsg-col-1-3">
		<h3>Default</h3>
		<ul>
			<li>Lorem ipsum dolor sit amet</li>
			<li>Consectetur adipiscing elit</li>
			<li>Integer molestie lorem at massa
				<ul>
					<li>Phasellus iaculis neque</li>
					<li>Purus sodales ultricies</li>
					<li>Vestibulum laoreet porttitor sem</li>
					<li>Ac tristique libero volutpat at</li>
				</ul>
			</li>
			<li>Facilisis in pretium nisl aliquet</li>
			<li>Nulla volutpat aliquam velit</li>
		</ul>
	</div>
	<div class="yjsg-col-1-3">
		<h3>Ordered</h3>
		<ol>
			<li>Lorem ipsum dolor sit amet</li>
			<li>Consectetur adipiscing elit</li>
			<li>Integer molestie lorem at massa
				<ul>
					<li>Phasellus iaculis neque</li>
					<li>Purus sodales ultricies</li>
					<li>Vestibulum laoreet porttitor sem</li>
					<li>Ac tristique libero volutpat at</li>
				</ul>
			</li>
			<li>Facilisis in pretium nisl aliquet</li>
			<li>Nulla volutpat aliquam velit</li>
		</ol>
	</div>
	<div class="yjsg-col-1-3">
		<h3>Unstyled - add class <small><code> .unstyled </code></small></h3>
		<ul class="unstyled">
			<li>Lorem ipsum dolor sit amet</li>
			<li>Consectetur adipiscing elit</li>
			<li>Integer molestie lorem at massa
				<ul>
					<li>Phasellus iaculis neque</li>
					<li>Purus sodales ultricies</li>
					<li>Vestibulum laoreet porttitor sem</li>
					<li>Ac tristique libero volutpat at</li>
				</ul>
			</li>
			<li>Facilisis in pretium nisl aliquet</li>
			<li>Nulla volutpat aliquam velit</li>
		</ul>
	</div>
</div>
<hr>
<div class="yjsg-row">
	<h2 class="yjsg-center"> Custom Lists</h2>
	<br />
	<br />
	<div class="yjsg-col-1-4">
		<h4>Add class <code> .video </code></h4>
		<ul class="video">
			<li>Lorem ipsum dolor sit amet</li>
			<li>Consectetur adipiscing elit</li>
			<li>Integer molestie lorem at </li>
			<li>Facilisis in pretium nisl aliquet</li>
			<li>Nulla volutpat aliquam velit</li>
		</ul>
	</div>
	<div class="yjsg-col-1-4">
		<h4>Add class <code> .check </code></h4>
		<ul class="check">
			<li>Lorem ipsum dolor sit amet</li>
			<li>Consectetur adipiscing elit</li>
			<li>Integer molestie lorem at </li>
			<li>Facilisis in pretium nisl aliquet</li>
			<li>Nulla volutpat aliquam velit</li>
		</ul>
	</div>
	<div class="yjsg-col-1-4">
		<h4>Add class <code> .star </code></h4>
		<ul class="star">
			<li>Lorem ipsum dolor sit amet</li>
			<li>Consectetur adipiscing elit</li>
			<li>Integer molestie lorem at </li>
			<li>Facilisis in pretium nisl aliquet</li>
			<li>Nulla volutpat aliquam velit</li>
		</ul>
	</div>
	<div class="yjsg-col-1-4">
		<h4>Add class <code> .yjt_iconlist </code></h4>
		<ul class="yjt_iconlist">
			<li class="fa fa-book">Using <code>.fa fa-book</code> class </li>
			<li class="fa fa-flag">Consectetur adipiscing elit</li>
			<li class="fa fa-fire">Integer molestie lorem at massa</li>
			<li class="fa fa-globe">Facilisis in pretium nisl aliquet</li>
			<li class="fa fa-camera">Nulla volutpat aliquam velit</li>
		</ul>
	</div>
</div>

<hr>
<div id="typobuttons" class="yjsg-row">
	<h2 class="yjsg-center">Buttons</h2>
	<br />
	<div class="yjsg-col-1">
		<h3>Button sizes</h3>
		<hr>
		<button type="button" class="yjsg-button-blarge">Large button</button>
		<button type="button" class="yjsg-button-bmedium">Medium button</button>
		<button type="button" class="yjsg-button">Default button</button>
		<button type="button" class="yjsg-button-bsmall">Small button</button>
	</div>
	<div class="yjsg-col-1">
		<h3>Button colors</h3>
		<hr>
		<button type="button" class="yjsg-button-color">Default color</button>
		<button type="button" class="yjsg-button-blue">Blue button</button>
		<button type="button" class="yjsg-button-red">Red button</button>
		<button type="button" class="yjsg-button-green">Green button</button>
		<button type="button" class="yjsg-button-yellow">Yellow button</button>
		<button type="button" class="yjsg-button-dark">Dark button</button>
		<button type="button" class="yjsg-button-gray">Gray button</button>
	</div>
</div>
<div class="yjsg-row">
	<div class="yjsg-col-1">
		<h3>Large colored buttons</h3>
		<hr>
		<button type="button" class="yjsg-button-color-blarge">Default color</button>
		<button type="button" class="yjsg-button-blue-blarge">Blue button</button>
		<button type="button" class="yjsg-button-red-blarge">Red button</button>
		<button type="button" class="yjsg-button-green-blarge">Green button</button>
		<button type="button" class="yjsg-button-yellow-blarge">Yellow button</button>
		<button type="button" class="yjsg-button-dark-blarge">Dark button</button>
		<button type="button" class="yjsg-button-gray-blarge">Gray button</button>
	</div>
	<div class="yjsg-col-1">
		<h3>Medium colored buttons</h3>
		<hr>
		<button type="button" class="yjsg-button-color-bmedium">Default color</button>
		<button type="button" class="yjsg-button-blue-bmedium">Blue button</button>
		<button type="button" class="yjsg-button-red-bmedium">Red button</button>
		<button type="button" class="yjsg-button-green-bmedium">Green button</button>
		<button type="button" class="yjsg-button-yellow-bmedium">Yellow button</button>
		<button type="button" class="yjsg-button-dark-bmedium">Dark button</button>
		<button type="button" class="yjsg-button-gray-bmedium">Gray button</button>
	</div>
	<div class="yjsg-col-1">
		<h3>Small colored buttons</h3>
		<hr>
		<button type="button" class="yjsg-button-color-bsmall">Default color</button>
		<button type="button" class="yjsg-button-blue-bsmall">Blue button</button>
		<button type="button" class="yjsg-button-red-bsmall">Red button</button>
		<button type="button" class="yjsg-button-green-bsmall">Green button</button>
		<button type="button" class="yjsg-button-yellow-bsmall">Yellow button</button>
		<button type="button" class="yjsg-button-dark-bsmall">Dark button</button>
		<button type="button" class="yjsg-button-gray-bsmall">Gray button</button>
	</div>
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h3 class="yjsg-sub-heading">markup:</h3>
		[yjsgpre pretty="1" scroll="1"]
		<button type="button" class="yjsg-button-blarge">Large button</button>
		<button type="button" class="yjsg-button-bmedium">Medium button</button>
		<button type="button" class="yjsg-button">Default</button>
		<button type="button" class="yjsg-button-bsmall">Small button</button>
		<button type="button" class="yjsg-button-color">Default color</button>
		<button type="button" class="yjsg-button-blue">Blue button</button>
		<button type="button" class="yjsg-button-red">Red button</button>
		<button type="button" class="yjsg-button-green">Green button</button>
		<button type="button" class="yjsg-button-yellow">Yellow button</button>
		<button type="button" class="yjsg-button-dark">Dark button</button>
		<button type="button" class="yjsg-button-gray">Gray button</button>
		<button type="button" class="yjsg-button-color-blarge">Default color</button>
		<button type="button" class="yjsg-button-blue-blarge">Blue button</button>
		<button type="button" class="yjsg-button-red-blarge">Red button</button>
		<button type="button" class="yjsg-button-green-blarge">Green button</button>
		<button type="button" class="yjsg-button-yellow-blarge">Yellow button</button>
		<button type="button" class="yjsg-button-dark-blarge">Dark button</button>
		<button type="button" class="yjsg-button-gray-blarge">Gray button</button>
		<button type="button" class="yjsg-button-color-bmedium">Default color</button>
		<button type="button" class="yjsg-button-blue-bmedium">Blue button</button>
		<button type="button" class="yjsg-button-red-bmedium">Red button</button>
		<button type="button" class="yjsg-button-green-bmedium">Green button</button>
		<button type="button" class="yjsg-button-yellow-bmedium">Yellow button</button>
		<button type="button" class="yjsg-button-dark-bmedium">Dark button</button>
		<button type="button" class="yjsg-button-gray-bmedium">Gray button</button>
		<button type="button" class="yjsg-button-color-bsmall">Default color</button>
		<button type="button" class="yjsg-button-blue-bsmall">Blue button</button>
		<button type="button" class="yjsg-button-red-bsmall">Red button</button>
		<button type="button" class="yjsg-button-green-bsmall">Green button</button>
		<button type="button" class="yjsg-button-yellow-bsmall">Yellow button</button>
		<button type="button" class="yjsg-button-dark-bsmall">Dark button</button>
		<button type="button" class="yjsg-button-gray-bsmall">Gray button</button>
		[/yjsgpre] </div>
</div>

<hr>
<div id="typodividers" class="yjsg-row">
	<h2 class="yjsg-center">Dividers</h2>
	<br />
	<br />
	<div class="yjsg-col-1">
		<div class="yjsg-hr-hrsolid"></div>
		<div class="yjsg-hr-hrdotted"></div>
		<div class="yjsg-hr-hrdashed"></div>
		<div class="yjsg-hr-small-hrsolid"></div>
		<div class="yjsg-hr-large-hrsolid"></div>
		<div class="yjsg-hr-small-hrsolid fa fa-star"></div>
		<div class="yjsg-hr-small-hrsolid famedium fa fa-star"></div>
		<div class="yjsg-hr-small-hrdashed falarge facolor fa fa-star"></div>
		<div class="yjsg-hr-small-hrsolid-left falarge facolor fa fa-star"></div>
		<div class="yjsg-hr-small-hrsolid-right falarge facolor fa fa-trophy"></div>
		<div class="yjsg-hr-small-hrsolid-hrcircle"></div>
		<div class="yjsg-hr-small-hrsolid-hrcircle-left"></div>
		<div class="yjsg-hr-small-hrsolid-hrcircle-right"></div>
		<div class="yjsg-hr-small-hrsolid-hrcircle-left-pull-small"></div>
		<div class="yjsg-hr-small-hrsolid-right-pull-small famedium facolor fa fa-star"></div>
		<div class="yjsg-hr-large-hrsolid-hrcircle-left-pull-large"></div>
		<div class="yjsg-hr-large-hrsolid-right-pull-large famedium facolor fa fa-star"></div>
		<h3 class="yjsg-sub-heading">markup:</h3>
		[yjsgpre pretty="1" scroll="1"]
		<div class="yjsg-hr-hrsolid"></div>
		<div class="yjsg-hr-hrdotted"></div>
		<div class="yjsg-hr-hrdashed"></div>
		<div class="yjsg-hr-small-hrsolid"></div>
		<div class="yjsg-hr-large-hrsolid"></div>
		<div class="yjsg-hr-small-hrsolid fa fa-star"></div>
		<div class="yjsg-hr-small-hrsolid famedium fa fa-star"></div>
		<div class="yjsg-hr-small-hrdashed falarge facolor fa fa-star"></div>
		<div class="yjsg-hr-small-hrsolid-left falarge facolor fa fa-star"></div>
		<div class="yjsg-hr-small-hrsolid-right falarge facolor fa fa-trophy"></div>
		<div class="yjsg-hr-small-hrsolid-hrcircle"></div>
		<div class="yjsg-hr-small-hrsolid-hrcircle-left"></div>
		<div class="yjsg-hr-small-hrsolid-hrcircle-right"></div>
		<div class="yjsg-hr-small-hrsolid-hrcircle-left-pull-small"></div>
		<div class="yjsg-hr-small-hrsolid-right-pull-small famedium facolor fa fa-star"></div>
		<div class="yjsg-hr-large-hrsolid-hrcircle-left-pull-large"></div>
		<div class="yjsg-hr-large-hrsolid-right-pull-large famedium facolor fa fa-star"></div>
		[/yjsgpre] </div>
</div>

<hr>
<div id="typodropcaps" class="yjsg-row">
	<h2 class="yjsg-center">Dropcaps</h2>
	<br />
	<br />
	<div class="yjsg-col-1-2">
		<p>
			<span class="dropcap">Y</span>Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
		</p>
	</div>
	<div class="yjsg-col-1-2">
		<p>
			<span class="dropcap3">S</span>Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
		</p>
	</div>
</div>

<div class="yjsg-row">
	<div class="yjsg-col-1-2">
		<p>
			<span class="dropcap2">J</span>Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
		</p>
	</div>
	<div class="yjsg-col-1-2">
		<p>
			<span class="dropcap4">G</span>Quisque ornare odio et mi congue varius. Etiam tempus mattis bibendum. Duis a congue ipsum. Curabitur odio est, convallis blandit metus sit amet faucibus.
		</p>
	</div>
	<div class="yjsg-col-1">
		<h3 class="yjsg-sub-heading">markup:</h3>
		[yjsgpre pretty="1" scroll="0"] 
			<span class="dropcap">Y</span>lypian... 
			<span class="dropcap2">J</span>lypian... 
			<span class="dropcap3">S</span>lypian... 
			<span class="dropcap4">G</span>lypian...
		[/yjsgpre] </div>
</div>
<hr>


<div class="yjsg-row">
	<div id="typoquotes" class="yjsg-row">
		<h2 class="yjsg-center">Blockquotes</h2>
		<br />
		<br />
		<div class="yjsg-col-1-2">
			<h3>Blockquote</h3>
			<blockquote>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat
				</p>
				<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
			</blockquote>
		</div>
		<div class="yjsg-col-1-2">
			<h3>Blockquote <small><code>.pull-right</code></small></h3>
			<blockquote class="pull-right">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat
				</p>
				<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
			</blockquote>
		</div>
		<div class="yjsg-col-1-2">
			<h3>Blockquote quoted <small><code>.quoted</code></small></h3>
			<blockquote class="quoted">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat
				</p>
				<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
			</blockquote>
		</div>
		<div class="yjsg-col-1-2">
			<h3>Blockquote brackets <small><code>.brackets</code></small></h3>
			<blockquote class="brackets">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat
				</p>
				<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
			</blockquote>
		</div>
		<div class="yjsg-col-1">
			<h3 class="yjsg-sub-heading">markup:</h3>
			[yjsgpre pretty="1" scroll="0"]
			<blockquote>
				<p>
					Text...
				</p>
			</blockquote>
			<blockquote class="pull-right">
				<p>
					Text...
				</p>
			</blockquote>
			<blockquote class="quoted">
				<p>
					Text...
				</p>
			</blockquote>
			<blockquote class="brackets">
				<p>
					Text...
				</p>
			</blockquote>
			[/yjsgpre] </div>
	</div>
</div>
<hr>



<div id="typobignumbers" class="yjsg-row">
	<h2 class="yjsg-center">Big numbers</h2>
	<br />
	<br />
	<div class="yjsg-col-1-2">
		<h3>Blocknumber</h3>
		<p class="blocknumber">
			<span class="bignumber">01</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
		</p>
		<p class="blocknumber">
			<span class="bignumber">02</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
		</p>
		<p class="blocknumber">
			<span class="bignumber">03</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
		</p>
	</div>
	<div class="yjsg-col-1-2">
		<h3>Blocknumber round</h3>
		<p class="blocknumber bnround">
			<span class="bignumber">01</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
		</p>
		<p class="blocknumber bnround">
			<span class="bignumber">02</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
		</p>
		<p class="blocknumber bnround">
			<span class="bignumber">03</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
		</p>
	</div>
	<div class="yjsg-col-1">
		<h3 class="yjsg-sub-heading">markup:</h3>
		[yjsgpre pretty="1" scroll="0"]
		<p class="blocknumber">
			<span class="bignumber">02</span> Sample...
		</p>
		<p class="blocknumber bnround">
			<span class="bignumber">02</span> Sample...
		</p>
		[/yjsgpre] </div>
</div>
<hr>


<div id="typoadditional" class="yjsg-row">
	<h2 class="yjsg-center">Additional</h2>
	<br />
	<br />
	<div class="yjsg-col-1-2">
		<h3>Emphasis classes</h3>
		<p class="muted">
			Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
		</p>
		<p class="text-warning">
			Etiam porta sem malesuada magna mollis euismod.
		</p>
		<p class="text-error">
			Donec ullamcorper nulla non metus auctor fringilla.
		</p>
		<p class="text-info">
			Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
		</p>
		<p class="text-success">
			Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
		</p>
		<h3 class="yjsg-sub-heading">markup:</h3>
		[yjsgpre pretty="1" scroll="0"]
		<p class="muted">
			Fusce...
		</p>
		<p class="text-warning">
			Etiam...
		</p>
		<p class="text-error">
			Donec...
		</p>
		<p class="text-info">
			Aenean...
		</p>
		<p class="text-success">
			Duis...
		</p>
		[/yjsgpre] </div>
	<div class="yjsg-col-1-2">
		<h3>Addresses</h3>
		<address>
		<strong>Some Web Studio, Inc.</strong><br>
		1870 Northgate Hill DR<br>
		Atlanta, GA 30021<br>
		<abbr title="Phone">P:</abbr> (123) 456-7890
		</address>
		<address>
		<strong>Full Name</strong><br>
		<a href="mailto:#">
			first.lastATyourmailDOTcom
		</a>
		</address>
		<h3 class="yjsg-sub-heading">markup:</h3>
		[yjsgpre pretty="1" scroll="0"]
		<address>
		<strong>Twitter, Inc.</strong><br>
		795 Folsom Ave, Suite 600<br>
		San Francisco, CA 94107<br>
		<abbr title="Phone">P:</abbr> (123) 456-7890
		</address>
		<address>
		<strong>Full Name</strong><br>
		<a href="mailto:#">
			first.lastATyourmailDOTcom
		</a>
		</address>
		[/yjsgpre] </div>
</div>


<div id="typosticky" class="yjsg-sticky" data-hide="yes" data-pushed="0" data-offset="300" data-effect="slide" data-sticky-menu>
    <div class="yjsgsitew inside-container">
		<h3 class="yjsg-sub-heading">Quick menu:</h3>
		<ul class="yjsg-sticky-menu">
			<li><a class="yjscroll" data-before="120" href="#typoheadings">Headings</a></li>
			<li><a class="yjscroll" data-before="120" href="#typolists">Lists</a></li>
			<li><a class="yjscroll" data-before="120" href="#typobuttons">Buttons</a></li>
			<li><a class="yjscroll" data-before="120" href="#typodividers">Dividers</a></li>
			<li><a class="yjscroll" data-before="120" href="#typodropcaps">Dropcaps</a></li>
			<li><a class="yjscroll" data-before="120" href="#typobignumbers">Big numbers</a></li>
			<li><a class="yjscroll" data-before="120" href="#typoadditional">Additional</a></li>
		</ul>
	</div>
</div>