From d6c8235fb5ca570f8edb63e8b6bac1f14f31a2f8 Mon Sep 17 00:00:00 2001
From: Rushabh Mehta <rmehta@gmail.com>
Date: Thu, 18 Apr 2013 17:43:21 +0530
Subject: [PATCH] [style] [upgrade] moved to bootstrap 3

---
 .../page/accounts_browser/accounts_browser.html  |  2 +-
 .../financial_statements.html                    |  2 +-
 home/page/activity/activity.html                 |  2 +-
 home/page/attributions/attributions.html         |  2 +-
 public/js/conf.js                                |  2 +-
 selling/page/sales_browser/sales_browser.html    |  2 +-
 .../markdown_reference/markdown_reference.html   |  2 +-
 utilities/page/question_view/question_view.html  |  2 +-
 utilities/page/questions/questions.html          |  2 +-
 website/templates/html/blog_footer.html          |  2 +-
 website/templates/html/blog_page.html            |  2 +-
 website/templates/html/blogger.html              |  4 ++--
 website/templates/html/footer.html               |  2 +-
 website/templates/html/outer.html                |  2 +-
 website/templates/html/product_breadcrumbs.html  |  2 +-
 website/templates/html/product_group.html        |  4 ++--
 website/templates/html/product_in_list.html      |  2 +-
 website/templates/html/product_page.html         |  6 +++---
 website/templates/html/product_search_box.html   |  4 ++--
 website/templates/html/web_page.html             |  2 +-
 website/templates/js/blog.js                     |  4 ++--
 website/templates/pages/about.html               | 10 +++++-----
 website/templates/pages/account.html             |  2 +-
 website/templates/pages/attributions.html        |  2 +-
 website/templates/pages/blog.html                |  2 +-
 website/templates/pages/contact.html             | 14 +++++++-------
 website/templates/pages/order.html               | 12 ++++++------
 website/templates/pages/orders.html              | 16 ++++++++--------
 website/templates/pages/product_search.html      |  2 +-
 website/templates/pages/profile.html             |  2 +-
 website/templates/pages/ticket.html              |  8 ++++----
 website/templates/pages/tickets.html             |  8 ++++----
 website/templates/pages/writers.html             |  2 +-
 33 files changed, 67 insertions(+), 67 deletions(-)

diff --git a/accounts/page/accounts_browser/accounts_browser.html b/accounts/page/accounts_browser/accounts_browser.html
index ab487d2522..0107930968 100644
--- a/accounts/page/accounts_browser/accounts_browser.html
+++ b/accounts/page/accounts_browser/accounts_browser.html
@@ -1,4 +1,4 @@
-<div class="appframe span12">
+<div class="appframe col-span-12">
 	<div class="appframe-area"></div>
 	<div class="layout-main">
 		<div class="tree-area"></div>
diff --git a/accounts/page/financial_statements/financial_statements.html b/accounts/page/financial_statements/financial_statements.html
index 1a11950f76..c68ab1a8db 100644
--- a/accounts/page/financial_statements/financial_statements.html
+++ b/accounts/page/financial_statements/financial_statements.html
@@ -1,4 +1,4 @@
-<div class="appframe span12">
+<div class="appframe col-span-12">
 <div id="fs_header"></div>
 <div id="print_html">
 	<div id="stmt_title1" style="margin:16px 0px 4px 0px; font-size: 16px; font-weight: bold; color: #888;"></div>
diff --git a/home/page/activity/activity.html b/home/page/activity/activity.html
index 63695df8be..ac369c37a0 100644
--- a/home/page/activity/activity.html
+++ b/home/page/activity/activity.html
@@ -1,4 +1,4 @@
-<div class="appframe span12">
+<div class="appframe col-span-12">
 	<div class="layout-appframe"></div>
 	<div class="layout-main">
 		<div id="activity-list">
diff --git a/home/page/attributions/attributions.html b/home/page/attributions/attributions.html
index f614bb10ca..e6142f7df3 100644
--- a/home/page/attributions/attributions.html
+++ b/home/page/attributions/attributions.html
@@ -1,4 +1,4 @@
-<div class="appframe span12 layout-attributions">
+<div class="appframe col-span-12 layout-attributions">
 	<div class="layout-appframe"></div>
 	<div class="layout-main">
 	<h3>ERPNext is made using these Awesome Open Source Projects <i class="icon-heart" style="color: red"></i></h3>
diff --git a/public/js/conf.js b/public/js/conf.js
index 522de0ae1b..de8c7f78f7 100644
--- a/public/js/conf.js
+++ b/public/js/conf.js
@@ -15,7 +15,7 @@ wn.modules_path = 'erpnext';
 
 // add toolbar icon
 $(document).bind('toolbar_setup', function() {
-	$('.brand').html((wn.boot.website_settings.brand_html || 'erpnext') +
+	$('.navbar-brand').html((wn.boot.website_settings.brand_html || 'erpnext') +
 	' <i class="icon-home icon-white navbar-icon-home" ></i>')
 	.css('max-width', '200px').css('overflow', 'hidden')
 	.hover(function() {
diff --git a/selling/page/sales_browser/sales_browser.html b/selling/page/sales_browser/sales_browser.html
index 08eb9f9bd3..ab89816eb5 100644
--- a/selling/page/sales_browser/sales_browser.html
+++ b/selling/page/sales_browser/sales_browser.html
@@ -1,4 +1,4 @@
-<div class="appframe span12">
+<div class="appframe col-span-12">
 	<div class="appframe-area"></div>
 	<div class="layout-main-section">
 		<div class="tree-area"></div>
diff --git a/utilities/page/markdown_reference/markdown_reference.html b/utilities/page/markdown_reference/markdown_reference.html
index b9e4c6e87b..5ec813b3cd 100644
--- a/utilities/page/markdown_reference/markdown_reference.html
+++ b/utilities/page/markdown_reference/markdown_reference.html
@@ -1,4 +1,4 @@
-<div class="appframe span12">
+<div class="appframe col-span-12">
 	<div class="layout-appframe">
 		<div class="appframe-titlebar">
 			<span class="appframe-title">Markdown Reference</span>
diff --git a/utilities/page/question_view/question_view.html b/utilities/page/question_view/question_view.html
index f5f8eb4fc5..13f96a33c4 100644
--- a/utilities/page/question_view/question_view.html
+++ b/utilities/page/question_view/question_view.html
@@ -1,4 +1,4 @@
-<div class="appframe span12">
+<div class="appframe col-span-12">
 	<div class="layout-appframe"></div>
 	<div class="layout-main" style="min-height: 400px">
 		<div class="qv-question-wrapper">
diff --git a/utilities/page/questions/questions.html b/utilities/page/questions/questions.html
index 3138e9c621..bd003ce356 100644
--- a/utilities/page/questions/questions.html
+++ b/utilities/page/questions/questions.html
@@ -1,4 +1,4 @@
-<div class="appframe span12">
+<div class="appframe col-span-12">
 	<div class="layout-appframe"></div>
 	<div class="layout-main-section">
 		<div class="kb-search-wrapper">
diff --git a/website/templates/html/blog_footer.html b/website/templates/html/blog_footer.html
index e439d14729..ecb463c167 100644
--- a/website/templates/html/blog_footer.html
+++ b/website/templates/html/blog_footer.html
@@ -1,4 +1,4 @@
-<div class="span12">
+<div class="col-span-12">
 	<hr />
 	{% if categories %}
 	<h5>Explore posts by categories</h5>
diff --git a/website/templates/html/blog_page.html b/website/templates/html/blog_page.html
index cf1f00e3be..0cabe6dc11 100644
--- a/website/templates/html/blog_page.html
+++ b/website/templates/html/blog_page.html
@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="span12" itemscope itemtype="http://schema.org/BlogPost">
+<div class="col-span-12" itemscope itemtype="http://schema.org/BlogPost">
 	<h2 itemprop="name headline">{{ title }}</h2>
 
 	<!-- begin blog content -->
diff --git a/website/templates/html/blogger.html b/website/templates/html/blogger.html
index e18f86a4dd..878caad5f6 100644
--- a/website/templates/html/blogger.html
+++ b/website/templates/html/blogger.html
@@ -1,10 +1,10 @@
 <div class="row">
-	<div class="span2">
+	<div class="col-span-2">
 		<div class="avatar avatar-large">
 			<img itemprop="thumbnailUrl" src="{{ blogger_info.avatar }}" />
 		</div>
 	</div>
-	<div class="span10">
+	<div class="col-span-10">
 		<h4>{{ blogger_info.full_name }}</h4>
 		<p style="color: #999">{{ blogger_info.bio }}</p>
 		<p><a href="blog?by={{ blogger_info.name }}&by_name={{ blogger_info.full_name }}">
diff --git a/website/templates/html/footer.html b/website/templates/html/footer.html
index 2f1c7fee64..7260fa5b2e 100644
--- a/website/templates/html/footer.html
+++ b/website/templates/html/footer.html
@@ -38,7 +38,7 @@
 	{{ address }}
 	{% endif %}
 	<p><div class="input-append" style="text-align: center; margin:30px 0px;">
-	  <input class="span3" id="footer-subscribe-email" type="text" placeholder="Your email address...">
+	  <input class="col-span-3" id="footer-subscribe-email" type="text" placeholder="Your email address...">
 	  <button class="btn" type="button" id="footer-subscribe-button">Stay Updated</button>
 	</div></p>
 	<script>
diff --git a/website/templates/html/outer.html b/website/templates/html/outer.html
index 570c7691c2..1eaa2ab81e 100644
--- a/website/templates/html/outer.html
+++ b/website/templates/html/outer.html
@@ -7,7 +7,7 @@
 		</div>
 		<div class="clearfix"></div>
 		{% if banner_html %}<div class="row" style="margin-top: 30px;">
-			<div class="span12">{{ banner_html }}</div>
+			<div class="col-span-12">{{ banner_html }}</div>
 		</div>{% endif %}
 		<div class="outer">
 			{% include "app/website/templates/html/navbar.html" %}
diff --git a/website/templates/html/product_breadcrumbs.html b/website/templates/html/product_breadcrumbs.html
index 0b026e7365..f3661cef5e 100644
--- a/website/templates/html/product_breadcrumbs.html
+++ b/website/templates/html/product_breadcrumbs.html
@@ -1,5 +1,5 @@
 {% if obj.parent_groups and len(obj.parent_groups) > 1 %}
-<div class="span12">
+<div class="col-span-12">
 	<div class="clearfix">
 		<ul class="breadcrumb">
 			{% for ig in obj.parent_groups[:-1] %}
diff --git a/website/templates/html/product_group.html b/website/templates/html/product_group.html
index b3c851197e..23ecbc8648 100644
--- a/website/templates/html/product_group.html
+++ b/website/templates/html/product_group.html
@@ -3,7 +3,7 @@
 {% block content %}
 {% include 'app/website/templates/html/product_search_box.html' %}
 {% include 'app/website/templates/html/product_breadcrumbs.html' %}
-<div class="span12">
+<div class="col-span-12">
 	{% if slideshow %}<!-- slideshow -->
 	{% include "app/website/templates/html/slideshow.html" %}
 	{% endif %}
@@ -16,7 +16,7 @@
 	<hr />
 	<div class="row">
 	{% for d in sub_groups %}
-		<div class="span4">
+		<div class="col-span-4">
 			<a href="{{ d.page_name }}">{{ d.name }} ({{ d.count }})</a>
 		</div>
 	{% endfor %}
diff --git a/website/templates/html/product_in_list.html b/website/templates/html/product_in_list.html
index 5cd9eace4e..7a470060a9 100644
--- a/website/templates/html/product_in_list.html
+++ b/website/templates/html/product_in_list.html
@@ -1,4 +1,4 @@
-<div class="span3">
+<div class="col-span-3">
 	<div style="height: 120px; overflow: hidden;">
 		<a href="{{ page_name }}">
 		{%- if website_image -%}
diff --git a/website/templates/html/product_page.html b/website/templates/html/product_page.html
index 23091ad435..9353ce805c 100644
--- a/website/templates/html/product_page.html
+++ b/website/templates/html/product_page.html
@@ -11,9 +11,9 @@
 {% block content %}
 	{% include 'app/website/templates/html/product_search_box.html' %}
 	{% include 'app/website/templates/html/product_breadcrumbs.html' %}
-	<div class="span12 product-page-content" itemscope itemtype="http://schema.org/Product">
+	<div class="col-span-12 product-page-content" itemscope itemtype="http://schema.org/Product">
 		<div class="row">
-			<div class="span6">
+			<div class="col-span-6">
 				{% if slideshow %}
 					{% include "app/website/templates/html/slideshow.html" %}
 				{% else %}
@@ -27,7 +27,7 @@
 					{% endif %}
 				{% endif %}
 			</div>
-			<div class="span6">
+			<div class="col-span-6">
 				<h3 itemprop="name" style="margin-top: 0px;">{{ item_name }}</h3>
 				<p class="help">Item Code: {{ name }}</p>
 				<h4>Product Description</h4>
diff --git a/website/templates/html/product_search_box.html b/website/templates/html/product_search_box.html
index 3b3a95a60f..db1b1d0522 100644
--- a/website/templates/html/product_search_box.html
+++ b/website/templates/html/product_search_box.html
@@ -1,8 +1,8 @@
-<div class="span12 clearfix">
+<div class="col-span-12 clearfix">
 	<div class="pull-right" style="margin-top: 15px;">
 		<form class="form-search">
 			<div class="input-append">
-				<input type="text" class="span2 search-query" 
+				<input type="text" class="col-span-2 search-query" 
 					id="product-search" placeholder="Product Search..." />
 				<button class="btn" id="btn-product-search">
 					<i class="icon-search"></i></button>
diff --git a/website/templates/html/web_page.html b/website/templates/html/web_page.html
index 6b8c914925..884e7cbb51 100644
--- a/website/templates/html/web_page.html
+++ b/website/templates/html/web_page.html
@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="span12" style="margin-top: 15px;">
+<div class="col-span-12" style="margin-top: 15px;">
 	{% include "app/website/templates/html/slideshow.html" %}
 	{{ main_section }}
 </div>
diff --git a/website/templates/js/blog.js b/website/templates/js/blog.js
index fd5a156126..053eae06c0 100644
--- a/website/templates/js/blog.js
+++ b/website/templates/js/blog.js
@@ -69,12 +69,12 @@ var blog = {
 			b.page_name = encodeURIComponent(b.page_name);
 			
 			$(repl('<div class="row">\
-					<div class="span1">\
+					<div class="col-span-1">\
 						<div class="avatar avatar-medium" style="margin-top: 6px;">\
 							<img src="%(avatar)s" />\
 						</div>\
 					</div>\
-					<div class="span11">\
+					<div class="col-span-11">\
 						<h4><a href="%(page_name)s">%(title)s</a></h4>\
 						<p>%(content)s</p>\
 						<p style="color: #aaa; font-size: 90%">\
diff --git a/website/templates/pages/about.html b/website/templates/pages/about.html
index 0cbd562ef9..71ffd33bf1 100644
--- a/website/templates/pages/about.html
+++ b/website/templates/pages/about.html
@@ -3,14 +3,14 @@
 {% set title="About Us" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
 	{{ 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>
 	{% for d in obj.doclist.get({"doctype":"Company History"}) %}
 	<div class="row">
-		<span class="span2"><h4 style="margin:0px;">{{ d.year }}</h4></span>
-		<span class="span10"><p>{{ d.highlight }}</p></span>
+		<span class="col-span-2"><h4 style="margin:0px;">{{ d.year }}</h4></span>
+		<span class="col-span-10"><p>{{ d.highlight }}</p></span>
 	</div>
 	{% endfor %}
 	{% endif %}
@@ -18,12 +18,12 @@
 	<h3>{{ obj.doc.team_members_heading or "Team Members" }}</h3>
 	{% for d in obj.doclist.get({"doctype":"About Us Team Member"}) %}
 	<div class="row" itemscope itemtype="http://schema.org/Person">
-		<span class="span2">
+		<span class="col-span-2">
 			<div class="avatar avatar-large">
 				<img class="avatar" src="{{ d.image_link }}" style="" itemprop="image">
 			</div>
 		</span>
-		<span class="span10"><h4 itemprop="name">{{ d.full_name }}</h4>
+		<span class="col-span-10"><h4 itemprop="name">{{ d.full_name }}</h4>
 			<p itemprop="description">{{ d.bio }}</p>
 		</span>
 	</div>
diff --git a/website/templates/pages/account.html b/website/templates/pages/account.html
index fe2b8587ed..b9f2f4a586 100644
--- a/website/templates/pages/account.html
+++ b/website/templates/pages/account.html
@@ -3,7 +3,7 @@
 {% set title="My Account" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li class="active">My Account</li>
diff --git a/website/templates/pages/attributions.html b/website/templates/pages/attributions.html
index 05e8e8863e..d07cf523e9 100644
--- a/website/templates/pages/attributions.html
+++ b/website/templates/pages/attributions.html
@@ -11,7 +11,7 @@
 {% set title="ERPNext - Web Based, Open Source ERP" %}
 
 {% block content %}
-<div class="layout-attributions span12">
+<div class="layout-attributions col-span-12">
 	<h3>This website is made using these awesome Open Source projects <i class="icon-heart" style="color: red"></i></h3>
 	<hr>
 	<table class="table table-bordered table-striped">
diff --git a/website/templates/pages/blog.html b/website/templates/pages/blog.html
index 7483c7cec7..c9879fedab 100644
--- a/website/templates/pages/blog.html
+++ b/website/templates/pages/blog.html
@@ -11,7 +11,7 @@
 {% set title="Blog" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
 	<h2 id="blog-title">{{ blog_title }}</h2>
 	{% if blog_introduction %}
 	<p>{{ blog_introduction }}</p>
diff --git a/website/templates/pages/contact.html b/website/templates/pages/contact.html
index b9b3cd77a5..f2eca0a66f 100644
--- a/website/templates/pages/contact.html
+++ b/website/templates/pages/contact.html
@@ -7,28 +7,28 @@
 {% set title="Contact Us" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
 	<h3>{{ obj.doc.heading or "Contact Us"}}</h3>
 	<div class="row">
-		<div class="web-form span8">
+		<div class="web-form col-span-8">
 			<div class="row">
-			<div class="span6">
+			<div class="col-span-6">
 				<p id="contact-alert" class="alert" 
 					style="display: none;">&nbsp;</p>
 			</div>
 			</div>
 			<div class="clearfix"></div>
-			<p><select class="span6" name="subject">
+			<p><select class="col-span-6" name="subject">
 				{% for option in obj.query_options %}
 					<option value="{{ option }}">{{ option }}</option>
 				{% endfor %}
 			</select></p>
-			<p><input class="span6" name="email" type="text" placeholder="Your Email Address" /></p>
-			<p><textarea class="span6" rows="10" name="message"></textarea></p>
+			<p><input class="col-span-6" name="email" type="text" placeholder="Your Email Address" /></p>
+			<p><textarea class="col-span-6" rows="10" name="message"></textarea></p>
 			<p><button class="btn btn-primary btn-send">Send</button></p>
 		</div>
 		{% if obj.doc.address %}
-		<div class="span3 alert" style="margin-top: 20px;" itemscope itemtype="http://schema.org/PostalAddress">
+		<div class="col-span-3 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>
diff --git a/website/templates/pages/order.html b/website/templates/pages/order.html
index 8e7bfe7530..8a5db32745 100644
--- a/website/templates/pages/order.html
+++ b/website/templates/pages/order.html
@@ -3,7 +3,7 @@
 {% set title=doc.name %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
@@ -15,16 +15,16 @@
 	{%- if doc.status -%}
 	<div style="font-size: 13px;">
 	<div class="row">
-		<div class="span2">
+		<div class="col-span-2">
 			<div class="label">{{ doc.status }}</div>
 		</div>
-		<div class="span4">
+		<div class="col-span-4">
 			{{ utils.formatdate(doc.transaction_date) }}
 		</div>
 	</div>
 	<br>
 	<div class="row">
-		<div class="span12">
+		<div class="col-span-12">
 		<table class="table table-bordered">
 			<tbody>
 				<tr>
@@ -52,8 +52,8 @@
 		</div>
 	</div>
 	<div class="row">
-		<div class="span6"></div>
-		<div class="span6">
+		<div class="col-span-6"></div>
+		<div class="col-span-6">
 		<table cellspacing=0 width=100%>
 		<tbody>
 			<tr>
diff --git a/website/templates/pages/orders.html b/website/templates/pages/orders.html
index 0c93a68b3a..d52087f8ea 100644
--- a/website/templates/pages/orders.html
+++ b/website/templates/pages/orders.html
@@ -8,7 +8,7 @@ global_number_format = "{{ global_number_format }}";
 currency = "{{ currency }}";
 wn.currency_symbols = {{ currency_symbols }};
 </script>
-<div class="span12">
+<div class="col-span-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
@@ -44,8 +44,8 @@ $(document).ready(function() {
 				
 				// parent
 				var $order = $(repl('<div class="row">\
-					<div class="span3"><a href="order?name=%(name)s">%(name)s</a></div>\
-					<div class="span9"></div>\
+					<div class="col-span-3"><a href="order?name=%(name)s">%(name)s</a></div>\
+					<div class="col-span-9"></div>\
 				</div>', order)).appendTo($list);
 				
 				// items
@@ -53,12 +53,12 @@ $(document).ready(function() {
 					item.export_rate = format_currency(item.export_rate, order.currency);
 					item.export_amount = format_currency(item.export_amount, order.currency);
 					var $item = $(repl('<div class="row">\
-							<div class="span3">%(item_name)s</div>\
-							<div class="span2" style="text-align: right;">%(export_rate)s</div>\
-							<div class="span2" style="text-align: right;">%(qty)s %(stock_uom)s</div>\
-							<div class="span2" style="text-align: right;">%(export_amount)s</div>\
+							<div class="col-span-3">%(item_name)s</div>\
+							<div class="col-span-2" style="text-align: right;">%(export_rate)s</div>\
+							<div class="col-span-2" style="text-align: right;">%(qty)s %(stock_uom)s</div>\
+							<div class="col-span-2" style="text-align: right;">%(export_amount)s</div>\
 						</div>\
-					</div>', item)).appendTo($order.find(".span9"));
+					</div>', item)).appendTo($order.find(".col-span-9"));
 				});
 				
 				$("<hr>").appendTo($list);
diff --git a/website/templates/pages/product_search.html b/website/templates/pages/product_search.html
index 2dab6ff4c2..ce5cd39191 100644
--- a/website/templates/pages/product_search.html
+++ b/website/templates/pages/product_search.html
@@ -18,7 +18,7 @@ $(document).ready(function() {
 </script>
 
 {% include 'app/website/templates/html/product_search_box.html' %}
-<div class="span12">
+<div class="col-span-12">
 	<h3 class="search-results">Search Results</h3>
 	<div id="search-list" class="row">
 		
diff --git a/website/templates/pages/profile.html b/website/templates/pages/profile.html
index d689cfb718..1b7729f318 100644
--- a/website/templates/pages/profile.html
+++ b/website/templates/pages/profile.html
@@ -3,7 +3,7 @@
 {% set title="My Profile" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
diff --git a/website/templates/pages/ticket.html b/website/templates/pages/ticket.html
index 858dd3b338..d154d167e4 100644
--- a/website/templates/pages/ticket.html
+++ b/website/templates/pages/ticket.html
@@ -3,7 +3,7 @@
 {% set title=doc.name %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
@@ -14,13 +14,13 @@
 	<hr>
 	{%- if doc.status -%}
 	<div class="row">
-		<div class="span2">
+		<div class="col-span-2">
 			<div class="label">{{ doc.status }}</div>
 		</div>
-		<div class="span7">
+		<div class="col-span-7">
 			{{ doc.subject }}
 		</div>
-		<div class="span3">
+		<div class="col-span-3">
 			{{ utils.formatdate(doc.transaction_date) }}
 		</div>
 	</div>
diff --git a/website/templates/pages/tickets.html b/website/templates/pages/tickets.html
index 843d10e38a..0ea534b440 100644
--- a/website/templates/pages/tickets.html
+++ b/website/templates/pages/tickets.html
@@ -3,7 +3,7 @@
 {% set title="My Tickets" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
@@ -39,9 +39,9 @@ $(document).ready(function() {
 				
 				// parent
 				var $ticket = $(repl('<div class="row">\
-					<div class="span2"><span class="label">%(status)s</span></div>\
-					<div class="span3"><a href="ticket?name=%(name)s">%(name)s</a></div>\
-					<div class="span7">%(subject)s</div>\
+					<div class="col-span-2"><span class="label">%(status)s</span></div>\
+					<div class="col-span-3"><a href="ticket?name=%(name)s">%(name)s</a></div>\
+					<div class="col-span-7">%(subject)s</div>\
 				</div>', ticket)).appendTo($list);
 				
 				$("<hr>").appendTo($list);
diff --git a/website/templates/pages/writers.html b/website/templates/pages/writers.html
index 67c0b7e6e1..5f0836d4f2 100644
--- a/website/templates/pages/writers.html
+++ b/website/templates/pages/writers.html
@@ -3,7 +3,7 @@
 {% set title="Blog Writers" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
 	<h2 id="blog-title">Blog Writers</h2>
 	{% if writers_introduction %}
 	<p>{{ writers_introduction }}</p>