Updated results page (#196)

* Update gitignore

* Update makefile. Add hbs helper

* Collect all selectors for errors/warnings/notices

* Add list of techniques that help to solve problems

* Remove task-stats block from sidebar

* Remove script from Makefile

* Update tooltips. Map standards and techniques

* Update layout for new components: new tabs, errors panels, lists of selectors, tooltips and popovers

* Update styles for new layout and components

* Graph buttons and popovers styles

* Reformat less code

* Include popover. Update IE styles

* Problem details. Context popovers

* Update graph buttons. Add sorting by number of errors

* Update graph buttons params

* Fix tooltip names

* Swap details and ignore link-buttons

* Set ignore link colors

.gitignore

@@ -7,3 +7,6 @@ config/test.json
 # Generated npm files
 node_modules
 npm-debug.log
+
+# JetBrains IDE
+.idea

Makefile

@@ -28,6 +28,8 @@ uglify:
 		public/js/vendor/bootstrap/js/tooltip.js \
 		public/js/vendor/bootstrap/js/transition.js \
 		public/js/vendor/bootstrap/js/collapse.js \
+		public/js/vendor/bootstrap/js/tab.js \
+		public/js/vendor/bootstrap/js/popover.js \
 		public/js/vendor/flot/jquery.flot.js \
 		public/js/vendor/flot/jquery.flot.dashes.js \
 		public/js/vendor/flot/jquery.flot.time.js \

app.js

@@ -69,6 +69,7 @@ function initApp(config, callback) {
 	require('./view/helper/date')(hbs);
 	require('./view/helper/string')(hbs);
 	require('./view/helper/url')(hbs);
+	require('./view/helper/conditionals')(hbs);
 
 	// Populate view locals
 	app.express.locals = {

data/techniques.js

@@ -0,0 +1,608 @@
+// This file is part of Pa11y Dashboard.
+//
+// Pa11y Dashboard is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Pa11y Dashboard is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
+
+// jscs:disable maximumLineLength
+'use strict';
+
+module.exports = getTechniques;
+
+function getTechniques() {
+	return {
+		H30: {
+			title: 'H30: Providing link text that describes the purpose of a link for anchor elements',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H30'
+		},
+		H37: {
+			title: 'H37: Using alt attributes on img elements',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H37'
+		},
+		H67: {
+			title: 'H67: Using null alt text and no title attribute on img elements for images that AT should ignore',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H67'
+		},
+		G94: {
+			title: 'G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G94'
+		},
+		H36: {
+			title: 'H36: Using alt attributes on images used as submit buttons',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H36'
+		},
+		H24: {
+			title: 'H24: Providing text alternatives for the area elements of image maps ',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H24'
+		},
+		G73: {
+			title: 'G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G73'
+		},
+		G74: {
+			title: 'G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G74'
+		},
+		H2: {
+			title: 'H2: Combining adjacent image and text links for the same resource',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H2'
+		},
+		H53: {
+			title: 'H53: Using the body of the object element',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H53'
+		},
+		G92: {
+			title: 'G92: Providing long description for non-text content that serves the same purpose and presents the same information',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G92'
+		},
+		H35: {
+			title: 'H35: Providing text alternatives on applet elements ',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H35'
+		},
+		G158: {
+			title: 'G158: Providing an alternative for time-based media for audio-only content',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G158'
+		},
+		G159: {
+			title: 'G159: Providing an alternative for time-based media for video-only content',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G159'
+		},
+		G166: {
+			title: 'G166: Providing audio that describes the important video content and describing it as such',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G166'
+		},
+		G87: {
+			title: 'G87: Providing closed captions',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G87'
+		},
+		G93: {
+			title: 'G93: Providing open (always visible) captions',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G93'
+		},
+		G69: {
+			title: 'G69: Providing an alternative for time based media',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G69'
+		},
+		G78: {
+			title: 'G78: Providing a second, user-selectable, audio track that includes audio descriptions',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G78'
+		},
+		G173: {
+			title: 'G173: Providing a version of a movie with audio descriptions',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G173'
+		},
+		G8: {
+			title: 'G8: Providing a movie with extended audio descriptions',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G8'
+		},
+		G9: {
+			title: 'G9: Creating captions for live synchronized media',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G9'
+		},
+		G54: {
+			title: 'G54: Including a sign language interpreter in the video stream',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G54'
+		},
+		G81: {
+			title: 'G81: Providing a synchronized video of the sign language interpreter that can be displayed in a different viewport or overlaid on the image by the player',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G81'
+		},
+		G150: {
+			title: 'G150: Providing text based alternatives for live audio-only content',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G150'
+		},
+		G151: {
+			title: 'G151: Providing a link to a text transcript of a prepared statement or script if the script is followed',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G151'
+		},
+		G157: {
+			title: 'G157: Incorporating a live audio captioning service into a Web page',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G157'
+		},
+		H42: {
+			title: 'H42: Using h1-h6 to identify headings',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H42'
+		},
+		H93: {
+			title: 'H93: Ensuring that id attributes are unique on a Web page',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H93'
+		},
+		H44: {
+			title: 'H44: Using label elements to associate text labels with form controls',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H44'
+		},
+		H65: {
+			title: 'H65: Using the title attribute to identify form controls when the label element cannot be used',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H65'
+		},
+		H49: {
+			title: 'H49: Using semantic markup to mark emphasized or special text',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H49'
+		},
+		H63: {
+			title: 'H63: Using the scope attribute to associate header cells and data cells in data tables',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H63'
+		},
+		H43: {
+			title: 'H43: Using id and headers attributes to associate data cells with header cells in data tables',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H43'
+		},
+		H39: {
+			title: 'H39: Using caption elements to associate data table captions with data tables',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H39'
+		},
+		H73: {
+			title: 'H73: Using the summary attribute of the table element to give an overview of data tables',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H73'
+		},
+		H71: {
+			title: 'H71: Providing a description for groups of form controls using fieldset and legend elements ',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H71'
+		},
+		H85: {
+			title: 'H85: Using OPTGROUP to group OPTION elements inside a SELECT',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H85'
+		},
+		H48: {
+			title: 'H48: Using ol, ul and dl for lists or groups of links',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H48'
+		},
+		G141: {
+			title: 'G141: Organizing a page using headings',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G141'
+		},
+		G57: {
+			title: 'G57: Ordering the content in a meaningful sequence',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G57'
+		},
+		G96: {
+			title: 'G96: Providing textual identification of items that otherwise rely only on sensory information to be understood',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G96'
+		},
+		G14: {
+			title: 'G14: Ensuring that information conveyed by color differences is also available in text',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G14'
+		},
+		G182: {
+			title: 'G182: Ensuring that additional visual cues are available when text color differences are used to convey information',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G182'
+		},
+		F23: {
+			title: 'F23: Failure of  1.4.2 due to playing a sound longer than 3 seconds where there is no mechanism to turn it off',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/F23'
+		},
+		G18: {
+			title: 'G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G18'
+		},
+		G145: {
+			title: 'G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G145'
+		},
+		F24: {
+			title: 'F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/F24'
+		},
+		G142: {
+			title: 'G142: Using a technology that has commonly-available user agents that support zoom',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G142'
+		},
+		G140: {
+			title: 'G140: Separating information and structure from presentation to enable different presentations',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G140'
+		},
+		C22: {
+			title: 'C22: Using CSS to control visual presentation of text',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/C22'
+		},
+		C30: {
+			title: 'C30: Using CSS to replace text with images of text and providing user interface controls to switch',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/C30'
+		},
+		G17: {
+			title: 'G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G17'
+		},
+		G56: {
+			title: 'G56: Mixing audio files so that non-speech sounds are at least 20 decibels lower than the speech audio content',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G56'
+		},
+		G148: {
+			title: 'G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G148'
+		},
+		G156: {
+			title: 'G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G156'
+		},
+		G175: {
+			title: 'G175: Providing a multi color selection tool on the page for foreground and background colors',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G175'
+		},
+		H87: {
+			title: 'G146: Using liquid layout',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G146'
+		},
+		C19: {
+			title: 'C19: Specifying alignment either to the left OR right in CSS',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/C19'
+		},
+		G172: {
+			title: 'G172: Providing a mechanism to remove full justification of text',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G172'
+		},
+		G169: {
+			title: 'G169: Aligning text on only one side',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G169'
+		},
+		G188: {
+			title: 'G188: Providing a button on the page to increase line spaces and paragraph spaces',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G188'
+		},
+		C21: {
+			title: 'C21: Specifying line spacing in CSS',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/C21'
+		},
+		SCR20: {
+			title: 'SCR20: Using both keyboard and other device-specific functions',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/SCR20'
+		},
+		F10: {
+			title: 'F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way that traps users inside one format type',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/F10'
+		},
+		F40: {
+			title: 'F40: Failure of Success Criterion 2.2.1 and 2.2.4 due to using meta redirect with a time limit',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/F40'
+		},
+		F41: {
+			title: 'F41: Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/F41'
+		},
+		SCR33: {
+			title: 'SCR33: Using script to scroll content, and providing a mechanism to pause it',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/SCR33'
+		},
+		SCR22: {
+			title: 'SCR22: Using scripts to control blinking and stop it in five seconds or less',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/SCR22'
+		},
+		G187: {
+			title: 'G187: Using a technology to include blinking content that can be turned off via the user agent',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G187'
+		},
+		G152: {
+			title: 'G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G152'
+		},
+		G186: {
+			title: 'G186: Using a control in the Web page that stops moving, blinking, or auto-updating content',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G186'
+		},
+		G191: {
+			title: 'G191: Providing a link, button, or other mechanism that reloads the page without any blinking content',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G191'
+		},
+		F4: {
+			title: 'F4: Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than five seconds',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/F4'
+		},
+		F47: {
+			title: 'F47: Failure of Success Criterion 2.2.2 due to using the blink element',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/F47'
+		},
+		G5: {
+			title: 'G5: Allowing users to complete an activity without any time limit',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G5'
+		},
+		SCR14: {
+			title: 'SCR14: Using scripts to make nonessential alerts optional',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/SCR14'
+		},
+		G105: {
+			title: 'G105: Saving data so that it can be used after a user re-authenticates',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G105'
+		},
+		G181: {
+			title: 'G181: Encoding user data as hidden or encrypted data in a re-authorization page',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G181'
+		},
+		G19: {
+			title: 'G19: Ensuring that no component of the content flashes more than three times in any 1-second period',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G19'
+		},
+		G176: {
+			title: 'G176: Keeping the flashing area small enough',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G176'
+		},
+		H64: {
+			title: 'H64: Using the title attribute of the frame and iframe elements',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H64'
+		},
+		G1: {
+			title: 'G1: Adding a link at the top of each page that goes directly to the main content area',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G1'
+		},
+		G123: {
+			title: 'G123: Adding a link at the beginning of a block of repeated content to go to the end of the block',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G123'
+		},
+		G124: {
+			title: 'G124: Adding links at the top of the page to each area of the content',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G124'
+		},
+		H69: {
+			title: 'H69: Providing heading elements at the beginning of each section of content',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H69'
+		},
+		H25: {
+			title: 'H25: Providing a title using the title element',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H25'
+		},
+		H4: {
+			title: 'H4: Creating a logical tab order through links, form controls, and objects',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H4'
+		},
+		H77: {
+			title: 'H77: Identifying the purpose of a link using link text combined with its enclosing list item',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H77'
+		},
+		H78: {
+			title: 'H78: Identifying the purpose of a link using link text combined with its enclosing paragraph',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H78'
+		},
+		H79: {
+			title: 'H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H79'
+		},
+		H80: {
+			title: 'H80: Identifying the purpose of a link using link text combined with the preceding heading element',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H80'
+		},
+		H81: {
+			title: 'H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H81'
+		},
+		H33: {
+			title: 'H33: Supplementing link text with the title attribute',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H33'
+		},
+		G125: {
+			title: 'G125: Providing links to navigate to related Web pages',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G125'
+		},
+		G64: {
+			title: 'G64: Providing a Table of Contents',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G64'
+		},
+		G63: {
+			title: 'G63: Providing a site map',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G63'
+		},
+		G161: {
+			title: 'G161: Providing a search function to help users find content',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G161'
+		},
+		G126: {
+			title: 'G126: Providing a list of links to all other Web pages',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G126'
+		},
+		G185: {
+			title: 'G185: Linking to all of the pages on the site from the home page',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G185'
+		},
+		G130: {
+			title: 'G130: Providing descriptive headings',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G130'
+		},
+		G131: {
+			title: 'G131: Providing descriptive labels',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G131'
+		},
+		G149: {
+			title: 'G149: Using user interface components that are highlighted by the user agent when they receive focus',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G149'
+		},
+		G165: {
+			title: 'G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G165'
+		},
+		G195: {
+			title: 'G195: Using an author-supplied, highly visible focus indicator',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G195'
+		},
+		C15: {
+			title: 'C15: Using CSS to change the presentation of a user interface component when it receives focus',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/C15'
+		},
+		SCR31: {
+			title: 'SCR31: Using script to change the background color or border of the element with focus',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/SCR31'
+		},
+		H59: {
+			title: 'H59: Using the link element and navigation tools',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H59'
+		},
+		H57: {
+			title: 'H57: Using language attributes on the html element ',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H57'
+		},
+		H58: {
+			title: 'H58: Using language attributes to identify changes in the human language ',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H58'
+		},
+		H40: {
+			title: 'H40: Using description lists',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H40'
+		},
+		H54: {
+			title: 'H54: Using the dfn element to identify the defining instance of a word',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H54'
+		},
+		H60: {
+			title: 'H60: Using the link element to link to a glossary',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H60'
+		},
+		G62: {
+			title: 'G62: Providing a glossary',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G62'
+		},
+		G70: {
+			title: 'G70: Providing a function to search an online dictionary',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G70'
+		},
+		G102: {
+			title: 'G102: Providing the expansion or explanation of an abbreviation',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G102'
+		},
+		G55: {
+			title: 'G55: Linking to definitions',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G55'
+		},
+		H28: {
+			title: 'H28: Providing definitions for abbreviations by using the abbr element',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H28'
+		},
+		G97: {
+			title: 'G97: Providing the first use of an abbreviation immediately before or after the expanded form',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G97'
+		},
+		G86: {
+			title: 'G86: Providing a text summary that can be understood by people with lower secondary education level reading ability',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G86'
+		},
+		G103: {
+			title: 'G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G103'
+		},
+		G79: {
+			title: 'G79: Providing a spoken version of the text',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G79'
+		},
+		G153: {
+			title: 'G153: Making the text easier to read',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G153'
+		},
+		G160: {
+			title: 'G160: Providing sign language versions of information, ideas, and processes that must be understood in order to use the content',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G160'
+		},
+		H62: {
+			title: 'H62: Using the ruby element',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H62'
+		},
+		G107: {
+			title: 'G107: Using \'activate\' rather than \'focus\' as a trigger for changes of context',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G107'
+		},
+		H32: {
+			title: 'H32: Providing submit buttons',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H32'
+		},
+		G61: {
+			title: 'G61: Presenting repeated components in the same relative order each time they appear',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G61'
+		},
+		G197: {
+			title: 'G197: Using labels, names, and text alternatives consistently for content that has the same functionality',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G197'
+		},
+		H83: {
+			title: 'H83: Using the target attribute to open a new window on user request and indicating this in link text',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H83'
+		},
+		G83: {
+			title: 'G83: Providing text descriptions to identify required fields that were not completed',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G83'
+		},
+		G84: {
+			title: 'G84: Providing a text description when the user provides information that is not in the list of allowed values',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G84'
+		},
+		G85: {
+			title: 'G85: Providing a text description when user input falls outside the required format or values',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G85'
+		},
+		G89: {
+			title: 'G89: Providing expected data format and example',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G89'
+		},
+		G184: {
+			title: 'G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G184'
+		},
+		H90: {
+			title: 'H90: Indicating required form controls using label or legend',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H90'
+		},
+		G177: {
+			title: 'G177: Providing suggested correction text',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G177'
+		},
+		G98: {
+			title: 'G98: Providing the ability for the user to review and correct answers before submitting',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G98'
+		},
+		G99: {
+			title: 'G99: Providing the ability to recover deleted information',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G99'
+		},
+		G155: {
+			title: 'G155: Providing a checkbox in addition to a submit button',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G155'
+		},
+		G164: {
+			title: 'G164: Providing a stated time within which an online request (or transaction) may be amended or canceled by the user after making the request',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G164'
+		},
+		G168: {
+			title: 'G168: Requesting confirmation to continue with selected action',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G168'
+		},
+		G71: {
+			title: 'G71: Providing a help link on every Web page',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G71'
+		},
+		G193: {
+			title: 'G193: Providing help by an assistant in the Web page',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/G193'
+		},
+		F77: {
+			title: 'F77: Failure of Success Criterion 4.1.1 due to duplicate values of type ID',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/F77'
+		},
+		H91: {
+			title: 'H91: Using HTML form controls and links',
+			url: 'http://www.w3.org/TR/WCAG20-TECHS/H91'
+		}
+	};
+}

public/js/site.js

@@ -18,8 +18,10 @@ $(document).ready(function(){
     var data = {};
 	var standardsList = $('[data-role="standards-list"]');
 	var standardSelect = $('[data-role="new-task-select"]');
-	var expandLink = $('[data-role="expander"]');
     var taskListSelector = $('[data-role="task-list"] a');
+	var detailsCollapse = $('[data-role="details-collapse"]');
+	var contextPopover = $('[data-role="context-popover"]');
+	var ruleTooltip = $('[data-role="rule-tooltip"]');
     var toTopLinks = $('[data-role="top"]');
     var zoomResetButton = $('[data-role="zoom-reset"]');
     var graphContainer = $('[data-role="graph"]');
@@ -73,32 +75,25 @@ $(document).ready(function(){
         $('body').addClass('custom-legend');
     }
 
-    // Toggle appearance of lists of error/warnings/notices
+	// Update details button title by click
-    expandLink.click( function(){
+	detailsCollapse.click(function(){
-		$(this).next().slideToggle('slow', function(){});
+		$(this).toggleClass('btn_state_collapsed');
-        if ($(this).hasClass('showing')) {
-            $(this).find('span.expander').html('↓');
-            $(this).attr('aria-expanded', false);
-        }
-        else {
-            $(this).find('span.expander').html('↑');
-            $(this).attr('aria-expanded', true);
-        }
-        $(this).toggleClass('showing');
 	});
-    $(document).on('keydown.lists', '[data-role="expander"]', function (e) {
-        var $this = $(this);
-        var k = e.which || e.keyCode;
 
-        if (!/(13|32)/.test(k)) {
+	// Initialize context popovers
-            return;
+	$(contextPopover).popover({
-        }
+		container: 'body',
-        if (k === 13 || k === 32) {
+		placement: 'bottom'
-            $this.click();
+	});
-        }
 
-        e.preventDefault();
+	$(document.body).click(function (e) {
-        e.stopPropagation();
+		$(contextPopover).each(function () {
+			if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
+				if ($(this).data('bs.popover').tip().hasClass('in')) {
+					$(this).popover('toggle');
+				}
+			}
+		});
 	});
 
      // Back to top links
@@ -137,7 +132,7 @@ $(document).ready(function(){
         plotGraphData();
     });
 
-    $('[data-role="rules-tooltip"]').tooltip();
+    $(ruleTooltip).tooltip();
 
     // Function to animate sections
     function animateSection (sectionName, offset){
@@ -287,7 +282,7 @@ $(document).ready(function(){
     var previousPoint = null;
     graphContainer.bind('plothover', function (event, pos, item) {
         if (item) {
-            if (previousPoint != item.dataIndex) {
+            if (previousPoint !== item.dataIndex) {
                 previousPoint = item.dataIndex;
                 $('[data-role="tooltip"]').remove();
                 var count = item.datapoint[1].toFixed(0);

public/less/alerts.less

@@ -2,7 +2,6 @@
 // Alerts
 // --------------------------------------------------
 
-
 // Base styles
 // -------------------------
 
@@ -18,6 +17,7 @@
 	// Specified for the h4 to prevent conflicts of changing @headingsColor
 	color: inherit;
   }
+
   // Provide class for links that match alerts
   .alert-link {
 	font-weight: @alert-link-font-weight;
@@ -56,12 +56,15 @@
 .alert-success {
   .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
 }
+
 .alert-info {
   .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
 }
+
 .alert-warning {
   .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
 }
+
 .alert-danger {
   .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
 }

public/less/badges.less

@@ -2,7 +2,6 @@
 // Badges
 // --------------------------------------------------
 
-
 // Base classes
 .badge {
   display: inline-block;
@@ -46,6 +45,7 @@ a.list-group-item.active > .badge,
   color: @badge-active-color;
   background-color: @badge-active-bg;
 }
+
 .nav-pills > li > a > .badge {
   margin-left: 3px;
 }

public/less/bootswatch.less

@@ -39,7 +39,6 @@
 // Tables =====================================================================
 
 .table {
-
   tr.success,
   tr.warning,
   tr.danger {
@@ -112,7 +111,6 @@ input[type="color"],
 // Navs =======================================================================
 
 .pagination {
-	
   a {
 	color: #fff;
 
@@ -152,7 +150,6 @@ input[type="color"],
 // Indicators =================================================================
 
 .alert {
-
   a,
   .alert-link {
 	color: #fff;

public/less/breadcrumbs.less

@@ -2,7 +2,6 @@
 // Breadcrumbs
 // --------------------------------------------------
 
-
 .breadcrumb {
   padding: 8px 15px;
   margin-bottom: @line-height-computed;

public/less/button-groups.less

@@ -10,6 +10,7 @@
   .btn-default & {
 	border-top-color: @btn-default-color;
   }
+
   .btn-primary &,
   .btn-success &,
   .btn-warning &,
@@ -18,10 +19,12 @@
 	border-top-color: #fff;
   }
 }
+
 .dropup {
   & .btn-default .caret {
 	border-bottom-color: @btn-default-color;
   }
+
   .btn-primary,
   .btn-success,
   .btn-warning,
@@ -94,6 +97,7 @@
 	.border-right-radius(0);
   }
 }
+
 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
 .btn-group > .btn:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
@@ -104,15 +108,18 @@
 .btn-group > .btn-group {
   float: left;
 }
+
 .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
   border-radius: 0;
 }
+
 .btn-group > .btn-group:first-child {
   > .btn:last-child,
   > .dropdown-toggle {
 	.border-right-radius(0);
   }
 }
+
 .btn-group > .btn-group:last-child > .btn:first-child {
   .border-left-radius(0);
 }
@@ -123,15 +130,21 @@
   outline: 0;
 }
 
-
 // Sizing
 //
 // Remix the default button sizing classes into new ones for easier manipulation.
 
-.btn-group-xs > .btn { .btn-xs(); }
+.btn-group-xs > .btn {
-.btn-group-sm > .btn { .btn-sm(); }
+  .btn-xs();
-.btn-group-lg > .btn { .btn-lg(); }
+}
 
+.btn-group-sm > .btn {
+  .btn-sm();
+}
+
+.btn-group-lg > .btn {
+  .btn-lg();
+}
 
 // Split button dropdowns
 // ----------------------
@@ -141,6 +154,7 @@
   padding-left: 8px;
   padding-right: 8px;
 }
+
 .btn-group > .btn-lg + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px;
@@ -152,22 +166,22 @@
   .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
 }
 
-
 // Reposition the caret
 .btn .caret {
   margin-left: 0;
 }
+
 // Carets in other button sizes
 .btn-lg .caret {
   border-width: @caret-width-large @caret-width-large 0;
   border-bottom-width: 0;
 }
+
 // Upside down carets for .dropup
 .dropup .btn-lg .caret {
   border-width: 0 @caret-width-large @caret-width-large;
 }
 
-
 // Vertical button groups
 // ----------------------
 
@@ -210,21 +224,22 @@
 	.border-top-radius(0);
   }
 }
+
 .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
   border-radius: 0;
 }
+
 .btn-group-vertical > .btn-group:first-child {
   > .btn:last-child,
   > .dropdown-toggle {
 	.border-bottom-radius(0);
   }
 }
+
 .btn-group-vertical > .btn-group:last-child > .btn:first-child {
   .border-top-radius(0);
 }
 
-
-
 // Justified button groups
 // ----------------------
 
@@ -233,6 +248,7 @@
   width: 100%;
   table-layout: fixed;
   border-collapse: separate;
+
   .btn {
 	float: none;
 	display: table-cell;
@@ -240,7 +256,6 @@
   }
 }
 
-
 // Checkbox and radio options
 [data-toggle="buttons"] > .btn > input[type="radio"],
 [data-toggle="buttons"] > .btn > input[type="checkbox"] {

public/less/buttons.less

@@ -2,7 +2,6 @@
 // Buttons
 // --------------------------------------------------
 
-
 // Base styles
 // --------------------------------------------------
 
@@ -51,34 +50,37 @@
 
 }
 
-
 // Alternate buttons
 // --------------------------------------------------
 
 .btn-default {
   .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
 }
+
 .btn-primary {
   .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
 }
+
 // Warning appears as orange
 .btn-warning {
   .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
 }
+
 // Danger and error appear as red
 .btn-danger {
   .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
 }
+
 // Success appears as green
 .btn-success {
   .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
 }
+
 // Info appears as blue-green
 .btn-info {
   .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
 }
 
-
 // Link buttons
 // -------------------------
 
@@ -118,7 +120,6 @@
   }
 }
 
-
 // Button Sizes
 // --------------------------------------------------
 
@@ -126,16 +127,17 @@
   // line-height: ensure even-numbered height of button next to large input
   .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
 }
+
 .btn-sm,
 .btn-xs {
   // line-height: ensure proper height of button next to small input
   .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
 }
+
 .btn-xs {
   padding: 1px 5px;
 }
 
-
 // Block button
 // --------------------------------------------------
 

public/less/carousel.less

@@ -2,7 +2,6 @@
 // Carousel
 // --------------------------------------------------
 
-
 // Wrapper for the slide container and indicators
 .carousel {
   position: relative;
@@ -28,7 +27,9 @@
 
   > .active,
   > .next,
-  > .prev { display: block; }
+  > .prev {
+	display: block;
+  }
 
   > .active {
 	left: 0;
@@ -106,14 +107,17 @@
 	z-index: 5;
 	display: inline-block;
   }
+
   .icon-prev,
   .glyphicon-chevron-left {
 	left: 50%;
   }
+
   .icon-next,
   .glyphicon-chevron-right {
 	right: 50%;
   }
+
   .icon-prev,
   .icon-next {
 	width: 20px;
@@ -128,6 +132,7 @@
 	  content: '\2039'; // SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
 	}
   }
+
   .icon-next {
 	&:before {
 	  content: '\203a'; // SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
@@ -161,6 +166,7 @@
 	border-radius: 10px;
 	cursor: pointer;
   }
+
   .active {
 	margin: 0;
 	width: 12px;
@@ -183,15 +189,14 @@
   color: @carousel-caption-color;
   text-align: center;
   text-shadow: @carousel-text-shadow;
+
   & .btn {
 	text-shadow: none; // No shadow for button elements in carousel-caption
   }
 }
 
-
 // Scale up controls for tablets and up
 @media screen and (min-width: @screen-sm-min) {
-
   // Scale up the controls a smidge
   .carousel-control {
 	.glyphicons-chevron-left,

public/less/close.less

@@ -2,7 +2,6 @@
 // Close icons
 // --------------------------------------------------
 
-
 .close {
   float: right;
   font-size: (@font-size-base * 1.5);

public/less/code.less

@@ -2,7 +2,6 @@
 // Code (inline and blocK)
 // --------------------------------------------------
 
-
 // Inline and block code styles
 code,
 kdb,

public/less/component-animations.less

@@ -10,6 +10,7 @@
 .fade {
   opacity: 0;
   .transition(opacity .15s linear);
+
   &.in {
 	opacity: 1;
   }
@@ -17,10 +18,12 @@
 
 .collapse {
   display: none;
+
   &.in {
 	display: block;
   }
 }
+
 .collapsing {
   position: relative;
   height: 0;

public/less/dropdowns.less

@@ -2,7 +2,6 @@
 // Dropdown menus
 // --------------------------------------------------
 
-
 // Dropdown arrow/caret
 .caret {
   display: inline-block;
@@ -105,6 +104,7 @@
 	color: @dropdown-link-disabled-color;
   }
 }
+
 // Nuke hover/focus effects
 .dropdown-menu > .disabled > a {
   &:hover,
@@ -170,6 +170,7 @@
 	border-bottom: 4px solid @dropdown-caret-color;
 	content: "";
   }
+
   // Different positioning for bottom up menu
   .dropdown-menu {
 	top: auto;
@@ -178,7 +179,6 @@
   }
 }
 
-
 // Component alignment
 //
 // Reiterate per navbar.less and the modified component alignment there.

public/less/forms.less

@@ -2,7 +2,6 @@
 // Forms
 // --------------------------------------------------
 
-
 // Normalize non-controls
 //
 // Restyle and baseline non-control form elements.
@@ -31,7 +30,6 @@ label {
   font-weight: bold;
 }
 
-
 // Normalize form controls
 
 // Override content-box in Normalize (* isn't specific enough)
@@ -100,7 +98,6 @@ output {
   .placeholder();
 }
 
-
 // Common form controls
 //
 // Shared size and type resets for form controls. Apply `.form-control` to any
@@ -159,7 +156,6 @@ output {
   }
 }
 
-
 // Form groups
 //
 // Designed to help with the organization and spacing of vertical forms. For
@@ -169,7 +165,6 @@ output {
   margin-bottom: 15px;
 }
 
-
 // Checkboxes and radios
 //
 // Indent the labels to position radios/checkboxes as hanging controls.
@@ -182,6 +177,7 @@ output {
   margin-bottom: 10px;
   padding-left: 20px;
   vertical-align: middle;
+
   label {
 	display: inline;
 	margin-bottom: 0;
@@ -189,6 +185,7 @@ output {
 	cursor: pointer;
   }
 }
+
 .radio input[type="radio"],
 .radio-inline input[type="radio"],
 .checkbox input[type="checkbox"],
@@ -196,6 +193,7 @@ output {
   float: left;
   margin-left: -20px;
 }
+
 .radio + .radio,
 .checkbox + .checkbox {
   margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
@@ -211,6 +209,7 @@ output {
   font-weight: normal;
   cursor: pointer;
 }
+
 .radio-inline + .radio-inline,
 .checkbox-inline + .checkbox-inline {
   margin-top: 0;
@@ -241,7 +240,6 @@ input[type="checkbox"],
   .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
 }
 
-
 // Form control feedback states
 //
 // Apply contextual and semantic states to individual form controls.
@@ -250,16 +248,17 @@ input[type="checkbox"],
 .has-warning {
   .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
 }
+
 // Error
 .has-error {
   .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 }
+
 // Success
 .has-success {
   .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
 }
 
-
 // Static form control text
 //
 // Apply class to a `p` element to make any string of text align with labels in
@@ -270,7 +269,6 @@ input[type="checkbox"],
   padding-top: (@padding-base-vertical + 1);
 }
 
-
 // Help text
 //
 // Apply to any element you wish to create light text for placement immediately
@@ -283,8 +281,6 @@ input[type="checkbox"],
   color: lighten(@text-color, 25%); // lighten the text some for contrast
 }
 
-
-
 // Inline forms
 //
 // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
@@ -297,7 +293,6 @@ input[type="checkbox"],
 // Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
 
 .form-inline {
-
   // Kick in the inline
   @media (min-width: @screen-sm) {
 	// Inline-block all the things for "inline"
@@ -322,6 +317,7 @@ input[type="checkbox"],
 	  margin-bottom: 0;
 	  padding-left: 0;
 	}
+
 	.radio input[type="radio"],
 	.checkbox input[type="checkbox"] {
 	  float: none;
@@ -330,14 +326,12 @@ input[type="checkbox"],
   }
 }
 
-
 // Horizontal forms
 //
 // Horizontal forms are built on grid classes and allow you to create forms with
 // labels on the left and inputs on the right.
 
 .form-horizontal {
-
   // Consistent vertical alignment of labels, radios, and checkboxes
   .control-label,
   .radio,

public/less/grid.less

@@ -2,7 +2,6 @@
 // Grid system
 // --------------------------------------------------
 
-
 // Set the container width, and override it for fixed navbars in media queries
 .container {
   .container-fixed();
@@ -70,7 +69,6 @@
   padding-right: (@grid-gutter-width / 2);
 }
 
-
 // Extra small grid
 //
 // Grid classes for extra small devices like smartphones. No offset, push, or
@@ -92,19 +90,54 @@
 .col-xs-11 {
   float: left;
 }
-.col-xs-1  { width: percentage((1 / @grid-columns)); }
-.col-xs-2  { width: percentage((2 / @grid-columns)); }
-.col-xs-3  { width: percentage((3 / @grid-columns)); }
-.col-xs-4  { width: percentage((4 / @grid-columns)); }
-.col-xs-5  { width: percentage((5 / @grid-columns)); }
-.col-xs-6  { width: percentage((6 / @grid-columns)); }
-.col-xs-7  { width: percentage((7 / @grid-columns)); }
-.col-xs-8  { width: percentage((8 / @grid-columns)); }
-.col-xs-9  { width: percentage((9 / @grid-columns)); }
-.col-xs-10 { width: percentage((10/ @grid-columns)); }
-.col-xs-11 { width: percentage((11/ @grid-columns)); }
-.col-xs-12 { width: 100%; }
 
+.col-xs-1 {
+  width: percentage((1 / @grid-columns));
+}
+
+.col-xs-2 {
+  width: percentage((2 / @grid-columns));
+}
+
+.col-xs-3 {
+  width: percentage((3 / @grid-columns));
+}
+
+.col-xs-4 {
+  width: percentage((4 / @grid-columns));
+}
+
+.col-xs-5 {
+  width: percentage((5 / @grid-columns));
+}
+
+.col-xs-6 {
+  width: percentage((6 / @grid-columns));
+}
+
+.col-xs-7 {
+  width: percentage((7 / @grid-columns));
+}
+
+.col-xs-8 {
+  width: percentage((8 / @grid-columns));
+}
+
+.col-xs-9 {
+  width: percentage((9 / @grid-columns));
+}
+
+.col-xs-10 {
+  width: percentage((10/ @grid-columns));
+}
+
+.col-xs-11 {
+  width: percentage((11/ @grid-columns));
+}
+
+.col-xs-12 {
+  width: 100%;
+}
 
 // Small grid
 //
@@ -132,58 +165,189 @@
   .col-sm-11 {
 	float: left;
   }
-  .col-sm-1  { width: percentage((1 / @grid-columns)); }
-  .col-sm-2  { width: percentage((2 / @grid-columns)); }
-  .col-sm-3  { width: percentage((3 / @grid-columns)); }
-  .col-sm-4  { width: percentage((4 / @grid-columns)); }
-  .col-sm-5  { width: percentage((5 / @grid-columns)); }
-  .col-sm-6  { width: percentage((6 / @grid-columns)); }
-  .col-sm-7  { width: percentage((7 / @grid-columns)); }
-  .col-sm-8  { width: percentage((8 / @grid-columns)); }
-  .col-sm-9  { width: percentage((9 / @grid-columns)); }
-  .col-sm-10 { width: percentage((10/ @grid-columns)); }
-  .col-sm-11 { width: percentage((11/ @grid-columns)); }
-  .col-sm-12 { width: 100%; }
 
-  // Push and pull columns for source order changes
+  .col-sm-1 {
-  .col-sm-push-1  { left: percentage((1 / @grid-columns)); }
+	width: percentage((1 / @grid-columns));
-  .col-sm-push-2  { left: percentage((2 / @grid-columns)); }
-  .col-sm-push-3  { left: percentage((3 / @grid-columns)); }
-  .col-sm-push-4  { left: percentage((4 / @grid-columns)); }
-  .col-sm-push-5  { left: percentage((5 / @grid-columns)); }
-  .col-sm-push-6  { left: percentage((6 / @grid-columns)); }
-  .col-sm-push-7  { left: percentage((7 / @grid-columns)); }
-  .col-sm-push-8  { left: percentage((8 / @grid-columns)); }
-  .col-sm-push-9  { left: percentage((9 / @grid-columns)); }
-  .col-sm-push-10 { left: percentage((10/ @grid-columns)); }
-  .col-sm-push-11 { left: percentage((11/ @grid-columns)); }
-
-  .col-sm-pull-1  { right: percentage((1 / @grid-columns)); }
-  .col-sm-pull-2  { right: percentage((2 / @grid-columns)); }
-  .col-sm-pull-3  { right: percentage((3 / @grid-columns)); }
-  .col-sm-pull-4  { right: percentage((4 / @grid-columns)); }
-  .col-sm-pull-5  { right: percentage((5 / @grid-columns)); }
-  .col-sm-pull-6  { right: percentage((6 / @grid-columns)); }
-  .col-sm-pull-7  { right: percentage((7 / @grid-columns)); }
-  .col-sm-pull-8  { right: percentage((8 / @grid-columns)); }
-  .col-sm-pull-9  { right: percentage((9 / @grid-columns)); }
-  .col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
-  .col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
-
-  // Offsets
-  .col-sm-offset-1  { margin-left: percentage((1 / @grid-columns)); }
-  .col-sm-offset-2  { margin-left: percentage((2 / @grid-columns)); }
-  .col-sm-offset-3  { margin-left: percentage((3 / @grid-columns)); }
-  .col-sm-offset-4  { margin-left: percentage((4 / @grid-columns)); }
-  .col-sm-offset-5  { margin-left: percentage((5 / @grid-columns)); }
-  .col-sm-offset-6  { margin-left: percentage((6 / @grid-columns)); }
-  .col-sm-offset-7  { margin-left: percentage((7 / @grid-columns)); }
-  .col-sm-offset-8  { margin-left: percentage((8 / @grid-columns)); }
-  .col-sm-offset-9  { margin-left: percentage((9 / @grid-columns)); }
-  .col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
-  .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
   }
 
+  .col-sm-2 {
+	width: percentage((2 / @grid-columns));
+  }
+
+  .col-sm-3 {
+	width: percentage((3 / @grid-columns));
+  }
+
+  .col-sm-4 {
+	width: percentage((4 / @grid-columns));
+  }
+
+  .col-sm-5 {
+	width: percentage((5 / @grid-columns));
+  }
+
+  .col-sm-6 {
+	width: percentage((6 / @grid-columns));
+  }
+
+  .col-sm-7 {
+	width: percentage((7 / @grid-columns));
+  }
+
+  .col-sm-8 {
+	width: percentage((8 / @grid-columns));
+  }
+
+  .col-sm-9 {
+	width: percentage((9 / @grid-columns));
+  }
+
+  .col-sm-10 {
+	width: percentage((10/ @grid-columns));
+  }
+
+  .col-sm-11 {
+	width: percentage((11/ @grid-columns));
+  }
+
+  .col-sm-12 {
+	width: 100%;
+  }
+
+  // Push and pull columns for source order changes
+  .col-sm-push-1 {
+	left: percentage((1 / @grid-columns));
+  }
+
+  .col-sm-push-2 {
+	left: percentage((2 / @grid-columns));
+  }
+
+  .col-sm-push-3 {
+	left: percentage((3 / @grid-columns));
+  }
+
+  .col-sm-push-4 {
+	left: percentage((4 / @grid-columns));
+  }
+
+  .col-sm-push-5 {
+	left: percentage((5 / @grid-columns));
+  }
+
+  .col-sm-push-6 {
+	left: percentage((6 / @grid-columns));
+  }
+
+  .col-sm-push-7 {
+	left: percentage((7 / @grid-columns));
+  }
+
+  .col-sm-push-8 {
+	left: percentage((8 / @grid-columns));
+  }
+
+  .col-sm-push-9 {
+	left: percentage((9 / @grid-columns));
+  }
+
+  .col-sm-push-10 {
+	left: percentage((10/ @grid-columns));
+  }
+
+  .col-sm-push-11 {
+	left: percentage((11/ @grid-columns));
+  }
+
+  .col-sm-pull-1 {
+	right: percentage((1 / @grid-columns));
+  }
+
+  .col-sm-pull-2 {
+	right: percentage((2 / @grid-columns));
+  }
+
+  .col-sm-pull-3 {
+	right: percentage((3 / @grid-columns));
+  }
+
+  .col-sm-pull-4 {
+	right: percentage((4 / @grid-columns));
+  }
+
+  .col-sm-pull-5 {
+	right: percentage((5 / @grid-columns));
+  }
+
+  .col-sm-pull-6 {
+	right: percentage((6 / @grid-columns));
+  }
+
+  .col-sm-pull-7 {
+	right: percentage((7 / @grid-columns));
+  }
+
+  .col-sm-pull-8 {
+	right: percentage((8 / @grid-columns));
+  }
+
+  .col-sm-pull-9 {
+	right: percentage((9 / @grid-columns));
+  }
+
+  .col-sm-pull-10 {
+	right: percentage((10/ @grid-columns));
+  }
+
+  .col-sm-pull-11 {
+	right: percentage((11/ @grid-columns));
+  }
+
+  // Offsets
+  .col-sm-offset-1 {
+	margin-left: percentage((1 / @grid-columns));
+  }
+
+  .col-sm-offset-2 {
+	margin-left: percentage((2 / @grid-columns));
+  }
+
+  .col-sm-offset-3 {
+	margin-left: percentage((3 / @grid-columns));
+  }
+
+  .col-sm-offset-4 {
+	margin-left: percentage((4 / @grid-columns));
+  }
+
+  .col-sm-offset-5 {
+	margin-left: percentage((5 / @grid-columns));
+  }
+
+  .col-sm-offset-6 {
+	margin-left: percentage((6 / @grid-columns));
+  }
+
+  .col-sm-offset-7 {
+	margin-left: percentage((7 / @grid-columns));
+  }
+
+  .col-sm-offset-8 {
+	margin-left: percentage((8 / @grid-columns));
+  }
+
+  .col-sm-offset-9 {
+	margin-left: percentage((9 / @grid-columns));
+  }
+
+  .col-sm-offset-10 {
+	margin-left: percentage((10/ @grid-columns));
+  }
+
+  .col-sm-offset-11 {
+	margin-left: percentage((11/ @grid-columns));
+  }
+}
 
 // Medium grid
 //
@@ -196,6 +360,7 @@
   .container {
 	width: @container-md;
   }
+
   .col-md-1,
   .col-md-2,
   .col-md-3,
@@ -209,61 +374,201 @@
   .col-md-11 {
 	float: left;
   }
-  .col-md-1  { width: percentage((1 / @grid-columns)); }
-  .col-md-2  { width: percentage((2 / @grid-columns)); }
-  .col-md-3  { width: percentage((3 / @grid-columns)); }
-  .col-md-4  { width: percentage((4 / @grid-columns)); }
-  .col-md-5  { width: percentage((5 / @grid-columns)); }
-  .col-md-6  { width: percentage((6 / @grid-columns)); }
-  .col-md-7  { width: percentage((7 / @grid-columns)); }
-  .col-md-8  { width: percentage((8 / @grid-columns)); }
-  .col-md-9  { width: percentage((9 / @grid-columns)); }
-  .col-md-10 { width: percentage((10/ @grid-columns)); }
-  .col-md-11 { width: percentage((11/ @grid-columns)); }
-  .col-md-12 { width: 100%; }
 
-  // Push and pull columns for source order changes
+  .col-md-1 {
-  .col-md-push-0  { left: auto; }
+	width: percentage((1 / @grid-columns));
-  .col-md-push-1  { left: percentage((1 / @grid-columns)); }
-  .col-md-push-2  { left: percentage((2 / @grid-columns)); }
-  .col-md-push-3  { left: percentage((3 / @grid-columns)); }
-  .col-md-push-4  { left: percentage((4 / @grid-columns)); }
-  .col-md-push-5  { left: percentage((5 / @grid-columns)); }
-  .col-md-push-6  { left: percentage((6 / @grid-columns)); }
-  .col-md-push-7  { left: percentage((7 / @grid-columns)); }
-  .col-md-push-8  { left: percentage((8 / @grid-columns)); }
-  .col-md-push-9  { left: percentage((9 / @grid-columns)); }
-  .col-md-push-10 { left: percentage((10/ @grid-columns)); }
-  .col-md-push-11 { left: percentage((11/ @grid-columns)); }
-
-  .col-md-pull-0  { right: auto; }
-  .col-md-pull-1  { right: percentage((1 / @grid-columns)); }
-  .col-md-pull-2  { right: percentage((2 / @grid-columns)); }
-  .col-md-pull-3  { right: percentage((3 / @grid-columns)); }
-  .col-md-pull-4  { right: percentage((4 / @grid-columns)); }
-  .col-md-pull-5  { right: percentage((5 / @grid-columns)); }
-  .col-md-pull-6  { right: percentage((6 / @grid-columns)); }
-  .col-md-pull-7  { right: percentage((7 / @grid-columns)); }
-  .col-md-pull-8  { right: percentage((8 / @grid-columns)); }
-  .col-md-pull-9  { right: percentage((9 / @grid-columns)); }
-  .col-md-pull-10 { right: percentage((10/ @grid-columns)); }
-  .col-md-pull-11 { right: percentage((11/ @grid-columns)); }
-
-  // Offsets
-  .col-md-offset-0  { margin-left: 0; }
-  .col-md-offset-1  { margin-left: percentage((1 / @grid-columns)); }
-  .col-md-offset-2  { margin-left: percentage((2 / @grid-columns)); }
-  .col-md-offset-3  { margin-left: percentage((3 / @grid-columns)); }
-  .col-md-offset-4  { margin-left: percentage((4 / @grid-columns)); }
-  .col-md-offset-5  { margin-left: percentage((5 / @grid-columns)); }
-  .col-md-offset-6  { margin-left: percentage((6 / @grid-columns)); }
-  .col-md-offset-7  { margin-left: percentage((7 / @grid-columns)); }
-  .col-md-offset-8  { margin-left: percentage((8 / @grid-columns)); }
-  .col-md-offset-9  { margin-left: percentage((9 / @grid-columns)); }
-  .col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
-  .col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
   }
 
+  .col-md-2 {
+	width: percentage((2 / @grid-columns));
+  }
+
+  .col-md-3 {
+	width: percentage((3 / @grid-columns));
+  }
+
+  .col-md-4 {
+	width: percentage((4 / @grid-columns));
+  }
+
+  .col-md-5 {
+	width: percentage((5 / @grid-columns));
+  }
+
+  .col-md-6 {
+	width: percentage((6 / @grid-columns));
+  }
+
+  .col-md-7 {
+	width: percentage((7 / @grid-columns));
+  }
+
+  .col-md-8 {
+	width: percentage((8 / @grid-columns));
+  }
+
+  .col-md-9 {
+	width: percentage((9 / @grid-columns));
+  }
+
+  .col-md-10 {
+	width: percentage((10/ @grid-columns));
+  }
+
+  .col-md-11 {
+	width: percentage((11/ @grid-columns));
+  }
+
+  .col-md-12 {
+	width: 100%;
+  }
+
+  // Push and pull columns for source order changes
+  .col-md-push-0 {
+	left: auto;
+  }
+
+  .col-md-push-1 {
+	left: percentage((1 / @grid-columns));
+  }
+
+  .col-md-push-2 {
+	left: percentage((2 / @grid-columns));
+  }
+
+  .col-md-push-3 {
+	left: percentage((3 / @grid-columns));
+  }
+
+  .col-md-push-4 {
+	left: percentage((4 / @grid-columns));
+  }
+
+  .col-md-push-5 {
+	left: percentage((5 / @grid-columns));
+  }
+
+  .col-md-push-6 {
+	left: percentage((6 / @grid-columns));
+  }
+
+  .col-md-push-7 {
+	left: percentage((7 / @grid-columns));
+  }
+
+  .col-md-push-8 {
+	left: percentage((8 / @grid-columns));
+  }
+
+  .col-md-push-9 {
+	left: percentage((9 / @grid-columns));
+  }
+
+  .col-md-push-10 {
+	left: percentage((10/ @grid-columns));
+  }
+
+  .col-md-push-11 {
+	left: percentage((11/ @grid-columns));
+  }
+
+  .col-md-pull-0 {
+	right: auto;
+  }
+
+  .col-md-pull-1 {
+	right: percentage((1 / @grid-columns));
+  }
+
+  .col-md-pull-2 {
+	right: percentage((2 / @grid-columns));
+  }
+
+  .col-md-pull-3 {
+	right: percentage((3 / @grid-columns));
+  }
+
+  .col-md-pull-4 {
+	right: percentage((4 / @grid-columns));
+  }
+
+  .col-md-pull-5 {
+	right: percentage((5 / @grid-columns));
+  }
+
+  .col-md-pull-6 {
+	right: percentage((6 / @grid-columns));
+  }
+
+  .col-md-pull-7 {
+	right: percentage((7 / @grid-columns));
+  }
+
+  .col-md-pull-8 {
+	right: percentage((8 / @grid-columns));
+  }
+
+  .col-md-pull-9 {
+	right: percentage((9 / @grid-columns));
+  }
+
+  .col-md-pull-10 {
+	right: percentage((10/ @grid-columns));
+  }
+
+  .col-md-pull-11 {
+	right: percentage((11/ @grid-columns));
+  }
+
+  // Offsets
+  .col-md-offset-0 {
+	margin-left: 0;
+  }
+
+  .col-md-offset-1 {
+	margin-left: percentage((1 / @grid-columns));
+  }
+
+  .col-md-offset-2 {
+	margin-left: percentage((2 / @grid-columns));
+  }
+
+  .col-md-offset-3 {
+	margin-left: percentage((3 / @grid-columns));
+  }
+
+  .col-md-offset-4 {
+	margin-left: percentage((4 / @grid-columns));
+  }
+
+  .col-md-offset-5 {
+	margin-left: percentage((5 / @grid-columns));
+  }
+
+  .col-md-offset-6 {
+	margin-left: percentage((6 / @grid-columns));
+  }
+
+  .col-md-offset-7 {
+	margin-left: percentage((7 / @grid-columns));
+  }
+
+  .col-md-offset-8 {
+	margin-left: percentage((8 / @grid-columns));
+  }
+
+  .col-md-offset-9 {
+	margin-left: percentage((9 / @grid-columns));
+  }
+
+  .col-md-offset-10 {
+	margin-left: percentage((10/ @grid-columns));
+  }
+
+  .col-md-offset-11 {
+	margin-left: percentage((11/ @grid-columns));
+  }
+}
 
 // Large grid
 //
@@ -290,57 +595,198 @@
   .col-lg-11 {
 	float: left;
   }
-  .col-lg-1  { width: percentage((1 / @grid-columns)); }
+
-  .col-lg-2  { width: percentage((2 / @grid-columns)); }
+  .col-lg-1 {
-  .col-lg-3  { width: percentage((3 / @grid-columns)); }
+	width: percentage((1 / @grid-columns));
-  .col-lg-4  { width: percentage((4 / @grid-columns)); }
+  }
-  .col-lg-5  { width: percentage((5 / @grid-columns)); }
+
-  .col-lg-6  { width: percentage((6 / @grid-columns)); }
+  .col-lg-2 {
-  .col-lg-7  { width: percentage((7 / @grid-columns)); }
+	width: percentage((2 / @grid-columns));
-  .col-lg-8  { width: percentage((8 / @grid-columns)); }
+  }
-  .col-lg-9  { width: percentage((9 / @grid-columns)); }
+
-  .col-lg-10 { width: percentage((10/ @grid-columns)); }
+  .col-lg-3 {
-  .col-lg-11 { width: percentage((11/ @grid-columns)); }
+	width: percentage((3 / @grid-columns));
-  .col-lg-12 { width: 100%; }
+  }
+
+  .col-lg-4 {
+	width: percentage((4 / @grid-columns));
+  }
+
+  .col-lg-5 {
+	width: percentage((5 / @grid-columns));
+  }
+
+  .col-lg-6 {
+	width: percentage((6 / @grid-columns));
+  }
+
+  .col-lg-7 {
+	width: percentage((7 / @grid-columns));
+  }
+
+  .col-lg-8 {
+	width: percentage((8 / @grid-columns));
+  }
+
+  .col-lg-9 {
+	width: percentage((9 / @grid-columns));
+  }
+
+  .col-lg-10 {
+	width: percentage((10/ @grid-columns));
+  }
+
+  .col-lg-11 {
+	width: percentage((11/ @grid-columns));
+  }
+
+  .col-lg-12 {
+	width: 100%;
+  }
 
   // Push and pull columns for source order changes
-  .col-lg-push-0  { left: auto; }
+  .col-lg-push-0 {
-  .col-lg-push-1  { left: percentage((1 / @grid-columns)); }
+	left: auto;
-  .col-lg-push-2  { left: percentage((2 / @grid-columns)); }
+  }
-  .col-lg-push-3  { left: percentage((3 / @grid-columns)); }
-  .col-lg-push-4  { left: percentage((4 / @grid-columns)); }
-  .col-lg-push-5  { left: percentage((5 / @grid-columns)); }
-  .col-lg-push-6  { left: percentage((6 / @grid-columns)); }
-  .col-lg-push-7  { left: percentage((7 / @grid-columns)); }
-  .col-lg-push-8  { left: percentage((8 / @grid-columns)); }
-  .col-lg-push-9  { left: percentage((9 / @grid-columns)); }
-  .col-lg-push-10 { left: percentage((10/ @grid-columns)); }
-  .col-lg-push-11 { left: percentage((11/ @grid-columns)); }
 
-  .col-lg-pull-0  { right: auto; }
+  .col-lg-push-1 {
-  .col-lg-pull-1  { right: percentage((1 / @grid-columns)); }
+	left: percentage((1 / @grid-columns));
-  .col-lg-pull-2  { right: percentage((2 / @grid-columns)); }
+  }
-  .col-lg-pull-3  { right: percentage((3 / @grid-columns)); }
+
-  .col-lg-pull-4  { right: percentage((4 / @grid-columns)); }
+  .col-lg-push-2 {
-  .col-lg-pull-5  { right: percentage((5 / @grid-columns)); }
+	left: percentage((2 / @grid-columns));
-  .col-lg-pull-6  { right: percentage((6 / @grid-columns)); }
+  }
-  .col-lg-pull-7  { right: percentage((7 / @grid-columns)); }
+
-  .col-lg-pull-8  { right: percentage((8 / @grid-columns)); }
+  .col-lg-push-3 {
-  .col-lg-pull-9  { right: percentage((9 / @grid-columns)); }
+	left: percentage((3 / @grid-columns));
-  .col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
+  }
-  .col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
+
+  .col-lg-push-4 {
+	left: percentage((4 / @grid-columns));
+  }
+
+  .col-lg-push-5 {
+	left: percentage((5 / @grid-columns));
+  }
+
+  .col-lg-push-6 {
+	left: percentage((6 / @grid-columns));
+  }
+
+  .col-lg-push-7 {
+	left: percentage((7 / @grid-columns));
+  }
+
+  .col-lg-push-8 {
+	left: percentage((8 / @grid-columns));
+  }
+
+  .col-lg-push-9 {
+	left: percentage((9 / @grid-columns));
+  }
+
+  .col-lg-push-10 {
+	left: percentage((10/ @grid-columns));
+  }
+
+  .col-lg-push-11 {
+	left: percentage((11/ @grid-columns));
+  }
+
+  .col-lg-pull-0 {
+	right: auto;
+  }
+
+  .col-lg-pull-1 {
+	right: percentage((1 / @grid-columns));
+  }
+
+  .col-lg-pull-2 {
+	right: percentage((2 / @grid-columns));
+  }
+
+  .col-lg-pull-3 {
+	right: percentage((3 / @grid-columns));
+  }
+
+  .col-lg-pull-4 {
+	right: percentage((4 / @grid-columns));
+  }
+
+  .col-lg-pull-5 {
+	right: percentage((5 / @grid-columns));
+  }
+
+  .col-lg-pull-6 {
+	right: percentage((6 / @grid-columns));
+  }
+
+  .col-lg-pull-7 {
+	right: percentage((7 / @grid-columns));
+  }
+
+  .col-lg-pull-8 {
+	right: percentage((8 / @grid-columns));
+  }
+
+  .col-lg-pull-9 {
+	right: percentage((9 / @grid-columns));
+  }
+
+  .col-lg-pull-10 {
+	right: percentage((10/ @grid-columns));
+  }
+
+  .col-lg-pull-11 {
+	right: percentage((11/ @grid-columns));
+  }
 
   // Offsets
-  .col-lg-offset-0  { margin-left: 0; }
+  .col-lg-offset-0 {
-  .col-lg-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+	margin-left: 0;
-  .col-lg-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+  }
-  .col-lg-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+
-  .col-lg-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+  .col-lg-offset-1 {
-  .col-lg-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+	margin-left: percentage((1 / @grid-columns));
-  .col-lg-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+  }
-  .col-lg-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+
-  .col-lg-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+  .col-lg-offset-2 {
-  .col-lg-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+	margin-left: percentage((2 / @grid-columns));
-  .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+  }
-  .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
+
+  .col-lg-offset-3 {
+	margin-left: percentage((3 / @grid-columns));
+  }
+
+  .col-lg-offset-4 {
+	margin-left: percentage((4 / @grid-columns));
+  }
+
+  .col-lg-offset-5 {
+	margin-left: percentage((5 / @grid-columns));
+  }
+
+  .col-lg-offset-6 {
+	margin-left: percentage((6 / @grid-columns));
+  }
+
+  .col-lg-offset-7 {
+	margin-left: percentage((7 / @grid-columns));
+  }
+
+  .col-lg-offset-8 {
+	margin-left: percentage((8 / @grid-columns));
+  }
+
+  .col-lg-offset-9 {
+	margin-left: percentage((9 / @grid-columns));
+  }
+
+  .col-lg-offset-10 {
+	margin-left: percentage((10/ @grid-columns));
+  }
+
+  .col-lg-offset-11 {
+	margin-left: percentage((11/ @grid-columns));
+  }
 }

public/less/ie8and.less

@@ -9,9 +9,11 @@
   * {
 	box-sizing: content-box;
   }
+
   .clearfix {
 	*zoom: 1;
   }
+
   ul, ol {
 	margin-left: 0;
   }
@@ -33,59 +35,167 @@
   .col-md-11 {
 	float: left;
   }
-	.col-md-1  { width: percentage((1 / @grid-columns)) - @grid-adjustment; }
+
-	.col-md-2  { width: percentage((2 / @grid-columns)) - @grid-adjustment; }
+  .col-md-1 {
-	.col-md-3  { width: percentage((3 / @grid-columns)) - @grid-adjustment; }
+	width: percentage((1 / @grid-columns)) - @grid-adjustment;
-	.col-md-4  { width: percentage((4 / @grid-columns)) - @grid-adjustment; }
+  }
-	.col-md-5  { width: percentage((5 / @grid-columns)) - @grid-adjustment; }
+
-	.col-md-6  { width: percentage((6 / @grid-columns)) - @grid-adjustment; }
+  .col-md-2 {
-	.col-md-7  { width: percentage((7 / @grid-columns)) - @grid-adjustment; }
+	width: percentage((2 / @grid-columns)) - @grid-adjustment;
-	.col-md-8  { width: percentage((8 / @grid-columns)) - @grid-adjustment; }
+  }
-	.col-md-9  { width: percentage((9 / @grid-columns)) - @grid-adjustment; }
+
-	.col-md-10 { width: percentage((10/ @grid-columns)) - @grid-adjustment; }
+  .col-md-3 {
-	.col-md-11 { width: percentage((11/ @grid-columns)) - @grid-adjustment; }
+	width: percentage((3 / @grid-columns)) - @grid-adjustment;
-	.col-md-12 { width: 100% - @grid-adjustment; }
+  }
+
+  .col-md-4 {
+	width: percentage((4 / @grid-columns)) - @grid-adjustment;
+  }
+
+  .col-md-5 {
+	width: percentage((5 / @grid-columns)) - @grid-adjustment;
+  }
+
+  .col-md-6 {
+	width: percentage((6 / @grid-columns)) - @grid-adjustment;
+  }
+
+  .col-md-7 {
+	width: percentage((7 / @grid-columns)) - @grid-adjustment;
+  }
+
+  .col-md-8 {
+	width: percentage((8 / @grid-columns)) - @grid-adjustment;
+  }
+
+  .col-md-9 {
+	width: percentage((9 / @grid-columns)) - @grid-adjustment;
+  }
+
+  .col-md-10 {
+	width: percentage((10/ @grid-columns)) - @grid-adjustment;
+  }
+
+  .col-md-11 {
+	width: percentage((11/ @grid-columns)) - @grid-adjustment;
+  }
+
+  .col-md-12 {
+	width: 100% - @grid-adjustment;
+  }
 
   // Push and pull columns for source order changes
-	.col-md-push-0  { left: auto; }
+  .col-md-push-0 {
-	.col-md-push-1  { left: percentage((1 / @grid-columns)); }
+	left: auto;
-	.col-md-push-2  { left: percentage((2 / @grid-columns)); }
+  }
-	.col-md-push-3  { left: percentage((3 / @grid-columns)); }
+  .col-md-push-1 {
-	.col-md-push-4  { left: percentage((4 / @grid-columns)); }
+	left: percentage((1 / @grid-columns));
-	.col-md-push-5  { left: percentage((5 / @grid-columns)); }
+  }
-	.col-md-push-6  { left: percentage((6 / @grid-columns)); }
+  .col-md-push-2 {
-	.col-md-push-7  { left: percentage((7 / @grid-columns)); }
+	left: percentage((2 / @grid-columns));
-	.col-md-push-8  { left: percentage((8 / @grid-columns)); }
+  }
-	.col-md-push-9  { left: percentage((9 / @grid-columns)); }
+  .col-md-push-3 {
-	.col-md-push-10 { left: percentage((10/ @grid-columns)); }
+	left: percentage((3 / @grid-columns));
-	.col-md-push-11 { left: percentage((11/ @grid-columns)); }
+  }
+  .col-md-push-4 {
+	left: percentage((4 / @grid-columns));
+  }
+  .col-md-push-5 {
+	left: percentage((5 / @grid-columns));
+  }
+  .col-md-push-6 {
+	left: percentage((6 / @grid-columns));
+  }
+  .col-md-push-7 {
+	left: percentage((7 / @grid-columns));
+  }
+  .col-md-push-8 {
+	left: percentage((8 / @grid-columns));
+  }
+  .col-md-push-9 {
+	left: percentage((9 / @grid-columns));
+  }
+  .col-md-push-10 {
+	left: percentage((10/ @grid-columns));
+  }
+  .col-md-push-11 {
+	left: percentage((11/ @grid-columns));
+  }
 
-	.col-md-pull-0  { right: auto; }
+  .col-md-pull-0 {
-	.col-md-pull-1  { right: percentage((1 / @grid-columns)); }
+	right: auto;
-	.col-md-pull-2  { right: percentage((2 / @grid-columns)); }
+  }
-	.col-md-pull-3  { right: percentage((3 / @grid-columns)); }
+  .col-md-pull-1 {
-	.col-md-pull-4  { right: percentage((4 / @grid-columns)); }
+	right: percentage((1 / @grid-columns));
-	.col-md-pull-5  { right: percentage((5 / @grid-columns)); }
+  }
-	.col-md-pull-6  { right: percentage((6 / @grid-columns)); }
+  .col-md-pull-2 {
-	.col-md-pull-7  { right: percentage((7 / @grid-columns)); }
+	right: percentage((2 / @grid-columns));
-	.col-md-pull-8  { right: percentage((8 / @grid-columns)); }
+  }
-	.col-md-pull-9  { right: percentage((9 / @grid-columns)); }
+  .col-md-pull-3 {
-	.col-md-pull-10 { right: percentage((10/ @grid-columns)); }
+	right: percentage((3 / @grid-columns));
-	.col-md-pull-11 { right: percentage((11/ @grid-columns)); }
+  }
+  .col-md-pull-4 {
+	right: percentage((4 / @grid-columns));
+  }
+  .col-md-pull-5 {
+	right: percentage((5 / @grid-columns));
+  }
+  .col-md-pull-6 {
+	right: percentage((6 / @grid-columns));
+  }
+  .col-md-pull-7 {
+	right: percentage((7 / @grid-columns));
+  }
+  .col-md-pull-8 {
+	right: percentage((8 / @grid-columns));
+  }
+  .col-md-pull-9 {
+	right: percentage((9 / @grid-columns));
+  }
+  .col-md-pull-10 {
+	right: percentage((10/ @grid-columns));
+  }
+  .col-md-pull-11 {
+	right: percentage((11/ @grid-columns));
+  }
 
   // Offsets
-	.col-md-offset-0  { margin-left: 0; }
+  .col-md-offset-0 {
-	.col-md-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+	margin-left: 0;
-	.col-md-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+  }
-	.col-md-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+  .col-md-offset-1 {
-	.col-md-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+	margin-left: percentage((1 / @grid-columns));
-	.col-md-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+  }
-	.col-md-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+  .col-md-offset-2 {
-	.col-md-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+	margin-left: percentage((2 / @grid-columns));
-	.col-md-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+  }
-	.col-md-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+  .col-md-offset-3 {
-	.col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+	margin-left: percentage((3 / @grid-columns));
-	.col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
+  }
+  .col-md-offset-4 {
+	margin-left: percentage((4 / @grid-columns));
+  }
+  .col-md-offset-5 {
+	margin-left: percentage((5 / @grid-columns));
+  }
+  .col-md-offset-6 {
+	margin-left: percentage((6 / @grid-columns));
+  }
+  .col-md-offset-7 {
+	margin-left: percentage((7 / @grid-columns));
+  }
+  .col-md-offset-8 {
+	margin-left: percentage((8 / @grid-columns));
+  }
+  .col-md-offset-9 {
+	margin-left: percentage((9 / @grid-columns));
+  }
+  .col-md-offset-10 {
+	margin-left: percentage((10/ @grid-columns));
+  }
+  .col-md-offset-11 {
+	margin-left: percentage((11/ @grid-columns));
+  }
 
   .clearfix {
 	*zoom: 1;

public/less/input-groups.less

@@ -29,11 +29,15 @@
 
 .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
-.input-group-lg > .input-group-btn > .btn { .input-lg(); }
+.input-group-lg > .input-group-btn > .btn {
+  .input-lg();
+}
+
 .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
-.input-group-sm > .input-group-btn > .btn { .input-sm(); }
+.input-group-sm > .input-group-btn > .btn {
-
+  .input-sm();
+}
 
 // Display as table-cell
 // -------------------------
@@ -46,6 +50,7 @@
 	border-radius: 0;
   }
 }
+
 // Addon and addon wrapper for buttons
 .input-group-addon,
 .input-group-btn {
@@ -94,9 +99,11 @@
 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
   .border-right-radius(0);
 }
+
 .input-group-addon:first-child {
   border-right: 0;
 }
+
 .input-group .form-control:last-child,
 .input-group-addon:last-child,
 .input-group-btn:last-child > .btn,
@@ -104,6 +111,7 @@
 .input-group-btn:first-child > .btn:not(:first-child) {
   .border-left-radius(0);
 }
+
 .input-group-addon:last-child {
   border-left: 0;
 }
@@ -122,6 +130,7 @@
 	margin-left: -1px;
   }
 }
+
 .input-group-btn > .btn {
   position: relative;
   // Jankily prevent input button groups from wrapping

public/less/jumbotron.less

@@ -2,7 +2,6 @@
 // Jumbotron
 // --------------------------------------------------
 
-
 .jumbotron {
   padding: @jumbotron-padding;
   margin-bottom: @jumbotron-padding;
@@ -16,6 +15,7 @@
 	line-height: 1;
 	color: @jumbotron-heading-color;
   }
+
   p {
 	line-height: 1.4;
   }

public/less/list-group.less

@@ -82,6 +82,7 @@
   margin-top: 0;
   margin-bottom: 5px;
 }
+
 .list-group-item-text {
   margin-bottom: 0;
   line-height: 1.3;

public/less/main.less

@@ -1,12 +1,11 @@
 // Core variables and mixins
 @import "variables.less";
-@import "variables-flatly.less"; /* Bootswatch Flatly theme variables */
+@import "variables-flatly.less";
+/* Bootswatch Flatly theme variables */
 @import "mixins.less";
-
 // Reset
 @import "normalize.less";
 @import "print.less";
-
 // Core CSS
 @import "scaffolding.less";
 @import "type.less";
@@ -15,7 +14,6 @@
 @import "tables.less";
 @import "forms.less";
 @import "buttons.less";
-
 // Components
 @import "component-animations.less";
 @import "glyphicons.less";
@@ -38,25 +36,20 @@
 @import "panels.less";
 @import "wells.less";
 @import "close.less";
-
 // Components w/ JavaScript
 //@import "modals.less";
 @import "tooltip.less";
-//@import "popovers.less";
+@import "popovers.less";
 //@import "carousel.less";
-
 // Utility classes
 @import "utilities.less";
 @import "responsive-utilities.less";
-
 //Bootswatch overrides
 @import "bootswatch.less";
-
 // Site specific
 @import "site.less";
 @import "site-nojavascript.less";
 @import "site-responsive.less";
-
 // Stupid ie
 @import "ie8and.less";
 @import "site-ie8and.less";

public/less/media.less

@@ -2,7 +2,6 @@
 // Source: http://stubbornella.org/content/?p=497
 // --------------------------------------------------
 
-
 // Common styles
 // -------------------------
 
@@ -18,6 +17,7 @@
 .media .media {
   margin-top: 15px;
 }
+
 .media:first-child {
   margin-top: 0;
 }
@@ -32,7 +32,6 @@
   margin: 0 0 5px;
 }
 
-
 // Media image alignment
 // -------------------------
 
@@ -45,7 +44,6 @@
   }
 }
 
-
 // Media list variation
 // -------------------------
 

public/less/mixins.less

@@ -2,7 +2,6 @@
 // Mixins
 // --------------------------------------------------
 
-
 // Utilities
 // -------------------------
 
@@ -48,16 +47,29 @@
   width: @width;
   height: @height;
 }
+
 .square(@size) {
   .size(@size; @size);
 }
 
 // Placeholder text
 .placeholder(@color: @input-color-placeholder) {
-  &:-moz-placeholder            { color: @color; } // Firefox 4-18
+  &:-moz-placeholder {
-  &::-moz-placeholder           { color: @color; } // Firefox 19+
+	color: @color;
-  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
+  }
-  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
+  // Firefox 4-18
+  &::-moz-placeholder {
+	color: @color;
+  }
+  // Firefox 19+
+  &:-ms-input-placeholder {
+	color: @color;
+  }
+  // Internet Explorer 10+
+  &::-webkit-input-placeholder {
+	color: @color;
+  }
+  // Safari and Chrome
 }
 
 // Text overflow
@@ -85,6 +97,7 @@
   background-color: transparent;
   border: 0;
 }
+
 // New mixin to use as of v3.0.1
 .text-hide() {
   font: ~"0/0" a;
@@ -94,8 +107,6 @@
   border: 0;
 }
 
-
-
 // CSS3 PROPERTIES
 // --------------------------------------------------
 
@@ -104,14 +115,17 @@
   border-top-right-radius: @radius;
   border-top-left-radius: @radius;
 }
+
 .border-right-radius(@radius) {
   border-bottom-right-radius: @radius;
   border-top-right-radius: @radius;
 }
+
 .border-bottom-radius(@radius) {
   border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
 }
+
 .border-left-radius(@radius) {
   border-bottom-left-radius: @radius;
   border-top-left-radius: @radius;
@@ -128,18 +142,22 @@
   -webkit-transition: @transition;
   transition: @transition;
 }
+
 .transition-property(@transition-property) {
   -webkit-transition-property: @transition-property;
   transition-property: @transition-property;
 }
+
 .transition-delay(@transition-delay) {
   -webkit-transition-delay: @transition-delay;
   transition-delay: @transition-delay;
 }
+
 .transition-duration(@transition-duration) {
   -webkit-transition-duration: @transition-duration;
   transition-duration: @transition-duration;
 }
+
 .transition-transform(@transition) {
   -webkit-transition: -webkit-transform @transition;
   -moz-transition: -moz-transform @transition;
@@ -153,21 +171,25 @@
   -ms-transform: rotate(@degrees); // IE9+
   transform: rotate(@degrees);
 }
+
 .scale(@ratio) {
   -webkit-transform: scale(@ratio);
   -ms-transform: scale(@ratio); // IE9+
   transform: scale(@ratio);
 }
+
 .translate(@x; @y) {
   -webkit-transform: translate(@x, @y);
   -ms-transform: translate(@x, @y); // IE9+
   transform: translate(@x, @y);
 }
+
 .skew(@x; @y) {
   -webkit-transform: skew(@x, @y);
   -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
   transform: skew(@x, @y);
 }
+
 .translate3d(@x; @y; @z) {
   -webkit-transform: translate3d(@x, @y, @z);
   transform: translate3d(@x, @y, @z);
@@ -178,28 +200,31 @@
   -ms-transform: rotateX(@degrees); // IE9+
   transform: rotateX(@degrees);
 }
+
 .rotateY(@degrees) {
   -webkit-transform: rotateY(@degrees);
   -ms-transform: rotateY(@degrees); // IE9+
   transform: rotateY(@degrees);
 }
+
 .perspective(@perspective) {
   -webkit-perspective: @perspective;
   -moz-perspective: @perspective;
   perspective: @perspective;
 }
+
 .perspective-origin(@perspective) {
   -webkit-perspective-origin: @perspective;
   -moz-perspective-origin: @perspective;
   perspective-origin: @perspective;
 }
+
 .transform-origin(@origin) {
   -webkit-transform-origin: @origin;
   -moz-transform-origin: @origin;
   transform-origin: @origin;
 }
 
-
 // Backface visibility
 // Prevent browsers from flickering when using CSS 3D transforms.
 // Default value is `visible`, but can be changed to `hidden`
@@ -261,8 +286,6 @@
   filter: ~"alpha(opacity=@{opacity-ie})";
 }
 
-
-
 // GRADIENTS
 // --------------------------------------------------
 
@@ -339,8 +362,6 @@
   filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
 }
 
-
-
 // Retina images
 //
 // Short retina mixin for setting background-image and -size
@@ -348,19 +369,12 @@
 .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
   background-image: url("@{file-1x}");
 
-  @media
+  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (   min--moz-device-pixel-ratio: 2), only screen and (     -o-min-device-pixel-ratio: 2/1), only screen and (        min-device-pixel-ratio: 2), only screen and (                min-resolution: 192dpi), only screen and (                min-resolution: 2dppx) {
-  only screen and (-webkit-min-device-pixel-ratio: 2),
-  only screen and (   min--moz-device-pixel-ratio: 2),
-  only screen and (     -o-min-device-pixel-ratio: 2/1),
-  only screen and (        min-device-pixel-ratio: 2),
-  only screen and (                min-resolution: 192dpi),
-  only screen and (                min-resolution: 2dppx) {
 	background-image: url("@{file-2x}");
 	background-size: @width-1x @height-1x;
   }
 }
 
-
 // Responsive image
 //
 // Keep images from scaling beyond the width of their parents.
@@ -371,7 +385,6 @@
   height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
 }
 
-
 // COMPONENT MIXINS
 // --------------------------------------------------
 
@@ -553,16 +566,22 @@
 // More easily include all the states for responsive-utilities.less.
 .responsive-visibility() {
   display: block !important;
-  tr& { display: table-row !important; }
+  tr& {
+	display: table-row !important;
+  }
   th&,
-  td& { display: table-cell !important; }
+  td& {
+	display: table-cell !important;
+  }
 }
 
 .responsive-invisibility() {
   &,
   tr&,
   th&,
-  td& { display: none !important; }
+  td& {
+	display: none !important;
+  }
 }
 
 // Grid System
@@ -618,11 +637,13 @@
 	margin-left: percentage((@columns / @grid-columns));
   }
 }
+
 .make-sm-column-push(@columns) {
   @media (min-width: @screen-sm-min) {
 	left: percentage((@columns / @grid-columns));
   }
 }
+
 .make-sm-column-pull(@columns) {
   @media (min-width: @screen-sm-min) {
 	right: percentage((@columns / @grid-columns));
@@ -651,11 +672,13 @@
 	margin-left: percentage((@columns / @grid-columns));
   }
 }
+
 .make-md-column-push(@columns) {
   @media (min-width: @screen-md) {
 	left: percentage((@columns / @grid-columns));
   }
 }
+
 .make-md-column-pull(@columns) {
   @media (min-width: @screen-md-min) {
 	right: percentage((@columns / @grid-columns));
@@ -684,18 +707,19 @@
 	margin-left: percentage((@columns / @grid-columns));
   }
 }
+
 .make-lg-column-push(@columns) {
   @media (min-width: @screen-lg-min) {
 	left: percentage((@columns / @grid-columns));
   }
 }
+
 .make-lg-column-pull(@columns) {
   @media (min-width: @screen-lg-min) {
 	right: percentage((@columns / @grid-columns));
   }
 }
 
-
 // Form validation states
 //
 // Used in forms.less to generate the form validation CSS for warnings, errors,

public/less/modals.less

@@ -11,7 +11,6 @@
 .modal-open {
   overflow: hidden;
 
-
   // Account for hiding of scrollbar
   body&,
   .navbar-fixed-top,
@@ -37,7 +36,9 @@
 	.translate(0, -25%);
 	.transition-transform(~"0.3s ease-out");
   }
-  &.in .modal-dialog { .translate(0, 0)}
+  &.in .modal-dialog {
+	.translate(0, 0)
+  }
 }
 
 // Shell div to position the modal with bottom padding
@@ -72,8 +73,12 @@
   z-index: (@zindex-modal-background - 10);
   background-color: @modal-backdrop-bg;
   // Fade for backdrop
-  &.fade { .opacity(0); }
+  &.fade {
-  &.in { .opacity(.5); }
+	.opacity(0);
+  }
+  &.in {
+	.opacity(.5);
+  }
 }
 
 // Modal header
@@ -83,6 +88,7 @@
   border-bottom: 1px solid @modal-header-border-color;
   min-height: (@modal-title-padding + @modal-title-line-height);
 }
+
 // Close icon
 .modal-header .close {
   margin-top: -2px;
@@ -126,14 +132,13 @@
 
 // Scale up the modal
 @media screen and (min-width: @screen-sm-min) {
-
   .modal-dialog {
 	width: 600px;
 	padding-top: 30px;
 	padding-bottom: 30px;
   }
+
   .modal-content {
 	.box-shadow(0 5px 15px rgba(0, 0, 0, .5));
   }
-
 }

public/less/navbar.less

@@ -2,7 +2,6 @@
 // Navbars
 // --------------------------------------------------
 
-
 // Wrapper and base class
 //
 // Provide a static navbar from which we expand to create full-width, fixed, and
@@ -23,7 +22,6 @@
   }
 }
 
-
 // Navbar heading
 //
 // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
@@ -37,7 +35,6 @@
   }
 }
 
-
 // Navbar collapse (body)
 //
 // Group your navbar content into this for easy collapsing and expanding across
@@ -82,16 +79,17 @@
 	.navbar-nav.navbar-left:first-child {
 	  margin-left: -@navbar-padding-horizontal;
 	}
+
 	.navbar-nav.navbar-right:last-child {
 	  margin-right: -@navbar-padding-horizontal;
 	}
+
 	.navbar-text:last-child {
 	  margin-right: 0;
 	}
   }
 }
 
-
 // Both navbar header and collapse
 //
 // When a container is present, change the behavior of the header and collapse.
@@ -107,7 +105,6 @@
   }
 }
 
-
 //
 // Navbar alignment options
 //
@@ -135,16 +132,17 @@
 	border-radius: 0;
   }
 }
+
 .navbar-fixed-top {
   z-index: @zindex-navbar-fixed;
   top: 0;
 }
+
 .navbar-fixed-bottom {
   bottom: 0;
   margin-bottom: 0; // override .navbar defaults
 }
 
-
 // Brand/project name
 
 .navbar-brand {
@@ -164,7 +162,6 @@
   }
 }
 
-
 // Navbar toggle
 //
 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
@@ -196,7 +193,6 @@
   }
 }
 
-
 // Navbar nav links
 //
 // Builds on top of the `.nav` components with it's own modifier class to make
@@ -251,7 +247,6 @@
 
 }
 
-
 // Component alignment
 //
 // Repurpose the pull utilities as their own navbar utilities to avoid specifity
@@ -259,10 +254,14 @@
 // though so that navbar contents properly stack and align in mobile.
 
 @media (min-width: @grid-float-breakpoint) {
-  .navbar-left  { .pull-left(); }
+  .navbar-left {
-  .navbar-right { .pull-right(); }
+	.pull-left();
   }
 
+  .navbar-right {
+	.pull-right();
+  }
+}
 
 // Navbar form
 //
@@ -302,7 +301,6 @@
   }
 }
 
-
 // Dropdown menus
 
 // Menu position and menu carets
@@ -310,6 +308,7 @@
   margin-top: 0;
   .border-top-radius(0);
 }
+
 // Menu position and menu caret support for dropups via extra dropup class
 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
   .border-bottom-radius(0);
@@ -322,7 +321,6 @@
   right: 0;
 }
 
-
 // Buttons in navbars
 //
 // Vertically center a button within a navbar (when *not* in a form).
@@ -331,7 +329,6 @@
   .navbar-vertical-align(@input-height-base);
 }
 
-
 // Text in navbars
 //
 // Add a class to make any element properly align itself vertically within the navbars.
@@ -438,7 +435,6 @@
 	  border-bottom-color: @navbar-default-link-color;
 	}
 
-
 	@media (max-width: @screen-xs-max) {
 	  // Dropdowns get custom display when collapsed
 	  .open .dropdown-menu {
@@ -470,7 +466,6 @@
 	}
   }
 
-
   // Links in navbars
   //
   // Add a class to ensure links outside the navbar nav are colored correctly.
@@ -617,5 +612,4 @@
 	  color: @navbar-inverse-link-hover-color;
 	}
   }
-
 }

public/less/navs.less

@@ -2,7 +2,6 @@
 // Navs
 // --------------------------------------------------
 
-
 // Base class
 // --------------------------------------------------
 
@@ -68,7 +67,6 @@
   }
 }
 
-
 // Tabs
 // -------------------------
 
@@ -111,7 +109,6 @@
   }
 }
 
-
 // Pills
 // -------------------------
 .nav-pills {
@@ -138,7 +135,6 @@
   }
 }
 
-
 // Stacked pills
 .nav-stacked {
   > li {
@@ -150,7 +146,6 @@
   }
 }
 
-
 // Nav variations
 // --------------------------------------------------
 
@@ -200,6 +195,7 @@
 	  border-bottom: 1px solid @nav-tabs-justified-link-border-color;
 	  border-radius: @border-radius-base @border-radius-base 0 0;
 	}
+
 	> .active > a,
 	> .active > a:hover,
 	> .active > a:focus {
@@ -208,7 +204,6 @@
   }
 }
 
-
 // Tabbable tabs
 // -------------------------
 
@@ -222,6 +217,7 @@
 .pill-content > .pill-pane {
   display: none;
 }
+
 .tab-content,
 .pill-content {
   > .active {
@@ -229,8 +225,6 @@
   }
 }
 
-
-
 // Dropdowns
 // -------------------------
 
@@ -239,6 +233,7 @@
   border-top-color: @link-color;
   border-bottom-color: @link-color;
 }
+
 .nav a:hover .caret {
   border-top-color: @link-hover-color;
   border-bottom-color: @link-hover-color;

public/less/pager.less

@@ -2,13 +2,13 @@
 // Pager pagination
 // --------------------------------------------------
 
-
 .pager {
   padding-left: 0;
   margin: @line-height-computed 0;
   list-style: none;
   text-align: center;
   .clearfix();
+
   li {
 	display: inline;
 	> a,
@@ -51,5 +51,4 @@
 	  cursor: not-allowed;
 	}
   }
-
 }

public/less/panels.less

@@ -2,7 +2,6 @@
 // Panels
 // --------------------------------------------------
 
-
 // Base class
 .panel {
   margin-bottom: @line-height-computed;
@@ -18,7 +17,6 @@
   .clearfix();
 }
 
-
 // List groups in panels
 //
 // By default, space out list group content from panel headings to account for
@@ -42,6 +40,7 @@
 	}
   }
 }
+
 // Collapse space between when there's no additional content.
 .panel-heading + .list-group {
   .list-group-item:first-child {
@@ -49,7 +48,6 @@
   }
 }
 
-
 // Tables in panels
 //
 // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
@@ -89,7 +87,6 @@
   }
 }
 
-
 // Optional heading
 .panel-heading {
   padding: 10px 15px;
@@ -115,7 +112,6 @@
   .border-bottom-radius(@panel-border-radius - 1);
 }
 
-
 // Collapsable panels (aka, accordion)
 //
 // Wrap a series of panels in `.panel-group` to turn them into an accordion with
@@ -146,23 +142,27 @@
   }
 }
 
-
 // Contextual variations
 .panel-default {
   .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
 }
+
 .panel-primary {
   .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
 }
+
 .panel-success {
   .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
 }
+
 .panel-warning {
   .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
 }
+
 .panel-danger {
   .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
 }
+
 .panel-info {
   .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
 }

public/less/popovers.less

@@ -2,7 +2,6 @@
 // Popovers
 // --------------------------------------------------
 
-
 .popover {
   position: absolute;
   top: 0;
@@ -23,10 +22,18 @@
   white-space: normal;
 
   // Offset the popover to account for the popover arrow
-  &.top     { margin-top: -10px; }
+  &.top {
-  &.right   { margin-left: 10px; }
+	margin-top: -10px;
-  &.bottom  { margin-top: 10px; }
+  }
-  &.left    { margin-left: -10px; }
+  &.right {
+	margin-left: 10px;
+  }
+  &.bottom {
+	margin-top: 10px;
+  }
+  &.left {
+	margin-left: -10px;
+  }
 }
 
 .popover-title {
@@ -59,9 +66,11 @@
 	border-style: solid;
   }
 }
+
 .popover .arrow {
   border-width: @popover-arrow-outer-width;
 }
+
 .popover .arrow:after {
   border-width: @popover-arrow-width;
   content: "";
@@ -129,5 +138,4 @@
 	  bottom: -@popover-arrow-width;
 	}
   }
-
 }

public/less/print.less

@@ -71,18 +71,21 @@
   .navbar {
 	display: none;
   }
+
   .table {
 	td,
 	th {
 	  background-color: #fff !important;
 	}
   }
+
   .btn,
   .dropup > .btn {
 	> .caret {
 	  border-top-color: #000 !important;
 	}
   }
+
   .label {
 	border: 1px solid #000;
   }
@@ -90,6 +93,7 @@
   .table {
 	border-collapse: collapse !important;
   }
+
   .table-bordered {
 	th,
 	td {

public/less/progress-bars.less

@@ -2,35 +2,48 @@
 // Progress bars
 // --------------------------------------------------
 
-
 // Bar animations
 // -------------------------
 
 // Webkit
 @-webkit-keyframes progress-bar-stripes {
-  from  { background-position: 40px 0; }
+  from {
-  to    { background-position: 0 0; }
+	background-position: 40px 0;
+  }
+  to {
+	background-position: 0 0;
+  }
 }
 
 // Firefox
 @-moz-keyframes progress-bar-stripes {
-  from  { background-position: 40px 0; }
+  from {
-  to    { background-position: 0 0; }
+	background-position: 40px 0;
+  }
+  to {
+	background-position: 0 0;
+  }
 }
 
 // Opera
 @-o-keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
+  from {
-  to    { background-position: 40px 0; }
+	background-position: 0 0;
+  }
+  to {
+	background-position: 40px 0;
+  }
 }
 
 // Spec and IE10+
 @keyframes progress-bar-stripes {
-  from  { background-position: 40px 0; }
+  from {
-  to    { background-position: 0 0; }
+	background-position: 40px 0;
+  }
+  to {
+	background-position: 0 0;
+  }
 }
-
-
 
 // Bar itself
 // -------------------------
@@ -74,8 +87,6 @@
   animation: progress-bar-stripes 2s linear infinite;
 }
 
-
-
 // Variations
 // -------------------------
 

public/less/responsive-utilities.less

@@ -2,7 +2,6 @@
 // Responsive: Utility classes
 // --------------------------------------------------
 
-
 // IE10 in Windows (Phone) 8
 //
 // Support for responsive views via media queries is kind of borked in IE10, for
@@ -21,7 +20,6 @@
   width: device-width;
 }
 
-
 // Hide from screenreaders and browsers
 //
 // Credit: HTML5 Boilerplate
@@ -31,7 +29,6 @@
   visibility: hidden !important;
 }
 
-
 // Visibility utilities
 
 .visible-xs {
@@ -55,6 +52,7 @@
 	}
   }
 }
+
 .visible-sm {
   .responsive-invisibility();
   &.visible-xs {
@@ -76,6 +74,7 @@
 	}
   }
 }
+
 .visible-md {
   .responsive-invisibility();
   &.visible-xs {
@@ -97,6 +96,7 @@
 	}
   }
 }
+
 .visible-lg {
   .responsive-invisibility();
   &.visible-xs {
@@ -140,6 +140,7 @@
 	}
   }
 }
+
 .hidden-sm {
   .responsive-visibility();
   &.hidden-xs {
@@ -161,6 +162,7 @@
 	}
   }
 }
+
 .hidden-md {
   .responsive-visibility();
   &.hidden-xs {
@@ -182,6 +184,7 @@
 	}
   }
 }
+
 .hidden-lg {
   .responsive-visibility();
   &.hidden-xs {
@@ -213,6 +216,7 @@
   .visible-print {
 	.responsive-visibility();
   }
+
   .hidden-print {
 	.responsive-invisibility();
   }

public/less/scaffolding.less

@@ -2,7 +2,6 @@
 // Scaffolding
 // --------------------------------------------------
 
-
 // Reset the box-sizing
 
 *,
@@ -11,7 +10,6 @@
   .box-sizing(border-box);
 }
 
-
 // Body reset
 
 html {
@@ -37,7 +35,6 @@ textarea {
   line-height: inherit;
 }
 
-
 // Links
 
 a {
@@ -55,7 +52,6 @@ a {
   }
 }
 
-
 // Images
 
 img {
@@ -92,7 +88,6 @@ img {
   border-radius: 50%; // set radius in percents
 }
 
-
 // Horizontal rules
 
 hr {
@@ -102,7 +97,6 @@ hr {
   border-top: 1px solid @hr-border;
 }
 
-
 // Only display content to screen readers
 //
 // See: http://a11yproject.com/posts/how-to-hide-content/

public/less/site-ie8and.less

@@ -25,33 +25,43 @@
 	border-bottom: 1px solid @legend-border-color;
 	margin-bottom: 20px;
   }
+
   .tooltip-inner {
-		background-color: #000000;
+	background-color: #000;
   }
+
   .date {
 	font-size: 85%;
   }
+
   .task-card-link {
 	min-height: 160px;
   }
+
   .series-checkboxes li {
 	margin-right: 1%;
   }
+
   .stat-type {
 	font-size: floor(@font-size-base * 0.65); // ~10px;
   }
+
   .aside .action-buttons .btn {
 	width: 79%;
   }
+
   .pull-right.dropdown-menu {
 	right: 134px;
   }
+
   .run-details .pull-right.dropdown-menu {
 	right: 64px;
   }
+
   .date-selector .btn-full-width {
 	width: 90%;
   }
+
   .filter-toggle {
 	&:before {
 	  height: 110%;
@@ -59,9 +69,11 @@
 	  left: 0;
 	  top: 0;
 	}
+
 	input {
 	  width: 92%;
 	}
+
 	.filter-trigger {
 	  padding-bottom: 0;
 	}
@@ -69,21 +81,21 @@
 }
 
 .ie7 {
-	.aside .task-stats li {
-		width:31.5%;
-	}
   .zfix {
 	position: relative;
 	z-index: 1001;
   }
+
   .list-group li .list-group-item {
 	margin: 0;
 	position: static;
   }
+
   .graph-spacer {
 	margin-bottom: 90px;
 	padding-bottom: 90px;
   }
+
   .date-selector {
 	zoom: 1;
 
@@ -91,24 +103,30 @@
 	  width: 100%;
 	}
   }
+
   .sr-only {
 	position: relative;
   }
+
   .breadcrumb li {
 	vertical-align: top;
 	zoom: 1;
 	display: inline;
 	margin-right: 10px;
   }
+
   .pull-right.dropdown-menu {
-		right:0px;
+	right: 0;
   }
+
   .run-details .pull-right.dropdown-menu {
 	right: 82px;
   }
+
   .tasks-list li {
 	padding-right: 105px;
   }
+
   .filter-toggle {
 	width: 30%;
 	margin: 0 35%;

public/less/site-nojavascript.less

@@ -18,29 +18,37 @@
   .graph-container, .expander {
 	display: none;
   }
+
   .hidden {
 	display: block !important;
 	visibility: visible !important;
   }
+
   .date-links.hidden {
 	display: none !important;
   }
+
   .btn-group:hover ul {
 	display: block !important;
   }
+
   table.hidden {
 	display: table !important;
   }
+
   .collapse {
 	display: block;
   }
+
   .heading {
 	margin-top: 0;
 	border-radius: 3px 3px 0 0;
   }
+
   .show-class {
 	display: block;
   }
+
   .no-js-hide {
 	display: none;
   }

public/less/site-responsive.less

@@ -18,47 +18,60 @@
   .h1, h1 {
 	font-size: floor(@font-size-base * 2.15); // ~32px;
   }
+
   .h2, h2 {
 	font-size: floor(@font-size-base * 1.9); // ~28px;
   }
+
   .task-header .h4 {
 	font-size: floor(@font-size-base * 1.15); // ~17px;
   }
+
   .header {
 	margin-bottom: 2rem;
 	padding-bottom: 1rem;
   }
+
   .task-header .btn {
 	padding: 5px 10px;
 	font-size: 12px;
 	line-height: 1.5rem;
   }
+
   .task-header h2 {
 	margin-bottom: 3px;
   }
+
   .date {
 	margin-top: 10px;
 	float: right;
   }
+
   .other-tasks {
 	.sr-only();
   }
+
   .task-stats,
   .btn-full-width {
 	margin-bottom: 0;
   }
+
   .task-card .task-stats {
 	margin-bottom: 10px;
   }
+
   .action-buttons {
 	margin-bottom: 20px;
   }
+
   .aside {
 	margin-bottom: 15px;
   }
+
   .graph-spacer {
 	padding-bottom: 80px;
   }
+
   .footer {
 	text-align: center;
 
@@ -71,20 +84,24 @@
 	}
   }
 }
+
 @media (max-width: 767px) {
   .date-selector {
 	margin-top: 0;
 	margin-bottom: 25px;
   }
+
   .readonly-mode .date {
 	margin-top: 0;
 	margin-bottom: 5px;
 	float: none;
   }
+
   .graph-spacer {
 	padding-bottom: 20px;
 	margin-bottom: 15px;
   }
+
   .action-buttons {
 	margin-top: 10px;
 	margin-bottom: 0;
@@ -93,43 +110,54 @@
 	  margin-bottom: 10px;
 	}
   }
+
   .task-header {
 	.run-details {
 	  text-align: left;
 	}
   }
+
   .task-card .task-card-link {
 	min-height: 0;
   }
 }
+
 @media (max-width: 640px) {
   body {
 	font-size: 14px;
   }
+
   .h1, h1 {
 	font-size: floor(@font-size-base * 1.75); // ~26px;
   }
+
   .h2, h2 {
 	font-size: floor(@font-size-base * 1.6); // ~24px;
   }
+
   .task-header .h4 {
 	font-size: floor(@font-size-base * 1.1); // ~16px;
   }
+
   .badge {
 	font-size: floor(@font-size-base * 0.75); // ~11px;
 	padding: 7px;
   }
+
   .rule-name .badge {
 	padding: 3px;
   }
+
   .graph {
 	margin-bottom: 3rem;
   }
+
   .delete-button {
 	font-size: floor(@font-size-base * 1.35); // ~20px;
 	top: 10px;
 	right: 25px;
   }
+
   .standards-lists {
 	.tooltip {
 	  &.top .tooltip-inner {
@@ -137,35 +165,42 @@
 	  }
 	}
   }
+
   .tasks-list {
-		li {
+	.panel {
 	  margin-bottom: 20px;
 	}
   }
+
   .footer .nav {
 	li {
 	  width: 50%;
 	}
   }
 }
+
 @media (max-width: 479px) {
   .graph {
 	height: 200px;
 	margin-bottom: 1.5rem;
   }
+
   .series-checkboxes li {
 	font-size: floor(@font-size-base * 0.8); // ~12px;
   }
+
   .task-header .h3 {
 	float: none !important;
 	text-align: center;
 	margin-bottom: 15px !important;
 	padding: 10px;
   }
+
   .task-header h1 {
 	margin-bottom: 3px;
   }
 }
+
 @media (max-width: 360px) {
   .delete-button {
 	display: block !important;
@@ -174,6 +209,7 @@
 	right: 20px;
 	.opacity(0.7)
   }
+
   .standards-lists {
 	.checkbox {
 	  font-size: floor(@font-size-base * 0.9); // ~13px;
@@ -184,6 +220,7 @@
 	  }
 	}
   }
+
   .footer {
 	.nav {
 	  a {

public/less/site.less

@@ -19,21 +19,27 @@
 .crunch {
   margin: 0 !important;
 }
+
 .crunch-top {
   margin-top: 0 !important;
 }
+
 .crunch-bottom {
   margin-bottom: 0 !important;
 }
+
 .block-level {
   display: block;
 }
+
 .ruled {
   border-bottom: dotted 1px @gray;
 }
+
 .ruled-sm {
   margin-bottom: 15px;
 }
+
 .well-med {
   padding: 15px;
 }
@@ -44,15 +50,18 @@
   margin-bottom: 30px;
   background-color: lighten(@gray-lighter, 4%);
 }
+
 .footer {
   background-color: lighten(@gray-lighter, 4%);
   padding: 40px 0 20px 0;
   margin-top: 40px;
 }
+
 .nav {
   list-style-type: none;
   padding: 0;
 }
+
 .footer .nav {
   float: right;
 
@@ -61,6 +70,7 @@
 	-webkit-transition: background 0.3s;
   }
 }
+
 .supersize-me {
   text-align: center;
   font-size: 112px;
@@ -68,13 +78,16 @@
   font-weight: bold;
   color: @gray-light;
 }
+
 .floated-list li {
   float: left;
 }
+
 .btn-full-width {
   width: 100%;
   margin-bottom: 10px
 }
+
 .dropdown-menu {
   width: 100%;
   top: 40px;
@@ -83,10 +96,12 @@
 	text-indent: -20px;
   }
 }
+
 .dropdown-toggle {
   margin-top: 0;
   margin-bottom: 5px;
 }
+
 .list-group {
   li .list-group-item {
 	border-radius: 0;
@@ -102,19 +117,23 @@
 	margin-bottom: 0;
   }
 }
+
 .options-button {
   position: absolute;
   top: 5px;
   right: 20px;
 }
+
 .footer a, .breadcrumb a {
   text-decoration: underline;
 }
+
 .breadcrumb a {
   &:hover, &:active, &:focus {
 	text-decoration: none;
   }
 }
+
 .site-message {
   .glyphicon {
 	margin-right: 6px;
@@ -127,7 +146,6 @@
   margin-bottom: (@line-height-computed / 2);
 }
 
-
 /* Task stats boxes */
 .task-stats {
   margin-bottom: 10px;
@@ -151,6 +169,7 @@
 	}
   }
 }
+
 .stat-type {
   font-size: floor(@font-size-base * 0.75); // ~11px;
   text-transform: uppercase;
@@ -159,25 +178,17 @@
   .opacity(.8);
 }
 
-.aside .task-stats {
-	li:hover {
-		.opacity(.85);
-
-		a {
-			text-decoration:none;
-		}
-	}
-}
-
 // Stats box colours
 .danger, .error {
   background-color: @brand-danger;
   color: @btn-default-color;
 }
+
 .warning {
   background-color: @brand-warning;
   color: @btn-default-color;
 }
+
 .info, .notice {
   background-color: @brand-info;
   color: @btn-default-color;
@@ -206,8 +217,7 @@
 	display: block;
   }
   .task-card-link:hover,
-	&:hover .task-card-link
+  &:hover .task-card-link {
-	 {
 	text-decoration: none;
 	background-color: darken(@gray-lighter, 2%);
   }
@@ -227,7 +237,6 @@
   }
 }
 
-
 /* Badges */
 .badge {
   border-radius: 0.25em;
@@ -236,8 +245,10 @@
   font-size: ceil(@font-size-base * 0.85); // ~13px;
   text-transform: uppercase;
 }
+
 .rule-name .badge {
   padding: 6px;
+  text-transform: none;
 }
 
 /* Task details page*/
@@ -255,61 +266,180 @@
 	margin-bottom: 6px;
   }
 }
+
 .date {
   margin-top: 5px;
 }
+
 .readonly-mode .date {
   margin-top: 40px;
 }
+
+.category-list {
+  &__item {
+	font-size: 16px;
+
+	&_type_error,
+	&_type_error.active {
+	  .category-list__link,
+	  .category-list__link:hover,
+	  .category-list__link:focus {
+		color: @brand-danger;
+	  }
+	}
+
+	&_type_warning,
+	&_type_warning.active {
+	  .category-list__link,
+	  .category-list__link:hover,
+	  .category-list__link:focus {
+		color: @brand-warning;
+	  }
+	}
+
+	&_type_notice,
+	&_type_notice.active {
+	  .category-list__link,
+	  .category-list__link:hover,
+	  .category-list__link:focus {
+		color: @brand-info;
+	  }
+	}
+
+	&_type_ignore,
+	&_type_ignore.active {
+	  .category-list__link,
+	  .category-list__link:hover,
+	  .category-list__link:focus {
+		color: @badge-bg;
+	  }
+	}
+  }
+}
+
 .tasks-list {
   padding: 15px;
   margin-bottom: 30px;
-	border-width:3px;
+  border: 1px solid @gray-lighter;
-	border-style:solid;
+  border-top: 0;
-
-	li {
-		margin-bottom:20px;
-		padding-right:90px;
-		position:relative;
 
+  .panel {
 	&:last-child {
 	  margin-bottom: 0;
 	}
 
-		form {
+	.ignore-form {
-			display:none;
+	  display: inline-block;
-			position:absolute;
+	  vertical-align: middle;
-			right:0;
-			top:0;
 
-			&:hover .btn {
+	  .btn {
-				color:@brand-primary;
+		margin: 0;
+		padding: 0;
 	  }
 	}
-
-		&:hover form {
-			display:block;
-		}
   }
 
   .rule-name {
-		font-weight:bold;
+	font-size: 16px;
-		font-style:italic;
 	word-wrap: break-word;
   }
 
+  .link {
+	color: #07c;
   }
-.task-danger {
+
-	border-color:@brand-danger;
+  .to-top {
+	text-align: center;
+
+	.glyphicon {
+	  margin-right: 10px;
+	}
+  }
+}
+
+.task {
+  margin-bottom: 16px;
+
+  &_type_error {
+	.rule-name,
+	.ignore-form .link {
+	  color: @brand-danger;
+	}
+
+	.badge {
+	  background: @brand-danger;
+	}
+  }
+
+  &_type_warning {
+	.rule-name,
+	.ignore-form .link {
+	  color: @brand-warning;
+	}
+
+	.badge {
+	  background: @brand-warning;
+	}
+  }
+
+  &_type_notice {
+	.rule-name,
+	.ignore-form .link {
+	  color: @brand-info;
+	}
+
+	.badge {
+	  background: @brand-info;
+	}
+  }
+
+  &_type_ignore {
+	.ignore-form .link {
+	  color: @badge-bg;
+	}
+  }
+
+  .subtitle {
+	font-size: 16px;
+	padding: 10px 0 5px;
+  }
+
+  .list-unstyled {
+	&__item {
+	  padding: 5px 0;
+	}
+  }
+
+  &-actions {
+	position: relative;
+	text-align: right;
+  }
+
+  .code {
+	cursor: pointer;
+	outline: none;
+  }
+
+  .panel-body {
+	.text {
+	  vertical-align: middle;
+	}
+  }
+
+  .btn-details {
+	padding: 0;
+	margin: 0 5px;
+
+	&:before {
+	  content: 'Show ';
+	}
+
+	&.btn_state_collapsed {
+	  &:before {
+		content: 'Hide ';
 	  }
-.task-warning {
-	border-color:@brand-warning;
 	}
-.task-info {
-	border-color:@brand-info;
   }
-.task-default {
-	border-color:@badge-bg;
 }
 
 /* Task list heading */
@@ -329,13 +459,6 @@
 	margin-top: 0;
   }
 }
-.expander {
-	cursor:pointer;
-	padding:0 5px;
-	font-weight:bold;
-	font-size:floor(@font-size-base * @line-height-base); // ~20px
-	line-height:1;
-}
 
 /* Date selector */
 ul.date-links {
@@ -346,6 +469,7 @@ ul.date-links {
   width: 100%;
   z-index: 10;
 }
+
 .date-selector {
   margin-bottom: 5px;
 
@@ -374,6 +498,7 @@ ul.date-links {
 	text-decoration: underline;
   }
 }
+
 .single-result .date-selector-row {
   display: none;
 }
@@ -383,10 +508,12 @@ ul.date-links {
   height: 300px;
   width: 100%;
 }
+
 .graph-spacer {
-	margin-bottom:30px;
+  margin-bottom: 40px;
   padding-bottom: 30px;
 }
+
 .graph-table {
   margin-bottom: 0;
 
@@ -394,29 +521,29 @@ ul.date-links {
 	width: 25%;
   }
 }
+
 .series-checkboxes {
-	margin-top:15px;
+  padding: 0 30px;
+  margin-bottom: 15px;
 
   li {
 	width: 32%;
 	margin-right: 2%;
 	border-radius: @border-radius-base;
 
-		label {
-			margin-bottom:0;
-		}
-
 	.series-checkbox-container {
 	  padding: 2px 4px 3px 4px;
 	}
 
-		input {
+	label {
-			margin:5px auto 3px auto;
+	  margin: 0;
+	  padding: 0 0 0 12px;
+	  cursor: pointer;
 	}
 
-		input, label {
+	input {
+	  margin: 6px 0;
 	  cursor: pointer;
-			display:block;
 	}
 
 	&:last-child {
@@ -428,23 +555,28 @@ ul.date-links {
 	}
   }
 }
+
 .btn-reset {
-	margin-top:12px;
+  margin: 12px 18px 0;
 }
+
 .flot-x-axis {
   .flot-tick-label {
 	max-width: 45px !important;
   }
 }
+
 .tooltip-graph {
   font-size: 12px;
 }
+
 .custom-legend .legend {
   display: none !important;
 }
+
 .dashedLegend {
   position: absolute;
-	top:17px;
+  top: 70px;
   right: 40px;
   font-size: smaller;
   color: #545454;
@@ -452,51 +584,62 @@ ul.date-links {
   background-color: rgba(255, 255, 255, 0.75);
   display: none;
 }
+
 .dashedContainer {
   background: #fff;
   border: 1px solid #808080;
   margin: 5px;
   padding-top: 5px;
 }
+
 .dashedLegend tr {
   display: none;
 }
+
 .dashedLegend .legendColorBox > div:first-child {
   border: 1px solid rgb(204, 204, 204);
   padding: 3px;
 }
+
 .dashedLegend .legendIcon div {
-	height: 0px;
+  height: 0;
-	border-width: 3px 0px 0px;
+  border-width: 3px 0 0;
   border-top-style: solid;
   overflow: hidden;
 }
+
 .dashedLegend .legendErrors div {
   width: 25px;
   border-top-color: rgb(216, 61, 45);
 }
+
 .dashedLegend .legendWarnings div {
   width: 10px;
   border-top-color: rgb(168, 103, 0);
   float: left;
 }
+
 .dashedLegend .legendWarnings div:first-child {
   margin-right: 5px;
 }
+
 .dashedLegend .legendNotices div {
   width: 5px;
   border-top-color: rgb(23, 123, 190);
   float: left;
   margin-left: 5px;
 }
+
 .dashedLegend .legendNotices div:first-child {
   margin-left: 0;
 }
+
 .dashedLegend td.legendColorBox {
   padding-right: 5px;
   padding-bottom: 5px;
   padding-left: 10px;
 }
+
 .dashedLegend td.legendLabel {
   padding-right: 10px;
   padding-bottom: 5px;
@@ -508,7 +651,7 @@ ul.date-links {
   overflow: hidden;
   overflow-y: auto;
   margin-bottom: 15px;
-	border-bottom:solid 1px @gray-lighter;
+  border-bottom: 1px solid @gray-lighter;
 
   .checkbox {
 	cursor: pointer;
@@ -543,7 +686,7 @@ ul.date-links {
 
   &:before {
 	position: absolute;
-		content:"";
+	content: '';
 	height: 90px;
 	width: 90px;
 	left: 50%;
@@ -563,6 +706,7 @@ ul.date-links {
   margin: 0;
   padding: 0;
 }
+
 .inline-list > li {
   display: inline-block;
   border-right: 1px solid @dropdown-fallback-border; // IE8 fallback
@@ -570,6 +714,12 @@ ul.date-links {
   padding: 0 4px 0 0;
   margin: 0 4px 0 0;
 }
+
 .inline-list + div.date {
   display: inline-block;
 }
+
+/* Popovers */
+.popover-content {
+  overflow-x: auto;
+}

public/less/tables.less

@@ -2,16 +2,15 @@
 // Tables
 // --------------------------------------------------
 
-
 table {
   max-width: 100%;
   background-color: @table-bg;
 }
+
 th {
   text-align: left;
 }
 
-
 // Baseline styles
 
 .table {
@@ -58,7 +57,6 @@ th {
   }
 }
 
-
 // Condensed table w/ half padding
 
 .table-condensed {
@@ -74,7 +72,6 @@ th {
   }
 }
 
-
 // Bordered version
 //
 // Add borders all around the table and between all the columns.
@@ -101,7 +98,6 @@ th {
   }
 }
 
-
 // Zebra-striping
 //
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
@@ -117,7 +113,6 @@ th {
   }
 }
 
-
 // Hover effect
 //
 // Placed here since it has to come after the potential zebra striping
@@ -133,7 +128,6 @@ th {
   }
 }
 
-
 // Table cell sizing
 //
 // Reset default table behavior
@@ -142,6 +136,7 @@ table col[class*="col-"] {
   float: none;
   display: table-column;
 }
+
 table {
   td,
   th {
@@ -152,7 +147,6 @@ table {
   }
 }
 
-
 // Table backgrounds
 //
 // Exact selectors below required to override `.table-striped` and prevent
@@ -174,7 +168,6 @@ table {
 .table-row-variant(danger; @state-danger-bg; @state-danger-border);
 .table-row-variant(warning; @state-warning-bg; @state-warning-border);
 
-
 // Responsive tables
 //
 // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
@@ -240,7 +233,6 @@ table {
 		  }
 		}
 	  }
-
 	}
   }
 }

public/less/theme.less

@@ -1,13 +1,9 @@
-
 //
 // Load core variables and mixins
 // --------------------------------------------------
-
 @import "variables.less";
 @import "mixins.less";
 
-
-
 //
 // Buttons
 // --------------------------------------------------
@@ -59,14 +55,31 @@
 }
 
 // Apply the mixin to the buttons
-.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
+.btn-default {
-.btn-primary { .btn-styles(@btn-primary-bg); }
+  .btn-styles(@btn-default-bg);
-.btn-success { .btn-styles(@btn-success-bg); }
+  text-shadow: 0 1px 0 #fff;
-.btn-warning { .btn-styles(@btn-warning-bg); }
+  border-color: #ccc;
-.btn-danger  { .btn-styles(@btn-danger-bg); }
+}
-.btn-info    { .btn-styles(@btn-info-bg); }
 
+.btn-primary {
+  .btn-styles(@btn-primary-bg);
+}
 
+.btn-success {
+  .btn-styles(@btn-success-bg);
+}
+
+.btn-warning {
+  .btn-styles(@btn-warning-bg);
+}
+
+.btn-danger {
+  .btn-styles(@btn-danger-bg);
+}
+
+.btn-info {
+  .btn-styles(@btn-info-bg);
+}
 
 //
 // Images
@@ -77,8 +90,6 @@
   .box-shadow(0 1px 2px rgba(0, 0, 0, .075));
 }
 
-
-
 //
 // Dropdowns
 // --------------------------------------------------
@@ -88,6 +99,7 @@
   #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
   background-color: darken(@dropdown-link-hover-bg, 5%);
 }
+
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
 .dropdown-menu > .active > a:focus {
@@ -95,8 +107,6 @@
   background-color: darken(@dropdown-link-active-bg, 5%);
 }
 
-
-
 //
 // Navbar
 // --------------------------------------------------
@@ -113,6 +123,7 @@
 	.box-shadow(inset 0 3px 9px rgba(0, 0, 0, .075));
   }
 }
+
 .navbar-brand,
 .navbar-nav > li > a {
   text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
@@ -140,8 +151,6 @@
   border-radius: 0;
 }
 
-
-
 //
 // Alerts
 // --------------------------------------------------
@@ -160,12 +169,21 @@
 }
 
 // Apply the mixin to the alerts
-.alert-success    { .alert-styles(@alert-success-bg); }
+.alert-success {
-.alert-info       { .alert-styles(@alert-info-bg); }
+  .alert-styles(@alert-success-bg);
-.alert-warning    { .alert-styles(@alert-warning-bg); }
+}
-.alert-danger     { .alert-styles(@alert-danger-bg); }
 
+.alert-info {
+  .alert-styles(@alert-info-bg);
+}
 
+.alert-warning {
+  .alert-styles(@alert-warning-bg);
+}
+
+.alert-danger {
+  .alert-styles(@alert-danger-bg);
+}
 
 //
 // Progress bars
@@ -182,13 +200,25 @@
 }
 
 // Apply the mixin to the progress bars
-.progress-bar            { .progress-bar-styles(@progress-bar-bg); }
+.progress-bar {
-.progress-bar-success    { .progress-bar-styles(@progress-bar-success-bg); }
+  .progress-bar-styles(@progress-bar-bg);
-.progress-bar-info       { .progress-bar-styles(@progress-bar-info-bg); }
+}
-.progress-bar-warning    { .progress-bar-styles(@progress-bar-warning-bg); }
-.progress-bar-danger     { .progress-bar-styles(@progress-bar-danger-bg); }
 
+.progress-bar-success {
+  .progress-bar-styles(@progress-bar-success-bg);
+}
 
+.progress-bar-info {
+  .progress-bar-styles(@progress-bar-info-bg);
+}
+
+.progress-bar-warning {
+  .progress-bar-styles(@progress-bar-warning-bg);
+}
+
+.progress-bar-danger {
+  .progress-bar-styles(@progress-bar-danger-bg);
+}
 
 //
 // List groups
@@ -198,6 +228,7 @@
   border-radius: @border-radius-base;
   .box-shadow(0 1px 2px rgba(0, 0, 0, .075));
 }
+
 .list-group-item.active,
 .list-group-item.active:hover,
 .list-group-item.active:focus {
@@ -206,8 +237,6 @@
   border-color: darken(@list-group-active-border, 7.5%);
 }
 
-
-
 //
 // Panels
 // --------------------------------------------------
@@ -223,14 +252,29 @@
 }
 
 // Apply the mixin to the panel headings only
-.panel-default > .panel-heading   { .panel-heading-styles(@panel-default-heading-bg); }
+.panel-default > .panel-heading {
-.panel-primary > .panel-heading   { .panel-heading-styles(@panel-primary-heading-bg); }
+  .panel-heading-styles(@panel-default-heading-bg);
-.panel-success > .panel-heading   { .panel-heading-styles(@panel-success-heading-bg); }
+}
-.panel-info > .panel-heading      { .panel-heading-styles(@panel-info-heading-bg); }
-.panel-warning > .panel-heading   { .panel-heading-styles(@panel-warning-heading-bg); }
-.panel-danger > .panel-heading    { .panel-heading-styles(@panel-danger-heading-bg); }
 
+.panel-primary > .panel-heading {
+  .panel-heading-styles(@panel-primary-heading-bg);
+}
 
+.panel-success > .panel-heading {
+  .panel-heading-styles(@panel-success-heading-bg);
+}
+
+.panel-info > .panel-heading {
+  .panel-heading-styles(@panel-info-heading-bg);
+}
+
+.panel-warning > .panel-heading {
+  .panel-heading-styles(@panel-warning-heading-bg);
+}
+
+.panel-danger > .panel-heading {
+  .panel-heading-styles(@panel-danger-heading-bg);
+}
 
 //
 // Wells

public/less/thumbnails.less

@@ -2,7 +2,6 @@
 // Thumbnails
 // --------------------------------------------------
 
-
 // Mixin and adjust the regular image class
 .thumbnail {
   .img-thumbnail();
@@ -14,7 +13,6 @@
   }
 }
 
-
 // Add a hover state for linked versions only
 a.thumbnail:hover,
 a.thumbnail:focus {
@@ -26,6 +24,7 @@ a.thumbnail:focus {
   margin-left: auto;
   margin-right: auto;
 }
+
 .thumbnail .caption {
   padding: @thumbnail-caption-padding;
   color: @thumbnail-caption-color;

public/less/tooltip.less

@@ -2,7 +2,6 @@
 // Tooltips
 // --------------------------------------------------
 
-
 // Base class
 .tooltip {
   position: absolute;
@@ -13,11 +12,25 @@
   line-height: 1.4;
   .opacity(0);
 
-  &.in     { .opacity(.9); }
+  &.in {
-  &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
+	.opacity(.9);
-  &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
+  }
-  &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
+  &.top {
-  &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
+	margin-top: -3px;
+	padding: @tooltip-arrow-width 0;
+  }
+  &.right {
+	margin-left: 3px;
+	padding: 0 @tooltip-arrow-width;
+  }
+  &.bottom {
+	margin-top: 3px;
+	padding: @tooltip-arrow-width 0;
+  }
+  &.left {
+	margin-left: -3px;
+	padding: 0 @tooltip-arrow-width;
+  }
 }
 
 // Wrapper for the tooltip content
@@ -39,6 +52,7 @@
   border-color: transparent;
   border-style: solid;
 }
+
 .tooltip {
   &.top .tooltip-arrow {
 	bottom: 0;

public/less/type.less

@@ -2,13 +2,13 @@
 // Typography
 // --------------------------------------------------
 
-
 // Body text
 // -------------------------
 
 p {
   margin: 0 0 (@line-height-computed / 2);
 }
+
 .lead {
   margin-bottom: @line-height-computed;
   font-size: (@font-size-base * 1.15);
@@ -20,45 +20,53 @@ p {
   }
 }
 
-
 // Emphasis & misc
 // -------------------------
 
 // Ex: 14px base font * 85% = about 12px
 small,
-.small  { font-size: 85%; }
+.small {
+  font-size: 85%;
+}
 
 // Undo browser default styling
-cite    { font-style: normal; }
+cite {
+  font-style: normal;
+}
 
 // Contextual emphasis
 .text-muted {
   color: @text-muted;
 }
+
 .text-primary {
   color: @brand-primary;
   &:hover {
 	color: darken(@brand-primary, 10%);
   }
 }
+
 .text-warning {
   color: @state-warning-text;
   &:hover {
 	color: darken(@state-warning-text, 10%);
   }
 }
+
 .text-danger {
   color: @state-danger-text;
   &:hover {
 	color: darken(@state-danger-text, 10%);
   }
 }
+
 .text-success {
   color: @state-success-text;
   &:hover {
 	color: darken(@state-success-text, 10%);
   }
 }
+
 .text-info {
   color: @state-info-text;
   &:hover {
@@ -67,10 +75,17 @@ cite    { font-style: normal; }
 }
 
 // Alignment
-.text-left           { text-align: left; }
+.text-left {
-.text-right          { text-align: right; }
+  text-align: left;
-.text-center         { text-align: center; }
+}
 
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
 
 // Headings
 // -------------------------
@@ -99,6 +114,7 @@ h3 {
 	font-size: 65%;
   }
 }
+
 h4,
 h5,
 h6 {
@@ -110,13 +126,29 @@ h6 {
   }
 }
 
-h1, .h1 { font-size: @font-size-h1; }
+h1, .h1 {
-h2, .h2 { font-size: @font-size-h2; }
+  font-size: @font-size-h1;
-h3, .h3 { font-size: @font-size-h3; }
+}
-h4, .h4 { font-size: @font-size-h4; }
-h5, .h5 { font-size: @font-size-h5; }
-h6, .h6 { font-size: @font-size-h6; }
 
+h2, .h2 {
+  font-size: @font-size-h2;
+}
+
+h3, .h3 {
+  font-size: @font-size-h3;
+}
+
+h4, .h4 {
+  font-size: @font-size-h4;
+}
+
+h5, .h5 {
+  font-size: @font-size-h5;
+}
+
+h6, .h6 {
+  font-size: @font-size-h6;
+}
 
 // Page header
 // -------------------------
@@ -127,8 +159,6 @@ h6, .h6 { font-size: @font-size-h6; }
   border-bottom: 1px solid @page-header-border-color;
 }
 
-
-
 // Lists
 // --------------------------------------------------
 
@@ -150,6 +180,7 @@ ol {
   padding-left: 0;
   list-style: none;
 }
+
 // Inline turns list items into inline-block
 .list-inline {
   .list-unstyled();
@@ -164,13 +195,16 @@ ol {
 dl {
   margin-bottom: @line-height-computed;
 }
+
 dt,
 dd {
   line-height: @line-height-base;
 }
+
 dt {
   font-weight: bold;
 }
+
 dd {
   margin-left: 0; // Undo browser default
 }
@@ -206,6 +240,7 @@ abbr[data-original-title] {
   cursor: help;
   border-bottom: 1px dotted @abbr-border-color;
 }
+
 abbr.initialism {
   font-size: 90%;
   text-transform: uppercase;

public/less/utilities.less

@@ -2,41 +2,44 @@
 // Utility classes
 // --------------------------------------------------
 
-
 // Floats
 // -------------------------
 
 .clearfix {
   .clearfix();
 }
+
 .center-block {
   .center-block();
 }
+
 .pull-right {
   float: right !important;
 }
+
 .pull-left {
   float: left !important;
 }
 
-
 // Toggling content
 // -------------------------
 
 .hide {
   display: none !important;
 }
+
 .show {
   display: block !important;
 }
+
 .invisible {
   visibility: hidden;
 }
+
 .text-hide {
   .text-hide();
 }
 
-
 // For Affix plugin
 // -------------------------
 
@@ -44,7 +47,6 @@
   position: fixed;
 }
 
-
 // Cursors
 // -------------------------
 

public/less/variables-flatly.less

@@ -2,7 +2,6 @@
 // Variables
 // --------------------------------------------------
 
-
 // Global values
 // --------------------------------------------------
 
@@ -61,7 +60,6 @@
 @icon-font-path: "../fonts/";
 @icon-font-name: "glyphicons-halflings-regular";
 
-
 // Components
 // -------------------------
 // Based on 14px font-size and 1.428 line-height (~20px to start)
@@ -100,7 +98,6 @@
 
 @table-border-color: @gray-lighter; // table and cell border
 
-
 // Buttons
 // -------------------------
 
@@ -132,7 +129,6 @@
 
 @btn-link-disabled-color: @gray-light;
 
-
 // Forms
 // -------------------------
 
@@ -156,7 +152,6 @@
 @input-group-addon-bg: @gray-lighter;
 @input-group-addon-border-color: @input-border;
 
-
 // Dropdowns
 // -------------------------
 
@@ -178,11 +173,9 @@
 
 @dropdown-caret-color: #000;
 
-
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
-
 // Z-index master list
 // -------------------------
 // Used for a bird's eye view of components dependent on the z-axis
@@ -220,7 +213,6 @@
 @screen-sm-max: (@screen-md - 1);
 @screen-md-max: (@screen-lg - 1);
 
-
 // Grid system
 // --------------------------------------------------
 
@@ -231,7 +223,6 @@
 // Point at which the navbar stops collapsing
 @grid-float-breakpoint: @screen-tablet;
 
-
 // Navbar
 // -------------------------
 
@@ -264,7 +255,6 @@
 @navbar-default-toggle-icon-bar-bg: #fff;
 @navbar-default-toggle-border-color: darken(@navbar-default-bg, 10%);
 
-
 // Inverted navbar
 //
 // Reset inverted navbar basics
@@ -298,7 +288,6 @@
 @navbar-inverse-toggle-icon-bar-bg: #fff;
 @navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%);
 
-
 // Navs
 // -------------------------
 
@@ -327,7 +316,6 @@
 @nav-pills-active-link-hover-bg: @component-active-bg;
 @nav-pills-active-link-hover-color: #fff;
 
-
 // Pagination
 // -------------------------
 
@@ -341,14 +329,12 @@
 
 @pagination-disabled-color: @gray-lighter;
 
-
 // Pager
 // -------------------------
 
 @pager-border-radius: 15px;
 @pager-disabled-color: #fff;
 
-
 // Jumbotron
 // -------------------------
 
@@ -358,7 +344,6 @@
 
 @jumbotron-heading-color: inherit;
 
-
 // Form states and alerts
 // -------------------------
 
@@ -378,7 +363,6 @@
 @state-info-bg: @brand-info;
 @state-info-border: @brand-info;
 
-
 // Tooltips
 // -------------------------
 @tooltip-max-width: 200px;
@@ -388,7 +372,6 @@
 @tooltip-arrow-width: 5px;
 @tooltip-arrow-color: @tooltip-bg;
 
-
 // Popovers
 // -------------------------
 @popover-bg: #fff;
@@ -405,7 +388,6 @@
 @popover-arrow-outer-color: rgba(0, 0, 0, .25);
 @popover-arrow-outer-fallback-color: #999;
 
-
 // Labels
 // -------------------------
 
@@ -419,7 +401,6 @@
 @label-color: #fff;
 @label-link-hover-color: #fff;
 
-
 // Modals
 // -------------------------
 @modal-inner-padding: 20px;
@@ -435,7 +416,6 @@
 @modal-header-border-color: #e5e5e5;
 @modal-footer-border-color: @modal-header-border-color;
 
-
 // Alerts
 // -------------------------
 @alert-padding: 15px;
@@ -458,7 +438,6 @@
 @alert-danger-text: @state-danger-text;
 @alert-danger-border: @state-danger-border;
 
-
 // Progress bars
 // -------------------------
 @progress-bg: @gray-lighter;
@@ -470,7 +449,6 @@
 @progress-bar-danger-bg: @brand-danger;
 @progress-bar-info-bg: @brand-info;
 
-
 // List group
 // -------------------------
 @list-group-bg: #fff;
@@ -485,7 +463,6 @@
 @list-group-link-color: #555;
 @list-group-link-heading-color: #333;
 
-
 // Panels
 // -------------------------
 @panel-bg: #fff;
@@ -517,7 +494,6 @@
 @panel-info-border: @state-info-border;
 @panel-info-heading-bg: @state-info-bg;
 
-
 // Thumbnails
 // -------------------------
 @thumbnail-padding: 4px;
@@ -528,12 +504,10 @@
 @thumbnail-caption-color: @text-color;
 @thumbnail-caption-padding: 9px;
 
-
 // Wells
 // -------------------------
 @well-bg: @gray-lighter;
 
-
 // Badges
 // -------------------------
 @badge-color: #fff;
@@ -547,14 +521,12 @@
 @badge-line-height: 1;
 @badge-border-radius: 10px;
 
-
 // Breadcrumbs
 // -------------------------
 @breadcrumb-bg: lighten(@gray-lighter, 4%);
 @breadcrumb-color: @gray-dark;
 @breadcrumb-active-color: @breadcrumb-color;
 
-
 // Carousel
 // ------------------------
 
@@ -570,14 +542,12 @@
 
 @carousel-caption-color: #fff;
 
-
 // Close
 // ------------------------
 @close-color: #000;
 @close-font-weight: bold;
 @close-text-shadow: 0 1px 0 #fff;
 
-
 // Code
 // ------------------------
 @code-color: #c7254e;
@@ -606,7 +576,6 @@
 // Horizontal forms & lists
 @component-offset-horizontal: 180px;
 
-
 // Container sizes
 // --------------------------------------------------
 

public/less/variables.less

@@ -2,7 +2,6 @@
 // Variables
 // --------------------------------------------------
 
-
 // Global values
 // --------------------------------------------------
 
@@ -63,14 +62,12 @@
 @headings-line-height: 1.1;
 @headings-color: inherit;
 
-
 // Iconography
 // -------------------------
 
 @icon-font-path: "../fonts/";
 @icon-font-name: "glyphicons-halflings-regular";
 
-
 // Components
 // -------------------------
 // Based on 14px font-size and 1.428 line-height (~20px to start)
@@ -110,7 +107,6 @@
 
 @table-border-color: #ddd; // table and cell border
 
-
 // Buttons
 // -------------------------
 
@@ -142,7 +138,6 @@
 
 @btn-link-disabled-color: @gray-light;
 
-
 // Forms
 // -------------------------
 
@@ -166,7 +161,6 @@
 @input-group-addon-bg: @gray-lighter;
 @input-group-addon-border-color: @input-border;
 
-
 // Dropdowns
 // -------------------------
 
@@ -188,11 +182,9 @@
 
 @dropdown-caret-color: #000;
 
-
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
-
 // Z-index master list
 // -------------------------
 // Used for a bird's eye view of components dependent on the z-axis
@@ -238,7 +230,6 @@
 @screen-sm-max: (@screen-md-min - 1);
 @screen-md-max: (@screen-lg-min - 1);
 
-
 // Grid system
 // --------------------------------------------------
 
@@ -249,7 +240,6 @@
 // Point at which the navbar stops collapsing
 @grid-float-breakpoint: @screen-sm-min;
 
-
 // Navbar
 // -------------------------
 
@@ -283,7 +273,6 @@
 @navbar-default-toggle-icon-bar-bg: #ccc;
 @navbar-default-toggle-border-color: #ddd;
 
-
 // Inverted navbar
 //
 // Reset inverted navbar basics
@@ -310,7 +299,6 @@
 @navbar-inverse-toggle-icon-bar-bg: #fff;
 @navbar-inverse-toggle-border-color: #333;
 
-
 // Navs
 // -------------------------
 
@@ -340,7 +328,6 @@
 @nav-pills-active-link-hover-bg: @component-active-bg;
 @nav-pills-active-link-hover-color: @component-active-color;
 
-
 // Pagination
 // -------------------------
 
@@ -354,14 +341,12 @@
 
 @pagination-disabled-color: @gray-light;
 
-
 // Pager
 // -------------------------
 
 @pager-border-radius: 15px;
 @pager-disabled-color: @gray-light;
 
-
 // Jumbotron
 // -------------------------
 
@@ -371,7 +356,6 @@
 
 @jumbotron-heading-color: inherit;
 
-
 // Form states and alerts
 // -------------------------
 
@@ -391,7 +375,6 @@
 @state-danger-bg: #f2dede;
 @state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
 
-
 // Tooltips
 // -------------------------
 @tooltip-max-width: 200px;
@@ -401,7 +384,6 @@
 @tooltip-arrow-width: 5px;
 @tooltip-arrow-color: @tooltip-bg;
 
-
 // Popovers
 // -------------------------
 @popover-bg: #fff;
@@ -418,7 +400,6 @@
 @popover-arrow-outer-color: rgba(0, 0, 0, .25);
 @popover-arrow-outer-fallback-color: #999;
 
-
 // Labels
 // -------------------------
 
@@ -432,7 +413,6 @@
 @label-color: #fff;
 @label-link-hover-color: #fff;
 
-
 // Modals
 // -------------------------
 @modal-inner-padding: 20px;
@@ -448,7 +428,6 @@
 @modal-header-border-color: #e5e5e5;
 @modal-footer-border-color: @modal-header-border-color;
 
-
 // Alerts
 // -------------------------
 @alert-padding: 15px;
@@ -471,7 +450,6 @@
 @alert-danger-text: @state-danger-text;
 @alert-danger-border: @state-danger-border;
 
-
 // Progress bars
 // -------------------------
 @progress-bg: #f5f5f5;
@@ -483,7 +461,6 @@
 @progress-bar-danger-bg: @brand-danger;
 @progress-bar-info-bg: @brand-info;
 
-
 // List group
 // -------------------------
 @list-group-bg: #fff;
@@ -498,7 +475,6 @@
 @list-group-link-color: #555;
 @list-group-link-heading-color: #333;
 
-
 // Panels
 // -------------------------
 @panel-bg: #fff;
@@ -530,7 +506,6 @@
 @panel-info-border: @state-info-border;
 @panel-info-heading-bg: @state-info-bg;
 
-
 // Thumbnails
 // -------------------------
 @thumbnail-padding: 4px;
@@ -541,13 +516,11 @@
 @thumbnail-caption-color: @text-color;
 @thumbnail-caption-padding: 9px;
 
-
 // Wells
 // -------------------------
 @well-bg: #f5f5f5;
 @well-bg-drk: #2c3e50;
 
-
 // Badges
 // -------------------------
 @badge-color: #fff;
@@ -561,7 +534,6 @@
 @badge-line-height: 1;
 @badge-border-radius: 10px;
 
-
 // Breadcrumbs
 // -------------------------
 @breadcrumb-bg: #f5f5f5;
@@ -569,7 +541,6 @@
 @breadcrumb-active-color: @gray-light;
 @breadcrumb-separator: "/";
 
-
 // Carousel
 // ------------------------
 
@@ -585,14 +556,12 @@
 
 @carousel-caption-color: #fff;
 
-
 // Close
 // ------------------------
 @close-font-weight: bold;
 @close-color: #000;
 @close-text-shadow: 0 1px 0 #fff;
 
-
 // Code
 // ------------------------
 @code-color: #c7254e;
@@ -621,7 +590,6 @@
 // Horizontal forms & lists
 @component-offset-horizontal: 180px;
 
-
 // Container sizes
 // --------------------------------------------------
 

public/less/wells.less

@@ -2,7 +2,6 @@
 // Wells
 // --------------------------------------------------
 
-
 // Base class
 .well {
   min-height: 20px;
@@ -12,6 +11,7 @@
   border: 1px solid darken(@well-bg, 7%);
   border-radius: @border-radius-base;
   .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05));
+
   blockquote {
 	border-color: #ddd;
 	border-color: rgba(0, 0, 0, .15);
@@ -23,6 +23,7 @@
   padding: 24px;
   border-radius: @border-radius-large;
 }
+
 .well-sm {
   padding: 9px;
   border-radius: @border-radius-small;

view/helper/conditionals.js

@@ -0,0 +1,27 @@
+// This file is part of Pa11y Dashboard.
+//
+// Pa11y Dashboard is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Pa11y Dashboard is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
+'use strict';
+
+module.exports = helper;
+
+function helper(hbs) {
+	// Compare if one value is greater than another
+	hbs.registerHelper('ifgtr', function(conditional, condition, options) {
+		if (conditional > condition) {
+			// eslint-disable-next-line no-invalid-this
+			return options.fn(this);
+		}
+	});
+}

view/new.html

@@ -144,7 +144,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 					{{#rules}}
 						<li>
 							<input class="pull-left" id="{{name}}" type="checkbox" name="ignore[]" value="{{name}}" {{#ignored}}checked{{/ignored}}/>
-							<label for="{{name}}" title="{{description}}" data-role="rules-tooltip" class="checkbox">
+							<label for="{{name}}" title="{{description}}" data-role="rule-tooltip" class="checkbox">
 								{{name}}
 							</label>
 						</li>

view/partial/graph.html

@@ -16,10 +16,10 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
 <div class="col-md-12 clearfix">
 	<div class="graph-container graph-spacer ruled clearfix">
-		<div data-role="graph" class="graph"></div>
 		<div class="row">
-			<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom col-md-3 col-sm-6 col-xs-12 pull-right" data-role="series-checkboxes"></ul>
+			<ul class="list-unstyled floated-list series-checkboxes clearfix col-md-5 col-sm-6 col-xs-12 pull-right" data-role="series-checkboxes"></ul>
 		</div>
+		<div data-role="graph" class="graph"></div>
 		<div class="dashedLegend">
 			<div class="dashedContainer">
 			    <table>

view/partial/result.html

@@ -17,25 +17,16 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
 <div class="col-md-3 aside">
 	<div class="row">
-		<div class="col-md-12 col-sm-6 col-xs-12">
+		<div class="action-buttons col-md-12 col-sm-6">
-			<ul data-role="task-list" class="clearfix list-unstyled floated-list task-stats">
-				{{#mainResult}}
-					<li class="danger"><a href="#errors" title="See errors">{{count.error}}<span class="stat-type">Errors</span></a></li>
-					<li class="warning"><a href="#warnings" title="See warnings">{{count.warning}}<span class="stat-type">Warnings</span></a></li>
-					<li class="info last"><a href="#notices" title="See notices">{{count.notice}}<span class="stat-type">Notices</span></a></li>
-				{{/mainResult}}
-			</ul>
-		</div>
-		<div class="action-buttons col-md-12 col-sm-6 clearfix">
 			<div class="row">
 				<div class="col-md-12 col-sm-6 col-xs-12">
 			        <a href="{{mainResult.hrefCsv}}" class="btn-full-width btn btn-default" data-test="download-csv">
-			        	Download CSV <span class="glyphicon glyphicon-download"></span>
+			        	Download CSV <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 			        </a>
 				</div>
 				<div class="col-md-12 col-sm-6 col-xs-12">
 			        <a href="{{mainResult.hrefJson}}" class="btn-full-width btn btn-default" data-test="download-json">
-			        	Download JSON <span class="glyphicon glyphicon-download"></span>
+			        	Download JSON <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 			        </a>
 				</div>
 			</div>
@@ -47,7 +38,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 				<div class="date-selector">
 					<div class="btn-group block-level clearfix">
 						<h2 class="h4">
-							<span class="glyphicon glyphicon-calendar"></span>&nbsp;&nbsp;{{date-format task.lastResult.date format="DD MMM YYYY"}}
+							<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>&nbsp;&nbsp;{{date-format task.lastResult.date format="DD MMM YYYY"}}
 						</h2>
 						<h3 class="h5 show-stats">Select a date to show stats for:</h3>
 						<ul role="navigation" class="dates-list">
@@ -70,141 +61,264 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	</div>
 </div>
 
-<div class="col-md-9" data-role="expandable-results" role="main">
+<div class="col-md-9" role="main">
-	{{#if mainResult.count.error}}
+	<ul class="nav nav-tabs category-list" role="tablist">
-		<div class="heading label-danger pointer showing first" id="errors" data-test="task-errors" data-role="expander" role="button" tabindex="0" aria-expanded="true" aria-controls="errors-list">
+		<li class="category-list__item category-list__item_type_error active" role="presentation">
-			<span class="pull-right expander"> ↑ <span class="hide">(close panel)</span></span>
+			<a class="category-list__link" id="errors" href="#errors-list" aria-controls="errors-list" role="tab" data-toggle="tab" data-test="task-errors">
 				Errors ( {{mainResult.count.error}} )
-		</div>
+			</a>
-		<div class="task-danger tasks-list collapse clearfix in" id="errors-list">
-
-			<ul class="list-unstyled">
-				{{#mainResult.errors}}
-					<li>
-						<p class="crunch rule-name">{{code}} <span class="badge">{{count}}</span></p>
-						<p><em>First result:</em> {{message}}</p>
-						<p>
-							<b>Selector:</b>
-							<code style="text-wrap:pre-wrap">{{#if selector}}{{selector}}{{else}}-{{/if}}</code>
-							<br/>
-							<b>Context:</b>
-							<code style="text-wrap:pre-wrap">{{#if context}}{{context}}{{else}}-{{/if}}</code>
-						</p>
-						{{#unless readonly}}
-							{{#if ../../isTaskPage}}
-								<form action="{{../../../task.hrefIgnore}}" method="post">
-									<input type="hidden" name="rule" value="{{code}}"/>
-									<input type="submit" class="btn btn-sm" value="Ignore rule"/>
-								</form>
-							{{/if}}
-						{{/unless}}
 		</li>
-				{{/mainResult.errors}}
+		<li class="category-list__item category-list__item_type_warning" role="presentation">
-			</ul>
+			<a class="category-list__link" id="warnings" href="#warnings-list" aria-controls="warnings-list" role="tab" data-toggle="tab" data-test="task-warnings">
-			<a class="pull-right" href="#top" data-role="top">Back to top</a>
-		</div>
-	{{else}}
-		<p class="heading label-danger" id="errors">Well done! You have 0 errors. <span class="glyphicon glyphicon-ok pull-right"></span></p>
-	{{/if}}
-
-	{{#if mainResult.count.warning}}
-		<div class="heading label-warning pointer" id="warnings" data-test="task-warnings" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="warnings-list">
-			<span class="pull-right expander"> ↓ <span class="hide">(open panel)</span></span>
 				Warnings ( {{mainResult.count.warning}} )
-		</div>
+			</a>
-		<div class="task-warning tasks-list collapse clearfix" id="warnings-list">
-			<ul class="list-unstyled">
-				{{#mainResult.warnings}}
-					<li>
-						<p class="crunch rule-name">{{code}} <span class="badge">{{count}}</span></p>
-						<p><em>First result:</em> {{message}}</p>
-						<p>
-							<b>Selector:</b>
-							<code style="text-wrap:pre-wrap">{{#if selector}}{{selector}}{{else}}-{{/if}}</code>
-							<br/>
-							<b>Context:</b>
-							<code style="text-wrap:pre-wrap">{{#if context}}{{context}}{{else}}-{{/if}}</code>
-						</p>
-						{{#unless readonly}}
-							{{#if ../../isTaskPage}}
-								<form action="{{../../../task.hrefIgnore}}" method="post">
-									<input type="hidden" name="rule" value="{{code}}"/>
-									<input type="submit" class="btn btn-sm" value="Ignore rule"/>
-								</form>
-							{{/if}}
-						{{/unless}}
 		</li>
-				{{/mainResult.warnings}}
+		<li class="category-list__item category-list__item_type_notice" role="presentation">
-			</ul>
+			<a class="category-list__link" id="notices" href="#notices-list" aria-controls="notices-list" role="tab" data-toggle="tab" data-test="task-notices">
-			<a class="pull-right" href="#top" data-role="top">Back to top</a>
-		</div>
-
-	{{else}}
-		<p class="heading label-warning" id="warnings">Well done! You have 0 warnings. <span class="glyphicon glyphicon-ok pull-right"></span></p>
-	{{/if}}
-
-	{{#if mainResult.count.notice}}
-		<div class="heading label-info pointer" id="notices" data-test="task-notices" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="notices-list">
-			<span class="pull-right expander"> ↓ <span class="hide">(open panel)</span></span>
 				Notices ( {{mainResult.count.notice}} )
+			</a>
+		</li>
+		<li class="category-list__item category-list__item_type_ignore" role="presentation">
+			<a class="category-list__link" id="ignore" href="#ignore-list" aria-controls="ignore-list" role="tab" data-toggle="tab">
+				Ignored rules ( {{mainResult.ignore.length}} )
+			</a>
+		</li>
+	</ul>
+
+	<div class="tab-content">
+		<div id="errors-list" role="tabpanel" class="tab-pane tasks-list fade in active">
+			{{#if mainResult.count.error}}
+				{{#mainResult.errors}}
+					<div class="panel panel-default task task_type_error">
+						<div class="panel-heading">
+							<div class="row">
+								<div class="col-md-9 col-sm-9 col-xs-8">
+									<span class="rule-name">{{code}}&ensp;
+										<span class="badge" title="{{count}} selector(s)" data-toggle="tooltip" data-role="rule-tooltip">{{count}}</span>
+									</span>
 								</div>
-		<div class="task-info tasks-list collapse clearfix" id="notices-list">
+								<div class="col-md-3 col-sm-3 col-xs-4 task-actions">
-			<ul class="list-unstyled">
-				{{#mainResult.notices}}
-					<li>
-						<p class="crunch rule-name">{{code}} <span class="badge">{{count}}</span></p>
-						<p><em>First result:</em> {{message}}</p>
-						<p>
-							<b>Selector:</b>
-							<code style="text-wrap:pre-wrap">{{#if selector}}{{selector}}{{else}}-{{/if}}</code>
-							<br/>
-							<b>Context:</b>
-							<code style="text-wrap:pre-wrap">{{#if context}}{{context}}{{else}}-{{/if}}</code>
-						</p>
 									{{#unless readonly}}
 										{{#if ../../isTaskPage}}
-								<form action="{{../../../task.hrefIgnore}}" method="post">
+											<form class="ignore-form" action="{{../../../task.hrefIgnore}}" method="post">
 												<input type="hidden" name="rule" value="{{code}}"/>
-									<input type="submit" class="btn btn-sm" value="Ignore rule"/>
+												<input type="submit" role="link" class="btn btn-link btn-sm link" value="Ignore rule"/>
 											</form>
 										{{/if}}
 									{{/unless}}
-					</li>
-				{{/mainResult.notices}}
-			</ul>
-			<a class="pull-right" href="#top" data-role="top">Back to top</a>
 								</div>
-	{{else}}
+							</div>
-		<p class="heading label-info" id="notices">Well done! You have 0 notices. <span class="glyphicon glyphicon-ok pull-right"></span></p>
+						</div>
+
+						<div class="panel-body">
+							<span class="text">{{message}}</span>
+							<span class="btn btn-xs btn-link link btn-details" data-role="details-collapse" data-toggle="collapse" data-target="#error-index-{{@index}}" aria-expanded="false" aria-controls="error-index-{{@index}}">details</span>
+
+							<div class="task-details collapse" id="error-index-{{@index}}">
+								{{#if solutions.length}}
+									<div class="subtitle" id="error-solutions">Solutions:</div>
+									<ul class="list-unstyled solutions-list" role="list" aria-labelledby="error-solutions">
+										{{#each solutions}}
+											<li class="list-unstyled__item" role="listitem">
+												<a class="link" href="{{url}}" target="_blank">
+													<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
+												</a>
+											</li>
+										{{/each}}
+									</ul>
 								{{/if}}
 
-	{{#if mainResult.ignore.length}}
+								{{#if items.length}}
-		<div class="heading label-default pointer" id="ignore" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="ignore-list">
+									<div class="subtitle" id="error-selectors">Selectors:</div>
-			<span class="pull-right expander"> ↓ <span class="hide">(open panel)</span></span>
+									<ul class="list-unstyled selectors-list" role="list" aria-labelledby="error-selectors">
-			Ignored Rules ( {{mainResult.ignore.length}} )
+										{{#each items}}
-		</div>
+											<li class="list-unstyled__item" role="listitem">
-		<div class="task-default tasks-list collapse clearfix" id="ignore-list">
+												<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
-			<ul class="list-unstyled">
+													<code class="code">{{selector}}</code>
-			    {{#mainResult.ignore}}
+												</span>
-			        <li>
+											</li>
-						<p class="crunch rule-name">{{name}}</p>
+										{{/each}}
-						{{#if description}}
+									</ul>
-							<p>{{description}}</p>
 								{{/if}}
+							</div>
+						</div>
+					</div>
+				{{/mainResult.errors}}
+				<div class="to-top">
+					<a class="link" href="#top" data-role="top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
+				</div>
+			{{else}}
+				<div class="text">Well done! You have 0 errors. <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span></div>
+			{{/if}}
+		</div>
+
+		<div id="warnings-list" role="tabpanel" class="tab-pane tasks-list fade">
+			{{#if mainResult.count.warning}}
+				{{#mainResult.warnings}}
+					<div class="panel panel-default task task_type_warning">
+						<div class="panel-heading">
+							<div class="row">
+								<div class="col-md-9 col-sm-9 col-xs-8">
+									<span class="rule-name">{{code}}&ensp;
+										<span class="badge" title="{{count}} selector(s)" data-toggle="tooltip" data-role="rule-tooltip">{{count}}</span>
+									</span>
+								</div>
+								<div class="col-md-3 col-sm-3 col-xs-4 task-actions">
 									{{#unless readonly}}
 										{{#if ../../isTaskPage}}
-								<form action="{{../../../task.hrefUnignore}}" method="post">
+											<form class="ignore-form" action="{{../../../task.hrefIgnore}}" method="post">
-									<input type="hidden" name="rule" value="{{name}}"/>
+												<input type="hidden" name="rule" value="{{code}}"/>
-									<input type="submit" class="btn btn-sm" value="Unignore rule"/>
+												<input type="submit" role="link" class="btn btn-link btn-sm link" value="Ignore rule"/>
 											</form>
 										{{/if}}
 									{{/unless}}
-					</li>
-			    {{/mainResult.ignore}}
-			</ul>
-			<a class="pull-right" href="#top" data-role="top">Back to top</a>
 								</div>
-	{{else}}
+							</div>
-		<p class="heading label-default">You have no ignored rules.</p>
+						</div>
+
+						<div class="panel-body">
+							<span class="text">{{message}}</span>
+							<span class="btn btn-xs btn-link link btn-details" data-role="details-collapse" data-toggle="collapse" data-target="#warning-index-{{@index}}" aria-expanded="false" aria-controls="warning-index-{{@index}}">details</span>
+
+							<div class="task-details collapse" id="warning-index-{{@index}}">
+								{{#if solutions.length}}
+									<div class="subtitle" id="warning-solutions">Solutions:</div>
+									<ul class="list-unstyled solutions-list" role="list" aria-labelledby="warning-solutions">
+										{{#each solutions}}
+											<li class="list-unstyled__item" role="listitem">
+												<a class="link" href="{{url}}" target="_blank">
+													<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
+												</a>
+											</li>
+										{{/each}}
+									</ul>
+								{{/if}}
+
+								{{#if items.length}}
+									<div class="subtitle" id="warning-selectors">Selectors:</div>
+									<ul class="list-unstyled selectors-list" role="list" aria-labelledby="warning-selectors">
+										{{#each items}}
+											<li class="list-unstyled__item" role="listitem">
+												<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
+													<code class="code">{{selector}}</code>
+												</span>
+											</li>
+										{{/each}}
+									</ul>
 								{{/if}}
 							</div>
+						</div>
+					</div>
+				{{/mainResult.warnings}}
+				<div class="to-top">
+					<a class="link" href="#top" data-role="top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
+				</div>
+			{{else}}
+				<div class="text">Well done! You have 0 warnings. <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span></div>
+			{{/if}}
+		</div>
+
+		<div id="notices-list" role="tabpanel" class="tab-pane tasks-list fade">
+			{{#if mainResult.count.notice}}
+				{{#mainResult.notices}}
+					<div class="panel panel-default task task_type_notice">
+						<div class="panel-heading">
+							<div class="row">
+								<div class="col-md-9 col-sm-9 col-xs-8">
+									<span class="rule-name">{{code}}&ensp;
+										<span class="badge" title="{{count}} selector(s)" data-toggle="tooltip" data-role="rule-tooltip">{{count}}</span>
+									</span>
+								</div>
+								<div class="col-md-3 col-sm-3 col-xs-4 task-actions">
+									{{#unless readonly}}
+										{{#if ../../isTaskPage}}
+											<form class="ignore-form" action="{{../../../task.hrefIgnore}}" method="post">
+												<input type="hidden" name="rule" value="{{code}}"/>
+												<input type="submit" role="link" class="btn btn-link btn-sm link" value="Ignore rule"/>
+											</form>
+										{{/if}}
+									{{/unless}}
+								</div>
+							</div>
+						</div>
+
+						<div class="panel-body">
+							<span class="text">{{message}}</span>
+							<span class="btn btn-xs btn-link link btn-details" data-role="details-collapse" data-toggle="collapse" data-target="#notice-index-{{@index}}" aria-expanded="false" aria-controls="notice-index-{{@index}}">details</span>
+
+							<div class="task-details collapse" id="notice-index-{{@index}}">
+								{{#if solutions.length}}
+									<div class="subtitle" id="notice-solutions">Solutions:</div>
+									<ul class="list-unstyled solutions-list" role="list" aria-labelledby="notice-solutions">
+										{{#each solutions}}
+											<li class="list-unstyled__item" role="listitem">
+												<a class="link" href="{{url}}" target="_blank">
+													<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
+												</a>
+											</li>
+										{{/each}}
+									</ul>
+								{{/if}}
+
+								{{#if items.length}}
+									<div class="subtitle" id="notice-selectors">Selectors:</div>
+									<ul class="list-unstyled selectors-list" role="list" aria-labelledby="notice-selectors">
+										{{#each items}}
+											<li class="list-unstyled__item" role="listitem">
+												<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
+													<code class="code">{{selector}}</code>
+												</span>
+											</li>
+										{{/each}}
+									</ul>
+								{{/if}}
+							</div>
+						</div>
+					</div>
+				{{/mainResult.notices}}
+				<div class="to-top">
+					<a class="link" href="#top" data-role="top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
+				</div>
+			{{else}}
+				<div class="text">Well done! You have 0 notices. <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span></div>
+			{{/if}}
+		</div>
+
+		<div id="ignore-list" role="tabpanel" class="tab-pane tasks-list fade">
+			{{#if mainResult.ignore.length}}
+				{{#mainResult.ignore}}
+					<div class="panel panel-default task task_type_ignore">
+						<div class="panel-heading">
+							<div class="row">
+								<div class="col-md-9 col-sm-9 col-xs-8">
+									<span class="rule-name">{{name}}</span>
+								</div>
+								<div class="col-md-3 col-sm-3 col-xs-4 task-actions">
+									{{#unless readonly}}
+										{{#if ../../isTaskPage}}
+											<form class="ignore-form" action="{{../../../task.hrefUnignore}}" method="post">
+												<input type="hidden" name="rule" value="{{name}}"/>
+												<input type="submit" role="link" class="btn btn-link btn-sm link" value="Unignore rule"/>
+											</form>
+										{{/if}}
+									{{/unless}}
+								</div>
+							</div>
+						</div>
+
+						<div class="panel-body">
+							{{#if description}}
+								<span class="text">{{description}}</span>
+							{{/if}}
+						</div>
+					</div>
+				{{/mainResult.ignore}}
+				<div class="to-top">
+					<a class="link" href="#top" data-role="top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
+				</div>
+			{{else}}
+				<div class="text">You have no ignored rules.</div>
+			{{/if}}
+		</div>
+	</div>
+</div>

view/presenter/result.js

@@ -16,6 +16,7 @@
 
 const _ = require('underscore');
 const presentIgnoreRules = require('./ignore');
+const techs = require('../../data/techniques')();
 
 module.exports = presentResult;
 
@@ -40,9 +41,29 @@ function presentResult(result) {
 			const results = groupedByType[type] || [];
 			const groupedByCode = _.groupBy(results, 'code');
 			result[pluralType] = _.keys(groupedByCode).map(group => {
-				const firstMessage = groupedByCode[group][0];
+				const groupMessage = groupedByCode[group][0];
-				firstMessage.count = groupedByCode[group].length;
+				groupMessage.count = groupedByCode[group].length;
-				return firstMessage;
+				groupMessage.items = groupedByCode[group].map(plural => ({
+					selector: plural.selector,
+					context: plural.context
+				}));
+				// Map standard to techniques
+				const data = groupMessage.code.split('.');
+				data.splice(0, 4);
+				const techniques = data.join('.').split(',').map(code => code.split('.')[0]);
+				groupMessage.solutions = techniques.reduce((prev, technique) => {
+					if (techs[technique] && techs[technique].title) {
+						prev.push({
+							title: techs[technique].title || null,
+							url: techs[technique].url || null
+						});
+					}
+					return prev;
+				}, []);
+				return groupMessage;
+			})
+				.sort((currentItem, nextItem) => {
+					return nextItem.count - currentItem.count;
 				});
 		});
 	}

view/task/edit.html

@@ -156,7 +156,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 					{{#rules}}
 						<li>
 							<input class="pull-left" id="{{name}}" type="checkbox" name="ignore[]" value="{{name}}" {{#ignored}}checked{{/ignored}}/>
-							<label for="{{name}}" title="{{description}}" data-role="rules-tooltip" class="checkbox">
+							<label for="{{name}}" title="{{description}}" data-role="rule-tooltip" class="checkbox">
 								{{name}}
 							</label>
 						</li>