﻿
<!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" xml:lang="en" lang="en" dir="ltr" lang="en-US">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<title>Brick and Mortar Nivo Slider</title>
	
	<link rel="shortcut icon" href="" />

	<link rel="stylesheet" type="text/css" href="stylesheets/nivo-slider.css" />	
	<link rel="stylesheet" type="text/css" href="javascripts/fancybox/jquery.fancybox-1.3.4.css" />
	<link rel="stylesheet" type="text/css" href="stylesheets/tipsy.css" />		
	<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
	<link rel="stylesheet" href="stylesheets/custom.css" type="text/css" media="screen" />
	<link rel="stylesheet" id="google-fonts-css" href="http://fonts.googleapis.com/css?family=Philosopher:400%7CPhilosopher:regular%7CPhilosopher:regular&ver=3.3.1" type="text/css" media="all" />
	
	
	<script type="text/javascript" src="javascripts/jquery-1.6.2.js"></script>
	<script type="text/javascript" src="javascripts/jquery-ui-1.8.14.js"></script>
	<script type="text/javascript" src="javascripts/jquery.nivo.slider.js"></script>
	<script type="text/javascript" src="javascripts/jquery.tipsy.js"></script>
	<script type="text/javascript" src="javascripts/jquery.defaultText.js"></script>
	<script type="text/javascript" src="javascripts/jquery.twitter.js"></script>
	<script type="text/javascript" src="javascripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<script type="text/javascript" src="javascripts/global.js"></script>
</head>
<body>
	
	<!-- Start Menu -->
	<div id="nav">
		<ul>
			<li>
				<a href="index.html">Homepage</a>
				<ul>
					<li><a href="index.html">Tiles</a></li>
					<li><a href="index-nivo.html">Nivo Slider</a></li>
				</ul>
			</li>
			<li><a href="bio.html">Bio</a></li>
			<li><a href="services.html">Services</a></li>
			<li><a href="gallery.html">Gallery</a></li>
			<li><a href="blog.html">Blog</a></li>
			<li><a href="contact.html">Contact</a></li>
			<li>
				<a href="#">HTML Styles</a>
				<ul>
					<li><a href="typography.html">Typography</a></li>
					<li><a href="tabs_toggles.html">Tabs / Toggles</a></li>
					<li><a href="styled_boxes.html">Styled Boxes</a></li>
				</ul>
			</li>
		</ul>
	</div>
	<!-- End Menu -->
	
	<div id="page_wrap">
	
		<!-- Start Logo -->
		<div id="logo" class="page_container">
			<span>..................</span>
			<a href="index.html"> Brick <img src="images/logo_teal.png" width="54" height="53" /> Mortar</a>
			<span>..................</span>
			<em>a theme for teachers, tutors &amp; instructors</em>
		</div>	
		<!-- End Logo -->
	
		<!-- Start Content Wrap -->
		<div id="content_wrap" class="page_container">
	
			<script type="text/javascript" charset="utf-8">
				$(document).ready(function() {
					// Nivo Slider
					$('div#slider #slides').nivoSlider({
						effect:'random',
						directionNav: false,
						animSpeed:500,
										pauseTime: 1000,
																		pauseTime:4000,
													captionOpacity: 1
					});
				});
			</script>

			<!-- Start Nivo Slider -->
			<div id="slider">
				<div id="slides">
					<img src="images/content/home-slider_1.jpg" alt="" title="Feature robust and flexible Brick &amp; Mortars clean design allows you to create something totally unique" />
					<img src="images/content/home-slider_2.jpg" alt="" title="Brick &amp; Mortar is an elegant WordPress theme designed for small businesses." />
					<img src="images/content/home-slider_3.jpg" alt="" title=" An ideal layout for teachers, instructors, stylists, copywriters, dancers or salons, or anyone looking to showcase their unique services or products. " />
					<img src="images/content/home-slider_4.jpg" alt="" title="Feature robust and flexible Brick &amp; Mortars clean design allows you to create something totally unique" />
					<img src="images/content/home-slider_5.jpg" alt="" title="Brick &amp; Mortar is an elegant WordPress theme designed for small businesses." />
				</div>
			</div>
			<!-- End Nivo Slider -->
		
			<!-- Start Services -->
					
			<div id="home_services">	
						
				<div class="section_title">
					<h3>Classes</h3>
					<span></span>
					<a href="services.html">View more &rarr;</a>
				</div>
				
				<div class="one">
					<p>This is where you could write a short description about the services, products or classes you offer. </p>
					<p>To the right, is a place to showcase four main items that each link to their own description page. <a href="#">You can also add links → </a></p>
				</div>
	
				<div class="two">
					<ul>
						<li>
							<a href=""><img src="images/content/item_1-62x62.jpg" /></a>
							<div class="info">
								<h4><a href="">Pilates Class</a></h4>
								<p>This page allows you to list an excerpt for your product ...</p>
							</div>
						</li>
							<li class="last_column">
								<a href=""><img src="images/content/item_7-62x62.jpg" /></a>
							<div class="info">
								<h4><a href="">Yoga Class</a></h4>
								<p>Cras mattis consectetur purus sit amet fermentum. Vestibu...</p>
							</div>
						</li>
						<li>
							<a href=""><img src="images/content/item_3-62x62.jpg" /></a>
							<div class="info">
								<h4><a href="">Beginner Ballet Class</a></h4>
								<p>Nullam quis risus eget urna mollis ornare vel eu leo. Dui...</p>
							</div>
						</li>
						<li class="last_column">
							<a href=""><img src="images/content/item_81-62x62.jpg" /></a>
							<div class="info">
								<h4><a href="">Advanced Ballet Class</a></h4>
								<p>Vestibulum id ligula porta felis euismod semper. Praesent...</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- End Services -->

			<!-- Start Recent Posts -->
			<div id="recent_post">
				<div class="section_title">
					<h3>From The Blog</h3>
					<span></span>
					<a href="blog.html"> View All Posts &rarr;</a>
				</div>
				<div class="post">
					<div class="post_slider">
						<a href=""><img src="images/content/blog-post_1-260x114.jpg" alt="blog-post_1" /></a>
						<a href=""><img src="images/content/blog-post_2-260x114.jpg" alt="blog-post_2" /></a>
						<a href=""><img src="images/content/blog-post_5-260x114.jpg" /></a>
					</div>
					<h4><a href="">Performance Tips and Advice</a></h4>
					<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Duis mollis, es...</p>
					<div class="meta">
						<span class="date">February 2, 2012</span>
						<span class="comments"><a href="">2 Comments</a></span>  
					</div>
				</div>	
				<div class="post">
					<div class="post_slider">
						<a href=""><img src="images/content/blog-post_4-260x114.jpg" alt="blog-post_4" /></a>
					</div>
					<h4><a href="">A Guide To Flawless Dance Form</a></h4>
					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere ...</p>
					<div class="meta">
						<span class="date">February 2, 2012</span>
						<span class="comments"><a href="">0 Comments</a></span>  
					</div>
				</div>	
				<div class="post last_column">
					<div class="post_slider">
						<a href=""><img src="images/content/blog_post-3-260x114.jpg" alt="blog_post-3" /></a>
						<a href=""><img src="images/content/blog-post_2-260x114.jpg" alt="blog-post_2" /></a>
					</div>
					<h4><a href="">Pointe on Pavement</a></h4>
					<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Done...</p>
					<div class="meta">
						<span class="date">January 2, 2012</span>
						<span class="comments"><a href="">1 Comment</a></span>  
					</div>
				</div>	
			</div>
			<!-- End Recent Posts -->
		</div>
	</div>
	<!-- End Content Wrap -->
	
	<!-- Start Footer-->
	<div id="footer_wrap">
		<div class="footer page_container">
			<div class="widget-container">
				<div class="widget">
					<h5>About Us</h5>
					<p>Brick &#038; Mortar is loaded with custom HTML styles, sliders, galleries and more.</p>
					<br/>
					<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
				</div>	
			</div>
			<div class="widget-container">	
				<div class="widget">
					<h5>Twitter Feed</h5>
					<div class="twitter_stream"></div>
	        	</div>
	        </div>
			<div class="widget-container">
				<div class="widget">
					<h5>Ballet Gallery</h5>
					<div class="gallery_wrap">
						<div class="image">	
							<li class="video">
								<a href="http://vimeo.com/16285298" title="Ballet Practice" class="vimeo" rel="gallery"><img src="images/content/gallery-large_121-62x62.jpg" /></a>
							</li>							
						</div>
						<div class="image">
							<li class="video">
								<a href="http://www.youtube.com/watch?v=GGmAi6uWfvc" title="Dancer Model" class="youtube" rel="gallery"><img src="images/content/gallery-large_111-62x62.jpg" /></a>
							</li>							
						</div>
						<div class="image">
							<li class="">
								<a href="images/content/gallery-large_101.jpg" title="Young Ballerina" class="gallery_image" rel="gallery"><img src="images/content/gallery-large_101-62x62.jpg" /></a>
							</li>							
						</div>					  
						<div class="image">				
							<li class="video">
								<a href="images/content/gallery-large_91-480x340.jpg" title="Ballet Dancers" class="gallery_image" rel="gallery"><img src="images/content/gallery-large_91-62x62.jpg" /></a>
							</li>							
						</div>				  
						<div class="image">
							<li class="">
								<a href="images/content/gallery-large_81.jpg" title="Dancer 5" class="gallery_image" rel="gallery"><img src="images/content/gallery-large_81-62x62.jpg" /></a>
							</li>							
						</div>				  
						<div class="image">
							<li class="">
								<a href="images/content/gallery-large_7.jpg" title="Dancer 4" class="gallery_image" rel="gallery"><img src="images/content/gallery-large_7-62x62.jpg" /></a>
							</li>							
						</div>				
						<div class="clear"></div>
					</div>
				</div>
        	</div>   	
			<div class="widget-container last">
				<div class="widget">
					<div class="location">
						<h5>Location</h5>
						<p class="address">1234 Brick and Mortar Drive<br/> Miami, Fl 33445</p>
						<p><strong>P:</strong> 123.333.4524</p>
						<p><strong>F:</strong> 456.765.3547</p>
						<p><strong>E:</strong> <a href="mailto:info@brickandmortar.com">info@brickandmortar.com</a></p>
						<div class="map">
							<iframe width="208" height="90" frameborder="0" scrolling="no" marginheight="0" 
							marginwidth="0" src="http://maps.google.com/maps?q=Google+Inc,+Amphitheatre+Parkway,+Mountain+View,+CA&hl=en&sll=37.0625,-95.677068&sspn=57.030354,107.050781&vpsrc=0&t=m&z=15&output=embed"></iframe>
						</div>
					</div>
				</div>
        	</div>
		</div>
	</div>
	<!-- End Footer-->

	<!-- Start Copyright/Social -->
	<div id="site_info_wrap" class="page_container">
		<div class="site_info">
			<div class="copyright">
				<p>Copyright &copy; 2012 Brick &amp; Mortar. All Rights Reserved.</p>
			</div>
			<div class="social">
				<div class="social">
					<ul>
						<li class="facebook"><a href="http://twitter.com/two2twelve" rel="tipsy" title="facebook">facebook</a></li>
						<li class="flickr"><a href="http://twitter.com/two2twelve" rel="tipsy" title="flickr">flickr</a></li>
						<li class="myspace"><a href="http://twitter.com/two2twelve" rel="tipsy" title="myspace">myspace</a></li>
						<li class="linkedin"><a href="http://twitter.com/two2twelve" rel="tipsy" title="linkedin">linkedin</a></li>
						<li class="rssfeed"><a href="http://twitter.com/two2twelve" rel="tipsy" title="rssfeed">rssfeed</a></li>
						<li class="twitter"><a href="http://twitter.com/two2twelve" rel="tipsy" title="twitter">twitter</a></li>
						<li class="youtube"><a href="http://twitter.com/two2twelve" rel="tipsy" title="youtube">youtube</a></li>
					</ul>
				</div>			
			</div>
		</div>
	</div>
	<!-- End Copyright/Social -->

</body>
</html>