Team:UCL London/Week 7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Page &laquo; inFocus</title>
<link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="styles/deep_blue.css" type="text/css" media="screen" />

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/custom.js'></script>
<script type='text/javascript' src='js/jquery.easing.js'></script>

<script type='text/javascript' src='js/cufon-yui.js'></script>
<script type='text/javascript' src='js/ColaborateLight_400.font.js'></script>
<script type='text/javascript' src='js/prettyPhoto/js/jquery.prettyPhoto.js'></script>

<!--[if IE 6]>
<link rel="stylesheet" href="styles/ie6.css" type="text/css" media="screen" />
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
    DD_belatedPNG.fix('#default_logo');
</script>
<![endif]-->

</head>

<body>
<div id="header">
	<div class="inner">
		
		<div id="logo">

			<div id="default_logo"><a href="#"></a></div>
		</div>
		
		<div id="main_navigation" class="jqueryslidemenu">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="portfolio_full.html">Portfolio</a>
					<ul>
						<li><a href="portfolio_full.html">Full View</a></li>

						<li><a href="portfolio_gallery.html">Gallery View</a></li>
						<li><a href="portfolio_single.html">Single View</a></li>
					</ul>
				</li>
				<li><a href="blog.html">Blog</a>
					<ul>
						<li><a href="blog.html">Blog Index</a></li>

						<li><a href="single.html">Blog Post</a></li>
						<li><a href="archives.html">Blog Archive</a></li>
					</ul>
				</li>
				<li><a href="page.html">Pages</a>
					<ul>
						<li><a href="page.html">Standard Layout</a></li>

						<li><a href="page_fullwidth.html">Full Width</a></li>
						<li><a href="404.html">404 Error Page</a></li>
						<li><a href="2col_footer.html">Alternate Footers</a>
							<ul>
								<li><a href="2col_footer.html">2 Col Footer</a></li>
								<li><a href="3col_footer.html">3 Col Footer</a></li>

								<li><a href="4col_footer.html">4 Col Footer</a></li>
							</ul>
						</li>
						<li><a href="no_intro.html">Alternate Intro Blurbs</a>
							<ul>
								<li><a href="no_intro.html">No Intro</a></li>
								<li><a href="twitter_intro.html">Twitter Intro</a></li>

								<li><a href="inset_intro.html">Inset Intro</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="styles.html">Styles</a>
					<ul>
						<li><a href="column_layouts.html">Easy Column Layouts</a></li>

						<li><a href="typography.html">Typography</a></li>
						<li><a href="styles.html">Additional Styles</a></li>
						<li><a href="#">Color Variations</a>
							<ul>
								<li><a href="colors/black/index.html">Black</a></li>
								<li><a href="colors/blue/index.html">Blue</a></li>

								<li><a href="colors/coffee/index.html">Coffee</a></li>
								<li><a href="index.html">Deep Blue</a></li>
								<li><a href="colors/grey/index.html">Grey</a></li>
								<li><a href="colors/hotpink/index.html">Hot Pink</a></li>
								<li><a href="colors/lime/index.html">Lime</a></li>
								<li><a href="colors/red/index.html">Red</a></li>

								<li><a href="colors/silver/index.html">Silver</a></li>
								<li><a href="colors/golden/index.html">Golden</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="contact.html">Contact</a></li>

			</ul>
		</div><!-- main_navigation -->
		
	</div><!-- inner -->
</div><!-- header -->


<div id="intro_blurb">
	<div class="inner">
		<div id="intro_blurb_title"><span>Pages</span></div>
		<div id="blurb">A state permitting clear perception and understanding; the area that may be seen distinctly or resolved into a clear image.
		</div>

	</div><!-- inner -->						
</div><!-- intro_blurb -->

<div class="clearboth"></div>

<div id="breadcrumbs">
	<div class="inner">
		<p class="breadcrumb"><a href="http://themes.mysitemyway.com/infocus">Home</a><span class="breadarrow"> / </span><a href="http://themes.mysitemyway.com/infocus/category/category-1/" title="View all posts in Category 1">Link</a><span class="breadarrow"> / </span><span class='current_crumb'>Pages</span></p>

		</div><!-- inner -->							
</div><!-- breadcrumbs -->

<div id="has_sidebar">
	<div id="body_block">
		<div class="inner">
			

<div id="primary">
	<div class="content">
		
		<h2>Drop Caps &amp; Pull Quotes</h2>

			<p><span class="dropcap2">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. <span class="pullquote_right">This is a pullquote. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. </span> Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. </p>
			<p>Nam sit amet sem. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. <span class="pullquote_left">This is class pullquote_left. Suspendisse dictum magna id purus tincidunt rutrum.</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
			<p> Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. </p>

			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Du volutpat enim diam eget metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.</p>

		<div class="divider top"><a href="#">Top</a></div>

		<h2 id="tables">Tables</h2>
		<table border="0" cellspacing="0" cellpadding="0">
		<tbody>
		<tr>

		<th>Header 1</th> 
		<th>Header 2</th> 
		<th>Header 3</th> 
		<th>Header 4</th> 
		<th>Header 5</th>
		</tr>
		<tr>
		<td>Division 1</td>

		<td>Division 2</td>
		<td>Division 3</td>
		<td>Division 4</td>
		<td>Division 5</td>
		</tr>
		<tr class="even">
		<td>Division 1</td>

		<td>Division 2</td>
		<td>Division 3</td>
		<td>Division 4</td>
		<td>Division 5</td>
		</tr>
		<tr>
		<td>Division 1</td>

		<td>Division 2</td>
		<td>Division 3</td>
		<td>Division 4</td>
		<td>Division 5</td>
		</tr>
		<tr class="even">
		<td>Division 1</td>

		<td>Division 2</td>
		<td>Division 3</td>
		<td>Division 4</td>
		<td>Division 5</td>
		</tr>
		<tr>
		<td>Division 1</td>

		<td>Division 2</td>
		<td>Division 3</td>
		<td>Division 4</td>
		<td>Division 5</td>
		</tr>
		</tbody>
		</table>


		<div class="divider top"><a href="#">Top</a></div>

		<h2>Paragraph With Images</h2>
		<p><span class="frame alignleft"><img src="http://themes.mysitemyway.com/infocus/wp-content/pics/small3.jpg" alt=""/></span> Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p> 
		<p>Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.</p>

		<p><span class="frame alignright"><img src="http://themes.mysitemyway.com/infocus/wp-content/pics/small3.jpg"alt=""/></span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. </p><p>Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. </p>

		<div class="divider top"><a href="#">Top</a></div>

		<h2 id="misc">Misc Stuff </h2>
			<h3 class="subheading">abbr, acronym, pre, code, sub, sup, etc.</h3>
		<p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr></p>

		<div class="divider top"><a href="#">Top</a></div>
		
	</div><!-- content -->
</div><!-- primary -->

<div id="secondary">
	<div class="content">
		
		<div class="widget widget_search">
			<div class="search-box">
				<form method="get" action="#">

					<input type="text" size="15" class="search-field" name="s" id="s" value="Search.." onfocus="if(this.value == 'Search..') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search..';}"/>
					<input type="submit"  value="" class="search-go" /> 
				</form>
			</div>
		</div><!-- widget_search -->

		<div id="popular-widget" class="widget webtreats_popular_widget">
			<h3 class="widgettitle">Popular Posts</h3>	
			<ul class="thumbnail_list">
				<li>

					<a class="alignleft" href="#" title="Sed id est id tellus">
					<span class="small_frame"><img src="http://themes.mysitemyway.com/infocus/wp-content/themes/infocus/lib/scripts/thumb.php?src=http://themes.mysitemyway.com/infocus/wp-content/pics/arch-small.jpg&amp;w=60&amp;h=60&amp;zc=1&amp;q=100" width="60" height="60" alt="Sed id est id tellus"/></span>
					</a>
					<a class="thumbnail_title" href="#" rel="bookmark">Sed id est id tellus</a><br/>
					<a class="date" href="#">February 1, 2010</a>
					<div class="clearboth" />
				</li>
			
				<li>

					<a class="alignleft" href="#" title="Suspendisse vestibulum mollis">
					<span class="small_frame"><img src="http://themes.mysitemyway.com/infocus/wp-content/themes/infocus/lib/scripts/thumb.php?src=http://themes.mysitemyway.com/infocus/wp-content/pics/arch-small.jpg&amp;w=60&amp;h=60&amp;zc=1&amp;q=100" width="60" height="60" alt="Suspendisse vestibulum mollis"/></span></a>
					<a class="thumbnail_title" href="#" rel="bookmark">Suspendisse vestibulum mollis</a><br/>
					<a class="date" href="#">January 28, 2010</a>
					<div class="clearboth" />
				</li>
				
				<li>
					<a class="alignleft" href="#" title="Morbi vel est nunc">

					<span class="small_frame"><img src="http://themes.mysitemyway.com/infocus/wp-content/themes/infocus/lib/scripts/thumb.php?src=http://themes.mysitemyway.com/infocus/wp-content/slides/arch3-960.jpg&amp;w=60&amp;h=60&amp;zc=1&amp;q=100" width="60" height="60" alt="Morbi vel est nunc"/></span></a>
					<a class="thumbnail_title" href="#" rel="bookmark">Morbi vel est nunc</a><br/>
					<a class="date" href="#">February 1, 2010</a>
					<div class="clearboth" />
				</li>
			</ul>
		</div><!-- popular-widget -->
		
		<div id="contact-widget" class="widget webtreats_contact_widget">

			<h3 class="widgettitle"><span class="contact_widget_title">Contact Info</span></h3>
			<span class="contact_widget_name">Webtreats ETC</span><br />
			<span class="contact_widget_address">863 Transport Way</span><br />
			<span class="contact_widget_city">San Francisco,&nbsp;CA</span>&nbsp;<span class="contact_widget_zip">94112</span><br />
			<span class="contact_widget_phone">(415) 123 - 1234</span><br />

			<span class="contact_widget_email"><a href="mailto:support@mysitemyway.com">support@mysitemyway.com</a></span><br />
		</div><!-- contact-widget -->
			
		<div class="widget link_list">
			<h3 class="widgettitle">Pages</h3>		
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="portfolio_full.html">Portfolio</a></li>

				<li><a href="blog.html">Blog</a></li>
				<li><a href="page.html">Pages</a></li>
				<li><a href="page.html">Styles</a></li>
				<li><a href="page.html">Contact</a></li>
			</ul>
		</div><!-- widget_archive -->
		
		</div><!-- content -->

</div><!-- secondary -->


			</div><!-- inner -->
		<div class="clearboth"></div>
	</div><!-- body_block -->								
</div><!-- has_sidebar -->


<!-- start footer -->

<div id="footer">
	<div class="background">

		<div class="inner">
			
			<div class="two_third">					
					
				<div class="one_fourth">
					<div class="widget link_list">
						<h3 class="widgettitle">Recent</h3>
						<ul>
							<li><a href="#">Vestibulum ligula</a></li>
							<li><a href="#">Pellentes rutrum</a></li>

							<li><a href="#">Posuere convallis</a></li>
							<li><a href="#">Morbi accumsan</a></li>
							<li><a href="#">Integer id lectus</a></li>
						</ul>
					</div>				
				</div><!-- one_fourth -->
			
			
				<div class="one_fourth">
					<div class="widget link_list">

						<h3 class="widgettitle">Pages</h3>
						<ul>
							<li><a href="index.html">Home</a></li>
							<li><a href="portfolio_full.html">Portfolio</a></li>
							<li><a href="blog.html">Blog</a></li>
							<li><a href="page.html">Pages</a></li>

							<li><a href="styles.html">Styles</a></li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>				
				</div><!-- one_fourth -->
			
			
				<div class="one_fourth">
					<div class="widget link_list">
						<h3 class="widgettitle">Archives</h3>

						<ul>
							<li><a href="#">February 2010</a></li>
							<li><a href="#">January 2010</a></li>
							<li><a href="#">December 2009</a></li>
							<li><a href="#">November 2009</a></li>
						</ul>
					</div>				
				</div><!-- one_fourth -->

			
			
				<div class="one_fourth last">
					<div class="widget link_list">
						<h3 class="widgettitle">Categories</h3>
						<ul>
							<li class="cat-item cat-item-3"><a title="View all posts filed under Portfolio" href="#">Portfolio</a></li>
							<li class="cat-item cat-item-1"><a title="View all posts filed under News" href="#">News</a></li>
							<li class="cat-item cat-item-1"><a title="View all posts filed under Recent Works" href="#">Recent Works</a></li>

						</ul>
					</div>
				</div><!-- one_fourth -->

			</div><!-- two_third -->
			
			
			<div class="one_third last">
				<div id="contact-form-widget" class="widget webtreats_contact_form_widget">
					<h3 class="widgettitle">Email Us</h3>
					
					<!-- footer contact form -->

					<a name="_contact"></a> 
					<form action="#_contact" id="contactFormWidget" method="post">
					<p>
						<input type="text" name="contactNameWidget" id="contactNameWidget" value="" class="requiredField textfield" size="22" tabindex="5" />
						<label class="textfield_label" for="contactNameWidget">Name *</label>
					</p>
					<p>
						<input type="text" name="emailWidget" id="emailWidget" value="" class="requiredField email textfield" size="22" tabindex="6" />
						<label class="textfield_label" for="emailWidget">Email *</label>

					</p>
					<p><textarea name="commentsWidget" id="commentsTextWidget" rows="20" cols="30" tabindex="7" class="requiredField textarea"></textarea></p>
					<p class="screenReader">
					<label for="checkingWidget" class="screenReader">do not enter anything in this field</label><input type="text" name="checkingWidget" id="checkingWidget" class="screenReader" value="" /></p>
					<p class="loadingImgWidgetFt"></p>
					<p><input name="submittedWidget" id="submittedWidget" class="button in_footer" tabindex="8" value="Submit" type="submit" /></p>
					<p class="screenReader"><input id="submitUrlWidget" type="hidden" name="submitUrlWidget" value="submit/submit-footer.php" /></p>
					</form>

					
				</div>				
			</div><!-- one_third last -->
								
								
			<div class="clearboth"></div>
		</div><!-- inner -->
	</div><!-- background -->
</div><!-- footer -->

<!-- end footer -->


<div id="sub_footer">
	<div class="inner">

		<div class="one_half">© 2010 WebTreats ETC. All Rights Reserved</div>				
			<div class="one_half last" style="text-align:right;">
				<div id="footer_nav">
					<ul>
						<li><a href="blog.html">Blog</a></li>
						<li><a href="contact.html">Contact</a></li>
						<li><a href="portfolio_full.html">Portfolio</a></li>

						<li><a href="styles.html">Styles</a></li>
					</ul>
				</div>
			</div>
		<div class="clearboth"></div>
	</div><!-- inner -->							
</div><!-- sub_footer -->

			
<script type="text/javascript">Cufon.now();</script>

</body>
</html>