From 78db3ec2dd60f2544fd03aaffc5030b10275fe06 Mon Sep 17 00:00:00 2001
From: Rushabh Mehta <rmehta@gmail.com>
Date: Thu, 21 Feb 2013 14:25:30 +0530
Subject: [PATCH] added responsive layout with groups

---
 website/css/website.css                       |  35 +++---
 .../style_settings/custom_template.css        |   2 +
 website/templates/css/product_page.css        |   6 +-
 website/templates/html/blog_page.html         |  80 ++++++------
 website/templates/html/outer.html             | 114 +++++++++---------
 .../templates/html/product_breadcrumbs.html   |  16 ++-
 website/templates/html/product_group.html     |  68 +++++------
 website/templates/html/product_in_list.html   |  17 ++-
 website/templates/html/product_page.html      |  97 +++++++--------
 .../templates/html/product_search_box.html    |  23 ++--
 website/templates/html/web_page.html          |  12 +-
 website/templates/pages/about.html            |   4 +-
 website/templates/pages/blog.html             |  25 ++--
 website/templates/pages/contact.html          |   9 +-
 website/templates/pages/product_search.html   |  25 ++--
 15 files changed, 256 insertions(+), 277 deletions(-)

diff --git a/website/css/website.css b/website/css/website.css
index 0b2dce44cb..106d18a61e 100644
--- a/website/css/website.css
+++ b/website/css/website.css
@@ -1,19 +1,21 @@
-.content, div#body_div {
-	width: 780px;
-}	
-
-div#body_div {
-	padding: 0px;
-	min-height: 400px;
-	margin: 40px auto 10px auto;
-	box-shadow: 1px 1px 3px 3px #bbb;
+div.outer {
+	-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.9);
+	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.9);
+	box-shadow: 0px 0px 3px rgba(0,0,0,0.9);
+	background-color: #fff;
 	border-radius: 5px;
+	padding: 15px;
+	margin: 30px -15px 10px -15px;
+	min-height: 400px;
 	overflow: hidden;
 }
 
+.outer .navbar {
+	margin: -15px -15px 0 -15px;
+}
+
 footer {
 	text-align: left;
-	width: 720px;
 	margin: auto;
 }
 
@@ -39,6 +41,14 @@ p, li {
 	padding: 30px;
 }
 
+.missing-image {
+	background-color: #eee;
+	padding: 40px;
+	width: 32px;
+	font-size: 32px;
+	color: #888;
+}
+
 .social-icons {
 	font-size: 120%;
 	float: right;
@@ -67,11 +77,6 @@ p, li {
 	margin: 0px;
 }
 
-.two-column {
-	width: 50%;
-	float: left;
-}
-
 .clear {
 	clear: both;
 }
diff --git a/website/doctype/style_settings/custom_template.css b/website/doctype/style_settings/custom_template.css
index 7e89ca03fb..9009bbe18a 100644
--- a/website/doctype/style_settings/custom_template.css
+++ b/website/doctype/style_settings/custom_template.css
@@ -4,6 +4,8 @@ body {
 {% elif doc.background_color %}
 	background-color: #{{ doc.background_color }};
 	background-image: none;
+{% else %}
+	background-color: #edede7;
 {% endif %}	
 {% if doc.font %}
 	font-family: '{{ doc.font }}', Verdana, Sans !important;
diff --git a/website/templates/css/product_page.css b/website/templates/css/product_page.css
index 2b7c9790ff..5780ee4fd3 100644
--- a/website/templates/css/product_page.css
+++ b/website/templates/css/product_page.css
@@ -1,9 +1,7 @@
 	<style>
-		.product-page-content {
-			margin-left: -20px;
-		}
 		.item-main-image {
-			max-width: 100%;
+			max-width: 400px;
+			margin: auto;
 		}
 		.web-long-description {
 			font-size: 18px;
diff --git a/website/templates/html/blog_page.html b/website/templates/html/blog_page.html
index 923738275d..24dd8d7acc 100644
--- a/website/templates/html/blog_page.html
+++ b/website/templates/html/blog_page.html
@@ -9,51 +9,45 @@
 {% endblock %}
 
 {% block content %}
-	<div class="layout-wrapper layout-wrapper-background">
-		<div class="web-content" id="blog-{{ name }}">
+<div class="span12">
+	<h2>{{ title }}</h2>
 
-			<div class="layout-main">
-				
-				<h2>{{ title }}</h2>
+	<!-- begin blog content -->
+	<div class="help">By {{ full_name }} on {{ updated }}</div>
+	<br>
+	{{ content_html }}
+	<!-- end blog content -->
 
-				<!-- begin blog content -->
-				<div class="help">By {{ full_name }} on {{ updated }}</div>
-				<br>
-				{{ content_html }}
-				<!-- end blog content -->
-
-				<hr>
-				<h3>Comments</h3><br>
-				<div class="blog-comments">
-					
-					{% if not comment_list %}
-					<div class="alert no-comment">
-						<p>Be the first one to comment</p>
-					</div>
-					{% endif %}
-					
-					{% include 'html/comment.html' %}
-				</div>
-				<div><button class="btn add-comment">Add Comment</button></div>
-				<div style="display: none; margin-top: 10px;" 
-					id="comment-form" class="well">
-					<div class="alert" style="display:none;"></div>
-					<form>
-						<p>
-							<input name="comment_by_fullname" placeholder="Your Name" />
-						</p>
-						<p>
-							<input name="comment_by" placeholder="Your Email Id" />
-						</p>
-						<p>
-							<textarea name="comment" placeholder="Comment" style="width: 300px; height: 120px;"/>
-							</textarea>
-						</p>
-						<p>
-							<button class="btn btn-info" id="submit-comment">Submit</button>
-					</form>
-				</div>
-			</div>
+	<hr>
+	<h3>Comments</h3><br>
+	<div class="blog-comments">
+		
+		{% if not comment_list %}
+		<div class="alert no-comment">
+			<p>Be the first one to comment</p>
 		</div>
+		{% endif %}
+		
+		{% include 'html/comment.html' %}
 	</div>
+	<div><button class="btn add-comment">Add Comment</button></div>
+	<div style="display: none; margin-top: 10px;" 
+		id="comment-form" class="well">
+		<div class="alert" style="display:none;"></div>
+		<form>
+			<p>
+				<input name="comment_by_fullname" placeholder="Your Name" />
+			</p>
+			<p>
+				<input name="comment_by" placeholder="Your Email Id" />
+			</p>
+			<p>
+				<textarea name="comment" placeholder="Comment" style="width: 300px; height: 120px;"/>
+				</textarea>
+			</p>
+			<p>
+				<button class="btn btn-info" id="submit-comment">Submit</button>
+		</form>
+	</div>
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/website/templates/html/outer.html b/website/templates/html/outer.html
index 02a61acfa5..a8b73ad122 100644
--- a/website/templates/html/outer.html
+++ b/website/templates/html/outer.html
@@ -7,66 +7,72 @@
 {% block body %}
 	<header>
 	</header>
-	<div id="body_div">
-		<div class="navbar-wrapper">
-		<div class="navbar{% if top_bar_background=="Black" %} navbar-inverse{% endif %}" 
-			style="margin-bottom: 0px;">
-			<div class="navbar-inner">
-			<div class="container">
-				<a class="brand" href="/">{{ brand_html }}</a>
-				<ul class="nav">
-					{% for page in top_bar_items %}
-						{% if not page.parent_label %}
-						<li data-label="{{ page.label }}"
-							{% if page.child_items %}
-								class="dropdown"
-							{% endif %}>
-							<a href="{{ page.url or '#' }}" 
-								{% if page.child_items %}
-									class="dropdown-toggle"
-									onclick="return false;"
-									data-toggle="dropdown"
-								{% endif %}
-								{{ page.target or ''}}>
-							{{ page.label }}
-							{% if page.child_items %}
-								<b class="caret"></b>
-							</a>
-								<ul class="dropdown-menu">
-								{% for child in page.child_items %}
-									<li data-label="{{ child.label }}">
-										<a {% if child.indent %}
-											style="padding-left: 
-												{{(int(child.indent)+1)*15 }}px"
-										{% endif %}
-										href="{{ child.url }}" {{ child.target or '' }}>
-											{{ child.label }}
+	<div class="container">
+		<div class="outer">
+			<div class="navbar{% if top_bar_background=="Black" %} navbar-inverse{% endif %}" 
+				style="margin-bottom: 0px;">
+				<div class="navbar-inner">
+					<a class="brand" href="index">{{ brand_html }}</a>
+					<div class="container">
+						<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+							<span class="icon-bar"></span>
+							<span class="icon-bar"></span>
+							<span class="icon-bar"></span>
+						</button>
+						<div class="nav-collapse collapse">
+							<ul class="nav">
+								{% for page in top_bar_items %}
+									{% if not page.parent_label %}
+									<li data-label="{{ page.label }}"
+										{% if page.child_items %}
+											class="dropdown"
+										{% endif %}>
+										<a href="{{ page.url or '#' }}" 
+											{% if page.child_items %}
+												class="dropdown-toggle"
+												onclick="return false;"
+												data-toggle="dropdown"
+											{% endif %}
+											{{ page.target or ''}}>
+										{{ page.label }}
+										{% if page.child_items %}
+											<b class="caret"></b>
 										</a>
-									</li>
+											<ul class="dropdown-menu">
+											{% for child in page.child_items %}
+												<li data-label="{{ child.label }}">
+													<a {% if child.indent %}
+														style="padding-left: 
+															{{(int(child.indent)+1)*15 }}px"
+													{% endif %}
+													href="{{ child.url }}" {{ child.target or '' }}>
+														{{ child.label }}
+													</a>
+												</li>
+											{% endfor %}
+											</ul>
+										{% else %}
+										</a>
+										{% endif %}
+										</li>
+									{% endif %}
 								{% endfor %}
-								</ul>
-							{% else %}
-							</a>
-							{% endif %}
-							</li>
-						{% endif %}
-					{% endfor %}
-				</ul>
-				<img src="lib/images/ui/spinner.gif" id="spinner"/>
-				<ul class="nav pull-right">
-					<li id="login-topbar-item"><a href="login">Login</a></li>
-				</ul>
+							</ul>
+							<ul class="nav pull-right">
+								<li id="login-topbar-item"><a href="login">Login</a></li>
+							</ul>
+						</div>
+					</div>
+				</div>
 			</div>
+			<script>$('.dropdown-toggle').dropdown()</script>
+			<div class="content row" id="page-{{ name }}" style="display: block;">
+			{% block content %}
+			{% endblock %}
 			</div>
 		</div>
-		</div>
-		<script>$('.dropdown-toggle').dropdown()</script>
-		<div class="content" id="page-{{ name }}" style="display: block;">
-		{% block content %}
-		{% endblock %}
-		</div>
 	</div>
-	<footer><div class="web-footer">
+	<footer class="container"><div class="web-footer">
 		{% if facebook_share or google_plus_one or twitter_share or linked_in_share %}
 		<div class="social-icons" style="">
 			<span style="font-size: 11px;">{{ share_text or "Share this page on: "}}</span>
diff --git a/website/templates/html/product_breadcrumbs.html b/website/templates/html/product_breadcrumbs.html
index 2b2ea504fe..0b026e7365 100644
--- a/website/templates/html/product_breadcrumbs.html
+++ b/website/templates/html/product_breadcrumbs.html
@@ -1,8 +1,12 @@
 {% if obj.parent_groups and len(obj.parent_groups) > 1 %}
-<ul class="breadcrumb">
-	{% for ig in obj.parent_groups[:-1] %}
-	<li><a href="{{ ig.page_name }}.html">{{ ig.name }}</a> <span class="divider">/</span></li>
-	{% endfor %}
-	<li class="active">{{ obj.parent_groups[-1].name }}</li>
-</ul>
+<div class="span12">
+	<div class="clearfix">
+		<ul class="breadcrumb">
+			{% for ig in obj.parent_groups[:-1] %}
+			<li><a href="{{ ig.page_name }}.html">{{ ig.name }}</a> <span class="divider">/</span></li>
+			{% endfor %}
+			<li class="active">{{ obj.parent_groups[-1].name }}</li>
+		</ul>
+	</div>
+</div>
 {% endif %}
\ No newline at end of file
diff --git a/website/templates/html/product_group.html b/website/templates/html/product_group.html
index 1dd853fe6b..2e80c43c58 100644
--- a/website/templates/html/product_group.html
+++ b/website/templates/html/product_group.html
@@ -1,44 +1,40 @@
 {% extends "html/page.html" %}
 
 {% block content %}
-
-<div class="layout-wrapper layout-wrapper-background">
-	<div class="web-content" id="content-product_group">
-		<div class="layout-main" style="padding: 30px;">
-			{% include 'html/product_search_box.html' %}
-			{% include 'html/product_breadcrumbs.html' %}
-			{% if slideshow %}<!-- slideshow -->
-			{% include "html/slideshow.html" %}
-			{% endif %}
-			{% if description %}<!-- description -->
-			<div>{{ description or ""}}</div>
-			{% else %}
-			<h3>{{ name }}</h3>
-			{% endif %}
-			{% if sub_groups %}
-			<div class="well well-small">
-				<div class="container-fluid" style="padding-left: 0px; margin-left:-10px; line-height: 2em;">
-				{% for d in sub_groups %}
-					<div class="span4">
-						<a href="{{ d.page_name }}">{{ d.name }} ({{ d.count }})</a>
-					</div>
-				{% endfor %}
-				</div>
-			</div>
-			{% endif %}
-			{% if items %}
-			<div id="search-list">
-				<table class="table">
-					{% for item in items %}
-						{{ item }}
-					{% endfor %}
-				</table>
-			</div>
-			{% else %}
-				<div class="alert">No items listed.</div>
-			{% endif %}
+{% include 'html/product_search_box.html' %}
+{% include 'html/product_breadcrumbs.html' %}
+<div class="span12">
+	{% if slideshow %}<!-- slideshow -->
+	{% include "html/slideshow.html" %}
+	{% endif %}
+	{% if description %}<!-- description -->
+	<div>{{ description or ""}}</div>
+	{% else %}
+	<h3>{{ name }}</h3>
+	{% endif %}
+	{% if sub_groups %}
+	<hr />
+	<div class="row">
+	{% for d in sub_groups %}
+		<div class="span4">
+			<a href="{{ d.page_name }}">{{ d.name }} ({{ d.count }})</a>
 		</div>
+	{% endfor %}
 	</div>
+	<hr />
+	{% endif %}
+	{% if items %}
+	<div id="search-list" class="row">
+		{% for item in items %}
+			{{ item }}
+		{% endfor %}
+	</div>
+		{% if len(items)==20 %}
+			<div class="alert info">Showing top 20</div>
+		{% endif %}
+	{% else %}
+		<div class="alert">No items listed.</div>
+	{% endif %}
 </div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/website/templates/html/product_in_list.html b/website/templates/html/product_in_list.html
index e5e7b3e6a2..c3cb6bf3ca 100644
--- a/website/templates/html/product_in_list.html
+++ b/website/templates/html/product_in_list.html
@@ -1,14 +1,11 @@
-<tr>
-	<td style="width: 30%;">
+<div class="span3">
+	<div style="height: 120px; overflow: hidden;">
 		{% if website_image %}
-		<img class="product-image" style="width: 80%;" src="{{ website_image }}">
+		<img class="product-image" style="width: 80%; margin: auto;" src="{{ website_image }}">
 		{% else %}
 		{% include 'html/product_missing_image.html' %}
 		{% endif %}
-	</td>
-	<td>
-		<h4><a href="{{ page_name }}">{{ item_name }}</a></h4>
-		<p class="help">Item Code: {{ name }}</p>
-		<p>{{ website_description }}</p>
-	</td>
-</tr>
\ No newline at end of file
+	</div>
+	<h4><a href="{{ page_name }}">{{ item_name }}</a></h4>
+	<p class="help">Item Code: {{ name }}</p>
+</div>
\ No newline at end of file
diff --git a/website/templates/html/product_page.html b/website/templates/html/product_page.html
index 14fecfbf3a..eaf4ca8ba2 100644
--- a/website/templates/html/product_page.html
+++ b/website/templates/html/product_page.html
@@ -9,59 +9,52 @@
 {% endblock %}
 
 {% block content %}
-	<div class="layout-wrapper layout-wrapper-background">
-		<div class="web-content" id="content-product-{{ name }}">
-			<div class="layout-main" style="padding: 30px;">
-				{% include 'html/product_search_box.html' %}
-				{% include 'html/product_breadcrumbs.html' %}
-				<h3 itemprop="name">{{ item_name }}</h3>
-				<p class="help">Item Code: {{ name }}</p>
-				<div class="product-page-content" 
-					itemscope itemtype="http://schema.org/Product">
-					{% if slideshow %}
-						{% include "html/slideshow.html" %}
-					{% else %}
-					<div class="span6">
-						{% if website_image %}
-						<image itemprop="image" class="item-main-image" 
-							src="{{ website_image }}" />
-						{% else %}
-						<div class="img-area">
-							{% include 'html/product_missing_image.html' %}
-						</div>
-						{% endif %}
-					</div>
-					{% endif %}
-					<br><br>
-					<div class="span3">
-						<div class="item-price hide">
-							<p>Price:</p>
-						</div>
-						<div class="item-stock"></div>
-					</div>
-					<div class="clearfix"></div>
-					<div class="span9">
-						<h3>Product Description</h3>
-						<div itemprop="description">
-						{{ web_long_description or web_short_description or 
-							"[No description given]" }}
-						</div>
-						<hr>
-						{% if obj.doclist.get({"doctype":"Item Website Specification"}) %}
-							<h3>Specifications</h3>
-							<table class="table table-striped table-bordered" style="width: 100%">
-							{% for d in obj.doclist.get(
-								{"doctype":"Item Website Specification"}) %}
-								<tr>
-									<td style="width: 30%;">{{ d.label }}</td>
-									<td>{{ d.description }}</td>
-								</tr>
-							{% endfor %}
-							</table>
-						{% endif %}
-					</div>
-					<div class="clearfix"></div>
+	{% include 'html/product_search_box.html' %}
+	{% include 'html/product_breadcrumbs.html' %}
+	<div class="span12">
+		<h3 itemprop="name">{{ item_name }}</h3>
+		<p class="help">Item Code: {{ name }}</p>
+	</div>
+	<div class="span12 product-page-content" itemscope itemtype="http://schema.org/Product">
+	{% if slideshow %}
+		{% include "html/slideshow.html" %}
+	{% else %}
+		{% if website_image %}
+		<image itemprop="image" class="item-main-image"
+			src="{{ website_image }}" />
+		{% else %}
+		<div class="img-area">
+			{% include 'html/product_missing_image.html' %}
+		</div>
+		{% endif %}
+	{% endif %}
+		<br><br>
+		<div class="row">
+			<div class="span9">
+				<h3>Product Description</h3>
+				<div itemprop="description">
+				{{ web_long_description or web_short_description or 
+					"[No description given]" }}
 				</div>
+				<hr>
+				{% if obj.doclist.get({"doctype":"Item Website Specification"}) %}
+					<h3>Specifications</h3>
+					<table class="table table-striped table-bordered" style="width: 100%">
+					{% for d in obj.doclist.get(
+						{"doctype":"Item Website Specification"}) %}
+						<tr>
+							<td style="width: 30%;">{{ d.label }}</td>
+							<td>{{ d.description }}</td>
+						</tr>
+					{% endfor %}
+					</table>
+				{% endif %}
+			</div>
+			<div class="span3">
+				<div class="item-price hide">
+					<p>Price:</p>
+				</div>
+				<div class="item-stock"></div>
 			</div>
 		</div>
 	</div>
diff --git a/website/templates/html/product_search_box.html b/website/templates/html/product_search_box.html
index 5f69b340ae..3b3a95a60f 100644
--- a/website/templates/html/product_search_box.html
+++ b/website/templates/html/product_search_box.html
@@ -1,12 +1,14 @@
-<div class="pull-right" style="margin-top:-15px;">
-	<form class="form-search">
-		<div class="input-append">
-			<input type="text" class="span2 search-query" 
-				id="product-search" placeholder="Product Search...">
-			<button class="btn" id="btn-product-search">
-				<i class="icon-search"></i></button>
-		</div>
-	</form>
+<div class="span12 clearfix">
+	<div class="pull-right" style="margin-top: 15px;">
+		<form class="form-search">
+			<div class="input-append">
+				<input type="text" class="span2 search-query" 
+					id="product-search" placeholder="Product Search..." />
+				<button class="btn" id="btn-product-search">
+					<i class="icon-search"></i></button>
+			</div>
+		</form>
+	</div>
 	<script>
 		// redirect to product search page
 		$(document).ready(function() {
@@ -23,5 +25,4 @@
 			})
 		})
 	</script>
-</div>
-<div class="clearfix"></div>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/website/templates/html/web_page.html b/website/templates/html/web_page.html
index aaa0aa836d..d3c646a8b8 100644
--- a/website/templates/html/web_page.html
+++ b/website/templates/html/web_page.html
@@ -7,12 +7,8 @@
 {% endblock %}
 
 {% block content %}
-	<div class="layout-wrapper layout-wrapper-background">
-		<div class="web-content" style="text-align: {{ text_align }};">
-			<div class="layout-main">
-				{% include "html/slideshow.html" %}
-				{{ main_section }}
-			</div>
-		</div>
-	</div>
+<div class="span12" style="margin-top: 15px;">
+	{% include "html/slideshow.html" %}
+	{{ main_section }}
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/website/templates/pages/about.html b/website/templates/pages/about.html
index 1a60b33c2d..4d0eefc0e8 100644
--- a/website/templates/pages/about.html
+++ b/website/templates/pages/about.html
@@ -3,8 +3,7 @@
 {% set title="About Us" %}
 
 {% block content %}
-<div class="layout-wrapper">
-	<div class="layout-main">
+<div class="span12">
 	{{ obj.doc.company_introduction or "<h2>About Us</h2><p>Some Introduction about your company that you would like your website visitor to know. More people than you think will read your About page. People always like to know who the are doing business with. Be authentic and avoid using jargon like 'value added services' etc. Be sure to update your company history and list of key team members in Website > About Us Settings</p>" }}
 	{% if obj.doclist.get({"doctype":"Company History"}) %}
 	<h3>{{ obj.doc.company_history_heading or "Company History" }}</h3>
@@ -35,6 +34,5 @@
 	</table>
 	{% endif %}
 	{{ obj.doc.footer or "" }}
-	</div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/website/templates/pages/blog.html b/website/templates/pages/blog.html
index 3ad9e0af56..3c2a579c75 100644
--- a/website/templates/pages/blog.html
+++ b/website/templates/pages/blog.html
@@ -11,20 +11,15 @@
 {% set title="Blog" %}
 
 {% block content %}
-	<div class="layout-wrapper layout-wrapper-background">
-		<div class="web-content" id="content-blog">
-			
-			<div class="layout-main">
-				<h1>Blog</h1>
-				<br>
-				<div id="blog-list">
-					<!-- blog list will be generated dynamically -->
-				</div>
-				<div style="text-align: center;">
-					<button id="next-page" class="btn" 
-						style="display:none;">More...</button>
-				</div>
-			</div>
-		</div>
+<div class="span12">
+	<h1>Blog</h1>
+	<br>
+	<div id="blog-list">
+		<!-- blog list will be generated dynamically -->
 	</div>
+	<div style="text-align: center;">
+		<button id="next-page" class="btn" 
+			style="display:none;">More...</button>
+	</div>
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/website/templates/pages/contact.html b/website/templates/pages/contact.html
index f876da1d6a..6022b9a523 100644
--- a/website/templates/pages/contact.html
+++ b/website/templates/pages/contact.html
@@ -7,9 +7,9 @@
 {% set title="Contact Us" %}
 
 {% block content %}
-<div class="layout-wrapper">
-	<div class="layout-main row">
-		<div class="web-form span5 pull-left">
+<div class="span12">
+	<div class="row">
+		<div class="web-form span8">
 			{{ obj.doc.introduction or "<h3>Contact Us</h3>"}}
 			<div class="row">
 			<div class="span4">
@@ -28,7 +28,7 @@
 			<p><button class="btn btn-primary btn-send">Send</button></p>
 		</div>
 		{% if obj.doc.address %}
-		<div class="pull-right span3 alert" itemscope itemtype="http://schema.org/PostalAddress">
+		<div class="span3 alert" style="margin-top: 20px;" itemscope itemtype="http://schema.org/PostalAddress">
 			<h4><i class="icon-map-marker"></i> {{ obj.address.address_title }}</h4>
 			{% if obj.address.address_line1 %}
 				<span itemprop="streetAddress">{{ obj.address.address_line1 }}</span><br>
@@ -50,7 +50,6 @@
 			{% endif %}
 		</div>
 		{% endif %}
-		<div class="clearfix"></div>
 	</div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/website/templates/pages/product_search.html b/website/templates/pages/product_search.html
index 90c248949c..66bf160c94 100644
--- a/website/templates/pages/product_search.html
+++ b/website/templates/pages/product_search.html
@@ -17,22 +17,17 @@ $(document).ready(function() {
 });
 </script>
 
-<div class="layout-wrapper layout-wrapper-background">
-	<div class="web-content" id="content-product_search">
-		<div class="layout-main" style="padding: 30px;">
-			{% include 'html/product_search_box.html' %}
-			<h3 class="search-results">Search Results</h3>
-			<div id="search-list">
-				
-			</div>
-			<div style="text-align: center;">
-				<div class="more-btn" 
-					style="display: none; text-align: center;">
-					<button class="btn">More...</button>
-				</div>
-			</div>
+{% include 'html/product_search_box.html' %}
+<div class="span12">
+	<h3 class="search-results">Search Results</h3>
+	<div id="search-list" class="row">
+		
+	</div>
+	<div style="text-align: center;">
+		<div class="more-btn" 
+			style="display: none; text-align: center;">
+			<button class="btn">More...</button>
 		</div>
 	</div>
 </div>
-
 {% endblock %}
\ No newline at end of file