diff --git a/erpnext/website/doctype/about_us_settings/template.html b/erpnext/website/doctype/about_us_settings/template.html
index 864fb65..404ebe9 100644
--- a/erpnext/website/doctype/about_us_settings/template.html
+++ b/erpnext/website/doctype/about_us_settings/template.html
@@ -1,9 +1,10 @@
-<div class="layout_wrapper">
+<div class="layout-wrapper layout-wrapper-background">
 	<div class="web-content" id="content-about-us">
-		{% if doc.headline %}
-			<h1>{{ doc.headline }}</h1>
-		{% endif %}
-		<div class="web-main-section">
+		<div class="layout-main-section">
+			{% if doc.headline %}
+				<h1>{{ doc.headline }}</h1>
+			{% endif %}
+			
 			{{ doc.main_section_html }}
 			
 			{% if doc.about_team %}
@@ -28,7 +29,7 @@
 				</table>
 			{% endif %}
 		</div>
-		<div class="web-side-section">
+		<div class="layout-side-section">
 			{{ doc.side_section_html }}
 		</div>
 		<div style="clear: both"></div>
diff --git a/erpnext/website/doctype/blog/template.html b/erpnext/website/doctype/blog/template.html
index 1b81fe2..467f301 100644
--- a/erpnext/website/doctype/blog/template.html
+++ b/erpnext/website/doctype/blog/template.html
@@ -1,13 +1,13 @@
-<div class="layout_wrapper">
+<div class="layout-wrapper layout-wrapper-background">
 	<div class="web-content" id="blog-{{ doc.name }}">
-		<h1>Blog</h1>
-		<div class="web-main-section">
+		<div class="layout-main-section">
+			<h1>Blog</h1>
 			<h3>{{ doc.title }}</h3>
 			<div class="help">By {{ doc.full_name }} on {{ doc.updated }}</div>
 			<br>
 			{{ doc.content_html }}
 		</div>
-		<div class="web-side-section">
+		<div class="layout-side-section">
 			<p><a href="#!blog">All Blogs</a></p>
 			<h4>Subscribe</h4>
 			<p>
diff --git a/erpnext/website/doctype/contact_us_settings/template.html b/erpnext/website/doctype/contact_us_settings/template.html
index 6453784..508b534 100644
--- a/erpnext/website/doctype/contact_us_settings/template.html
+++ b/erpnext/website/doctype/contact_us_settings/template.html
@@ -1,9 +1,9 @@
-<div class="layout_wrapper">
+<div class="layout-wrapper layout-wrapper-background">
 	<div class="web-content" id="content-contact-us">
-		{% if doc.headline %}
-			<h1>{{ doc.headline }}</h1>
-		{% endif %}
-		<div class="web-main-section">
+		<div class="layout-main-section">
+			{% if doc.headline %}
+				<h1>{{ doc.headline }}</h1>
+			{% endif %}
 			<label>Your Name*</label>
 			<div><input name="contact-name" type="text"/></div>
 			<br>
@@ -16,7 +16,7 @@
 			<div><button class="btn primary">Send</button></div>
 			{{ doc.main_section_html }}
 		</div>
-		<div class="web-side-section">
+		<div class="layout-side-section">
 			{{ doc.side_section_html }}
 		</div>
 		<div style="clear: both"></div>
diff --git a/erpnext/website/doctype/web_page/template.html b/erpnext/website/doctype/web_page/template.html
index e6f071d..2c92a25 100644
--- a/erpnext/website/doctype/web_page/template.html
+++ b/erpnext/website/doctype/web_page/template.html
@@ -1,26 +1,21 @@
-<div class="layout_wrapper">
+<div class="layout-wrapper layout-wrapper-background">
 	<div class="web-content" id="content-{{ doc.name }}" 
 		style="text-align: {{ doc.text_align }};">
-		{% if doc.head_section and doc.layout=='Two column with header' %}
-		<div class="web-head-section">
-			{{ doc.head_section_html }}
-		</div>
-		{% endif %}
 		
 		{% if doc.layout.startswith('Two column') %}
-		<div class="web-main-section">
+		<div class="layout-main-section">
+		{% else %}
+		<div class="layout-main">
 		{% endif %}
 			{{ doc.main_section_html }}
 			{% if doc.next_page_html %}
 				{{ doc.next_page_html }}
 			{% endif %}
 
-		{% if doc.layout.startswith('Two column') %}
 		</div>
-		{% endif %}
 		
 		{% if doc.layout.startswith('Two column') %}
-		<div class="web-side-section">
+		<div class="layout-side-section">
 			{{ doc.side_section_html }}
 			{% if doc.see_also %}
 			<div class="info-box">
diff --git a/erpnext/website/page/blog/blog.html b/erpnext/website/page/blog/blog.html
index 79ea7f0..ffb8128 100644
--- a/erpnext/website/page/blog/blog.html
+++ b/erpnext/website/page/blog/blog.html
@@ -1,10 +1,10 @@
-<div class="layout_wrapper">
+<div class="layout-wrapper layout-wrapper-background">
 	<div class="web-content" id="content-blog">
-		<h1>Blog</h1>
-		<br>
-		<div class="web-main-section">
+		<div class="layout-main-section">
+			<h1>Blog</h1>
+			<br>
 		</div>
-		<div class="web-side-section">
+		<div class="layout-side-section">
 			<!-- for later
 			<h4>Get Updates</h4>
 			<p>
diff --git a/erpnext/website/page/blog/blog.js b/erpnext/website/page/blog/blog.js
index bc7aec4..418fc6c 100644
--- a/erpnext/website/page/blog/blog.js
+++ b/erpnext/website/page/blog/blog.js
@@ -17,7 +17,7 @@
 
 pscript.onload_blog = function(wrapper) {
 	wrapper.blog_list = new wn.ui.Listing({
-		parent: $(wrapper).find('.web-main-section').get(0),
+		parent: $(wrapper).find('.layout-main-section').get(0),
 		query: 'select tabBlog.name, title, left(content, 300) as content, tabBlog.modified, \
 			ifnull(first_name, "") as first_name, ifnull(last_name, "") as last_name \
 			from tabProfile, tabBlog\