<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8" />
<title>Imperial</title>
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- CSS
================================================== -->
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<link rel="stylesheet" type="text/css" href="styles/inner.css" />
<link href='http//fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css' />
<link href='http//fonts.googleapis.com/css?family=Oswald:700,400' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="http//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="bodychild">
<div id="outercontainer">
<!-- HEADER -->
<div id="outerheader">
<header>
<section id="top">
<div id="logo">
<a href="index.html"><img src="images/logo.png" alt="" /></a>
</div>
<ul id="sn">
<li><a href="http//youtube.com" title="Youtube"><span class="icon-img" style="background:url(images/social/youtube.png)"></span></a></li>
<li><a href="http//stumbleupon.com" title="Stumbleupon"><span class="icon-img" style="background:url(images/social/stumbleupon.png)"></span></a></li>
<li><a href="http//pinterest.com" title="pinterest"><span class="icon-img" style="background:url(images/social/pinterest.png)"></span></a></li>
<li><a href="http//twitter.com" title="Twitter"><span class="icon-img" style="background:url(images/social/twitter.png)"></span></a></li>
<li><a href="https//plus.google.com" title="Google+"><span class="icon-img" style="background:url(images/social/google.png)"></span></a></li>
<li><a href="http//facebook.com" title="Facebook"><span class="icon-img" style="background:url(images/social/facebook.png)"></span></a></li>
</ul>
</section>
<section id="navigation">
<nav>
<ul id="topnav" class="sf-menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a>
<ul>
<li><a href="single.html">Blog Detail</a></li>
<li><a href="#">Dropdown</a>
<ul>
<li><a href="#">Only</a></li>
<li><a href="single.html">Example of</a></li>
<li><a href="#">The Dropdown</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="service.html">Services</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="element.html" class="current">Element</a></li>
<li><a href="contact.html">Contact</a></li>
</ul><!-- topnav -->
</nav><!-- nav -->
</section>
<div class="clear"></div>
</header>
</div>
<!-- END HEADER -->
<!-- BEFORE CONTENT -->
<div id="outerbeforecontent">
<div id="beforecontent">
<section id="beforethecontent">
<div class="intro-l">
<h1 class="pagetitle">Elements</h1><span class="pagedesc">this can be ur tagline or something you want</span>
</div>
<div class="intro-r">
Donec consectetur libero ut tortor condimentum<br />
<h2>Come & Join Our Newsletter</h2>
</div>
<div class="clear"></div>
</section>
</div>
</div>
<!-- END BEFORE CONTENT -->
<!-- MAIN CONTENT -->
<div id="outermain">
<div id="maincontent">
<section id="mainthecontent">
<article>
<div class="one_half firstcols">
<h4>Images in Paragraph</h4>
<p><img src="images/content/pic1.jpg" alt="" class="alignleft shadow-frame" />Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Sed placerat libero quis metus malesuada venenatis. Nulla facilisi. Duis condimentum molestie lacus.</p>
<p>Morbi a eros sed nisi laoreet.Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.laoreet molestie. Nulla facilisi. Duis condimentum molestie lacus ac tincidunt.Morbi a eros sed nisi laoreet molestie. Sed placerat libero quis metus malesuada venenatis. Proin vulputate, ligula id pellentesque laoreet, arcu odio tincidunt nunc, in dictum leo dui sed sapien. Cras rhoncus odio quis risus porta ullamcorper adipiscing nulla sodales. </p>
</div>
<div class="one_half lastcols">
<h4>Tables</h4>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr class="even">
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr class="even">
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>