<!DOCTYPE html>
<html lang="en">
<head>
<title>Gro-spa - Responsive Creative Theme</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" media="screen">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<script src="js/jquery-1.7.2.min.js"></script>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->
</head>
<body id="page-inner">
<!-- header -->
<header>
<div class="row-1">
<div class="container_12">
<div class="grid_12">
<div class="logo fleft">
<h1><a href="index.html">Gro-spa - Responsive Creative Theme</a></h1>
<div class="slogan">A better choice!</div>
</div>
<div class="call"> <img src="images/icons/icon-phone.png" alt=""> <span>Call Us: 111-234-3421</span> </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="row-3">
<div class="container_12">
<div class="grid_12">
<!-- menu -->
<nav id = "main-nav-menu">
<ul class="sf-menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="product-price.html">Product Price</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="blog-single.html">Blog Details</a></li>
<li><a href="portfolio3.html">Portfolio</a>
<ul>
<li><a href="portfolio2.html">Two Column</a></li>
<li><a href="portfolio3.html">Three Column</a></li>
<li><a href="portfolio4.html">Four Column</a></li>
</ul>
</li>
</ul>
</li>
<li class="active"><a href="elements.html">Elements</a>
<ul>
<li><a href="elements.html">Elements</a></li>
<li><a href="price.html">Price</a></li>
<li><a href="price-list.html">Price list</a></li>
<li><a href="headings.html">Headings</a></li>
<li><a href="column.html">Columns Layout</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a>
<ul>
<li><a href="blog.html">Blog</a></li>
<li><a href="blog-single.html">Blog Details</a></li>
</ul>
</li>
<li><a href="portfolio3.html">Portfolio</a>
<ul>
<li><a href="portfolio2.html">Two Column</a></li>
<li><a href="portfolio3.html">Three Column</a></li>
<li><a href="portfolio4.html">Four Column</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- end menu -->
<a href="#" class="spa-packages button-yellow"><img alt="" src="images/icons/offer-icon.png">Spa Packages</a>
<select id = "responsive-main-nav-menu" onchange = "javascript:window.location.replace(this.value);">
</select>
</div>
<div class="clear"></div>
</div>
</div>
</header>
<!-- content -->
<section id="content">
<div class="container_12">
<div class="grid_12">
<div class="breadcrumbs">
<p><span class="bread-home"><a href="index.html">Home</a></span>Elements</p>
</div>
</div>
<div class="clear"></div>
<!--SITE CONTENTS-->
<div class="wrapper">
<div class="grid_12">
<h1 class="text-t-big ident-bot-0">Elements</h1>
</div>
</div>
<div class="clear"></div>
<div class="separator"></div>
<div class="wrapper">
<div class="grid_3">
<h3>Unordered List</h3>
<ul class="list-style">
<li class="arrow-list"><a href="#">Arrow List - Item Label</a></li>
<li class="arrow-list-2"><a href="#">Arrow 2 List - Item Label</a></li>
<li class="circle-list"><a href="#">Circle List - Item Label</a></li>
<li class="check-list"><a href="#">Check List - Item Label</a></li>
<li class="check-list-2"><a href="#">Check 2 List - Item Label</a></li>
<li class="star-list"><a href="#">Star List - Item Label</a></li>
<li class="plus-list"><a href="#">Plus List - Item Label</a></li>
<li class="dash-list"><a href="#">Dash List - Item Label</a></li>
</ul>
</div>
<div class="grid_3">
<h3>Service List</h3>
<ul class="list-style">
<li class="arrow-list"><a href="#">Arrow List - Item Label</a></li>
<li class="arrow-list"><a href="#">Arrow 2 List - Item Label</a></li>
<li class="arrow-list"><a href="#">Circle List - Item Label</a></li>
<li class="arrow-list"><a href="#">Check List - Item Label</a></li>
<li class="arrow-list"><a href="#">Check 2 List - Item Label</a></li>
<li class="arrow-list"><a href="#">Star List - Item Label</a></li>
<li class="arrow-list"><a href="#">Plus List - Item Label</a></li>
<li class="arrow-list"><a href="#">Dash List - Item Label</a></li>
</ul>
</div>
<div class="grid_3">
<h3>Feature List</h3>
<ul class="list-style">
<li class="circle-list"><a href="#">Arrow List - Item Label</a></li>
<li class="circle-list"><a href="#">Arrow 2 List - Item Label</a></li>
<li class="circle-list"><a href="#">Circle List - Item Label</a></li>
<li class="circle-list"><a href="#">Check List - Item Label</a></li>
<li class="circle-list"><a href="#">Check 2 List - Item Label</a></li>
<li class="circle-list"><a href="#">Star List - Item Label</a></li>
<li class="circle-list"><a href="#">Plus List - Item Label</a></li>
<li class="circle-list"><a href="#">Dash List - Item Label</a></li>
</ul>
</div>
<div class="grid_3">
<h3>Ordered List</h3>
<ol class="list-style-1">
<li><a href="#">Arrow List - Item Label</a></li>
<li><a href="#">Arrow 2 List - Item Label</a></li>
<li><a href="#">Circle List - Item Label</a></li>
<li><a href="#">Check List - Item Label</a></li>
<li><a href="#">Check 2 List - Item Label</a></li>
<li><a href="#">Star List - Item Label</a></li>
<li><a href="#">Plus List - Item Label</a></li>
<li><a href="#">Dash List - Item Label</a></li>
</ol>
</div>
</div>
<div class="clear"></div>
<div class="separator"></div>
<div class="wrapper">
<div class="grid_12">
<h3>Alert Boxes</h3>
</div>
<div class="grid_3">
<p class="message-box-error"><strong>Error</strong> - Your message! </p>
</div>
<div class="grid_3">
<p class="message-box-success"><strong>Success</strong> - Your message! </p>
</div>
<div class="grid_3">
<p class="message-box-info"><strong>Info</strong> - Your message! </p>
</div>
<div class="grid_3">
<p class="message-box-notice"><strong>Notice</strong> - Your message! </p>
</div>
</div>
<div class="wrapper">
<div class="grid_6">
<div class="message-box info"> <strong>Info: </strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="closemsg"></span> </div>
<div class="message-box note"> <strong>Note: </stron