Merge pull request #59 from laf/new-design-clean

Move UI to Bootstrap v3, courtesy of @laf.
2024-10-07 16:52:45 +00:00 · 2014-01-27 09:12:45 -08:00
parent 4168059ce8 2b647013af
commit e80f8f33a6
60 changed files with 11355 additions and 4232 deletions
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ exception):
  - overLIB (html/js/overlib_mini.js): modified Artistic 1.0?
  - scripts/*/mysql: GPLv2 only
  - check_mk (scripts/observium_agent*): GPLv2
-
+  - qTip (html/css/jquery.qtip.min.css and html/js/qtip/jquery.qtip.min.js): GPLv2

 Introduction
 ------------
--- a/html/ajax_search.php
+++ b/html/ajax_search.php
@@ -0,0 +1,145 @@
+<?php
+
+if (isset($_REQUEST['debug']))
+{
+  ini_set('display_errors', 1);
+  ini_set('display_startup_errors', 0);
+  ini_set('log_errors', 0);
+  ini_set('allow_url_fopen', 0);
+  ini_set('error_reporting', E_ALL);
+}
+
+include_once("../includes/defaults.inc.php");
+include_once("../config.php");
+include_once("../includes/definitions.inc.php");
+include_once("includes/functions.inc.php");
+include_once("../includes/functions.php");
+include_once("../includes/dbFacile.php");
+include_once("../includes/common.php");
+
+include_once("../includes/rewrites.php");
+include_once("includes/authenticate.inc.php");
+
+if (!$_SESSION['authenticated']) { echo("unauthenticated"); exit; }
+
+$device = Array();
+$ports = Array();
+
+if (isset($_REQUEST['search']))
+{
+  $search = mres($_REQUEST['search']);
+
+  if (strlen($search) >0)
+  {
+    $found = 0;
+
+    if($_REQUEST['type'] == 'device') {
+
+      // Device search
+      $results = dbFetchRows("SELECT * FROM `devices` WHERE `hostname` LIKE '%" . $search . "%' OR `location` LIKE '%" . $search . "%' ORDER BY hostname LIMIT 8");
+      if (count($results))
+      {
+        $found = 1;
+        $devices = count($results);
+
+        foreach ($results as $result)
+        {
+          $name = $result['hostname'];
+          if (strlen($name) > 36) { $name = substr($name, 0, 36) . "..."; }
+          if($result['disabled'] == 1)
+          {
+            $highlight_colour = '#808080';
+          }
+          elseif($result['ignored'] == 1 && $result['disabled'] == 0)
+          {
+            $highlight_colour = '#000000';
+          }
+          elseif($result['status'] == 0 && $result['ignore'] == 0 && $result['disabled'] == 0)
+          {
+            $highlight_colour = '#ff0000';
+          }
+          elseif($result['status'] == 1 && $result['ignore'] == 0 && $result['disabled'] == 0)
+          {
+            $highlight_colour = '#008000';
+          }
+          $num_ports = dbFetchCell("SELECT COUNT(*) FROM `ports` WHERE device_id = ?", array($result['device_id']));
+          $device[]=array('name'=>$name,
+          'url'=> generate_device_url($result),
+          'colours'=>$highlight_colour,
+          'device_ports'=>$num_ports,
+	  'device_image'=>getImageSrc($result),
+	  'device_hardware'=>$result['hardware'],
+	  'device_os'=>$config['os'][$result['os']]['text'],
+          'version'=>$result['version'],
+          'location'=>$result['location']);
+        }
+      }
+      $json = json_encode($device);
+      print_r($json);
+      exit;
+    
+    } elseif($_REQUEST['type'] == 'ports') {
+      // Search ports
+      $results = dbFetchRows("SELECT `ports`.* AS P,`devices`.* AS D FROM `ports` LEFT JOIN `devices` ON  `ports`.`device_id` =  `devices`.`device_id` WHERE `ifAlias` LIKE '%" . $search . "%' OR `ifDescr` LIKE '%" . $search . "%' ORDER BY ifDescr LIMIT 8");
+
+      if (count($results))
+      {
+        $found = 1;
+
+        foreach ($results as $result)
+        {
+          $name = $result['ifDescr'];
+          if (strlen($name) > 36)
+          {
+            $name = substr($name, 0, 36) . "...";
+          }
+          $description = $result['ifAlias'];
+          if (strlen($description) > 50)
+          {
+            $description = substr($description, 0, 50) . "...";
+          }
+  
+          if($result['deleted'] == 0 && ($result['ignore'] == 0 || $result['ignore'] == 0) && ($result['ifInErrors_delta'] > 0 || $result['ifOutErrors_delta'] > 0))
+          {
+            // Errored ports
+            $port_colour = '#ffa500';
+          }
+          elseif($result['deleted'] == 0 && ($result['ignore'] == 1 || $result['ignore']  == 1))
+          {
+            // Ignored ports
+            $port_colour = '#000000';
+          
+          }
+          elseif($result['deleted'] == 0 && $result['ifAdminStatus'] == 'down' && $result['ignore'] == 0 && $result['ignore'] == 0)
+          {
+            // Shutdown ports
+            $port_colour = '#808080';
+          }
+          elseif($result['deleted'] == 0 && $result['ifOperStatus'] == 'down' && $result['ifAdminStatus'] == 'up' && $result['ignore'] == 0 && $result['ignore'] == 0)
+          {
+            // Down ports
+            $port_colour = '#ff0000';
+          }
+          elseif($result['deleted'] == 0 && $result['ifOperStatus'] == 'up' && $result['ignore'] == 0 && $result['ignore'] == 0)
+          {
+            // Up ports
+            $port_colour = '#008000';
+          }
+
+          $ports[]=array('count'=>count($results),
+          'url'=>generate_port_url($result),
+          'name'=>$name,
+          'description'=>$description,
+          'colours'=>$highlight_colour,
+          'hostname'=>$result['hostname']);
+
+        }
+      }
+      $json = json_encode($ports);
+      print_r($json);
+      exit;
+
+    }
+  }
+}
+?>
--- a/html/css/bootstrap-theme.css
+++ b/html/css/bootstrap-theme.css
@@ -0,0 +1,397 @@
+/*!
+ * Bootstrap v3.0.3 (http://getbootstrap.com)
+ * Copyright 2013 Twitter, Inc.
+ * Licensed under http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.btn-default:active,
+.btn-primary:active,
+.btn-success:active,
+.btn-info:active,
+.btn-warning:active,
+.btn-danger:active,
+.btn-default.active,
+.btn-primary.active,
+.btn-success.active,
+.btn-info.active,
+.btn-warning.active,
+.btn-danger.active {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+
+.btn:active,
+.btn.active {
+  background-image: none;
+}
+
+.btn-default {
+  text-shadow: 0 1px 0 #fff;
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
+  background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
+  background-repeat: repeat-x;
+  border-color: #dbdbdb;
+  border-color: #ccc;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.btn-default:hover,
+.btn-default:focus {
+  background-color: #e0e0e0;
+  background-position: 0 -15px;
+}
+
+.btn-default:active,
+.btn-default.active {
+  background-color: #e0e0e0;
+  border-color: #dbdbdb;
+}
+
+.btn-primary {
+  background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
+  background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
+  background-repeat: repeat-x;
+  border-color: #2b669a;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+  background-color: #2d6ca2;
+  background-position: 0 -15px;
+}
+
+.btn-primary:active,
+.btn-primary.active {
+  background-color: #2d6ca2;
+  border-color: #2b669a;
+}
+
+.btn-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
+  background-repeat: repeat-x;
+  border-color: #3e8f3e;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.btn-success:hover,
+.btn-success:focus {
+  background-color: #419641;
+  background-position: 0 -15px;
+}
+
+.btn-success:active,
+.btn-success.active {
+  background-color: #419641;
+  border-color: #3e8f3e;
+}
+
+.btn-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
+  background-repeat: repeat-x;
+  border-color: #e38d13;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.btn-warning:hover,
+.btn-warning:focus {
+  background-color: #eb9316;
+  background-position: 0 -15px;
+}
+
+.btn-warning:active,
+.btn-warning.active {
+  background-color: #eb9316;
+  border-color: #e38d13;
+}
+
+.btn-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
+  background-repeat: repeat-x;
+  border-color: #b92c28;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.btn-danger:hover,
+.btn-danger:focus {
+  background-color: #c12e2a;
+  background-position: 0 -15px;
+}
+
+.btn-danger:active,
+.btn-danger.active {
+  background-color: #c12e2a;
+  border-color: #b92c28;
+}
+
+.btn-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
+  background-repeat: repeat-x;
+  border-color: #28a4c9;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.btn-info:hover,
+.btn-info:focus {
+  background-color: #2aabd2;
+  background-position: 0 -15px;
+}
+
+.btn-info:active,
+.btn-info.active {
+  background-color: #2aabd2;
+  border-color: #28a4c9;
+}
+
+.thumbnail,
+.img-thumbnail {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+}
+
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background-color: #e8e8e8;
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+}
+
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  background-color: #357ebd;
+  background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
+  background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
+}
+
+.navbar-default {
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
+  background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
+  background-repeat: repeat-x;
+  border-radius: 4px;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
+}
+
+.navbar-default .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
+  background-image: linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
+}
+
+.navbar-brand,
+.navbar-nav > li > a {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+
+.navbar-inverse {
+  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
+  background-image: linear-gradient(to bottom, #3c3c3c 0%, #222222 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.navbar-inverse .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #222222 0%, #282828 100%);
+  background-image: linear-gradient(to bottom, #222222 0%, #282828 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
+          box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
+}
+
+.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-nav > li > a {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.navbar-static-top,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  border-radius: 0;
+}
+
+.alert {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.alert-success {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
+  background-repeat: repeat-x;
+  border-color: #b2dba1;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
+}
+
+.alert-info {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
+  background-repeat: repeat-x;
+  border-color: #9acfea;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
+}
+
+.alert-warning {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
+  background-repeat: repeat-x;
+  border-color: #f5e79e;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
+}
+
+.alert-danger {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
+  background-repeat: repeat-x;
+  border-color: #dca7a7;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
+}
+
+.progress {
+  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
+}
+
+.progress-bar {
+  background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
+  background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
+}
+
+.progress-bar-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
+}
+
+.progress-bar-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
+}
+
+.progress-bar-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
+}
+
+.progress-bar-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
+}
+
+.list-group {
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+}
+
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  text-shadow: 0 -1px 0 #3071a9;
+  background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%);
+  background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
+  background-repeat: repeat-x;
+  border-color: #3278b3;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
+}
+
+.panel {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.panel-default > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+}
+
+.panel-primary > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
+  background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
+}
+
+.panel-success > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
+}
+
+.panel-info > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
+}
+
+.panel-warning > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
+}
+
+.panel-danger > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
+}
+
+.well {
+  background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
+  background-repeat: repeat-x;
+  border-color: #dcdcdc;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
+          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
+}
--- a/html/css/bootstrap-theme.min.css
+++ b/html/css/bootstrap-theme.min.css
--- a/html/css/bootstrap.css
+++ b/html/css/bootstrap.css
--- a/html/css/bootstrap.min.css
+++ b/html/css/bootstrap.min.css
--- a/html/css/bootstrap/glyphicons-halflings-white.png
+++ b/html/css/bootstrap/glyphicons-halflings-white.png
--- a/html/css/bootstrap/glyphicons-halflings.png
+++ b/html/css/bootstrap/glyphicons-halflings.png
--- a/html/css/jquery.qtip.min.css
+++ b/html/css/jquery.qtip.min.css
--- a/html/css/mktree.css
+++ b/html/css/mktree.css
@@ -13,9 +13,11 @@
 	/* Sublists are visible or not based on class of parent LI */
 	ul.mktree  li.liOpen    ul { display: block; }
 	ul.mktree  li.liClosed  ul { display: none; }
+
 	/* Format menu items differently depending on what level of the tree they are in */
-	ul.mktree  li { font-size: 12pt; }
-	ul.mktree  li ul li { font-size: 10pt; }
-	ul.mktree  li ul li ul li { font-size: 10pt; }
-	ul.mktree  li ul li ul li ul li { font-size: 10pt; }
+	/* Uncomment this if you want your fonts to decrease in size the deeper they are in the tree */
+/*
+	ul.mktree  li ul li { font-size: 90% }
+*/
+
 }
--- a/html/css/styles.css
+++ b/html/css/styles.css
@@ -698,7 +698,7 @@ table.simple {
  padding: 10px;
 }

-table { border-collapse: collapse; margin: 0px; }
+table { border-collapse: collapse; margin: 0px; background-color:#ffffff }
 form { margin: 0px; padding: 0px; }
 hr { border: 0px; height: 1px; background-color: #ccc; color: #ccc; }
 p { margin: 0px; padding: 0px; }
@@ -1582,3 +1582,28 @@ tr.search:nth-child(odd) {
  margin: 2px;
 }

+.example-sports .league-name {
+  margin: 0 20px 5px 20px;
+  padding: 3px 0;
+  border-bottom: 1px solid #ccc;
+}
+
+.demo {
+  position: relative;
+  *z-index: 1;
+  margin: 50px 0;
+}
+
+.dropdown-submenu{position:relative;}
+.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
+.dropdown-submenu:hover>.dropdown-menu{display:block;}
+.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
+.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
+.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
+
+
+.scrollable-menu {
+    height: auto;
+    max-height: 200px;
+    overflow-x: hidden;
+}
--- a/html/css/typeahead.js-bootstrap.css
+++ b/html/css/typeahead.js-bootstrap.css
@@ -0,0 +1,49 @@
+.twitter-typeahead .tt-query,
+.twitter-typeahead .tt-hint {
+  margin-bottom: 0;
+}
+
+.tt-dropdown-menu {
+  min-width: 160px;
+  margin-top: 2px;
+  padding: 5px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+          box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+}
+
+.tt-suggestion {
+  display: block;
+  padding: 3px 20px;
+}
+
+.tt-suggestion.tt-is-under-cursor {
+  color: #fff;
+  background-color: #0081c2;
+  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
+}
+
+.tt-suggestion.tt-is-under-cursor a {
+  color: #fff;
+}
+
+.tt-suggestion p {
+  margin: 0;
+}
--- a/html/includes/device-header.inc.php
+++ b/html/includes/device-header.inc.php
@@ -1,17 +1,17 @@
 <?php

-if ($device['status'] == '0') {  $class = "div-alert"; } else {   $class = "div-normal"; }
+if ($device['status'] == '0') {  $class = "alert-danger"; } else {   $class = ""; }
 if ($device['ignore'] == '1')
 {
  $class = "div-ignore-alert";
  if ($device['status'] == '1')
  {
-    $class = "div-ignore";
+    $class = "alert-warning";
  }
 }
 if ($device['disabled'] == '1')
 {
-  $class = "div-disabled";
+  $class = "alert-info";
 }

 $type = strtolower($device['os']);
@@ -19,7 +19,7 @@ $type = strtolower($device['os']);
 $image = getImage($device);

 echo('
-            <tr bgcolor="'.$device_colour.'" class="'.$class.'">
+            <tr bgcolor="'.$device_colour.'" class="alert '.$class.'">
             <td width="40" align=center valign=middle style="padding: 21px;">'.$image.'</td>
             <td valign=middle style="padding: 0 15px;"><span style="font-size: 20px;">' . generate_device_link($device) . '</span>
             <br />' . $device['location'] . '</td>
--- a/html/includes/front/boxes.inc.php
+++ b/html/includes/front/boxes.inc.php
@@ -11,11 +11,14 @@
 * the source code distribution for details.
 */
 ?>
-<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
-<script type="text/javascript" src="js/jquery-cycle-boxes.js"></script>
 <?php

-echo("<div class='right-2-col-fixed'>\n<div class='boxes'>\n");
+echo('
+<div class="cycle-slideshow"
+    data-cycle-fx="scrollVert"
+    data-cycle-timeout="10000"
+    data-cycle-slides="> div">
+');

 foreach (get_matching_files($config['html_dir']."/includes/front/", "/^top_.*\.php$/") as $file) {
  echo("<div class=box>\n");
@@ -23,7 +26,7 @@ foreach (get_matching_files($config['html_dir']."/includes/front/", "/^top_.*\.p
  echo("</div>\n");
 }

-echo("</div>\n");
 echo("</div>\n");

 ?>
+
--- a/html/includes/print-event.inc.php
+++ b/html/includes/print-event.inc.php
@@ -8,7 +8,6 @@ $icon = geteventicon($entry['message']);
 if ($icon) { $icon = '<img src="images/16/' . $icon . '" />'; }

 echo('<tr class="eventlog">
-  <td width="0"></td>
  <td class="syslog" width="160">
    ' . $entry['datetime'] . '
  </td>');
--- a/html/includes/print-menubar.php
+++ b/html/includes/print-menubar.php
@@ -12,56 +12,57 @@ if (isset($config['enable_bgp']) && $config['enable_bgp'])

 ?>

-<ul id="menium">
+<nav class="navbar-wrapper navbar navbar-default navbar-fixed-top" role="navigation">
+  <div id="container">
+    <div class="navbar-header">
+<?php

-    <li><a href="<?php echo(generate_url(array('page'=>'overview'))); ?>" class="drop"><img src="images/16/lightbulb.png" border="0" align="absmiddle" /> Overview</a>
-        <div class="dropdown_1column">
-            <div class="col_1">
-        <ul>
-        <?php if (isset($config['enable_map']) && $config['enable_map']) {
-          echo('<li><a href="'.generate_url(array('page'=>'overview')).'"><img src="images/16/map.png" border="0" align="absmiddle" /> Network Map</a></li>');
-        } ?>
-        <li><a href="<?php echo(generate_url(array('page'=>'eventlog'))); ?>"><img src="images/16/report.png" border="0" align="absmiddle" /> Eventlog</a></li>
-  <?php if (isset($config['enable_syslog']) && $config['enable_syslog']) {
-      echo('<li><a href="'.generate_url(array('page'=>'syslog')).'"><img src="images/16/page.png" border="0" align="absmiddle" /> Syslog</a></li>');
-  } ?>
+  if ($config['title_image'])
+  {
+    echo('<a class="navbar-brand" href=""><img src="' . $config['title_image'] . '" /></a>');
+  }
+  else
+  {
+    echo('<a class="navbar-brand" href="">'.$config['project_name'].'</a>');
+  }
+
+?>
+    </div>
+
+    <div class="collapse navbar-collapse">
+      <ul class="nav navbar-nav">
+        <li class="dropdown">
+          <a href="<?php echo(generate_url(array('page'=>'overview'))); ?>" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><img src="images/16/lightbulb.png" border="0" align="absmiddle" /> Overview<b class="caret"></b></a>
+          <ul class="dropdown-menu">
+<?php if (isset($config['enable_map']) && $config['enable_map']) {
+  echo('              <li><a href="'.generate_url(array('page'=>'overview')).'"><img src="images/16/map.png" border="0" align="absmiddle" /> Network Map</a></li>');
+} ?>
+            <li><a href="<?php echo(generate_url(array('page'=>'eventlog'))); ?>"><img src="images/16/report.png" border="0" align="absmiddle" /> Eventlog</a></li>
+<?php if (isset($config['enable_syslog']) && $config['enable_syslog']) {
+  echo('              <li><a href="'.generate_url(array('page'=>'syslog')).'"><img src="images/16/page.png" border="0" align="absmiddle" /> Syslog</a></li>');
+} ?>
 <!--        <li><a href="<?php echo(generate_url(array('page'=>'alerts'))); ?>"><img src="images/16/exclamation.png" border="0" align="absmiddle" /> Alerts</a></li> -->
-        <li><a href="<?php echo(generate_url(array('page'=>'inventory'))); ?>"><img src="images/16/bricks.png" border="0" align="absmiddle" /> Inventory</a></li>
-        </ul>
-            </div>
-
-            <div class="col_1">
-              <h3>Search</h3>
-            </div>
-
-            <div class="col_1">
-        <ul>
-          <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'ipv4'))); ?>"><img src="images/icons/ipv4.png" border="0" align="absmiddle" /> IPv4 Search</a></li>
-          <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'ipv6'))); ?>"><img src="images/icons/ipv6.png" border="0" align="absmiddle" /> IPv6 Search</a></li>
-          <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'mac'))); ?>"><img src="images/16/email_link.png" border="0" align="absmiddle" /> MAC Search</a></li>
-          <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'arp'))); ?>"><img src="images/16/email_link.png" border="0" align="absmiddle" /> ARP Tables</a></li>
-        </ul>
-            </div>
-
-        </div>
-
-    </li>
-
-    <li><a href="devices/" class="drop"><img src="images/16/server.png" border="0" align="absmiddle" /> Devices</a>
-
-     <div class="dropdown_4columns"><!-- Begin 4 columns container -->
-      <div class="col_1">
-        <ul>
-          <li><a href="devices/"><img src="images/16/server.png" border="0" align="absmiddle" /> All Devices</a></li>
-          <li><hr width="140" /></li>
-
+            <li><a href="<?php echo(generate_url(array('page'=>'inventory'))); ?>"><img src="images/16/bricks.png" border="0" align="absmiddle" /> Inventory</a></li>
+            <li role="presentation" class="divider"></li>
+            <li role="presentation" class="dropdown-header"> Search</li>
+            <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'ipv4'))); ?>"><img src="images/icons/ipv4.png" border="0" align="absmiddle" /> IPv4 Search</a></li>
+            <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'ipv6'))); ?>"><img src="images/icons/ipv6.png" border="0" align="absmiddle" /> IPv6 Search</a></li>
+            <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'mac'))); ?>"><img src="images/16/email_link.png" border="0" align="absmiddle" /> MAC Search</a></li>
+            <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'arp'))); ?>"><img src="images/16/email_link.png" border="0" align="absmiddle" /> ARP Tables</a></li>
+          </ul>
+        </li>
+        <li class="dropdown">
+          <a href="devices/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><img src="images/16/server.png" border="0" align="absmiddle" /> Devices<b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><a href="devices/"><img src="images/16/server.png" border="0" align="absmiddle" /> All Devices</a></li>
+            <li role="presentation" class="divider"></li>
 <?php

 foreach ($config['device_types'] as $devtype)
 {
  if (in_array($devtype['type'],array_keys($cache['device_types'])))
  {
-    echo('        <li><a href="devices/type=' . $devtype['type'] . '/"><img src="images/icons/' . $devtype['icon'] . '" border="0" align="absmiddle" /> ' . $devtype['text'] . '</a></li>');
+    echo('            <li><a href="devices/type=' . $devtype['type'] . '/"><img src="images/icons/' . $devtype['icon'] . '" border="0" align="absmiddle" /> ' . $devtype['text'] . '</a></li>');
  }
 }

@@ -69,21 +70,38 @@ if ($_SESSION['userlevel'] >= '10')
 {
  if (count($cache['device_types']))
  {
-    echo('
-        <li><hr width="140" /></li>');
+    echo('            <li role="presentation" class="divider"></li>');
+  }
+
+if ($config['show_locations'])
+{
+
+  echo('
+            <li class="dropdown-submenu">
+              <a href="#"><img src="images/16/building.png" border="0" align="absmiddle" /> Locations</a>
+              <ul class="dropdown-menu scrollable-menu">
+  ');
+  if ($config['show_locations_dropdown'])
+  {
+    foreach (getlocations() as $location)
+    {
+      echo('            <li><a href="devices/location=' . urlencode($location) . '/"><img src="images/16/building.png" border="0" align="absmiddle" /> ' . $location . ' </a></li>');
+    }
+
  }
  echo('
-        <li><a href="addhost/"><img src="images/16/server_add.png" border="0" align="absmiddle" /> Add Device</a></li>
-        <li><a href="delhost/"><img src="images/16/server_delete.png" border="0" align="absmiddle" /> Delete Device</a></li>');
+              </ul>
+            </li>
+  ');
+}
+  echo('
+            <li><a href="addhost/"><img src="images/16/server_add.png" border="0" align="absmiddle" /> Add Device</a></li>
+            <li><a href="delhost/"><img src="images/16/server_delete.png" border="0" align="absmiddle" /> Delete Device</a></li>');
 }
 ?>

          </ul>
-
-       </div>
-
-       <div id="devices_chart" class="col_3" style="height: 300px">
-       </div>
+        </li>

 <script class="code" type="text/javascript">
 $(document).ready(function() {
@@ -112,45 +130,36 @@ $(document).ready(function() {
  );
 });
 </script>
-      </div>
-
-    </li><!-- End 5 columns Item -->

 <?php

 if ($config['show_services'])
 {
 ?>
-
-    <li><a href="services/" class="drop"><img src="images/16/cog.png" border="0" align="absmiddle" /> Services</a><!-- Begin 4 columns Item -->
-
-        <div class="dropdown_4columns"><!-- Begin 4 columns container -->
-
-            <div class="col_1">
-<ul>
-        <li><a href="services/"><img src="images/16/cog.png" border="0" align="absmiddle" /> All Services </a></li>
+        <li class="dropdown">
+          <a href="services/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><img src="images/16/cog.png" border="0" align="absmiddle" /> Services<b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><a href="services/"><img src="images/16/cog.png" border="0" align="absmiddle" /> All Services </a></li>

 <?php

 if ($service_alerts)
 {
-  echo('  <li><hr width=140 /></li>
-        <li><a href="services/status=0/"><img src="images/16/cog_error.png" border="0" align="absmiddle" /> Alerts ('.$service_alerts.')</a></li>');
+  echo('
+            <li role="presentation" class="divider"></li>
+            <li><a href="services/status=0/"><img src="images/16/cog_error.png" border="0" align="absmiddle" /> Alerts ('.$service_alerts.')</a></li>');
 }

 if ($_SESSION['userlevel'] >= '10')
 {
  echo('
-        <li><hr width="140" /></li>
-        <li><a href="addsrv/"><img src="images/16/cog_add.png" border="0" align="absmiddle" /> Add Service</a></li>
-        <li><a href="delsrv/"><img src="images/16/cog_delete.png" border="0" align="absmiddle" /> Delete Service</a></li>');
+            <li role="presentation" class="divider"></li>
+            <li><a href="addsrv/"><img src="images/16/cog_add.png" border="0" align="absmiddle" /> Add Service</a></li>
+            <li><a href="delsrv/"><img src="images/16/cog_delete.png" border="0" align="absmiddle" /> Delete Service</a></li>');
 }
 ?>
-        </ul>
-        </div>
-
-       <div id="services_chart" class="col_3" style="height: 300px">
-       </div>
+          </ul>
+        </li>

 <script class="code" type="text/javascript">
 $(document).ready(function() {
@@ -178,88 +187,58 @@ $(document).ready(function() {
 });
 </script>

-        </div><!-- End 4 columns container -->
-
-    </li><!-- End 4 columns Item -->
-
 <?php
 }

-if ($config['show_locations'])
-{
-?>
-    <li><a href="locations/" class="drop"><img src="images/16/building.png" border="0" align="absmiddle" /> Locations</a><!-- Begin Home Item -->
-
-<?php
-  if ($config['show_locations_dropdown'])
-  {
-?>
-        <div class="dropdown_2columns"><!-- Begin 2 columns container -->
-          <div class="col_2">
-            <ul>
-<?php
-    foreach (getlocations() as $location)
-    {
-      echo('            <li><a href="devices/location=' . urlencode($location) . '/"><img src="images/16/building.png" border="0" align="absmiddle" /> ' . $location . ' </a></li>');
-    }
-?>
-            </ul>
-          </div>
-        </div><!-- End 4 columns container -->
-<?php
-  }
-?>
-    </li><!-- End 4 columns Item -->
-
-<?php
-}
 ?>

    <!-- PORTS -->
-
-    <li><a href="ports/" class="drop"><img src="images/16/connect.png" border="0" align="absmiddle" /> Ports</a><!-- Begin Home Item -->
-
-        <div class="dropdown_4columns"><!-- Begin 2 columns container -->
-
-          <div class="col_1">
-             <ul>
-<li><a href="ports/"><img src="images/16/connect.png" border="0" align="absmiddle" /> All Ports</a></li>
+        <li class="dropdown">
+          <a href="ports/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><img src="images/16/connect.png" border="0" align="absmiddle" /> Ports<b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><a href="ports/"><img src="images/16/connect.png" border="0" align="absmiddle" /> All Ports</a></li>

 <?php

 if ($ports['errored'])
 {
-  echo('<li><a href="ports/errors=1/"><img src="images/16/chart_curve_error.png" border="0" align="absmiddle" /> Errored ('.$ports['errored'].')</a></li>');
+  echo('            <li><a href="ports/errors=1/"><img src="images/16/chart_curve_error.png" border="0" align="absmiddle" /> Errored ('.$ports['errored'].')</a></li>');
 }

 if ($ports['ignored'])
 {
-  echo('<li><a href="ports/ignore=1/"><img src="images/16/chart_curve_link.png" border="0" align="absmiddle" /> Ignored ('.$ports['ignored'].')</a></li>');
+  echo('            <li><a href="ports/ignore=1/"><img src="images/16/chart_curve_link.png" border="0" align="absmiddle" /> Ignored ('.$ports['ignored'].')</a></li>');
 }

-if ($config['enable_billing']) { echo('<li><a href="bills/"><img src="images/16/money.png" border="0" align="absmiddle" /> Traffic Bills</a></li>'); $ifbreak = 1; }
+if ($config['enable_billing']) {
+  echo('            <li><a href="bills/"><img src="images/16/money.png" border="0" align="absmiddle" /> Traffic Bills</a></li>'); $ifbreak = 1;
+}

-if ($config['enable_pseudowires']) { echo('<li><a href="pseudowires/"><img src="images/16/arrow_switch.png" border="0" align="absmiddle" /> Pseudowires</a></li>'); $ifbreak = 1; }
+if ($config['enable_pseudowires']) {
+  echo('            <li><a href="pseudowires/"><img src="images/16/arrow_switch.png" border="0" align="absmiddle" /> Pseudowires</a></li>'); $ifbreak = 1;
+}

 ?>
 <?php

 if ($_SESSION['userlevel'] >= '5')
 {
-  echo('<li><hr width="140" /></li>');
-  if ($config['int_customers']) { echo('<li><a href="customers/"><img src="images/16/group_link.png" border="0" align="absmiddle" /> Customers</a></li>'); $ifbreak = 1; }
-  if ($config['int_l2tp']) { echo('<li><a href="iftype/type=l2tp/"><img src="images/16/user.png" border="0" align="absmiddle" /> L2TP</a></li>'); $ifbreak = 1; }
-  if ($config['int_transit']) { echo('<li><a href="iftype/type=transit/"><img src="images/16/lorry_link.png" border="0" align="absmiddle" /> Transit</a></li>');  $ifbreak = 1; }
-  if ($config['int_peering']) { echo('<li><a href="iftype/type=peering/"><img src="images/16/bug_link.png" border="0" align="absmiddle" /> Peering</a></li>'); $ifbreak = 1; }
-  if ($config['int_peering'] && $config['int_transit']) { echo('<li><a href="iftype/type=peering,transit/"><img src="images/16/world_link.png" border="0" align="absmiddle" /> Peering + Transit</a></li>'); $ifbreak = 1; }
-  if ($config['int_core']) { echo('<li><a href="iftype/type=core/"><img src="images/16/brick_link.png" border="0" align="absmiddle" /> Core</a></li>'); $ifbreak = 1; }
+  echo('            <li role="presentation" class="divider"></li>');
+  if ($config['int_customers']) { echo('            <li><a href="customers/"><img src="images/16/group_link.png" border="0" align="absmiddle" /> Customers</a></li>'); $ifbreak = 1; }
+  if ($config['int_l2tp']) { echo('            <li><a href="iftype/type=l2tp/"><img src="images/16/user.png" border="0" align="absmiddle" /> L2TP</a></li>'); $ifbreak = 1; }
+  if ($config['int_transit']) { echo('            <li><a href="iftype/type=transit/"><img src="images/16/lorry_link.png" border="0" align="absmiddle" /> Transit</a></li>');  $ifbreak = 1; }
+  if ($config['int_peering']) { echo('            <li><a href="iftype/type=peering/"><img src="images/16/bug_link.png" border="0" align="absmiddle" /> Peering</a></li>'); $ifbreak = 1; }
+  if ($config['int_peering'] && $config['int_transit']) { echo('            <li><a href="iftype/type=peering,transit/"><img src="images/16/world_link.png" border="0" align="absmiddle" /> Peering + Transit</a></li>'); $ifbreak = 1; }
+  if ($config['int_core']) { echo('            <li><a href="iftype/type=core/"><img src="images/16/brick_link.png" border="0" align="absmiddle" /> Core</a></li>'); $ifbreak = 1; }
 }

-if ($ifbreak) { echo('<li><hr width="140" /></li>'); }
+if ($ifbreak) {
+ echo('            <li role="presentation" class="divider"></li>');
+}

 if (isset($interface_alerts))
 {
-  echo('<li><a href="ports/alerted=yes/"><img src="images/16/link_error.png" border="0" align="absmiddle" /> Alerts ('.$interface_alerts.')</a></li>');
+  echo('           <li><a href="ports/alerted=yes/"><img src="images/16/link_error.png" border="0" align="absmiddle" /> Alerts ('.$interface_alerts.')</a></li>');
 }

 $deleted_ports = 0;
@@ -272,18 +251,13 @@ foreach (dbFetchRows("SELECT * FROM `ports` AS P, `devices` as D WHERE P.`delete
 }
 ?>

-<li><a href="ports/state=down/"><img src="images/16/if-disconnect.png" border="0" align="absmiddle" /> Down</a></li>
-<li><a href="ports/state=admindown/"><img src="images/16/if-disable.png" border="0" align="absmiddle" /> Disabled</a></li>
+            <li><a href="ports/state=down/"><img src="images/16/if-disconnect.png" border="0" align="absmiddle" /> Down</a></li>
+            <li><a href="ports/state=admindown/"><img src="images/16/if-disable.png" border="0" align="absmiddle" /> Disabled</a></li>
 <?php

-if ($deleted_ports) { echo('<li><a href="deleted-ports/"><img src="images/16/cross.png" border="0" align="absmiddle" /> Deleted ('.$deleted_ports.')</a></li>'); }
+if ($deleted_ports) { echo('            <li><a href="deleted-ports/"><img src="images/16/cross.png" border="0" align="absmiddle" /> Deleted ('.$deleted_ports.')</a></li>'); }

 ?>
-</ul>
-          </div>
-
-          <div id="ports_chart" class="col_3" style="height: 300px">
-          </div>

 <script class="code" type="text/javascript">
 $(document).ready(function() {
@@ -313,11 +287,8 @@ $(document).ready(function() {
  );
 });
 </script>
-
-        </div><!-- End 4 columns container -->
-
-    </li><!-- End 4 columns Item -->
-
+          </ul>
+        </li>
 <?php

 // FIXME does not check user permissions...
@@ -331,34 +302,31 @@ $menu_sensors = $used_sensors;

 ?>

-    <li><a href="health/" class="drop"><img src="images/icons/sensors.png" border="0" align="absmiddle" /> Health</a><!-- Begin Home Item -->
-
-        <div class="dropdown_1column"><!-- Begin 2 columns container -->
-            <div class="col_1">
-
-<ul>
-        <li><a href="health/metric=mempool/"><img src="images/icons/memory.png" border="0" align="absmiddle" /> Memory</a></li>
-        <li><a href="health/metric=processor/"><img src="images/icons/processor.png" border="0" align="absmiddle" /> Processor</a></li>
-        <li><a href="health/metric=storage/"><img src="images/icons/storage.png" border="0" align="absmiddle" /> Storage</a></li>
+        <li class="dropdown">
+          <a href="health/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><img src="images/icons/sensors.png" border="0" align="absmiddle" /> Health<b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><a href="health/metric=mempool/"><img src="images/icons/memory.png" border="0" align="absmiddle" /> Memory</a></li>
+            <li><a href="health/metric=processor/"><img src="images/icons/processor.png" border="0" align="absmiddle" /> Processor</a></li>
+            <li><a href="health/metric=storage/"><img src="images/icons/storage.png" border="0" align="absmiddle" /> Storage</a></li>
 <?php
 if ($menu_sensors)
 {
  $sep = 0;
-  echo('<li><hr width="97%" /></li>');
+  echo('            <li role="presentation" class="divider"></li>');
 }

 foreach (array('fanspeed','humidity','temperature') as $item)
 {
  if ($menu_sensors[$item])
  {
-    echo('<li><a href="health/metric='.$item.'/"><img src="images/icons/'.$item.'.png" border="0" align="absmiddle" /> '.nicecase($item).'</a></li>');
+    echo('            <li><a href="health/metric='.$item.'/"><img src="images/icons/'.$item.'.png" border="0" align="absmiddle" /> '.nicecase($item).'</a></li>');
    unset($menu_sensors[$item]);$sep++;
  }
 }

 if ($sep)
 {
-  echo('<li><hr width="97%" /></li>');
+  echo('          <li role="presentation" class="divider"></li>');
  $sep = 0;
 }

@@ -366,32 +334,26 @@ foreach (array('current','frequency','power','voltage') as $item)
 {
  if ($menu_sensors[$item])
  {
-    echo('<li><a href="health/metric='.$item.'/"><img src="images/icons/'.$item.'.png" border="0" align="absmiddle" /> '.nicecase($item).'</a></li>');
+    echo('            <li><a href="health/metric='.$item.'/"><img src="images/icons/'.$item.'.png" border="0" align="absmiddle" /> '.nicecase($item).'</a></li>');
    unset($menu_sensors[$item]);$sep++;
  }
 }

 if ($sep && array_keys($menu_sensors))
 {
-  echo('<li><hr width="97%" /></li>');
+  echo('            <li role="presentation" class="divider"></li>');
  $sep = 0;
 }

 foreach (array_keys($menu_sensors) as $item)
 {
-  echo('<li><a href="health/metric='.$item.'/"><img src="images/icons/'.$item.'.png" border="0" align="absmiddle" /> '.nicecase($item).'</a></li>');
+  echo('            <li><a href="health/metric='.$item.'/"><img src="images/icons/'.$item.'.png" border="0" align="absmiddle" /> '.nicecase($item).'</a></li>');
  unset($menu_sensors[$item]);$sep++;
 }

 ?>
-        </ul>
-
-            </div>
-
-        </div><!-- End 4 columns container -->
-
-    </li><!-- End 4 columns Item -->
-
+          </ul>
+        </li>
 <?php

 $app_count = dbFetchCell("SELECT COUNT(`app_id`) FROM `applications`");
@@ -399,10 +361,9 @@ $app_count = dbFetchCell("SELECT COUNT(`app_id`) FROM `applications`");
 if ($_SESSION['userlevel'] >= '5' && ($app_count) > "0")
 {
 ?>
-
-    <li><a href="apps/" class="drop"><img src="images/icons/apps.png" border="0" align="absmiddle" /> Apps</a><!-- Begin Home Item -->
-        <div class="dropdown_1column"><!-- Begin 1 column container -->
-          <ul>
+        <li class="dropdown">
+          <a href="apps/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><img src="images/icons/apps.png" border="0" align="absmiddle" /> Apps<b class="caret"></b></a>
+          <ul class="dropdown-menu">
 <?php

  $app_list = dbFetchRows("SELECT `app_type` FROM `applications` GROUP BY `app_type` ORDER BY `app_type`");
@@ -411,14 +372,11 @@ if ($_SESSION['userlevel'] >= '5' && ($app_count) > "0")
    $image = $config['html_dir']."/images/icons/".$row['app_type'].".png";
    $icon = (file_exists($image) ? $row['app_type'] : "apps");
 echo('
-        <li><a href="apps/app='.$app['app_type'].'/"><img src="images/icons/'.$icon.'.png" border="0" align="absmiddle" /> '.nicecase($app['app_type']).' </a></li>');
+            <li><a href="apps/app='.$app['app_type'].'/"><img src="images/icons/'.$icon.'.png" border="0" align="absmiddle" /> '.nicecase($app['app_type']).' </a></li>');
  }
-
 ?>
          </ul>
-      </div>
-    </li>
-
+        </li>    
 <?php
 }

@@ -431,17 +389,15 @@ if ($_SESSION['userlevel'] >= '5' && ($routing_count['bgp']+$routing_count['ospf
 {

 ?>
-
-    <li><a href="routing/" class="drop"><img src="images/16/arrow_branch.png" border="0" align="absmiddle" /> Routing</a><!-- Begin Home Item -->
-        <div class="dropdown_1column"><!-- Begin 1 column container -->
-          <ul>
-
+        <li class="dropdown">
+          <a href="routing/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><img src="images/16/arrow_branch.png" border="0" align="absmiddle" /> Routing<b class="caret"></b></a>
+          <ul class="dropdown-menu">
 <?php
  $separator = 0;

  if ($_SESSION['userlevel'] >= '5' && $routing_count['vrf'])
  {
-    echo('<li><a href="routing/protocol=vrf/"><img src="images/16/layers.png" border="0" align="absmiddle" /> VRFs</a></li>');
+    echo('            <li><a href="routing/protocol=vrf/"><img src="images/16/layers.png" border="0" align="absmiddle" /> VRFs</a></li>');
    $separator++;
  }

@@ -449,12 +405,11 @@ if ($_SESSION['userlevel'] >= '5' && ($routing_count['bgp']+$routing_count['ospf
  {
    if ($separator)
    {
-      echo('
-        <li><hr width=140></li>');
+      echo('            <li role="presentation" class="divider"></li>');
      $separator = 0;
    }
    echo('
-        <li><a href="routing/protocol=ospf/"><img src="images/16/text_letter_omega.png" border="0" align="absmiddle" /> OSPF Devices </a></li>');
+            <li><a href="routing/protocol=ospf/"><img src="images/16/text_letter_omega.png" border="0" align="absmiddle" /> OSPF Devices </a></li>');
    $separator++;
  }

@@ -463,32 +418,28 @@ if ($_SESSION['userlevel'] >= '5' && ($routing_count['bgp']+$routing_count['ospf
  {
    if ($separator)
    {
-      echo('
-        <li><hr width=140></li>');
+      echo('            <li role="presentation" class="divider"></li>');
      $separator = 0;
    }
    echo('
-        <li><a href="routing/protocol=bgp/type=all/graph=NULL/"><img src="images/16/link.png" border="0" align="absmiddle" /> BGP All Sessions </a></li>
-
-        <li><a href="routing/protocol=bgp/type=external/graph=NULL/"><img src="images/16/world_link.png" border="0" align="absmiddle" /> BGP External</a></li>
-        <li><a href="routing/protocol=bgp/type=internal/graph=NULL/"><img src="images/16/brick_link.png" border="0" align="absmiddle" /> BGP Internal</a></li>');
+            <li><a href="routing/protocol=bgp/type=all/graph=NULL/"><img src="images/16/link.png" border="0" align="absmiddle" /> BGP All Sessions </a></li>
+            <li><a href="routing/protocol=bgp/type=external/graph=NULL/"><img src="images/16/world_link.png" border="0" align="absmiddle" /> BGP External</a></li>
+            <li><a href="routing/protocol=bgp/type=internal/graph=NULL/"><img src="images/16/brick_link.png" border="0" align="absmiddle" /> BGP Internal</a></li>');
  }

  // Do Alerts at the bottom
  if ($bgp_alerts)
  {
    echo('
-        <li><hr width=140></li>
-        <li><a href="routing/protocol=bgp/adminstatus=start/state=down/"><img src="images/16/link_error.png" border="0" align="absmiddle" /> Alerted BGP (' . $bgp_alerts . ')</a></li>
+            <li role="presentation" class="divider"></li>
+            <li><a href="routing/protocol=bgp/adminstatus=start/state=down/"><img src="images/16/link_error.png" border="0" align="absmiddle" /> Alerted BGP (' . $bgp_alerts . ')</a></li>
   ');
  }

-  echo('      </ul>');
+  echo('          </ul>');
 ?>

-        </div><!-- End 4 columns container -->
-
-    </li><!-- End 4 columns Item -->
+        </li><!-- End 4 columns container -->

 <?php
 }
@@ -499,15 +450,12 @@ if ($packages)
 {
 ?>

-    <li><a href="<?php echo(generate_url(array('page'=>'packages'))); ?>" class="drop"><img src="images/16/box.png" border="0" align="absmiddle" /> Packages</a>
-      <div class="dropdown_1column">
-        <div class="col_1">
-          <ul>
+        <li class="dropdown">
+          <a href="<?php echo(generate_url(array('page'=>'packages'))); ?>" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><img src="images/16/box.png" border="0" align="absmiddle" /> Packages<b class="caret"></b></a>
+          <ul class="dropdown-menu">
            <li><a href="<?php echo(generate_url(array('page'=>'packages'))); ?>"><img src="images/16/box.png" border="0" align="absmiddle" /> All Packages</a></li>
          </ul>
-        </div>
-      </div>
-    </li>
+        </li>
 <?php
 } # if ($packages)

@@ -518,52 +466,97 @@ if(is_file("includes/print-menubar-custom.inc.php"))
 }

 ?>
-    <li class="menu_right"><a href="#" class="drop"><img src="images/16/wrench.png" border="0" align="absmiddle" /> System</a><!-- Begin Home Item -->
+      </ul>

-        <div class="dropdown_2columns align_right"><!-- Begin 2 columns container -->
+      <ul class="nav navbar-nav navbar-right">
+        <li style="padding-top:10px">
+          <form role="form" class="pull-left form-horizontal">
+            <div class="form-group row">
+              <div class="col-md-10">
+                <input class="input-large search-query" type="search" id="gsearch" name="gsearch" placeholder="Global Search" style="width: 250px">
+              </div>
+              <div class="col-md-2">
+                &nbsp;
+              </div>
+            </div>
+          </form>
+        </li>
+        <li class="dropdown">
+<?php
+if($_SESSION['widescreen'] === 1)
+{
+  echo('        <a href="' . $toggle_url . 'widescreen=no" title="Switch to normal screen width layout">Normal width</a>');
+} else {
+  echo('        <a href="' . $toggle_url . 'widescreen=yes" title="Switch to wide screen layout">Widescreen</a>');
+}

-            <div class="col_1">
-                <h2>Settings</h2>
-<ul>
+?>
+        </li>
+      <li class="dropdown">
+        <a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><img src="images/16/wrench.png" border="0" align="absmiddle" /> System<b class="caret"></b></a>
+        <ul class="dropdown-menu">
+          <li role="presentation" class="dropdown-header"> Settings</li>
+          <li role="presentation" class="divider"></li>
 <?php
 if ($_SESSION['userlevel'] >= '10')
 {
  echo('
-        <li><a href="settings/"><img src="images/16/wrench.png" border="0" align="absmiddle" /> Global Settings</a></li>');
+          <li><a href="settings/"><img src="images/16/wrench.png" border="0" align="absmiddle" /> Global Settings</a></li>');
 }
 ?>
-      <li><a href="preferences/"><img src="images/16/wrench_orange.png" border="0" align="absmiddle" /> My Settings</a></li>
-        </ul>
-            </div>
-
-<div class="col_1">
-                <h2>Users</h2>
-<ul>
+          <li><a href="preferences/"><img src="images/16/wrench_orange.png" border="0" align="absmiddle" /> My Settings</a></li>
+          <li role="presentation" class="divider"></li>
+          <li role="presentation" class="dropdown-header"> Users</li>

    <?php if ($_SESSION['userlevel'] >= '10')
    {
      if (auth_usermanagement())
      {
      echo('
-        <li><a href="adduser/"><img src="images/16/user_add.png" border="0" align="absmiddle" /> Add User</a></li>
-        <li><a href="deluser/"><img src="images/16/user_delete.png" border="0" align="absmiddle" /> Remove User</a></li>
+           <li><a href="adduser/"><img src="images/16/user_add.png" border="0" align="absmiddle" /> Add User</a></li>
+           <li><a href="deluser/"><img src="images/16/user_delete.png" border="0" align="absmiddle" /> Remove User</a></li>
        ');
      }
      echo('
-        <li><a href="edituser/"><img src="images/16/user_edit.png" border="0" align="absmiddle" /> Edit User</a></li>
-        <li><a href="authlog/"><img src="images/16/lock.png" border="0" align="absmiddle" /> Authlog</a></li>');
+           <li><a href="edituser/"><img src="images/16/user_edit.png" border="0" align="absmiddle" /> Edit User</a></li>
+           <li><a href="authlog/"><img src="images/16/lock.png" border="0" align="absmiddle" /> Authlog</a></li>');
    } ?>
+<?php
+if ($_SESSION['authenticated'])
+{
+  echo('
+           <li><a href="logout/">Logout</a></li>
+');
+}
+?>

-        </ul>
-            </div>
+           <li role="presentation" class="divider"></li>
+           <li><a href="about/"><img src="images/16/information.png" border="0" align="absmiddle" /> About&nbsp;<?php echo($config['project_name']); ?></a></li>
+         </ul>
+       </li>
+     </ul>

-            <div class="col_2">
-		<ul>
-                  <li><a href="about/"><img src="images/16/information.png" border="0" align="absmiddle" /> About&nbsp;<?php echo($config['project_name']); ?></a></li>
-                </ul>
-            </div>
-        </div>
-
-    </li><!-- End Home Item -->
-
-</ul>
+   </div>
+ </div>
+</div>
+</nav>
+<script>
+  $('#gsearch').typeahead([
+    {
+      name: 'devices',
+      remote : 'ajax_search.php?search=%QUERY&type=device',
+      header: '<h5><strong>Devices</strong></h5>',
+      template: '<p"><img src="{{device_image}}" border="0" class="img_left"> <small><a href="{{url}}"><strong>{{name}}</strong> | {{device_os}} | {{version}} | {{device_hardware}} with {{device_ports}} port(s) | {{location}}</a></small></p>',
+      valueKey:"name",
+      engine: Hogan
+    },
+    {
+      name: 'ports',
+      remote : 'ajax_search.php?search=%QUERY&type=ports',
+      header: '<h5><strong>Ports</strong></h5>',
+      template: '<p><small><a href="{{url}}"><img src="images/icons/port.png" /> <strong>{{name}}</strong> – {{hostname}}</a></small></p>',
+      valueKey: "name",
+      engine: Hogan
+    }
+  ]);
+</script>
--- a/html/includes/print-syslog.inc.php
+++ b/html/includes/print-syslog.inc.php
@@ -2,8 +2,7 @@

 if (device_permitted($entry['device_id']))
 {
-  echo("<tr class=\"syslog\">
-    <td width=0></td>");
+  echo("<tr class=\"syslog\">");

  $entry['hostname'] = shorthost($entry['hostname'], 20);

--- a/html/includes/topnav.inc.php
+++ b/html/includes/topnav.inc.php
@@ -33,7 +33,7 @@ if($_SESSION['userlevel'] >= 5)
  $ports['errored']     = dbFetchCell("SELECT COUNT(*) FROM ports AS I, devices AS D WHERE I.deleted = '0' AND D.device_id = I.device_id AND (I.ignore = '0' OR D.ignore = '0') AND (I.ifInErrors_delta > '0' OR I.ifOutErrors_delta > '0')");

  $services['count']    = dbFetchCell("SELECT COUNT(service_id) FROM services");
-  $services['up']       = dbFetchCell("SELECT COUNT(service_id) FROM services WHERE service_status = '1' AND service_ignore ='0'");
+  $services['up']       = dbFetchCell("SELECT COUNT(service_id) FROM services WHERE service_status = '1' AND service_ignore ='0' AND service_disabled='0'");
  $services['down']     = dbFetchCell("SELECT COUNT(service_id) FROM services WHERE service_status = '0' AND service_ignore = '0'");
  $services['ignored']  = dbFetchCell("SELECT COUNT(service_id) FROM services WHERE service_ignore = '1'");
  $services['disabled'] = dbFetchCell("SELECT COUNT(service_id) FROM services WHERE service_disabled = '1'");
@@ -49,7 +49,7 @@ else
  $ports['up']       = dbFetchCell("SELECT COUNT(*) FROM ports AS I, devices AS D, devices_perms AS P WHERE I.deleted = '0' AND P.user_id = ? AND P.device_id = D.device_id AND I.device_id = D.device_id AND ifOperStatus = 'up'", array($_SESSION['user_id']));
  $ports['down']     = dbFetchCell("SELECT COUNT(*) FROM ports AS I, devices AS D, devices_perms AS P WHERE I.deleted = '0' AND P.user_id = ? AND P.device_id = D.device_id AND I.device_id = D.device_id AND ifOperStatus = 'down' AND ifAdminStatus = 'up'", array($_SESSION['user_id']));
  $ports['disabled'] = dbFetchCell("SELECT COUNT(*) FROM ports AS I, devices AS D, devices_perms AS P WHERE I.deleted = '0' AND P.user_id = ? AND P.device_id = D.device_id AND I.device_id = D.device_id AND ifAdminStatus = 'down'", array($_SESSION['user_id']));
-  $ports['errored']  = dbFetchCell("SELECT COUNT(*) FROM ports AS I, devices AS D, devices_perms AS P WHERE I.deleted = '0' AND P.user_id = ? AND P.device_id = D.device_id AND I.device_id = D.device_id AND (I.in_errors > '0' OR I.out_errors > '0')", array($_SESSION['user_id']));
+  $ports['errolabel label-danger']  = dbFetchCell("SELECT COUNT(*) FROM ports AS I, devices AS D, devices_perms AS P WHERE I.deleted = '0' AND P.user_id = ? AND P.device_id = D.device_id AND I.device_id = D.device_id AND (I.in_errors > '0' OR I.out_errors > '0')", array($_SESSION['user_id']));

  $services['count']      = dbFetchCell("SELECT COUNT(service_id) FROM services AS S, devices AS D, devices_perms AS P WHERE P.user_id = ? AND P.device_id = D.device_id AND S.device_id = D.device_id", array($_SESSION['user_id']));
  $services['up']         = dbFetchCell("SELECT COUNT(service_id) FROM services AS S, devices AS D, devices_perms AS P WHERE P.user_id = ? AND P.device_id = D.device_id AND S.device_id = D.device_id AND service_status = '1' AND service_ignore ='0'", array($_SESSION['user_id']));
@@ -62,44 +62,52 @@ if ($ports['down'])    { $ports['bgcolour'] = "#ffcccc"; } else { $ports['bgcolo
 if ($services['down']) { $services['bgcolour'] = "#ffcccc"; } else { $services['bgcolour'] = "transparent"; }

 ?>
-
-<table cellpadding="0" cellspacing="0" border="0" width=500>
-  <tr style="background-color: <?php echo($devices[bgcolour]); ?>">
-    <td width="5"></td>
-    <td><strong>Devices</strong></td>
-    <td><?php echo($devices['count']) ?></td>
-    <td> ( </td>
-    <td style="text-align: right"><span class="green"> <?php echo($devices['up']) ?> up</span></td>
-    <td style="text-align: right"><span class="red"> <?php echo($devices['down']) ?> down</span></td>
-    <td style="text-align: right"><span class="black"> <?php echo($devices['ignored']) ?> ignored</span> </td>
-    <td style="text-align: right"><span class="grey"> <?php echo($devices['disabled']) ?> disabled</span></td>
-    <td> ) </td>
-    <td width="5"></td>
-  </tr>
-  <tr style="background-color: <?php echo($ports['bgcolour']) ?>">
-      <td width="5"></td>
-      <td><strong>Ports</strong></td>
-    <td><?php echo($ports['count']) ?></td>
-    <td> ( </td>
-    <td style="text-align: right"><span class="green"> <?php echo($ports['up']) ?> up </span></td>
-    <td style="text-align: right"><span class="red"> <?php echo($ports['down']) ?> down </span></td>
-    <td style="text-align: right"><span class="black"> <?php echo($ports['ignored']) ?> ignored </span></td>
-    <td style="text-align: right"><span class="grey"> <?php echo($ports['shutdown']) ?> shutdown</span></td>
-    <td> ) </td>
-    <td width="5"></td>
-  </tr>
+            <div class="container pull-right">
+              <div class="row">
+                <div class="col-md-6">
+<table class="table table-condensed table-striped">
+  <thead>
+    <tr>
+      <th>&nbsp;</th>
+      <th>Total</th>
+      <th>Up</th>
+      <th>Down</th>
+      <th>Ignored</th>
+      <th>Disabled</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><a href="devices/">Devices</a></td>
+      <td><a href="devices/"><span><?php echo($devices['count']) ?></span></a></td>
+      <td><a href="devices/state=up/format=list_detail/"><span class="green"> <?php echo($devices['up']) ?> up</span></a></td>
+      <td><a href="devices/state=down/format=list_detail/"><span class="red"> <?php echo($devices['down']) ?> down</span></a></td>
+      <td><a href="devices/ignore=1/format=list_detail/"><span class="grey"> <?php echo($devices['ignored']) ?> ignored </span></a></td>
+      <td><a href="devices/disabled=1/format=list_detail/"><span class="black"> <?php echo($devices['disabled']) ?> disabled</span></a></td>
+    </tr>
+    <tr class="danger">
+      <td><a href="ports/">Ports</a></td>
+      <td><a href="ports/"><span><?php echo($ports['count']) ?></span></a></td>
+      <td><a href="ports/format=list_detail/state=up/"><span class="green"> <?php echo($ports['up']) ?> up </span></a></td>
+      <td><a href="ports/format=list_detail/state=down/"><span class="red"> <?php echo($ports['down']) ?> down </span></a></td>
+      <td><a href="ports/format=list_detail/ignore=1/"><span class="grey"> <?php echo($ports['ignored']) ?> ignored </span></a></td>
+      <td><a href="ports/format=list_detail/state=admindown/"><span class="black"> <?php echo($ports['shutdown']) ?> shutdown</span></a></td>
+    </tr>
 <?php if ($config['show_services']) { ?>
-  <tr style="background-color: <?php echo($services['bgcolour']) ?>">
-    <td width="5"></td>
-    <td><strong>Services</strong></td>
-    <td><?php echo($services['count']) ?></td>
-    <td> ( </td>
-    <td style="text-align: right"><span class="green"><?php echo($services['up']) ?> up</span></td>
-    <td style="text-align: right"><span class="red"> <?php echo($services['down']) ?> down</span></td>
-    <td style="text-align: right"><span class="black"> <?php echo($services['ignored']) ?> ignored</span> </td>
-    <td style="text-align: right"><span class="grey"> <?php echo($services['disabled']) ?> disabled</span></td>
-    <td> ) </td>
-    <td width="5"></td>
-  </tr>
+    <tr>
+      <td><a href="services/">Services</a></td>
+      <td><a href="services/"><span><?php echo($services['count']) ?></span></a></td>
+      <td><a href="services/state=up/view=details/"><span class="green"><?php echo($services['up']) ?> up</span></a></td>
+      <td><a href="services/state=down/view=details/"><span class="red"> <?php echo($services['down']) ?> down</span></a></td>
+      <td><a href="services/ignore=1/view=details/"><span class="grey"> <?php echo($services['ignored']) ?> ignored</span></a></td>
+      <td><a href="services/disabled=1/view=details/"><span class="black"> <?php echo($services['disabled']) ?> disabled</span></a></td>
+    </tr>
 <?php } ?>
+  </tbody>
 </table>
+              </div>
+              <div class="col-md-6">
+                &nbsp;
+              </div>
+            </div>
+        </div>
--- a/html/index.php
+++ b/html/index.php
@@ -115,31 +115,42 @@ if ($config['page_title']) { $config['page_title_prefix'] = $config['page_title'
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <meta http-equiv="content-language" content="en-us" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <?php
 if ($config['page_refresh']) { echo('  <meta http-equiv="refresh" content="'.$config['page_refresh'].'" />' . "\n"); }
 ?>
+  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="<?php echo($config['stylesheet']);  ?>" rel="stylesheet" type="text/css" />
+  <link href="css/typeahead.js-bootstrap.css" rel="stylesheet" type="text/css" />
+  <script src="js/jquery.min.js"></script>
+  <script src="js/bootstrap.min.js"></script>
+  <script src="js/bootstrap-hover-dropdown.min.js"></script>
+  <script src="js/typeahead.min.js"></script>
+  <script src="js/hogan-2.0.0.js"></script>
+
+  <script src="js/jquery.cycle2.min.js"></script>
+  <script src="js/jquery.cycle2.scrollVert.min.js"></script>
 <?php
 if ($config['favicon']) { echo('  <link rel="shortcut icon" href="'.$config['favicon'].'" />' . "\n"); }
 ?>
-  <link rel="stylesheet" href="css/mktree.css" type="text/css" />
+  <!--<link rel="stylesheet" href="css/mktree.css" type="text/css" />-->
 <?php
-if ($_SESSION['widescreen']) { echo('<link rel="stylesheet" href="css/styles-wide.css" type="text/css" />'); }
+//if ($_SESSION['widescreen']) { echo('<link rel="stylesheet" href="css/styles-wide.css" type="text/css" />'); }
 ?>
-</head>
-<body>
-  <script type="text/javascript" src="js/mktree.js"></script>
-  <script type="text/javascript" src="js/sorttable.js"></script>
-  <script type="text/javascript" src="js/jquery.min.js"></script>
-  <script type="text/javascript" src="js/jquery-checkbox.js"></script>
-  <script type="text/javascript" src="js/qtip/jquery.qtip-1.0.0-rc3.min.js"></script>
-<?php /* html5.js below from http://html5shim.googlecode.com/svn/trunk/html5.js */ ?>
+  <!--<script type="text/javascript" src="js/mktree.js"></script>-->
+  <!--<script type="text/javascript" src="js/sorttable.js"></script>-->
+  <!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
+  <!--<script type="text/javascript" src="js/jquery-checkbox.js"></script>-->
+  <!--<script type="text/javascript" src="js/bootstrap.min.js"></script>-->
+  <!--<script type="text/javascript" src="js/qtip/jquery.qtip.min.js"></script>-->
+  <!--<link rel="stylesheet" href="css/jquery.qtip.min.css" type="text/css">-->
+<!--<?php /* html5.js below from http://html5shim.googlecode.com/svn/trunk/html5.js */ ?>-->
  <!--[if IE]><script src="js/html5.js"></script><![endif]-->
  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jqplot/excanvas.js"></script><![endif]-->
-  <script language="javascript" type="text/javascript" src="js/jqplot/jquery.jqplot.min.js"></script>
-  <link rel="stylesheet" type="text/css" href="js/jqplot/jquery.jqplot.min.css" />
-  <script type="text/javascript" src="js/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
-  <script type="text/javascript" src="js/jqplot/plugins/jqplot.donutRenderer.min.js"></script>
+  <!--<script language="javascript" type="text/javascript" src="js/jqplot/jquery.jqplot.min.js"></script>-->
+  <!--<link rel="stylesheet" type="text/css" href="js/jqplot/jquery.jqplot.min.css" />-->
+  <!--<script type="text/javascript" src="js/jqplot/plugins/jqplot.pieRenderer.min.js"></script>-->
+  <!--<script type="text/javascript" src="js/jqplot/plugins/jqplot.donutRenderer.min.js"></script>-->
  <script type="text/javascript">
    <!--

@@ -212,23 +223,31 @@ function popUp(URL)
 // End -->
  </script>
  <script type="text/javascript" src="js/overlib_mini.js"></script>
-  <div id="container">
+</head>
+<body>

 <?php

 if (!$vars['bare'] == "yes") {

-  include("includes/".$config['web_header']);
-
-  if ($_SESSION['authenticated']) { include("includes/print-menubar.php"); } else { echo('<hr color="#444444" />'); }
+  if ($_SESSION['authenticated']) {
+    include("includes/print-menubar.php");
+  } else {
+    echo('<hr color="#444444" />');
+  }

 }

 ?>
-    <div class="clearer"></div>
-    <div class="content-mat">
-      <div id="content" style="min-height:650px; width:auto; display:block;">
-        <div style="clear:both; height:6px; display:block;"></div>
+<br />
+<div class="container">
+<div class="row">
+  <div class="col-md-12">
+&nbsp;<br /><br />
+  </div>
+</div>
+<div class="row">
+            <div class="col-md-12">
 <?php

 // To help debug the new URLs :)
@@ -263,17 +282,11 @@ if ($_SESSION['authenticated'])
 }
 ?>
        </div>
-      <div class="clearer"></div>
  </div>
 <?php
 $runtime_end = utime(); $runtime = $runtime_end - $runtime_start;
 $gentime = substr($runtime, 0, 5);

-echo('<br /> <br />  <div id="footer">' . (isset($config['footer']) ? $config['footer'] : ''));
-echo('<br />Powered by <a href="' . $config['project_url'] . '" target="_blank">' . $config['project_name_version'].'</a>. ');
-echo($config['project_name'].' is <a href="http://www.gnu.org/philosophy/free-sw.html">Free Software</a>, released under the <a href="http://www.gnu.org/copyleft/gpl.html">GNU GPLv3</a>.<br/>');
-echo('Copyright &copy; 2006-2012 by Adam Armstrong. Copyright &copy; 2013-'.date("Y").' by the '.$config['project_name'].' Contributors.');
-
 # FIXME - move this
 if ($config['page_gen'])
 {
@@ -292,8 +305,6 @@ if ($config['page_gen'])
    echo('<br />Generated in ' . $gentime . ' seconds.');
 }
 ?>
-      </div>
-    </div>
    <script class="content_tooltips" type="text/javascript">
 $(document).ready(function() { $('#content a[title]').qtip({ content: { text: false }, style: 'light' }); });

@@ -320,6 +331,19 @@ if (is_array($pagetitle))
  echo("<script type=\"text/javascript\">\ndocument.title = '$title';\n</script>");
 }
 ?>
-
+        <footer>
+          <div class="container">
+          <div class="row">
+            <div class="col-md-12 text-center">
+<?php
+echo('<br /> <br />  ' . (isset($config['footer']) ? $config['footer'] : ''));
+echo('<br />Powered by <a href="' . $config['project_url'] . '" target="_blank">' . $config['project_name_version'].'</a>. ');
+echo($config['project_name'].' is <a href="http://www.gnu.org/philosophy/free-sw.html">Free Software</a>, released under the <a href="http://www.gnu.org/copyleft/gpl.html">GNU GPLv3</a>.<br/>');
+echo('Copyright &copy; 2006-2012 by Adam Armstrong. Copyright &copy; 2013-'.date("Y").' by the '.$config['project_name'].' Contributors.');
+?>
+            </div>
+          </div>
+          </div>
+        </footer>
  </body>
 </html>
--- a/html/js/bootstrap-hover-dropdown.min.js
+++ b/html/js/bootstrap-hover-dropdown.min.js
@@ -0,0 +1,13 @@
+/*
+ * Project: Bootstrap Hover Dropdown
+ * Author: Cameron Spear
+ * Contributors: Mattia Larentis
+ *
+ * Dependencies: Bootstrap's Dropdown plugin, jQuery
+ *
+ * A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience.
+ *
+ * License: MIT
+ *
+ * http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/
+ */(function(e,t,n){if("ontouchstart"in document)return;var r=e();e.fn.dropdownHover=function(n){r=r.add(this.parent());return this.each(function(){var i=e(this),s=i.parent(),o={delay:500,instantlyCloseOthers:!0},u={delay:e(this).data("delay"),instantlyCloseOthers:e(this).data("close-others")},a=e.extend(!0,{},o,n,u),f;s.hover(function(n){if(!s.hasClass("open")&&!i.is(n.target))return!0;a.instantlyCloseOthers===!0&&r.removeClass("open");t.clearTimeout(f);s.addClass("open");s.trigger(e.Event("show.bs.dropdown"))},function(){f=t.setTimeout(function(){s.removeClass("open");s.trigger("hide.bs.dropdown")},a.delay)});i.hover(function(){a.instantlyCloseOthers===!0&&r.removeClass("open");t.clearTimeout(f);s.addClass("open");s.trigger(e.Event("show.bs.dropdown"))});s.find(".dropdown-submenu").each(function(){var n=e(this),r;n.hover(function(){t.clearTimeout(r);n.children(".dropdown-menu").show();n.siblings().children(".dropdown-menu").hide()},function(){var e=n.children(".dropdown-menu");r=t.setTimeout(function(){e.hide()},a.delay)})})})};e(document).ready(function(){e('[data-hover="dropdown"]').dropdownHover()})})(jQuery,this);
--- a/html/js/bootstrap.js
+++ b/html/js/bootstrap.js
--- a/html/js/bootstrap.min.js
+++ b/html/js/bootstrap.min.js
--- a/html/js/hogan-2.0.0.js
+++ b/html/js/hogan-2.0.0.js
@@ -0,0 +1,576 @@
+/*
+ *  Copyright 2011 Twitter, Inc.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+
+
+var Hogan = {};
+
+(function (Hogan, useArrayBuffer) {
+  Hogan.Template = function (renderFunc, text, compiler, options) {
+    this.r = renderFunc || this.r;
+    this.c = compiler;
+    this.options = options;
+    this.text = text || '';
+    this.buf = (useArrayBuffer) ? [] : '';
+  }
+
+  Hogan.Template.prototype = {
+    // render: replaced by generated code.
+    r: function (context, partials, indent) { return ''; },
+
+    // variable escaping
+    v: hoganEscape,
+
+    // triple stache
+    t: coerceToString,
+
+    render: function render(context, partials, indent) {
+      return this.ri([context], partials || {}, indent);
+    },
+
+    // render internal -- a hook for overrides that catches partials too
+    ri: function (context, partials, indent) {
+      return this.r(context, partials, indent);
+    },
+
+    // tries to find a partial in the curent scope and render it
+    rp: function(name, context, partials, indent) {
+      var partial = partials[name];
+
+      if (!partial) {
+        return '';
+      }
+
+      if (this.c && typeof partial == 'string') {
+        partial = this.c.compile(partial, this.options);
+      }
+
+      return partial.ri(context, partials, indent);
+    },
+
+    // render a section
+    rs: function(context, partials, section) {
+      var tail = context[context.length - 1];
+
+      if (!isArray(tail)) {
+        section(context, partials, this);
+        return;
+      }
+
+      for (var i = 0; i < tail.length; i++) {
+        context.push(tail[i]);
+        section(context, partials, this);
+        context.pop();
+      }
+    },
+
+    // maybe start a section
+    s: function(val, ctx, partials, inverted, start, end, tags) {
+      var pass;
+
+      if (isArray(val) && val.length === 0) {
+        return false;
+      }
+
+      if (typeof val == 'function') {
+        val = this.ls(val, ctx, partials, inverted, start, end, tags);
+      }
+
+      pass = (val === '') || !!val;
+
+      if (!inverted && pass && ctx) {
+        ctx.push((typeof val == 'object') ? val : ctx[ctx.length - 1]);
+      }
+
+      return pass;
+    },
+
+    // find values with dotted names
+    d: function(key, ctx, partials, returnFound) {
+      var names = key.split('.'),
+          val = this.f(names[0], ctx, partials, returnFound),
+          cx = null;
+
+      if (key === '.' && isArray(ctx[ctx.length - 2])) {
+        return ctx[ctx.length - 1];
+      }
+
+      for (var i = 1; i < names.length; i++) {
+        if (val && typeof val == 'object' && names[i] in val) {
+          cx = val;
+          val = val[names[i]];
+        } else {
+          val = '';
+        }
+      }
+
+      if (returnFound && !val) {
+        return false;
+      }
+
+      if (!returnFound && typeof val == 'function') {
+        ctx.push(cx);
+        val = this.lv(val, ctx, partials);
+        ctx.pop();
+      }
+
+      return val;
+    },
+
+    // find values with normal names
+    f: function(key, ctx, partials, returnFound) {
+      var val = false,
+          v = null,
+          found = false;
+
+      for (var i = ctx.length - 1; i >= 0; i--) {
+        v = ctx[i];
+        if (v && typeof v == 'object' && key in v) {
+          val = v[key];
+          found = true;
+          break;
+        }
+      }
+
+      if (!found) {
+        return (returnFound) ? false : "";
+      }
+
+      if (!returnFound && typeof val == 'function') {
+        val = this.lv(val, ctx, partials);
+      }
+
+      return val;
+    },
+
+    // higher order templates
+    ho: function(val, cx, partials, text, tags) {
+      var compiler = this.c;
+      var options = this.options;
+      options.delimiters = tags;
+      var text = val.call(cx, text);
+      text = (text == null) ? String(text) : text.toString();
+      this.b(compiler.compile(text, options).render(cx, partials));
+      return false;
+    },
+
+    // template result buffering
+    b: (useArrayBuffer) ? function(s) { this.buf.push(s); } :
+                          function(s) { this.buf += s; },
+    fl: (useArrayBuffer) ? function() { var r = this.buf.join(''); this.buf = []; return r; } :
+                           function() { var r = this.buf; this.buf = ''; return r; },
+
+    // lambda replace section
+    ls: function(val, ctx, partials, inverted, start, end, tags) {
+      var cx = ctx[ctx.length - 1],
+          t = null;
+
+      if (!inverted && this.c && val.length > 0) {
+        return this.ho(val, cx, partials, this.text.substring(start, end), tags);
+      }
+
+      t = val.call(cx);
+
+      if (typeof t == 'function') {
+        if (inverted) {
+          return true;
+        } else if (this.c) {
+          return this.ho(t, cx, partials, this.text.substring(start, end), tags);
+        }
+      }
+
+      return t;
+    },
+
+    // lambda replace variable
+    lv: function(val, ctx, partials) {
+      var cx = ctx[ctx.length - 1];
+      var result = val.call(cx);
+
+      if (typeof result == 'function') {
+        result = coerceToString(result.call(cx));
+        if (this.c && ~result.indexOf("{\u007B")) {
+          return this.c.compile(result, this.options).render(cx, partials);
+        }
+      }
+
+      return coerceToString(result);
+    }
+
+  };
+
+  var rAmp = /&/g,
+      rLt = /</g,
+      rGt = />/g,
+      rApos =/\'/g,
+      rQuot = /\"/g,
+      hChars =/[&<>\"\']/;
+
+
+  function coerceToString(val) {
+    return String((val === null || val === undefined) ? '' : val);
+  }
+
+  function hoganEscape(str) {
+    str = coerceToString(str);
+    return hChars.test(str) ?
+      str
+        .replace(rAmp,'&amp;')
+        .replace(rLt,'&lt;')
+        .replace(rGt,'&gt;')
+        .replace(rApos,'&#39;')
+        .replace(rQuot, '&quot;') :
+      str;
+  }
+
+  var isArray = Array.isArray || function(a) {
+    return Object.prototype.toString.call(a) === '[object Array]';
+  };
+
+})(typeof exports !== 'undefined' ? exports : Hogan);
+
+
+
+
+(function (Hogan) {
+  // Setup regex  assignments
+  // remove whitespace according to Mustache spec
+  var rIsWhitespace = /\S/,
+      rQuot = /\"/g,
+      rNewline =  /\n/g,
+      rCr = /\r/g,
+      rSlash = /\\/g,
+      tagTypes = {
+        '#': 1, '^': 2, '/': 3,  '!': 4, '>': 5,
+        '<': 6, '=': 7, '_v': 8, '{': 9, '&': 10
+      };
+
+  Hogan.scan = function scan(text, delimiters) {
+    var len = text.length,
+        IN_TEXT = 0,
+        IN_TAG_TYPE = 1,
+        IN_TAG = 2,
+        state = IN_TEXT,
+        tagType = null,
+        tag = null,
+        buf = '',
+        tokens = [],
+        seenTag = false,
+        i = 0,
+        lineStart = 0,
+        otag = '{{',
+        ctag = '}}';
+
+    function addBuf() {
+      if (buf.length > 0) {
+        tokens.push(new String(buf));
+        buf = '';
+      }
+    }
+
+    function lineIsWhitespace() {
+      var isAllWhitespace = true;
+      for (var j = lineStart; j < tokens.length; j++) {
+        isAllWhitespace =
+          (tokens[j].tag && tagTypes[tokens[j].tag] < tagTypes['_v']) ||
+          (!tokens[j].tag && tokens[j].match(rIsWhitespace) === null);
+        if (!isAllWhitespace) {
+          return false;
+        }
+      }
+
+      return isAllWhitespace;
+    }
+
+    function filterLine(haveSeenTag, noNewLine) {
+      addBuf();
+
+      if (haveSeenTag && lineIsWhitespace()) {
+        for (var j = lineStart, next; j < tokens.length; j++) {
+          if (!tokens[j].tag) {
+            if ((next = tokens[j+1]) && next.tag == '>') {
+              // set indent to token value
+              next.indent = tokens[j].toString()
+            }
+            tokens.splice(j, 1);
+          }
+        }
+      } else if (!noNewLine) {
+        tokens.push({tag:'\n'});
+      }
+
+      seenTag = false;
+      lineStart = tokens.length;
+    }
+
+    function changeDelimiters(text, index) {
+      var close = '=' + ctag,
+          closeIndex = text.indexOf(close, index),
+          delimiters = trim(
+            text.substring(text.indexOf('=', index) + 1, closeIndex)
+          ).split(' ');
+
+      otag = delimiters[0];
+      ctag = delimiters[1];
+
+      return closeIndex + close.length - 1;
+    }
+
+    if (delimiters) {
+      delimiters = delimiters.split(' ');
+      otag = delimiters[0];
+      ctag = delimiters[1];
+    }
+
+    for (i = 0; i < len; i++) {
+      if (state == IN_TEXT) {
+        if (tagChange(otag, text, i)) {
+          --i;
+          addBuf();
+          state = IN_TAG_TYPE;
+        } else {
+          if (text.charAt(i) == '\n') {
+            filterLine(seenTag);
+          } else {
+            buf += text.charAt(i);
+          }
+        }
+      } else if (state == IN_TAG_TYPE) {
+        i += otag.length - 1;
+        tag = tagTypes[text.charAt(i + 1)];
+        tagType = tag ? text.charAt(i + 1) : '_v';
+        if (tagType == '=') {
+          i = changeDelimiters(text, i);
+          state = IN_TEXT;
+        } else {
+          if (tag) {
+            i++;
+          }
+          state = IN_TAG;
+        }
+        seenTag = i;
+      } else {
+        if (tagChange(ctag, text, i)) {
+          tokens.push({tag: tagType, n: trim(buf), otag: otag, ctag: ctag,
+                       i: (tagType == '/') ? seenTag - ctag.length : i + otag.length});
+          buf = '';
+          i += ctag.length - 1;
+          state = IN_TEXT;
+          if (tagType == '{') {
+            if (ctag == '}}') {
+              i++;
+            } else {
+              cleanTripleStache(tokens[tokens.length - 1]);
+            }
+          }
+        } else {
+          buf += text.charAt(i);
+        }
+      }
+    }
+
+    filterLine(seenTag, true);
+
+    return tokens;
+  }
+
+  function cleanTripleStache(token) {
+    if (token.n.substr(token.n.length - 1) === '}') {
+      token.n = token.n.substring(0, token.n.length - 1);
+    }
+  }
+
+  function trim(s) {
+    if (s.trim) {
+      return s.trim();
+    }
+
+    return s.replace(/^\s*|\s*$/g, '');
+  }
+
+  function tagChange(tag, text, index) {
+    if (text.charAt(index) != tag.charAt(0)) {
+      return false;
+    }
+
+    for (var i = 1, l = tag.length; i < l; i++) {
+      if (text.charAt(index + i) != tag.charAt(i)) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  function buildTree(tokens, kind, stack, customTags) {
+    var instructions = [],
+        opener = null,
+        token = null;
+
+    while (tokens.length > 0) {
+      token = tokens.shift();
+      if (token.tag == '#' || token.tag == '^' || isOpener(token, customTags)) {
+        stack.push(token);
+        token.nodes = buildTree(tokens, token.tag, stack, customTags);
+        instructions.push(token);
+      } else if (token.tag == '/') {
+        if (stack.length === 0) {
+          throw new Error('Closing tag without opener: /' + token.n);
+        }
+        opener = stack.pop();
+        if (token.n != opener.n && !isCloser(token.n, opener.n, customTags)) {
+          throw new Error('Nesting error: ' + opener.n + ' vs. ' + token.n);
+        }
+        opener.end = token.i;
+        return instructions;
+      } else {
+        instructions.push(token);
+      }
+    }
+
+    if (stack.length > 0) {
+      throw new Error('missing closing tag: ' + stack.pop().n);
+    }
+
+    return instructions;
+  }
+
+  function isOpener(token, tags) {
+    for (var i = 0, l = tags.length; i < l; i++) {
+      if (tags[i].o == token.n) {
+        token.tag = '#';
+        return true;
+      }
+    }
+  }
+
+  function isCloser(close, open, tags) {
+    for (var i = 0, l = tags.length; i < l; i++) {
+      if (tags[i].c == close && tags[i].o == open) {
+        return true;
+      }
+    }
+  }
+
+  Hogan.generate = function (tree, text, options) {
+    var code = 'var _=this;_.b(i=i||"");' + walk(tree) + 'return _.fl();';
+    if (options.asString) {
+      return 'function(c,p,i){' + code + ';}';
+    }
+
+    return new Hogan.Template(new Function('c', 'p', 'i', code), text, Hogan, options);
+  }
+
+  function esc(s) {
+    return s.replace(rSlash, '\\\\')
+            .replace(rQuot, '\\\"')
+            .replace(rNewline, '\\n')
+            .replace(rCr, '\\r');
+  }
+
+  function chooseMethod(s) {
+    return (~s.indexOf('.')) ? 'd' : 'f';
+  }
+
+  function walk(tree) {
+    var code = '';
+    for (var i = 0, l = tree.length; i < l; i++) {
+      var tag = tree[i].tag;
+      if (tag == '#') {
+        code += section(tree[i].nodes, tree[i].n, chooseMethod(tree[i].n),
+                        tree[i].i, tree[i].end, tree[i].otag + " " + tree[i].ctag);
+      } else if (tag == '^') {
+        code += invertedSection(tree[i].nodes, tree[i].n,
+                                chooseMethod(tree[i].n));
+      } else if (tag == '<' || tag == '>') {
+        code += partial(tree[i]);
+      } else if (tag == '{' || tag == '&') {
+        code += tripleStache(tree[i].n, chooseMethod(tree[i].n));
+      } else if (tag == '\n') {
+        code += text('"\\n"' + (tree.length-1 == i ? '' : ' + i'));
+      } else if (tag == '_v') {
+        code += variable(tree[i].n, chooseMethod(tree[i].n));
+      } else if (tag === undefined) {
+        code += text('"' + esc(tree[i]) + '"');
+      }
+    }
+    return code;
+  }
+
+  function section(nodes, id, method, start, end, tags) {
+    return 'if(_.s(_.' + method + '("' + esc(id) + '",c,p,1),' +
+           'c,p,0,' + start + ',' + end + ',"' + tags + '")){' +
+           '_.rs(c,p,' +
+           'function(c,p,_){' +
+           walk(nodes) +
+           '});c.pop();}';
+  }
+
+  function invertedSection(nodes, id, method) {
+    return 'if(!_.s(_.' + method + '("' + esc(id) + '",c,p,1),c,p,1,0,0,"")){' +
+           walk(nodes) +
+           '};';
+  }
+
+  function partial(tok) {
+    return '_.b(_.rp("' +  esc(tok.n) + '",c,p,"' + (tok.indent || '') + '"));';
+  }
+
+  function tripleStache(id, method) {
+    return '_.b(_.t(_.' + method + '("' + esc(id) + '",c,p,0)));';
+  }
+
+  function variable(id, method) {
+    return '_.b(_.v(_.' + method + '("' + esc(id) + '",c,p,0)));';
+  }
+
+  function text(id) {
+    return '_.b(' + id + ');';
+  }
+
+  Hogan.parse = function(tokens, text, options) {
+    options = options || {};
+    return buildTree(tokens, '', [], options.sectionTags || []);
+  },
+
+  Hogan.cache = {};
+
+  Hogan.compile = function(text, options) {
+    // options
+    //
+    // asString: false (default)
+    //
+    // sectionTags: [{o: '_foo', c: 'foo'}]
+    // An array of object with o and c fields that indicate names for custom
+    // section tags. The example above allows parsing of {{_foo}}{{/foo}}.
+    //
+    // delimiters: A string that overrides the default delimiters.
+    // Example: "<% %>"
+    //
+    options = options || {};
+
+    var key = text + '||' + !!options.asString;
+
+    var t = this.cache[key];
+
+    if (t) {
+      return t;
+    }
+
+    t = this.generate(this.parse(this.scan(text, options.delimiters), text, options), text, options);
+    return this.cache[key] = t;
+  };
+})(typeof exports !== 'undefined' ? exports : Hogan);
+
--- a/html/js/jqplot/excanvas.js
+++ b/html/js/jqplot/excanvas.js
@@ -561,6 +561,9 @@ if (!document.createElement('canvas').getContext) {
    // trial and error to get the same size as non VML text.
    computedStyle.size *= 0.981;

+    // Fix for VML handling of bare font family names.  Add a '' around font family names.
+    computedStyle.family =  "'" + computedStyle.family.replace(/(\'|\")/g,'').replace(/\s*,\s*/g, "', '") + "'";
+
    return computedStyle;
  }

@@ -1228,8 +1231,7 @@ if (!document.createElement('canvas').getContext) {
        offset = {x: 0, y: 0},
        lineStr = [];

-    var fontStyle = getComputedStyle(processFontStyle(this.font),
-                                     this.element_);
+    var fontStyle = getComputedStyle(processFontStyle(this.font), this.element_);

    var fontStyleString = buildStyle(fontStyle);

@@ -1295,7 +1297,8 @@ if (!document.createElement('canvas').getContext) {
    var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
                m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';

-    var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
+    var skewOffset = mr(d.x / Z + 1 - m[0][0]) + ',' + mr(d.y / Z - 2 * m[1][0]);
+

    lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ',
                 ' offset="', skewOffset, '" origin="', left ,' 0" />',
@@ -1372,7 +1375,7 @@ if (!document.createElement('canvas').getContext) {
      case null:
      case '':
        this.repetition_ = 'repeat';
-        break
+        break;
      case 'repeat-x':
      case 'repeat-y':
      case 'no-repeat':
@@ -1429,6 +1432,7 @@ if (!document.createElement('canvas').getContext) {
  CanvasGradient = CanvasGradient_;
  CanvasPattern = CanvasPattern_;
  DOMException = DOMException_;
+  G_vmlCanvasManager._version = 888;
 })();

 } // if
--- a/html/js/jqplot/jquery.jqplot.min.css
+++ b/html/js/jqplot/jquery.jqplot.min.css
@@ -1 +1 @@
-.jqplot-target{position:relative;color:#666;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-size:1em;}.jqplot-axis{font-size:.75em;}.jqplot-xaxis{margin-top:10px;}.jqplot-x2axis{margin-bottom:10px;}.jqplot-yaxis{margin-right:10px;}.jqplot-y2axis,.jqplot-y3axis,.jqplot-y4axis,.jqplot-y5axis,.jqplot-y6axis,.jqplot-y7axis,.jqplot-y8axis,.jqplot-y9axis{margin-left:10px;margin-right:10px;}.jqplot-axis-tick,.jqplot-xaxis-tick,.jqplot-yaxis-tick,.jqplot-x2axis-tick,.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick{position:absolute;}.jqplot-xaxis-tick{top:0;left:15px;vertical-align:top;}.jqplot-x2axis-tick{bottom:0;left:15px;vertical-align:bottom;}.jqplot-yaxis-tick{right:0;top:15px;text-align:right;}.jqplot-yaxis-tick.jqplot-breakTick{right:-20px;margin-right:0;padding:1px 5px 1px 5px;z-index:2;font-size:1.5em;}.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick{left:0;top:15px;text-align:left;}.jqplot-meterGauge-tick{font-size:.75em;color:#999;}.jqplot-meterGauge-label{font-size:1em;color:#999;}.jqplot-xaxis-label{margin-top:10px;font-size:11pt;position:absolute;}.jqplot-x2axis-label{margin-bottom:10px;font-size:11pt;position:absolute;}.jqplot-yaxis-label{margin-right:10px;font-size:11pt;position:absolute;}.jqplot-y2axis-label,.jqplot-y3axis-label,.jqplot-y4axis-label,.jqplot-y5axis-label,.jqplot-y6axis-label,.jqplot-y7axis-label,.jqplot-y8axis-label,.jqplot-y9axis-label{font-size:11pt;position:absolute;}table.jqplot-table-legend{margin-top:12px;margin-bottom:12px;margin-left:12px;margin-right:12px;}table.jqplot-table-legend,table.jqplot-cursor-legend{background-color:rgba(255,255,255,0.6);border:1px solid #ccc;position:absolute;font-size:.75em;}td.jqplot-table-legend{vertical-align:middle;}td.jqplot-seriesToggle:hover,td.jqplot-seriesToggle:active{cursor:pointer;}td.jqplot-table-legend>div{border:1px solid #ccc;padding:1px;}div.jqplot-table-legend-swatch{width:0;height:0;border-top-width:5px;border-bottom-width:5px;border-left-width:6px;border-right-width:6px;border-top-style:solid;border-bottom-style:solid;border-left-style:solid;border-right-style:solid;}.jqplot-title{top:0;left:0;padding-bottom:.5em;font-size:1.2em;}table.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em;}.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,0.5);padding:1px;}.jqplot-highlighter-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,0.5);padding:1px;}.jqplot-point-label{font-size:.75em;z-index:2;}td.jqplot-cursor-legend-swatch{vertical-align:middle;text-align:center;}div.jqplot-cursor-legend-swatch{width:1.2em;height:.7em;}.jqplot-error{text-align:center;}.jqplot-error-message{position:relative;top:46%;display:inline-block;}div.jqplot-bubble-label{font-size:.8em;padding-left:2px;padding-right:2px;color:rgb(20%,20%,20%);}div.jqplot-bubble-label.jqplot-bubble-label-highlight{background:rgba(90%,90%,90%,0.7);}div.jqplot-noData-container{text-align:center;background-color:rgba(96%,96%,96%,0.3);}
+.jqplot-target{position:relative;color:#666;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-size:1em}.jqplot-axis{font-size:.75em}.jqplot-xaxis{margin-top:10px}.jqplot-x2axis{margin-bottom:10px}.jqplot-yaxis{margin-right:10px}.jqplot-y2axis,.jqplot-y3axis,.jqplot-y4axis,.jqplot-y5axis,.jqplot-y6axis,.jqplot-y7axis,.jqplot-y8axis,.jqplot-y9axis,.jqplot-yMidAxis{margin-left:10px;margin-right:10px}.jqplot-axis-tick,.jqplot-xaxis-tick,.jqplot-yaxis-tick,.jqplot-x2axis-tick,.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick,.jqplot-yMidAxis-tick{position:absolute;white-space:pre}.jqplot-xaxis-tick{top:0;left:15px;vertical-align:top}.jqplot-x2axis-tick{bottom:0;left:15px;vertical-align:bottom}.jqplot-yaxis-tick{right:0;top:15px;text-align:right}.jqplot-yaxis-tick.jqplot-breakTick{right:-20px;margin-right:0;padding:1px 5px 1px 5px;z-index:2;font-size:1.5em}.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick{left:0;top:15px;text-align:left}.jqplot-yMidAxis-tick{text-align:center;white-space:nowrap}.jqplot-xaxis-label{margin-top:10px;font-size:11pt;position:absolute}.jqplot-x2axis-label{margin-bottom:10px;font-size:11pt;position:absolute}.jqplot-yaxis-label{margin-right:10px;font-size:11pt;position:absolute}.jqplot-yMidAxis-label{font-size:11pt;position:absolute}.jqplot-y2axis-label,.jqplot-y3axis-label,.jqplot-y4axis-label,.jqplot-y5axis-label,.jqplot-y6axis-label,.jqplot-y7axis-label,.jqplot-y8axis-label,.jqplot-y9axis-label{font-size:11pt;margin-left:10px;position:absolute}.jqplot-meterGauge-tick{font-size:.75em;color:#999}.jqplot-meterGauge-label{font-size:1em;color:#999}table.jqplot-table-legend{margin-top:12px;margin-bottom:12px;margin-left:12px;margin-right:12px}table.jqplot-table-legend,table.jqplot-cursor-legend{background-color:rgba(255,255,255,0.6);border:1px solid #ccc;position:absolute;font-size:.75em}td.jqplot-table-legend{vertical-align:middle}td.jqplot-seriesToggle:hover,td.jqplot-seriesToggle:active{cursor:pointer}.jqplot-table-legend .jqplot-series-hidden{text-decoration:line-through}div.jqplot-table-legend-swatch-outline{border:1px solid #ccc;padding:1px}div.jqplot-table-legend-swatch{width:0;height:0;border-top-width:5px;border-bottom-width:5px;border-left-width:6px;border-right-width:6px;border-top-style:solid;border-bottom-style:solid;border-left-style:solid;border-right-style:solid}.jqplot-title{top:0;left:0;padding-bottom:.5em;font-size:1.2em}table.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em}.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,0.5);padding:1px}.jqplot-highlighter-tooltip,.jqplot-canvasOverlay-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,0.5);padding:1px}.jqplot-point-label{font-size:.75em;z-index:2}td.jqplot-cursor-legend-swatch{vertical-align:middle;text-align:center}div.jqplot-cursor-legend-swatch{width:1.2em;height:.7em}.jqplot-error{text-align:center}.jqplot-error-message{position:relative;top:46%;display:inline-block}div.jqplot-bubble-label{font-size:.8em;padding-left:2px;padding-right:2px;color:rgb(20%,20%,20%)}div.jqplot-bubble-label.jqplot-bubble-label-highlight{background:rgba(90%,90%,90%,0.7)}div.jqplot-noData-container{text-align:center;background-color:rgba(96%,96%,96%,0.3)}
--- a/html/js/jqplot/jquery.jqplot.min.js
+++ b/html/js/jqplot/jquery.jqplot.min.js
--- a/html/js/jqplot/plugins/jqplot.donutRenderer.min.js
+++ b/html/js/jqplot/plugins/jqplot.donutRenderer.min.js
--- a/html/js/jqplot/plugins/jqplot.pieRenderer.min.js
+++ b/html/js/jqplot/plugins/jqplot.pieRenderer.min.js
--- a/html/js/jquery.cycle2.min.js
+++ b/html/js/jquery.cycle2.min.js
--- a/html/js/jquery.cycle2.scrollVert.min.js
+++ b/html/js/jquery.cycle2.scrollVert.min.js
@@ -0,0 +1,2 @@
+/*! Plugin for Cycle2; Copyright (c) 2012 M. Alsup; ver: 20121120 */
+(function(a){"use strict",a.fn.cycle.transitions.scrollVert={before:function(a,b,c,d){a.API.stackSlides(a,b,c,d);var e=a.container.css("overflow","hidden").height();a.cssBefore={top:d?-e:e,left:0,opacity:1,display:"block"},a.animIn={top:0},a.animOut={top:d?e:-e}}}})(jQuery);
--- a/html/js/jquery.min.js
+++ b/html/js/jquery.min.js
--- a/html/js/mktree.js
+++ b/html/js/mktree.js
@@ -1,177 +1,13 @@
-// ===================================================================
-// Author: Matt Kruse <matt@mattkruse.com>
-// WWW: http://www.mattkruse.com/
-//
-// NOTICE: You may use this code for any purpose, commercial or
-// private, without any further permission from the author. You may
-// remove this notice from your final code if you wish, however it is
-// appreciated by the author if at least my web site address is kept.
-//
-// You may *NOT* re-distribute this code in any way except through its
-// use. That means, you can include it in your product, or your web
-// site, or any other form where the code is actually being used. You
-// may not put the plain javascript up on your site for download or
-// include it in your javascript libraries for download. 
-// If you wish to share this code with others, please just point them
-// to the URL instead.
-// Please DO NOT link directly to my .js files from your site. Copy
-// the files to your server and use them there. Thank you.
-// ===================================================================
-
-// HISTORY
-// ------------------------------------------------------------------
-// December 9, 2003: Added script to the Javascript Toolbox
-// December 10, 2003: Added the preProcessTrees variable to allow user
-//      to turn off automatic conversion of UL's onLoad
-// March 1, 2004: Changed it so if a <li> has a class already attached
-//      to it, that class won't be erased when initialized. This allows
-//      you to set the state of the tree when painting the page simply
-//      by setting some <li>'s class name as being "liOpen" (see example)
-/*
-This code is inspired by and extended from Stuart Langridge's aqlist code:
-		http://www.kryogenix.org/code/browser/aqlists/
-		Stuart Langridge, November 2002
-		sil@kryogenix.org
-		Inspired by Aaron's labels.js (http://youngpup.net/demos/labels/) 
-		and Dave Lindquist's menuDropDown.js (http://www.gazingus.org/dhtml/?id=109)
-*/
-
-// Automatically attach a listener to the window onload, to convert the trees
-addEvent(window,"load",convertTrees);
-
-// Utility function to add an event listener
-function addEvent(o,e,f){
-	if (o.addEventListener){ o.addEventListener(e,f,true); return true; }
-	else if (o.attachEvent){ return o.attachEvent("on"+e,f); }
-	else { return false; }
-}
-
-// utility function to set a global variable if it is not already set
-function setDefault(name,val) {
-	if (typeof(window[name])=="undefined" || window[name]==null) {
-		window[name]=val;
-	}
-}
-
-// Full expands a tree with a given ID
-function expandTree(treeId) {
-	var ul = document.getElementById(treeId);
-	if (ul == null) { return false; }
-	expandCollapseList(ul,nodeOpenClass);
-}
-
-// Fully collapses a tree with a given ID
-function collapseTree(treeId) {
-	var ul = document.getElementById(treeId);
-	if (ul == null) { return false; }
-	expandCollapseList(ul,nodeClosedClass);
-}
-
-// Expands enough nodes to expose an LI with a given ID
-function expandToItem(treeId,itemId) {
-	var ul = document.getElementById(treeId);
-	if (ul == null) { return false; }
-	var ret = expandCollapseList(ul,nodeOpenClass,itemId);
-	if (ret) {
-		var o = document.getElementById(itemId);
-		if (o.scrollIntoView) {
-			o.scrollIntoView(false);
-		}
-	}
-}
-
-// Performs 3 functions:
-// a) Expand all nodes
-// b) Collapse all nodes
-// c) Expand all nodes to reach a certain ID
-function expandCollapseList(ul,cName,itemId) {
-	if (!ul.childNodes || ul.childNodes.length==0) { return false; }
-	// Iterate LIs
-	for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
-		var item = ul.childNodes[itemi];
-		if (itemId!=null && item.id==itemId) { return true; }
-		if (item.nodeName == "LI") {
-			// Iterate things in this LI
-			var subLists = false;
-			for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
-				var sitem = item.childNodes[sitemi];
-				if (sitem.nodeName=="UL") {
-					subLists = true;
-					var ret = expandCollapseList(sitem,cName,itemId);
-					if (itemId!=null && ret) {
-						item.className=cName;
-						return true;
-					}
-				}
-			}
-			if (subLists && itemId==null) {
-				item.className = cName;
-			}
-		}
-	}
-}
-
-// Search the document for UL elements with the correct CLASS name, then process them
-function convertTrees() {
-	setDefault("treeClass","mktree");
-	setDefault("nodeClosedClass","liClosed");
-	setDefault("nodeOpenClass","liOpen");
-	setDefault("nodeBulletClass","liBullet");
-	setDefault("nodeLinkClass","bullet");
-	setDefault("preProcessTrees",true);
-	if (preProcessTrees) {
-		if (!document.createElement) { return; } // Without createElement, we can't do anything
-		uls = document.getElementsByTagName("ul");
-		for (var uli=0;uli<uls.length;uli++) {
-			var ul=uls[uli];
-			if (ul.nodeName=="UL" && ul.className==treeClass) {
-				processList(ul);
-			}
-		}
-	}
-}
-
-// Process a UL tag and all its children, to convert to a tree
-function processList(ul) {
-	if (!ul.childNodes || ul.childNodes.length==0) { return; }
-	// Iterate LIs
-	for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
-		var item = ul.childNodes[itemi];
-		if (item.nodeName == "LI") {
-			// Iterate things in this LI
-			var subLists = false;
-			for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
-				var sitem = item.childNodes[sitemi];
-				if (sitem.nodeName=="UL") {
-					subLists = true;
-					processList(sitem);
-				}
-			}
-			var s= document.createElement("SPAN");
-			var t= '\u00A0'; // &nbsp;
-			s.className = nodeLinkClass;
-			if (subLists) {
-				// This LI has UL's in it, so it's a +/- node
-				if (item.className==null || item.className=="") {
-					item.className = nodeClosedClass;
-				}
-				// If it's just text, make the text work as the link also
-				if (item.firstChild.nodeName=="#text") {
-					t = t+item.firstChild.nodeValue;
-					item.removeChild(item.firstChild);
-				}
-				s.onclick = function () {
-					this.parentNode.className = (this.parentNode.className==nodeOpenClass) ? nodeClosedClass : nodeOpenClass;
-					return false;
-				}
-			}
-			else {
-				// No sublists, so it's just a bullet node
-				item.className = nodeBulletClass;
-				s.onclick = function () { return false; }
-			}
-			s.appendChild(document.createTextNode(t));
-			item.insertBefore(s,item.firstChild);
-		}
-	}
-}
+/**
+ * Copyright (c)2005-2009 Matt Kruse (javascripttoolbox.com)
+ * 
+ * Dual licensed under the MIT and GPL licenses. 
+ * This basically means you can use this code however you want for
+ * free, but don't claim to have written it yourself!
+ * Donations always accepted: http://www.JavascriptToolbox.com/donate/
+ * 
+ * Please do not link to the .js files on javascripttoolbox.com from
+ * your site. Copy the files locally to your server instead.
+ * 
+ */
+eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('I(C,"1a",M);8 I(o,e,f){1(o.J){o.J(e,f,7);5 k}F 1(o.G){5 o.G("15"+e,f)}F{5 7}}8 h(A,P){1(17(C[A])=="18"||C[A]==a){C[A]=P}}8 10(j){2 3=g.B(j);1(3==a){5 7}q(3,p)}8 11(j){2 3=g.B(j);1(3==a){5 7}q(3,y)}8 13(j,b){2 3=g.B(j);1(3==a){5 7}2 z=q(3,p,b);1(z){2 o=g.B(b);1(o.K){o.K(7)}}}8 q(3,x,b){1(!3.6||3.6.i==0){5 7}r(2 c=0;c<3.6.i;c++){2 4=3.6[c];1(b!=a&&4.1i==b){5 k}1(4.n=="Y"){2 m=7;r(2 d=0;d<4.6.i;d++){2 l=4.6[d];1(l.n=="D"){m=k;2 z=q(l,x,b);1(b!=a&&z){4.9=x;5 k}}}1(m&&b==a){4.9=x}}}}8 M(){h("H","1f");h("y","1b");h("p","1c");h("S","1d");h("V","1e");h("L",k);1(L){1(!g.X){5}2 w=g.1h("3");1(w==a){5}2 O=w.i;r(2 u=0;u<O;u++){2 3=w[u];1(3.n=="D"&&3.9==H){E(3)}}}}8 W(){N.R.9=(N.R.9==p)?y:p;5 7}8 U(){5 7}8 E(3){1(!3.6||3.6.i==0){5}2 Q=3.6.i;r(2 c=0;c<Q;c++){2 4=3.6[c];1(4.n=="Y"){2 m=7;2 Z=4.6.i;r(2 d=0;d<Z;d++){2 l=4.6[d];1(l.n=="D"){m=k;E(l)}}2 s=g.X("12");2 t=\'\\1g\';s.9=V;1(m){1(4.9==a||4.9==""){4.9=y}1(4.v.n=="#1k"){t=t+4.v.1l;4.1j(4.v)}s.T=W}F{4.9=S;s.T=U}s.14(g.19(t));4.16(s,4.v)}}}',62,84,'|if|var|ul|item|return|childNodes|false|function|className|null|itemId|itemi|sitemi|||document|setDefault|length|treeId|true|sitem|subLists|nodeName||nodeOpenClass|expandCollapseList|for|||uli|firstChild|uls|cName|nodeClosedClass|ret|name|getElementById|window|UL|processList|else|attachEvent|treeClass|addEvent|addEventListener|scrollIntoView|preProcessTrees|convertTrees|this|uls_length|val|childNodesLength|parentNode|nodeBulletClass|onclick|retFalse|nodeLinkClass|treeNodeOnclick|createElement|LI|itemChildNodesLength|expandTree|collapseTree|SPAN|expandToItem|appendChild|on|insertBefore|typeof|undefined|createTextNode|load|liClosed|liOpen|liBullet|bullet|mktree|u00A0|getElementsByTagName|id|removeChild|text|nodeValue'.split('|'),0,{}))
--- a/html/js/qtip/jquery.qtip.min.js
+++ b/html/js/qtip/jquery.qtip.min.js
--- a/html/js/typeahead.min.js
+++ b/html/js/typeahead.min.js
--- a/html/pages/addhost.inc.php
+++ b/html/pages/addhost.inc.php
@@ -62,79 +62,104 @@ $pagetitle[] = "Add host";

 ?>

-<form name="form1" method="post" action="">
-  <p>Devices will be checked for Ping and SNMP reachability before being probed. Only devices with recognised OSes will be added.</p>
-
-  <div style="padding: 10px; background: #f0f0f0;">
-    <table cellpadding=2px>
-      <tr>
-        <td><strong>Hostname</strong></td>
-        <td><input type="text" name="hostname" size="32"></td>
-      </tr>
-      <tr>
-        <td><strong>SNMP Version</strong></td>
-        <td>
-          <select name="snmpver">
-            <option value="v1">v1</option>
-            <option value="v2c" selected>v2c</option>
-            <option value="v3">v3</option>
-          </select>
-          &nbsp;<strong>Port</strong> <input type="text" name="port" size="16">
-        </td>
-      </tr>
-      <tr>
-        <td colspan=2><strong>SNMPv1/2c Configuration</strong></td>
-      </tr>
-      <tr>
-        <td><strong>Community</strong></td>
-        <td><input type="text" name="community" size="32"></td>
-      </tr>
-      <tr>
-        <td colspan=2><strong>SNMPv3 Configuration</strong></td>
-      </tr>
-      <tr>
-        <td><strong>Auth Level</strong></td>
-        <td>
-          <select name="authlevel">
-            <option value="noAuthNoPriv" selected>NoAuthNoPriv</option>
-            <option value="authNoPriv">AuthNoPriv</option>
-            <option value="authPriv">AuthPriv</option>
-          </select>
-        </td>
-      </tr>
-      <tr>
-        <td><strong>Auth User Name</strong></td>
-        <td><input type="text" name="authname" size="32"></td>
-      </tr>
-      <tr>
-        <td><strong>Auth Password</strong></td>
-        <td><input type="text" name="authpass" size="32"></td>
-      </tr>
-      <tr>
-        <td><strong>Auth Algorithm</strong></td>
-        <td>
-          <select name="authalgo">
-            <option value="MD5" selected>MD5</option>
-            <option value="SHA">SHA</option>
-          </select>
-        </td>
-      </tr>
-      <tr>
-        <td><strong>Crypto Password</strong></td>
-        <td><input type="text" name="cryptopass" size="32"></td>
-      </tr>
-      <tr>
-        <td><strong>Crypto Algorithm</strong></td>
-        <td>
-          <select name="cryptoalgo">
-            <option value="AES" selected>AES</option>
-            <option value="DES">DES</option>
-          </select>
-        </td>
-      </tr>
-      <tr>
-        <td></td><td><input type="submit" class="submit" name="Submit" value="Add Host"></td>
-      </tr>
-    </table>
+<form name="form1" method="post" action="" class="form-horizontal" role="form">
+  <div class="alert alert-info">Devices will be checked for Ping and SNMP reachability before being probed. Only devices with recognised OSes will be added.</div>
+  <div class="well well-lg">
+    <div class="form-group">
+      <label for="hostname" class="col-sm-2 control-label">Hostname</label>
+      <div class="col-sm-5">
+        <input type="text" id="hostname" name="hostname" class="form-control input-sm" placeholder="Hostname">
+      </div>
+      <div class="col-sm-5">
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="snmpver" class="col-sm-2 control-label">SNMP Version</label>
+      <div class="col-sm-3">
+        <select name="snmpver" id="snmpver" class="form-control input-sm">
+          <option value="v1">v1</option>
+          <option value="v2c" selected>v2c</option>
+          <option value="v3">v3</option>
+        </select>
+      </div>
+      <div class="col-sm-2">
+        <input type="text" name="port" placeholder="port" class="form-control input-sm">
+      </div>
+      <div class="col-sm-5">
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-sm-12 alert alert-info">
+        <label class="control-label text-left input-sm">SNMPv1/2c Configuration</label>
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="community" class="col-sm-2 control-label">Community</label>
+      <div class="col-sm-5">
+        <input type="text" name="community" id="community" placeholder="Community" class="form-control input-sm">
+      </div>
+      <div class="col-sm-5">
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-sm-12 alert alert-info">
+        <label class="control-label text-left input-sm">SNMPv3 Configuration</label>
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="authlevel" class="col-sm-2 control-label">Auth Level</label>
+      <div class="col-sm-3">
+        <select name="authlevel" id="authlevel" class="form-control input-sm">
+          <option value="noAuthNoPriv" selected>NoAuthNoPriv</option>
+          <option value="authNoPriv">AuthNoPriv</option>
+          <option value="authPriv">AuthPriv</option>
+        </select>
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="authname" class="col-sm-2 control-label">Auth User Name</label>
+      <div class="col-sm-3">
+        <input type="text" name="authname" id="authname" class="form-control input-sm">
+      </div>
+      <div class="col-sm-5">
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="authpass" class="col-sm-2 control-label">Auth Password</label>
+      <div class="col-sm-3">
+        <input type="text" name="authpass" id="authpass" placeholder="AuthPass" class="form-control input-sm">
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="authalgo" class="col-sm-2 control-label">Auth Algorithm</label>
+      <div class="col-sm-3">
+        <select name="authalgo" id="authalgo" class="form-control input-sm">
+          <option value="MD5" selected>MD5</option>
+          <option value="SHA">SHA</option>
+        </select>
+      </div>
+      <div class="col-sm-5">
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="cryptopass" class="col-sm-2 control-label">Crypto Password</label>
+      <div class="col-sm-3">
+        <input type="text" name="cryptopass" id="cryptopass" placeholder="Crypto Password" class="form-control input-sm">
+      </div>
+      <div class="col-sm-5">
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="cryptoalgo" class="col-sm-2 control-label">Crypto Algorithm</label>
+      <div class="col-sm-3">
+        <select name="cryptoalgo" id="cryptoalgo" class="form-control input-sm">
+          <option value="AES" selected>AES</option>
+          <option value="DES">DES</option>
+        </select>
+      </div>
+      <div class="col-sm-5">
+      </div>
+    </div>
+    <button type="submit" class="btn btn-default input-sm" name="Submit">Add Host</button>
  </div>
 </form>
--- a/html/pages/addsrv.inc.php
+++ b/html/pages/addsrv.inc.php
@@ -46,46 +46,55 @@ else

  echo("
 <h4>Add Service</h4>
-<form id='addsrv' name='addsrv' method='post' action=''>
-  <input type=hidden name='addsrv' value='yes'>
-  <table width='200' border='0'>
-    <tr>
-      <td>
-        Device
-      </td>
-      <td>
-        <select name='device'>
+<form id='addsrv' name='addsrv' method='post' action='' class='form-horizontal' role='form'>
+  <div class='well well-lg'>
+    <div class='form-group'>
+      <input type='hidden' name='addsrv' value='yes'>
+      <label for='device' class='col-sm-2 control-label'>Device</label>
+      <div class='col-sm-5'>
+        <select name='device' class='form-control input-sm'>
          $devicesform
        </select>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        Type
-      </td>
-      <td>
-        <select name='type'>
+      </div>
+      <div class='col-sm-5'>
+      </div>
+    </div>
+    <div class='form-group'>
+      <label for='type' class='col-sm-2 control-label'>Type</label>
+      <div class='col-sm-5'>
+        <select name='type' id='type' class='form-control input-sm'>
          $servicesform
        </select>
-      </td>
-    </tr>
-    <tr>
-      <td width='300'><div align='right'>Description</div></td>
-      <td colspan='2'><textarea name='descr' cols='50'></textarea></td>
-    </tr>
-    <tr>
-      <td width='300'><div align='right'>IP Address</div></td>
-      <td colspan='2'><input name='ip'></textarea></td>
-    </tr>
-    <tr>
-      <td width='300'><div align='right'>Parameters</div></td>
-      <td colspan='2'><input name='params'></textarea></td>
-    </tr>
-   <tr>
-  </table>
-  <input type='submit' name='Submit' value='Add' />
-  <label><br />
-  </label>
+      </div>
+      <div class='col-sm-5'>
+      </div>
+    </div>
+    <div class='form-group'>
+      <label for='descr' class='col-sm-2 control-label'>Description</label>
+      <div class='col-sm-5'>
+        <textarea name='descr' id='descr' class='form-control input-sm' rows='5'></textarea>
+      </div>
+      <div class='col-sm-5'>
+      </div>
+    </div>
+    <div class='form-group'>
+      <label for='ip' class='col-sm-2 control-label'>IP Address</label>
+      <div class='col-sm-5'>
+        <input name='ip' id='ip' class='form-control input-sm' placeholder='IP Address'>
+      </div>
+      <div class='col-sm-5'>
+      </div>
+    </div>
+    <div class='form-group'>
+      <label for='params' class='col-sm-2 control-label'>Parameters</label>
+      <div class='col-sm-5'>
+        <input name='params' id='params' class='form-control input-sm'>
+      </div>
+      <div class='col-sm-5'>
+      </div>
+    </div>
+    <button type='submit' name='Submit' class='btn btn-default input-sm'>Add Service</button>
+  </div>
 </form>");

 }
--- a/html/pages/adduser.inc.php
+++ b/html/pages/adduser.inc.php
@@ -1,7 +1,5 @@
 <?php

-echo("<div style='margin: 10px;'>");
-
 if ($_SESSION['userlevel'] < '10')
 {
  include("includes/error-no-perm.inc.php");
@@ -44,23 +42,65 @@ else
      }
    }

-    echo("<form method='post' action='adduser/'> <input type='hidden' value='add' name='action'>");
-    echo("Username <input style='margin: 1px;' name='new_username'></input><br />");
+    echo("<form method='post' action='adduser/' class='form-horizontal' role='form'> <input type='hidden' value='add' name='action'>");
+    echo("
+  <div class='form-group'>
+    <label for='new_username' class='col-sm-2 control-label'>Username</label>
+    <div class='col-sm-4'>
+      <input name='new_username' class='form-control input-sm'>
+    </div>
+    <div class='col-sm-6'>
+    </div>
+  </div>");
  ?>
-  Password <input style='margin: 1px;' name='new_password' id='new_password' type=password  /><br />
+  <div class='form-group'>
+    <label for='new_password' class='col-sm-2 control-label'>Password</label>
+    <div class='col-sm-4'>
+      <input name='new_password' id='new_password' type=password class='form-control input-sm'>
+    </div>
+    <div class='col-sm-6'>
+    </div>
+  </div>
+
  <?php
    if ($_POST['action'] == "add" && !$_POST['new_password'])
    {
      echo("<span class=red>Please enter a password!</span><br />");
    }
-    echo("Realname <input style='margin: 1px;' name='new_realname'></input><br />");
-    echo("Level <select style='margin: 5px;' name='new_level'>
-          <option value='1'>Normal User</option>
-          <option value='5'>Global Read</option>
-          <option value='10'>Administrator</option>
-        </select><br />");
-    echo("<input type='checkbox' checked='checked' style='margin: 1px;' name='can_modify_passwd'></input> Allow the user to change his password.<br /><br />");
-    echo(" <input type='submit' Value='Add' >");
+
+echo("
+  <div class='form-group'>");
+    echo("<label for='new_realname' class='col-sm-2 control-label'>Realname</label>
+    <div class='col-sm-4'>
+      <input name='new_realname' class='form-control input-sm'>
+    </div>
+    <div class='col-sm-6'>
+    </div>
+  </div>");
+    echo("<div class='form-group'>
+    <label for='new_level' class='col-sm-2 control-label'>Level</label>
+    <div class='col-sm-4'>
+      <select name='new_level' class='form-control input-sm'>
+        <option value='1'>Normal User</option>
+        <option value='5'>Global Read</option>
+        <option value='10'>Administrator</option>
+      </select>
+    </div>
+    <div class='col-sm-6'>
+    </div>
+  </div>");
+    echo("<div class='form-group'>
+    <div class='col-sm-6'>
+      <div class='checkbox'>
+        <label>
+          <input type='checkbox' checked='checked' name='can_modify_passwd'> Allow the user to change his password.
+        </label>
+      </div>
+    </div>
+    <div class='col-sm-6'>
+    </div>
+  </div>");
+    echo("<button type='submit' class='btn btn-default'>Add</button>");
    echo("</form>");
  }
  else
@@ -69,6 +109,4 @@ else
  }
 }

-echo("</div>");
-
 ?>
--- a/html/pages/bill/edit.inc.php
+++ b/html/pages/bill/edit.inc.php
@@ -29,50 +29,78 @@ if ($bill_data['bill_type'] == "cdr") {

 ?>

-<form id="edit" name="edit" method="post" action="" class="form-horizontal">
+<form id="edit" name="edit" method="post" action="" class="form-horizontal" role="form">
  <input type=hidden name="action" value="update_bill">
-  <link rel="stylesheet" href="<?php echo $config["base_url"]; ?>/css/bootstrap.min.css">
  <script type="text/javascript">
    function billType() {
      $('#cdrDiv').toggle();
      $('#quotaDiv').toggle();
    }
  </script>
-  <fieldset>
-    <legend>Bill Properties</legend>
-    <div class="control-group">
-      <label class="control-label" for="bill_name"><strong>Description</strong></label>
-      <div class="controls">
-        <input class="span4" name="bill_name" value="<?php echo $bill_data["bill_name"]; ?>" />
+  <h3>Bill Properties</h3>
+  <div class="form-group">
+    <label class="col-sm-2 control-label" for="bill_name"><strong>Description</strong></label>
+    <div class="col-sm-4">
+      <input class="form-control input-sm" name="bill_name" value="<?php echo $bill_data["bill_name"]; ?>" />
+    </div>
+    <div class="col-sm-6">
+    </div>
+  </div>
+  <div class="form-group">
+    <label class="col-sm-2 control-label" for="bill_type"><strong>Billing Type</strong></label>
+    <div class="col-sm-10">
+      <div class="radio">
+        <label>
+          <input type="radio" name="bill_type" value="cdr" onchange="javascript: billType();" <?php if ($bill_data['bill_type'] == "cdr") { echo('checked '); } ?>/> CDR 95th
+        </label>
+      </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name="bill_type" value="quota" onchange="javascript: billType();" <?php if ($bill_data['bill_type'] == "quota") { echo('checked '); } ?>/> Quota
+        </label>
      </div>
    </div>
-    <div class="control-group">
-      <label class="control-label" for="bill_type"><strong>Billing Type</strong></label>
-      <div class="controls">
-        <input type="radio" name="bill_type" value="cdr" onchange="javascript: billType();" <?php if ($bill_data['bill_type'] == "cdr") { echo('checked '); } ?>/> CDR 95th
-        <input type="radio" name="bill_type" value="quota" onchange="javascript: billType();" <?php if ($bill_data['bill_type'] == "quota") { echo('checked '); } ?>/> Quota
-        <div id="cdrDiv"<?php if ($bill_data['bill_type'] == "quota") { echo(' style="display: none"'); } ?>>
-          <input class="span1" type="text" name="bill_cdr" value="<?php echo $cdr['data']; ?>">
-          <select name="bill_cdr_type" style="width: 233px;">
-            <option value="Kbps"<?php echo $cdr['select_kbps']; ?>>Kilobits per second (Kbps)</option>
-            <option value="Mbps"<?php echo $cdr['select_mbps']; ?>>Megabits per second (Mbps)</option>
-            <option value="Gbps"<?php echo $cdr['select_gbps']; ?>>Gigabits per second (Gbps)</option>
-          </select>
-        </div>
-        <div id="quotaDiv"<?php if ($bill_data['bill_type'] == "cdr") { echo(' style="display: none"'); } ?>>
-          <input class="span1" type="text" name="bill_quota" value="<?php echo $quota['data']; ?>">
-          <select name="bill_quota_type" style="width: 233px;">
-            <option value="MB"<?php echo $quota['select_mb']; ?>>Megabytes (MB)</option>
-            <option value="GB"<?php echo $quota['select_gb']; ?>>Gigabytes (GB)</option>
-            <option value="TB"<?php echo $quota['select_tb']; ?>>Terabytes (TB)</option>
-          </select>
-        </div>
+  </div>
+  <div id="cdrDiv"<?php if ($bill_data['bill_type'] == "quota") { echo(' style="display: none"'); } ?>>
+    <div class="form-group">
+      <div class="col-sm-2">
+      </div>
+      <div class="col-sm-2">
+        <input class="form-control input-sm" type="text" name="bill_cdr" value="<?php echo $cdr['data']; ?>">
+      </div>
+      <div class="col-sm-3">
+        <select name="bill_cdr_type" class="form-control input-sm">
+          <option value="Kbps"<?php echo $cdr['select_kbps']; ?>>Kilobits per second (Kbps)</option>
+          <option value="Mbps"<?php echo $cdr['select_mbps']; ?>>Megabits per second (Mbps)</option>
+          <option value="Gbps"<?php echo $cdr['select_gbps']; ?>>Gigabits per second (Gbps)</option>
+        </select>
+      </div>
+      <div class="col-sm-5">
      </div>
    </div>
-    <div class="control-group">
-      <label class="control-label" for="bill_day"><strong>Billing Day</strong></label>
-      <div class="controls">
-        <select name="bill_day" style="width: 60px;">
+  </div>
+  <div id="quotaDiv"<?php if ($bill_data['bill_type'] == "cdr") { echo(' style="display: none"'); } ?>>
+    <div class="form-group">
+      <div class="col-sm-2">
+      </div>
+      <div class="col-sm-2">
+        <input class="form-control input-sm" type="text" name="bill_quota" value="<?php echo $quota['data']; ?>">
+      </div>
+      <div class="col-sm-2">
+        <select name="bill_quota_type" class="form-control input-sm">
+          <option value="MB"<?php echo $quota['select_mb']; ?>>Megabytes (MB)</option>
+          <option value="GB"<?php echo $quota['select_gb']; ?>>Gigabytes (GB)</option>
+          <option value="TB"<?php echo $quota['select_tb']; ?>>Terabytes (TB)</option>
+        </select>
+      </div>
+      <div class="col-sm-6">
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <label class="col-sm-2 control-label" for="bill_day"><strong>Billing Day</strong></label>
+    <div class="col-sm-2">
+      <select name="bill_day" class="form-control input">
 <?php

 for ($x=1;$x<32;$x++) {
@@ -81,40 +109,38 @@ for ($x=1;$x<32;$x++) {
 }

 ?>
-        </select>
-      </div>
+      </select>
    </div>
-  </fieldset>
-  <fieldset>
-    <legend>Optional Information</legend>
-    <div class="control-group">
-      <label class="control-label" for="bill_custid"><strong>Customer&nbsp;Reference</strong></label>
-      <div class="controls">
-        <input class="span4" type="text" name="bill_custid" value="<?php echo $bill_data['bill_custid']; ?>" />
-      </div>
-    </div>
-    <div class="control-group">
-      <label class="control-label" for="bill_ref"><strong>Billing Reference</strong></label>
-      <div class="controls">
-        <input class="span4" type="text" name="bill_ref" value="<?php echo $bill_data['bill_ref']; ?>" />
-      </div>
-    </div>
-    <div class="control-group">
-      <label class="control-label" for="bill_notes"><strong>Notes</strong></label>
-      <div class="controls">
-        <input class="span4" type="textarea" name="bill_notes" value="<?php echo $bill_data['bill_notes']; ?>" />
-      </div>
-    </div>
-  </fieldset>
-  <div class="form-actions">
-    <button type="submit" class="btn btn-success" name="Submit" value="Save" /><i class="icon-ok icon-white"></i> <strong>Save Properties</strong></button>
  </div>
+  <h3>Optional Information</h3>
+  <div class="form-group">
+    <label class="col-sm-2 control-label" for="bill_custid"><strong>Customer&nbsp;Reference</strong></label>
+    <div class="col-sm-4">
+      <input class="form-control input-sm" type="text" name="bill_custid" value="<?php echo $bill_data['bill_custid']; ?>" />
+    </div>
+    <div class="col-sm-6">
+    </div>
+  </div>
+  <div class="form-group">
+    <label class="col-sm-2 control-label" for="bill_ref"><strong>Billing Reference</strong></label>
+    <div class="col-sm-4">
+      <input class="form-control input-sm" type="text" name="bill_ref" value="<?php echo $bill_data['bill_ref']; ?>" />
+    </div>
+    <div class="col-sm-6">
+    </div>
+  </div>
+  <div class="form-group">
+    <label class="col-sm-2 control-label" for="bill_notes"><strong>Notes</strong></label>
+    <div class="col-sm-4">
+      <textarea rows="3" class="form-control input-sm" name="bill_notes" value="<?php echo $bill_data['bill_notes']; ?>"></textarea>
+    </div>
+  </div>
+  <button type="submit" class="btn btn-success" name="Submit" value="Save" /><i class="icon-ok icon-white"></i> <strong>Save Properties</strong></button>
 </form>

-<form class="form-horizontal">
-  <fieldset>
-    <legend>Billed Ports</legend>
-    <div class="control-group">
+<form class="form-horizontal" role="form">
+  <h3>Billed Ports</h3>
+  <div class="form-group">
 <?php

 $ports = dbFetchRows("SELECT * FROM `bill_ports` AS B, `ports` AS P, `devices` AS D
@@ -136,8 +162,8 @@ if (is_array($ports))
    $portbtn = str_replace("overlib('", "overlib('<div style=\'border: 5px solid #e5e5e5; background: #fff; padding: 10px;\'>", $portbtn);
    $portbtn = str_replace("<div>',;", "</div></div>',", $portbtn);
    $portalias = (empty($port['ifAlias']) ? "" : " - ".$port['ifAlias']."");
-    $devicebtn = str_replace("\">".$port['hostname'], "\" style=\"color: #000;\"><i class=\"icon-asterisk\"></i> ".$port['hostname'], $devicebtn);
-    $portbtn = str_replace("\">".strtolower($port['ifName']), "\" style=\"color: #000;\"><i class=\"icon-random\"></i> ".$port['ifName']."".$portalias, $portbtn);
+    $devicebtn = str_replace("\">".$port['hostname'], "\" style=\"color: #000;\"><i class=\"glyphicon glyphicon-asterisk\"></i> ".$port['hostname'], $devicebtn);
+    $portbtn = str_replace("\">".strtolower($port['ifName']), "\" style=\"color: #000;\"><i class=\"glyphicon glyphicon-random\"></i> ".$port['ifName']."".$portalias, $portbtn);
    echo("      <form action=\"\" method=\"post\" name=\"delete".$port['port_id']."\" style=\"display: none;\">\n");
    echo("        <input type=\"hidden\" name=\"action\" value=\"delete_bill_port\" />\n");
    echo("        <input type=\"hidden\" name=\"port_id\" value=\"".$port['port_id']."\" />\n");
@@ -164,16 +190,15 @@ if (is_array($ports))
    </div>
  </fieldset>
 </form>
-<form action="" method="post" class="form-horizontal">
+<form action="" method="post" class="form-horizontal" role="form">
  <input type="hidden" name="action" value="add_bill_port" />
  <input type="hidden" name="bill_id" value="<?php echo $bill_id; ?>" />
-  <fieldset>
-    <legend>Add Port</legend>
-    <div class="control-group">
-      <label class="control-label" for="device"><strong>Device</strong></label>
-      <div class="controls">
-        <select style="width: 300px;" id="device" name="device" onchange="getInterfaceList(this)">
-          <option value=''>Select a device</option>
+  <h3>Add Port</h3>
+  <div class="form-group">
+    <label class="col-sm-2 control-label" for="device"><strong>Device</strong></label>
+    <div class="col-sm-4">
+      <select class="form-control input-sm" id="device" name="device" onchange="getInterfaceList(this)">
+        <option value=''>Select a device</option>
 <?php

 $devices = dbFetchRows("SELECT * FROM `devices` ORDER BY hostname");
@@ -185,17 +210,18 @@ foreach ($devices as $device)
 }

 ?>
-        </select>
-      </div>
+      </select>
    </div>
-    <div class="control-group">
-      <label class="control-label" for="port_id"><strong>Interface</strong></label>
-      <div class="controls">
-        <select style="width: 300px;" id="port_id" name="port_id"></select>
-      </div>
+    <div class="col-sm-6">
    </div>
-  </fieldset>
-  <div class="form-actions">
-    <button type="submit" class="btn btn-primary" name="Submit" value=" Add " /><i class="icon-plus-sign icon-white"></i> <strong>Add Interface</strong></button>
  </div>
+  <div class="form-group">
+    <label class="col-sm-2 control-label" for="port_id"><strong>Interface</strong></label>
+    <div class="col-sm-4">
+      <select class="form-control input-sm" id="port_id" name="port_id"></select>
+    </div>
+    <div class="col-sm-6">
+    <div>
+  </div>
+  <button type="submit" class="btn btn-primary" name="Submit" value=" Add " /><i class="icon-plus-sign icon-white"></i> <strong>Add Interface</strong></button>
 </form>
--- a/html/pages/bills.inc.php
+++ b/html/pages/bills.inc.php
@@ -59,7 +59,6 @@ elseif ($vars['view'] == "add")

 ?>

-<font face="Verdana, Arial, Sans-Serif"><h2>Bill : Add Bill</h2>
 <?php

  print_optionbar_start();
@@ -76,9 +75,10 @@ elseif ($vars['view'] == "add")

 ?>

-<form name="form1" method="post" action="bills/" class="form-horizontal">
+<h3>Bill : Add Bill</h3>
+
+<form name="form1" method="post" action="bills/" class="form-horizontal" role="form">
  <input type=hidden name=addbill value=yes>
-  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script type="text/javascript">
    function billType() {
      $('#cdrDiv').toggle();
@@ -113,41 +113,60 @@ if(is_array($port))
 }

 ?>
-  <fieldset>
-    <legend>Bill Properties</legend>
-    <div class="control-group">
-      <label class="control-label" for="bill_name"><strong>Description</strong></label>
-      <div class="controls">
-        <input class="span4" type="text" name="bill_name" value="<?php echo($port['port_descr_descr']); ?>">
-      </div>
+
+<div class="form-group">
+  <label for="bill_name" class="col-sm-2 control-label"><strong>Description</strong></label>
+  <div class="col-sm-4">
+    <input class="form-control input-sm" type="text" id="bill_name" name="bill_name" value="<?php echo($port['port_descr_descr']); ?>">
+  </div>
+  <div class="col-sm6">
+  </div>
+</div>
+<div class="form-group">
+  <label class="col-sm-2 control-label" for="bill_type"><strong>Billing Type</strong></label>
+  <div class="col-sm-10">
+    <input type="radio" name="bill_type" value="cdr" checked onchange="javascript: billType();" /> CDR 95th
+    <input type="radio" name="bill_type" value="quota" onchange="javascript: billType();" /> Quota
+  </div>
+</div>
+<div class="form-group">
+  <div id="cdrDiv">
+    <div class="col-sm-2">
    </div>
-    <div class="control-group">
-      <label class="control-label" for="bill_type"><strong>Billing Type</strong></label>
-      <div class="controls">
-        <input type="radio" name="bill_type" value="cdr" checked onchange="javascript: billType();" /> CDR 95th
-        <input type="radio" name="bill_type" value="quota" onchange="javascript: billType();" /> Quota
-        <div id="cdrDiv">
-          <input class="span1" type="text" name="bill_cdr">
-          <select name="bill_cdr_type" style="width: 233px;">
-            <option value="Kbps">Kilobits per second (Kbps)</option>
-            <option value="Mbps" selected>Megabits per second (Mbps)</option>
-            <option value="Gbps">Gigabits per second (Gbps)</option>
-          </select>
-        </div>
-        <div id="quotaDiv" style="display: none">
-          <input class="span1" type="text" name="bill_quota">
-          <select name="bill_quota_type" style="width: 233px;">
-            <option value="MB">Megabytes (MB)</option>
-            <option value="GB" selected>Gigabytes (GB)</option>
-            <option value="TB">Terabytes (TB)</option>
-          </select>
-        </div>
-      </div>
+    <div class="col-sm-3">
+      <input class="form-control input-sm" type="text" name="bill_cdr">
    </div>
-    <div class="control-group">
-      <label class="control-label" for="bill_day"><strong>Billing Day</strong></label>
-      <div class="controls">
-        <select name="bill_day" style="width: 60px;">
+    <div class="col-sm-3">
+      <select name="bill_cdr_type" class="form-control input-sm">
+        <option value="Kbps">Kilobits per second (Kbps)</option>
+        <option value="Mbps" selected>Megabits per second (Mbps)</option>
+        <option value="Gbps">Gigabits per second (Gbps)</option>
+      </select>
+    </div>
+    <div class="col-sm-4">
+    </div>
+  </div>
+  <div id="quotaDiv" style="display: none">
+    <div class="col-sm-2">
+    </div>
+    <div class="col-sm-3">
+      <input class="form-control input-sm" type="text" name="bill_quota">
+    </div>
+    <div class="col-sm-3">
+      <select name="bill_quota_type" class="form-control input-sm">
+        <option value="MB">Megabytes (MB)</option>
+        <option value="GB" selected>Gigabytes (GB)</option>
+        <option value="TB">Terabytes (TB)</option>
+      </select>
+    </div>
+    <div class="col-sm-4">
+    </div>
+  </div>
+</div>
+<div class="form-group">
+  <label class="col-sm-2 control-label" for="bill_day"><strong>Billing Day</strong></label>
+  <div class="col-sm-1">
+    <select name="bill_day" class="form-control input-sm">
 <?php

 for ($x=1;$x<32;$x++) {
@@ -155,35 +174,37 @@ for ($x=1;$x<32;$x++) {
 }

 ?>
-        </select>
-      </div>
-    </div>
-  </fieldset>
-  <fieldset>
-    <legend>Optional Information</legend>
-    <div class="control-group">
-      <label class="control-label" for="bill_custid"><strong>Customer&nbsp;Reference</strong></label>
-      <div class="controls">
-        <input class="span4" type="text" name="bill_custid">
-      </div>
-    </div>
-    <div class="control-group">
-      <label class="control-label" for="bill_ref"><strong>Billing Reference</strong></label>
-      <div class="controls">
-        <input class="span4" type="text" name="bill_ref" value="<?php echo($port['port_descr_circuit']); ?>">
-      </div>
-    </div>
-    <div class="control-group">
-      <label class="control-label" for="bill_notes"><strong>Notes</strong></label>
-      <div class="controls">
-        <input class="span4" type="textarea" name="bill_notes" value="<?php echo($port['port_descr_speed']); ?>">
-      </div>
-    </div>
-  </fieldset>
-  <div class="form-actions">
-    <!-- <button class="btn btn-danger"><i class="icon-ban-circle icon-white"></i> Cancel</button> //-->
-    <button type="submit" class="btn btn-primary"><i class="icon-ok-sign icon-white"></i> <strong>Add Bill</strong></button>
+    </select>
  </div>
+  <div class="col-sm-9">
+  </div>
+</div>
+<h3>Optional Information</h3>
+<div class="form-group">
+  <label class="col-sm-2 control-label" for="bill_custid"><strong>Customer Reference</strong></label>
+  <div class="col-sm-4">
+    <input class="form-control input-sm" type="text" name="bill_custid">
+  </div>
+  <div class="col-sm-6">
+  </div>
+</div>
+<div class="form-group">
+  <label class="col-sm-2 control-label" for="bill_ref"><strong>Billing Reference</strong></label>
+  <div class="col-sm-4">
+    <input class="form-control input-sm" type="text" name="bill_ref" value="<?php echo($port['port_descr_circuit']); ?>">
+  </div>
+  <div class="col-sm-6">
+  </div>
+</div>
+<div class="form-group">
+  <label class="col-sm-2 control-label" for="bill_notes"><strong>Notes</strong></label>
+  <div class="col-sm-4">
+    <input class="form-control input-sm" type="textarea" name="bill_notes" value="<?php echo($port['port_descr_speed']); ?>">
+  </div>
+  <div class="col-sm-6">
+  </div>
+</div>
+<button type="submit" class="btn btn-default"><i class="icon-ok-sign icon-white"></i> <strong>Add Bill</strong></button>
 </form>

 <?php
@@ -193,17 +214,16 @@ for ($x=1;$x<32;$x++) {
  include("pages/bills/search.inc.php");

  $i=0;
-  echo("<table border=0 cellspacing=0 cellpadding=5 class=devicetable width=100%>
-           <tr style=\"font-weight: bold; \">
-             <td width=\"7\"></td>
-             <td width=\"250\">Billing name</td>
-             <td></td>
-             <td>Type</td>
-             <td>Allowed</td>
-             <td>Used</td>
-             <td style=\"text-align: center;\">Overusage</td>
-             <td width=\"250\"></td>
-             <td width=\"60\"></td>
+  echo("<table border='0' cellspacing='0' cellpadding='5' class='table table-condensed'>
+           <tr>
+             <th>Billing name</th>
+             <th></th>
+             <th>Type</th>
+             <th>Allowed</th>
+             <th>Used</th>
+             <th>Overusage</th>
+             <th></th>
+             <th></th>
           </tr>");
  foreach (dbFetchRows("SELECT * FROM `bills` ORDER BY `bill_name`") as $bill)
  {
@@ -245,7 +265,6 @@ for ($x=1;$x<32;$x++) {
      if (!is_integer($i/2)) { $row_colour = $list_colour_a; } else { $row_colour = $list_colour_b; }
      echo("
           <tr bgcolor='$row_colour'>
-             <td></td>
             <td><a href='".generate_url(array('page' => "bill", 'bill_id' => $bill['bill_id']))."'><span style='font-weight: bold;' class=interface>".$bill['bill_name']."</span></a><br />".strftime("%F", strtotime($datefrom))." to ".strftime("%F", strtotime($dateto))."</td>
             <td>$notes</td>
             <td>$type</td>
--- a/html/pages/bills/pmonth.inc.php
+++ b/html/pages/bills/pmonth.inc.php
@@ -3,18 +3,17 @@
  $pagetitle[] = "Previous Billing Period";
  $i=0;

-  echo('<table border=0 cellspacing=0 cellpadding=5 class=devicetable width=100%>
-           <tr style="font-weight: bold;">
-             <td width="7"></td>
-             <td width="250">Billing name</td>
-             <td>Type</td>
-             <td>Allowed</td>
-             <td>Inbound</td>
-             <td>Outbound</td>
-             <td>Total</td>
-             <td>95 percentile</td>
-             <td style="text-align: center;">Overusage</td>
-             <td width="250"></td>
+  echo('<table class="table table-condensed">
+           <tr>
+             <th>Billing name</th>
+             <th>Type</th>
+             <th>Allowed</th>
+             <th>Inbound</th>
+             <th>Outbound</th>
+             <th>Total</th>
+             <th>95 percentile</th>
+             <th>Overusage</th>
+             <th></th>
           </tr>');

  foreach (dbFetchRows("SELECT * FROM `bills` ORDER BY `bill_name`") as $bill)
@@ -56,7 +55,6 @@

        echo("
               <tr style=\"background: $row_colour;\">
-                 <td></td>
                 <td><a href=\"".generate_url(array('page' => "bill", 'bill_id' => $bill['bill_id']))."/\"><span style=\"font-weight: bold;\" class=\"interface\">".$bill['bill_name']."</a></span><br />from ".strftime("%x", strtotime($datefrom))." to ".strftime("%x", strtotime($dateto))."</td>
                 <td>$type</td>
                 <td>$allowed</td>
--- a/html/pages/bills/search.inc.php
+++ b/html/pages/bills/search.inc.php
@@ -4,37 +4,35 @@

 ?>

-        <table cellpadding=7 cellspacing=0 class=devicetable width=100%>
-<form method='post' action=''>
-<tr>
-             <td width='40' align=center valign=middle><div style='font-weight: bold; font-size: 16px;'>Bills</div></td>
-             <td width='240'><span style='font-weight: bold; font-size: 14px;'></span>
-             <input type="text" name="hostname" id="hostname" size=40 value="<?php echo($_POST['hostname']); ?>" />
-             </td>
-             <td width='100'>
-      <select name='os' id='os'>
+<form method='post' action='' class="form-inline" role="form">
+  <div class="form-group">
+    Bills
+  </div>
+  <div class="form-group">
+    <input type="text" name="hostname" id="hostname" class="form-control input-sm" value="<?php echo($_POST['hostname']); ?>" />
+  </div>
+  <div class="form-group">
+    <select name='os' id='os' class="form-control input-sm">
      <option value=''>All Types</option>
      <option value=''>CDR</option>
      <option value=''>95th</option>
      <option value=''>Quota</option>
-       </select>
-             </td>
-             <td width='100'>
-      <select name='hardware' id='hardware'>
+    </select>
+  </div>
+  <div class="form-group">
+    <select name='hardware' id='hardware' class="form-control input-sm">
      <option value=''>All States</option>
      <option value=''>Under Quota</option>
      <option value=''>Over Quota</option>
-       </select>
-             </td>
-             <td width='100'>
-      <select name='location' id='location'>
+    </select>
+  </div>
+  <div class="form-group">
+    <select name='location' id='location' class="form-control input-sm">
      <option value=''>All Customers</option>
-       </select>
-     </td>
-                 <td>
-         <input type=submit class=submit value=Search>
-             </td>
-             <td width='170' style='font-weight:bold; font-size: 12px;'>
+    </select>
+  </div>
+  <button type="submit" class="btn btn-default input-sm">Search</button>
+  <div class="form-group">
 <?php

  if ($vars['view'] == "history")
@@ -47,13 +45,11 @@
  }

 ?>
-             </td>
-             <td width='80' style='font-weight:bold; font-size: 12px;'>
-                                                   <a href='bills/view=add/'><img src="images/16/add.png" align=absmiddle alt="Add"> Add Bill</a>
-             </td>
-           </tr>
-  </form>
-</table>
+  </div>
+  <div class="form-group">
+    <a href='bills/view=add/'><img src="images/16/add.png" align=absmiddle alt="Add"> Add Bill</a>
+  </div>
+</form>

 <?php

--- a/html/pages/delsrv.inc.php
+++ b/html/pages/delsrv.inc.php
@@ -24,21 +24,21 @@ if ($_SESSION['userlevel'] < '5')

  echo("
 <h4>Delete Service</h4>
-<form id='addsrv' name='addsrv' method='post' action=''>
+<form id='addsrv' name='addsrv' method='post' action='' class='form-horizontal' role='form'>
  <input type=hidden name='delsrv' value='yes'>
-  <table width='300' border='0'>
-    <tr>
-      <td>
-        Device
-      </td>
-      <td>
-        <select name='service'>
+  <div class='well well-lg'>
+    <div class='form-group'>
+      <label for='service' class='col-sm-2 control-label'>Device - Service</label>
+      <div class='col-sm-5'>
+        <select name='service' id='service' class='form-control input-sm'>
          $servicesform
        </select>
-      </td>
-    </tr>
-  </table>
-<input type='submit' name='Submit' value='Delete' />
+      </div>
+      <div class='col-sm-5'>
+      </div>
+    </div>
+    <button type='submit' name='Submit' class='btn btn-default input-sm'>Delete</button>
+  </div>
 </form>");

 }
--- a/html/pages/devices.inc.php
+++ b/html/pages/devices.inc.php
@@ -5,6 +5,17 @@
 if(!isset($vars['format'])) { $vars['format'] = "list_detail"; }

 $sql_param = array();
+if(isset($vars['state']))
+{
+  if($vars['state'] == 'up')
+  {
+    $state = '1';
+  }
+    elseif($vars['state'] == 'down')
+  {
+    $state = '0';
+  }
+}

 if ($vars['hostname']) { $where .= " AND hostname LIKE ?"; $sql_param[] = "%".$vars['hostname']."%"; }
 if ($vars['os'])       { $where .= " AND os = ?";          $sql_param[] = $vars['os']; }
@@ -12,7 +23,12 @@ if ($vars['version'])  { $where .= " AND version = ?";     $sql_param[] = $vars[
 if ($vars['hardware']) { $where .= " AND hardware = ?";    $sql_param[] = $vars['hardware']; }
 if ($vars['features']) { $where .= " AND features = ?";    $sql_param[] = $vars['features']; }
 if ($vars['type'])     { $where .= " AND type = ?";        $sql_param[] = $vars['type']; }
-
+if ($vars['state'])    {
+  $where .= " AND status= ?";       $sql_param[] = $state;
+  $where .= " AND disabled='0' AND `ignore`='0'"; $sql_param[] = '';
+}
+if ($vars['disabled']) { $where .= " AND disabled= ?";     $sql_param[] = $vars['disabled']; }
+if ($vars['ignore'])   { $where .= " AND `ignore`= ?";       $sql_param[] = $vars['ignore']; }
 if ($vars['location'] == "Unset") { $location_filter = ''; }
 if ($vars['location']) { $location_filter = $vars['location']; }

@@ -20,132 +36,6 @@ $pagetitle[] = "Devices";

 print_optionbar_start();

-if($vars['searchbar'] != "hide")
-{
-
-?>
-<form method="post" action="">
-  <table cellpadding="4" cellspacing="0" class="devicetable" width="100%">
-    <tr>
-      <td width="290"><span style="font-weight: bold; font-size: 14px;"></span>
-        <input type="text" name="hostname" id="hostname" size="38" value="<?php echo($vars['hostname']); ?>" />
-      </td>
-      <td width="200">
-        <select name='os' id='os'>
-          <option value=''>All OSes</option>
-          <?php
-
-foreach (dbFetch('SELECT `os` FROM `devices` AS D WHERE 1 GROUP BY `os` ORDER BY `os`') as $data)
-{
-  if ($data['os'])
-  {
-    echo("<option value='".$data['os']."'");
-    if ($data['os'] == $vars['os']) { echo(" selected"); }
-    echo(">".$config['os'][$data['os']]['text']."</option>");
-  }
-}
-          ?>
-        </select>
-        <br />
-        <select name='version' id='version'>
-          <option value=''>All Versions</option>
-          <?php
-
-foreach (dbFetch('SELECT `version` FROM `devices` AS D WHERE 1 GROUP BY `version` ORDER BY `version`') as $data)
-{
-  if ($data['version'])
-  {
-    echo("<option value='".$data['version']."'");
-    if ($data['version'] == $vars['version']) { echo(" selected"); }
-    echo(">".$data['version']."</option>");
-  }
-}
-          ?>
-        </select>
-      </td>
-      <td width="200">
-        <select name="hardware" id="hardware">
-          <option value="">All Platforms</option>
-          <?php
-foreach (dbFetch('SELECT `hardware` FROM `devices` AS D WHERE 1 GROUP BY `hardware` ORDER BY `hardware`') as $data)
-{
-  if ($data['hardware'])
-  {
-    echo('<option value="'.$data['hardware'].'"');
-    if ($data['hardware'] == $vars['hardware']) { echo(" selected"); }
-    echo(">".$data['hardware']."</option>");
-  }
-}
-          ?>
-        </select>
-        <br />
-        <select name="features" id="features">
-          <option value="">All Featuresets</option>
-          <?php
-
-foreach (dbFetch('SELECT `features` FROM `devices` AS D WHERE 1 GROUP BY `features` ORDER BY `features`') as $data)
-{
-  if ($data['features'])
-  {
-    echo('<option value="'.$data['features'].'"');
-    if ($data['features'] == $vars['features']) { echo(" selected"); }
-    echo(">".$data['features']."</option>");
-  }
-}
-          ?>
-        </select>
-      </td>
-      <td>
-        <select name="location" id="location">
-          <option value="">All Locations</option>
-          <?php
-// fix me function?
-
-foreach (getlocations() as $location) // FIXME function name sucks maybe get_locations ?
-{
-  if ($location)
-  {
-    echo('<option value="'.$location.'"');
-    if ($location == $vars['location']) { echo(" selected"); }
-    echo(">".$location."</option>");
-  }
-}
-?>
-        </select>
-<br />
-        <select name="type" id="type">
-          <option value="">All Device Types</option>
-          <?php
-
-foreach (dbFetch('SELECT `type` FROM `devices` AS D WHERE 1 GROUP BY `type` ORDER BY `type`') as $data)
-{
-  if ($data['type'])
-  {
-    echo("<option value='".$data['type']."'");
-    if ($data['type'] == $vars['type']) { echo(" selected"); }
-    echo(">".ucfirst($data['type'])."</option>");
-  }
-}
-          ?>
-        </select>
-
-      </td>
-      <td align="center">
-      <a href="<?php echo(generate_url($vars)); ?>" title="Update the browser URL to reflect the search criteria." >Update URL</a> |
-      <a href="<?php echo(generate_url(array('page' => 'devices', 'section' => $vars['section'], 'bare' => $vars['bare']))); ?>" title="Reset critera to default." >Reset</a>
-      <br />
-      <input type="submit" class="submit" value="Search">
-      </td>
-    </tr>
-  </table>
-</form>
-
-<hr />
-
-<?php
-
-}
-
 echo('<span style="font-weight: bold;">Lists</span> &#187; ');

 $menu_options = array('basic'      => 'Basic',
@@ -219,13 +109,134 @@ foreach ($menu_options as $option => $text)
  } else {
    echo('<a href="'. generate_url($vars, array('bare' => 'yes')).'">Remove Header</a>');
  }
-
 ?>

 </div>

 <?php

+print_optionbar_end();
+print_optionbar_start();
+
+if($vars['searchbar'] != "hide")
+{
+
+?>
+<form method="post" action="" class="form-inline" role="form">
+  <div class="form-group">
+    <input type="text" name="hostname" id="hostname" size="38" value="<?php echo($vars['hostname']); ?>" class="form-control input-sm" placeholder="Hostname"/>
+  </div>
+  <div class="form-group">
+    <select name='os' id='os' class="form-control input-sm">
+      <option value=''>All OSes</option>
+          <?php
+
+foreach (dbFetch('SELECT `os` FROM `devices` AS D WHERE 1 GROUP BY `os` ORDER BY `os`') as $data)
+{
+  if ($data['os'])
+  {
+    echo("<option value='".$data['os']."'");
+    if ($data['os'] == $vars['os']) { echo(" selected"); }
+    echo(">".$config['os'][$data['os']]['text']."</option>");
+  }
+}
+          ?>
+    </select>
+    <br />
+    <select name='version' id='version' class="form-control input-sm">
+      <option value=''>All Versions</option>
+          <?php
+
+foreach (dbFetch('SELECT `version` FROM `devices` AS D WHERE 1 GROUP BY `version` ORDER BY `version`') as $data)
+{
+  if ($data['version'])
+  {
+    echo("<option value='".$data['version']."'");
+    if ($data['version'] == $vars['version']) { echo(" selected"); }
+    echo(">".$data['version']."</option>");
+  }
+}
+          ?>
+    </select>
+  </div>
+  <div class="form-group">
+    <select name="hardware" id="hardware" class="form-control input-sm">
+      <option value="">All Platforms</option>
+          <?php
+foreach (dbFetch('SELECT `hardware` FROM `devices` AS D WHERE 1 GROUP BY `hardware` ORDER BY `hardware`') as $data)
+{
+  if ($data['hardware'])
+  {
+    echo('<option value="'.$data['hardware'].'"');
+    if ($data['hardware'] == $vars['hardware']) { echo(" selected"); }
+    echo(">".$data['hardware']."</option>");
+  }
+}
+          ?>
+    </select>
+    <br />
+    <select name="features" id="features" class="form-control input-sm">
+      <option value="">All Featuresets</option>
+          <?php
+
+foreach (dbFetch('SELECT `features` FROM `devices` AS D WHERE 1 GROUP BY `features` ORDER BY `features`') as $data)
+{
+  if ($data['features'])
+  {
+    echo('<option value="'.$data['features'].'"');
+    if ($data['features'] == $vars['features']) { echo(" selected"); }
+    echo(">".$data['features']."</option>");
+  }
+}
+          ?>
+    </select>
+  </div>
+  <div class="form-group">
+    <select name="location" id="location" class="form-control input-sm">
+      <option value="">All Locations</option>
+          <?php
+// fix me function?
+
+foreach (getlocations() as $location) // FIXME function name sucks maybe get_locations ?
+{
+  if ($location)
+  {
+    echo('<option value="'.$location.'"');
+    if ($location == $vars['location']) { echo(" selected"); }
+    echo(">".$location."</option>");
+  }
+}
+?>
+    </select>
+    <br />
+    <select name="type" id="type" class="form-control input-sm">
+      <option value="">All Device Types</option>
+          <?php
+
+foreach (dbFetch('SELECT `type` FROM `devices` AS D WHERE 1 GROUP BY `type` ORDER BY `type`') as $data)
+{
+  if ($data['type'])
+  {
+    echo("<option value='".$data['type']."'");
+    if ($data['type'] == $vars['type']) { echo(" selected"); }
+    echo(">".ucfirst($data['type'])."</option>");
+  }
+}
+          ?>
+    </select>
+  </div>
+  <div class="form-group">
+    <a href="<?php echo(generate_url($vars)); ?>" title="Update the browser URL to reflect the search criteria." >Update URL</a> |
+    <a href="<?php echo(generate_url(array('page' => 'devices', 'section' => $vars['section'], 'bare' => $vars['bare']))); ?>" title="Reset critera to default." >Reset</a>
+    <br />
+    <button type="submit" class="btn btn-default input-sm">Search</button>
+  </div>
+</form>
+
+<?php
+
+}
+
 print_optionbar_end();

 $query = "SELECT * FROM `devices` WHERE 1 ".$where." ORDER BY hostname";
@@ -262,7 +273,7 @@ if($format == "graph")

 } else {

-  echo('<table cellspacing="0" class="devicetable sortable" width="100%">');
+  echo('<table class="table table-condensed">');
  if ($subformat == "detail" || $subformat == "basic")
  {
    echo('<tr class="tablehead">
--- a/html/pages/edituser.inc.php
+++ b/html/pages/edituser.inc.php
@@ -175,14 +175,22 @@ if ($_SESSION['userlevel'] != '10') { include("includes/error-no-perm.inc.php");

    echo("<h3>Select a user to edit</h3>");

-    echo("<form method='post' action=''>
+    echo("<form method='post' action='' class='form-horizontal' role='form'>
            <input type='hidden' value='edituser' name='page'>
-            <select name='user_id'>");
+    <div class='col-sm-3'>
+            <select name='user_id' class='form-control input-sm'>");
    foreach ($user_list as $user_entry)
    {
      echo("<option value='" . $user_entry['user_id']  . "'>" . $user_entry['username'] . "</option>");
    }
-    echo("</select><input type='submit' name='Submit' value='Select'></form>");
+    echo("</select>
+    </div>
+    <div class='col-sm-3'>
+      <button type='submit' name='Submit' class='btn btn-default'>Select</button>
+    </div>
+    <div class='col-sm-6'>
+    </div>
+  </form>");
  }

 }
--- a/html/pages/eventlog.inc.php
+++ b/html/pages/eventlog.inc.php
@@ -38,29 +38,29 @@ if ($_POST['string'])

 ?>

-<form method="post" action="">
-  <span style="font-weight: bold;">Event log</span> &#187;
-  <label><strong>Search</strong>
-    <input type="text" name="string" id="string" value="<?php echo($_POST['string']); ?>" />
-  </label>
-  <label>
-  <label>
-    <strong>Device</strong>
-    <select name="device" id="device">
-      <option value="">All Devices</option>
-      <?php
-        foreach (get_all_devices() as $hostname)
-        {
-          echo("<option value='".getidbyname($hostname)."'");
+<form method="post" action="" class="form-inline" role="form">
+    <div class="form-group">
+      <input type="text" name="string" id="string" value="<?php echo($_POST['string']); ?>" placeholder="Search" class="form-control input-sm" />
+    </div>
+    <div class="form-group">
+      <label>
+        <strong>Device</strong>
+      </label>
+      <select name="device" id="device" class="form-control input-sm">
+        <option value="">All Devices</option>
+        <?php
+          foreach (get_all_devices() as $hostname)
+          {
+            echo("<option value='".getidbyname($hostname)."'");

-          if (getidbyname($hostname) == $_POST['device']) { echo("selected"); }
+            if (getidbyname($hostname) == $_POST['device']) { echo("selected"); }

-          echo(">".$hostname."</option>");
-        }
-      ?>
-    </select>
-  </label>
-  <input type=submit class=submit value=Search>
+            echo(">".$hostname."</option>");
+          }
+        ?>
+      </select>
+    </div>
+    <button type="submit" class="btn btn-default input-sm">Search</button>
 </form>

 <?php
@@ -75,7 +75,7 @@ if ($_SESSION['userlevel'] >= '5')
  $param[] = $_SESSION['user_id'];
 }

-echo('<table cellspacing="0" cellpadding="1" width="100%">');
+echo('<table class="table table-condensed">');

 foreach (dbFetchRows($query, $param) as $entry)
 {
--- a/html/pages/front/default.php
+++ b/html/pages/front/default.php
@@ -1,6 +1,6 @@
 <?php

-include_once("includes/front/boxes.inc.php");
+include("includes/topnav.inc.php");

 function generate_front_box ($frontbox_class, $content)
 {
@@ -9,9 +9,14 @@ echo("<div class=\"front-box $frontbox_class\">
      </div>");
 }

+echo('
+  <div class="row">
+    <div class="col-md-8">
+');
+
 echo('<div class=front-page>');

-echo('<div class="status-boxes left-2-col-fluid">');
+echo('<div class="status-boxes">');

 $count_boxes = 0;

@@ -113,6 +118,20 @@ if ($count_boxes == 0) {
  want to start by adding one or more devices in the Devices menu.</p>");
 }
 echo('</div>');
+echo('</div>');
+echo('</div>');
+echo('
+  <div class="col-md-4">
+');
+
+include_once("includes/front/boxes.inc.php");
+
+echo('
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-12">
+');

 if ($config['enable_syslog'])
 {
@@ -122,7 +141,7 @@ if ($config['enable_syslog'])

  $sql = "SELECT *, DATE_FORMAT(timestamp, '%D %b %T') AS date from syslog ORDER BY timestamp DESC LIMIT 20";
  $query = mysql_query($sql);
-  echo("<table cellspacing=0 cellpadding=2 width=100%>");
+  echo('<table class="table table-bordered">');
  while ($entry = mysql_fetch_assoc($query))
  {
    $entry = array_merge($entry, device_by_id_cache($entry['device_id']));
@@ -147,7 +166,7 @@ if ($config['enable_syslog'])

  $data = mysql_query($query);

-  echo('<table cellspacing="0" cellpadding="1" width="100%">');
+  echo('<table class="table table-bordered">');

  while ($entry = mysql_fetch_assoc($data)) {
    include("includes/print-event.inc.php");
@@ -159,4 +178,9 @@ if ($config['enable_syslog'])

 echo("</div>");

+echo('
+  </div>
+</div>
+');
+
 ?>
--- a/html/pages/health.inc.php
+++ b/html/pages/health.inc.php
@@ -1,6 +1,6 @@
 <?php

-$datas = array('processor','mempool','storage');
+$datas = array('mempool','processor','storage');
 if ($used_sensors['temperature']) $datas[] = 'temperature';
 if ($used_sensors['humidity']) $datas[] = 'humidity';
 if ($used_sensors['fanspeed']) $datas[] = 'fanspeed';
--- a/html/pages/health/mempool.inc.php
+++ b/html/pages/health/mempool.inc.php
@@ -3,14 +3,14 @@
 $graph_type = "mempool_usage";

 echo("<div style='margin-top: 5px; padding: 0px;'>");
-echo("<table width=100% cellpadding=6 cellspacing=0>");
+echo("<table class='table table-condensed'>");

 echo("<tr class=tablehead>
-        <th width=280>Device</th>
+        <th>Device</th>
        <th>Memory</th>
-        <th width=100></th>
-        <th width=280>Usage</th>
-        <th width=50>Used</th>
+        <th></th>
+        <th>Usage</th>
+        <th>Used</th>
      </tr>");

 foreach (dbFetchRows("SELECT * FROM `mempools` AS M, `devices` as D WHERE D.device_id = M.device_id ORDER BY D.hostname") as $mempool)
--- a/html/pages/health/processor.inc.php
+++ b/html/pages/health/processor.inc.php
@@ -3,13 +3,13 @@
 $graph_type = "processor_usage";

 echo("<div style='margin-top: 5px; padding: 0px;'>");
-echo("  <table width=100% cellpadding=6 cellspacing=0>");
+echo("  <table class='table table-condensed'>");

-echo("<tr class=tablehead>
-        <th width=280>Device</th>
+echo("<tr>
+        <th>Device</th>
        <th>Processor</th>
-        <th width=100></th>
-        <th width=280>Usage</th>
+        <th></th>
+        <th>Usage</th>
      </tr>");

 foreach (dbFetchRows("SELECT * FROM `processors` AS P, `devices` AS D WHERE D.device_id = P.device_id ORDER BY D.hostname") as $proc)
--- a/html/pages/health/storage.inc.php
+++ b/html/pages/health/storage.inc.php
@@ -3,14 +3,14 @@
 $graph_type = "storage_usage";

 echo("<div style='padding: 5px;'>
-        <table width=100% cellspacing=0 cellpadding=6 class='sortable'>");
+        <table class='table table-condensed'>");

-echo("<tr class=tablehead>
-        <th width=280>Device</th>
+echo("<tr>
+        <th>Device</th>
        <th>Storage</th>
-        <th width=100></th>
-        <th width=280>Usage</th>
-        <th width=50>Used</th>
+        <th></th>
+        <th>Usage</th>
+        <th>Used</th>
      </tr>");

 foreach (dbFetchRows("SELECT * FROM `storage` AS S, `devices` AS D WHERE S.device_id = D.device_id ORDER BY D.hostname, S.storage_descr") as $drive)
--- a/html/pages/inventory.inc.php
+++ b/html/pages/inventory.inc.php
@@ -1,13 +1,13 @@

 <?php print_optionbar_start('25'); ?>

-<form method="post" action="">
-  <label><strong>Descr</strong>
-    <input type="text" name="string" id="string" value="<?php echo($_POST['string']); ?>" />
-  </label>
-  <label>
+<form method="post" action="" class="form-inline" role="form">
+  <div class="form-group">
+    <input type="text" name="string" id="string" value="<?php echo($_POST['string']); ?>" placeholder="Description" class="form-control input-sm" />
+  </div>
+  <div class="form-group">
    <strong>Part No</strong>
-    <select name="part" id="part">
+    <select name="part" id="part" class="form-control input-sm">
      <option value="">All Parts</option>
      <?php
        foreach (dbFetchRows("SELECT `entPhysicalModelName` FROM `entPhysical` GROUP BY `entPhysicalModelName` ORDER BY `entPhysicalModelName`") as $data)
@@ -18,13 +18,13 @@
        }
      ?>
    </select>
-  </label>
-  <label><strong>Serial</strong>
-    <input type="text" name="serial" id="serial" value="<?php echo($_POST['serial']); ?>" />
-  </label>
-  <label>
+  </div>
+  <div class="form-group">
+      <input type="text" name="serial" id="serial" value="<?php echo($_POST['serial']); ?>" placeholder="Serial" class="form-control input-sm"/>
+  </div>
+  <div class="form-group">
    <strong>Device</strong>
-    <select name="device" id="device">
+    <select name="device" id="device" class="form-control input-sm">
      <option value="">All Devices</option>
      <?php
        foreach (dbFetchRows("SELECT * FROM `devices` ORDER BY `hostname`") as $data)
@@ -37,10 +37,12 @@
        }
      ?>
    </select>
-  </label>
-  <input type="text" size=24 name="device_string" id="device_string" value="<?php if ($_POST['device_string']) { echo($_POST['device_string']); } ?>" />
-  <input style type=submit class=submit value=Search>
-
+  </div>
+  <div class="form-group">
+    <input type="text" size=24 name="device_string" id="device_string" value="<?php if ($_POST['device_string']) { echo($_POST['device_string']); } ?>" placeholder="Description" class="form-control input-sm"/>
+  </div>
+  <button type="submit" class="btn btn-default input-sm">Search</button>
+</form>
 <?php

 $pagetitle[] = "Inventory";
@@ -87,7 +89,7 @@ if (isset($_POST['device']) && is_numeric($_POST['device']))
  $param[] = $_POST['device'];
 }

-echo("<table cellspacing=0 cellpadding=2 width=100%>");
+echo('<table class="table table-condensed">');
 echo("<tr><th>Hostname</th><th>Description</th><th>Name</th><th>Part No</th><th>Serial No</th></tr>");

 foreach (dbFetchRows($sql, $param) as $entry)
@@ -98,4 +100,3 @@ foreach (dbFetchRows($sql, $param) as $entry)
 echo("</table>");

 ?>
-</table>
--- a/html/pages/ports.inc.php
+++ b/html/pages/ports.inc.php
@@ -8,160 +8,6 @@ if(!isset($vars['format'])) { $vars['format'] = "list_basic"; }

 print_optionbar_start();

-if($vars['searchbar'] != "hide")
-{
-
-?>
-<table style="text-align: left;" cellpadding=0 cellspacing=5 class=devicetable width=100%>
-  <tr style='padding: 0px;'>
-  <form method='post' action=''>
-    <td width='200'>
-      <select name='device_id' id='device_id' style='width: 180px;'>
-        <option value=''>All Devices</option>
-<?php
-
-foreach (dbFetchRows("SELECT `device_id`,`hostname` FROM `devices` GROUP BY `hostname` ORDER BY `hostname`") as $data)
-{
-  echo('        <option value="'.$data['device_id'].'"');
-  if ($data['device_id'] == $vars['device_id']) { echo("selected"); }
-  echo(">".$data['hostname']."</option>");
-}
-?>
-      </select>
-      <br />
-      <input type="hostname" name="hostname" id="hostname" title="Hostname" style='width: 180px;' <?php if (strlen($vars['hostname'])) {echo('value="'.$vars['hostname'].'"');} ?> />
-    </td>
-    <td width="120">
-      <select name="state" id="state" style="width: 100px;">
-        <option value="">All States</option>
-        <option value="up" <?php if ($vars['state'] == "up") { echo("selected"); } ?>>Up</option>
-        <option value="down"<?php if ($vars['state'] == "down") { echo("selected"); } ?>>Down</option>
-        <option value="admindown" <?php if ($vars['state'] == "admindown") { echo("selected"); } ?>>Shutdown</option>
-      </select>
-      <br />
-
-      <select name="ifSpeed" id="ifSpeed" style="width: 100px;">
-      <option value="">All Speeds</option>
-<?php
-foreach (dbFetchRows("SELECT `ifSpeed` FROM `ports` GROUP BY `ifSpeed` ORDER BY `ifSpeed`") as $data)
-{
-  if ($data['ifSpeed'])
-  {
-    echo("<option value='".$data['ifSpeed']."'");
-    if ($data['ifSpeed'] == $vars['ifSpeed']) { echo("selected"); }
-    echo(">".humanspeed($data['ifSpeed'])."</option>");
-  }
-}
-?>
-       </select>
-    </td>
-    <td width=170>
-      <select name="ifType" id="ifType" style="width: 150px;">
-        <option value="">All Media</option>
-<?php
-foreach (dbFetchRows("SELECT `ifType` FROM `ports` GROUP BY `ifType` ORDER BY `ifType`") as $data)
-{
-  if ($data['ifType'])
-  {
-    echo('        <option value="'.$data['ifType'].'"');
-    if ($data['ifType'] == $vars['ifType']) { echo("selected"); }
-    echo(">".$data['ifType']."</option>");
-  }
-}
-?>
-       </select>
-<br />
-      <select name="port_descr_type" id="port_descr_type" style="width: 150px;">
-        <option value="">All Port Types</option>
-<?php
-$ports = dbFetchRows("SELECT `port_descr_type` FROM `ports` GROUP BY `port_descr_type` ORDER BY `port_descr_type`");
-$total = count($ports);
-echo("Total: $total");
-foreach ($ports as $data)
-{
-  if ($data['port_descr_type'])
-  {
-    echo('        <option value="'.$data['port_descr_type'].'"');
-    if ($data['port_descr_type'] == $vars['port_descr_type']) { echo("selected"); }
-    echo(">".ucfirst($data['port_descr_type'])."</option>");
-  }
-}
-?>
-         </select>
-       </td>
-       <td>
-       </td>
-       <td width="220">
-        <input style="width: 200px;" title="Port Description" type="text" name="ifAlias" id="ifAlias" <?php if (strlen($vars['ifAlias'])) {echo('value="'.$vars['ifAlias'].'"');} ?> />
-        <select style="width: 200px;" name="location" id="location">
-          <option value="">All Locations</option>
-          <?php
-           // fix me function?
-
-           foreach (getlocations() as $location) // FIXME function name sucks maybe get_locations ?
-           {
-             if ($location)
-             {
-               echo('<option value="'.$location.'"');
-               if ($location == $vars['location']) { echo(" selected"); }
-               echo(">".$location."</option>");
-             }
-           }
-         ?>
-        </select>
-      </td>
-
-      <td width=80>
-        <label for="ignore">
-        <input type=checkbox id="ignore" name="ignore" value=1 <?php if ($vars['ignore']) { echo("checked"); } ?> ></input> Ignored
-        </label>
-        <br />
-        <label for="disable">
-        <input type=checkbox id="disable" name="disable" value=1 <?php if ($vars['disable']) { echo("checked"); } ?> > Disabled</input>
-        </label>
-        <br />
-        <label for="deleted">
-        <input type=checkbox id="deleted" name="deleted" value=1 <?php if ($vars['deleted']) { echo("checked"); } ?> > Deleted</input>
-        </label>
-        </td>
-        <td width=120>
-        <select name="sort" id="sort" style="width: 110px;">
-<?php
-$sorts = array('device' => 'Device',
-              'port' => 'Port',
-              'speed' => 'Speed',
-              'traffic' => 'Traffic',
-              'traffic_in' => 'Traffic In',
-              'traffic_out' => 'Traffic Out',
-              'packets' => 'Packets',
-              'packets_in' => 'Packets In',
-              'packets_out' => 'Packets Out',
-              'errors' => 'Errors',
-              'media' => 'Media',
-              'descr' => 'Description');
-
-foreach ($sorts as $sort => $sort_text)
-{
-  echo('<option value="'.$sort.'" ');
-  if ($vars['sort'] == $sort)  { echo("selected"); }
-  echo('>'.$sort_text.'</option>');
-}
-?>
-
-        </select>
-        </td>
-        <td style="text-align: center;" width=50>
-        <input style="align:right; padding: 10px;" type=submit class=submit value=Search></div>
-        <br />
-        <a href="<?php echo(generate_url(array('page' => 'ports', 'section' => $vars['section'], 'bare' => $vars['bare']))); ?>" title="Reset critera to default." >Reset</a>
-      </td>
-    </form>
-  </tr>
-</table>
-<hr />
-
-<?php }
-
 echo('<span style="font-weight: bold;">Lists</span> &#187; ');

 $menu_options = array('basic'      => 'Basic',
@@ -235,6 +81,154 @@ echo('<div style="float: right;">');

 echo('</div>');

+print_optionbar_end();
+print_optionbar_start();
+
+if($vars['searchbar'] != "hide")
+{
+
+?>
+  <form method='post' action='' class='form-inline' role='form'>
+    <div class="form-group">
+      <select name='device_id' id='device_id' class='form-control input-sm'>
+        <option value=''>All Devices</option>
+<?php
+
+foreach (dbFetchRows("SELECT `device_id`,`hostname` FROM `devices` GROUP BY `hostname` ORDER BY `hostname`") as $data)
+{
+  echo('        <option value="'.$data['device_id'].'"');
+  if ($data['device_id'] == $vars['device_id']) { echo("selected"); }
+  echo(">".$data['hostname']."</option>");
+}
+?>
+      </select>
+      <br />
+      <input type="hostname" name="hostname" id="hostname" title="Hostname" class="form-control input-sm" <?php if (strlen($vars['hostname'])) {echo('value="'.$vars['hostname'].'"');} ?> />
+    </div>
+    <div class="form-group">
+      <select name="state" id="state" class="form-control input-sm">
+        <option value="">All States</option>
+        <option value="up" <?php if ($vars['state'] == "up") { echo("selected"); } ?>>Up</option>
+        <option value="down"<?php if ($vars['state'] == "down") { echo("selected"); } ?>>Down</option>
+        <option value="admindown" <?php if ($vars['state'] == "admindown") { echo("selected"); } ?>>Shutdown</option>
+      </select>
+      <br />
+
+      <select name="ifSpeed" id="ifSpeed" class="form-control input-sm">
+        <option value="">All Speeds</option>
+<?php
+foreach (dbFetchRows("SELECT `ifSpeed` FROM `ports` GROUP BY `ifSpeed` ORDER BY `ifSpeed`") as $data)
+{
+  if ($data['ifSpeed'])
+  {
+    echo("<option value='".$data['ifSpeed']."'");
+    if ($data['ifSpeed'] == $vars['ifSpeed']) { echo("selected"); }
+    echo(">".humanspeed($data['ifSpeed'])."</option>");
+  }
+}
+?>
+       </select>
+    </div>
+    <div class="form-group">
+      <select name="ifType" id="ifType" class="form-control input-sm">
+        <option value="">All Media</option>
+<?php
+foreach (dbFetchRows("SELECT `ifType` FROM `ports` GROUP BY `ifType` ORDER BY `ifType`") as $data)
+{
+  if ($data['ifType'])
+  {
+    echo('        <option value="'.$data['ifType'].'"');
+    if ($data['ifType'] == $vars['ifType']) { echo("selected"); }
+    echo(">".$data['ifType']."</option>");
+  }
+}
+?>
+       </select>
+<br />
+      <select name="port_descr_type" id="port_descr_type" class="form-control input-sm">
+        <option value="">All Port Types</option>
+<?php
+$ports = dbFetchRows("SELECT `port_descr_type` FROM `ports` GROUP BY `port_descr_type` ORDER BY `port_descr_type`");
+$total = count($ports);
+echo("Total: $total");
+foreach ($ports as $data)
+{
+  if ($data['port_descr_type'])
+  {
+    echo('        <option value="'.$data['port_descr_type'].'"');
+    if ($data['port_descr_type'] == $vars['port_descr_type']) { echo("selected"); }
+    echo(">".ucfirst($data['port_descr_type'])."</option>");
+  }
+}
+?>
+      </select>
+    </div>
+    <div class="form-group">
+      <input title="Port Description" type="text" name="ifAlias" id="ifAlias" class="form-control input-sm" <?php if (strlen($vars['ifAlias'])) {echo('value="'.$vars['ifAlias'].'"');} ?> />
+        <select name="location" id="location" class="form-control input-sm">
+          <option value="">All Locations</option>
+          <?php
+           // fix me function?
+
+           foreach (getlocations() as $location) // FIXME function name sucks maybe get_locations ?
+           {
+             if ($location)
+             {
+               echo('<option value="'.$location.'"');
+               if ($location == $vars['location']) { echo(" selected"); }
+               echo(">".$location."</option>");
+             }
+           }
+         ?>
+        </select>
+      </div>
+      <div class="form-group">
+        <label for="ignore">Ignored</label>
+        <input type=checkbox id="ignore" name="ignore" value="1" class="" <?php if ($vars['ignore']) { echo("checked"); } ?> ></input>
+        <br />
+        <label for="disable">Disabled</label>
+        <input type=checkbox id="disable" name="disable" value=1 class="" <?php if ($vars['disable']) { echo("checked"); } ?> ></input>
+        </label>
+        <br />
+        <label for="deleted">Deleted</label>
+        <input type=checkbox id="deleted" name="deleted" value=1 class="" <?php if ($vars['deleted']) { echo("checked"); } ?> ></input>
+        </label>
+      </div>
+      <div class="form-group">
+        <select name="sort" id="sort" class="form-control input-sm">
+<?php
+$sorts = array('device' => 'Device',
+              'port' => 'Port',
+              'speed' => 'Speed',
+              'traffic' => 'Traffic',
+              'traffic_in' => 'Traffic In',
+              'traffic_out' => 'Traffic Out',
+              'packets' => 'Packets',
+              'packets_in' => 'Packets In',
+              'packets_out' => 'Packets Out',
+              'errors' => 'Errors',
+              'media' => 'Media',
+              'descr' => 'Description');
+
+foreach ($sorts as $sort => $sort_text)
+{
+  echo('<option value="'.$sort.'" ');
+  if ($vars['sort'] == $sort)  { echo("selected"); }
+  echo('>'.$sort_text.'</option>');
+}
+?>
+
+        </select>
+      </div>
+      <button type="submit" class="btn btn-default input-sm">Search</button>
+      <a href="<?php echo(generate_url(array('page' => 'ports', 'section' => $vars['section'], 'bare' => $vars['bare']))); ?>" title="Reset critera to default." >Reset</a>
+      </td>
+    </form>
+  </tr>
+</table>
+
+<?php }
+
 print_optionbar_end();

 $param = array();
@@ -256,6 +250,11 @@ foreach ($vars as $var => $value)
      case 'device_id':
      case 'deleted':
      case 'ignore':
+        if ($value == 1)
+        {
+          $where .= " AND (I.ignore = 1 OR D.ignore = 1) AND I.deleted = 0";
+        }
+        break;
      case 'disable':
      case 'ifSpeed':
        if (is_numeric($value))
@@ -286,11 +285,11 @@ foreach ($vars as $var => $value)
          $param[] = "up";
          $param[] = "down";
        } elseif($value == "up") {
-          $where .= "AND I.ifAdminStatus = ? AND I.ifOperStatus = ?";
+          $where .= "AND I.ifAdminStatus = ? AND I.ifOperStatus = ?  AND I.ignore = '0' AND D.ignore='0' AND I.deleted='0'";
          $param[] = "up";
          $param[] = "up";
        } elseif($value == "admindown") {
-          $where .= "AND I.ifAdminStatus = ?";
+          $where .= "AND I.ifAdminStatus = ? AND D.ignore = 0";
          $param[] = "down";
        }
      break;
--- a/html/pages/preferences.inc.php
+++ b/html/pages/preferences.inc.php
@@ -2,7 +2,6 @@

 $pagetitle[] = "Preferences";

-echo("<div style='margin: 10px'>");
 echo("<h3>User Preferences</h3>");

 if ($_POST['action'] == "changepass")
@@ -29,22 +28,40 @@ if ($_POST['action'] == "changepass")

 include("includes/update-preferences-password.inc.php");

-echo("<div style='width: 800px; background-color: #fff; padding:5px; margin-bottom:10px; float:left;'>");
-echo("</div>");
-
-echo("<div style='width: 300px; float: right;'>");
-echo("<div style='background-color: #e5e5e5; border: solid #e5e5e5 10px; margin-bottom:10px;'>");
+echo("<div class='well'>");

 if (passwordscanchange($_SESSION['username']))
 {
-  echo("<div style='font-size: 18px; font-weight: bold; margin-bottom: 5px;'>Change Password</div>");
+  echo("<h3>Change Password</h3>");
  echo($changepass_message);
-  echo("<form method='post' action='preferences/'><input type=hidden name='action' value='changepass'>
-        <table>
-        <tr><td>Old Password</td><td><input type=password name=old_pass autocomplete='off'></input></td></tr>
-        <tr><td>New Password</td><td><input type=password name=new_pass autocomplete='off'></input></td></tr>
-        <tr><td>New Password</td><td><input type=password name=new_pass2 autocomplete='off'></input></td></tr>
-        <tr><td></td><td align=right><input type=submit class=submit></td></tr></table></form>");
+  echo("<form method='post' action='preferences/' class='form-horizontal' role='form'>
+  <input type=hidden name='action' value='changepass'>
+  <div class='form-group'>
+    <label for='old_pass' class='col-sm-2 control-label'>Old Password</label>
+    <div class='col-sm-4'>
+      <input type=password name=old_pass autocomplete='off' class='form-control input-sm'>
+    </div>
+    <div class='col-sm-6'>
+    </div>
+  </div>
+  <div class='form-group'>
+    <label for='new_pass' class='col-sm-2 control-label'>New Password</label>
+    <div class='col-sm-4'>
+      <input type=password name=new_pass autocomplete='off' class='form-control input-sm'>
+    </div>
+    <div class='col-sm-6'>
+    </div>
+  </div>
+  <div class='form-group'>
+    <label for='new_pass2' class='col-sm-2'>New Password</label>
+    <div class='col-sm-4'>
+      <input type=password name=new_pass2 autocomplete='off' class='form-control input-sm'>
+    </div>
+    <div class='col-sm-6'>
+    </div>
+  </div>
+  <button type='submit' class='btn btn-default'>Submit</button>
+</form>");
  echo("</div>");
 }

@@ -66,8 +83,6 @@ if ($_SESSION['userlevel'] == '1')
  if (!$dev_access) { echo("No access!"); }
 }

-echo("</div>");
-echo("</div>");
 echo("</div>");

 ?>
--- a/html/pages/search/arp.inc.php
+++ b/html/pages/search/arp.inc.php
@@ -1,11 +1,9 @@
 <?php print_optionbar_start(28); ?>

-<table cellpadding="0" cellspacing="0" class="devicetable" width="100%">
-  <tr>
-  <form method="post" action="">
-    <td width="200" style="padding: 1px;">
-      <select name="device_id" id="device_id">
-      <option value="">All Devices</option>
+  <form method="post" action="" class="form-inline" role="form">
+    <div class="form-group">
+      <select name="device_id" id="device_id" class="form-control input-sm">
+        <option value="">All Devices</option>
 <?php

 // Select the devices only with ARP tables
@@ -17,28 +15,24 @@ foreach (dbFetchRows("SELECT D.device_id AS device_id, `hostname` FROM `ipv4_mac
 }
 ?>
      </select>
-    </td>
-    <td width="200" style="padding: 1px;">Search by
-      <select name="searchby" id="searchby">
-      <option value="mac" <?php if ($_POST['searchby'] != "ip") { echo("selected"); } ?> >MAC Address</option>
-      <option value="ip" <?php if ($_POST['searchby'] == "ip") { echo("selected"); } ?> >IP Address</option>
+    </div>
+    <div class="form-group">
+      <select name="searchby" id="searchby" class="form-control input-sm">
+        <option value="mac" <?php if ($_POST['searchby'] != "ip") { echo("selected"); } ?> >MAC Address</option>
+        <option value="ip" <?php if ($_POST['searchby'] == "ip") { echo("selected"); } ?> >IP Address</option>
      </select>
-    </td>
-    <td>
-    </td>
-    <td width=400>
-     <input type="text" name="address" id="address" size=40 value="<?php echo($_POST['address']); ?>" />
-     <input style="align:right;" type=submit class=submit value=Search></div>
-    </td>
+    </div>
+    <div class="form-group">
+      <input type="text" name="address" id="address" size=40 value="<?php echo($_POST['address']); ?>" class="form-control input-sm" placeholder="Address" />
+    </div>
+      <button type="submit" class="btn btn-default input-sm">Search</button>
  </form>
-  </tr>
-</table>

 <?php

 print_optionbar_end();

-echo('<table width="100%" cellspacing="0" cellpadding="5">');
+echo('<table class="table table-condensed">');

 $query = "SELECT * FROM `ipv4_mac` AS M, `ports` AS P, `devices` AS D WHERE M.port_id = P.port_id AND P.device_id = D.device_id ";
 if (isset($_POST['searchby']) && $_POST['searchby'] == "ip")
--- a/html/pages/search/ipv4.inc.php
+++ b/html/pages/search/ipv4.inc.php
@@ -1,11 +1,9 @@
 <?php print_optionbar_start(28); ?>

-<table cellpadding="0" cellspacing="0" class="devicetable" width="100%">
-  <tr>
-  <form method="post" action="">
-    <td width="200" style="padding: 1px;">
-      <select name="device_id" id="device_id">
-      <option value="">All Devices</option>
+  <form method="post" action="" class="form-inline" role="form">
+    <div class="form-group">
+      <select name="device_id" id="device_id" class="form-control input-sm">
+        <option value="">All Devices</option>
 <?php
 foreach (dbFetchRows("SELECT `device_id`,`hostname` FROM `devices` GROUP BY `hostname` ORDER BY `hostname`") as $data)
 {
@@ -15,29 +13,25 @@ foreach (dbFetchRows("SELECT `device_id`,`hostname` FROM `devices` GROUP BY `hos
 }
 ?>
      </select>
-    </td>
-    <td width="200" style="padding: 1px;">
-      <select name="interface" id="interface">
-      <option value="">All Interfaces</option>
-      <option value="Loopback%" <?php if ($_POST['interface'] == "Loopback%") { echo("selected"); } ?> >Loopbacks</option>
-      <option value="Vlan%" <?php if ($_POST['interface'] == "Vlan%") { echo("selected"); } ?> >VLANs</option>
+    </div>
+    <div class="form-group">
+      <select name="interface" id="interface" class="form-control input-sm">
+        <option value="">All Interfaces</option>
+        <option value="Loopback%" <?php if ($_POST['interface'] == "Loopback%") { echo("selected"); } ?> >Loopbacks</option>
+        <option value="Vlan%" <?php if ($_POST['interface'] == "Vlan%") { echo("selected"); } ?> >VLANs</option>
      </select>
-    </td>
-    <td>
-    </td>
-    <td width=400>
-     <input type="text" name="address" id="address" size=40 value="<?php echo($_POST['address']); ?>" />
-     <input style="align:right;" type=submit class=submit value=Search></div>
-    </td>
+    </div>
+    <div class="form-group">
+     <input type="text" name="address" id="address" size=40 value="<?php echo($_POST['address']); ?>" class="form-control input-sm" placeholder="IPv4 Address"/>
+    </div>
+     <button type="submit" class="btn btn-default input-sm">Search</button>
  </form>
-  </tr>
-</table>

 <?php

 print_optionbar_end();

-echo('<table width="100%" cellspacing="0" cellpadding="5">');
+echo('<table class="table table-condensed">');

 $query = "SELECT * FROM `ipv4_addresses` AS A, `ports` AS I, `devices` AS D, `ipv4_networks` AS N WHERE I.port_id = A.port_id AND I.device_id = D.device_id AND N.ipv4_network_id = A.ipv4_network_id ";

--- a/html/pages/search/ipv6.inc.php
+++ b/html/pages/search/ipv6.inc.php
@@ -1,11 +1,9 @@
 <?php print_optionbar_start(28); ?>

-<table cellpadding="0" cellspacing="0" class="devicetable" width="100%">
-  <tr>
-  <form method="post" action="">
-    <td width="200">
-      <select name="device_id" id="device_id">
-      <option value="">All Devices</option>
+  <form method="post" action="" class="form-inline" role="form">
+    <div class="form-group">
+      <select name="device_id" id="device_id" class="form-control input-sm">
+        <option value="">All Devices</option>
 <?php
 foreach (dbFetchRows("SELECT `device_id`,`hostname` FROM `devices` GROUP BY `hostname` ORDER BY `hostname`") as $data)
 {
@@ -15,29 +13,25 @@ foreach (dbFetchRows("SELECT `device_id`,`hostname` FROM `devices` GROUP BY `hos
 }
 ?>
      </select>
-    </td>
-    <td width="200">
-      <select name="interface" id="interface">
-      <option value="">All Interfaces</option>
-      <option value="Loopback%" <?php if ($_POST['interface'] == "Loopback%") { echo("selected"); } ?> >Loopbacks</option>
-      <option value="Vlan%" <?php if ($_POST['interface'] == "Vlan%") { echo("selected"); } ?> >VLANs</option>
+    </div>
+    <div class="form-group">
+      <select name="interface" id="interface" class="form-control input-sm">
+        <option value="">All Interfaces</option>
+        <option value="Loopback%" <?php if ($_POST['interface'] == "Loopback%") { echo("selected"); } ?> >Loopbacks</option>
+        <option value="Vlan%" <?php if ($_POST['interface'] == "Vlan%") { echo("selected"); } ?> >VLANs</option>
      </select>
-    </td>
-    <td>
-    </td>
-    <td width=400>
-     <input type="text" name="address" id="address" size=40 value="<?php echo($_POST['address']); ?>" />
-     <input style="align:right;" type=submit class=submit value=Search></div>
-    </td>
+    </div>
+    <div class="form-group">
+      <input type="text" name="address" id="address" size=40 value="<?php echo($_POST['address']); ?>" class="form-control input-sm" placeholder="IPv6 Address"/>
+    </div>
+     <button type="submit" class="btn btn-default input-sm">Search</button>
  </form>
-  </tr>
-</table>

 <?php

 print_optionbar_end();

-echo('<table width="100%" cellspacing="0" cellpadding="5">');
+echo('<table class="table table-condensed">');

 $query = "SELECT * FROM `ipv6_addresses` AS A, `ports` AS I, `devices` AS D, `ipv6_networks` AS N WHERE I.port_id = A.port_id AND I.device_id = D.device_id AND N.ipv6_network_id = A.ipv6_network_id ";

--- a/html/pages/search/mac.inc.php
+++ b/html/pages/search/mac.inc.php
@@ -1,11 +1,9 @@
 <?php print_optionbar_start(28); ?>

-<table cellpadding="0" cellspacing="0" class="devicetable" width="100%">
-  <tr>
-  <form method="post" action="">
-    <td width="200" style="padding: 1px;">
-      <select name="device_id" id="device_id">
-      <option value="">All Devices</option>
+  <form method="post" action="" class="form-inline" role="form">
+    <div class="form-group">
+      <select name="device_id" id="device_id" class="form-control input-sm">
+        <option value="">All Devices</option>
 <?php
 foreach (dbFetchRows("SELECT `device_id`,`hostname` FROM `devices` GROUP BY `hostname` ORDER BY `hostname`") as $data)
 {
@@ -15,29 +13,25 @@ foreach (dbFetchRows("SELECT `device_id`,`hostname` FROM `devices` GROUP BY `hos
 }
 ?>
      </select>
-    </td>
-    <td width="200" style="padding: 1px;">
-      <select name="interface" id="interface">
-      <option value="">All Interfaces</option>
-      <option value="Loopback%" <?php if ($_POST['interface'] == "Loopback%") { echo("selected"); } ?> >Loopbacks</option>
-      <option value="Vlan%" <?php if ($_POST['interface'] == "Vlan%") { echo("selected"); } ?> >VLANs</option>
+    </div>
+    <div class="form-group">
+      <select name="interface" id="interface" class="form-control input-sm">
+        <option value="">All Interfaces</option>
+        <option value="Loopback%" <?php if ($_POST['interface'] == "Loopback%") { echo("selected"); } ?> >Loopbacks</option>
+        <option value="Vlan%" <?php if ($_POST['interface'] == "Vlan%") { echo("selected"); } ?> >VLANs</option>
      </select>
-    </td>
-    <td>
-    </td>
-    <td width=400>
-     <input type="text" name="address" id="address" size=40 value="<?php echo($_POST['address']); ?>" />
-     <input style="align:right;" type=submit class=submit value=Search></div>
-    </td>
+    </div>
+    <div class="form-group">
+      <input type="text" name="address" id="address" size=40 value="<?php echo($_POST['address']); ?>" class="form-control input-sm" placeholder="Mac Address"/>
+    </div>
+     <button type="submit" class="btn btn-default input-sm">Search</button>
  </form>
-  </tr>
-</table>

 <?php

 print_optionbar_end();

-echo('<table width="100%" cellspacing="0" cellpadding="5">');
+echo('<table class="table table-condensed">');

 $query = "SELECT * FROM `ports` AS P, `devices` AS D WHERE P.device_id = D.device_id ";
 $query .= "AND `ifPhysAddress` LIKE ?";
--- a/html/pages/services.inc.php
+++ b/html/pages/services.inc.php
@@ -9,6 +9,25 @@ echo("<span style='font-weight: bold;'>Services</span> &#187; ");
 $menu_options = array('basic' => 'Basic',
                      'details' => 'Details');

+$sql_param = array();
+if(isset($vars['state']))
+{
+  if($vars['state'] == 'up')
+  {
+    $state = '1';
+  }
+    elseif($vars['state'] == 'down')
+  {
+    $state = '0';
+  }
+}
+
+if ($vars['state'])    {
+  $where .= " AND service_status= ?";       $sql_param[] = $state;
+  $where .= " AND service_disabled='0' AND `service_ignore`='0'"; $sql_param[] = '';
+}
+if ($vars['disabled']) { $where .= " AND service_disabled= ?";     $sql_param[] = $vars['disabled']; }
+if ($vars['ignore'])   { $where .= " AND `service_ignore`= ?";       $sql_param[] = $vars['ignore']; }
 if (!$vars['view']) { $vars['view'] = "basic"; }

 $sep = "";
@@ -26,9 +45,7 @@ unset($sep);

 print_optionbar_end();

-if ($_GET['status'] == '0') { $where = " AND service_status = '0'"; } else { unset ($where); }
-
-echo("<div style='margin: 5px;'><table cellpadding=7 border=0 cellspacing=0 width=100%>");
+echo('<table class="table table-condensed">');
 //echo("<tr class=interface-desc bgcolor='#e5e5e5'><td>Device</td><td>Service</td><td>Status</td><td>Changed</td><td>Checked</td><td>Message</td></tr>");

 if ($_SESSION['userlevel'] >= '5')
@@ -43,7 +60,8 @@ if ($_SESSION['userlevel'] >= '5')
  {
    $device_id = $device['device_id'];
    $device_hostname = $device['hostname'];
-    foreach (dbFetchRows("SELECT * FROM `services` WHERE `device_id` = ?", array($device['device_id'])) as $service)
+    array_unshift($sql_param,$device_id);
+    foreach (dbFetchRows("SELECT * FROM `services` WHERE `device_id` = ? $where", $sql_param) as $service)
    {
       include("includes/print-service.inc.php");

@@ -72,6 +90,6 @@ if ($_SESSION['userlevel'] >= '5')
    unset ($samehost);
  }

-  echo("</table></div>");
+  echo("</table>");

 ?>
--- a/includes/common.php
+++ b/includes/common.php
@@ -69,7 +69,7 @@ function print_message($text)
  {
    print Console_Color::convert("%g".$text."%n\n", false);
  } else {
-    echo('<div class="messagebox"><img src="/images/16/tick.png" align="absmiddle"> '.$text.'</div>');
+    echo('<div class="alert alert-success"><img src="/images/16/tick.png" align="absmiddle"> '.$text.'</div>');
  }
 }

--- a/includes/functions.php
+++ b/includes/functions.php
@@ -179,6 +179,38 @@ function getImage($device)
  return $image;
 }

+function getImageSrc($device)
+{
+  global $config;
+
+  $device['os'] = strtolower($device['os']);
+
+  if ($device['icon'] && file_exists($config['html_dir'] . "/images/os/" . $device['icon'] . ".png"))
+  {
+    $image = $config['base_url'] . '/images/os/' . $device['icon'] . '.png';
+  }
+  elseif ($config['os'][$device['os']]['icon'] && file_exists($config['html_dir'] . "/images/os/" . $config['os'][$device['os']]['icon'] . ".png"))
+  {
+    $image = $config['base_url'] . '/images/os/' . $config['os'][$device['os']]['icon'] . '.png';
+  } else {
+    if (file_exists($config['html_dir'] . '/images/os/' . $device['os'] . '.png'))
+    {
+      $image = $config['base_url'] . '/images/os/' . $device['os'] . '.png';
+    }
+    if ($device['os'] == "linux")
+    {
+      $features = strtolower(trim($device['features']));
+      list($distro) = explode(" ", $features);
+      if (file_exists($config['html_dir'] . "/images/os/$distro" . ".png"))
+      {
+        $image = $config['base_url'] . '/images/os/' . $distro . '.png';
+      }
+    }
+  }
+
+  return $image;
+}
+
 function renamehost($id, $new, $source = 'console')
 {
  global $config;