Use unicode symbols for increment & decrement operators. Fix style. (#192)

Author: Vidya Ramakrishnan

boxoffice/templates/boxoffice.html.jinja2

@@ -42,11 +42,11 @@
                         </div>
                         <div class="price-details-wrapper">
                           <div class="ticket-qty-wrapper">
-                            <button class="decrement" on-click="updateOrder(event, line_item.item_name, line_item.quantity_available, false)">-</button>
+                            <button class="decrement" on-click="updateOrder(event, line_item.item_name, line_item.quantity_available, false)">&#8722;</button>
                             <input type="number" class="ticket-qty" name="quantity" min="0" max="{{ line_item.quantity_available }}" value="{{ line_item.quantity }}" disabled>
-                            <button class="increment" on-click="updateOrder(event, line_item.item_name, line_item.quantity_available, true)">+</button>
+                            <button class="increment" on-click="updateOrder(event, line_item.item_name, line_item.quantity_available, true)">&#43;</button>
                           </div>
-                          <span class="multiplier">&times;</span>
+                          <span class="multiplier">&#215;</span>
                           <div class="ticket-price-wrapper">
                             {{#if line_item.unit_final_amount >= 0 && line_item.quantity === 0}}
                               <p class="discount-price ticket-price">&#8377;{{ line_item.unit_final_amount }}</p>
@@ -503,6 +503,11 @@
   .ticket-description p {
     margin: 7px 0;
   }
+  .ticket-description ul {
+    list-style-type: disc;
+    list-style-position: inside;
+    padding-left: 5px;
+  }
   .ticket-description .fa {
     padding-right: 5px;
   }
@@ -538,11 +543,12 @@
   .price-details-wrapper {
     float: right;
     margin: 0 0 10px;
+    line-height: 1;
   }
   .ticket-price-wrapper {
     float: right;
-    margin-top: 4px;
     position: relative;
+    margin: 4px 0 0;
   }
   .ticket-price {
     font-size: 18px;
@@ -568,7 +574,7 @@
     outline: medium none;
     color: #333;
     padding: 0;
-    height: 30px;
+    height: 27px;
     overflow: hidden;
     background: #f6f3c2;
     font-size: 18px;
@@ -580,7 +586,6 @@
     background: #f6f3c2;
     -webkit-text-fill-color:#333;
     color: #333;
-    line-height: 1;
     display: inline-block;
     padding-left: 8px;
     font-size: 18px;
@@ -603,8 +608,7 @@
     -moz-appearance: textfield;
   }
   .increment, .decrement {
-    line-height: 1;
-    font-size: 20px;
+    font-size: 18px;
     background-color: #eee;
     height: 100%;
     border: 0;
@@ -615,9 +619,9 @@
   }
   .multiplier {
     padding-right: 20px;
-    font-size: 20px;
-    margin-top: 2px;
+    font-size: 18px;
     float: right;
+    margin: 5px 0 0;
   }
   .discount-amount, .subtotal {
     margin: 5px 0;
@@ -647,7 +651,9 @@
     .ticket-title,
     .ticket-price,
     .multiplier,
-    .ticket-qty {
+    .ticket-qty,
+    .increment,
+    .decrement{
      font-size: 25px;
     }
     .sold-out {
@@ -658,9 +664,6 @@
     .ticket-price .rupee-sign {
       font-size: 22px;
     }
-    .increment, .decrement {
-      font-size: 35px;
-    }
     .ticket-qty-wrapper {
       height: 37px;
     }
@@ -677,7 +680,7 @@
       bottom: 24px;
     }
     .ticket-price-wrapper {
-      margin-top: 2px;
+      margin-top: 3px;
     }
   }
   .item-amount {