CAbC SandBox

cabc-2-column.html

<div class="col50">
	<div class="column-margin">
		<h3>One half</h3>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
		porttitor nibh eu est pretium sagittis. Vestibulum sapien nunc,
		consequat in pulvinar ac, volutpat sed mauris. Nam nec eros mi. Nullam
		euismod felis fermentum massa vehicula eu volutpat nisi egestas. Mauris
		purus massa, tempor vitae egestas vel, mattis sit amet nisi. Curabitur
		risus est, cursus vitae porta vitae, elementum scelerisque velit. Nunc
		at tristique massa. Vivamus tincidunt tincidunt auctor. Pellentesque
		sit amet nunc libero. Curabitur lobortis metus id ligula porta et
		faucibus quam elementum. Suspendisse enim urna, faucibus et viverra
		non, rutrum ut lorem. Integer eu sem quam.</p>
	</div>
</div>

<div class="col50">
	<div class="column-margin">
		<h3>One half</h3>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
		porttitor nibh eu est pretium sagittis. Vestibulum sapien nunc,
		consequat in pulvinar ac, volutpat sed mauris. Nam nec eros mi. Nullam
		euismod felis fermentum massa vehicula eu volutpat nisi egestas. Mauris
		purus massa, tempor vitae egestas vel, mattis sit amet nisi. Curabitur
		risus est, cursus vitae porta vitae, elementum scelerisque velit. Nunc
		at tristique massa. Vivamus tincidunt tincidunt auctor. Pellentesque
		sit amet nunc libero. Curabitur lobortis metus id ligula porta et
		faucibus quam elementum. Suspendisse enim urna, faucibus et viverra
		non, rutrum ut lorem. Integer eu sem quam.</p>
	</div>
</div>

<div class="clear"></div>

cabc-3-column.html

<div class="col33">
	<div class="column-margin">
		<h3>One Third</h3>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
		porttitor nibh eu est pretium sagittis. Vestibulum sapien nunc,
		consequat in pulvinar ac, volutpat sed mauris. Nam nec eros mi. Nullam
		euismod felis fermentum massa vehicula eu volutpat nisi egestas. Mauris
		purus massa, tempor vitae egestas vel, mattis sit amet nisi. Curabitur
		risus est, cursus vitae porta vitae, elementum scelerisque velit. Nunc
		at tristique massa.</p>
	</div>
</div>

<div class="col33">
	<div class="column-margin">
		<h3>One Third</h3>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
		porttitor nibh eu est pretium sagittis. Vestibulum sapien nunc,
		consequat in pulvinar ac, volutpat sed mauris. Nam nec eros mi. Nullam
		euismod felis fermentum massa vehicula eu volutpat nisi egestas. Mauris
		purus massa, tempor vitae egestas vel, mattis sit amet nisi. Curabitur
		risus est, cursus vitae porta vitae, elementum scelerisque velit. Nunc
		at tristique massa.</p>
	</div>
</div>

<div class="col33">
	<div class="column-margin">
		<h3>One Third</h3>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
		porttitor nibh eu est pretium sagittis. Vestibulum sapien nunc,
		consequat in pulvinar ac, volutpat sed mauris. Nam nec eros mi. Nullam
		euismod felis fermentum massa vehicula eu volutpat nisi egestas. Mauris
		purus massa, tempor vitae egestas vel, mattis sit amet nisi. Curabitur
		risus est, cursus vitae porta vitae, elementum scelerisque velit. Nunc
		at tristique massa.</p>
	</div>
</div>

<div class="clear"></div>

cabc-4-column.html

<div class="col25">
	<div class="column-margin">
		<h3>One fourth</h3>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
		porttitor nibh eu est pretium sagittis. Vestibulum sapien nunc,
		consequat in pulvinar ac, volutpat sed mauris. Nam nec eros mi. Nullam
		euismod felis fermentum massa vehicula eu volutpat nisi egestas. Mauris
		purus massa, tempor vitae egestas vel, mattis sit amet nisi. Curabitur
		risus est, cursus vitae porta vitae, elementum scelerisque velit. Nunc
		at tristique massa.</p>
	</div>
</div>

<div class="col25">
	<div class="column-margin">
		<h3>One fourth</h3>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
		porttitor nibh eu est pretium sagittis. Vestibulum sapien nunc,
		consequat in pulvinar ac, volutpat sed mauris. Nam nec eros mi. Nullam
		euismod felis fermentum massa vehicula eu volutpat nisi egestas. Mauris
		purus massa, tempor vitae egestas vel, mattis sit amet nisi. Curabitur
		risus est, cursus vitae porta vitae, elementum scelerisque velit. Nunc
		at tristique massa.</p>
	</div>
</div>

<div class="col25">
	<div class="column-margin">
		<h3>One fourth</h3>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
		porttitor nibh eu est pretium sagittis. Vestibulum sapien nunc,
		consequat in pulvinar ac, volutpat sed mauris. Nam nec eros mi. Nullam
		euismod felis fermentum massa vehicula eu volutpat nisi egestas. Mauris
		purus massa, tempor vitae egestas vel, mattis sit amet nisi. Curabitur
		risus est, cursus vitae porta vitae, elementum scelerisque velit. Nunc
		at tristique massa.</p>
	</div>
</div>

<div class="col25">
	<div class="column-margin">
		<h3>One fourth</h3>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
		porttitor nibh eu est pretium sagittis. Vestibulum sapien nunc,
		consequat in pulvinar ac, volutpat sed mauris. Nam nec eros mi. Nullam
		euismod felis fermentum massa vehicula eu volutpat nisi egestas. Mauris
		purus massa, tempor vitae egestas vel, mattis sit amet nisi. Curabitur
		risus est, cursus vitae porta vitae, elementum scelerisque velit. Nunc
		at tristique massa.</p>
	</div>
</div>
<!-- Use a blank div with class clear to close the layout -->
<div class="clear"></div>

cabc-box.html

<h3>Box</h3>

<div class="box radius">
	<div class="column-margin">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
		porttitor nibh eu est pretium sagittis. Vestibulum sapien
		nunc.</p><a class="button small grey square" href="#"
		target="_self">Small Button</a>

		<div class="clear"></div>
	</div>
</div>

<div class="clear"></div>

cabc-buttons.html

<h3>Buttons</h3>

<p>
<a class="button small grey square" href="#" target="_self">Small Button</a>
<a class="button medium grey square" href="#" target="_self">Medium Button</a>
<a class="button large grey square" href="#" target="_self">Large Button</a>
<a class="button small grey round" href="#" target="_self">Small Button</a>
<a class="button medium grey round" href="#" target="_self">Medium Button</a>
<a class="button large grey round" href="#" target="_self">Large Button</a>
</p>

<p>
<a class="button small green square" href="#" target="_self">Small Button</a> 
<a class="button medium green square" href="#" target="_self">Medium Button</a> 
<a class="button large green square" href="#" target="_self">Large Button</a> 
<a class="button small green round" href="#" target="_self">Small Button</a> 
<a class="button medium green round" href="#" target="_self">Medium Button</a> 
<a class="button large green round" href="#" target="_self">Large Button</a>
</p>

cabc-icon-usage.html

<a class="button medium grey square" href="#" target="_self">
<i class="fa fa-graduation-cap"></i> Click to go to CAbC Scholarship Page
</a>

cabc-messages.html

<div class="alert white">
	White Messsage
</div><br>

<div class="alert red">
	Error Message
</div><br>

<div class="alert yellow">
	Warning Message
</div><br>

<div class="alert green">
	Success Message
</div><br>

<div class="alert blue">
	Info Message
</div><br>

<div class="alert grey">
	Grey Message
</div>

cabc-tabs.html

<h3>Tabs</h3>

<div class="tabs_table">
	<ul class="tabs">
		<li>
			<a class="selected" rel="tab-1" title="Tab one">Tab one</a>
		</li>

		<li>
			<a class="" rel="tab-2" title="Tab two">Tab two</a>
		</li>

		<li>
			<a class="" rel="tab-3" title="Tab three">Tab three</a>
		</li>
	</ul>

	<div class="panes">
		<div class="tab-content" id="tab-1" style="display: block;">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
			orci risus, vestibulum ultricies viverra ac, sollicitudin a leo.
			Nullam sed nulla sit amet felis aliquam ultrices pharetra et
			lectus. Nunc sagittis orci vel libero malesuada eget rhoncus eros
			ullamcorper. Fusce nec elit diam. Pellentesque habitant morbi
			tristique senectus et netus et malesuada fames ac turpis egestas.
			Nam malesuada arcu in ligula luctus ac tincidunt dui suscipit. Sed
			eget diam lacus, vel vulputate sem. Morbi rhoncus dictum ornare. In
			consectetur fermentum feugiat. Donec congue nisl tincidunt dui
			eleifend eleifend. Pellentesque orci metus, vulputate vel interdum
			id, dapibus a nulla. Ut vel massa nisl. Morbi tincidunt lorem in
			enim convallis in rutrum mauris sagittis.
		</div>

		<div class="tab-content" id="tab-2" style="display: none;">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
			orci risus, vestibulum ultricies viverra ac, sollicitudin a leo.
			Nullam sed nulla sit amet felis aliquam ultrices pharetra et
			lectus. Nunc sagittis orci vel libero malesuada eget rhoncus eros
			ullamcorper. Fusce nec elit diam. Pellentesque habitant morbi
			tristique senectus et netus et malesuada fames ac turpis egestas.
			Nam malesuada arcu in ligula luctus ac tincidunt dui suscipit. Sed
			eget diam lacus, vel vulputate sem. Morbi rhoncus dictum ornare. In
			consectetur fermentum feugiat. Donec congue nisl tincidunt dui
			eleifend eleifend. Pellentesque orci metus, vulputate vel interdum
			id, dapibus a nulla. Ut vel massa nisl. Morbi tincidunt lorem in
			enim convallis in rutrum mauris sagittis.
		</div>

		<div class="tab-content" id="tab-3" style="display: none;">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
			orci risus, vestibulum ultricies viverra ac, sollicitudin a leo.
			Nullam sed nulla sit amet felis aliquam ultrices pharetra et
			lectus. Nunc sagittis orci vel libero malesuada eget rhoncus eros
			ullamcorper. Fusce nec elit diam. Pellentesque habitant morbi
			tristique senectus et netus et malesuada fames ac turpis egestas.
			Nam malesuada arcu in ligula luctus ac tincidunt dui suscipit. Sed
			eget diam lacus, vel vulputate sem. Morbi rhoncus dictum ornare. In
			consectetur fermentum feugiat. Donec congue nisl tincidunt dui
			eleifend eleifend. Pellentesque orci metus, vulputate vel interdum
			id, dapibus a nulla. Ut vel massa nisl. Morbi tincidunt lorem in
			enim convallis in rutrum mauris sagittis.
		</div>
	</div>
</div>

cabc-toggle.html

<h3>Toggle</h3>

<div class="toggle-content">
	<div class="expand-button">
		<p>Toggle 1</p>
	</div>

	<div class="expand">
		Vivamus sapien nibh, tincidunt vitae mollis at, vehicula at eros.
		Aliquam erat volutpat. Suspendisse eget purus non justo pretium
		eleifend. Vestibulum mattis neque eget nibh sodales pretium sit amet et
		purus. Nam blandit, quam ac ullamcorper eleifend, dolor lorem placerat
		erat, ac volutpat nisl neque et ante. Lorem ipsum dolor sit amet,
		consectetur adipiscing elit. Vestibulum nec eros nunc. Sed ultricies
		volutpat sagittis. Donec nisi urna, vehicula sed mattis ac, rhoncus
		vitae nunc. Cras et ante ac dui fringilla mattis id id eros.
	</div>
</div>

<div class="toggle-content">
	<div class="expand-button">
		<p>Toggle 2</p>
	</div>

	<div class="expand">
		Vivamus sapien nibh, tincidunt vitae mollis at, vehicula at eros.
		Aliquam erat volutpat. Suspendisse eget purus non justo pretium
		eleifend. Vestibulum mattis neque eget nibh sodales pretium sit amet et
		purus. Nam blandit, quam ac ullamcorper eleifend, dolor lorem placerat
		erat, ac volutpat nisl neque et ante. Lorem ipsum dolor sit amet,
		consectetur adipiscing elit. Vestibulum nec eros nunc. Sed ultricies
		volutpat sagittis. Donec nisi urna, vehicula sed mattis ac, rhoncus
		vitae nunc. Cras et ante ac dui fringilla mattis id id eros.
	</div>
</div>