Index: html/includes/port-sort.inc.php
===================================================================
--- html/includes/port-sort.inc.php	(revision 7710)
+++ html/includes/port-sort.inc.php	(working copy)
@@ -11,58 +11,69 @@
  *
  */
 
+switch ($vars['sort_order'])
+{
+  case 'desc':
+    $sort_order = SORT_DESC;
+    $sort_neg   = SORT_ASC;
+    break;
+  case 'reset':
+    unset($vars['sort'], $vars['sort_order']);
+    // no break here
+  default:
+    $sort_order = SORT_ASC;
+    $sort_neg   = SORT_DESC;
+}
+
 switch ($vars['sort'])
 {
   case 'traffic':
-    $ports = array_sort($ports, 'ifOctets_rate', 'SORT_DESC');
+    $ports = array_sort_by($ports, 'ifOctets_rate', $sort_neg, SORT_NUMERIC);
     break;
   case 'traffic_in':
-    $ports = array_sort($ports, 'ifInOctets_rate', 'SORT_DESC');
+    $ports = array_sort_by($ports, 'ifInOctets_rate', $sort_neg, SORT_NUMERIC);
     break;
   case 'traffic_out':
-    $ports = array_sort($ports, 'ifOutOctets_rate', 'SORT_DESC');
+    $ports = array_sort_by($ports, 'ifOutOctets_rate', $sort_neg, SORT_NUMERIC);
     break;
   case 'traffic_perc_in':
-    $ports = array_sort($ports, 'ifInOctets_perc', 'SORT_DESC');
+    $ports = array_sort_by($ports, 'ifInOctets_perc', $sort_neg, SORT_NUMERIC);
     break;
   case 'traffic_perc_out':
-    $ports = array_sort($ports, 'ifOutOctets_perc', 'SORT_DESC');
+    $ports = array_sort_by($ports, 'ifOutOctets_perc', $sort_neg, SORT_NUMERIC);
     break;
   case 'traffic_perc':
-    $ports = array_sort($ports, 'ifOctets_perc', 'SORT_DESC');
+    $ports = array_sort_by($ports, 'ifOctets_perc', $sort_neg, SORT_NUMERIC);
     break;
   case 'packets':
-    $ports = array_sort($ports, 'ifUcastPkts_rate', 'SORT_DESC');
+    $ports = array_sort_by($ports, 'ifUcastPkts_rate', $sort_neg, SORT_NUMERIC);
     break;
   case 'packets_in':
-    $ports = array_sort($ports, 'ifInUcastPkts_rate', 'SORT_DESC');
+    $ports = array_sort_by($ports, 'ifInUcastPkts_rate', $sort_neg, SORT_NUMERIC);
     break;
   case 'packets_out':
-    $ports = array_sort($ports, 'ifOutUcastPkts_rate', 'SORT_DESC');
+    $ports = array_sort_by($ports, 'ifOutUcastPkts_rate', $sort_neg, SORT_NUMERIC);
     break;
   case 'errors':
-    $ports = array_sort($ports, 'ifErrors_rate', 'SORT_DESC');
+    $ports = array_sort_by($ports, 'ifErrors_rate', $sort_neg, SORT_NUMERIC);
     break;
   case 'speed':
-    $ports = array_sort($ports, 'ifSpeed', 'SORT_DESC');
+    $ports = array_sort_by($ports, 'ifSpeed', $sort_neg, SORT_NUMERIC);
     break;
   case 'port':
-    $ports = array_sort($ports, 'ifDescr', 'SORT_ASC');
+    $ports = array_sort_by($ports, 'ifDescr', $sort_order, SORT_STRING);
     break;
   case 'media':
-    $ports = array_sort($ports, 'ifType', 'SORT_ASC');
+    $ports = array_sort_by($ports, 'ifType', $sort_order, SORT_STRING);
     break;
   case 'descr':
-    $ports = array_sort($ports, 'ifAlias', 'SORT_ASC');
+    $ports = array_sort_by($ports, 'ifAlias', $sort_order, SORT_STRING);
     break;
   case 'mac':
-    $ports = array_sort($ports, 'ifPhysAddress', 'SORT_DESC');
+    $ports = array_sort_by($ports, 'ifPhysAddress', $sort_neg, SORT_STRING);
     break;
-  case 'device':
-    $ports = array_sort($ports, 'hostname', 'SORT_ASC');
-    break;
   default:
-    $ports = array_sort($ports, 'ifIndex', 'SORT_ASC');
+    $ports = array_sort_by($ports, 'hostname', $sort_order, SORT_STRING, 'ifIndex', $sort_order, SORT_NUMERIC);
 }
 
 // EOF
Index: html/pages/device/port.inc.php
===================================================================
--- html/pages/device/port.inc.php	(revision 7710)
+++ html/pages/device/port.inc.php	(working copy)
@@ -17,7 +17,7 @@
 {
   $sql  = "SELECT *, `ports`.`port_id` AS `port_id`";
   $sql .= " FROM  `ports`";
-  $sql .= " LEFT JOIN  `ports-state` ON  `ports`.port_id = `ports-state`.port_id";
+  $sql .= " LEFT JOIN  `ports-state` USING(`port_id`)";
   $sql .= " WHERE `ports`.`port_id` = ?";
 
   $port = dbFetchRow($sql, array($vars['port']));
Index: html/pages/device/ports.inc.php
===================================================================
--- html/pages/device/ports.inc.php	(revision 7710)
+++ html/pages/device/ports.inc.php	(working copy)
@@ -169,47 +169,8 @@
 } else {
   if ($vars['view'] == "details") { $port_details = 1; }
 
-  if ($vars['view'] == "graphs") { $table_class = "table-striped-two"; } else { $table_class = "table-striped"; }
-  echo '<div class="box box-solid">';
-  echo('<table class="table table-hover  table-condensed  '.$table_class.'">');
+  if ($vars['view'] == "graphs") { $table_class = OBS_CLASS_TABLE_STRIPED_TWO; } else { $table_class = OBS_CLASS_TABLE_STRIPED; }
 
-  echo('  <thead>');
-  echo('<tr>');
-
-  // Define column headers for the table
-  $cols = array(
-                'state' => NULL,
-                'BLANK' => NULL,
-                'port' => 'Port',
-                'graphs' => NULL,
-                'traffic' => 'Traffic',
-                'speed' => 'Speed',
-                // 'media' => 'Media',
-                'mac' => 'MAC Address',
-                'details' => NULL);
-
-  foreach ($cols as $sort => $col)
-  {
-
-    if ($sort == "state")
-    {
-        echo('<th class="state-marker"></th>');
-    }
-    elseif ($col == NULL)
-    {
-      echo('<th></th>');
-    }
-    elseif ($vars['sort'] == $sort)
-    {
-      echo('<th>'.$col.' *</th>');
-    } else {
-      echo('<th><a href="'. generate_url($vars, array('sort' => $sort)).'">'.$col.'</a></th>');
-    }
-  }
-
-  echo('      </tr>');
-  echo('  </thead>');
-
   $i = "1";
 
   // Make the port caches available easily to this code.
@@ -217,7 +178,7 @@
 
   $sql  = "SELECT *, `ports`.`port_id` as `port_id`";
   $sql .= " FROM  `ports`";
-  $sql .= " LEFT JOIN `ports-state` ON  `ports`.`port_id` =  `ports-state`.`port_id`";
+  $sql .= " LEFT JOIN `ports-state` USING (`port_id`)";
   $sql .= " WHERE `device_id` = ? ORDER BY `ifIndex` ASC";
   $ports = dbFetchRows($sql, array($device['device_id']));
 
@@ -258,14 +219,32 @@
     $cache['ports_vlan'][$entry['port_id']][$entry['vlan']] = $entry;
   }
 
+  echo generate_box_open();
+  echo '<table class="' . $table_class . ' table-hover">' . PHP_EOL;
+
+  $cols = array(
+                   array(NULL, 'class="state-marker"'),
+                   array(NULL),
+    'port'      => array('Port'),
+                   array(NULL),
+    'traffic'   => array('Traffic'),
+    'speed'     => array('Speed'),
+    'mac'       => array('MAC Address'),
+                   array(NULL),
+  );
+
+  echo get_table_header($cols, $vars);
+  echo '<tbody>' . PHP_EOL;
+  
   foreach ($ports as $port)
   {
     if (is_filtered()) { continue; }
 
     print_port_row($port, $vars);
   }
-  echo("</table>");
-  echo '</div>';
+
+  echo '</tbody></table>';
+  echo generate_box_close();
 }
 
 $page_title[] = "Ports";
Index: html/pages/ports/list.inc.php
===================================================================
--- html/pages/ports/list.inc.php	(revision 7710)
+++ html/pages/ports/list.inc.php	(working copy)
@@ -36,8 +36,8 @@
 
 $sql  = "SELECT ".$select;
 $sql .= " FROM `ports`";
-$sql .= " INNER JOIN `devices` ON `ports`.`device_id` = `devices`.`device_id`";
-$sql .= " LEFT JOIN `ports-state` ON `ports`.`port_id` = `ports-state`.`port_id`";
+$sql .= " INNER JOIN `devices` USING (`device_id`)";
+$sql .= " LEFT JOIN `ports-state` USING (`port_id`)";
 $sql .= " ".$where;
 
 unset($ports);
@@ -49,39 +49,24 @@
 
 // End populating ports array
 
-echo '<div class="box box-solid">';
-echo('<table class="table table-striped  table-hover table-condensed">');
-echo('  <thead>');
+echo generate_box_open();
+echo '<table class="' . OBS_CLASS_TABLE_STRIPED . ' table-hover">' . PHP_EOL;
 
-echo('<tr class="entity">');
-echo('      <th class="state-marker"></th>'.PHP_EOL);
-echo('      <th style="width: 1px;"></th>'.PHP_EOL);
+$cols = array(
+                     array(NULL, 'class="state-marker"'),
+                     array(NULL, 'style="width: 1px;"'),                   
+  'device'        => array('Device', 'style="width: 200px;"'),
+  'port'          => array('Port', 'style="width: 350px;"'),    
+  'traffic'       => array('Traffic', 'style="width: 100px;"'),
+  'traffic_perc'  => array('Traffic %', 'style="width: 90px;"'),
+  'packets'       => array('Packets', 'style="width: 90px;"'),
+  'speed'         => array('Speed', 'style="width: 90px;"'),    
+                     array('MAC Address', 'style="width: 150px;"'),
+);
 
-$cols = array( array('head' => 'Device',      'sort' => 'device',       'width' => 250),
-               array('head' => 'Port',        'sort' => 'port',         'width' => 350),
-               array('head' => 'Traffic',     'sort' => 'traffic',      'width' => 100),
-               array('head' => 'Traffic %',   'sort' => 'traffic_perc', 'width' => 90),
-               array('head' => 'Packets',     'sort' => 'packets',      'width' => 90),
-               array('head' => 'Speed',       'sort' => 'speed',        'width' => 90),
-               array('head' => 'MAC Address', 'sort' => 'mac',          'width' => 150)
-              );
+echo get_table_header($cols, $vars);
+echo '<tbody>' . PHP_EOL;
 
-foreach ($cols as $col)
-{
-  echo('<th');
-  if (is_numeric($col['width'])) { echo(' style="width: '.$col['width'].';"'); }
-  echo('>');
-  if ($vars['sort'] == $col['sort'])
-  {
-    echo($col['head'].' *');
-  } else {
-    echo('<a href="'. generate_url($vars, array('sort' => $col['sort'])).'">'.$col['head'].'</a>');
-  }
-  echo("</th>");
-}
-
-echo("      </tr></thead>");
-
 $ports_disabled = 0; $ports_down = 0; $ports_up = 0; $ports_total = 0;
 foreach ($ports as $port)
 {
@@ -91,10 +76,9 @@
 
 }
 
-echo('</table>');
+echo '</tbody></table>';
+echo generate_box_close();
 
-echo '</div>';
-
 echo pagination($vars, $ports_count);
 
 // EOF
Index: html/pages/ports.inc.php
===================================================================
--- html/pages/ports.inc.php	(revision 7710)
+++ html/pages/ports.inc.php	(working copy)
@@ -41,8 +41,6 @@
 $where .= implode('', $where_array);
 //r($where_array);
 
-echo '<div class="row">';
-
 $form_items = array();
 
 foreach (get_locations() as $entry)
@@ -207,6 +205,7 @@
                                 'right'       => TRUE,
                                 );
 ?>
+<div class="row">
 <div class="col-xl-4 visible-xl">
 <?php
 
@@ -240,20 +239,18 @@
 
 ?>
 </div>
+
 <div class="col-xl-8">
 
 <?php
 
 if ($vars['searchbar'] != "hide")
 {
-
-  echo '<div class="box box-solid hidden-xl">';
-  $form['class'] = '';
+  echo '<div class="hidden-xl">';
   print_form($form);
   echo '</div>';
-
-  unset($form, $form_items);
 }
+unset($form, $panel_form, $form_items);
 
 $navbar = array('brand' => "Ports", 'class' => "navbar-narrow");
 
@@ -320,4 +317,7 @@
 include($config['html_dir'].'/includes/port-sort.inc.php');
 include($config['html_dir'].'/pages/ports/'.$vars['format'].'.inc.php');
 
+echo '</div>';
+echo '</div>';
+
 // EOF