diff --git a/core/models.py b/core/models.py
index 21d34645..836c4979 100755
--- a/core/models.py
+++ b/core/models.py
@@ -53,7 +53,7 @@ class Campaign(models.Model):
     @property
     def current_total(self):
         p = PaymentManager()
-        return p.query_campaign(campaign=self,summary=True)        
+        return p.query_campaign(campaign=self,summary=True)
         
     def transactions(self, pledged=True, authorized=True):
         p = PaymentManager()
@@ -94,7 +94,10 @@ class Campaign(models.Model):
         self.suspended_reason = None
         self.save()
         return self
-
+       
+    def supporters(self):
+    	translist = self.transactions().values_list('user', flat=True).distinct()
+    	return translist
 
 class Work(models.Model):
     created = models.DateTimeField(auto_now_add=True)
@@ -116,18 +119,18 @@ class Work(models.Model):
     	else:
     		myauthor = ''
     	return myauthor
-    		
-    def last_campaign_status(self):
+    	
+    def last_campaign(self):
         try:
-            last = self.campaigns.order_by('-created')[0].status
+            last = self.campaigns.order_by('-created')[0]
         except:
             last = "No campaign yet"
         return last
 
     def percent_unglued(self):
-        if(self.last_campaign_status() == 'SUCCESSFUL'):
+        if(self.last_campaign().status == 'SUCCESSFUL'):
             return 6;
-        elif(self.last_campaign_status() == 'ACTIVE'):
+        elif(self.last_campaign().status == 'ACTIVE'):
             target = float(self.campaigns.order_by('-created')[0].target)
             if target <= 0:
                 return 6
diff --git a/frontend/templates/campaign.html b/frontend/templates/campaign.html
new file mode 100644
index 00000000..b2a7876e
--- /dev/null
+++ b/frontend/templates/campaign.html
@@ -0,0 +1,178 @@
+{% extends "base.html" %}
+{% block title %}
+Campaign for WORK TITLE GOES HERE
+{% endblock %}
+
+{% block extra_head %}
+<link type="text/css" rel="stylesheet" href="/static/css/campaign.css"  />
+
+<!-- this was written with JS 1.4.2. does it work with the 1.6.3 in base.html? -->
+
+<script type="text/javascript">
+	var $j = jQuery.noConflict();
+	$j(document).ready(function(){
+		$j('.tabs1').click(function(){
+			$j('#tabs').find('.active').removeClass('active');
+			$j(this).addClass('active');
+			$j('.content-block-content').find('.active').removeClass('active');
+			$j('#tabs-1').addClass('active').show(300);
+			$j('#tabs-2').hide(200);
+			$j('#tabs-3').hide(200);
+			$j('#tabs-4').hide(200);
+		});
+		$j('.tabs2').click(function(){
+			$j('#tabs').find('.active').removeClass('active');
+			$j(this).addClass('active');
+			$j('.content-block-content').find('.active').removeClass('active');
+			$j('#tabs-2').addClass('active').show(300);
+			$j('#tabs-1').hide(200);
+			$j('#tabs-3').hide(200);
+			$j('#tabs-4').hide(200);
+		});
+		$j('.tabs3').click(function(){
+			$j('#tabs').find('.active').removeClass('active');
+			$j(this).addClass('active');
+			$j('.content-block-content').find('.active').removeClass('active');
+			$j('#tabs-3').addClass('active').show(300);
+			$j('#tabs-2').hide(200);
+			$j('#tabs-1').hide(200);
+			$j('#tabs-4').hide(200);
+		});
+		$j('.tabs4').click(function(){
+			$j('#tabs').find('.active').removeClass('active');
+			$j(this).addClass('active');
+			$j('.content-block-content').find('.active').removeClass('active');
+			$j('#tabs-4').addClass('active').show(300);
+			$j('#tabs-2').hide(200);
+			$j('#tabs-1').hide(200);
+			$j('#tabs-3').hide(200);
+		});
+	});
+
+
+</script>
+
+{% endblock %}
+
+{% block content %}    
+    <div id="main-container">
+    <div class="js-main">
+    	<div id="js-leftcol">
+        	<div class="jsmodule rounded">
+            	<div class="jsmod-content">
+                	Campaign in Progress: <br />${{ work.last_campaign.current_total }}/${{ work.last_campaign.target }}
+                </div>
+            </div>
+			{% include "explore.html" %}
+		</div>
+        <div id="js-maincol">
+        <div class="js-maincol-inner">
+        	<div class="content-block">
+            	<div class="book-detail">
+                	<div class="book-detail-img"><a href="#">
+                    	<img src="{{ work.cover_image_thumbnail }}" alt="{{ work.title }}" title="{{ work.title }}" width="131" height="192" /></a>
+                    </div>
+                    <div class="book-detail-info">
+                    	<h2 class="book-name">{{ work.title }}</h2>
+                        <h3 class="book-author">{{ work.author }}</h3>
+                        <h3 class="book-year">{{ work.editions.all.0.publication_date }}</h3>
+                        <div class="find-book">
+                        	<label>Find it here</label>
+                        	<!-- todo: these should be a real thing -->
+                            <div class="find-link">
+                            	<a class="find-google" href="#"><img src="/static/images/icons/google.png" align="" title="" /></a>
+                                <a class="find-group" href="#"><img src="/static/images/icons/group.png" align="" title="" /></a>
+                            </div>
+                        </div>
+                        <div class="pledged-info"><div class="pledged-group">{{ work.last_campaign.supporters.count }} Ungluers have pledged ${{ work.last_campaign.current_total }}</div><div class="status"><img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" /></div></div>
+                        <div class="btn_support"><a href="#">Support</a></div>
+                    </div>
+                </div>
+                <!-- needed to put 10px padding on this for supporter page but hurts here. disentangle. -->
+            	<div class="content-block-heading" id="tabs">
+                    <ul class="tabs">
+                        <li class="tabs1"><a href="#">Campaign</a></li>
+                        <li class="tabs2"><a href="#">Community </a></li>
+                        <li class="tabs3"><a href="#">Supporters</a></li>
+                        <li class="tabs4"><a href="#">Details</a></li>
+                    </ul>
+                    	
+                </div>
+                
+                <div class="content-block-content">
+               		<div id="tabs-1" class="tabs">
+                    <div class="tabs-content">
+                    	<h3 class="tabcontent-title">Title</h3>
+                    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
+
+						<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
+
+						<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. </p>
+
+						<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
+                    </div>
+                    </div>
+                    <div id="tabs-2" class="tabs">
+                	<div class="tabs-content">
+                       Being Unglued infomation
+                    </div>
+                    </div>
+                    <div id="tabs-3" class="tabs">
+                	<div class="tabs-content">
+                        Want to Unglue infomation
+                    </div>
+                    </div>
+                    <div id="tabs-4" class="tabs">
+                	<div class="tabs-content">
+                        Want to Unglue infomation xxx
+                    </div>
+                    </div>
+                </div>
+            </div>	
+        </div>
+        </div>
+        <div id="js-rightcol">
+        <div class="js-rightcol-pad rounded">
+        	
+        	<div class="jsmodule">
+            	<h3 class="jsmod-title"><span>Share</span></h3>
+                <div class="jsmod-content">
+                    <ul class="social menu">
+                        <li class="facebook first"><a href="#"><span>Facebook</span></a></li>
+                        <li class="twitter"><a href="#"><span>Twitter</span></a></li>
+                        <li class="lasts email"><a href="#"><span>Email</span></a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="jsmodule">
+            	<h3 class="jsmod-title"><span>Support</span></h3>
+                <div class="jsmod-content">
+                    <ul class="support menu">
+                        <li class="first"><a href="#">
+                        	<span class="menu-item-price">$1</span>
+                            <span class="menu-item-desc">The ebook delivered to your inbox.</span>
+                        </a></li>
+                        <li class=""><a href="#">
+                        	<span class="menu-item-price">$25</span>
+                            <span class="menu-item-desc">The ebook your name in the credits section under "supporters".</span>
+                        </a></li>
+                        <li class=""><a href="#">
+                        	<span class="menu-item-price">$50</span>
+                            <span class="menu-item-desc">The ebook your name & a link of your choice in the credits under "benefactors".</span>
+                        </a></li>
+                        <li class="last"><a href="#">
+                        	<span class="menu-item-price">$100</span>
+                            <span class="menu-item-desc">The ebook your name & a link of your choice in the credits under "benefactors".</span>
+                        </a></li>
+                        
+                        
+                    </ul>
+                </div>
+            </div>
+            
+        </div>
+        </div>
+    </div>
+    </div>
+    
+{% endblock %}
\ No newline at end of file
diff --git a/frontend/templates/explore.html b/frontend/templates/explore.html
index bde4286f..f70bf8c3 100644
--- a/frontend/templates/explore.html
+++ b/frontend/templates/explore.html
@@ -1,4 +1,3 @@
-        <div id="js-leftcol">
             <div class="jsmodule">
                 <h3 class="jsmod-title"><span>Explore</span></h3>
                 <div class="jsmod-content">
@@ -24,4 +23,3 @@
                     </ul>
                 </div>
             </div>
-        </div>
diff --git a/frontend/templates/search.html b/frontend/templates/search.html
index 762b6544..c78d4ec9 100644
--- a/frontend/templates/search.html
+++ b/frontend/templates/search.html
@@ -10,8 +10,9 @@
 {% block content %}
     <div id="main-container">
     <div class="js-main">
-
-{% include "explore.html" %}
+        <div id="js-leftcol">
+			{% include "explore.html" %}
+		</div>
 
         <div id="js-maincol-fr">
         <div class="js-maincol-inner">
diff --git a/frontend/templates/supporter.html b/frontend/templates/supporter.html
index 92457823..a14fb365 100644
--- a/frontend/templates/supporter.html
+++ b/frontend/templates/supporter.html
@@ -183,8 +183,9 @@ how do I integrate the your wishlist thing with the tabs thing?
 
     <div id="main-container">
     <div class="js-main">
-
-{% include "explore.html" %}
+        <div id="js-leftcol">
+			{% include "explore.html" %}
+		</div>
 
         <div id="js-maincol-fr">
         <div class="js-maincol-inner">
@@ -232,10 +233,10 @@ how do I integrate the your wishlist thing with the tabs thing?
                     {% endifequal %}
                     {% else %}
                     {% for work in wishlist.works.all %}
-                       <!-- classify which tab depending on work.last_campaign_status -->
-                       {% if work.last_campaign_status == 'SUCCESSFUL' %}
+                       <!-- classify which tab depending on work.last_campaign.status -->
+                       {% if work.last_campaign.status == 'SUCCESSFUL' %}
                             <div class="tabs tabs-1">
-                       {% else %}{% if work.last_campaign_status == 'ACTIVE' %}
+                       {% else %}{% if work.last_campaign.status == 'ACTIVE' %}
                             <div class="tabs tabs-2">
                        {% else %}
                             <div class="tabs tabs-3">
@@ -267,7 +268,7 @@ how do I integrate the your wishlist thing with the tabs thing?
                         </div>
                         {% endif %}{% endif %}{% endifequal %}
                         <div class="booklist-status">
-                            <span class="booklist-status-text">{{ work.last_campaign_status }}</span>
+                            <span class="booklist-status-text">{{ work.last_campaign.status }}</span>
                             <span class="booklist-status-img">
                                 <img src="/static/images/icon-book{{ work.percent_unglued }}.png" title="book list status" alt="book list status" />
                             </span>
diff --git a/frontend/templates/supporter_panel.html b/frontend/templates/supporter_panel.html
index 0f3ce397..5d14dd4e 100644
--- a/frontend/templates/supporter_panel.html
+++ b/frontend/templates/supporter_panel.html
@@ -236,10 +236,10 @@ how to handle overlong author/titles? Am using truncatewords; truncatechars is b
                     {% else %}
 <div id="main-wrapper">
                     {% for work in wishlist.works.all %}
-                       <!-- classify which tab depending on work.last_campaign_status -->
-                       {% if work.last_campaign_status == 'SUCCESSFUL' %}
+                       <!-- classify which tab depending on work.last_campaign.status -->
+                       {% if work.last_campaign.status == 'SUCCESSFUL' %}
                             <div class="tabs tabs-1">
-                       {% else %}{% if work.last_campaign_status == 'ACTIVE' %}
+                       {% else %}{% if work.last_campaign.status == 'ACTIVE' %}
                             <div class="tabs tabs-2">
                        {% else %}
                             <div class="tabs tabs-3">
@@ -250,7 +250,7 @@ how to handle overlong author/titles? Am using truncatewords; truncatechars is b
         <div class="image">
           <img src="{{ work.cover_image_thumbnail }}" width="120" height="182"/> <b>{{ work.title|truncatewords:5 }}</b>
           <p>{{ work.author|truncatewords:3 }}</p>
-          <p class="green"><b>Status:</b> {{ work.last_campaign_status }}</p>
+          <p class="green"><b>Status:</b> {{ work.last_campaign.status }}</p>
           <div class="read">
             <img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" title="book list status" alt="book list status" />
             <p>100%</p>
@@ -284,7 +284,7 @@ how to handle overlong author/titles? Am using truncatewords; truncatechars is b
        			<div class="add_towish"> <a href="#">Add to Wishlist</a> </div>
 				<div class="white_text"> <b><a href="#">{{ work.title }}</a></b>
 				  <p><a href="#">{{ work.author }}</a></p>
-				  <p><b>Status:</b> {{ work.last_campaign_status }}</p>
+				  <p><b>Status:</b> {{ work.last_campaign.status }}</p>
 				</div>
 				<div class="moreinfo"> <a href="#">More Info</a> </div>
 		  </div>
diff --git a/frontend/templates/work.html b/frontend/templates/work.html
index 5cd7c231..b3b954ff 100644
--- a/frontend/templates/work.html
+++ b/frontend/templates/work.html
@@ -4,7 +4,9 @@
 
 <div id="main-container">
 <div class="js-main">
+<div id="js-leftcol">
 {% include "explore.html" %}
+</div>
 <div id="js-maincol-fr">
 <div class="js-maincol-inner">
 <div class="content-block">
diff --git a/frontend/urls.py b/frontend/urls.py
index e01bff46..b773ea3b 100644
--- a/frontend/urls.py
+++ b/frontend/urls.py
@@ -10,7 +10,7 @@ from regluit.frontend.views import CampaignFormView, GoodreadsDisplayView
 urlpatterns = patterns(
     "regluit.frontend.views",
     url(r"^$", "home", name="home"),
-    url(r"work/(?P<work_id>.+)/$", "work", name="work"),
+    url(r"works/(?P<work_id>.+)/$", "work", name="work"),
     url(r"^supporter/(?P<supporter_username>.+)/$", "supporter", {'template_name': 'supporter.html'}, name="supporter"),
     url(r"^supporter2/(?P<supporter_username>.+)/$", "supporter", {'template_name': 'supporter_panel.html'}, name="supporter2"),
     url(r"^search/$", "search", name="search"),
@@ -27,5 +27,6 @@ urlpatterns = patterns(
     url(r"^goodreads/flush/$","goodreads_flush_assoc", name="goodreads_flush_assoc"),
     url(r"^goodreads/load_shelf/$","goodreads_load_shelf", name="goodreads_load_shelf"),
     url(r"^goodreads/clear_wishlist/$","clear_wishlist", name="clear_wishlist"),
-    url(r"^stub/", "stub", name="stub")
+    url(r"^stub/", "stub", name="stub"),
+    url(r"^work/(?P<isbn>\d+)/$", "campaign", name="campaign")
 )
diff --git a/frontend/views.py b/frontend/views.py
index fa1a8558..66b1d4be 100755
--- a/frontend/views.py
+++ b/frontend/views.py
@@ -42,7 +42,7 @@ def home(request):
 def stub(request):
 	path = request.path[6:]
 	return render(request,'stub.html', {'path': path})
-
+	
 def work(request, work_id):
     work = get_object_or_404(models.Work, id=work_id)
     editions = work.editions.all().order_by('-publication_date')
@@ -339,3 +339,7 @@ def clear_wishlist(request):
         return HttpResponse("Error in clearing wishlist: %s " % (e))
         logger.info("Error in clearing wishlist: %s ", e)
     
+def campaign(request, isbn):
+	isbn = int(isbn)
+	work = models.Edition.get_by_isbn(isbn).work
+	return render(request, 'campaign.html', {'work': work})
diff --git a/static/css/book-panel-unimported.css b/static/css/book-panel-unimported.css
index cda66233..a0083fac 100644
--- a/static/css/book-panel-unimported.css
+++ b/static/css/book-panel-unimported.css
@@ -9,9 +9,11 @@
 #main-wrapper{
     height: 100%;
     width: 725px;
-    margin: 0px auto 0px 10px;
+    margin: 0px;
     padding: 0px 0px;
 }
+
+/*
 .item_wrapper{
     margin: 0px;
     padding: 0px 0px;
@@ -19,10 +21,12 @@
     width: 142px;
     float: left;
 }
+*/
 .panel_item{
     padding:5px 0px;
-    margin:0px auto;
+    margin:0px;
     width:142px;
+    float: left;
 }
 
 .panel_item span.active{
diff --git a/static/css/campaign.css b/static/css/campaign.css
new file mode 100755
index 00000000..4281c08f
--- /dev/null
+++ b/static/css/campaign.css
@@ -0,0 +1,71 @@
+#js-page-wrap{ overflow:hidden;}
+#main-container{ margin-top:20px;}
+
+#js-leftcol .jsmodule{ margin-bottom:10px;}
+#js-leftcol .jsmodule.rounded{ background:#edf3f4; border-radius:20px;}
+#js-leftcol .jsmodule.rounded .jsmod-content{ padding:10px 20px; font-weight:bold; border:none; margin:0;}
+
+.book-detail{ float:left; width:100%; clear:both; display:block;}
+.book-detail-img{ float: left; margin-right:10px; width:151px;}
+.book-detail-img img{ padding:5px; border: solid 5px #edf3f4;}
+.book-detail-info{ float:left; width:309px;}
+.book-detail-info h2.book-name,
+.book-detail-info h3.book-author,
+.book-detail-info h3.book-year{ padding:0; margin:0; line-height:normal;}
+.book-detail-info h2.book-name{ font-size:18px; text-transform:capitalize; font-weight:bold; color:#3d4e53;}
+.book-detail-info h3.book-author,
+.book-detail-info h3.book-year{ font-size:12px; font-weight:normal; color:#6994a3;}
+
+.book-detail-info > div{ width:100%; clear:both; display:block; overflow:hidden; border-top:1px solid #edf3f4;padding:10px 0;}
+.book-detail-info .find-book{ margin-top:15px; }
+.book-detail-info .find-book label{ float:left; line-height:31px;}
+.book-detail-info .find-link{ float:right;}
+.book-detail-info .pledged-info{ padding:0;}
+.book-detail-info .pledged-group{ padding:10px 40px 10px 0; float:left;}
+.book-detail-info .status { float: right; padding-top: 4px;}
+.book-detail-info .btn_support a{ background:url(/static/images/btn_bg.png) 0 0  no-repeat; width:104px; height:41px; line-height:41px; display:block; color:#fff; font-weight:bold; text-align:center; }
+
+
+#tabs{ 
+	border-bottom: 4px solid #6994a3;
+    clear: both;
+    float: left;
+    margin-top: 10px;
+    width: 100%;
+}
+#tabs ul.book-list-view { margin-bottom:4px !important;}
+#tabs-1,
+#tabs-2,
+#tabs-3{ margin-left:10px;}
+#tabs-2,
+#tabs-3,
+#tabs-4{ display:none;}
+
+ul.tabs{ float:left; padding:0; margin:0; list-style:none;}
+ul.tabs li{ float: left; height:46px; line-height:46px; margin-right:2px; margin-bottom:1px;}
+ul.tabs li a{ height:46px; line-height:46px; display:block;  text-align:center;padding:0 10px; min-width:80px;border-radius:7px 7px 0 0; background:#d6dde0; color:#3d4e53;}
+ul.tabs li a:hover,
+ul.tabs li.active a{ background:#6994a3; color:#fff;}
+
+#js-rightcol{ float:right; width:235px; }
+.js-rightcol-pad{border:1px solid #d6dde0; border-radius:10px; padding:10px;} 
+
+#js-maincol-fr{ float:right; width:725px;}
+#js-maincol{ float:left; width:470px; margin:0 10px;}
+#js-maincol div.content-block{ background: none; padding:0;}
+
+
+#js-rightcol h3.jsmod-title{ background:#a7c1ca; border-radius:10px; padding:10px; height:auto; height:auto; font-style:normal; font-size:14px; margin:0 0 10px 0;}
+#js-rightcol h3.jsmod-title span{ padding:0; color:#fff;font-style:normal;}
+#js-rightcol .jsmodule{ margin-bottom:10px;}
+#js-rightcol .jsmod-content{ padding-left:10px;}
+
+ul.social li{ padding:5px 0 5px 30px; height:28px; line-height:28px; }
+ul.social li.facebook{ background:url(/static/images/icons/facebook.png) left center no-repeat;}
+ul.social li.twitter{ background:url(/static/images/icons/twitter.png) left center no-repeat;}
+ul.social li.email{ background:url(/static/images/icons/email.png) left center no-repeat;}
+ul.support li{ border-bottom:1px solid #d6dde0; padding:10px 15px 10px 0; background:url(/static/images/icons/r-arrow.png) right center no-repeat;}
+ul.support span{ display:block;}
+ul.support span.menu-item-price{ font-size:18px;}
+
+a{ color:#3d4e53; font-size:12px;}
\ No newline at end of file
diff --git a/static/css/layout.css b/static/css/layout.css
index 3d9fa653..3bafd2a0 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -741,7 +741,6 @@ a.my-setting.active {
   border-bottom: 4px solid #8DC63F;
   clear: both;
   float: left;
-  margin-left: 10px;
   margin-top: 10px;
   width: 100%;
 }
@@ -784,21 +783,203 @@ ul.tabs li a:hover, ul.tabs li.active a {
 .book-list span.rounded > span a {
   text-transform: capitalize;
 }
-
-/* work page */
-
-ul.edition-list {
-    list-style: none;
+.book_panel {
+  margin: 20px  auto;
+  padding: 0 5px 5px 5px;
+  height: 300px;
+  width: 120px;
+  line-height: 16px;
+  background-color: #ffffff;
+  color: #3d4e53;
+  border: 5px solid #edf3f4;
 }
-ul.edition-list li {
-    clear: both;
-    padding: 10px;
-    height: 80px;
-    border-bottom: thin gray solid;
+.book_panel a {
+  font-size: 12pt;
+  color: #73a334;
+  text-decoration: none;
 }
-li.edition img.cover {
-    vertical-align: top;
+.book_panel a:hover {
+  color: #8dc63f;
+  text-decoration: none;
 }
-li.edition span.publisher {
-    font-weight: bold;
+.book_panel p {
+  margin: 0;
+}
+.book_panel img {
+  padding: 5px 0;
+  margin: 0;
+}
+.book_panel:hover {
+  color: #3d4e53;
+}
+.green {
+  color: #8dc63f;
+  text-align: left;
+}
+.book_panel_back {
+  margin: 0  auto;
+  padding: 10px;
+  height: 295px;
+  width: 120px;
+  line-height: 16px;
+  background-color: #8dc63f;
+  color: #ffffff;
+  position: relative;
+}
+.book_panel_back a {
+  font-size: 12px;
+  font-weight: normal;
+}
+.unglued_white {
+  margin: 0  auto;
+  margin-bottom: 5px;
+  padding: 10px 0;
+}
+.status {
+  color: #8dc63f;
+  text-align: left;
+}
+.read_itbutton {
+  width: 118px;
+  height: 35px;
+  padding: 0 0;
+  background: #FFFFFF;
+  margin: 0;
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #81bb38;
+}
+.read_itbutton a {
+  line-height: 40px;
+  font-size: 11px;
+  background: url("/static/images/book-panel/book_icon.png") no-repeat left center;
+  background-position: 10px center;
+  padding: 0 0 0 30px;
+  color: #73a334;
+  text-decoration: none;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.read_itbutton a:hover {
+  text-decoration: none;
+}
+#add_towish {
+  width: 130px;
+  height: 30px;
+  padding: 0 0;
+  margin: 10px auto;
+}
+#add_towish a {
+  line-height: 40px;
+  font-size: 11px;
+  background-image: url("/static/images/book-panel/add_wish_icon.png") no-repeat left center;
+  padding: 8px 5px 8px 21px;
+  font-weight: bold;
+  color: #FFFFFF;
+  text-decoration: none;
+  text-transform: uppercase;
+  border-width: 1px 0px;
+  border-style: solid none;
+  border-color: #FFFFFF;
+}
+#add_towish a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+#white_text {
+  width: 130px;
+  height: 40px;
+  padding: 17px 0;
+  margin: 0;
+}
+#white_text a {
+  color: #FFFFFF;
+  text-decoration: none;
+}
+#white_text a:hover {
+  color: #3d4e53;
+  text-decoration: none;
+}
+#moreinfo {
+  width: 130px;
+  height: 30px;
+  padding: 0;
+  margin: 15px 0 0;
+}
+#moreinfo a {
+  line-height: 40px;
+  font-size: 11px;
+  background-image: url("/static/images/book-panel/more_icon.png") no-repeat left center;
+  padding: 8px 42px 8px 20px;
+  font-weight: bold;
+  padding-left: 20px;
+  color: #FFFFFF;
+  text-decoration: none;
+  text-transform: uppercase;
+  border-width: 1px 0px;
+  border-style: solid none;
+  border-color: #FFFFFF;
+}
+#moreinfo a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+.green {
+  color: #8dc63f;
+  text-align: left;
+}
+#graypanel a {
+  color: #3d4e53;
+  text-decoration: none;
+}
+.read {
+  margin: 15px auto;
+  padding: 0;
+  width: 140px;
+  color: #8dc63f;
+  height: 40px;
+  line-height: 25px;
+  float: left;
+}
+.read p {
+  margin: 0;
+  padding: 10px 3px;
+  width: 50px;
+  font-size: 10pt;
+  float: left;
+}
+.read img {
+  padding: 5px;
+  margin: 0;
+  float: left;
+}
+.right_add {
+  padding: 10px;
+  margin: 0;
+  float: right;
+}
+p.right_add {
+  float: right;
+  padding: 10px 10px 0 0;
+  width: 24px;
+}
+/* slideout hover state */
+.book_panel_interior {
+  float: left;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  left: 0;
+}
+.book_panel_interior img {
+  z-index: 100;
+}
+.book_panel_interior span {
+  position: absolute;
+  bottom: 0;
+  left: -10px;
+  top: -5px;
+  z-index: 1000;
+  height: auto;
 }
diff --git a/static/css/supporter_layout.css b/static/css/supporter_layout.css
index 026a2e60..cafa3ca2 100644
--- a/static/css/supporter_layout.css
+++ b/static/css/supporter_layout.css
@@ -104,4 +104,12 @@ ul.menu{
 a.readon{ background:url(../images/bg.png) 100% -72px no-repeat; color:#fff; text-transform:capitalize; display:block; float:right; font-size:13px; font-weight:bold;}
 a.readon span{ background:url(../images/bg.png) -770px -108px no-repeat; margin-right:34px; padding:0 5px 0 20px; height:36px; line-height:36px; display:block;}
 
-a{ font-weight:bold; font-size:13px; text-decoration:none; cursor:pointer;}
\ No newline at end of file
+a{ font-weight:bold; font-size:13px; text-decoration:none; cursor:pointer;}
+
+div.content-block-content {
+  padding-left: 10px;
+}
+
+#tabs {
+  margin-left: 10px;
+}
\ No newline at end of file
diff --git a/static/images/btn_bg.png b/static/images/btn_bg.png
new file mode 100755
index 00000000..bdb7b4f7
Binary files /dev/null and b/static/images/btn_bg.png differ
diff --git a/static/images/icons/email.png b/static/images/icons/email.png
new file mode 100755
index 00000000..8a1daa89
Binary files /dev/null and b/static/images/icons/email.png differ
diff --git a/static/images/icons/facebook.png b/static/images/icons/facebook.png
new file mode 100755
index 00000000..e3e05ea0
Binary files /dev/null and b/static/images/icons/facebook.png differ
diff --git a/static/images/icons/google.png b/static/images/icons/google.png
new file mode 100755
index 00000000..11010d03
Binary files /dev/null and b/static/images/icons/google.png differ
diff --git a/static/images/icons/group.png b/static/images/icons/group.png
new file mode 100755
index 00000000..45742541
Binary files /dev/null and b/static/images/icons/group.png differ
diff --git a/static/images/icons/r-arrow.png b/static/images/icons/r-arrow.png
new file mode 100755
index 00000000..23cf145a
Binary files /dev/null and b/static/images/icons/r-arrow.png differ
diff --git a/static/images/icons/twitter.png b/static/images/icons/twitter.png
new file mode 100755
index 00000000..9f028cdd
Binary files /dev/null and b/static/images/icons/twitter.png differ
diff --git a/static/less/book-panel-unimported.less b/static/less/book-panel-unimported.less
index f22587db..5bb2cb95 100644
--- a/static/less/book-panel-unimported.less
+++ b/static/less/book-panel-unimported.less
@@ -41,20 +41,15 @@
 #main-wrapper{
     height: 100%;
     width: 725px;
-    margin: 0px auto 0px 10px;
-    padding: 0px 0px;
-}
-.item_wrapper{
     margin: 0px;
     padding: 0px 0px;
-    height: auto;
-    width: 142px;
-    float: left;
 }
+
 .panel_item{
     padding:5px 0px;
-    margin:0px auto;
+    margin:0px;
     width:142px;
+    float: left;
 
 	span.active{
 	    padding:15px;
@@ -64,7 +59,7 @@
 }
 
 .greenpanel {
-	.greenpanelstuff
+	.greenpanelstuff;
     margin: auto;
     padding: 0px 5px 5px 5px;
     height: 300px;
@@ -101,7 +96,7 @@
 /*2 start*/
 
 .greenpanel2 {
-	.greenpanelstuff
+	.greenpanelstuff;
     margin: 0px  auto;
     padding: 10px;
     height: 295px;
@@ -127,7 +122,7 @@
     
     a {
     	.greenpanelactionitems(10px);
-    	background: url(@{image-base}book-panel/book_icon.png) no-repeat left center;
+    	background: url(""@{image-base}book-panel/book_icon.png") no-repeat left center;
     	padding:0px 0px 0px 30px;
     	color:@dark-green;
     	
@@ -146,7 +141,7 @@
     
     a {
     	.greenpanelactionitems(left);
-    	background-image: url(@{image-base}book-panel/add_wish_icon.png);
+    	background-image: url("@{image-base}book-panel/add_wish_icon.png");
     	padding:8px 5px 8px 21px;
     	color:#FFFFFF;
 		.greenpanelactionborders()
@@ -178,7 +173,7 @@
     
     a {
     	.greenpanelactionitems(left);
-    	background-image: url(@{image-base}book-panel/more_icon.png);
+    	background-image: url("@{image-base}book-panel/more_icon.png");
     	padding:8px 42px 8px 20px;
     	padding-left:20px;
     	color:#FFFFFF;
@@ -235,7 +230,7 @@
 }
 .Unglue_itbutton a{
     .greenpanelactionitems(2px);
-    background-image: url(@{image-base}book-panel/unglue_icon.png);
+    background-image: url("@{image-base}book-panel/unglue_icon.png");
     padding:5px 0px 0px 20px;
     color:@text-blue;
     text-align:right;
@@ -253,7 +248,7 @@ text-decoration:none;
 }
 .add_towish2 a{
 	.greenpanelactionitems(left);
-    background-image: url(@{image-base}book-panel/add_gray.png);
+    background-image: url("@{image-base}book-panel/add_gray.png");
     padding:8px 0px;
     padding-left:20px;
     color:@text-blue;
@@ -284,7 +279,7 @@ text-decoration:none;
 .moreinfo2 a{
     line-height:40px;
     font-size:12px;
-    background-image: url(@{image-base}book-panel/gray_more_info.png);
+    background-image: url("@{image-base}book-panel/gray_more_info.png");
     background-repeat: no-repeat;
     background-position: left center;
     padding:8px 35px;
diff --git a/static/less/book_list-test.css b/static/less/book_list-test.css
new file mode 100644
index 00000000..b2f26c20
--- /dev/null
+++ b/static/less/book_list-test.css
@@ -0,0 +1,184 @@
+.header-text {
+  height: 36px;
+  line-height: 36px;
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 13px;
+  letter-spacing: -0.05em;
+}
+.panelborders {
+  border-width: 1px 0px;
+  border-style: solid none;
+  border-color: #FFFFFF;
+}
+div.book-list.listview {
+  clear: both;
+  display: block;
+  vertical-align: middle;
+  height: 43px;
+  line-height: 43px;
+  margin: 0 5px 0 0;
+  padding: 7px 0;
+}
+div.book-list.listview.row1 {
+  background: #f6f9f9;
+}
+div.book-list.listview.row2 {
+  background: #fff;
+}
+div.book-list.listview div.unglue-this {
+  float: left;
+}
+div.book-list.listview div.book-thumb {
+  margin-right: 5px;
+  float: left;
+}
+div.book-list.listview div.book-name {
+  width: 260px;
+  margin-right: 10px;
+  background: url("../images/booklist/booklist-vline.png") right center no-repeat;
+  float: left;
+}
+div.book-list.listview div.book-name span {
+  display: block;
+  line-height: normal;
+  height: 43px;
+  line-height: 43px;
+}
+div.book-list.listview div.add-wishlist, div.book-list.listview div.remove-wishlist {
+  margin-right: 10px;
+  padding-right: 10px;
+  background: url("../images/booklist/booklist-vline.png") right center no-repeat;
+  float: left;
+}
+div.book-list.listview div.add-wishlist a, div.book-list.listview div.remove-wishlist a {
+  font-weight: normal;
+  color: #3d4e53;
+  text-transform: none;
+  background: url("../images/booklist/add-wishlist.png") left center no-repeat;
+  padding-left: 20px;
+}
+div.book-list.listview div.booklist-status {
+  margin-right: 7px;
+  float: left;
+}
+.booklist-status.listview span.booklist-status-label {
+  display: none;
+}
+.booklist-status.listview span.booklist-status-text {
+  float: left;
+  display: block;
+  padding-right: 5px;
+  text-transform: capitalize;
+}
+.booklist-status.listview .booklist-status-img p {
+  display: none;
+}
+div.unglue-this a {
+  text-transform: uppercase;
+  color: #3d4e53;
+  font-size: 11px;
+  font-weight: bold;
+}
+div.unglue-this.complete .unglue-this-inner1 {
+  background: url("/static/images/booklist/bg.png") 0 -84px no-repeat;
+  height: 42px;
+}
+div.unglue-this.complete .unglue-this-inner2 {
+  background: url("/static/images/booklist/bg.png") 100% -126px no-repeat;
+  margin-left: 29px;
+  height: 42px;
+  padding-right: 10px;
+}
+div.unglue-this.complete a {
+  color: #fff;
+  display: block;
+}
+div.unglue-this.processing .unglue-this-inner1 {
+  background: url("/static/images/booklist/bg.png") 0 0 no-repeat;
+  height: 42px;
+}
+div.unglue-this.processing .unglue-this-inner2 {
+  background: url("/static/images/booklist/bg.png") 100% -42px no-repeat;
+  margin-left: 25px;
+  height: 42px;
+  padding-right: 10px;
+}
+ul.book-list-view {
+  padding: 0;
+  margin: 15px;
+  float: right;
+  list-style: none;
+}
+ul.book-list-view li {
+  float: left;
+  margin-right: 10px;
+  display: block;
+  vertical-align: middle;
+  line-height: 22px;
+}
+div.navigation {
+  float: left;
+  clear: both;
+  width: 100%;
+  color: #37414d;
+}
+ul.navigation {
+  float: right;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+ul.navigation li {
+  float: left;
+  line-height: normal;
+  margin-right: 5px;
+}
+ul.navigation li a {
+  color: #37414d;
+  font-weight: normal;
+}
+ul.navigation li.arrow-l a {
+  background: url("/static/images/booklist/bg.png") 0 -168px no-repeat;
+  width: 10px;
+  height: 15px;
+  display: block;
+  text-indent: -10000px;
+}
+ul.navigation li.arrow-r a {
+  background: url("/static/images/booklist/bg.png") -1px -185px no-repeat;
+  width: 10px;
+  height: 15px;
+  display: block;
+  text-indent: -10000px;
+}
+ul.navigation li a:hover, ul.navigation li.active a {
+  color: #8ac3d7;
+  text-decoration: underline;
+}
+.unglue-button {
+  display: block;
+  border: 0;
+}
+.book-thumb.listview a {
+  display: block;
+  height: 50px;
+  width: 32px;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+.book-thumb.listview a:hover {
+  overflow: visible;
+  z-index: 1000;
+  border: none;
+}
+.book-thumb.listview a img {
+  position: absolute;
+  top: -20px;
+  left: -50px;
+}
+.listview.author {
+  display: none;
+}
diff --git a/static/less/book_list-test.less b/static/less/book_list-test.less
new file mode 100644
index 00000000..28607420
--- /dev/null
+++ b/static/less/book_list-test.less
@@ -0,0 +1,200 @@
+@import "variables.less";
+
+div.book-list.listview{ 
+    clear:both;
+    display:block;
+    vertical-align: middle;
+    .height(43px);
+    margin:0 5px 0 0;
+    padding:7px 0;
+    // overflow:hidden;
+
+	&.row1 {
+		background:#f6f9f9;
+	}
+	
+	&.row2 {
+		background:#fff;
+	}
+	
+	div {
+		&.unglue-this {
+			float: left;
+		}
+		&.book-thumb {
+			margin-right: 5px;
+			float: left;
+		}
+		&.book-name {
+			width:260px;
+			margin-right:10px;
+			background:url("../images/booklist/booklist-vline.png") right center no-repeat;
+			float: left;
+			
+			span { 
+				display:block;
+				line-height:normal;
+				.height(43px);
+			}			
+		}
+		&.add-wishlist, &.remove-wishlist {
+			margin-right: 10px;
+			padding-right: 10px;
+			background:url("../images/booklist/booklist-vline.png") right center no-repeat;
+			float: left;
+			
+			a {
+				font-weight:normal;
+				color:@text-blue;
+				text-transform: none;
+				background:url("../images/booklist/add-wishlist.png") left center no-repeat;
+				padding-left:20px;
+			}
+			
+		}
+		&.booklist-status {
+			margin-right:7px;
+			float: left;
+		}
+	}
+}
+
+.booklist-status.listview {
+	span.booklist-status-label {
+		display: none;
+	}
+
+	span.booklist-status-text {
+		float:left;
+		display:block;
+		padding-right:5px;
+		text-transform:capitalize;
+	}
+	
+	.booklist-status-img p {
+		display: none;
+	}
+}
+
+div.unglue-this {
+	a {
+		text-transform:uppercase;
+		color:@text-blue;
+		font-size:11px;
+		font-weight:bold;
+	}
+	
+	&.complete {
+		.unglue-this-inner1 {
+			background:url(@background-booklist) 0 -84px no-repeat;
+			height:42px;
+		}
+		.unglue-this-inner2 {
+			background:url(@background-booklist) 100% -126px no-repeat;
+			margin-left:29px;
+			height:42px;
+			padding-right:10px;
+		}
+		a {
+			color:#fff;
+			display: block;
+		}
+	}
+
+	&.processing {
+		.unglue-this-inner1 {
+			background:url(@background-booklist) 0 0 no-repeat; 
+			height:42px;
+		}
+	
+		.unglue-this-inner2 {
+			background:url(@background-booklist) 100% -42px no-repeat;
+			margin-left:25px;
+			height:42px;
+			padding-right:10px;
+		}
+	}
+}
+
+ul.book-list-view {
+	padding:0;
+	margin:15px;
+	float:right;
+	list-style:none;
+	
+	li {
+		float:left;
+		margin-right:10px;
+		display:block;
+		vertical-align:middle;
+		line-height:22px;
+	}
+}
+
+div.navigation {
+	float: left;
+	clear:both;
+	width:100%;
+	color:@dark-blue;
+}
+
+ul.navigation {
+	float:right;
+	padding:0;
+	margin:0;
+	list-style:none;
+	
+	li {
+		float: left;
+		line-height:normal;
+		margin-right:5px;
+		
+		a {
+			color:@dark-blue;
+			font-weight:normal;			
+		}
+		
+		&.arrow-l a {
+			.navigation-arrows(0, -168px);
+		}
+		
+		&.arrow-r a {
+			.navigation-arrows(-1px, -185px);
+		}		
+	}
+}
+
+ul.navigation li a:hover, ul.navigation li.active a {
+	color: #8ac3d7;
+	text-decoration:underline;
+}
+
+.unglue-button {
+	display: block;
+	border: 0;
+}
+
+.book-thumb.listview a {
+	display:block;
+    height: 50px;
+    width: 32px;
+    overflow:hidden;
+    position:relative;
+    z-index:1;
+    
+    &:hover {
+		overflow:visible;
+		z-index:1000;
+		border:none;		
+	}
+    
+    img {
+    	position:absolute;
+    	top:-20px;
+		left:-50px;
+    }
+}
+
+.listview.author {
+	display: none;
+}
diff --git a/static/less/book_panel_unimported.css b/static/less/book_panel_unimported.css
new file mode 100644
index 00000000..7bf9c83b
--- /dev/null
+++ b/static/less/book_panel_unimported.css
@@ -0,0 +1,413 @@
+.header-text {
+  height: 36px;
+  line-height: 36px;
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 13px;
+  letter-spacing: -0.05em;
+}
+.panelborders {
+  border-width: 1px 0px;
+  border-style: solid none;
+  border-color: #FFFFFF;
+}
+.greenpanelstuff {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  width: 120px;
+  line-height: 16px;
+}
+.greenpanelactionborders {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: #FFFFFF;
+  border-bottom-color: #FFFFFF;
+}
+.panelhoverlink {
+  text-decoration: none;
+  color: #3d4e53;
+}
+@charset "utf-8";
+* {
+  padding: 0px;
+  margin: 0px;
+}
+/*main_Css*/
+#main-wrapper {
+  height: 100%;
+  width: 725px;
+  margin: 0px;
+  padding: 0px 0px;
+}
+.panel_item {
+  padding: 5px 0px;
+  margin: 0px;
+  width: 142px;
+  float: left;
+}
+.panel_item span.active {
+  padding: 15px;
+  margin: 15px 0px;
+  font-weight: bold;
+}
+.greenpanel {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  width: 120px;
+  line-height: 16px;
+  margin: auto;
+  padding: 0px 5px 5px 5px;
+  height: 300px;
+  background-color: #ffffff;
+  color: #3d4e53;
+  border: 5px solid #edf3f4;
+}
+.greenpanel:hover {
+  color: #3d4e53;
+}
+.greenpanel img {
+  padding: 5px 0px;
+  margin: 0px;
+}
+.greenpanel a {
+  color: #73a334;
+  text-decoration: none;
+}
+.greenpanel a:hover {
+  color: #8dc63f;
+  text-decoration: none;
+}
+.green {
+  color: #8dc63f;
+  text-align: left;
+}
+/*2 start*/
+.greenpanel2 {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  width: 120px;
+  line-height: 16px;
+  margin: 0px auto;
+  padding: 10px;
+  height: 295px;
+  background-color: #8dc63f;
+  color: #ffffff;
+  position: relative;
+}
+.unglued_white {
+  font-size: 12px;
+  margin: 0px  auto;
+  margin-bottom: 5px;
+  padding: 10px 0px;
+}
+.read_itbutton {
+  width: 118px;
+  height: 35px;
+  padding: 0px 0px;
+  background: #FFFFFF;
+  margin: 0px;
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #81bb38;
+}
+.read_itbutton a {
+  line-height: 40px;
+  font-size: 11px;
+  background-repeat: no-repeat;
+  background-position: 10px center;
+  font-weight: bold;
+  text-decoration: none;
+  text-transform: uppercase;
+  background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
+  padding: 0px 0px 0px 30px;
+  color: #73a334;
+}
+.read_itbutton a:hover {
+  text-decoration: none;
+}
+.add_towish {
+  width: 125px;
+  height: 30px;
+  padding: 0px 0px;
+  margin: 15px auto;
+}
+.add_towish a {
+  line-height: 40px;
+  font-size: 11px;
+  background-repeat: no-repeat;
+  background-position: left center;
+  font-weight: bold;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-image: url(/static/images/book-panel/add_wish_icon.png);
+  padding: 8px 5px 8px 21px;
+  color: #FFFFFF;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: #FFFFFF;
+  border-bottom-color: #FFFFFF;
+}
+.add_towish a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+.white_text {
+  width: 130px;
+  height: 40px;
+  padding: 17px 0px;
+  margin: 0px;
+}
+.white_text a {
+  color: #FFFFFF;
+  text-decoration: none;
+}
+.white_text a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+/*more info*/
+.moreinfo {
+  width: 130px;
+  height: 30px;
+  padding: 0px;
+  margin: 15px 0 0;
+}
+.moreinfo a {
+  line-height: 40px;
+  font-size: 11px;
+  background-repeat: no-repeat;
+  background-position: left center;
+  font-weight: bold;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-image: url(/static/images/book-panel/more_icon.png);
+  padding: 8px 42px 8px 20px;
+  padding-left: 20px;
+  color: #FFFFFF;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: #FFFFFF;
+  border-bottom-color: #FFFFFF;
+}
+.moreinfo a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+/*end of the more info/*
+/*end the 2greenpanel*/
+/*2 start*/
+.graypanel {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  margin: 20px  auto;
+  padding: 4px 5px;
+  height: 300px;
+  width: 130px;
+  line-height: 16px;
+  background-color: #edf3f4;
+  color: #3d4e53;
+  border: 5px solid #edf3f4;
+}
+.unglued_white2 {
+  font-size: 12px;
+  margin: 3px  auto;
+  padding: 5px 0px;
+}
+.green {
+  color: #8dc63f;
+  text-align: left;
+}
+.graypanel a {
+  text-decoration: none;
+  color: #3d4e53;
+}
+.graypanel a:hover {
+  color: #8dc63f;
+  text-decoration: none;
+}
+.Unglue_itbutton {
+  width: 110px;
+  height: 40px;
+  padding: 0px 9px;
+  background: #FFFFFF;
+  margin: 0px auto;
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #d4dcdd;
+}
+.Unglue_itbutton a {
+  line-height: 40px;
+  font-size: 11px;
+  background-repeat: no-repeat;
+  background-position: 2px center;
+  font-weight: bold;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-image: url(/static/images/book-panel/unglue_icon.png);
+  padding: 5px 0px 0px 20px;
+  color: #3d4e53;
+  text-align: right;
+  font-family: "LucidaGrandeBold";
+}
+.Unglue_itbutton a:hover {
+  text-decoration: none;
+}
+.add_towish2 {
+  width: 130px;
+  height: 30px;
+  padding: 0px 0px;
+  margin: 15px auto;
+}
+.add_towish2 a {
+  line-height: 40px;
+  font-size: 11px;
+  background-repeat: no-repeat;
+  background-position: left center;
+  font-weight: bold;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-image: url(/static/images/book-panel/add_gray.png);
+  padding: 8px 0px;
+  padding-left: 20px;
+  color: #3d4e53;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: #FFFFFF;
+  border-bottom-color: #FFFFFF;
+  font-family: "LucidaGrandeBold";
+}
+.add_towish2 a:hover {
+  text-decoration: none;
+}
+.white_text2 {
+  width: 130px;
+  height: 40px;
+  padding: 13px 0px;
+  margin: 0px;
+}
+.white_text2 a, a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+/*more info*/
+.moreinfo2 {
+  width: 130px;
+  height: 30px;
+  padding: 0px 20px 0px 0px;
+  margin: 15px auto;
+}
+.moreinfo2 a {
+  line-height: 40px;
+  font-size: 12px;
+  background-image: url(/static/images/book-panel/gray_more_info.png);
+  background-repeat: no-repeat;
+  background-position: left center;
+  padding: 8px 35px;
+  font-weight: bold;
+  padding-left: 20px;
+  color: #3d4e53;
+  text-decoration: none;
+  text-transform: uppercase;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: #FFFFFF;
+  border-bottom-color: #FFFFFF;
+  font-family: "LucidaGrandeBold";
+}
+.moreinfo2 a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+/*end the 2greenpanel*/
+.read {
+  margin: 15px auto 5px auto;
+  padding: 0px;
+  width: 140px;
+  color: #8dc63f;
+  height: 40px;
+  line-height: 25px;
+  float: left;
+  position: absolute;
+  bottom: -15px;
+}
+.read p {
+  margin: 0px;
+  padding: 10px 3px;
+  width: 50px;
+  font-size: 10pt;
+  float: left;
+}
+.read img {
+  padding: 5px 0px;
+  margin: 0px;
+  float: left;
+}
+.right_add {
+  padding: 10px;
+  margin: 0px;
+  float: right;
+}
+p.right_add {
+  float: right;
+  padding: 10px 10px 0 0;
+  width: 24px;
+}
+/**/
+.read2 {
+  margin: 15px auto;
+  padding: 0px;
+  width: 130px;
+  color: #8dc63f;
+  height: 40px;
+  line-height: 25px;
+}
+.read2 p {
+  margin: 0px;
+  padding: 10px 3px;
+  width: 50px;
+  font-size: 10pt;
+  float: left;
+}
+.read2 img {
+  padding: 0px;
+  margin: 0px;
+  float: left;
+}
+.right_add {
+  padding: 10px;
+  margin: 0px;
+  float: right;
+}
+/* --------------- ( slideout hover state ) --------------------------------------------- */
+.image {
+  float: left;
+  position: relative;
+  margin: 0px;
+  padding: 0px;
+  left: 0px;
+  height: 100%;
+}
+.image img {
+  z-index: 100;
+}
+.image span {
+  position: absolute;
+  bottom: 0;
+  left: -10px;
+  top: -5px;
+  z-index: 1000;
+  height: auto;
+}
diff --git a/static/less/book_panel_unimported.less b/static/less/book_panel_unimported.less
new file mode 100644
index 00000000..2c36dd28
--- /dev/null
+++ b/static/less/book_panel_unimported.less
@@ -0,0 +1,378 @@
+@import "variables.less";
+
+// Local variables
+.greenpanelstuff {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    width: 120px;
+    line-height:16px;
+}
+
+.greenpanelactionitems(@pos) {
+    line-height:40px;
+    font-size:11px;
+    background-repeat: no-repeat;
+    background-position: @pos center;
+    font-weight:bold;
+    text-decoration:none;
+    text-transform: uppercase;
+}
+
+.greenpanelactionborders {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+    border-top-style: solid;
+    border-bottom-style: solid;
+    border-top-color: #FFFFFF;
+   	border-bottom-color: #FFFFFF;
+}
+
+.panelhoverlink {
+	text-decoration:none;
+	color:@text-blue;
+}
+
+@charset "utf-8";
+*{
+    padding:0px;
+    margin:0px;
+}
+
+/*main_Css*/
+
+#main-wrapper{
+    height: 100%;
+    width: 725px;
+    margin: 0px;
+    padding: 0px 0px;
+}
+
+.panel_item{
+    padding:5px 0px;
+    margin:0px;
+    width:142px;
+    float: left;
+
+	span.active{
+	    padding:15px;
+    	margin:15px 0px;
+    	font-weight:bold;
+    }
+}
+
+.greenpanel {
+	.greenpanelstuff;
+    margin: auto;
+    padding: 0px 5px 5px 5px;
+    height: 300px;
+    background-color: #ffffff;
+    color: @text-blue;
+    border: 5px solid @pale-blue;
+    
+    &:hover {
+    	color: @text-blue;
+	}
+
+    img {
+	    padding:5px 0px;
+    	margin:0px;
+	}
+	
+	a {
+    	color: @dark-green;
+    	text-decoration: none;
+    	
+    	&:hover {
+    		color: @green;
+	    	text-decoration: none;
+		}
+	}
+}
+
+.green {
+    color: @green;
+    text-align: left;
+}
+
+
+/*2 start*/
+
+.greenpanel2 {
+	.greenpanelstuff;
+    margin: 0px auto;
+    padding: 10px;
+    height: 295px;
+    background-color: @green;
+    color: #ffffff;
+    position:relative;
+}
+.unglued_white {
+    font-size: 12px;
+    margin: 0px  auto;
+    margin-bottom:5px;
+    padding: 10px 0px;
+}
+
+.read_itbutton {
+    width:118px;
+    height:35px;
+    padding:0px 0px;
+    background:#FFFFFF;
+    margin:0px;
+    .border-radius(4px, 4px, 4px, 4px);
+    border: 1px solid #81bb38;
+    
+    a {
+    	.greenpanelactionitems(10px);
+    	background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
+    	padding:0px 0px 0px 30px;
+    	color:@dark-green;
+    	
+    	&:hover {
+			text-decoration:none;
+		}
+    }
+}
+
+
+.add_towish {
+    width:125px;
+    height:30px;
+    padding:0px 0px;
+    margin:15px auto;
+    
+    a {
+    	.greenpanelactionitems(left);
+    	background-image: url(/static/images/book-panel/add_wish_icon.png);
+    	padding:8px 5px 8px 21px;
+    	color:#FFFFFF;
+		.greenpanelactionborders();
+		
+    	&:hover{ .panelhoverlink;}
+	}
+}
+
+.white_text {
+    width:130px;
+    height:40px;
+    padding:17px 0px;
+    margin:0px;
+
+	 a {
+    	color:#FFFFFF;
+    	text-decoration:none;
+    	
+    	&:hover { .panelhoverlink;}
+	}
+}
+
+/*more info*/
+.moreinfo {
+    width:130px;
+    height:30px;
+    padding:0px;
+    margin:15px 0 0;
+    
+    a {
+    	.greenpanelactionitems(left);
+    	background-image: url(/static/images/book-panel/more_icon.png);
+    	padding:8px 42px 8px 20px;
+    	padding-left:20px;
+    	color:#FFFFFF;
+    	.greenpanelactionborders;
+    	
+   		&:hover { .panelhoverlink;}
+	}
+}
+
+
+/*end of the more info/*
+/*end the 2greenpanel*/
+
+/*2 start*/
+
+.graypanel {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    margin: 20px  auto;
+    padding: 4px 5px;
+    height: 300px;
+    width: 130px;
+    line-height:16px;
+    background-color: @pale-blue;
+    color: @text-blue;
+    border: 5px solid @pale-blue;
+}
+.unglued_white2{
+    font-size: 12px;
+    margin: 3px  auto;
+    padding: 5px 0px;
+}
+.green{
+    color: @green;
+    text-align: left;
+}
+.graypanel a {
+	.panelhoverlink;
+}
+
+.graypanel a:hover{
+    color: @green;
+    text-decoration: none;
+}
+
+.Unglue_itbutton{
+    width:110px;
+    height:40px;
+    padding:0px 9px;
+    background:#FFFFFF;
+    margin:0px auto;
+    .border-radius(4px, 4px, 4px, 4px);
+    border: 1px solid #d4dcdd;
+}
+.Unglue_itbutton a{
+    .greenpanelactionitems(2px);
+    background-image: url(/static/images/book-panel/unglue_icon.png);
+    padding:5px 0px 0px 20px;
+    color:@text-blue;
+    text-align:right;
+    font-family: "LucidaGrandeBold";
+}
+.Unglue_itbutton a:hover{
+text-decoration:none;
+}
+
+.add_towish2{
+    width:130px;
+    height:30px;
+    padding:0px 0px;
+    margin:15px auto;
+}
+.add_towish2 a{
+	.greenpanelactionitems(left);
+    background-image: url(/static/images/book-panel/add_gray.png);
+    padding:8px 0px;
+    padding-left:20px;
+    color:@text-blue;
+    .greenpanelactionborders;
+    font-family: "LucidaGrandeBold";
+}
+.add_towish2 a:hover{
+    text-decoration:none;
+}
+
+.white_text2{
+    width:130px;
+    height:40px;
+    padding:13px 0px;
+    margin:0px;
+}
+.white_text2 a, a:hover {
+	.panelhoverlink;
+}
+
+/*more info*/
+.moreinfo2{
+    width:130px;
+    height:30px;
+    padding:0px 20px 0px 0px;
+    margin:15px auto;
+}
+.moreinfo2 a{
+    line-height:40px;
+    font-size:12px;
+    background-image: url(/static/images/book-panel/gray_more_info.png);
+    background-repeat: no-repeat;
+    background-position: left center;
+    padding:8px 35px;
+    font-weight:bold;
+    padding-left:20px;
+    color:@text-blue;
+    text-decoration:none;
+    text-transform: uppercase;
+	.greenpanelactionborders;
+	font-family: "LucidaGrandeBold";
+}
+.moreinfo2 a:hover{
+	.panelhoverlink;
+}
+/*end the 2greenpanel*/
+
+.read{
+    margin: 15px auto 5px auto;
+    padding: 0px;
+    width: 140px;
+    color:@green;
+    height:40px;
+    line-height:25px;
+    float:left;
+    position: absolute;
+    bottom: -15px;
+}
+.read p {
+    margin: 0px;
+    padding: 10px 3px;
+    width: 50px;
+    font-size:10pt;
+    float:left;
+}
+.read img{
+    padding:5px 0px;
+    margin:0px;
+    float:left;
+}
+
+.right_add{
+    padding:10px;
+    margin:0px;
+    float:right;
+}
+p.right_add { float:right; padding:10px 10px 0 0; width:24px; }
+
+/**/
+.read2{
+    margin: 15px auto;
+    padding: 0px;
+    width: 130px;
+    color:@green;
+    height:40px;
+    line-height:25px;
+}
+.read2 p {
+    margin: 0px;
+    padding: 10px 3px;
+    width: 50px;
+    font-size:10pt;
+    float:left;
+}
+.read2 img{
+    padding:0px;
+    margin:0px;
+    float:left;
+    
+}
+.right_add{
+    padding:10px;
+    margin:0px;
+    float:right;
+}
+/* --------------- ( slideout hover state ) --------------------------------------------- */
+.image {
+    float: left;
+    position: relative;
+    margin:0px;
+    padding:0px;
+    left:0px;
+    height:100%;
+}
+    .image img { 
+        z-index: 100;
+    }
+    .image span {
+        position:absolute;
+        bottom: 0;
+        left:-10px;
+        top:-5px;
+        z-index: 1000;
+        height:auto;
+    }
diff --git a/static/less/book_panel_unimported_test.css b/static/less/book_panel_unimported_test.css
new file mode 100644
index 00000000..03c376a8
--- /dev/null
+++ b/static/less/book_panel_unimported_test.css
@@ -0,0 +1,431 @@
+.header-text {
+  height: 36px;
+  line-height: 36px;
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 13px;
+  letter-spacing: -0.05em;
+}
+.panelborders {
+  border-width: 1px 0px;
+  border-style: solid none;
+  border-color: #FFFFFF;
+}
+.greenpanelstuff {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  width: 120px;
+  line-height: 16px;
+}
+.greenpanelactionborders {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: #FFFFFF;
+  border-bottom-color: #FFFFFF;
+}
+.panelhoverlink {
+  text-decoration: none;
+  color: #3d4e53;
+}
+@charset "utf-8";
+* {
+  padding: 0px;
+  margin: 0px;
+}
+/*main_Css*/
+#main-wrapper {
+  height: 100%;
+  width: 725px;
+  margin: 0px;
+  padding: 0px 0px;
+}
+.panelview.tabs {
+  padding: 5px 0px;
+  margin: 0px;
+  width: 142px;
+  float: left;
+}
+.panelview.tabs span.active {
+  padding: 15px;
+  margin: 15px 0px;
+  font-weight: bold;
+}
+.panelview.book-list {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  width: 120px;
+  line-height: 16px;
+  margin: auto;
+  padding: 0px 5px 5px 5px;
+  height: 300px;
+  background-color: #ffffff;
+  color: #3d4e53;
+  border: 5px solid #edf3f4;
+  /*	might need this for panel hover state; don't want it for nonhover. hm.
+	a {
+    	color: @dark-green;
+    	text-decoration: none;
+    	
+    	&:hover {
+    		color: @green;
+	    	text-decoration: none;
+		}
+	}
+*/
+
+}
+.panelview.book-list:hover {
+  color: #3d4e53;
+}
+.panelview.book-list img {
+  padding: 5px 0px;
+  margin: 0px;
+}
+div.remove-wishlist.panelview {
+  display: none;
+}
+.panelview.book-name, .panelview.author {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  line-height: 16px;
+  color: #3d4e53;
+}
+.panelview.booklist-status {
+  color: #8dc63f;
+  text-align: left;
+}
+.panelview.booklist-status .booklist-status-label {
+  float: left;
+  font-weight: bold;
+}
+/*2 start*/
+.greenpanel2 {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  width: 120px;
+  line-height: 16px;
+  margin: 0px auto;
+  padding: 10px;
+  height: 295px;
+  background-color: #8dc63f;
+  color: #ffffff;
+  position: relative;
+}
+.unglued_white {
+  font-size: 12px;
+  margin: 0px  auto;
+  margin-bottom: 5px;
+  padding: 10px 0px;
+}
+.read_itbutton {
+  width: 118px;
+  height: 35px;
+  padding: 0px 0px;
+  background: #FFFFFF;
+  margin: 0px;
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #81bb38;
+}
+.read_itbutton a {
+  line-height: 40px;
+  font-size: 11px;
+  background-repeat: no-repeat;
+  background-position: 10px center;
+  font-weight: bold;
+  text-decoration: none;
+  text-transform: uppercase;
+  background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
+  padding: 0px 0px 0px 30px;
+  color: #73a334;
+}
+.read_itbutton a:hover {
+  text-decoration: none;
+}
+.add_towish {
+  width: 125px;
+  height: 30px;
+  padding: 0px 0px;
+  margin: 15px auto;
+}
+.add_towish a {
+  line-height: 40px;
+  font-size: 11px;
+  background-repeat: no-repeat;
+  background-position: left center;
+  font-weight: bold;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-image: url(/static/images/book-panel/add_wish_icon.png);
+  padding: 8px 5px 8px 21px;
+  color: #FFFFFF;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: #FFFFFF;
+  border-bottom-color: #FFFFFF;
+}
+.add_towish a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+.white_text {
+  width: 130px;
+  height: 40px;
+  padding: 17px 0px;
+  margin: 0px;
+}
+.white_text a {
+  color: #FFFFFF;
+  text-decoration: none;
+}
+.white_text a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+/*more info*/
+.moreinfo {
+  width: 130px;
+  height: 30px;
+  padding: 0px;
+  margin: 15px 0 0;
+}
+.moreinfo a {
+  line-height: 40px;
+  font-size: 11px;
+  background-repeat: no-repeat;
+  background-position: left center;
+  font-weight: bold;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-image: url(/static/images/book-panel/more_icon.png);
+  padding: 8px 42px 8px 20px;
+  padding-left: 20px;
+  color: #FFFFFF;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: #FFFFFF;
+  border-bottom-color: #FFFFFF;
+}
+.moreinfo a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+/*end of the more info/*
+/*end the 2greenpanel*/
+/*2 start*/
+.graypanel {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  margin: 20px  auto;
+  padding: 4px 5px;
+  height: 300px;
+  width: 130px;
+  line-height: 16px;
+  background-color: #edf3f4;
+  color: #3d4e53;
+  border: 5px solid #edf3f4;
+}
+.unglued_white2 {
+  font-size: 12px;
+  margin: 3px  auto;
+  padding: 5px 0px;
+}
+.green {
+  color: #8dc63f;
+  text-align: left;
+}
+.graypanel a {
+  text-decoration: none;
+  color: #3d4e53;
+}
+.graypanel a:hover {
+  color: #8dc63f;
+  text-decoration: none;
+}
+.Unglue_itbutton {
+  width: 110px;
+  height: 40px;
+  padding: 0px 9px;
+  background: #FFFFFF;
+  margin: 0px auto;
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #d4dcdd;
+}
+.Unglue_itbutton a {
+  line-height: 40px;
+  font-size: 11px;
+  background-repeat: no-repeat;
+  background-position: 2px center;
+  font-weight: bold;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-image: url(/static/images/book-panel/unglue_icon.png);
+  padding: 5px 0px 0px 20px;
+  color: #3d4e53;
+  text-align: right;
+  font-family: "LucidaGrandeBold";
+}
+.Unglue_itbutton a:hover {
+  text-decoration: none;
+}
+.add_towish2 {
+  width: 130px;
+  height: 30px;
+  padding: 0px 0px;
+  margin: 15px auto;
+}
+.add_towish2 a {
+  line-height: 40px;
+  font-size: 11px;
+  background-repeat: no-repeat;
+  background-position: left center;
+  font-weight: bold;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-image: url(/static/images/book-panel/add_gray.png);
+  padding: 8px 0px;
+  padding-left: 20px;
+  color: #3d4e53;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: #FFFFFF;
+  border-bottom-color: #FFFFFF;
+  font-family: "LucidaGrandeBold";
+}
+.add_towish2 a:hover {
+  text-decoration: none;
+}
+.white_text2 {
+  width: 130px;
+  height: 40px;
+  padding: 13px 0px;
+  margin: 0px;
+}
+.white_text2 a, a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+/*more info*/
+.moreinfo2 {
+  width: 130px;
+  height: 30px;
+  padding: 0px 20px 0px 0px;
+  margin: 15px auto;
+}
+.moreinfo2 a {
+  line-height: 40px;
+  font-size: 12px;
+  background-image: url(/static/images/book-panel/gray_more_info.png);
+  background-repeat: no-repeat;
+  background-position: left center;
+  padding: 8px 35px;
+  font-weight: bold;
+  padding-left: 20px;
+  color: #3d4e53;
+  text-decoration: none;
+  text-transform: uppercase;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: #FFFFFF;
+  border-bottom-color: #FFFFFF;
+  font-family: "LucidaGrandeBold";
+}
+.moreinfo2 a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+/*end the 2greenpanel*/
+.read {
+  margin: 15px auto 5px auto;
+  padding: 0px;
+  width: 140px;
+  color: #8dc63f;
+  height: 40px;
+  line-height: 25px;
+  float: left;
+  position: absolute;
+  bottom: -15px;
+}
+.read p {
+  margin: 0px;
+  padding: 10px 3px;
+  width: 50px;
+  font-size: 10pt;
+  float: left;
+}
+.read img {
+  padding: 5px 0px;
+  margin: 0px;
+  float: left;
+}
+.right_add {
+  padding: 10px;
+  margin: 0px;
+  float: right;
+}
+p.right_add {
+  float: right;
+  padding: 10px 10px 0 0;
+  width: 24px;
+}
+/**/
+.read2 {
+  margin: 15px auto;
+  padding: 0px;
+  width: 130px;
+  color: #8dc63f;
+  height: 40px;
+  line-height: 25px;
+}
+.read2 p {
+  margin: 0px;
+  padding: 10px 3px;
+  width: 50px;
+  font-size: 10pt;
+  float: left;
+}
+.read2 img {
+  padding: 0px;
+  margin: 0px;
+  float: left;
+}
+.right_add {
+  padding: 10px;
+  margin: 0px;
+  float: right;
+}
+/* --------------- ( slideout hover state ) --------------------------------------------- */
+.panelview.book-thumb {
+  float: left;
+  position: relative;
+  margin: 0px;
+  padding: 0px;
+  left: 0px;
+}
+.panelview.book-thumb img {
+  z-index: 100;
+  width: 120px;
+  height: 182px;
+}
+.panelview.book-thumb span {
+  position: absolute;
+  bottom: 0;
+  left: -10px;
+  top: -5px;
+  z-index: 1000;
+  height: auto;
+}
diff --git a/static/less/book_panel_unimported_test.less b/static/less/book_panel_unimported_test.less
new file mode 100644
index 00000000..2a0734e2
--- /dev/null
+++ b/static/less/book_panel_unimported_test.less
@@ -0,0 +1,397 @@
+@import "variables.less";
+
+// Local variables
+.greenpanelstuff {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    width: 120px;
+    line-height:16px;
+}
+
+.greenpanelactionitems(@pos) {
+    line-height:40px;
+    font-size:11px;
+    background-repeat: no-repeat;
+    background-position: @pos center;
+    font-weight:bold;
+    text-decoration:none;
+    text-transform: uppercase;
+}
+
+.greenpanelactionborders {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+    border-top-style: solid;
+    border-bottom-style: solid;
+    border-top-color: #FFFFFF;
+   	border-bottom-color: #FFFFFF;
+}
+
+.panelhoverlink {
+	text-decoration:none;
+	color:@text-blue;
+}
+
+@charset "utf-8";
+*{
+    padding:0px;
+    margin:0px;
+}
+
+/*main_Css*/
+
+#main-wrapper{
+    height: 100%;
+    width: 725px;
+    margin: 0px;
+    padding: 0px 0px;
+}
+
+.panelview.tabs{
+    padding:5px 0px;
+    margin:0px;
+    width:142px;
+    float: left;
+
+	span.active{
+	    padding:15px;
+    	margin:15px 0px;
+    	font-weight:bold;
+    }
+}
+
+.panelview.book-list {
+	.greenpanelstuff;
+    margin: auto;
+    padding: 0px 5px 5px 5px;
+    height: 300px;
+    background-color: #ffffff;
+    color: @text-blue;
+    border: 5px solid @pale-blue;
+    
+    &:hover {
+    	color: @text-blue;
+	}
+
+    img {
+	    padding:5px 0px;
+    	margin:0px;
+	}
+	
+/*	might need this for panel hover state; don't want it for nonhover. hm.
+	a {
+    	color: @dark-green;
+    	text-decoration: none;
+    	
+    	&:hover {
+    		color: @green;
+	    	text-decoration: none;
+		}
+	}
+*/
+}
+
+div.remove-wishlist.panelview {
+	display: none;
+}
+
+.panelview.book-name, .panelview.author {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    line-height:16px;
+    color: #3d4e53;
+}
+
+.panelview.booklist-status {
+    color: @green;
+    text-align: left;
+    
+    .booklist-status-label {
+    	float: left;
+    	font-weight: bold;
+    }
+}
+
+
+/*2 start*/
+
+.greenpanel2 {
+	.greenpanelstuff;
+    margin: 0px auto;
+    padding: 10px;
+    height: 295px;
+    background-color: @green;
+    color: #ffffff;
+    position:relative;
+}
+.unglued_white {
+    font-size: 12px;
+    margin: 0px  auto;
+    margin-bottom:5px;
+    padding: 10px 0px;
+}
+
+.read_itbutton {
+    width:118px;
+    height:35px;
+    padding:0px 0px;
+    background:#FFFFFF;
+    margin:0px;
+    .border-radius(4px, 4px, 4px, 4px);
+    border: 1px solid #81bb38;
+    
+    a {
+    	.greenpanelactionitems(10px);
+    	background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
+    	padding:0px 0px 0px 30px;
+    	color:@dark-green;
+    	
+    	&:hover {
+			text-decoration:none;
+		}
+    }
+}
+
+
+.add_towish {
+    width:125px;
+    height:30px;
+    padding:0px 0px;
+    margin:15px auto;
+    
+    a {
+    	.greenpanelactionitems(left);
+    	background-image: url(/static/images/book-panel/add_wish_icon.png);
+    	padding:8px 5px 8px 21px;
+    	color:#FFFFFF;
+		.greenpanelactionborders();
+		
+    	&:hover{ .panelhoverlink;}
+	}
+}
+
+.white_text {
+    width:130px;
+    height:40px;
+    padding:17px 0px;
+    margin:0px;
+
+	 a {
+    	color:#FFFFFF;
+    	text-decoration:none;
+    	
+    	&:hover { .panelhoverlink;}
+	}
+}
+
+/*more info*/
+.moreinfo {
+    width:130px;
+    height:30px;
+    padding:0px;
+    margin:15px 0 0;
+    
+    a {
+    	.greenpanelactionitems(left);
+    	background-image: url(/static/images/book-panel/more_icon.png);
+    	padding:8px 42px 8px 20px;
+    	padding-left:20px;
+    	color:#FFFFFF;
+    	.greenpanelactionborders;
+    	
+   		&:hover { .panelhoverlink;}
+	}
+}
+
+
+/*end of the more info/*
+/*end the 2greenpanel*/
+
+/*2 start*/
+
+.graypanel {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    margin: 20px  auto;
+    padding: 4px 5px;
+    height: 300px;
+    width: 130px;
+    line-height:16px;
+    background-color: @pale-blue;
+    color: @text-blue;
+    border: 5px solid @pale-blue;
+}
+.unglued_white2{
+    font-size: 12px;
+    margin: 3px  auto;
+    padding: 5px 0px;
+}
+.green{
+    color: @green;
+    text-align: left;
+}
+.graypanel a {
+	.panelhoverlink;
+}
+
+.graypanel a:hover{
+    color: @green;
+    text-decoration: none;
+}
+
+.Unglue_itbutton{
+    width:110px;
+    height:40px;
+    padding:0px 9px;
+    background:#FFFFFF;
+    margin:0px auto;
+    .border-radius(4px, 4px, 4px, 4px);
+    border: 1px solid #d4dcdd;
+}
+.Unglue_itbutton a{
+    .greenpanelactionitems(2px);
+    background-image: url(/static/images/book-panel/unglue_icon.png);
+    padding:5px 0px 0px 20px;
+    color:@text-blue;
+    text-align:right;
+    font-family: "LucidaGrandeBold";
+}
+.Unglue_itbutton a:hover{
+text-decoration:none;
+}
+
+.add_towish2{
+    width:130px;
+    height:30px;
+    padding:0px 0px;
+    margin:15px auto;
+}
+.add_towish2 a{
+	.greenpanelactionitems(left);
+    background-image: url(/static/images/book-panel/add_gray.png);
+    padding:8px 0px;
+    padding-left:20px;
+    color:@text-blue;
+    .greenpanelactionborders;
+    font-family: "LucidaGrandeBold";
+}
+.add_towish2 a:hover{
+    text-decoration:none;
+}
+
+.white_text2{
+    width:130px;
+    height:40px;
+    padding:13px 0px;
+    margin:0px;
+}
+.white_text2 a, a:hover {
+	.panelhoverlink;
+}
+
+/*more info*/
+.moreinfo2{
+    width:130px;
+    height:30px;
+    padding:0px 20px 0px 0px;
+    margin:15px auto;
+}
+.moreinfo2 a{
+    line-height:40px;
+    font-size:12px;
+    background-image: url(/static/images/book-panel/gray_more_info.png);
+    background-repeat: no-repeat;
+    background-position: left center;
+    padding:8px 35px;
+    font-weight:bold;
+    padding-left:20px;
+    color:@text-blue;
+    text-decoration:none;
+    text-transform: uppercase;
+	.greenpanelactionborders;
+	font-family: "LucidaGrandeBold";
+}
+.moreinfo2 a:hover{
+	.panelhoverlink;
+}
+/*end the 2greenpanel*/
+
+.read{
+    margin: 15px auto 5px auto;
+    padding: 0px;
+    width: 140px;
+    color:@green;
+    height:40px;
+    line-height:25px;
+    float:left;
+    position: absolute;
+    bottom: -15px;
+}
+.read p {
+    margin: 0px;
+    padding: 10px 3px;
+    width: 50px;
+    font-size:10pt;
+    float:left;
+}
+.read img{
+    padding:5px 0px;
+    margin:0px;
+    float:left;
+}
+
+.right_add{
+    padding:10px;
+    margin:0px;
+    float:right;
+}
+p.right_add { float:right; padding:10px 10px 0 0; width:24px; }
+
+/**/
+.read2{
+    margin: 15px auto;
+    padding: 0px;
+    width: 130px;
+    color:@green;
+    height:40px;
+    line-height:25px;
+}
+.read2 p {
+    margin: 0px;
+    padding: 10px 3px;
+    width: 50px;
+    font-size:10pt;
+    float:left;
+}
+.read2 img{
+    padding:0px;
+    margin:0px;
+    float:left;
+    
+}
+.right_add{
+    padding:10px;
+    margin:0px;
+    float:right;
+}
+/* --------------- ( slideout hover state ) --------------------------------------------- */
+.panelview.book-thumb {
+    float: left;
+    position: relative;
+    margin:0px;
+    padding:0px;
+    left:0px;
+}
+    .panelview.book-thumb img { 
+        z-index: 100;
+        width: 120px;
+        height: 182px; 
+    }
+    .panelview.book-thumb span {
+        position:absolute;
+        bottom: 0;
+        left:-10px;
+        top:-5px;
+        z-index: 1000;
+        height:auto;
+    }
diff --git a/static/less/layout.css b/static/less/layout.css
new file mode 100644
index 00000000..09b43c19
--- /dev/null
+++ b/static/less/layout.css
@@ -0,0 +1,987 @@
+/*
+DO NOT MAKE CHANGES DIRECTLY TO layout.css.
+Make changes to the appropriate file in /static/less/ and compile with the less app or similar (lesscss.org).
+Changes made directly to layout.css will be overwritten.
+*/
+@charset "utf-8";
+.header-text {
+  height: 36px;
+  line-height: 36px;
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 13px;
+  letter-spacing: -0.05em;
+}
+.panelborders {
+  border-width: 1px 0px;
+  border-style: solid none;
+  border-color: #FFFFFF;
+}
+div.book-list {
+  clear: both;
+  display: block;
+  vertical-align: middle;
+  height: 43px;
+  line-height: 43px;
+  margin: 0 5px 0 0;
+  padding: 7px 0;
+  overflow: hidden;
+}
+div.book-list.row1 {
+  background: #f6f9f9;
+}
+div.book-list.row2 {
+  background: #fff;
+}
+div.book-list div.unglue-this {
+  float: left;
+}
+div.book-list div.book-thumb {
+  margin-right: 5px;
+  float: left;
+}
+div.book-list div.book-name {
+  width: 260px;
+  margin-right: 10px;
+  background: url("/static/images/booklist/booklist-vline.png") right center no-repeat;
+  float: left;
+}
+div.book-list div.book-name span {
+  display: block;
+  line-height: normal;
+  height: 43px;
+  line-height: 43px;
+}
+div.book-list div.add-wishlist, div.book-list div.remove-wishlist {
+  margin-right: 10px;
+  padding-right: 10px;
+  background: url("/static/images/booklist/booklist-vline.png") right center no-repeat;
+  float: left;
+}
+div.book-list div.add-wishlist a, div.book-list div.remove-wishlist a {
+  font-weight: normal;
+  color: #3d4e53;
+  text-transform: none;
+  background: url("/static/images/booklist/add-wishlist.png") left center no-repeat;
+  padding-left: 20px;
+}
+div.book-list div.booklist-status {
+  margin-right: 7px;
+  float: left;
+}
+span.booklist-status-text {
+  float: left;
+  display: block;
+  padding-right: 5px;
+  text-transform: capitalize;
+}
+div.unglue-this a {
+  text-transform: uppercase;
+  color: #3d4e53;
+  font-size: 11px;
+  font-weight: bold;
+}
+div.unglue-this.complete .unglue-this-inner1 {
+  background: url("/static/images/booklist/bg.png") 0 -84px no-repeat;
+  height: 42px;
+}
+div.unglue-this.complete .unglue-this-inner2 {
+  background: url("/static/images/booklist/bg.png") 100% -126px no-repeat;
+  margin-left: 29px;
+  height: 42px;
+  padding-right: 10px;
+}
+div.unglue-this.complete a {
+  color: #fff;
+  display: block;
+}
+div.unglue-this.processing .unglue-this-inner1 {
+  background: url("/static/images/booklist/bg.png") 0 0 no-repeat;
+  height: 42px;
+}
+div.unglue-this.processing .unglue-this-inner2 {
+  background: url("/static/images/booklist/bg.png") 100% -42px no-repeat;
+  margin-left: 25px;
+  height: 42px;
+  padding-right: 10px;
+}
+ul.book-list-view {
+  padding: 0;
+  margin: 15px;
+  float: right;
+  list-style: none;
+}
+ul.book-list-view li {
+  float: left;
+  margin-right: 10px;
+  display: block;
+  vertical-align: middle;
+  line-height: 22px;
+}
+div.navigation {
+  float: left;
+  clear: both;
+  width: 100%;
+  color: #37414d;
+}
+ul.navigation {
+  float: right;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+ul.navigation li {
+  float: left;
+  line-height: normal;
+  margin-right: 5px;
+}
+ul.navigation li a {
+  color: #37414d;
+  font-weight: normal;
+}
+ul.navigation li.arrow-l a {
+  background: url("/static/images/booklist/bg.png") 0 -168px no-repeat;
+  width: 10px;
+  height: 15px;
+  display: block;
+  text-indent: -10000px;
+}
+ul.navigation li.arrow-r a {
+  background: url("/static/images/booklist/bg.png") -1px -185px no-repeat;
+  width: 10px;
+  height: 15px;
+  display: block;
+  text-indent: -10000px;
+}
+ul.navigation li a:hover, ul.navigation li.active a {
+  color: #8ac3d7;
+  text-decoration: underline;
+}
+.unglue-button {
+  display: block;
+  border: 0;
+}
+.book-thumb img {
+  height: 50px;
+}
+.book_panel {
+  margin: 20px  auto;
+  padding: 0 5px 5px 5px;
+  height: 300px;
+  width: 120px;
+  line-height: 16px;
+  background-color: #ffffff;
+  color: #3d4e53;
+  border: 5px solid #edf3f4;
+}
+.book_panel a {
+  font-size: 12pt;
+  color: #73a334;
+  text-decoration: none;
+}
+.book_panel a:hover {
+  color: #8dc63f;
+  text-decoration: none;
+}
+.book_panel p {
+  margin: 0;
+}
+.book_panel img {
+  padding: 5px 0;
+  margin: 0;
+}
+.book_panel:hover {
+  color: #3d4e53;
+}
+.green {
+  color: #8dc63f;
+  text-align: left;
+}
+.book_panel_back {
+  margin: 0  auto;
+  padding: 10px;
+  height: 295px;
+  width: 120px;
+  line-height: 16px;
+  background-color: #8dc63f;
+  color: #ffffff;
+  position: relative;
+}
+.book_panel_back a {
+  font-size: 12px;
+  font-weight: normal;
+}
+.unglued_white {
+  margin: 0  auto;
+  margin-bottom: 5px;
+  padding: 10px 0;
+}
+.status {
+  color: #8dc63f;
+  text-align: left;
+}
+.read_itbutton {
+  width: 118px;
+  height: 35px;
+  padding: 0 0;
+  background: #FFFFFF;
+  margin: 0;
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #81bb38;
+}
+.read_itbutton a {
+  line-height: 40px;
+  font-size: 11px;
+  background: url("/static/images/book-panel/book_icon.png") no-repeat left center;
+  background-position: 10px center;
+  padding: 0 0 0 30px;
+  color: #73a334;
+  text-decoration: none;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.read_itbutton a:hover {
+  text-decoration: none;
+}
+#add_towish {
+  width: 130px;
+  height: 30px;
+  padding: 0 0;
+  margin: 10px auto;
+}
+#add_towish a {
+  line-height: 40px;
+  font-size: 11px;
+  background-image: url("/static/images/book-panel/add_wish_icon.png") no-repeat left center;
+  padding: 8px 5px 8px 21px;
+  font-weight: bold;
+  color: #FFFFFF;
+  text-decoration: none;
+  text-transform: uppercase;
+  border-width: 1px 0px;
+  border-style: solid none;
+  border-color: #FFFFFF;
+}
+#add_towish a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+#white_text {
+  width: 130px;
+  height: 40px;
+  padding: 17px 0;
+  margin: 0;
+}
+#white_text a {
+  color: #FFFFFF;
+  text-decoration: none;
+}
+#white_text a:hover {
+  color: #3d4e53;
+  text-decoration: none;
+}
+#moreinfo {
+  width: 130px;
+  height: 30px;
+  padding: 0;
+  margin: 15px 0 0;
+}
+#moreinfo a {
+  line-height: 40px;
+  font-size: 11px;
+  background-image: url("/static/images/book-panel/more_icon.png") no-repeat left center;
+  padding: 8px 42px 8px 20px;
+  font-weight: bold;
+  padding-left: 20px;
+  color: #FFFFFF;
+  text-decoration: none;
+  text-transform: uppercase;
+  border-width: 1px 0px;
+  border-style: solid none;
+  border-color: #FFFFFF;
+}
+#moreinfo a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+.green {
+  color: #8dc63f;
+  text-align: left;
+}
+#graypanel a {
+  color: #3d4e53;
+  text-decoration: none;
+}
+.read {
+  margin: 15px auto;
+  padding: 0;
+  width: 140px;
+  color: #8dc63f;
+  height: 40px;
+  line-height: 25px;
+  float: left;
+}
+.read p {
+  margin: 0;
+  padding: 10px 3px;
+  width: 50px;
+  font-size: 10pt;
+  float: left;
+}
+.read img {
+  padding: 5px;
+  margin: 0;
+  float: left;
+}
+.right_add {
+  padding: 10px;
+  margin: 0;
+  float: right;
+}
+p.right_add {
+  float: right;
+  padding: 10px 10px 0 0;
+  width: 24px;
+}
+/* slideout hover state */
+.book_panel_interior {
+  float: left;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  left: 0;
+}
+.book_panel_interior img {
+  z-index: 100;
+}
+.book_panel_interior span {
+  position: absolute;
+  bottom: 0;
+  left: -10px;
+  top: -5px;
+  z-index: 1000;
+  height: auto;
+}
+body {
+  background: url("/static/images/bg-body.png") 0 0 repeat-x;
+  padding: 0 0 20px 0;
+  margin: 0;
+  font-size: 12px;
+  font-family: Lucida "Lucida Grande", "Lucida Sans Unicode", sans-serif, Helvetica, sans-serif;
+  color: #3d4e53;
+}
+img {
+  border: none;
+}
+h2.content-heading {
+  padding: 15px;
+  margin: 0;
+  font-size: 19px;
+  font-weight: normal;
+  color: #3d4e53;
+  float: left;
+  width: 50%;
+}
+h2.content-heading span {
+  font-style: italic;
+}
+h3.jsmod-title {
+  background: url("/static/images/bg.png") 0 0 no-repeat;
+  padding: 0;
+  margin: 0;
+  height: 73px;
+}
+h3.jsmod-title span {
+  background: url("/static/images/icon-h3.png") 90% center no-repeat;
+  font-size: 17px;
+  color: #fff;
+  padding: 26px 40px 27px 20px;
+  display: block;
+}
+ul.menu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+a.readon {
+  background: url("/static/images/bg.png") 100% -72px no-repeat;
+  color: #fff;
+  text-transform: capitalize;
+  display: block;
+  float: right;
+  font-size: 13px;
+  font-weight: bold;
+}
+a.readon span {
+  background: url("/static/images/bg.png") -770px -108px no-repeat;
+  margin-right: 34px;
+  padding: 0 5px 0 20px;
+  height: 36px;
+  line-height: 36px;
+  display: block;
+}
+a {
+  font-weight: bold;
+  font-size: 13px;
+  text-decoration: none;
+  cursor: pointer;
+}
+#js-header {
+  height: 90px;
+}
+.js-main {
+  width: 960px;
+  margin: 0 auto;
+  clear: both;
+  padding: 0;
+}
+.js-logo {
+  float: left;
+  padding-top: 10px;
+}
+.js-logo a img {
+  border: none;
+}
+.js-topmenu {
+  float: right;
+  padding-top: 25px;
+}
+.js-topmenu ul li {
+  float: left;
+  padding: 0 10px;
+}
+.js-topmenu ul li a {
+  color: #3d4e53;
+  height: 36px;
+  line-height: 36px;
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 13px;
+  letter-spacing: -0.05em;
+}
+.js-topmenu ul li span#welcome {
+  color: #8dc63f;
+  height: 36px;
+  line-height: 36px;
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 13px;
+  letter-spacing: -0.05em;
+}
+.js-topmenu ul li.last a {
+  background: url("/static/images/bg.png") right top no-repeat;
+}
+.js-topmenu ul li.last a span {
+  background: url("/static/images/bg.png") -770px -36px no-repeat;
+  margin-right: 29px;
+  display: block;
+  padding: 0 5px 0 15px;
+}
+#js-topsection {
+  padding: 15px 0;
+  overflow: hidden;
+}
+.js-topnews {
+  float: left;
+  width: 100%;
+}
+.js-topnews1 {
+  background: url("/static/images/header/header-m.png") 0 0 repeat-y;
+}
+.js-topnews2 {
+  background: url("/static/images/header/header-t.png") 0 0 no-repeat;
+}
+.js-topnews3 {
+  background: url("/static/images/header/header-b.png") 0 100% no-repeat;
+  display: block;
+  overflow: hidden;
+  padding: 10px;
+}
+.js-search {
+  float: right;
+  width: 30%;
+  padding-top: 25px;
+}
+.js-search input {
+  float: left;
+}
+.js-search .inputbox {
+  padding: 0 0 0 15px;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: url("/static/images/bg.png") -645px -180px;
+  height: 36px;
+  line-height: 36px;
+  float: left;
+  color: #6994a3;
+}
+.js-search .button {
+  background: url("/static/images/bg.png") 100% -144px no-repeat;
+  padding: 0;
+  margin: 0;
+  width: 40px;
+  height: 36px;
+  display: block;
+  border: none;
+  text-indent: -10000px;
+  cursor: pointer;
+}
+.js-search-inner {
+  float: right;
+}
+#js-leftcol {
+  float: left;
+  width: 235px;
+}
+#js-leftcol a {
+  font-weight: normal;
+}
+#js-leftcol a:hover {
+  text-decoration: underline;
+}
+#js-leftcol .jsmod-content {
+  border: 1px solid #edf3f4;
+  margin-left: 10px;
+  -moz-border-radius: 0 0 10px 10px;
+  -webkit-border-radius: 0 0 10px 10px;
+  border-radius: 0 0 10px 10px;
+}
+#js-leftcol ul.level1 > li > a {
+  text-transform: uppercase;
+  color: #3d4e53;
+  font-size: 12px;
+  border-bottom: 1px solid #edf3f4;
+  border-top: 1px solid #edf3f4;
+  display: block;
+  padding: 10px;
+}
+#js-leftcol ul.level2 li {
+  padding: 5px 10px;
+}
+#js-leftcol ul.level2 li a {
+  color: #6994a3;
+}
+#js-maincol-fr {
+  float: right;
+  width: 725px;
+}
+div.content-block {
+  overflow: hidden;
+  background: url("/static/images/bg.png") 100% -223px no-repeat;
+  padding: 0 0 0 7px;
+}
+.content-block-heading a.block-link {
+  float: right;
+  padding: 15px;
+  font-size: 11px;
+  color: #3d4e53;
+  text-decoration: underline;
+  font-weight: normal;
+}
+div.content-block-content {
+  width: 100%;
+  overflow: hidden;
+  padding-left: 10px;
+}
+div.content-block-content .cols3 .column {
+  width: 33.33%;
+  float: left;
+}
+#footer {
+  border-top: 7px solid #edf3f4;
+  clear: both;
+  height: 90px;
+  text-align: center;
+  padding-top: 5px;
+}
+#footer a {
+  color: #3d4e53;
+}
+.errorlist {
+  color: red;
+}
+#registration {
+  margin-left: auto;
+  margin-right: auto;
+  width: 30%;
+  margin-top: 5%;
+}
+#registration input[type="submit"] {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 5px 15px;
+}
+.block-inner {
+  padding-right: 10px;
+}
+.user-block {
+  width: 100%;
+  clear: both;
+}
+.user-block-hide {
+  float: left;
+  width: 100%;
+  clear: both;
+}
+.user-block-hide .block {
+  float: left;
+  width: 33%;
+}
+.user-block-hide input {
+  float: left;
+  margin: 3px 10px 0 0;
+}
+.user-block-hide label {
+  float: left;
+  width: 90%;
+}
+.user-block1 {
+  float: left;
+  width: 25%;
+}
+.user-block2 {
+  color: #6994a3;
+  font-size: 11px;
+  line-height: normal;
+  float: left;
+  width: 25%;
+}
+.user-block3, .user-block4 {
+  float: right;
+  width: 25%;
+  margin-top: 10px;
+}
+img.user-avatar {
+  float: left;
+  margin-right: 10px;
+}
+.social {
+  width: 100%;
+  padding-left: 35px;
+}
+span.user-name, span.user-date, span.user-short-info {
+  display: block;
+}
+span.user-name, span.user-name a, a {
+  font-size: 12px;
+  color: #3d4e53;
+}
+span.user-status-title {
+  float: left;
+  margin-right: 8px;
+  padding-top: 5px;
+}
+span.rounded {
+  border: 1px solid #d4d4d4;
+  -moz-border-radius: 7px 7px 7px 7px;
+  -webkit-border-radius: 7px 7px 7px 7px;
+  border-radius: 7px 7px 7px 7px;
+  padding: 1px;
+  color: #fff;
+  margin: 0 8px 0 0;
+  display: inline-block;
+}
+span.rounded > span {
+  padding: 7px 10px;
+  min-width: 15px;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  text-align: center;
+  display: inline-block;
+}
+span.blue {
+  background: #a7d26a url("/static/images/header-button-blue.png") left bottom repeat-x;
+}
+span.orange {
+  background: #eabc7c url("/static/images/header-button-orange.png") left bottom repeat-x;
+}
+span.grey {
+  background: #bacfd6 url("/static/images/header-button-grey.png") left bottom repeat-x;
+}
+div.check-list {
+  float: left;
+  width: 100%;
+  padding-bottom: 7px;
+}
+a.profile-edit {
+  display: block;
+  background: url("/static/images/header/icon-edit.png") right top no-repeat;
+}
+div.profile-save {
+  padding-top: 15px;
+  border: none;
+}
+input.profile-save {
+  background: url("/static/images/header/save-setting.png") 0 0 no-repeat;
+  width: 116px;
+  height: 42px;
+  display: block;
+  text-indent: -100000px;
+  border: none;
+}
+a.my-setting {
+  background: #d6dde0 url("/static/images/header/explane.png") 90% center no-repeat;
+  border-radius: 7px;
+  height: 50px;
+  line-height: 50px;
+  display: block;
+  padding: 0 0 0 10px;
+  font-size: 20px;
+}
+a.my-setting.active {
+  background: #d6dde0 url("/static/images/header/collspane.png") 90% center no-repeat;
+}
+#tabs {
+  border-bottom: 4px solid #8DC63F;
+  clear: both;
+  float: left;
+  margin-left: 10px;
+  margin-top: 10px;
+  width: 100%;
+}
+#tabs ul.book-list-view {
+  margin-bottom: 4px !important;
+}
+#tabs-1, #tabs-2, #tabs-3 {
+  margin-left: 10px;
+}
+ul.tabs {
+  float: left;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+ul.tabs li {
+  float: left;
+  height: 46px;
+  line-height: 46px;
+  margin-right: 10px;
+}
+ul.tabs li a {
+  height: 46px;
+  line-height: 46px;
+  display: block;
+  text-align: center;
+  padding: 0 10px;
+  min-width: 80px;
+  border-radius: 7px 7px 0 0;
+  background: url("/static/images/header/bg-tabs1.png") left bottom repeat-x;
+}
+ul.tabs li a:hover, ul.tabs li.active a {
+  background: url("/static/images/header/bg-tabs.png") left bottom repeat-x;
+  color: #fff;
+}
+.book-list span.rounded > span {
+  line-height: normal;
+  width: 75px;
+}
+.book-list span.rounded > span a {
+  text-transform: capitalize;
+}
+.book_panel {
+  margin: 20px  auto;
+  padding: 0 5px 5px 5px;
+  height: 300px;
+  width: 120px;
+  line-height: 16px;
+  background-color: #ffffff;
+  color: #3d4e53;
+  border: 5px solid #edf3f4;
+}
+.book_panel a {
+  font-size: 12pt;
+  color: #73a334;
+  text-decoration: none;
+}
+.book_panel a:hover {
+  color: #8dc63f;
+  text-decoration: none;
+}
+.book_panel p {
+  margin: 0;
+}
+.book_panel img {
+  padding: 5px 0;
+  margin: 0;
+}
+.book_panel:hover {
+  color: #3d4e53;
+}
+.green {
+  color: #8dc63f;
+  text-align: left;
+}
+.book_panel_back {
+  margin: 0  auto;
+  padding: 10px;
+  height: 295px;
+  width: 120px;
+  line-height: 16px;
+  background-color: #8dc63f;
+  color: #ffffff;
+  position: relative;
+}
+.book_panel_back a {
+  font-size: 12px;
+  font-weight: normal;
+}
+.unglued_white {
+  margin: 0  auto;
+  margin-bottom: 5px;
+  padding: 10px 0;
+}
+.status {
+  color: #8dc63f;
+  text-align: left;
+}
+.read_itbutton {
+  width: 118px;
+  height: 35px;
+  padding: 0 0;
+  background: #FFFFFF;
+  margin: 0;
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #81bb38;
+}
+.read_itbutton a {
+  line-height: 40px;
+  font-size: 11px;
+  background: url("/static/images/book-panel/book_icon.png") no-repeat left center;
+  background-position: 10px center;
+  padding: 0 0 0 30px;
+  color: #73a334;
+  text-decoration: none;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.read_itbutton a:hover {
+  text-decoration: none;
+}
+#add_towish {
+  width: 130px;
+  height: 30px;
+  padding: 0 0;
+  margin: 10px auto;
+}
+#add_towish a {
+  line-height: 40px;
+  font-size: 11px;
+  background-image: url("/static/images/book-panel/add_wish_icon.png") no-repeat left center;
+  padding: 8px 5px 8px 21px;
+  font-weight: bold;
+  color: #FFFFFF;
+  text-decoration: none;
+  text-transform: uppercase;
+  border-width: 1px 0px;
+  border-style: solid none;
+  border-color: #FFFFFF;
+}
+#add_towish a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+#white_text {
+  width: 130px;
+  height: 40px;
+  padding: 17px 0;
+  margin: 0;
+}
+#white_text a {
+  color: #FFFFFF;
+  text-decoration: none;
+}
+#white_text a:hover {
+  color: #3d4e53;
+  text-decoration: none;
+}
+#moreinfo {
+  width: 130px;
+  height: 30px;
+  padding: 0;
+  margin: 15px 0 0;
+}
+#moreinfo a {
+  line-height: 40px;
+  font-size: 11px;
+  background-image: url("/static/images/book-panel/more_icon.png") no-repeat left center;
+  padding: 8px 42px 8px 20px;
+  font-weight: bold;
+  padding-left: 20px;
+  color: #FFFFFF;
+  text-decoration: none;
+  text-transform: uppercase;
+  border-width: 1px 0px;
+  border-style: solid none;
+  border-color: #FFFFFF;
+}
+#moreinfo a:hover {
+  text-decoration: none;
+  color: #3d4e53;
+}
+.green {
+  color: #8dc63f;
+  text-align: left;
+}
+#graypanel a {
+  color: #3d4e53;
+  text-decoration: none;
+}
+.read {
+  margin: 15px auto;
+  padding: 0;
+  width: 140px;
+  color: #8dc63f;
+  height: 40px;
+  line-height: 25px;
+  float: left;
+}
+.read p {
+  margin: 0;
+  padding: 10px 3px;
+  width: 50px;
+  font-size: 10pt;
+  float: left;
+}
+.read img {
+  padding: 5px;
+  margin: 0;
+  float: left;
+}
+.right_add {
+  padding: 10px;
+  margin: 0;
+  float: right;
+}
+p.right_add {
+  float: right;
+  padding: 10px 10px 0 0;
+  width: 24px;
+}
+/* slideout hover state */
+.book_panel_interior {
+  float: left;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  left: 0;
+}
+.book_panel_interior img {
+  z-index: 100;
+}
+.book_panel_interior span {
+  position: absolute;
+  bottom: 0;
+  left: -10px;
+  top: -5px;
+  z-index: 1000;
+  height: auto;
+}
diff --git a/static/less/layout.less b/static/less/layout.less
index 38fbe4aa..79589735 100644
--- a/static/less/layout.less
+++ b/static/less/layout.less
@@ -12,6 +12,7 @@ Changes made directly to layout.css will be overwritten.
 @import "sitewide.less";
 @import "registration.less";
 @import "supporter_layout.less";
+@import "book_panel.less";
 
 // I am going to need to draw out the page on a white board and get a sense of how this content wants to be structured for reusability.
 // What might I need to look at...
diff --git a/static/less/sitewide.less b/static/less/sitewide.less
index 2c6155a3..11ab5a15 100644
--- a/static/less/sitewide.less
+++ b/static/less/sitewide.less
@@ -258,6 +258,7 @@ div.content-block {
 div.content-block-content {
 	width:100%;
 	overflow:hidden;
+	padding-left: 10px;
 	
 	.cols3 .column {
 		width:33.33%;
diff --git a/static/less/supporter_layout.less b/static/less/supporter_layout.less
index b2669c54..aea7f350 100644
--- a/static/less/supporter_layout.less
+++ b/static/less/supporter_layout.less
@@ -205,3 +205,11 @@ ul.tabs {
 		text-transform:capitalize;
 	}
 }
+
+div.content-block-content {
+  padding-left: 10px;
+}
+
+#tabs {
+  margin-left: 10px;
+}
\ No newline at end of file
diff --git a/static/supporter_integration_test.html b/static/supporter_integration_test.html
new file mode 100644
index 00000000..b2503649
--- /dev/null
+++ b/static/supporter_integration_test.html
@@ -0,0 +1,69 @@
+<html>
+<head>
+
+<!-- there's stuff we need from here and stuff that's incompatible:
+<link href="css/layout.css" rel="stylesheet" type="text/css" />  -->
+
+<link href="less/book_list-test.css" rel="stylesheet" type="text/css" />
+<link href="less/book_panel_unimported_test.css" rel="stylesheet" type="text/css" />
+
+<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
+
+<!-- Beware of fadeIn/fadeOut jQuery animations; they add an inline "display: block"
+which overrides display: none in the stylesheet.  Sneaky! -->
+
+<script type="text/javascript">
+$(document).ready(function(){
+	$('#toggle-list').click(function(){
+    	$('div.panelview').addClass("listview").removeClass("panelview");
+	});
+	$('#toggle-panel').click(function(){
+    	$('div.listview').addClass("panelview").removeClass("listview");
+	});
+});
+</script>
+
+</head>
+
+<body>
+
+<a href="#" id="toggle-list">List view</a>
+<a href="#" id="toggle-panel">Panel view</a>
+<br />
+
+<div class="listview tabs tabs-3">
+	<div class="listview book-list row1">
+    	<div class="listview book-thumb">
+        	<a href="#"><img src="http://bks0.books.google.com/books?id=v6iZL5n5cLwC&printsec=frontcover&img=1&zoom=1" alt="Book name" title="book name"  /></a>
+        </div>
+        <div class="listview book-name">
+        	<span>
+        		<a href="{% url work work.id %}">Title</a>
+            </span>
+        </div>
+		<div class="listview author">
+    		<span id="{{ work.author }}">James K. Polk</span>
+    	</div>
+		<div class="listview remove-wishlist">
+    		<span id="{{ work.id }}">Remove from Wishlist</span>
+    	</div>
+		<div class="listview booklist-status">
+        	<span class="booklist-status-label">Status:&nbsp;</span><span class="booklist-status-text">Active</span>
+			<!-- images differ for list and panel; need to deal. maybe can use smaller version in rounded-corner pale-background div? -->
+			<!-- also this span is not nested in the panel view but is in list. how to deal? -->
+            <span class="booklist-status-img">
+            	<img src="images/images/icon-book-37by25-4.png" title="book list status" alt="book list status" />
+            	<p>100%</p>
+            	<p class="right_add"><img src="/static/images/book-panel/add_gray.png" border="0" /></p>
+            </span>
+        </div>
+        <div class="listview unglue-this none">
+        	<div class="listview unglue-this-inner1">
+            	<div class="listview unglue-this-inner2">
+                </div>
+            </div>
+        </div>
+     </div>
+</div>
+                    
+</body>