diff --git a/Gemfile b/Gemfile
index 02ce8386..0f98dc19 100644
--- a/Gemfile
+++ b/Gemfile
@@ -22,7 +22,7 @@ group :assets do
   gem 'coffee-rails' #, '~> 3.2.1'
   #gem 'twitter-bootstrap-rails'
   gem 'bootstrap-sass', '~>2.3'
-  #gem 'bourbon'
+  gem 'bourbon'
   gem 'compass-rails'
   gem 'js-routes'
   gem "font-awesome-rails"
diff --git a/Gemfile.lock b/Gemfile.lock
index 7115eadd..37a4047d 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -392,6 +392,7 @@ PLATFORMS
 DEPENDENCIES
   active_decorator
   bootstrap-sass (~> 2.3)
+  bourbon
   capybara
   capybara-webkit
   cmtool!
diff --git a/app/assets/images/icons/logo-text.png b/app/assets/images/icons/logo-text.png
index d5964e95..9816e765 100644
Binary files a/app/assets/images/icons/logo-text.png and b/app/assets/images/icons/logo-text.png differ
diff --git a/app/assets/javascripts/supplier/app/models/order.js.coffee b/app/assets/javascripts/supplier/app/models/order.js.coffee
index f1b2bc93..2323ec57 100644
--- a/app/assets/javascripts/supplier/app/models/order.js.coffee
+++ b/app/assets/javascripts/supplier/app/models/order.js.coffee
@@ -3,19 +3,26 @@ Qsupplier.App.Order = DS.Model.extend
   state: attr('string')
   list: DS.belongsTo('list')
   price: attr('number')
-  product_orders: attr()
   section: DS.belongsTo('section')
   section_id: attr('string')
+  product_orders: DS.hasMany('product_order')
 
   active: (-> @get('state') == 'active').property('state')
   delivered: (-> @get('state') == 'delivered').property('state')
   placed: (-> @get('state') == 'placed').property('state')
   needs_supplier_attention: (-> @get('state') == 'placed' || @get('state') == 'active').property('state')
 
-  display: (->
-    return '' unless @get('product_orders')
-    @get('product_orders').map((po)-> "#{po.product_name} (#{po.quantity})").join(',')
-  ).property('product_orders')
+  #display: (->
+    #return '' unless @get('product_orders')
+    #@get('product_orders').map((po)-> "#{po.product_name} (#{po.quantity})").join(',')
+  #).property('product_orders')
 
   markClosed: ->
     @set 'state', 'closed'
+  total: (->
+    @get('product_orders').getEach('total').reduce(((sum, total) -> sum + total), 0)
+  ).property('product_orders.@each.quantity', 'product_orders.@each.product.@each.price')
+
+  display: (->
+    @get('product_orders').map((po) -> "#{po.get('quantity')} x #{po.get('product.name')}").join(', ')
+  ).property('product_orders.@each.quantity', 'product_orders.@each.product.@each.name')
diff --git a/app/assets/javascripts/supplier/app/models/product.js.coffee b/app/assets/javascripts/supplier/app/models/product.js.coffee
index 1454659e..4cdac7c6 100644
--- a/app/assets/javascripts/supplier/app/models/product.js.coffee
+++ b/app/assets/javascripts/supplier/app/models/product.js.coffee
@@ -1,3 +1,6 @@
 attr = DS.attr
 Qsupplier.App.Product = DS.Model.extend
-  order: DS.belongsTo('order')
+  name: attr 'string'
+  price: attr 'number'
+  product_category: DS.belongsTo('product_category')
+  product_orders: DS.hasMany('product_order')
diff --git a/app/assets/javascripts/supplier/app/models/product_category.js.coffee b/app/assets/javascripts/supplier/app/models/product_category.js.coffee
new file mode 100644
index 00000000..b0e081c0
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/models/product_category.js.coffee
@@ -0,0 +1,4 @@
+attr = DS.attr
+Qsupplier.App.ProductCategory = DS.Model.extend
+  name: attr('string')
+  products: DS.hasMany('product')
diff --git a/app/assets/javascripts/supplier/app/models/product_order.js.coffee b/app/assets/javascripts/supplier/app/models/product_order.js.coffee
new file mode 100644
index 00000000..ace25d8e
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/models/product_order.js.coffee
@@ -0,0 +1,8 @@
+attr = DS.attr
+Qsupplier.App.ProductOrder = DS.Model.extend
+  quantity: attr 'number', defaultValue: 1
+  product: DS.belongsTo('product')
+  order: DS.belongsTo('order')
+  increment: ->
+    @set('quantity', @get('quantity') + 1)
+  total: (-> @get('quantity') * @get('product.price')).property('quantity', 'product.price')
diff --git a/app/assets/javascripts/supplier/app/routes/application_route.js.coffee b/app/assets/javascripts/supplier/app/routes/application_route.js.coffee
new file mode 100644
index 00000000..672c25b5
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/routes/application_route.js.coffee
@@ -0,0 +1,3 @@
+Qsupplier.App.ApplicationRoute = Ember.Route.extend
+  setupController: (controller)->
+    controller.set 'product_categories', @store.find('product_category')
diff --git a/app/assets/javascripts/supplier/app/store.js.coffee b/app/assets/javascripts/supplier/app/store.js.coffee
index 4eb9f8da..cd7200a5 100644
--- a/app/assets/javascripts/supplier/app/store.js.coffee
+++ b/app/assets/javascripts/supplier/app/store.js.coffee
@@ -3,6 +3,13 @@ DS.RESTAdapter.reopen
   namespace: 'supplier'
 
 Qsupplier.App.ApplicationSerializer = DS.ActiveModelSerializer
+
+Qsupplier.App.CustomAdapter = DS.RESTAdapter.extend
+
+  # user underscored paths
+  pathForType: (type)->
+    decamelized = Ember.String.decamelize(type)
+    Ember.String.pluralize(decamelized)
 Qsupplier.App.Store = DS.Store.extend
   revision: 13
-  adapter: DS.RESTAdapter
+  adapter: Qsupplier.App.CustomAdapter
diff --git a/app/assets/javascripts/supplier/app/templates/active_order.emblem b/app/assets/javascripts/supplier/app/templates/active_order.emblem
index b0baa38b..8152eed0 100644
--- a/app/assets/javascripts/supplier/app/templates/active_order.emblem
+++ b/app/assets/javascripts/supplier/app/templates/active_order.emblem
@@ -2,7 +2,7 @@ td {{view.content.display}}
 td.numeric.table_number
   view Qsupplier.App.ActiveOrderTableNumberView contextBinding=view.content
 td.section_title {{view.content.section.title}}
-td.currency {{currency view.content.price }}
+td.currency {{currency view.content.total }}
 td.actions
   if view.content.placed
     button.btn.btn-success{ action markOrderActive view.content.id} {{t 'order.being_processed'}}
diff --git a/app/assets/javascripts/supplier/app/templates/table.emblem b/app/assets/javascripts/supplier/app/templates/table.emblem
index 8481143b..c07689cf 100644
--- a/app/assets/javascripts/supplier/app/templates/table.emblem
+++ b/app/assets/javascripts/supplier/app/templates/table.emblem
@@ -15,7 +15,7 @@ div class="table-actions table-actions-#{unbound table.id}"
     a href="suppliers_table_path(@table)" {{t 'section.tables_view.table_actions.got_to_table'}}
   each user in table.active_list.users
     img src="http://graph.facebook.com/#{user.uid}/picture?type=square"
-if editmode_beta
+if editmode
   .table-settings
     select
       option Round
diff --git a/app/assets/javascripts/translations.js.coffee.erb b/app/assets/javascripts/translations.js.coffee.erb
index 81e35bff..73017a5f 100644
--- a/app/assets/javascripts/translations.js.coffee.erb
+++ b/app/assets/javascripts/translations.js.coffee.erb
@@ -55,15 +55,16 @@
   setTranslations()
 
 @setTranslations = (selector) ->
-  list = $("#top-navigation-list")
-  list.find(".locale").show()
-  list.find(".locale-" + $locale).hide()
+  #list = $("#top-navigation-list")
+  selector = $( selector || document)
+  selector.find(".locale-select").show()
+  selector.find(".locale-select-" + $locale).hide()
   moment.lang $locale
   if selector
-    $(selector).find("[data-t]").each ->
+    selector.find("[data-t]").each ->
       $(this).html t($(this).data("t"), $(this).data("tAttributes"))
 
-    $(selector).find("*[data-time]").each ->
+    selector.find("*[data-time]").each ->
       $(this).text moment($(this).data("time")).format($(this).data("timeFormat") or "dd D MMM HH:MM")
 
   else
diff --git a/app/assets/javascripts/user/app/controllers/application_controller.js.coffee b/app/assets/javascripts/user/app/controllers/application_controller.js.coffee
index 3c855deb..2596b0bc 100644
--- a/app/assets/javascripts/user/app/controllers/application_controller.js.coffee
+++ b/app/assets/javascripts/user/app/controllers/application_controller.js.coffee
@@ -17,7 +17,26 @@ App.ApplicationController = Ember.Controller.extend
     list_needs_help: -> @set 'list.needs_help', true # incoming from other users
     list_is_paid: -> @set 'list.needs_payment', false
     list_needs_payment: -> @set 'list.needs_payment', true # incoming from other users
+    list_closed: -> @set 'list', null
+    join_request_approved: (data)->
+      @setCurrentList -> @transitionToRoute('active_list')
 
   #getProducts: (options = {})->
     #@store.find('product_category', options).then (product_categories)=>
       #@controllerFor('list_products').set 'model', product_categories
+  setCurrentList: (callback)->
+    success = (list)=>
+      #@store.find('list', 'current').deleteRecord() # gets not replaced, buty stays as dummy
+
+      # A list record with id current and with the content of the returned list is created
+      # at the moment remove the dummy list, this should be resolved by Ember eventually
+      if error_list = @store.all('list').findBy('id', 'current')
+        error_list.eraseRecord()
+      @set 'list', list
+      @controllerFor('active_list').set('model', list)
+      callback.call(@) if callback
+    error = (jqXHR)=>
+      # if jqXHR.status == 404 officially, now assume close list on error
+      #@redirect_to 'index', message: 'the_list_has_been_closed'
+      @set 'list', null
+    @store.find('list', 'current').then(success, error)
diff --git a/app/assets/javascripts/user/app/controllers/product_orders_controller.js.coffee b/app/assets/javascripts/user/app/controllers/product_orders_controller.js.coffee
index 7d4d9a26..9b362a7b 100644
--- a/app/assets/javascripts/user/app/controllers/product_orders_controller.js.coffee
+++ b/app/assets/javascripts/user/app/controllers/product_orders_controller.js.coffee
@@ -5,16 +5,18 @@ App.ProductOrdersController = Ember.ArrayController.extend
   ).property('model.@each.quantity')
   actions:
     clearProductOrders: ->
-      @store.all('product_order').toArray().invoke 'unloadRecord'
+      #TODO: make clearing of unpersisted product orders
+      @store.all('product_order').toArray().invoke 'eraseRecord'
     orderProducts: ->
       order = @store.createRecord('order', list: @get('controllers.application.list'))
       new_product_orders = @store.all('product_order').filterProperty('order', null)
       order.get('product_orders').pushObjects(new_product_orders)
-      order.save().then ->
-        # The new versions will be returned in the json response
-        #new_product_orders.invoke 'rollback'
-        #new_product_orders.invoke 'transitionTo', 'loaded.saved'
-        new_product_orders.invoke 'deleteRecord'
+      order.save().then (response)=>
+        debugger
+        new_product_orders.invoke 'eraseRecord'
+      .error (a,b,c)=>
+        d=a
+        debugger
       @transitionToRoute 'active_list'
 
       #orders = @store.all('product_order').toArray()
@@ -31,4 +33,4 @@ App.ProductOrdersController = Ember.ArrayController.extend
       #orders.invoke 'unloadRecord'
 
     removeProductOrder: (product_order)->
-      product_order.unloadRecord()
+      product_order.eraseRecord()
diff --git a/app/assets/javascripts/user/app/controllers/select_qrcode_controller.js.coffee b/app/assets/javascripts/user/app/controllers/select_qrcode_controller.js.coffee
index 88f17eec..25386566 100644
--- a/app/assets/javascripts/user/app/controllers/select_qrcode_controller.js.coffee
+++ b/app/assets/javascripts/user/app/controllers/select_qrcode_controller.js.coffee
@@ -7,10 +7,10 @@ App.SelectQrcodeController = Ember.Controller.extend
           if res.current_table_id
             if res.other_supplier
               @redirect_to 'user_root', message: 'table_is_from_other_supplier'
-            else if res.current_table_id == table.table_id
+            else if res.current_table_id == table._id
               #nothing has changed, show product list
               @redirect_to 'list_products'
-            else if res.current_table_id != table.table_id
+            else if res.current_table_id != table._id
               if res.occupied
                 @redirect_to 'user_root', message: 'table_is_occupied'
               else if res.reserved
@@ -35,9 +35,9 @@ App.SelectQrcodeController = Ember.Controller.extend
                     @redirect_to 'list_products'
           else
             if res.occupied
-              @redirect_to 'join_occupied_table', {table_id: table.table_id}
+              @redirect_to 'join_occupied_table', {table_id: table._id}
             else if res.supplier_closed
               @redirect_to 'user_root', {message: 'supplier_is_closed'}
             else
-              #$.post(data_host + '/user/create_list.json', {table_id: table.table_id}, (res)-> Quser.handle_response(res))
-              @redirect_to 'list_products_for_table', {table_id: table.table_id}
+              #$.post(data_host + '/user/create_list.json', {table_id: table._id}, (res)-> Quser.handle_response(res))
+              @redirect_to 'table', table._id, a: 3
diff --git a/app/assets/javascripts/user/app/controllers/table_controller.js.coffee b/app/assets/javascripts/user/app/controllers/table_controller.js.coffee
new file mode 100644
index 00000000..9c166bf6
--- /dev/null
+++ b/app/assets/javascripts/user/app/controllers/table_controller.js.coffee
@@ -0,0 +1,28 @@
+App.TableController = Ember.ObjectController.extend
+  join_request_sent: false
+  tableCanTakeOrders: (->
+    return false unless @get('supplier.can_take_orders')
+    list = @get('controllers.application.list')
+    if list
+      return false unless list.get('supplier.id') == @get('supplier.id')
+      return false unless list.get('table.id') == @get('model.id')
+      true
+    else
+      # no list and open supplier
+      if @get('model.occupied') then false else true
+  ).property('controllers.application.list.id', 'supplier.can_take_orders', 'model.occupied', 'model.id', 'controllers.application.list.table.id')
+  showJoinButton: (->
+    return false unless @get('supplier.can_take_orders')
+    return false if @get('controllers.application.list') # if you already have an active list, do not join another
+    if @get('model.occupied') then true else false
+  ).property('controllers.application.list.id', 'supplier.can_take_orders', 'model.occupied', 'model.id', 'controllers.application.list.table.id')
+  actions:
+    addProduct: (product)->
+      if existing = @store.all('product_order').find((po)-> po.get('product') == product and not po.get('order'))
+        existing.increment()
+      else
+        @store.createRecord 'product_order', product: product
+    joinOccupiedTable: ->
+      #@secured =>
+      $.post('/user/join_occupied_table.json', table_id: @get('model.id'))
+      @set 'join_request_sent', true
diff --git a/app/assets/javascripts/user/app/models/list.js.coffee b/app/assets/javascripts/user/app/models/list.js.coffee
index ba54d706..9e19c9cd 100644
--- a/app/assets/javascripts/user/app/models/list.js.coffee
+++ b/app/assets/javascripts/user/app/models/list.js.coffee
@@ -8,6 +8,10 @@ App.List = DS.Model.extend
   extended_version: attr('boolean')
   supplier_orders_in_process_count: attr('number')
   supplier_orders_placed_count: attr('number')
+
+  supplier: DS.belongsTo('supplier')
+  table: DS.belongsTo('table')
+
   total: (->
     @get('orders').getEach('total').reduce(((sum, total) -> sum + total), 0)
   ).property('orders.@each.total')
diff --git a/app/assets/javascripts/user/app/models/product_category.js.coffee b/app/assets/javascripts/user/app/models/product_category.js.coffee
index 096bf301..a288dd22 100644
--- a/app/assets/javascripts/user/app/models/product_category.js.coffee
+++ b/app/assets/javascripts/user/app/models/product_category.js.coffee
@@ -2,3 +2,4 @@ attr = DS.attr
 App.ProductCategory = DS.Model.extend
   name: attr('string')
   products: DS.hasMany('product')
+  supplier: DS.belongsTo('supplier')
diff --git a/app/assets/javascripts/user/app/models/product_order.js.coffee b/app/assets/javascripts/user/app/models/product_order.js.coffee
index e4c0a49d..ee680168 100644
--- a/app/assets/javascripts/user/app/models/product_order.js.coffee
+++ b/app/assets/javascripts/user/app/models/product_order.js.coffee
@@ -2,6 +2,7 @@ attr = DS.attr
 App.ProductOrder = DS.Model.extend
   quantity: attr 'number', defaultValue: 1
   product: DS.belongsTo('product')
+  product_name: attr('string')
   order: DS.belongsTo('order')
   placed: attr('boolean', defaultValue: false)
   increment: ->
diff --git a/app/assets/javascripts/user/app/models/supplier.js.coffee b/app/assets/javascripts/user/app/models/supplier.js.coffee
new file mode 100644
index 00000000..1f2585a3
--- /dev/null
+++ b/app/assets/javascripts/user/app/models/supplier.js.coffee
@@ -0,0 +1,20 @@
+attr = DS.attr
+App.Supplier= DS.Model.extend
+  name: attr('string')
+  extended_version: attr('boolean')
+  open: attr('boolean')
+  orders_in_process_count: attr('number')
+  orders_placed_count: attr('number')
+
+  orders: DS.hasMany('order')
+  product_categories: DS.hasMany('product_category')
+
+  is_extended_version: ->
+    @get('extended_version')
+
+  can_take_orders: (->
+    return false unless @get('open')
+    true
+  ).property('open')
+
+
diff --git a/app/assets/javascripts/user/app/models/table.js.coffee b/app/assets/javascripts/user/app/models/table.js.coffee
new file mode 100644
index 00000000..4c476505
--- /dev/null
+++ b/app/assets/javascripts/user/app/models/table.js.coffee
@@ -0,0 +1,7 @@
+attr = DS.attr
+App.Table= DS.Model.extend
+  number: attr('number')
+  needs_help: attr('boolean')
+  occupied: attr('boolean')
+
+  supplier: DS.belongsTo('supplier')
diff --git a/app/assets/javascripts/user/app/modifications/controller_modifications.js.coffee b/app/assets/javascripts/user/app/modifications/controller_modifications.js.coffee
index 34d485e5..aed8e960 100644
--- a/app/assets/javascripts/user/app/modifications/controller_modifications.js.coffee
+++ b/app/assets/javascripts/user/app/modifications/controller_modifications.js.coffee
@@ -6,9 +6,20 @@ Ember.Controller.reopen
     @authentication_string = 'auth_token='+Qstorage.getItem('auth_token')
     @authentication_object = {auth_token: Qstorage.getItem('auth_token')}
     callback.call(@) if callback
-  redirect_to: (route, options={})->
+  redirect_to: (route, args...)->
     route = 'index' if route == 'user_root'
-    @transitionToRoute(route).then =>
+    route_segments = App.Router.router.recognizer.names[route].segments
+    dynamic_segments = route_segments.reduce (sum, segment) ->
+      if segment.name then sum + 1 else sum
+    , 0
+    route_args = [route]
+    for isegment in [1..dynamic_segments]
+      route_args.push args.shift()
+
+    options = args.pop() || {}
+
+    #route_args.push args if a
+    @transitionToRoute.apply(@,route_args).then =>
       if options.message
         tkey = if options.message.indexOf('.') > -1 then options.message else "messages.#{options.message}"
         @set 'controllers.application.notice', t(tkey)
@@ -26,7 +37,7 @@ Ember.Controller.reopen
     ##$('#confirm-modal').css('visibility', 'visible').show()
   showModal: (options={})->
     #this.container.lookup('view:modal', {title:'Test title'})
-    debugger
+    #debugger
     $(document).foundation('reflow') # needed (stupid!!!)
     @confirm_cancel = options.cancel
     @set 'controllers.application.modal.title', options.title if options.title
@@ -48,3 +59,6 @@ Ember.ArrayController.reopen
       if options.message
         tkey = if options.message.indexOf('.') > -1 then options.message else "messages.#{options.message}"
         @set 'controllers.application.notice', t(tkey)
+
+Ember.ObjectController.reopen
+  needs: ['application']
diff --git a/app/assets/javascripts/user/app/modifications/model_modifications.js.coffee b/app/assets/javascripts/user/app/modifications/model_modifications.js.coffee
new file mode 100644
index 00000000..bfd0bb96
--- /dev/null
+++ b/app/assets/javascripts/user/app/modifications/model_modifications.js.coffee
@@ -0,0 +1,6 @@
+DS.Model.reopen
+  created_at: DS.attr('date')
+  updated_at: DS.attr('date')
+  eraseRecord: ->
+    @clearRelationships();
+    @transitionTo('deleted.saved');
diff --git a/app/assets/javascripts/user/app/router.js.coffee b/app/assets/javascripts/user/app/router.js.coffee
index 86d51f32..6aac987f 100644
--- a/app/assets/javascripts/user/app/router.js.coffee
+++ b/app/assets/javascripts/user/app/router.js.coffee
@@ -9,6 +9,7 @@ App.Router.map ->
   @route 'obtain_token'
   @route 'active_list'
   @route 'list_products'
-  @route 'list_products_for_table'
+  @route 'list_products_for_table', path: '/list_products/:table_id'
+  @route 'table', path: '/tables/:table_id'
   @resource 'lists', ->
     @resource 'list', path: ':list_id'
diff --git a/app/assets/javascripts/user/app/routes/active_list_route.js.coffee b/app/assets/javascripts/user/app/routes/active_list_route.js.coffee
index 66972bda..d35c515e 100644
--- a/app/assets/javascripts/user/app/routes/active_list_route.js.coffee
+++ b/app/assets/javascripts/user/app/routes/active_list_route.js.coffee
@@ -1 +1,7 @@
-App.ActiveListRoute = Ember.Route.extend {}
+App.ActiveListRoute = Ember.Route.extend
+  afterModel: (a,b,c)->
+    controller = @controllerFor('application')
+    if table_id = controller.get('list.table.id')
+      transitionTo 'table', table_id
+    else
+      controller.redirect_to 'index', message: 'the_list_has_been_closed'
diff --git a/app/assets/javascripts/user/app/routes/application_route.js.coffee b/app/assets/javascripts/user/app/routes/application_route.js.coffee
index 7ef8b684..5bbd17d2 100644
--- a/app/assets/javascripts/user/app/routes/application_route.js.coffee
+++ b/app/assets/javascripts/user/app/routes/application_route.js.coffee
@@ -8,17 +8,7 @@ App.ApplicationRoute = Ember.Route.extend
       faye.subscribe "/user/"+user_id, (e)=>
         console.log e
         @events[e.event].call(@) if @events[e.event]
-      @store.find('list', 'current').then (list)=>
-        #@store.find('list', 'current').deleteRecord() # gets not replaced, buty stays as dummy
-
-        # A list record with id current and with the content of the returned list is created
-        # at the moment remove the dummy list, this should be resolved by Ember eventually
-        if error_list = @store.all('list').findBy('id', 'current')
-          error_list.rollback()
-          error_list.transitionTo 'loaded.saved'
-          error_list.unloadRecord()
-        @set 'list', list
-        @controllerFor('active_list').set('model', list)
+      @setCurrentList()
 
   unauthorized: ->
     Qstorage.setItem('auth_token', '')
diff --git a/app/assets/javascripts/user/app/store.js.coffee b/app/assets/javascripts/user/app/store.js.coffee
index 0be80275..1e835d0e 100644
--- a/app/assets/javascripts/user/app/store.js.coffee
+++ b/app/assets/javascripts/user/app/store.js.coffee
@@ -25,10 +25,9 @@ DS.ActiveModelSerializer.reopen
           json[key].push item.serialize()
     else
       @_super record, json, relationship
-DS.Model.reopen
-  created_at: DS.attr('date')
-  updated_at: DS.attr('date')
+
 App.ApplicationSerializer = DS.ActiveModelSerializer
+
 App.CustomAdapter = DS.RESTAdapter.extend
 
   # user underscored paths
diff --git a/app/assets/javascripts/user/app/templates/list.emblem b/app/assets/javascripts/user/app/templates/list.emblem
index 322db191..c8eb9ec1 100644
--- a/app/assets/javascripts/user/app/templates/list.emblem
+++ b/app/assets/javascripts/user/app/templates/list.emblem
@@ -2,7 +2,7 @@
   h2=t 'models.list'
   p Hoi
   = controller
-  if model.extended_version
+  if model.is_extended_version
     h3 Extended
   else
     h3 Not extended
diff --git a/app/assets/javascripts/user/app/templates/list_products_for_table.emblem b/app/assets/javascripts/user/app/templates/list_products_for_table.emblem
index e15ea428..6083ae05 100644
--- a/app/assets/javascripts/user/app/templates/list_products_for_table.emblem
+++ b/app/assets/javascripts/user/app/templates/list_products_for_table.emblem
@@ -1,4 +1,5 @@
-.row
+h2= List products for table
+/.row
   .large-6.columns
     each product_category in controller
       hr
diff --git a/app/assets/javascripts/user/app/templates/table.emblem b/app/assets/javascripts/user/app/templates/table.emblem
new file mode 100644
index 00000000..7312e961
--- /dev/null
+++ b/app/assets/javascripts/user/app/templates/table.emblem
@@ -0,0 +1,37 @@
+.row
+  h2
+    =t 'models.table'
+    |  
+    = number
+  if showJoinButton
+    if join_request_sent
+      button.disabled
+        span.fa.fa-spinner.fa-spin.fa-lg
+        span  Waiting for approval
+    else
+      button{action joinOccupiedTable} Join occupied table
+  if tableCanTakeOrders
+    .large-6.columns
+      each product_category in supplier.product_categories
+        if product_category.products
+          hr
+          h4= product_category.name
+          hr
+          ul.product_category-products
+            each product in product_category.products
+              li
+                a{action addProduct product}= product.name
+                span.right.currency=currency product.price
+    .large-6.columns= render 'product_orders'
+  else
+    .large12
+      each product_category in supplier.product_categories
+        if product_category.products
+          hr
+          h4= product_category.name
+          hr
+          ul.product_category-products
+            each product in product_category.products
+              li
+                span= product.name
+                span.right.currency=currency product.price
diff --git a/app/assets/javascripts/user/application.js.erb b/app/assets/javascripts/user/application.js.erb
index 68b34f00..1118b1e3 100644
--- a/app/assets/javascripts/user/application.js.erb
+++ b/app/assets/javascripts/user/application.js.erb
@@ -196,6 +196,22 @@ $(function(){
     Qstorage.removeItem('list_closed');
   }
   setTranslations();
+  $('#toggle-side-menu').click(function(){
+    var body = $('body');
+    var menu = $('#side-menu-container');
+    if(menu.is(':visible')){
+      body.animate({paddingLeft: 0});
+      menu.animate({width: 0}, function(){$(this).hide()});
+
+    }else{
+      body.animate({paddingLeft: '222px'});
+      menu.show().animate({width: '222px'});
+    }
+    //if(body.css('margin-left') && body.css('margin-left') != '0px'){
+    //  body.animate('margin-left', '0')
+    //}else{
+    //}
+  });
 });
 function setLocale(locale){
   Qstorage.setItem('locale', locale);
diff --git a/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass b/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass
index 6c28e265..40561bac 100644
--- a/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass
+++ b/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass
@@ -58,7 +58,7 @@
     padding: 0
     height: 400px
     //background-image: image-url('textures/wood4.jpg')
-    background-color: rgba(0,0,0,0.4)
+    //background-color: rgba(0,0,0,0.4)
     .section-table
       position: absolute
       cursor: pointer
diff --git a/app/assets/stylesheets/supplier/basic1/structure.css.sass b/app/assets/stylesheets/supplier/basic1/structure.css.sass
index 67a5dc37..44150087 100644
--- a/app/assets/stylesheets/supplier/basic1/structure.css.sass
+++ b/app/assets/stylesheets/supplier/basic1/structure.css.sass
@@ -2,6 +2,7 @@ $side-spacing: 0px
 @import constants
 html
 body
+  padding-top: 42px
   padding-left: $side-spacing
   padding-right: $side-spacing
   background-color: transparent
diff --git a/app/assets/stylesheets/supplier/wood1/darkstrap.sass b/app/assets/stylesheets/supplier/wood1/darkstrap.sass
index 5be04f3f..63513bbf 100644
--- a/app/assets/stylesheets/supplier/wood1/darkstrap.sass
+++ b/app/assets/stylesheets/supplier/wood1/darkstrap.sass
@@ -35,7 +35,16 @@ $input-color: white
 //=General ========================================
 // Everything with the inset panel just extends .well
 .well
-  +inset-panel-dark
+  //+inset-panel-dark
+  background-color: rgba(255,255,255,0.8)
+  h1,h2,h3,h4,h5,h6,a
+    color: #333
+  .table
+    thead
+      color: #111
+    td
+      border-top-color: #aaa
+      color: #111
 
 body
   background: $bg
diff --git a/app/assets/stylesheets/supplier/wood1/section_tables.css.sass b/app/assets/stylesheets/supplier/wood1/section_tables.css.sass
index ca3cf4b8..0f1d9217 100644
--- a/app/assets/stylesheets/supplier/wood1/section_tables.css.sass
+++ b/app/assets/stylesheets/supplier/wood1/section_tables.css.sass
@@ -51,7 +51,7 @@
     padding: 0
     height: 400px
     //background-image: image-url('textures/wood4.jpg')
-    background-color: rgba(0,0,0,0.4)
+    //background-color: rgba(0,0,0,0.4)
     .section-table
       position: absolute
       cursor: pointer
diff --git a/app/assets/stylesheets/supplier/wood1/structure.css.sass b/app/assets/stylesheets/supplier/wood1/structure.css.sass
index ce71fe85..992ae604 100644
--- a/app/assets/stylesheets/supplier/wood1/structure.css.sass
+++ b/app/assets/stylesheets/supplier/wood1/structure.css.sass
@@ -4,6 +4,7 @@ html
   background-image: $wood
   background-color: $background-brown
 body
+  padding-top: 42px
   padding-left: $side-spacing
   padding-right: $side-spacing
   background-color: transparent
diff --git a/app/assets/stylesheets/twitter-bootstrap/bootstrap_and_overrides.css.sass b/app/assets/stylesheets/twitter-bootstrap/bootstrap_and_overrides.css.sass
index dddd219a..ac3c6b1c 100644
--- a/app/assets/stylesheets/twitter-bootstrap/bootstrap_and_overrides.css.sass
+++ b/app/assets/stylesheets/twitter-bootstrap/bootstrap_and_overrides.css.sass
@@ -1,6 +1,6 @@
 @import "bootstrap"
 body 
-  padding-top: 42px
+  //padding-top: 42px
   .table
     &.table-condensed
       margin-bottom: 5px
diff --git a/app/assets/stylesheets/user/foundation/application.css.sass b/app/assets/stylesheets/user/foundation/application.css.sass
index ed4e9646..0662c2b8 100644
--- a/app/assets/stylesheets/user/foundation/application.css.sass
+++ b/app/assets/stylesheets/user/foundation/application.css.sass
@@ -1,3 +1,3 @@
-//= require foundation
+//= require ./foundation_and_overrides
 //= require font-awesome
 //= require_directory .
diff --git a/app/assets/stylesheets/user/foundation/foundation_and_overrides.css.sass b/app/assets/stylesheets/user/foundation/foundation_and_overrides.css.sass
new file mode 100644
index 00000000..a1a587d5
--- /dev/null
+++ b/app/assets/stylesheets/user/foundation/foundation_and_overrides.css.sass
@@ -0,0 +1,1242 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+//
+// FOUNDATION SETTINGS
+//
+
+// This is the default html and body font-size for the base rem value.
+// $rem-base: 16px;
+
+// Allows the use of rem-calc() or lower-bound() in your settings
+@import "foundation/functions"
+
+// $experimental: true;
+
+// The default font-size is set to 100% of the browser style sheet (usually 16px)
+// for compatibility with browser-based text zoom or user-set defaults.
+
+// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
+// If you want your base font-size to be different and not have it affect the grid breakpoints,
+// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
+// $base-font-size: 100%;
+
+// The $base-line-height is 100% while $base-font-size is 150%
+// $base-line-height: 150%;
+
+// We use this to control whether or not CSS classes come through in the gem files.
+// $include-html-classes: true;
+// $include-print-styles: true;
+// $include-html-global-classes: $include-html-classes;
+
+// Grid
+
+// $include-html-grid-classes: $include-html-classes;
+// $include-xl-html-grid-classes: false;
+
+// $row-width: rem-calc(1000);
+// $column-gutter: rem-calc(30);
+// $total-columns: 12;
+
+// We use these to control various global styles
+// $body-bg: #fff;
+// $body-font-color: #222;
+// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+// $body-font-weight: normal;
+// $body-font-style: normal;
+
+// We use this to control font-smoothing
+// $font-smoothing: antialiased;
+
+// We use these to control text direction settings
+// $text-direction: ltr;
+// $opposite-direction: right;
+// $default-float: left;
+
+// We use these as default colors throughout
+// $primary-color: #008CBA;
+$primary-color: green
+// $secondary-color: #e7e7e7;
+// $alert-color: #f04124;
+// $success-color: #43AC6A;
+// $warning-color: #f08a24;
+// $info-color: #a0d3e8;
+
+// We use these to make sure border radius matches unless we want it different.
+// $global-radius: 3px;
+// $global-rounded: 1000px;
+
+// We use these to control inset shadow shiny edges and depressions.
+// $shiny-edge-size: 0 1px 0;
+// $shiny-edge-color: rgba(#fff, .5);
+// $shiny-edge-active-color: rgba(#000, .2);
+
+// Media Query Ranges
+// $small-range: (0em, 40em);
+// $medium-range: (40.063em, 64em);
+// $large-range: (64.063em, 90em);
+// $xlarge-range: (90.063em, 120em);
+// $xxlarge-range: (120.063em);
+
+// $screen: "only screen";
+
+// $landscape: "#{$screen} and (orientation: landscape)";
+// $portrait: "#{$screen} and (orientation: portrait)";
+
+// $small-up: $screen;
+// $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
+
+// $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
+// $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
+
+// $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
+// $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
+
+// $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
+// $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
+
+// $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
+// $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
+
+// Legacy
+// $small: $medium-up;
+// $medium: $medium-up;
+// $large: $large-up;
+
+//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
+// $cursor-crosshair-value: crosshair;
+// $cursor-default-value: default;
+// $cursor-pointer-value: pointer;
+// $cursor-help-value: help;
+// $cursor-text-value: text;
+
+//
+// TYPOGRAPHY
+//
+
+// $include-html-type-classes: $include-html-classes;
+
+// We use these to control header font styles
+// $header-font-family: $body-font-family;
+// $header-font-weight: normal;
+// $header-font-style: normal;
+// $header-font-color: #222;
+// $header-line-height: 1.4;
+// $header-top-margin: .2rem;
+// $header-bottom-margin: .5rem;
+// $header-text-rendering: optimizeLegibility;
+
+// We use these to control header font sizes
+// $h1-font-size: rem-calc(44);
+// $h2-font-size: rem-calc(37);
+// $h3-font-size: rem-calc(27);
+// $h4-font-size: rem-calc(23);
+// $h5-font-size: rem-calc(18);
+// $h6-font-size: 1rem;
+
+// These control how subheaders are styled.
+// $subheader-line-height: 1.4;
+// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
+// $subheader-font-weight: 300;
+// $subheader-top-margin: .2rem;
+// $subheader-bottom-margin: .5rem;
+
+// A general <small> styling
+// $small-font-size: 60%;
+// $small-font-color: scale-color($header-font-color, $lightness: 35%);
+
+// We use these to style paragraphs
+// $paragraph-font-family: inherit;
+// $paragraph-font-weight: normal;
+// $paragraph-font-size: 1rem;
+// $paragraph-line-height: 1.6;
+// $paragraph-margin-bottom: rem-calc(20);
+// $paragraph-aside-font-size: rem-calc(14);
+// $paragraph-aside-line-height: 1.35;
+// $paragraph-aside-font-style: italic;
+// $paragraph-text-rendering: optimizeLegibility;
+
+// We use these to style <code> tags
+// $code-color: scale-color($alert-color, $lightness: -27%);
+// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
+// $code-font-weight: bold;
+
+// We use these to style anchors
+// $anchor-text-decoration: none;
+// $anchor-font-color: $primary-color;
+// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%);
+
+// We use these to style the <hr> element
+// $hr-border-width: 1px;
+// $hr-border-style: solid;
+// $hr-border-color: #ddd;
+// $hr-margin: rem-calc(20);
+
+// We use these to style lists
+// $list-style-position: outside;
+// $list-side-margin: 1.1rem;
+// $list-ordered-side-margin: 1.4rem;
+// $list-side-margin-no-bullet: 0;
+// $list-nested-margin: rem-calc(20);
+// $definition-list-header-weight: bold;
+// $definition-list-header-margin-bottom: .3rem;
+// $definition-list-margin-bottom: rem-calc(12);
+
+// We use these to style blockquotes
+// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
+// $blockquote-padding: rem-calc(9 20 0 19);
+// $blockquote-border: 1px solid #ddd;
+// $blockquote-cite-font-size: rem-calc(13);
+// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
+// $blockquote-cite-link-color: $blockquote-cite-font-color;
+
+// Acronym styles
+// $acronym-underline: 1px dotted #ddd;
+
+// We use these to control padding and margin
+// $microformat-padding: rem-calc(10 12);
+// $microformat-margin: rem-calc(0 0 20 0);
+
+// We use these to control the border styles
+// $microformat-border-width: 1px;
+// $microformat-border-style: solid;
+// $microformat-border-color: #ddd;
+
+// We use these to control full name font styles
+// $microformat-fullname-font-weight: bold;
+// $microformat-fullname-font-size: rem-calc(15);
+
+// We use this to control the summary font styles
+// $microformat-summary-font-weight: bold;
+
+// We use this to control abbr padding
+// $microformat-abbr-padding: rem-calc(0 1);
+
+// We use this to control abbr font styles
+// $microformat-abbr-font-weight: bold;
+// $microformat-abbr-font-decoration: none;
+
+// Accordion
+
+// $include-html-accordion-classes: $include-html-classes;
+
+// $accordion-navigation-padding: rem-calc(16);
+// $accordion-navigation-bg-color: #efefef  ;
+// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
+// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
+// $accordion-navigation-font-color: #222;
+// $accordion-navigation-font-size: rem-calc(16);
+// $accordion-navigation-font-family: $body-font-family;
+
+// $accordion-content-padding: $column-gutter/2;
+// $accordion-content-active-bg-color: #fff;
+
+// Alert Boxes
+
+// $include-html-alert-classes: $include-html-classes;
+
+// We use this to control alert padding.
+// $alert-padding-top: rem-calc(14);
+// $alert-padding-default-float: $alert-padding-top;
+// $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10);
+// $alert-padding-bottom: $alert-padding-top;
+
+// We use these to control text style.
+// $alert-font-weight: normal;
+// $alert-font-size: rem-calc(13);
+// $alert-font-color: #fff;
+// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
+
+// We use this for close hover effect.
+// $alert-function-factor: -14%;
+
+// We use these to control border styles.
+// $alert-border-style: solid;
+// $alert-border-width: 1px;
+// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
+// $alert-bottom-margin: rem-calc(20);
+
+// We use these to style the close buttons
+// $alert-close-color: #333;
+// $alert-close-top: 50%;
+// $alert-close-position: rem-calc(5);
+// $alert-close-font-size: rem-calc(22);
+// $alert-close-opacity: 0.3;
+// $alert-close-opacity-hover: 0.5;
+// $alert-close-padding: 9px 6px 4px;
+
+// We use this to control border radius
+// $alert-radius: $global-radius;
+
+// Block Grid
+
+// $include-html-grid-classes: $include-html-classes;
+
+// We use this to control the maximum number of block grid elements per row
+// $block-grid-elements: 12;
+// $block-grid-default-spacing: rem-calc(20);
+// $align-block-grid-to-grid: true;
+
+// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
+// $block-grid-media-queries: true;
+
+// Breadcrumbs
+
+// $include-html-nav-classes: $include-html-classes;
+
+// We use this to set the background color for the breadcrumb container.
+// $crumb-bg: scale-color($secondary-color, $lightness: 55%);
+
+// We use these to set the padding around the breadcrumbs.
+// $crumb-padding: rem-calc(9 14 9);
+// $crumb-side-padding: rem-calc(12);
+
+// We use these to control border styles.
+// $crumb-function-factor: -10%;
+// $crumb-border-size: 1px;
+// $crumb-border-style: solid;
+// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor);
+// $crumb-radius: $global-radius;
+
+// We use these to set various text styles for breadcrumbs.
+// $crumb-font-size: rem-calc(11);
+// $crumb-font-color: $primary-color;
+// $crumb-font-color-current: #333;
+// $crumb-font-color-unavailable: #999;
+// $crumb-font-transform: uppercase;
+// $crumb-link-decor: underline;
+
+// We use these to control the slash between breadcrumbs
+// $crumb-slash-color: #aaa;
+// $crumb-slash: "/";
+
+//
+// BUTTONS
+//
+
+// $include-html-button-classes: $include-html-classes;
+
+// We use these to build padding for buttons.
+// $button-tny: rem-calc(10);
+// $button-sml: rem-calc(14);
+// $button-med: rem-calc(16);
+// $button-lrg: rem-calc(18);
+
+// We use this to control the display property.
+// $button-display: inline-block;
+// $button-margin-bottom: rem-calc(20);
+
+// We use these to control button text styles.
+// $button-font-family: $body-font-family;
+// $button-font-color: #fff;
+// $button-font-color-alt: #333;
+// $button-font-tny: rem-calc(11);
+// $button-font-sml: rem-calc(13);
+// $button-font-med: rem-calc(16);
+// $button-font-lrg: rem-calc(20);
+// $button-font-weight: normal;
+// $button-font-align: center;
+
+// We use these to control various hover effects.
+// $button-function-factor: 5%;
+
+// We use these to control button border styles.
+// $button-border-width: 1px;
+// $button-border-style: solid;
+
+// We use this to set the default radius used throughout the core.
+// $button-radius: $global-radius;
+// $button-round: $global-rounded;
+
+// We use this to set default opacity for disabled buttons.
+// $button-disabled-opacity: 0.7;
+
+// Button Groups
+
+// $include-html-button-classes: $include-html-classes;
+
+// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
+// $button-bar-margin-opposite: rem-calc(10);
+// $button-group-border-width: 1px;
+
+// Clearing
+
+// $include-html-clearing-classes: $include-html-classes;
+
+// We use these to set the background colors for parts of Clearing.
+// $clearing-bg: #333;
+// $clearing-caption-bg: $clearing-bg;
+// $clearing-carousel-bg: rgba (51,51,51,0.8);
+// $clearing-img-bg: $clearing-bg;
+
+// We use these to style the close button
+// $clearing-close-color: #ccc;
+// $clearing-close-size: 30px;
+
+// We use these to style the arrows
+// $clearing-arrow-size: 12px;
+// $clearing-arrow-color: $clearing-close-color;
+
+// We use these to style captions
+// $clearing-caption-font-color: #ccc;
+// $clearing-caption-font-size: 0.875em;
+// $clearing-caption-padding: 10px 30px 20px;
+
+// We use these to make the image and carousel height and style
+// $clearing-active-img-height: 85%;
+// $clearing-carousel-height: 120px;
+// $clearing-carousel-thumb-width: 120px;
+// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255);
+
+// Dropdown
+
+// $include-html-dropdown-classes: $include-html-classes;
+
+// We use these to controls height and width styles.
+// $f-dropdown-max-width: 200px;
+// $f-dropdown-height: auto;
+// $f-dropdown-max-height: none;
+// $f-dropdown-margin-top: 2px;
+
+// We use this to control the background color
+// $f-dropdown-bg: #fff;
+
+// We use this to set the border styles for dropdowns.
+// $f-dropdown-border-style: solid;
+// $f-dropdown-border-width: 1px;
+// $f-dropdown-border-color: scale-color(#fff, $lightness: -20%);
+
+// We use these to style the triangle pip.
+// $f-dropdown-triangle-size: 6px;
+// $f-dropdown-triangle-color: #fff;
+// $f-dropdown-triangle-side-offset: 10px;
+
+// We use these to control styles for the list elements.
+// $f-dropdown-list-style: none;
+// $f-dropdown-font-color: #555;
+// $f-dropdown-font-size: rem-calc(14);
+// $f-dropdown-list-padding: rem-calc(5, 10);
+// $f-dropdown-line-height: rem-calc(18);
+// $f-dropdown-list-hover-bg: #eeeeee  ;
+// $dropdown-mobile-default-float: 0;
+
+// We use this to control the styles for when the dropdown has custom content.
+// $f-dropdown-content-padding: rem-calc(20);
+
+// Dropdown Buttons
+
+// $include-html-button-classes: $include-html-classes;
+
+// We use these to set the color of the pip in dropdown buttons
+// $dropdown-button-pip-color: #fff;
+// $dropdown-button-pip-color-alt: #333;
+
+// $button-pip-tny: rem-calc(6);
+// $button-pip-sml: rem-calc(7);
+// $button-pip-med: rem-calc(9);
+// $button-pip-lrg: rem-calc(11);
+
+// We use these to style tiny dropdown buttons
+// $dropdown-button-padding-tny: $button-pip-tny * 7;
+// $dropdown-button-pip-size-tny: $button-pip-tny;
+// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
+// $dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1);
+
+// We use these to style small dropdown buttons
+// $dropdown-button-padding-sml: $button-pip-sml * 7;
+// $dropdown-button-pip-size-sml: $button-pip-sml;
+// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
+// $dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1);
+
+// We use these to style medium dropdown buttons
+// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
+// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
+// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
+// $dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2);
+
+// We use these to style large dropdown buttons
+// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
+// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
+// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
+// $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3);
+
+// Flex Video
+
+// $include-html-media-classes: $include-html-classes;
+
+// We use these to control video container padding and margins
+// $flex-video-padding-top: rem-calc(25);
+// $flex-video-padding-bottom: 67.5%;
+// $flex-video-margin-bottom: rem-calc(16);
+
+// We use this to control widescreen bottom padding
+// $flex-video-widescreen-padding-bottom: 57.25%;
+
+// Forms
+
+// $include-html-form-classes: $include-html-classes;
+
+// We use this to set the base for lots of form spacing and positioning styles
+// $form-spacing: rem-calc(16);
+
+// We use these to style the labels in different ways
+// $form-label-pointer: pointer;
+// $form-label-font-size: rem-calc(14);
+// $form-label-font-weight: normal;
+// $form-label-line-height: 1.5;
+// $form-label-font-color: scale-color(#000, $lightness: 30%);
+// $form-label-bottom-margin: 0;
+// $input-font-family: inherit;
+// $input-font-color: rgba(0,0,0,0.75);
+// $input-font-size: rem-calc(14);
+// $input-bg-color: #fff;
+// $input-focus-bg-color: scale-color(#fff, $lightness: -2%);
+// $input-border-color: scale-color(#fff, $lightness: -20%);
+// $input-focus-border-color: scale-color(#fff, $lightness: -40%);
+// $input-border-style: solid;
+// $input-border-width: 1px;
+// $input-border-radius: $global-radius;
+// $input-disabled-bg: #ddd;
+// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+// $input-include-glowing-effect: true;
+
+// We use these to style the fieldset border and spacing.
+// $fieldset-border-style: solid;
+// $fieldset-border-width: 1px;
+// $fieldset-border-color: #ddd;
+// $fieldset-padding: rem-calc(20);
+// $fieldset-margin: rem-calc(18 0);
+
+// We use these to style the legends when you use them
+// $legend-bg: #fff;
+// $legend-font-weight: bold;
+// $legend-padding: rem-calc(0 3);
+
+// We use these to style the prefix and postfix input elements
+// $input-prefix-bg: scale-color(#fff, $lightness: -5%);
+// $input-prefix-border-color: scale-color(#fff, $lightness: -20%);
+// $input-prefix-border-size: 1px;
+// $input-prefix-border-type: solid;
+// $input-prefix-overflow: hidden;
+// $input-prefix-font-color: #333;
+// $input-prefix-font-color-alt: #fff;
+
+// We use these to style the error states for inputs and labels
+// $input-error-message-padding: rem-calc(6 9 9);
+// $input-error-message-top: -1px;
+// $input-error-message-font-size: rem-calc(12);
+// $input-error-message-font-weight: normal;
+// $input-error-message-font-style: italic;
+// $input-error-message-font-color: #fff;
+// $input-error-message-font-color-alt: #333;
+
+// We use this to style the glowing effect of inputs when focused
+// $glowing-effect-fade-time: 0.45s;
+// $glowing-effect-color: $input-focus-border-color;
+
+// Select variables
+// $select-bg-color: #fafafa;
+
+// Inline Lists
+
+// $include-html-inline-list-classes: $include-html-classes;
+
+// We use this to control the margins and padding of the inline list.
+// $inline-list-top-margin: 0;
+// $inline-list-opposite-margin: 0;
+// $inline-list-bottom-margin: rem-calc(17);
+// $inline-list-default-float-margin: rem-calc(-22);
+
+// $inline-list-padding: 0;
+
+// We use this to control the overflow of the inline list.
+// $inline-list-overflow: hidden;
+
+// We use this to control the list items
+// $inline-list-display: block;
+
+// We use this to control any elments within list items
+// $inline-list-children-display: block;
+
+// Joyride
+
+// $include-html-joyride-classes: $include-html-classes;
+
+// Controlling default Joyride styles
+// $joyride-tip-bg: #333;
+// $joyride-tip-default-width: 300px;
+// $joyride-tip-padding: rem-calc(18 20 24);
+// $joyride-tip-border: solid 1px #555;
+// $joyride-tip-radius: 4px;
+// $joyride-tip-position-offset: 22px;
+
+// Here, we're setting the tip dont styles
+// $joyride-tip-font-color: #fff;
+// $joyride-tip-font-size: rem-calc(14);
+// $joyride-tip-header-weight: bold;
+
+// This changes the nub size
+// $joyride-tip-nub-size: 10px;
+
+// This adjusts the styles for the timer when its enabled
+// $joyride-tip-timer-width: 50px;
+// $joyride-tip-timer-height: 3px;
+// $joyride-tip-timer-color: #666;
+
+// This changes up the styles for the close button
+// $joyride-tip-close-color: #777;
+// $joyride-tip-close-size: 24px;
+// $joyride-tip-close-weight: normal;
+
+// When Joyride is filling the screen, we use this style for the bg
+// $joyride-screenfill: rgba(0,0,0,0.5);
+
+// Keystrokes
+
+// $include-html-keystroke-classes: $include-html-classes;
+
+// We use these to control text styles.
+// $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
+// $keystroke-font-size: rem-calc(14);
+// $keystroke-font-color: #222;
+// $keystroke-font-color-alt: #fff;
+// $keystroke-function-factor: -7%;
+
+// We use this to control keystroke padding.
+// $keystroke-padding: rem-calc(2 4 0);
+
+// We use these to control background and border styles.
+// $keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor);
+// $keystroke-border-style: solid;
+// $keystroke-border-width: 1px;
+// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);
+// $keystroke-radius: $global-radius;
+
+// Labels
+
+// $include-html-label-classes: $include-html-classes;
+
+// We use these to style the labels
+// $label-padding: rem-calc(4 8 6);
+// $label-radius: $global-radius;
+
+// We use these to style the label text
+// $label-font-sizing: rem-calc(11);
+// $label-font-weight: normal;
+// $label-font-color: #333;
+// $label-font-color-alt: #fff;
+// $label-font-family: $body-font-family;
+
+// Magellan
+
+// $include-html-magellan-classes: $include-html-classes;
+
+// $magellan-bg: #fff;
+// $magellan-padding: 10px;
+
+// Off-canvas
+
+// $tabbar-bg: #333;
+// $tabbar-height: rem-calc(45);
+// $tabbar-line-height: $tabbar-height;
+// $tabbar-color: #FFF;
+// $tabbar-middle-padding: 0 rem-calc(10);
+
+// Off Canvas Divider Styles
+// $tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%);
+// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
+
+// Off Canvas Tab Bar Headers
+// $tabbar-header-color: #FFF;
+// $tabbar-header-weight: bold;
+// $tabbar-header-line-height: $tabbar-height;
+// $tabbar-header-margin: 0;
+
+// Off Canvas Menu Variables
+// $off-canvas-width: 250px;
+// $off-canvas-bg: #333;
+
+// Off Canvas Menu List Variables
+// $off-canvas-label-padding: 0.3rem rem-calc(15);
+// $off-canvas-label-color: #999;
+// $off-canvas-label-text-transform: uppercase;
+// $off-canvas-label-font-weight: bold;
+// $off-canvas-label-bg: #444;
+// $off-canvas-label-border-top: 1px solid scale-color(#444, $lightness: 14%);
+// $off-canvas-label-border-bottom: none;
+// $off-canvas-label-margin:0;
+// $off-canvas-link-padding: rem-calc(10, 15);
+// $off-canvas-link-color: rgba(#FFF, 0.7);
+// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
+
+// Off Canvas Menu Icon Variables
+// $tabbar-menu-icon-color: #FFF;
+// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
+
+// $tabbar-menu-icon-text-indent: rem-calc(35);
+// $tabbar-menu-icon-width: $tabbar-height;
+// $tabbar-menu-icon-height: $tabbar-height;
+// $tabbar-menu-icon-line-height: rem-calc(33);
+// $tabbar-menu-icon-padding: 0;
+
+// $tabbar-hamburger-icon-width: rem-calc(16);
+// $tabbar-hamburger-icon-left: false;
+// $tabbar-hamburger-icon-top: false;
+// $tapbar-hamburger-icon-thickness: 1px;
+// $tapbar-hamburger-icon-gap: 6px;
+
+// Off Canvas Back-Link Overlay
+// $off-canvas-overlay-transition: background 300ms ease;
+// $off-canvas-overlay-cursor: pointer;
+// $off-canvas-overlay-box-shadow: -4px 0 4px rgba(#000, 0.5), 4px 0 4px rgba(#000, 0.5);
+// $off-canvas-overlay-background: rgba(#FFF, 0.2);
+// $off-canvas-overlay-background-hover: rgba(#FFF, 0.05);
+
+// Transition Variables
+// $menu-slide: "transform 500ms ease";
+
+// Orbit
+
+// $include-html-orbit-classes: $include-html-classes;
+
+// We use these to control the caption styles
+// $orbit-container-bg: none;
+// $orbit-caption-bg: rgba(51,51,51, 0.8);
+// $orbit-caption-font-color: #fff;
+// $orbit-caption-font-size: rem-calc(14);
+// $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
+// $orbit-caption-padding: rem-calc(10 14);
+// $orbit-caption-height: auto;
+
+// We use these to control the left/right nav styles
+// $orbit-nav-bg: none;
+// $orbit-nav-bg-hover: rgba(0,0,0,0.3);
+// $orbit-nav-arrow-color: #fff;
+// $orbit-nav-arrow-color-hover: #fff;
+
+// We use these to control the timer styles
+// $orbit-timer-bg: rgba(255,255,255,0.3);
+// $orbit-timer-show-progress-bar: true;
+
+// We use these to control the bullet nav styles
+// $orbit-bullet-nav-color: #ccc;
+// $orbit-bullet-nav-color-active: #999;
+// $orbit-bullet-radius: rem-calc(9);
+
+// We use these to controls the style of slide numbers
+// $orbit-slide-number-bg: rgba(0,0,0,0);
+// $orbit-slide-number-font-color: #fff;
+// $orbit-slide-number-padding: rem-calc(5);
+
+// Graceful Loading Wrapper and preloader
+// $wrapper-class: "slideshow-wrapper";
+// $preloader-class: "preloader";
+
+// Pagination
+
+// $include-html-nav-classes: $include-html-classes;
+
+// We use these to control the pagination container
+// $pagination-height: rem-calc(24);
+// $pagination-margin: rem-calc(-5);
+
+// We use these to set the list-item properties
+// $pagination-li-float: $default-float;
+// $pagination-li-height: rem-calc(24);
+// $pagination-li-font-color: #222;
+// $pagination-li-font-size: rem-calc(14);
+// $pagination-li-margin: rem-calc(5);
+
+// We use these for the pagination anchor links
+// $pagination-link-pad: rem-calc(1 10 1);
+// $pagination-link-font-color: #999;
+// $pagination-link-active-bg: scale-color(#fff, $lightness: -10%);
+
+// We use these for disabled anchor links
+// $pagination-link-unavailable-cursor: default;
+// $pagination-link-unavailable-font-color: #999;
+// $pagination-link-unavailable-bg-active: transparent;
+
+// We use these for currently selected anchor links
+// $pagination-link-current-background: $primary-color;
+// $pagination-link-current-font-color: #fff;
+// $pagination-link-current-font-weight: bold;
+// $pagination-link-current-cursor: default;
+// $pagination-link-current-active-bg: $primary-color;
+
+// Panels
+
+// $include-html-panel-classes: $include-html-classes;
+
+// We use these to control the background and border styles
+// $panel-bg: scale-color(#fff, $lightness: -5%);
+// $panel-border-style: solid;
+// $panel-border-size: 1px;
+
+// We use this % to control how much we darken things on hover
+// $panel-function-factor: -11%;
+// $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor);
+
+// We use these to set default inner padding and bottom margin
+// $panel-margin-bottom: rem-calc(20);
+// $panel-padding: rem-calc(20);
+
+// We use these to set default font colors
+// $panel-font-color: #333;
+// $panel-font-color-alt: #fff;
+
+// $panel-header-adjust: true;
+// $callout-panel-link-color: $primary-color;
+
+// Pricing Tables
+
+// $include-html-pricing-classes: $include-html-classes;
+
+// We use this to control the border color
+// $price-table-border: solid 1px #ddd;
+
+// We use this to control the bottom margin of the pricing table
+// $price-table-margin-bottom: rem-calc(20);
+
+// We use these to control the title styles
+// $price-title-bg: #333;
+// $price-title-padding: rem-calc(15 20);
+// $price-title-align: center;
+// $price-title-color: #eee;
+// $price-title-weight: normal;
+// $price-title-size: rem-calc(16);
+// $price-title-font-family: $body-font-family;
+
+// We use these to control the price styles
+// $price-money-bg: #f6f6f6  ;
+// $price-money-padding: rem-calc(15 20);
+// $price-money-align: center;
+// $price-money-color: #333;
+// $price-money-weight: normal;
+// $price-money-size: rem-calc(32);
+// $price-money-font-family: $body-font-family;
+
+
+// We use these to control the description styles
+// $price-bg: #fff;
+// $price-desc-color: #777;
+// $price-desc-padding: rem-calc(15);
+// $price-desc-align: center;
+// $price-desc-font-size: rem-calc(12);
+// $price-desc-weight: normal;
+// $price-desc-line-height: 1.4;
+// $price-desc-bottom-border: dotted 1px #ddd;
+
+// We use these to control the list item styles
+// $price-item-color: #333;
+// $price-item-padding: rem-calc(15);
+// $price-item-align: center;
+// $price-item-font-size: rem-calc(14);
+// $price-item-weight: normal;
+// $price-item-bottom-border: dotted 1px #ddd;
+
+// We use these to control the CTA area styles
+// $price-cta-bg: #fff;
+// $price-cta-align: center;
+// $price-cta-padding: rem-calc(20 20 0);
+
+// Progress Meters
+
+// $include-html-media-classes: $include-html-classes;
+
+// We use this to se the prog bar height
+// $progress-bar-height: rem-calc(25);
+// $progress-bar-color: #f6f6f6  ;
+
+// We use these to control the border styles
+// $progress-bar-border-color: scale-color(#fff, $lightness: -20%);
+// $progress-bar-border-size: 1px;
+// $progress-bar-border-style: solid;
+// $progress-bar-border-radius: $global-radius;
+
+// We use these to control the margin & padding
+// $progress-bar-pad: rem-calc(2);
+// $progress-bar-margin-bottom: rem-calc(10);
+
+// We use these to set the meter colors
+// $progress-meter-color: $primary-color;
+// $progress-meter-secondary-color: $secondary-color;
+// $progress-meter-success-color: $success-color;
+// $progress-meter-alert-color: $alert-color;
+
+// Reveal
+
+// $include-html-reveal-classes: $include-html-classes;
+
+// We use these to control the style of the reveal overlay.
+// $reveal-overlay-bg: rgba(#000, .45);
+// $reveal-overlay-bg-old: #000;
+
+// We use these to control the style of the modal itself.
+// $reveal-modal-bg: #fff;
+// $reveal-position-top: 50px;
+// $reveal-default-width: 80%;
+// $reveal-modal-padding: rem-calc(20);
+// $reveal-box-shadow: 0 0 10px rgba(#000,.4);
+
+// We use these to style the reveal close button
+// $reveal-close-font-size: rem-calc(22);
+// $reveal-close-top: rem-calc(8);
+// $reveal-close-side: rem-calc(11);
+// $reveal-close-color: #aaa;
+// $reveal-close-weight: bold;
+
+// We use these to control the modal border
+// $reveal-border-style: solid;
+// $reveal-border-width: 1px;
+// $reveal-border-color: #666;
+
+// $reveal-modal-class: "reveal-modal";
+// $close-reveal-modal-class: "close-reveal-modal";
+
+// Side Nav
+
+// $include-html-nav-classes: $include-html-classes;
+
+// We use this to control padding.
+// $side-nav-padding: rem-calc(14 0);
+
+// We use these to control list styles.
+// $side-nav-list-type: none;
+// $side-nav-list-position: inside;
+// $side-nav-list-margin: rem-calc(0 0 7 0);
+
+// We use these to control link styles.
+// $side-nav-link-color: $primary-color;
+// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%);
+// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%);
+// $side-nav-font-size: rem-calc(14);
+// $side-nav-font-weight: normal;
+// $side-nav-font-family: $body-font-family;
+// $side-nav-active-font-family: $side-nav-font-family;
+
+
+
+// We use these to control border styles
+// $side-nav-divider-size: 1px;
+// $side-nav-divider-style: solid;
+// $side-nav-divider-color: scale-color(#fff, $lightness: -10%);
+
+// Split Buttons
+
+// $include-html-button-classes: $include-html-classes;
+
+// We use these to control different shared styles for Split Buttons
+// $split-button-function-factor: 10%;
+// $split-button-pip-color: #fff;
+// $split-button-pip-color-alt: #333;
+// $split-button-active-bg-tint: rgba(0,0,0,0.1);
+
+// We use these to control tiny split buttons
+// $split-button-padding-tny: $button-pip-tny * 10;
+// $split-button-span-width-tny: $button-pip-tny * 6;
+// $split-button-pip-size-tny: $button-pip-tny;
+// $split-button-pip-top-tny: $button-pip-tny * 2;
+// $split-button-pip-default-float-tny: rem-calc(-6);
+
+// We use these to control small split buttons
+// $split-button-padding-sml: $button-pip-sml * 10;
+// $split-button-span-width-sml: $button-pip-sml * 6;
+// $split-button-pip-size-sml: $button-pip-sml;
+// $split-button-pip-top-sml: $button-pip-sml * 1.5;
+// $split-button-pip-default-float-sml: rem-calc(-6);
+
+// We use these to control medium split buttons
+// $split-button-padding-med: $button-pip-med * 9;
+// $split-button-span-width-med: $button-pip-med * 5.5;
+// $split-button-pip-size-med: $button-pip-med - rem-calc(3);
+// $split-button-pip-top-med: $button-pip-med * 1.5;
+// $split-button-pip-default-float-med: rem-calc(-6);
+
+// We use these to control large split buttons
+// $split-button-padding-lrg: $button-pip-lrg * 8;
+// $split-button-span-width-lrg: $button-pip-lrg * 5;
+// $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
+// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5);
+// $split-button-pip-default-float-lrg: rem-calc(-6);
+
+// Sub Nav
+
+// $include-html-nav-classes: $include-html-classes;
+
+// We use these to control margin and padding
+// $sub-nav-list-margin: rem-calc(-4 0 18);
+// $sub-nav-list-padding-top: rem-calc(4);
+
+// We use this to control the definition
+// $sub-nav-font-family: $body-font-family;
+// $sub-nav-font-size: rem-calc(14);
+// $sub-nav-font-color: #999;
+// $sub-nav-font-weight: normal;
+// $sub-nav-text-decoration: none;
+// $sub-nav-border-radius: 3px;
+// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
+
+
+// We use these to control the active item styles
+
+// $sub-nav-active-font-weight: normal;
+// $sub-nav-active-bg: $primary-color;
+// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
+// $sub-nav-active-color: #fff;
+// $sub-nav-active-padding: rem-calc(3 16);
+// $sub-nav-active-cursor: default;
+
+// $sub-nav-item-divider: "";
+// $sub-nav-item-divider-margin: rem-calc(12);
+
+//
+// SWITCH
+//
+
+// $include-html-form-classes: $include-html-classes;
+
+// Controlling border styles and background colors for the switch container
+// $switch-border-color: scale-color(#fff, $lightness: -20%);
+// $switch-border-style: solid;
+// $switch-border-width: 1px;
+// $switch-bg: #fff;
+
+// We use these to control the switch heights for our default classes
+// $switch-height-tny: 22px;
+// $switch-height-sml: 28px;
+// $switch-height-med: 36px;
+// $switch-height-lrg: 44px;
+// $switch-bottom-margin: rem-calc(20);
+
+// We use these to control default font sizes for our classes.
+// $switch-font-size-tny: 11px;
+// $switch-font-size-sml: 12px;
+// $switch-font-size-med: 14px;
+// $switch-font-size-lrg: 17px;
+// $switch-label-side-padding: 6px;
+
+// We use these to style the switch-paddle
+// $switch-paddle-bg: #fff;
+// $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%);
+// $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%);
+// $switch-paddle-border-width: 1px;
+// $switch-paddle-border-style: solid;
+// $switch-paddle-transition-speed: .1s;
+// $switch-paddle-transition-ease: ease-out;
+// $switch-positive-color: scale-color($success-color, $lightness: 94%);
+// $switch-negative-color: #f5f5f5;
+
+// Outline Style for tabbing through switches
+// $switch-label-outline: 1px dotted #888;
+
+// Tables
+
+// $include-html-table-classes: $include-html-classes;
+
+// These control the background color for the table and even rows
+// $table-bg: #fff;
+// $table-even-row-bg: #f9f9f9  ;
+
+// These control the table cell border style
+// $table-border-style: solid;
+// $table-border-size: 1px;
+// $table-border-color: #ddd;
+
+// These control the table head styles
+// $table-head-bg: #f5f5f5  ;
+// $table-head-font-size: rem-calc(14);
+// $table-head-font-color: #222;
+// $table-head-font-weight: bold;
+// $table-head-padding: rem-calc(8 10 10);
+
+// These control the row padding and font styles
+// $table-row-padding: rem-calc(9 10);
+// $table-row-font-size: rem-calc(14);
+// $table-row-font-color: #222;
+// $table-line-height: rem-calc(18);
+
+// These are for controlling the display and margin of tables
+// $table-display: table-cell;
+// $table-margin-bottom: rem-calc(20);
+
+//
+// TABS
+//
+
+// $include-html-tabs-classes: $include-html-classes;
+
+// $tabs-navigation-padding: rem-calc(16);
+// $tabs-navigation-bg-color: #efefef  ;
+// $tabs-navigation-active-bg-color: #fff;
+// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
+// $tabs-navigation-font-color: #222;
+// $tabs-navigation-font-size: rem-calc(16);
+// $tabs-navigation-font-family: $body-font-family;
+
+// $tabs-content-margin-bottom: rem-calc(24);
+// $tabs-content-padding: $column-gutter/2;
+
+// $tabs-vertical-navigation-margin-bottom: 1.25rem;
+
+//
+// THUMBNAILS
+//
+
+// $include-html-media-classes: $include-html-classes;
+
+// We use these to control border styles
+// $thumb-border-style: solid;
+// $thumb-border-width: 4px;
+// $thumb-border-color: #fff;
+// $thumb-box-shadow: 0 0 0 1px rgba(#000,.2);
+// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
+
+// Radius and transition speed for thumbs
+// $thumb-radius: $global-radius;
+// $thumb-transition-speed: 200ms;
+
+//
+// TOOLTIPS
+//
+
+// $include-html-tooltip-classes: $include-html-classes;
+
+// $has-tip-border-bottom: dotted 1px #ccc;
+// $has-tip-font-weight: bold;
+// $has-tip-font-color: #333;
+// $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%);
+// $has-tip-font-color-hover: $primary-color;
+// $has-tip-cursor-type: help;
+
+// $tooltip-padding: rem-calc(12);
+// $tooltip-bg: #333;
+// $tooltip-font-size: rem-calc(14);
+// $tooltip-font-weight: normal;
+// $tooltip-font-color: #fff;
+// $tooltip-line-height: 1.3;
+// $tooltip-close-font-size: rem-calc(10);
+// $tooltip-close-font-weight: normal;
+// $tooltip-close-font-color: #777;
+// $tooltip-font-size-sml: rem-calc(14);
+// $tooltip-radius: $global-radius;
+// $tooltip-rounded: $global-rounded;
+// $tooltip-pip-size: 5px;
+
+//
+// TOP BAR
+//
+
+// $include-html-top-bar-classes: $include-html-classes;
+
+// Background color for the top bar
+// $topbar-bg-color: #333;
+// $topbar-bg: $topbar-bg-color;
+
+// Height and margin
+// $topbar-height: 45px;
+// $topbar-margin-bottom: 0;
+
+// Controlling the styles for the title in the top bar
+// $topbar-title-weight: normal;
+// $topbar-title-font-size: rem-calc(17);
+
+// Style the top bar dropdown elements
+// $topbar-dropdown-bg: #333;
+// $topbar-dropdown-link-color: #fff;
+// $topbar-dropdown-link-bg: #333;
+// $topbar-dropdown-link-weight: normal;
+// $topbar-dropdown-toggle-size: 5px;
+// $topbar-dropdown-toggle-color: #fff;
+// $topbar-dropdown-toggle-alpha: 0.4;
+
+// Set the link colors and styles for top-level nav
+// $topbar-link-color: #fff;
+// $topbar-link-color-hover: #fff;
+// $topbar-link-color-active: #fff;
+// $topbar-link-color-active-hover: #fff;
+// $topbar-link-weight: normal;
+// $topbar-link-font-size: rem-calc(13);
+// $topbar-link-hover-lightness: -10%; // Darken by 10%
+// $topbar-link-bg-hover: #272727;
+// $topbar-link-bg-active: $primary-color;
+// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
+// $topbar-link-font-family: $body-font-family;
+// $topbar-link-text-transform: none;
+// $topbar-link-padding: $topbar-height / 3;
+
+// $topbar-button-font-size: 0.75rem;
+// $topbar-button-top: 7px;
+
+// $topbar-dropdown-label-color: #777;
+// $topbar-dropdown-label-text-transform: uppercase;
+// $topbar-dropdown-label-font-weight: bold;
+// $topbar-dropdown-label-font-size: rem-calc(10);
+// $topbar-dropdown-label-bg: #333;
+
+// Top menu icon styles
+// $topbar-menu-link-transform: uppercase;
+// $topbar-menu-link-font-size: rem-calc(13);
+// $topbar-menu-link-weight: bold;
+// $topbar-menu-link-color: #fff;
+// $topbar-menu-icon-color: #fff;
+// $topbar-menu-link-color-toggled: #888;
+// $topbar-menu-icon-color-toggled: #888;
+
+// Transitions and breakpoint styles
+// $topbar-transition-speed: 300ms;
+// Using rem-calc for the below breakpoint causes issues with top bar
+// $topbar-breakpoint: #{upper-bound($medium-range)}; // Change to 9999px for always mobile layout
+// $topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})";
+
+// Divider Styles
+// $topbar-divider-border-bottom: solid 1px  scale-color($topbar-bg-color, $lightness: 13%);
+// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%);
+
+// Sticky Class
+// $topbar-sticky-class: ".sticky";
+// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
+
+//
+// VISIBILITY CLASSES
+//
+
+// $include-html-visibility-classes: $include-html-classes;
+// $include-table-visibility-classes: true;
+// $include-legacy-visibility-classes: true;
+
+//
+// RANGE SLIDER
+//
+
+// $include-html-range-slider-classes: $include-html-classes;
+
+// These variabels define the slider bar styles
+// $range-slider-bar-width: 100%;
+// $range-slider-bar-height: rem-calc(16);
+
+// $range-slider-bar-border-width: 1px;
+// $range-slider-bar-border-style: solid;
+// $range-slider-bar-border-color: #ddd;
+// $range-slider-radius: $global-radius;
+// $range-slider-round: $global-rounded;
+// $range-slider-bar-bg-color: #fafafa;
+
+// Vertical bar styles
+// $range-slider-vertical-bar-width: rem-calc(16);
+// $range-slider-vertical-bar-height: rem-calc(200);
+
+// These variabels define the slider handle styles
+// $range-slider-handle-width: rem-calc(32);
+// $range-slider-handle-height: rem-calc(22);
+// $range-slider-handle-position-top: rem-calc(-5);
+// $range-slider-handle-bg-color: $primary-color;
+// $range-slider-handle-border-width: 1px;
+// $range-slider-handle-border-style: solid;
+// $range-slider-handle-border-color: none;
+// $range-slider-handle-radius: $global-radius;
+// $range-slider-handle-round: $global-rounded;
+// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
+// $range-slider-handle-cursor: pointer;
+@import 'foundation'
diff --git a/app/assets/stylesheets/user/foundation/lists.css.sass b/app/assets/stylesheets/user/foundation/lists.css.sass
index 54595b54..2a72d0ef 100644
--- a/app/assets/stylesheets/user/foundation/lists.css.sass
+++ b/app/assets/stylesheets/user/foundation/lists.css.sass
@@ -1,4 +1,4 @@
-@import foundation
+@import "foundation_and_overrides"
 .lists-overview-entry
   +grid-column(12)
   @media #{$medium-only}
diff --git a/app/assets/stylesheets/user/wood1/_constants.css.sass b/app/assets/stylesheets/user/wood1/_constants.css.sass
index 81bfc4a9..5c8759cb 100644
--- a/app/assets/stylesheets/user/wood1/_constants.css.sass
+++ b/app/assets/stylesheets/user/wood1/_constants.css.sass
@@ -1,6 +1,7 @@
 $qbrown: #853d15
 $qbrown-active: lighten($qbrown, 20%)
 $green: #7BB459 //Heineken
+//$green:  //Heineken
 //$wood: image-url('textures/wood001-vertical.jpg')
 $wood: image-url('textures/theme1.jpg')
 $background-brown: #57351f
@@ -10,7 +11,7 @@ $side-spacing: 5px
   background-repeat: no-repeat, no-repeat, repeat-x
   background-position: left center, right center, center center
   background-image: image-url('theme1/button-wood-left.png'), image-url('theme1/button-wood-right.png'), image-url('theme1/button-wood-middle.png')
-  color: $green
+  color: white
   border-width: 0
   border-radius: 0
   height: 31px
@@ -21,7 +22,7 @@ $side-spacing: 5px
     background-repeat: no-repeat, no-repeat, repeat-x
     background-position: left center, right center, center center
     background-image: image-url('theme1/button-wood-left.png'), image-url('theme1/button-wood-right.png'), image-url('theme1/button-wood-middle.png')
-    color: blue
+    color: black
 =button-bar
   background-color: transparent
   background-repeat: no-repeat, no-repeat
@@ -53,6 +54,9 @@ $side-spacing: 5px
         line-height: 1.1em
         color: black
         float: left
+      .main-buttons
+        float: left
+        margin-right: 12px
       .action-buttons
         float: left
         width: 150px
@@ -72,7 +76,6 @@ $side-spacing: 5px
   background-color: $qbrown
   text-align: center
   line-height: 34px
-  text-indent: -5000px
   &.active
     background-color: $qbrown-active
   &.hide
diff --git a/app/assets/stylesheets/user/wood1/application.css b/app/assets/stylesheets/user/wood1/application.css
index f6daff02..8a494984 100644
--- a/app/assets/stylesheets/user/wood1/application.css
+++ b/app/assets/stylesheets/user/wood1/application.css
@@ -11,6 +11,7 @@
  *= require 'twitter-bootstrap/bootstrap_and_overrides'
  *= require 'twitter-bootstrap/bootstrap_overrides'
  *= require 'general'
+ *= require font-awesome
  *= require_directory .
  *= require_self
  */
diff --git a/app/assets/stylesheets/user/wood1/darkstrap.sass b/app/assets/stylesheets/user/wood1/darkstrap.sass
index 2a33185a..7955f355 100644
--- a/app/assets/stylesheets/user/wood1/darkstrap.sass
+++ b/app/assets/stylesheets/user/wood1/darkstrap.sass
@@ -34,7 +34,21 @@ $input-color: white
 //=General ========================================
 // Everything with the inset panel just extends .well
 .well
-  +inset-panel-dark
+  //+inset-panel-dark
+  background-color: rgba(255,255,255,0.8)
+  h1,h2,h3,h4,h5,h6,a
+    color: #333
+  .table
+    thead
+      color: #111
+    td
+      border-top-color: #aaa
+      color: #111
+
+.table-striped
+  tbody tr:nth-child(2n+1)
+    td, th
+      background-color: #444
 
 body
   background: $bg
diff --git a/app/assets/stylesheets/user/wood1/list_products.css.sass b/app/assets/stylesheets/user/wood1/list_products.css.sass
index f59500c9..6f49286f 100644
--- a/app/assets/stylesheets/user/wood1/list_products.css.sass
+++ b/app/assets/stylesheets/user/wood1/list_products.css.sass
@@ -4,3 +4,9 @@
   .order-product-button
     +wood-button
     color: white
+button.order-selected-products
+  color: white
+  background-color: $green
+.product_order-remove-button
+  padding: 2px 5px
+  background-color: #bbb
diff --git a/app/assets/stylesheets/user/wood1/side_menu.css.sass b/app/assets/stylesheets/user/wood1/side_menu.css.sass
new file mode 100644
index 00000000..2f0def38
--- /dev/null
+++ b/app/assets/stylesheets/user/wood1/side_menu.css.sass
@@ -0,0 +1,23 @@
+@import ./constants
+@import font-awesome
+#toggle-side-menu
+  position: absolute
+  width: 28px
+  height: 28px
+  color: white
+  span
+    @extend .fa
+    @extend .fa-bars
+    @extend .fa-lg
+#side-menu-container
+  background-color: #444
+  position: fixed
+  display: none
+  left: 0
+  top: 0
+  width: 0
+  height: 100%
+  > ul
+    list-style: none
+    a
+      color: white
diff --git a/app/assets/stylesheets/user/wood1/structure.css.sass b/app/assets/stylesheets/user/wood1/structure.css.sass
index ccc4a8b9..28c989ae 100644
--- a/app/assets/stylesheets/user/wood1/structure.css.sass
+++ b/app/assets/stylesheets/user/wood1/structure.css.sass
@@ -1,5 +1,9 @@
 @import compass
 @import ./constants
+@import font-awesome
+
+.fa-menu
+  @extend .fa-cutlery
 html
   background-image: $wood
   background-color: $background-brown
@@ -102,6 +106,7 @@ body
     height: 28px
     background-position: center center
     background-repeat: no-repeat
+    line-height: 28px
 .top-button-bar
   +button-bar
   height: 90px
@@ -112,21 +117,20 @@ body
       margin-right: 8px
     .table-number
       float: right
-    #show-active-list
+    //#show-active-list
       span
         background-image: image-url('icons/list.png')
     #place-order-on-list
       span
         background-image: image-url('icons/menu.png')
     #list-needs-payment-button
-      span
-        background-image: image-url('icons/needs-payment.png')
+      //span
+        //background-image: image-url('icons/needs-payment.png')
       &.active
-        span
-          background-image: image-url('icons/needs-payment-active.png')
+        span.fa
+          @extend .fa-spin
+          //background-image: image-url('icons/needs-payment-active.png')
     #list-needs-help-button
-      span
-        background-image: image-url('icons/needs-help.png')
       &.active
-        span
-          background-image: image-url('icons/needs-help-active.png')
+        span.fa
+          @extend .fa-spin
diff --git a/app/controllers/user_controller.rb b/app/controllers/user_controller.rb
index a16e13ea..6bd9d9f0 100644
--- a/app/controllers/user_controller.rb
+++ b/app/controllers/user_controller.rb
@@ -134,7 +134,7 @@ class UserController < Users::ApplicationController
     if @list = @table.active_list
       if @list.user_ids.include?(current_user.id)
         render json: {approved: true}
-      elsif @list.join_requests.include?(current_user.id)
+      elsif @list.join_request_user_ids.include?(current_user.id)
         render json: {waiting: true}
       else
         render json: {rejected: true}
diff --git a/app/controllers/users/lists_controller.rb b/app/controllers/users/lists_controller.rb
index 9da2752d..51113c7a 100644
--- a/app/controllers/users/lists_controller.rb
+++ b/app/controllers/users/lists_controller.rb
@@ -11,6 +11,7 @@ module Users
     #EMBER
     def current
       list = current_user.active_list
+      render json: {}, status: :not_found and return unless list.present?
       [list].include_relation(supplier: {product_categories: :products}, orders: :product_orders) # table also when it is a real array :)
       render json: json_response(not_present: true) and return unless list.present?
       render json: list, serializer: UserExtendedListSerializer
diff --git a/app/controllers/users/orders_controller.rb b/app/controllers/users/orders_controller.rb
index 3510e43a..d80d3eb3 100644
--- a/app/controllers/users/orders_controller.rb
+++ b/app/controllers/users/orders_controller.rb
@@ -2,8 +2,18 @@ module Users
   class OrdersController < Users::ApplicationController
     respond_to :json
     def create
+
       converted_order = params[:order][:product_orders].each_with_object({}){|po, o| o[po[:product_id]] = po[:quantity] }
-      list = current_user.active_list
+      unless list = current_user.active_list
+        table = Table.find(params[:order][:table_id])
+
+        if table.occupied?
+          #render json: json_alert('messages.table_is_occupied', location: :join_occupied_table, location_params: {table_id: @table.id})
+          render status: :not_acceptable and return
+        end
+
+        list = List.from_table( table, current_user )
+      end
       order = list.place_order converted_order
       render json: order, serializer: OrderSerializer
     end
diff --git a/app/controllers/users/tables_controller.rb b/app/controllers/users/tables_controller.rb
new file mode 100644
index 00000000..b582e2f8
--- /dev/null
+++ b/app/controllers/users/tables_controller.rb
@@ -0,0 +1,8 @@
+module Users
+  class TablesController < Users::ApplicationController
+    def show
+      @table = Table.find(params[:id])
+      render json: @table, serializer: UserExtendedTableSerializer
+    end
+  end
+end
diff --git a/app/models/list.rb b/app/models/list.rb
index 33a298a3..b90b2aa5 100644
--- a/app/models/list.rb
+++ b/app/models/list.rb
@@ -7,7 +7,7 @@ class List
   property :needs_help, type: :boolean, default: false
   property :needs_payment, type: :boolean, default: false
   property :closed_at, type: Time
-  property :join_requests, type: Array, default: []
+  property :join_request_user_ids, type: Array, default: []
   property :price, type: Float
   property :is_paid, type: :boolean, default: false
   property :paid_at, type: Time
@@ -177,6 +177,7 @@ class List
 
   def is_paid!
     self.is_paid = true
+    self.needs_payment = false
     self.paid_at ||= Time.now
     if save
       broadcast_users 'list_is_paid', id: id
@@ -192,18 +193,18 @@ class List
     self.section_id = to_table.section_id 
     if save
       # Update the section of an order
-      orders.each do |order|
-        order.section_id = self.section_id
-        order.save
-      end
+      #orders.each do |order|
+        #order.section_id = self.section_id
+        #order.save
+      #end
       broadcast_users 'list_changed_table', list: as_json, section_title: to_table.section.try(:title), from_table_id: from_table
       broadcast_supplier supplier_id, 'list_changed_table', list: as_json, section_title: to_table.section.try(:title), from_table_id: from_table
     end
   end
 
   def approve_join_request_for_user!(user)
-    if join_requests.include?(user.id)
-      join_requests.delete(user.id)
+    if join_request_user_ids.include?(user.id)
+      join_request_user_ids.delete(user.id)
       user.active_list_id = self.id 
       add_user(user)
       user.save
@@ -215,7 +216,7 @@ class List
   end
 
   def unlink_user(user)
-    changed = join_requests.delete(user.id)
+    changed = join_request_user_ids.delete(user.id)
     changed ||= Array.wrap(user_ids).delete(user.id)
     if user.active_list_id == id
       user.active_list_id = nil
@@ -225,8 +226,8 @@ class List
   end
 
   def send_table_join_request_for_user!(requester)
-    unless join_requests.include?(requester.id)
-      self.join_requests << requester.id
+    unless join_request_user_ids.include?(requester.id)
+      self.join_request_user_ids << requester.id
       self.is_dirty
       if save
         for user in users
@@ -237,8 +238,8 @@ class List
   end
 
   def reject_join_request_for_user!(user_id)
-    if join_requests.include?(user_id)
-      join_requests.delete(user_id)
+    if join_request_user_ids.include?(user_id)
+      join_request_user_ids.delete(user_id)
       self.is_dirty
       if save
         broadcast_user user_id, 'join_request_rejected'
@@ -269,14 +270,14 @@ class List
 
   def place_order(products, user: nil, employee: nil)
     return false unless products.any?
-    order = Order.create list: self, supplier: supplier, user: user, employee: employee, section_id: section_id
+    order = Order.create list: self, supplier: supplier, user: user, employee: employee, section_id: section_id, table_id: table_id
     return unless order.id
     orders_placed_count = supplier.increment_orders_placed_count!
     loaded_products = self.class.database.load_document products.keys
     products.each do |product_id, quantity|
       quantity = quantity.to_i
       product = loaded_products.find{|p| p.id == product_id} # to get the price
-      ProductOrder.create order: order, product_id: product_id, quantity: quantity, price: product.price if quantity > 0
+      ProductOrder.create order: order, product_id: product_id, quantity: quantity, price: product.price, product_name: product.name if quantity > 0
     end
     set_price
     save
@@ -366,18 +367,23 @@ class List
 
   # Return a join requests object in the form of:
   #   {join_request: [{user_id: '1saf3...', user_email: 'info@qwaiter.com'}, [....]]}
+  # DEPRICATED IN EMBER
   def join_requests_as_json
     return @join_requests_as_json if @join_requests_as_json.present?
     h = {join_requests: []}
     # Handle join requests
-    if join_requests.any?
-      for user in self.class.database.load_document(join_requests)
+    if join_request_user_ids.any?
+      for user in self.class.database.load_document(join_request_user_ids)
         h[:join_requests] << {user_id: user.id, user_email: user.email}
       end
     end
     @join_requests_as_json = h
   end
 
+  def join_requests
+    @join_requests ||= join_request_user_ids.any? ? self.class.database.load_document(join_request_user_ids).map{|user| JoinRequest.new(user: user, list: self) } : []
+  end
+
   def product_categories
     supplier.product_categories
   end
diff --git a/app/models/order.rb b/app/models/order.rb
index 4b05a296..4cb97f95 100644
--- a/app/models/order.rb
+++ b/app/models/order.rb
@@ -8,6 +8,7 @@ class Order
   belongs_to :user
   belongs_to :supplier
   belongs_to :section
+  belongs_to :table
   belongs_to :employee
 
   has_many :product_orders, dependent: :destroy
diff --git a/app/models/product_order.rb b/app/models/product_order.rb
index 47fdb732..af8d4f9e 100644
--- a/app/models/product_order.rb
+++ b/app/models/product_order.rb
@@ -4,6 +4,7 @@ class ProductOrder
 
   property :quantity, type: Fixnum 
   property :price, type: Float
+  property :product_name
 
   belongs_to :product
   belongs_to :order
diff --git a/app/models/supplier.rb b/app/models/supplier.rb
index 16159e95..02af8584 100644
--- a/app/models/supplier.rb
+++ b/app/models/supplier.rb
@@ -1,5 +1,6 @@
 class Supplier
   include SimplyStored::Couch
+  include ActiveModel::SerializerSupport
   devise :database_authenticatable, :recoverable, :rememberable, :trackable, :registerable, :confirmable
   property :unconfirmed_email
 
diff --git a/app/models/table.rb b/app/models/table.rb
index cc3848ee..a0bc5a28 100644
--- a/app/models/table.rb
+++ b/app/models/table.rb
@@ -6,6 +6,7 @@ class Table
   property :number, type: Fixnum, default: 1
   property :position_x, type: Float
   property :position_y, type: Float
+  property :needs_help, type: :boolean
 
   belongs_to :supplier
   belongs_to :section
@@ -47,9 +48,11 @@ class Table
   end
 
   def occupied?
+    return true #testing...
     return @is_occupied if instance_variable_defined?(:'@is_occupied')
     @is_occupied = !self.class.database.view(List.active_by_table_id_view(key: id, reduce: true)).zero?
   end
+  alias occupied occupied?
   def occupied=(val) end
 
   def self.enrich_active_list_id(tables)
diff --git a/app/serializers/join_request_serializer.rb b/app/serializers/join_request_serializer.rb
new file mode 100644
index 00000000..06d38aab
--- /dev/null
+++ b/app/serializers/join_request_serializer.rb
@@ -0,0 +1,3 @@
+class JoinRequestSerializer < Qwaiter::Serializer
+  attributes :user_id, :user_facebook_id, :list_id
+end
diff --git a/app/serializers/list_serializer.rb b/app/serializers/list_serializer.rb
index 72783b97..164e469c 100644
--- a/app/serializers/list_serializer.rb
+++ b/app/serializers/list_serializer.rb
@@ -1,7 +1,7 @@
 class ListSerializer < Qwaiter::Serializer
   # user ids for facebook pictures
   #embed :ids
-  attributes :state, :needs_help, :needs_payment, :is_paid, :price, :table_id, :table_number, :section_id, :has_active_orders, :user_ids
+  attributes :state, :needs_help, :needs_payment, :is_paid, :price, :table_id, :table_number, :section_id, :user_ids, :supplier_id #, :has_active_orders
 
   #def has_active_orders
     #object.has_active_orders?
diff --git a/app/serializers/order_serializer.rb b/app/serializers/order_serializer.rb
index 0a46f5be..6251afad 100644
--- a/app/serializers/order_serializer.rb
+++ b/app/serializers/order_serializer.rb
@@ -1,6 +1,6 @@
 class OrderSerializer < Qwaiter::Serializer
   embed :ids, include: true
-  attributes :state, :list_id, :section_id #, :price
+  attributes :state, :list_id, :section_id, :table_id #, :price
 
   # todo, put this logic in Ember
   #def product_orders
diff --git a/app/serializers/product_order_serializer.rb b/app/serializers/product_order_serializer.rb
index 750d86b2..7dff2f4e 100644
--- a/app/serializers/product_order_serializer.rb
+++ b/app/serializers/product_order_serializer.rb
@@ -1,5 +1,5 @@
 # Used for user ember1
 class ProductOrderSerializer < Qwaiter::Serializer
   embed :ids
-  attributes :order_id, :product_id, :quantity, :price
+  attributes :order_id, :product_id, :quantity, :price, :product_name
 end
diff --git a/app/serializers/table_serializer.rb b/app/serializers/table_serializer.rb
index ff5c2643..5b537277 100644
--- a/app/serializers/table_serializer.rb
+++ b/app/serializers/table_serializer.rb
@@ -10,10 +10,6 @@ class TableSerializer < Qwaiter::Serializer
     #object.active_list
   #end
 
-  def occupied
-    object.active_list_id.present?
-  end
-
   def list
     object.active_list
   end
diff --git a/app/serializers/user_extended_list_serializer.rb b/app/serializers/user_extended_list_serializer.rb
index 2dd53479..2380ed87 100644
--- a/app/serializers/user_extended_list_serializer.rb
+++ b/app/serializers/user_extended_list_serializer.rb
@@ -17,7 +17,9 @@ class UserExtendedListSerializer < Qwaiter::Serializer
     object.has_active_orders?
   end
   has_many :orders
-  has_many :product_categories
+  #has_many :product_categories
+  has_one :table, serializer: UserExtendedTableSerializer
+  has_many :join_requests
 
   def extended_version
     true
diff --git a/app/serializers/user_extended_supplier_serializer.rb b/app/serializers/user_extended_supplier_serializer.rb
new file mode 100644
index 00000000..fffdce1c
--- /dev/null
+++ b/app/serializers/user_extended_supplier_serializer.rb
@@ -0,0 +1,10 @@
+class UserExtendedSupplierSerializer < Qwaiter::Serializer
+  self.root = :supplier
+  embed :ids, include: true
+  attributes :extended_version, :open, :name
+  has_many :product_categories
+
+  def extended_version
+    true
+  end
+end
diff --git a/app/serializers/user_extended_table_serializer.rb b/app/serializers/user_extended_table_serializer.rb
new file mode 100644
index 00000000..5d96e3c2
--- /dev/null
+++ b/app/serializers/user_extended_table_serializer.rb
@@ -0,0 +1,6 @@
+class UserExtendedTableSerializer < Qwaiter::Serializer
+  self.root = :table
+  embed :ids, include: true
+  attributes :number, :width, :height, :position_x, :position_y, :section_id, :occupied, :needs_help
+  has_one :supplier, serializer: UserExtendedSupplierSerializer
+end
diff --git a/app/serializers/user_supplier_serializer.rb b/app/serializers/user_supplier_serializer.rb
new file mode 100644
index 00000000..5c4029d5
--- /dev/null
+++ b/app/serializers/user_supplier_serializer.rb
@@ -0,0 +1,8 @@
+class UserExtendedSupplierSerializer < Qwaiter::Serializer
+  self.root = :supplier
+  attributes :extended_version, :open, :name
+
+  def extended_version
+    false
+  end
+end
diff --git a/app/serializers/user_table_serializer.rb b/app/serializers/user_table_serializer.rb
new file mode 100644
index 00000000..dfef5799
--- /dev/null
+++ b/app/serializers/user_table_serializer.rb
@@ -0,0 +1,4 @@
+class UserTableSerializer < Qwaiter::Serializer
+  self.root = :table
+  attributes :number, :width, :height, :position_x, :position_y, :section_id, :occupied, :needs_help
+end
diff --git a/app/services/join_request.rb b/app/services/join_request.rb
new file mode 100644
index 00000000..619d5240
--- /dev/null
+++ b/app/services/join_request.rb
@@ -0,0 +1,19 @@
+class JoinRequest
+  attr_reader :user, :list
+
+  def initialize(user: nil, list: nil)
+    @user, @list = user, list
+  end
+
+  def user_id
+    user.id
+  end
+
+  def user_facebook_id
+    user.uid
+  end
+
+  def list_id
+    list.id
+  end
+end
diff --git a/app/templates/user/_active_order.mustache b/app/templates/user/_active_order.mustache
index 0ff92c03..2168eac5 100644
--- a/app/templates/user/_active_order.mustache
+++ b/app/templates/user/_active_order.mustache
@@ -4,7 +4,6 @@
       <th data-t="models.product"></th>
       <th>#</th>
       <th class="currency" data-t="basket.total"></th>
-      <th></th>
     </tr>
   </thead>
   <tbody>
@@ -12,18 +11,28 @@
     <tr>
       <td>{{name}}</td>
       <td>{{number}}</td>
-      <td class="currency">{{#currency}}{{product_total}}{{/currency}}</td>
+      <td class="currency">
+        {{#currency}}{{product_total}}{{/currency}}
+        <a class="product_order-remove-button" href=""><span class="fa fa-times fa-large"></span></a>
+      </td>
     </tr>
     {{/products}}
   </tbody>
   <tfoot>
     <tr>
       <td colspan="2">
-        <button class="btn btn-primary" onClick="Quser.order_selected_products()" data-t="selected_products.order"></button>
-        <button class="btn btn btn-warning" onClick="Quser.clear_selected_products()" data-t="selected_products.clear"></button>
+        Totaal
       </td>
       <td class="currency"><strong id="active-order-total">{{#currency}}{{total}}{{/currency}}</strong></td>
+    <tr>
+    <tr>
+      <td>
+        <button class="btn btn btn-warning hide" onClick="Quser.clear_selected_products()" data-t="selected_products.clear"></button>
+      </td>
       <td></td>
+      <td style="text-align: right">
+        <button class="order-selected-products" onClick="Quser.order_selected_products()" data-t="selected_products.order"></button>
+      </td>
     <tr>
   </tfoot>
 </table>
diff --git a/app/templates/user/_products_category_for_order.mustache b/app/templates/user/_products_category_for_order.mustache
index 8ab6425f..4729c5e2 100644
--- a/app/templates/user/_products_category_for_order.mustache
+++ b/app/templates/user/_products_category_for_order.mustache
@@ -1,13 +1,15 @@
-<tr><td colspan="4"><h4>{{category}}</h4></td></tr>
+<tr><td colspan="3"><h4>{{category}}</h4></td></tr>
 {{#products}}
 <tr>
   <td>{{name}}</td>
   <td class="order-count-cell">
-    <span class="btn btn-info btn-mini" onclick="Quser.lower_products_counter('{{_id}}')">-</span>
+    <span class="btn btn-mini hide" onclick="Quser.lower_products_counter('{{_id}}')">-</span>
     <span id="order-product-count-{{_id}}" class="order-product-count">1</span>
-    <span class="btn btn-info btn-mini" onclick="Quser.increment_products_counter('{{_id}}')">+</span>
+    <span class="btn btn-mini hide" onclick="Quser.increment_products_counter('{{_id}}')">+</span>
+  </td>
+  <td style="text-align: right">
+    {{#currency}}{{price}}{{/currency}}
+    <button class="btn order-product-button order-product-{{_id}}" onclick="Quser.add_product_to_order('{{_id}}', this)">Add</button>
   </td>
-  <td>{{#currency}}{{price}}{{/currency}}</td>
-  <td><button class="btn order-product-button order-product-{{_id}}" onclick="Quser.add_product_to_order('{{_id}}', this)">Add</button></td>
 </tr>
 {{/products}}
diff --git a/app/views/layouts/phone.html.slim b/app/views/layouts/phone.html.slim
index 421a8ad4..10790e00 100644
--- a/app/views/layouts/phone.html.slim
+++ b/app/views/layouts/phone.html.slim
@@ -53,7 +53,7 @@ html lang="en"
         });
 
   body class=action_name
-    .navbar.navbar-fixed-top
+    /.navbar.navbar-fixed-top
       .navbar-inner
         .container
           a.btn.btn-navbar data-target=".nav-collapse" data-toggle="collapse"
@@ -66,6 +66,13 @@ html lang="en"
               li.locale.locale-en= link_to_function 'English', %|setLocale('en')| 
               li.locale.locale-nl= link_to_function 'Nederlands', %|setLocale('nl')| 
               li= link_to t('user.list_history.title'), user_list_history_path, data: {t: 'list_history.title'}
+    a#toggle-side-menu href="#"
+      span.fa.fa-bars.fa-lg
+    #side-menu-container
+      ul
+        li.locale-select.locale-select-en= link_to_function 'English', %|setLocale('en')| 
+        li.locale-select.locale-select-nl= link_to_function 'Nederlands', %|setLocale('nl')| 
+        li= link_to t('user.list_history.title'), user_list_history_path, data: {t: 'list_history.title'}
     .container
       .content
         .alert.alert-error.hide
diff --git a/app/views/user/list_products.html.slim b/app/views/user/list_products.html.slim
index 30d8627f..b816ec2e 100644
--- a/app/views/user/list_products.html.slim
+++ b/app/views/user/list_products.html.slim
@@ -1,4 +1,4 @@
-= top_bar title: 'show_products.title' do
+= top_bar title: '' || 'show_products.title' do
   .pull-right
     .supplier-info-row
       .table-number
@@ -6,14 +6,18 @@
     .supplier-info-row
       .counter.supplier-orders-placed-count
       .counter.supplier-orders-in-process-count
+  .main-buttons= link_to image_tag('icons/logo-small.png', alt: application_title), user_root_path, class: :brand
   .action-buttons
     = link_to  user_active_list_path, class: ['user-top-button'], id: 'show-active-list' do
-      span= t('helpers.links.show_active_list', list: List.model_name.human)
+      /span=# t('helpers.links.show_active_list', list: List.model_name.human)
+      span.fa.fa-menu.fa-lg
     span#list-needs-payment-button.user-top-button
-      span
-    span#list-needs-help-button.user-top-button
+      span.fa.fa-money.fa-lg
+    /span#list-needs-help-button.user-top-button
       span
         span
+    span#list-needs-help-button.user-top-button.left
+      span.fa.fa-question.fa-lg
 
 
 .well
diff --git a/config/routes.rb b/config/routes.rb
index 98a92bc1..d62bce2e 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -78,6 +78,7 @@ Qwaiter::Application.routes.draw do
     end
 
     resources :orders, only: [:create]
+    resources :tables, only: [:show]
   end