Redesign program page

Redesign website program page

This will align the program page with Gina Valdez's wire-framed design.
This page will need a little more work specifically to add the following
- A filter to allow a site user to narrow down the talks that appear
- Keynotes need to separated in the CFP application
- And the individual program card is going to be getting a better look and feel

adjust subnav controller to use dataset
This adjustment is necessary to allow the sub_nav controller to be used in the TinyMCE code editor

* update spec with new container naming convention
* WIP finalize program page design
* 2nd pass on program page design

This commit is largely done just update the layout of the program page.
Certain elements are largely still in flux, and will most likely change in the upcoming commits.
Stay tuned.

* configure session formats displayed on program page

allow a website creator/organizer to configure exactly which session formats will be displayed on the website page.
Also allow creator to set position, and display name of the session formats.

The primary reason for doing this is to allow keynotes, talks, workshops, and any future session format to be properly displayed on the website program page.

The website configuration form still needs some work, rendering the form groups inline is difficult becuase simple form doesn't easily allow wrapper_html to be placed around inputs generated with simple_fields_for

* final pass at program page design

Uses the website decoarator to generalize tag/session format background colors.
This will mean tracks color/classes wont need to be updated year over year

* adjustments made per code review

* update specs to consider session format configuration

Use the program session factories to create both the session_formats and the session_format_configs

Author: codyjamesbrooks

app/assets/images/themes/default/closed-filter.png

@@ -34,7 +34,7 @@ body {
 }
 
 .hidden {
-  display: none;
+  display: none!important;
 }
 
 header + #content {

app/assets/images/themes/default/open-filter.png

@@ -1,16 +1,56 @@
-
 $black: #000000 !default;
-$bronze: #B77D39 !default;
+$blue: #3444DA !default;
+$blue-dark: #417D7A !default;
+$blue-light: #A1E3D8 !default;
 $divider: #E0D2C7 !default;
-$divider-light: rgba(0, 0, 0, .1) !default;
+$divider-light: #EBEBEB !default;
+$bronze: #B77D39 !default;
+$brown: #5A5655 !default;
 $gold: #FFB62C !default;
+$green: #829757 !default;
+$green-dark: #417D7A !default;
 $grey: #494644 !default;
 $grey-light: #C4C4C4 !default;
 $grey-lighter: #F5F5F5 !default;
 $grey-lightest: #E7E7E7 !default;
 $grey-logo: #E6E6E6 !default;
+$orange: #FFBC90 !default;
+$orange-burnt: #EA652C !default;
+$pastel-pink: #F94975 !default;
+$pastel-purple: #CD8DF4 !default;
+$pastel-peach: #FFBC80 !default;
+$pastel-blue-light: #A1E3D8 !default;
+$pastel-blue:  #3444DA !default;
+$pink: #FF88ab !default;
 $platinum: #C7D7D7 !default;
+$purple: #7445C0 !default;
 $red: #C04F45 !default;
+$red-dark: #E14943 !default;
+$red-light: #E14943 !default;
 $silver:#E0E0E0 !default;
+$teal: #48c892 !default;
 $text: $grey !default;
+$text-secondary: #515151 !default;
+$yellow: #FFD801 !default;
 $white: #FFFFFF !default;
+
+// Session Formats
+$session-format-tag-1: $pastel-pink !default;
+$session-format-tag-2: $pastel-purple !default;
+$session-format-tag-3: $pastel-peach !default;
+$session-format-tag-4: $pastel-blue-light !default;
+$session-format-tag-5: $pastel-blue !default;
+
+// Track Tags
+$bg-track-1: $yellow!default;
+$bg-track-2: $orange-burnt !default;
+$bg-track-3: $pink !default;
+$bg-track-4: $purple !default;
+$bg-track-5: $blue-dark !default;
+$bg-track-6: $teal !default;
+$bg-track-7: $red-dark !default;
+$bg-track-8: $brown !default;
+$bg-track-9: $silver !default;
+$bg-track-10: $blue-light !default;
+$bg-track-11: $bronze !default;
+$bg-track-12: $orange !default;