[PATCH conductor] Stylesheets cleanup and changes.

Brian McLaughlin bmclaugh at redhat.com
Fri Apr 27 19:16:57 UTC 2012


On 04/26/2012 10:34 AM, jtomasek at redhat.com wrote:
> From: Jiri Tomasek<jtomasek at redhat.com>
>
> Removed unused stylesheets, created converge-ui-like css structure.
> Main file that is referenced in application.haml is layout.scss and other stylesheet parts are included
> as sass partials(mixins, fonts, helpers, buttons, reset and custom). So the whole stylesheet gets
> rendered into single layout.css file. Other styling and structural changes.
>
> unified clearfixes, loading tabs
>
> removed all font family variables, moved them to fonts css
>
> added separate buttons css
>
> fixed buttons alignment, obj_actions as class
>
> aligned provider_dropdown properly
>
> badges
>
> content-sections fixup
> ---
>   src/app/stylesheets/_buttons.scss                  |  345 +++++++
>   src/app/stylesheets/_custom.scss                   |  187 ++++
>   src/app/stylesheets/_fonts.scss                    |   18 +
>   src/app/stylesheets/_header.scss                   |  445 ++++++++++
>   src/app/stylesheets/_helpers.scss                  |    7 +
>   src/app/stylesheets/_mixins.scss                   |   30 +
>   src/app/stylesheets/_reset.scss                    |  186 ++++
>   src/app/stylesheets/custom.scss                    |  199 -----
>   src/app/stylesheets/header.scss                    |  463 ----------
>   src/app/stylesheets/layout.scss                    |  937 +-------------------
>   src/app/stylesheets/login.scss                     |    2 +
>   src/app/views/catalogs/_section_header.html.haml   |    2 +-
>   src/app/views/catalogs/edit.html.haml              |    2 +-
>   src/app/views/catalogs/new.html.haml               |    2 +-
>   src/app/views/catalogs/show.html.haml              |    2 +-
>   .../views/deployables/_new_from_image.html.haml    |    1 -
>   .../views/deployables/_section_header.html.haml    |    2 +-
>   src/app/views/deployables/show.html.haml           |    6 +-
>   src/app/views/deployments/_alerts_show.html.haml   |    5 +-
>   src/app/views/deployments/_header_show.html.haml   |    7 +-
>   src/app/views/deployments/_launch_new.html.haml    |    2 +-
>   .../deployments/launch_from_catalog.html.haml      |    2 +-
>   src/app/views/deployments/show.html.haml           |    7 +-
>   src/app/views/hardware_profiles/_form.html.haml    |   41 +-
>   .../hardware_profiles/_section_header.html.haml    |    2 +-
>   src/app/views/hardware_profiles/edit.html.haml     |    9 +-
>   src/app/views/hardware_profiles/new.html.haml      |    2 +-
>   src/app/views/hardware_profiles/show.html.haml     |    2 +-
>   src/app/views/images/edit_xml.html.haml            |    2 +-
>   src/app/views/images/import.html.haml              |    2 +-
>   src/app/views/images/new.html.haml                 |    3 +-
>   src/app/views/images/overview.html.haml            |    2 +-
>   src/app/views/images/show.html.haml                |   11 +-
>   .../views/layouts/_admin_content_tabs.html.haml    |    1 -
>   src/app/views/layouts/_admin_users_tabs.html.haml  |    1 -
>   src/app/views/layouts/_filter_table.html.haml      |    3 +-
>   .../views/layouts/_pretty_filter_toggle.html.haml  |    6 +-
>   src/app/views/layouts/_tabpanel.html.haml          |   27 +-
>   src/app/views/layouts/application.html.haml        |    5 -
>   src/app/views/permissions/_form.html.haml          |    4 +-
>   src/app/views/permissions/_new.html.haml           |    2 +-
>   src/app/views/pool_families/_list.html.haml        |   16 +-
>   .../views/pool_families/_section_header.html.haml  |    2 +-
>   .../pool_families/add_provider_accounts.html.haml  |   11 +-
>   src/app/views/pool_families/edit.html.haml         |    2 +-
>   src/app/views/pool_families/new.html.haml          |    2 +-
>   src/app/views/pool_families/show.html.haml         |    3 +-
>   src/app/views/pools/_alerts_index.html.haml        |    5 +-
>   src/app/views/pools/_alerts_show.html.haml         |    5 +-
>   src/app/views/pools/_edit.html.haml                |    4 +-
>   src/app/views/pools/_form.html.haml                |    2 +-
>   src/app/views/pools/_header_index.html.haml        |    4 +-
>   src/app/views/pools/_header_show.html.haml         |    6 +-
>   src/app/views/pools/show.html.haml                 |    7 +-
>   .../provider_accounts/_section_header.html.haml    |    2 +-
>   src/app/views/provider_accounts/edit.html.haml     |    2 +-
>   src/app/views/provider_accounts/new.html.haml      |    2 +-
>   src/app/views/provider_accounts/show.html.haml     |    2 +-
>   .../provider_realms/_section_header.html.haml      |    2 +-
>   src/app/views/provider_realms/show.html.haml       |    2 +-
>   src/app/views/providers/_section_header.html.haml  |    2 +-
>   src/app/views/providers/edit.html.haml             |   16 +-
>   src/app/views/providers/new.html.haml              |    2 +-
>   src/app/views/realms/_section_header.html.haml     |    2 +-
>   src/app/views/realms/edit.html.haml                |    5 +-
>   src/app/views/realms/new.html.haml                 |    2 +-
>   src/app/views/realms/show.html.haml                |    2 +-
>   src/app/views/roles/_form.html.haml                |   10 +-
>   src/app/views/roles/_section_header.html.haml      |    2 +-
>   src/app/views/roles/edit.html.haml                 |   10 +-
>   src/app/views/roles/show.html.haml                 |    2 +-
>   src/app/views/settings/index.html.haml             |   16 +-
>   src/app/views/settings/self_service.html.haml      |    4 +-
>   src/app/views/users/_list.html.haml                |    4 +-
>   src/app/views/users/_section_header.html.haml      |    2 +-
>   src/app/views/users/edit.html.haml                 |    2 +-
>   src/app/views/users/new.html.haml                  |    2 +-
>   src/app/views/users/show.html.haml                 |    6 +-
>   src/config/locales/en.yml                          |    1 +
>   .../step_definitions/hardware_profile_steps.rb     |    2 +-
>   src/public/javascripts/application.js              |    6 +-
>   src/public/stylesheets/960.css                     |  440 ---------
>   src/public/stylesheets/buttons.css                 |  394 --------
>   src/public/stylesheets/facebox.css                 |  101 ---
>   src/public/stylesheets/layout.css                  |  270 ------
>   src/public/stylesheets/layout_ie7.css              |    2 +-
>   src/public/stylesheets/reset.css                   |  171 ----
>   87 files changed, 1426 insertions(+), 3117 deletions(-)
>   create mode 100644 src/app/stylesheets/_buttons.scss
>   create mode 100644 src/app/stylesheets/_custom.scss
>   create mode 100644 src/app/stylesheets/_fonts.scss
>   create mode 100644 src/app/stylesheets/_header.scss
>   create mode 100644 src/app/stylesheets/_helpers.scss
>   create mode 100644 src/app/stylesheets/_mixins.scss
>   create mode 100644 src/app/stylesheets/_reset.scss
>   delete mode 100644 src/app/stylesheets/custom.scss
>   delete mode 100644 src/app/stylesheets/header.scss
>   delete mode 100644 src/public/stylesheets/960.css
>   delete mode 100644 src/public/stylesheets/buttons.css
>   delete mode 100644 src/public/stylesheets/facebox.css
>   delete mode 100644 src/public/stylesheets/layout.css
>   delete mode 100644 src/public/stylesheets/reset.css
>
> diff --git a/src/app/stylesheets/_buttons.scss b/src/app/stylesheets/_buttons.scss
> new file mode 100644
> index 0000000..3f6703b
> --- /dev/null
> +++ b/src/app/stylesheets/_buttons.scss
> @@ -0,0 +1,345 @@
> +/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> +Application Button Set
> +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
> +
> +/* ------------------------------------------
> + * CSS3 GITHUB BUTTONS (Nicolas Gallagher)
> + * Licensed under Unlicense
> + * http://github.com/necolas/css3-github-buttons
> + * --------------------------------------- */
> +
> +
> +/* =============================================================================
> +   Base Button
> +   ========================================================================== */
> +
> +.button {
> +    position: relative;
> +    overflow: visible;
> +    display: inline-block;
> +    padding: 0.5em 1em;
> +    border: 1px solid #d4d4d4;
> +    margin: 0;
> +    text-decoration: none;
> +    text-align: center;
> +    text-shadow: 1px 1px 0 #fff;
> +    font:11px/normal sans-serif;
> +    color: #333;
> +    white-space: nowrap;
> +    cursor: pointer;
> +    outline: none;
> +    background-color: #ececec;
> +    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
> +    background-image: -moz-linear-gradient(#f4f4f4, #ececec);
> +    background-image: -ms-linear-gradient(#f4f4f4, #ececec);
> +    background-image: -o-linear-gradient(#f4f4f4, #ececec);
> +    background-image: linear-gradient(#f4f4f4, #ececec);
> +    -moz-background-clip: padding; /* for Firefox 3.6 */
> +    background-clip: padding-box;
> +    border-radius: 0.2em;
> +    /* IE hacks */
> +    zoom: 1;
> +    *display: inline;
> +}
> +
> +.button:hover,
> +.button:focus,
> +.button:active,
> +.button.active {
> +    border-color: #3072b3;
> +    border-bottom-color: #2a65a0;
> +    text-decoration: none;
> +    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
> +    color: #fff;
> +    background-color: #3c8dde;
> +    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
> +    background-image: -moz-linear-gradient(#599bdc, #3072b3);
> +    background-image: -o-linear-gradient(#599bdc, #3072b3);
> +    background-image: linear-gradient(#599bdc, #3072b3);
> +}
> +
> +.button:active,
> +.button.active {
> +    border-color: #2a65a0;
> +    border-bottom-color: #3884cd;
> +    background-color: #3072b3;
> +    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
> +    background-image: -moz-linear-gradient(#3072b3, #599bdc);
> +    background-image: -ms-linear-gradient(#3072b3, #599bdc);
> +    background-image: -o-linear-gradient(#3072b3, #599bdc);
> +    background-image: linear-gradient(#3072b3, #599bdc);
> +}
> +
> +/* overrides extra padding on button elements in Firefox */
> +.button::-moz-focus-inner {
> +    padding: 0;
> +    border: 0;
> +}
> +
> +/* =============================================================================
> +   Button extensions
> +   ========================================================================== */
> +
> +/* Primary button
> +   ========================================================================== */
> +
> +.button.primary {
> +    font-weight: bold;
> +}
> +
> +/* Danger button
> +   ========================================================================== */
> +
> +.button.danger {
> +    color: #900;
> +}
> +
> +.button.danger:hover,
> +.button.danger:focus,
> +.button.danger:active {
> +    border-color: #b53f3a;
> +    border-bottom-color: #a0302a;
> +    color: #fff;
> +    background-color: #dc5f59;
> +    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));
> +    background-image: -moz-linear-gradient(#dc5f59, #b33630);
> +    background-image: -ms-linear-gradient(#dc5f59, #b33630);
> +    background-image: -o-linear-gradient(#dc5f59, #b33630);
> +    background-image: linear-gradient(#dc5f59, #b33630);
> +}
> +
> +.button.danger:active,
> +.button.danger.active {
> +    border-color: #a0302a;
> +    border-bottom-color: #bf4843;
> +    background-color: #b33630;
> +    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));
> +    background-image: -moz-linear-gradient(#b33630, #dc5f59);
> +    background-image: -ms-linear-gradient(#b33630, #dc5f59);
> +    background-image: -o-linear-gradient(#b33630, #dc5f59);
> +    background-image: linear-gradient(#b33630, #dc5f59);
> +}
> +
> +/* Pill button
> +   ========================================================================== */
> +
> +.button.pill {
> +    border-radius: 50em;
> +}
> +
> +/* Disabled button
> +   ========================================================================== */
> +
> +.button.disable {
> +    opacity: 0.5;
> +}
> +
> +/* Big button
> +   ========================================================================== */
> +
> +.button.big {
> +    font-size: 14px;
> +}
> +
> +.button.big.icon:before {
> +    top: 0;
> +}
> +
> +/* =============================================================================
> +   Button groups
> +   ========================================================================== */
> +
> +/* Standard group
> +   ========================================================================== */
> +
> +.button-group {
> +    display: inline-block;
> +    list-style: none;
> +    padding: 0;
> +    margin: 0;
> +    /* IE hacks */
> +    zoom: 1;
> +    *display: inline;
> +}
> +
> +.button + .button,
> +.button + .button-group,
> +.button-group + .button,
> +.button-group + .button-group {
> +    margin-left: 15px;
> +}
> +
> +.button-group li {
> +    float: left;
> +    padding: 0;
> +    margin: 0;
> +}
> +
> +.button-group .button {
> +    float: left;
> +    margin-left: -1px;
> +}
> +
> +.button-group>  .button:not(:first-child):not(:last-child),
> +.button-group li:not(:first-child):not(:last-child) .button {
> +    border-radius: 0;
> +}
> +
> +.button-group>  .button:first-child,
> +.button-group li:first-child .button {
> +    margin-left: 0;
> +    border-top-right-radius: 0;
> +    border-bottom-right-radius: 0;
> +}
> +
> +.button-group>  .button:last-child,
> +.button-group li:last-child>  .button {
> +    border-top-left-radius: 0;
> +    border-bottom-left-radius: 0;
> +}
> +
> +/* Minor group
> +   ========================================================================== */
> +
> +.button-group.minor-group .button {
> +    border: 1px solid #d4d4d4;
> +    text-shadow: none;
> +    background-image: none;
> +    background-color: #fff;
> +}
> +
> +.button-group.minor-group .button:hover,
> +.button-group.minor-group .button:focus {
> +    background-color: #599bdc;
> +}
> +
> +.button-group.minor-group .button:active,
> +.button-group.minor-group .button.active {
> +    background-color: #3072b3;
> +}
> +
> +.button-group.minor-group .button.icon:before {
> +    opacity: 0.8;
> +}
> +
> +/* =============================================================================
> +   Button container (mixing buttons and groups, e.g., nav bar)
> +   ========================================================================== */
> +
> +.button-container .button,
> +.button-container .button-group {
> +    vertical-align: top;
> +}
> +
> +/* =============================================================================
> +   Conductor customizations
> +   ========================================================================== */
> +
> +/* Button_to helper in button-group fix
> +   ========================================================================== */
> +.button-group .button_to:not(:only-child) div .button.pill{
> +  -webkit-border-radius: 0em 50em;
> +  -moz-border-radius: 0em 50em 50em 0em;
> +  border-radius: 0em 50em 50em 0em;
> +}
> +
> +/* Launch deployment button
> +   ========================================================================== */
> +#launch_deployment_button{
> +  @include display_inline_block;
> +  vertical-align: middle;
> +  margin: 0px 0px 0px 10px;
> +  padding: 13px 12px 9px 46px;
> +  font-weight: bold;
> +  font-size: 14px;
> +  color: white;
> +  text-decoration: none;
> +  border: 1px solid #669933;
> +  -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em;
> +
> +  background: #5AB45C url(../../images/deployment_large_icon_provider_white.png) no-repeat 12px center; /* Old browsers */
> +  background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -moz-linear-gradient(top, #ace3ac 0%, #5ab45c 100%); /* FF3.6+ */
> +  background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ace3ac), color-stop(100%,#5ab45c)); /* Chrome,Safari4+ */
> +  background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -webkit-linear-gradient(top, #ace3ac 0%,#5ab45c 100%); /* Chrome10+,Safari5.1+ */
> +  background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -o-linear-gradient(top, #ace3ac 0%,#5ab45c 100%); /* Opera 11.10+ */
> +  background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -ms-linear-gradient(top, #ace3ac 0%,#5ab45c 100%); /* IE10+ */
> +  background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, linear-gradient(top, #ace3ac 0%,#5ab45c 100%); /* W3C */
> +  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ace3ac', endColorstr='#5ab45c',GradientType=0 ); /* IE6-9 */
> +&:active{
> +    background: #458944; /* Old browsers */
> +    background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -moz-linear-gradient(top, #9ecc9b 0%, #458944 100%); /* FF3.6+ */
> +    background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ecc9b), color-stop(100%,#458944)); /* Chrome,Safari4+ */
> +    background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -webkit-linear-gradient(top, #9ecc9b 0%, #458944 100%); /* Chrome10+,Safari5.1+ */
> +    background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -o-linear-gradient(top, #9ecc9b 0%, #458944 100%); /* Opera 11.10+ */
> +    background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -ms-linear-gradient(top, #9ecc9b 0%, #458944 100%); /* IE10+ */
> +    background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, linear-gradient(top, #9ecc9b 0%, #458944 100%); /* W3C */
> +    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ecc9b', endColorstr='#458944',GradientType=0 ); /* IE6-9 */
> +    -webkit-box-shadow: inset 1px 1px 2px 0px #333; -moz-box-shadow: inset 1px 1px 2px 0px #333; box-shadow: inset 1px 1px 2px 0px #333;
> +  }
> +&[type=submit][disabled=disabled],
> +&[disabled=disabled],
> +&.disabled{
> +    cursor: default;
> +    zoom: 1;
> +    filter: alpha(opacity=50);
> +    -moz-opacity:0.5;
> +    opacity: 0.5;
> +  }
> +}
> +
> +/* Pretty/Filter view toggle
> +   ========================================================================== */
> +span.view-toggle{
> +  @include display_inline_block;
> +}
> +
> +a.view-toggle{
> +  background: url('../../images/button-viewtoggle.png') no-repeat top left;
> +  display: block;
> +  float:left;
> +  width: 38px;
> +  height: 27px;
> +}
> +
> +a.view-toggle.pretty{
> +&:active{
> +    background-position: -75px 0px;
> +  }
> +}
> +
> +a.view-toggle.filter{
> +  width: 36px;
> +  background-position: -39px 0px;
> +&:active{
> +    background-position: -114px 0px;
> +  }
> +}
> +
> +a.view-toggle.pretty.active{
> +  background-position: -75px 0px;
> +}
> +
> +a.view-toggle.filter.active{
> +  background-position: -114px 0px;
> +}
> +
> +/* Return to div
> +   ========================================================================== */
> +div.return_to{
> +  @include display_inline_block;
> +
> +  a{
> +    background: #cccccc;
> +    color: black;
> +    text-decoration: none;
> +    font-weight: bold;
> +    padding: 3px 6px;
> +    -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
> +    border: none;
> +  }
> +}
> +
> +.return_to + .button-group,
> +.return_to + .button{
> +    margin-left: 15px;
> +}
> diff --git a/src/app/stylesheets/_custom.scss b/src/app/stylesheets/_custom.scss
> new file mode 100644
> index 0000000..ec407bc
> --- /dev/null
> +++ b/src/app/stylesheets/_custom.scss
> @@ -0,0 +1,187 @@
> +.pool_details {
> +  color: #333;
> +  text-decoration: none;
> +}
> +
> +/*launch time params*/
> +.hidden {
> +  display: none;
> +}
> +
> +table.light_table tbody {
> +  tr.collapsed {
> +    display: none;
> +  }
> +
> +  ul li {
> +    list-style-type: none;
> +  }
> +}
> +
> +.launch-time-params h2 {
> +  font-size: 16px;
> +  font-weight: normal;
> +  text-align: center;
> +}
> +
> +$services_width: 250px;
> +$services_border: 1px solid #b0b0b0;
> +$services_background: #efefef;
> +
> +form.generic section.services {
> +  position: relative;
> +  border: $services_border;
> +  margin: 1em;
> +  padding: 0 0 1em;
> +  -webkit-border-radius: 1em;
> +  -moz-border-radius: 1em;
> +  border-radius: 1em;
> +  min-height: 300px;
> +  background: $services_background;
> +  overflow: hidden;
> +
> +  .labels {
> +    margin-top: 64px;
> +    width: 250px;
> +    float: left;
> +
> +    h4.service {
> +      font-size: 14px;
> +      font-weight: normal;
> +      position: relative;
> +      z-index: 1;
> +      $left_padding: 26px;
> +      padding: 0.5em 0 0.5em $left_padding;
> +      width: $services_width - $left_padding + 1px;
> +      border-bottom: 1px solid transparent;
> +
> +&:hover {
> +        background: darken($services_background, 20%);
> +        cursor: pointer;
> +      }
> +&.selected {
> +        background: $services_background;
> +        border-bottom: $services_border;
> +        cursor: default;
> +      }
> +&.filled-out {
> +        background-image: url('../../images/filled_out_params_indicator.png');
> +        background-repeat: no-repeat;
> +        background-position: 8px center;
> +      }
> +    }
> +  }
> +
> +  .params-container {
> +    margin-left: 250px;
> +
> +    .parameters {
> +      display: none;
> +      top: 88px;
> +      left: $services_width;
> +      padding: 1em;
> +    }
> +  }
> +
> +  #service-headers {
> +    position: absolute;
> +    z-index: 0;
> +    background: transparent url('../../images/services_bg.png') repeat top center;
> +    top: 0;
> +    left: 0;
> +    height: 100%;
> +    border-right: $services_border;
> +    width: $services_width;
> +
> +    $left-corners: 1em 0 0 1em;
> +    -webkit-border-radius: $left-corners;
> +    -moz-border-radius: $left-corners;
> +    border-radius: $left-corners;
> +  }
> +
> +
> +  header {
> +    background-image: none;
> +    background: #dddddd;
> +    margin-left: $services_width;
> +    padding: 1em;
> +    height: 40px;
> +
> +    $topright-corner: 0 1em 0 0;
> +    -webkit-border-radius: $topright-corner;
> +    -moz-border-radius: $topright-corner;
> +    border-radius: $topright-corner;
> +
> +    h3 {
> +      font-size: 22px;
> +      font-weight: normal;
> +    }
> +  }
> +
> +  label {
> +    display: block;
> +    float: left;
> +    min-width: 120px;
> +    text-align: right;
> +    padding: 6px 7px 5px 0px;
> +    font-size: 14px;
> +    text-shadow: 0px 1px 0px #ffffff;
> +    font-weight: normal;
> +  }
> +}
> +
> +.catalog_deployments_and_images{
> +  color: #606060;
> +  position: relative;
> +  h1{
> +    font-size: 16px;
> +  }
> +  h2{
> +    font-size: 12px;
> +    padding-left: 10px;
> +    padding-top: 10px;
> +  }
> +  h3{
> +    font-size: 12px;
> +    padding-left: 10px;
> +  }
> +  ul li{
> +    padding-left: 10px;
> +    padding-top:5px;
> +    list-style-type: none;
> +  }
> +}
> +
> +#no-catalog-entry {
> +  margin-bottom: 30px;
> +}
> +
> +.instance_details, .confirm_instances_termination {
> +
> +  h3{
> +    font-size: 22px;
> +    font-weight: normal;
> +    margin-bottom: 10px;
> +  }
> +
> +  ul li {
> +    list-style-type: none;
> +    margin: 10px 15px;
> +    font-weight: bold;
> +    span {
> +        font-weight: normal;
> +    }
> +  }
> +
> +  ol{
> +    margin: 15px;
> +    li {
> +        margin:10px 15px;
> +    }
> +  }
> +}
> +
> +.pagination{
> +  margin-top: 10px;
> +  text-align: center;
> +}
> diff --git a/src/app/stylesheets/_fonts.scss b/src/app/stylesheets/_fonts.scss
> new file mode 100644
> index 0000000..e20293f
> --- /dev/null
> +++ b/src/app/stylesheets/_fonts.scss
> @@ -0,0 +1,18 @@
> + at font-face {
> +  font-family: 'Overpass';
> +  src: url("../../fonts/overpass_regular-web.eot");
> +  src: local("Overpass"), url("../../fonts/overpass_regular-web.eot?#iefix") format("eot"), url("../../fonts/overpass_regular-web.woff") format("woff"), url("../../fonts/overpass_regular-web.ttf") format("truetype"), url("../../fonts/overpass_regular-web.svg#webfontLTZe4IYH") format("svg");
> +  font-weight: normal;
> +  font-style: normal; }
> +
> +
> + at font-face {
> +  font-family: 'Overpass';
> +  src: url("../../fonts/overpass_bold-web.eot");
> +  src: local("Overpass Bold"), local("Overpass-Bold"), url("../../fonts/overpass_bold-web.eot?#iefix") format("eot"), url("../../fonts/overpass_bold-web.woff") format("woff"), url("../../fonts/overpass_bold-web.ttf") format("truetype"), url("../../fonts/overpass_bold-web.svg#webfontzAU82Ltw") format("svg");
> +  font-weight: bold;
> +  font-style: normal; }
> +
> +$font-family-base: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> +$font-family-em: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> +$font-family-primary: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
> diff --git a/src/app/stylesheets/_header.scss b/src/app/stylesheets/_header.scss
> new file mode 100644
> index 0000000..0e4c1f1
> --- /dev/null
> +++ b/src/app/stylesheets/_header.scss
> @@ -0,0 +1,445 @@
> +/* Adapted normalization */
> +
> +.hidden {
> +  display: none; }
> +
> +.shell-design {
> +  section {
> +    display: none;
> +&.active {
> +      display: block; } }
> +  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
> +    display: block; }
> +  a {
> +    color: #36c;
> +&:visited {
> +      color: #36c; }
> +&:hover {
> +      color: #000; }
> +&:focus {
> +      outline: none;
> +      box-shadow: 0 0  3px 3px #fa0; }
> +&:hover,&:active {
> +      outline: none; } }
> +  b, strong {
> +    font-weight: bold; }
> +  img {
> +    border: 0;
> +    -ms-interpolation-mode: bicubic;
> +    vertical-align: middle; }
> +  svg:not(:root) {
> +    overflow: hidden; } }
> +
> +/* Some header-specific styling */
> +
> +header.shell-design {
> +  height: 5.5em;
> +  background-color: #1a1f22;
> +  position: relative;
> +  color: #fff;
> +  border-bottom: .4em solid #060807;
> +  border-top: .4em solid #060807;
> +  box-shadow: inset 0em -0.1em #181c1e, inset 0px -2em 5em #101214;
> +  h1 {
> +    font-size: 1em;
> +    text-transform: uppercase;
> +    position: absolute;
> +    top: .9em;
> +    left: 0;
> +    line-height: 1.5em;
> +    text-indent: 2em;
> +    color: #fff;
> +    em {
> +      border-left: .1em solid #fff;
> +      padding-left: .25em;
> +      margin-left: .25em;
> +      font-style: normal; } }
> +>  article {
> +    margin: 0 auto;
> +    max-width: 80em;
> +    line-height: 2em;
> +    position: relative;
> +    padding: 0em;
> +    padding-left: 20em; } }
> +
> +/* Navigation */
> +
> +nav#appnav {
> +  display: table;
> +  font-weight: normal;
> +  border: .2em solid #181c1e;
> +  border-bottom: none transparent 0px;
> +  margin-top: 2.25em;
> +  border-radius: .25em .25em 0em 0em;
> +  white-space: nowrap;
> +>  ul {
> +>  li {
> +>  ul>  li a {
> +        color: #777; }
> +      display: block;
> +      vertical-align: top;
> +      float: left;
> +      a {
> +        display: block;
> +        width: 100%;
> +        text-decoration: none;
> +        clear: both;
> +        padding: 0em;
> +        text-indent: 1.5em;
> +        text-transform: capitalize;
> +        position: relative;
> +        white-space: nowrap;
> +        overflow: hidden;
> +        text-overflow: ellipsis;
> +&.selected{ background-color: #444; }
> +      }
> +>  a {
> +        color: #bbb;
> +        padding: .75em 1em;
> +        text-align: center;
> +        text-indent: 0em;
> +        border-style: none solid;
> +        border-width: 0px .1em;
> +        border-color: transparent #181c1e;
> +        background-color: #1f2123;
> +        box-shadow: inset 0px -3.5em 2em -2em #15191b;
> +&:active {
> +          color: #fff;
> +          background-color: #4a4e50; }
> +&:hover {
> +          /*box-shadow*/
> +          -webkit-box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.32);
> +          -moz-box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.32);
> +          box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.32);
> +          cursor: pointer; }
> +&:focus,&:active {
> +          box-shadow: inset 0px -4em 3em -2em rgba(0, 0, 0, 0.4); } }
> +      position: relative;
> +&:hover {
> +>  a {
> +          box-shadow: inset 0px -4em 3em -2em rgba(0, 0, 0, 0.4); }
> +        li:hover>  a,>  a {
> +          background-color: #4a4e50;
> +          color: #fff; } }
> +      a {
> +&:hover,&:focus {
> +          background-color: #4a4e50;
> +          color: #fff; } }
> +&:first-child>  a {
> +        /*border-radius*/
> +        -webkit-border-radius: .225em 0em 0em 0em;
> +        -moz-border-radius: .225em 0em 0em 0em;
> +        border-radius: .225em 0em 0em 0em;
> +        border-left: 0px transparent none; }
> +&:last-child>  a {
> +        /*border-radius*/
> +        -webkit-border-radius: 0em .225em   0em 0em;
> +        -moz-border-radius: 0em .225em  0em 0em;
> +        border-radius: 0em .225em  0em 0em;
> +        border-right: 0px transparent none; }
> +>  ul>  li:last-child>  a {
> +        /*border-radius*/
> +        -webkit-border-radius: 0em 0em .25em .25em;
> +        -moz-border-radius: 0em 0em .25em .25em;
> +        border-radius: 0em 0em .25em .25em; } }
> +    display: table-row; }
> +  ul a:after {
> +    z-index: 3;
> +    content: "";
> +    width: 100%;
> +    height: 50%;
> +    top: 0;
> +    left: 0;
> +    right: 0;
> +    display: block;
> +    position: absolute; }
> +>  ul>  li {
> +    a:focus ~ ul,&:hover ul {
> +      background-color: white;
> +      /*box-shadow*/
> +      -webkit-box-shadow: 0em 0.025em 0.5em rgba(0, 0, 0, 0.5);
> +      -moz-box-shadow: 0em 0.025em 0.51em rgba(0, 0, 0, 0.5);
> +      box-shadow: 0em 0.025em 0.51em rgba(0, 0, 0, 0.5);
> +      /*border-radius*/
> +      -webkit-border-radius: 0em 0em .25em .25em;
> +      -moz-border-radius: 0em 0em .25em .25em;
> +      border-radius: 0em 0em .25em .25em;
> +      display: block;
> +      width: 100%;
> +      top: 0em;
> +      left: 0; } } }
> +
> +/* I'm doubtful that this actually matches anythign */
> +
> +.no-boxshadow header nav#appnav>  ul>  li:hover ul {
> +  border: 1px solid #ccc;
> +  margin: -0.1px; }
> +
> +header.shell-design {
> +  nav#appnav>  ul>  li {
> +&:hover>  ul {
> +      z-index: 9999 !important;
> +      /*painfully silly hack*/
> +      margin-top: -0.25em;
> +      padding-top: 0em !important;
> +    }
> +>  ul>  li:hover {
> +      position: relative; }
> +&:hover>  ul>  li>  ul {
> +      position: absolute;
> +      box-shadow: none;
> +      background-color: transparent;
> +      top: 0em;
> +      left: 100%;
> +      padding-top: 0em;
> +>  li {
> +        display: none; } }
> +    a:focus ~ ul,&:hover>  ul {
> +      z-index: 1;
> +      padding-top: 1em;
> +      display: block;
> +      position: absolute;
> +      top: 3.5em;
> +      opacity: 1; }
> +    a:focus ~ li ul li,&:hover>  ul>  li:hover>  ul>  li {
> +      display: block; }
> +    a:focus ~ li ul,&:hover>  ul>  li:hover ul {
> +      /*box-shadow*/
> +      -webkit-box-shadow: 0.025em 0.025em 0.51em rgba(0, 0, 0, 0.5);
> +      -moz-box-shadow: 0.025em 0.025em 0.51em rgba(0, 0, 0, 0.5);
> +      box-shadow: 0.025em 0.025em 0.51em rgba(0, 0, 0, 0.5);
> +      /*border-radius*/
> +      -webkit-border-radius: 0em .25em .25em 0em;
> +      -moz-border-radius: 0em .25em .25em 0em;
> +      border-radius: 0em .25em .25em 0em;
> +      background-color: white;
> +      z-index: 1;
> +      opacity: 1; }
> +>  {
> +      ul {
> +>  li {
> +>  ul li {
> +&:first-child a {
> +              /*border-radius*/
> +              -webkit-border-radius: .0em .25em 0em 0em;
> +              -moz-border-radius: .0em .25em 0em 0em;
> +              border-radius: .0em .25em 0em 0em; }
> +&:last-child a {
> +              /*border-radius*/
> +              -webkit-border-radius: 0em 0em .25em .0em;
> +              -moz-border-radius: 0em 0em .25em .0em;
> +              border-radius: 0em 0em .25em .0em; }
> +&:first-child:hover a:after {
> +              z-index: 9;
> +              display: block;
> +              position: absolute;
> +              top: .5em;
> +              left: 0em;
> +              content: "";
> +              height: 0;
> +              width: 0;
> +              border-width: .5em 0em  .5em .5em;
> +              border-style: solid none solid solid;
> +              border-color: transparent  transparent transparent #fff; } }
> +          ul {
> +&:before {
> +              z-index: 2;
> +              display: block;
> +              position: absolute;
> +              top: 0em;
> +              left: -0.14em;
> +              content: "";
> +              height: 0;
> +              width: 0;
> +              border-width: 1em 0em  1em 1em;
> +              border-style: solid none solid solid;
> +              border-color: transparent  transparent transparent transparent; }
> +&:after {
> +              z-index: 1;
> +              display: block;
> +              position: absolute;
> +              top: .5em;
> +              left: -1em;
> +              content: "";
> +              height: 0;
> +              width: 0;
> +              opacity: 1;
> +              z-index: 2;
> +              border-width: .5em 0em  .5em .5em;
> +              border-style: solid none solid solid;
> +              border-color: transparent  transparent transparent #ccc; } }
> +          a:hover ~ ul:before,&:hover ul:before {
> +            top: 0em;
> +            border: solid 1em #4a4e50;
> +            left: -1.98em; }
> +          a:hover ~ ul:after,&:hover ul:after {
> +            top: 0em;
> +            border-color: transparent  transparent transparent #4a4e50;
> +            left: 0em;
> +            content: "";
> +            height: 0;
> +            width: 0;
> +            border-width: 1em 0em  1em 1em;
> +            border-style: solid  none solid solid; } }
> +        position: absolute;
> +        left: 0;
> +        display: none;
> +        line-height: 2em !important;
> +        min-width: 16em;
> +        max-width: 22em; }
> +      a.active {
> +        position: relative;
> +&:after {
> +          z-index: 9;
> +          position: absolute;
> +          top: 3.1em;
> +          left: 50%;
> +          margin-left: -0.55em;
> +          display: block;
> +          content: "";
> +          width: 0;
> +          height: 0;
> +          border-width: 0em .55em .55em  .55em;
> +          border-style: none solid solid  solid;
> +          border-color: transparent transparent #fff transparent; } } }
> +    position: relative; }
> +&.shell-design>  article section:last-child {
> +    text-align: right;
> +    position: absolute;
> +    top: -1.75em;
> +    right: 0em;
> +    margin: 0 auto;
> +    display: block;
> +    a {
> +      border: 0.1em solid rgba(255, 255, 255, 0.12);
> +      color: #ccc !important;
> +      border-radius: 0em 0em .5em .5em;
> +      color: #fff;
> +      text-decoration: none;
> +      background-color: #181c1e;
> +      box-shadow: inset 0px 1.5em 1em -1em rgba(222, 222, 255, 0.1);
> +      display: inline-block;
> +      padding: .1em 1em;
> +      position: relative;
> +      margin: 1.25em .1em;
> +&:last-child {
> +        padding-right: 2em;
> +&:after {
> +          content: "";
> +          display: block;
> +          height: 0px;
> +          width: 0px;
> +          position: absolute;
> +          top: .75em;
> +          right: .5em;
> +          border-style: solid solid none solid;
> +          border-width: .5em .5em 0em .5em;
> +          border-color: #666 transparent transparent; } }
> +&:first-child {
> +        padding-left: 3em;
> +&:after {
> +          /*content: "!";*/
> +          color: #2e4e66;
> +          text-align: center;
> +          background-color: #ccc !important;
> +          width: 1em;
> +          height: 1em;
> +          border-radius: 50%;
> +          position: absolute;
> +          top: .25em;
> +          left: .5em;
> +          line-height: 1em;
> +          font-size: 1.5em;
> +          display: block;
> +          background-color: transparent;
> +          z-index: 2; } } } } }
> +
> +/*
> + header nav#appnav>  ul>  li>  ul>  li
> +*/
> +
> +/* The below is good */
> +
> +/* Some new stuff */
> +
> +/* Is this legit? */
> +
> +.shell-design {
> +  * {
> +    /*
> +      this is life saving but locks us into>  ie8 will consider this polyfil for lt-ie8
> +      https://github.com/Schepp/box-sizing-polyfill
> +    */
> +    -moz-box-sizing: border-box !important;
> +    -webkit-box-sizing: border-box !important;
> +    box-sizing: border-box !important;
> +    background-repeat: no-repeat;
> +    vertical-align: middle;
> +    font-family: overpass; }
> +  a {
> +&:hover,&:focus,&:active {
> +      color: #fa0; }
> +&:focus {
> +      outline: none !important; }
> +&:link {
> +      color: #36c; } }
> +  article {
> +&:before {
> +      content: "";
> +      display: table; }
> +&:after {
> +      content: "";
> +      display: table;
> +      clear: both; } } }
> +
> +/* Wait, do we actually want this? */
> +
> +/* User dropdown menu definition  */
> +
> +section#usermenu {
> +  position: absolute;
> +  left: 80%;
> +  width: 20%;
> +  padding: 5px 2px 5px 2px;
> +  cursor: pointer;
> +  z-index: 9999;
> +>  a {
> +    width: 100%; }
> +>  ul {
> +    list-style-type: none;
> +    display: none;
> +    border: none;
> +    padding: 0em;
> +    margin: 0em;
> +    top: 4em;
> +    float: left;
> +    position: absolute;
> +    z-index: 9999;
> +    width: 100%;
> +&:before {
> +      display: none;
> +      content: none; } }
> +&:hover>  ul {
> +    display: block;
> +  }
> +>  ul {
> +>  li {
> +      padding: 0em;
> +      margin: 0em;
> +      border-color: transparent !important;
> +      background-image: none !important;
> +      box-shadow: none !important; }
> +    li {
> +      a {
> +        margin: 0em;
> +        padding: .5em 2em;
> +        border-radius: 0;
> +        border-color: transparent !important;
> +        box-shadow: none !important;
> +&:hover {
> +          color: #FFF !important;
> +          text-decoration: underline; } }
> +&:last-child a {
> +        border-radius: 0em 0em .51em .51em; }
> +      a:after {
> +        content: none; } } } }
> diff --git a/src/app/stylesheets/_helpers.scss b/src/app/stylesheets/_helpers.scss
> new file mode 100644
> index 0000000..46b1e97
> --- /dev/null
> +++ b/src/app/stylesheets/_helpers.scss
> @@ -0,0 +1,7 @@
> +/* #######################################################################################################
> +HELPERS
> +####################################################################################################### */
> +
> +.clearfix { @include clearfix; }
> +
> +.align-center{ text-align: center; }
> diff --git a/src/app/stylesheets/_mixins.scss b/src/app/stylesheets/_mixins.scss
> new file mode 100644
> index 0000000..011b2f3
> --- /dev/null
> +++ b/src/app/stylesheets/_mixins.scss
> @@ -0,0 +1,30 @@
> +/* #######################################################################################################
> +MIXINS
> +####################################################################################################### */
> +
> + at mixin display_inline_block {
> +  display: -moz-inline-stack;
> +  display: inline-block;
> +  vertical-align: top;
> +  zoom: 1;
> +  *display: inline;
> +}
> +
> + at mixin clearfix {
> +  *zoom: 1;
> +&:before,&:after {
> +    display: table;
> +    content: "";
> +  }
> +&:after {
> +    clear: both;
> +  }
> +}
> +
> + at mixin gradient-bg($from, $to){
> +  background-color: $cell_color_base;
> +  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));
> +  background-image: -moz-linear-gradient($from, $to);
> +  background-image: -o-linear-gradient($from, $to);
> +  background-image: linear-gradient($from, $to);
> +}
> diff --git a/src/app/stylesheets/_reset.scss b/src/app/stylesheets/_reset.scss
> new file mode 100644
> index 0000000..4d2ce40
> --- /dev/null
> +++ b/src/app/stylesheets/_reset.scss
> @@ -0,0 +1,186 @@
> +/* ###################################################################################################
> +XHTML, HTML4, HTML5 Reset
> +################################################################################################### */
> +
> +a,
> +abbr,
> +acronym,
> +address,
> +applet,
> +article,
> +aside,
> +audio,
> +b,
> +big,
> +blockquote,
> +body,
> +canvas,
> +caption,
> +center,
> +cite,
> +code,
> +dd,
> +del,
> +details,
> +dfn,
> +dialog,
> +div,
> +dl,
> +dt,
> +em,
> +embed,
> +fieldset,
> +figcaption,
> +figure,
> +font,
> +footer,
> +form,
> +h1,
> +h2,
> +h3,
> +h4,
> +h5,
> +h6,
> +header,
> +hgroup,
> +hr,
> +html,
> +i,
> +iframe,
> +img,
> +ins,
> +kbd,
> +label,
> +legend,
> +li,
> +mark,
> +menu,
> +meter,
> +nav,
> +object,
> +ol,
> +output,
> +p,
> +pre,
> +progress,
> +q,
> +rp,
> +rt,
> +ruby,
> +s,
> +samp,
> +section,
> +small,
> +span,
> +strike,
> +strong,
> +sub,
> +summary,
> +sup,
> +table,
> +tbody,
> +td,
> +tfoot,
> +th,
> +thead,
> +time,
> +tr,
> +tt,
> +u,
> +ul,
> +var,
> +video,
> +xmp {
> +  border: 0;
> +  margin: 0;
> +  padding: 0;
> +  font-size: 100%;
> +  outline: none;
> +}
> +
> +article,
> +aside,
> +details,
> +figcaption,
> +figure,
> +footer,
> +header,
> +hgroup,
> +menu,
> +nav,
> +section {
> +/*
> +  Override the default (display: inline) for
> +  browsers that do not recognize HTML5 tags.
> +
> +  IE8 (and lower) requires a shiv:
> +  http://ejohn.org/blog/html5-shiv
> +*/
> +  display: block;
> +}
> +
> +b,
> +strong {
> +/*
> +  Makes browsers agree.
> +  IE + Opera = font-weight: bold.
> +  Gecko + WebKit = font-weight: bolder.
> +*/
> +  font-weight: bold;
> +}
> +
> +img {
> +  color: transparent;
> +  font-size: 0;
> +  vertical-align: middle;
> +/*
> +  For IE.
> +  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
> +*/
> +  -ms-interpolation-mode: bicubic;
> +}
> +
> +li {
> +/*
> +  For IE6 + IE7.
> +*/
> +  display: list-item;
> +}
> +
> +table {
> +  border-collapse: collapse;
> +  border-spacing: 0;
> +}
> +
> +th,
> +td,
> +caption {
> +  font-weight: normal;
> +  vertical-align: top;
> +  text-align: left;
> +}
> +
> +svg {
> +/*
> +  For IE9.
> +*/
> +  overflow: hidden;
> +}
> +
> +form{
> +  display: inline;
> +}
> +
> +button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
> +  padding: 0 !important;
> +  border: 0 none !important;
> +}
> +button, input[type="button"], input[type="submit"], input[type="reset"] {
> +  cursor: pointer;
> +}
> +
> +// prevent image UUID's to overflow the layout
> +h1,h2,h3,h4,h5,h6{ word-wrap: break-word; }
> +
> +//rails creates div inside button_to form. Make it inline
> +form.button_to>  div {display: inline;}
> diff --git a/src/app/stylesheets/custom.scss b/src/app/stylesheets/custom.scss
> deleted file mode 100644
> index 93b85c0..0000000
> --- a/src/app/stylesheets/custom.scss
> +++ /dev/null
> @@ -1,199 +0,0 @@
> -/*fixes the button_to helper used in button-group problem*/
> -.button-group .button_to:not(:only-child) div .button.pill{
> -  -webkit-border-radius: 0em 50em;
> -  -moz-border-radius: 0em 50em 50em 0em;
> -  border-radius: 0em 50em 50em 0em;
> -}
> -
> -.pool_details {
> -  color: #333;
> -  text-decoration: none;
> -}
> -
> -.loading_tabs {
> -  height: 30px;
> -  display:block;
> -  background: url(../../images/loading.gif) no-repeat center;
> -}
> -
> -.hidden {
> -  display: none;
> -}
> -
> -table.light_table tbody {
> -  tr.collapsed {
> -    display: none;
> -  }
> -
> -  ul li {
> -    list-style-type: none;
> -  }
> -}
> -
> -.launch-time-params h2 {
> -  font-size: 16px;
> -  font-weight: normal;
> -  text-align: center;
> -}
> -
> -$services_width: 250px;
> -$services_border: 1px solid #b0b0b0;
> -$services_background: #efefef;
> -
> -form.generic section.services {
> -  position: relative;
> -  border: $services_border;
> -  margin: 1em;
> -  padding: 0 0 1em;
> -  -webkit-border-radius: 1em;
> -  -moz-border-radius: 1em;
> -  border-radius: 1em;
> -  min-height: 300px;
> -  background: $services_background;
> -  overflow: hidden;
> -
> -  .labels {
> -    margin-top: 64px;
> -    width: 250px;
> -    float: left;
> -
> -    h4.service {
> -      font-size: 14px;
> -      font-weight: normal;
> -      position: relative;
> -      z-index: 1;
> -      $left_padding: 26px;
> -      padding: 0.5em 0 0.5em $left_padding;
> -      width: $services_width - $left_padding + 1px;
> -      border-bottom: 1px solid transparent;
> -
> -&:hover {
> -        background: darken($services_background, 20%);
> -        cursor: pointer;
> -      }
> -&.selected {
> -        background: $services_background;
> -        border-bottom: $services_border;
> -        cursor: default;
> -      }
> -&.filled-out {
> -        background-image: url('../../images/filled_out_params_indicator.png');
> -        background-repeat: no-repeat;
> -        background-position: 8px center;
> -      }
> -    }
> -  }
> -
> -  .params-container {
> -    margin-left: 250px;
> -
> -    .parameters {
> -      display: none;
> -      top: 88px;
> -      left: $services_width;
> -      padding: 1em;
> -    }
> -  }
> -
> -  #service-headers {
> -    position: absolute;
> -    z-index: 0;
> -    background: transparent url('../../images/services_bg.png') repeat top center;
> -    top: 0;
> -    left: 0;
> -    height: 100%;
> -    border-right: $services_border;
> -    width: $services_width;
> -
> -    $left-corners: 1em 0 0 1em;
> -    -webkit-border-radius: $left-corners;
> -    -moz-border-radius: $left-corners;
> -    border-radius: $left-corners;
> -  }
> -
> -
> -  header {
> -    background-image: none;
> -    background: #dddddd;
> -    margin-left: $services_width;
> -    padding: 1em;
> -    height: 40px;
> -
> -    $topright-corner: 0 1em 0 0;
> -    -webkit-border-radius: $topright-corner;
> -    -moz-border-radius: $topright-corner;
> -    border-radius: $topright-corner;
> -
> -    h3 {
> -      font-size: 22px;
> -      font-weight: normal;
> -    }
> -  }
> -
> -  label {
> -    display: block;
> -    float: left;
> -    min-width: 120px;
> -    text-align: right;
> -    padding: 6px 7px 5px 0px;
> -    font-size: 14px;
> -    text-shadow: 0px 1px 0px #ffffff;
> -    font-weight: normal;
> -  }
> -}
> -
> -.catalog_deployments_and_images{
> -  color: #606060;
> -  position: relative;
> -  h1{
> -    font-size: 16px;
> -  }
> -  h2{
> -    font-size: 12px;
> -    padding-left: 10px;
> -    padding-top: 10px;
> -  }
> -  h3{
> -    font-size: 12px;
> -    padding-left: 10px;
> -  }
> -  ul li{
> -    padding-left: 10px;
> -    padding-top:5px;
> -    list-style-type: none;
> -  }
> -}
> -
> -#no-catalog-entry {
> -  margin-bottom: 30px;
> -}
> -
> -.instance_details, .confirm_instances_termination {
> -
> -  h3{
> -    font-size: 22px;
> -    font-weight: normal;
> -    margin-bottom: 10px;
> -  }
> -
> -  ul li {
> -    list-style-type: none;
> -    margin: 10px 15px;
> -    font-weight: bold;
> -    span {
> -        font-weight: normal;
> -    }
> -  }
> -
> -  ol{
> -    margin: 15px;
> -    li {
> -        margin:10px 15px;
> -    }
> -  }
> -}
> -
> -.pagination{
> -  margin-top: 10px;
> -  text-align: center;
> -}
> diff --git a/src/app/stylesheets/header.scss b/src/app/stylesheets/header.scss
> deleted file mode 100644
> index dca6cc2..0000000
> --- a/src/app/stylesheets/header.scss
> +++ /dev/null
> @@ -1,463 +0,0 @@
> -/* @font-face setup */
> -
> - at font-face {
> -  font-family: 'Overpass';
> -  src: url("../../fonts/overpass_regular-web.eot");
> -  src: local("Overpass"), url("../../fonts/overpass_regular-web.eot?#iefix") format("eot"), url("../../fonts/overpass_regular-web.woff") format("woff"), url("../../fonts/overpass_regular-web.ttf") format("truetype"), url("../../fonts/overpass_regular-web.svg#webfontLTZe4IYH") format("svg");
> -  font-weight: normal;
> -  font-style: normal; }
> -
> -
> - at font-face {
> -  font-family: 'Overpass';
> -  src: url("../../fonts/overpass_bold-web.eot");
> -  src: local("Overpass Bold"), local("Overpass-Bold"), url("../../fonts/overpass_bold-web.eot?#iefix") format("eot"), url("../../fonts/overpass_bold-web.woff") format("woff"), url("../../fonts/overpass_bold-web.ttf") format("truetype"), url("../../fonts/overpass_bold-web.svg#webfontzAU82Ltw") format("svg");
> -  font-weight: bold;
> -  font-style: normal; }
> -
> -
> -/* Adapted normalization */
> -
> -.hidden {
> -  display: none; }
> -
> -.shell-design {
> -  section {
> -    display: none;
> -&.active {
> -      display: block; } }
> -  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
> -    display: block; }
> -  a {
> -    color: #36c;
> -&:visited {
> -      color: #36c; }
> -&:hover {
> -      color: #000; }
> -&:focus {
> -      outline: none;
> -      box-shadow: 0 0  3px 3px #fa0; }
> -&:hover,&:active {
> -      outline: none; } }
> -  b, strong {
> -    font-weight: bold; }
> -  img {
> -    border: 0;
> -    -ms-interpolation-mode: bicubic;
> -    vertical-align: middle; }
> -  svg:not(:root) {
> -    overflow: hidden; } }
> -
> -/* Some header-specific styling */
> -
> -header.shell-design {
> -  height: 5.5em;
> -  background-color: #1a1f22;
> -  position: relative;
> -  color: #fff;
> -  border-bottom: .4em solid #060807;
> -  border-top: .4em solid #060807;
> -  box-shadow: inset 0em -0.1em #181c1e, inset 0px -2em 5em #101214;
> -  h1 {
> -    font-size: 1em;
> -    text-transform: uppercase;
> -    position: absolute;
> -    top: .9em;
> -    left: 0;
> -    line-height: 1.5em;
> -    text-indent: 2em;
> -    color: #fff;
> -    em {
> -      border-left: .1em solid #fff;
> -      padding-left: .25em;
> -      margin-left: .25em;
> -      font-style: normal; } }
> ->  article {
> -    margin: 0 auto;
> -    max-width: 80em;
> -    line-height: 2em;
> -    position: relative;
> -    padding: 0em;
> -    padding-left: 20em; } }
> -
> -/* Navigation */
> -
> -nav#appnav {
> -  display: table;
> -  font-weight: normal;
> -  border: .2em solid #181c1e;
> -  border-bottom: none transparent 0px;
> -  margin-top: 2.25em;
> -  border-radius: .25em .25em 0em 0em;
> -  white-space: nowrap;
> ->  ul {
> ->  li {
> ->  ul>  li a {
> -        color: #777; }
> -      display: block;
> -      vertical-align: top;
> -      float: left;
> -      a {
> -        display: block;
> -        width: 100%;
> -        text-decoration: none;
> -        clear: both;
> -        padding: 0em;
> -        text-indent: 1.5em;
> -        text-transform: capitalize;
> -        position: relative;
> -        white-space: nowrap;
> -        overflow: hidden;
> -        text-overflow: ellipsis;
> -&.selected{ background-color: #444; }
> -      }
> ->  a {
> -        color: #bbb;
> -        padding: .75em 1em;
> -        text-align: center;
> -        text-indent: 0em;
> -        border-style: none solid;
> -        border-width: 0px .1em;
> -        border-color: transparent #181c1e;
> -        background-color: #1f2123;
> -        box-shadow: inset 0px -3.5em 2em -2em #15191b;
> -&:active {
> -          color: #fff;
> -          background-color: #4a4e50; }
> -&:hover {
> -          /*box-shadow*/
> -          -webkit-box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.32);
> -          -moz-box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.32);
> -          box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.32);
> -          cursor: pointer; }
> -&:focus,&:active {
> -          box-shadow: inset 0px -4em 3em -2em rgba(0, 0, 0, 0.4); } }
> -      position: relative;
> -&:hover {
> ->  a {
> -          box-shadow: inset 0px -4em 3em -2em rgba(0, 0, 0, 0.4); }
> -        li:hover>  a,>  a {
> -          background-color: #4a4e50;
> -          color: #fff; } }
> -      a {
> -&:hover,&:focus {
> -          background-color: #4a4e50;
> -          color: #fff; } }
> -&:first-child>  a {
> -        /*border-radius*/
> -        -webkit-border-radius: .225em 0em 0em 0em;
> -        -moz-border-radius: .225em 0em 0em 0em;
> -        border-radius: .225em 0em 0em 0em;
> -        border-left: 0px transparent none; }
> -&:last-child>  a {
> -        /*border-radius*/
> -        -webkit-border-radius: 0em .225em   0em 0em;
> -        -moz-border-radius: 0em .225em  0em 0em;
> -        border-radius: 0em .225em  0em 0em;
> -        border-right: 0px transparent none; }
> ->  ul>  li:last-child>  a {
> -        /*border-radius*/
> -        -webkit-border-radius: 0em 0em .25em .25em;
> -        -moz-border-radius: 0em 0em .25em .25em;
> -        border-radius: 0em 0em .25em .25em; } }
> -    display: table-row; }
> -  ul a:after {
> -    z-index: 3;
> -    content: "";
> -    width: 100%;
> -    height: 50%;
> -    top: 0;
> -    left: 0;
> -    right: 0;
> -    display: block;
> -    position: absolute; }
> ->  ul>  li {
> -    a:focus ~ ul,&:hover ul {
> -      background-color: white;
> -      /*box-shadow*/
> -      -webkit-box-shadow: 0em 0.025em 0.5em rgba(0, 0, 0, 0.5);
> -      -moz-box-shadow: 0em 0.025em 0.51em rgba(0, 0, 0, 0.5);
> -      box-shadow: 0em 0.025em 0.51em rgba(0, 0, 0, 0.5);
> -      /*border-radius*/
> -      -webkit-border-radius: 0em 0em .25em .25em;
> -      -moz-border-radius: 0em 0em .25em .25em;
> -      border-radius: 0em 0em .25em .25em;
> -      display: block;
> -      width: 100%;
> -      top: 0em;
> -      left: 0; } } }
> -
> -/* I'm doubtful that this actually matches anythign */
> -
> -.no-boxshadow header nav#appnav>  ul>  li:hover ul {
> -  border: 1px solid #ccc;
> -  margin: -0.1px; }
> -
> -header.shell-design {
> -  nav#appnav>  ul>  li {
> -&:hover>  ul {
> -      z-index: 9999 !important;
> -      /*painfully silly hack*/
> -      margin-top: -0.25em;
> -      padding-top: 0em !important;
> -    }
> ->  ul>  li:hover {
> -      position: relative; }
> -&:hover>  ul>  li>  ul {
> -      position: absolute;
> -      box-shadow: none;
> -      background-color: transparent;
> -      top: 0em;
> -      left: 100%;
> -      padding-top: 0em;
> ->  li {
> -        display: none; } }
> -    a:focus ~ ul,&:hover>  ul {
> -      z-index: 1;
> -      padding-top: 1em;
> -      display: block;
> -      position: absolute;
> -      top: 3.5em;
> -      opacity: 1; }
> -    a:focus ~ li ul li,&:hover>  ul>  li:hover>  ul>  li {
> -      display: block; }
> -    a:focus ~ li ul,&:hover>  ul>  li:hover ul {
> -      /*box-shadow*/
> -      -webkit-box-shadow: 0.025em 0.025em 0.51em rgba(0, 0, 0, 0.5);
> -      -moz-box-shadow: 0.025em 0.025em 0.51em rgba(0, 0, 0, 0.5);
> -      box-shadow: 0.025em 0.025em 0.51em rgba(0, 0, 0, 0.5);
> -      /*border-radius*/
> -      -webkit-border-radius: 0em .25em .25em 0em;
> -      -moz-border-radius: 0em .25em .25em 0em;
> -      border-radius: 0em .25em .25em 0em;
> -      background-color: white;
> -      z-index: 1;
> -      opacity: 1; }
> ->  {
> -      ul {
> ->  li {
> ->  ul li {
> -&:first-child a {
> -              /*border-radius*/
> -              -webkit-border-radius: .0em .25em 0em 0em;
> -              -moz-border-radius: .0em .25em 0em 0em;
> -              border-radius: .0em .25em 0em 0em; }
> -&:last-child a {
> -              /*border-radius*/
> -              -webkit-border-radius: 0em 0em .25em .0em;
> -              -moz-border-radius: 0em 0em .25em .0em;
> -              border-radius: 0em 0em .25em .0em; }
> -&:first-child:hover a:after {
> -              z-index: 9;
> -              display: block;
> -              position: absolute;
> -              top: .5em;
> -              left: 0em;
> -              content: "";
> -              height: 0;
> -              width: 0;
> -              border-width: .5em 0em  .5em .5em;
> -              border-style: solid none solid solid;
> -              border-color: transparent  transparent transparent #fff; } }
> -          ul {
> -&:before {
> -              z-index: 2;
> -              display: block;
> -              position: absolute;
> -              top: 0em;
> -              left: -0.14em;
> -              content: "";
> -              height: 0;
> -              width: 0;
> -              border-width: 1em 0em  1em 1em;
> -              border-style: solid none solid solid;
> -              border-color: transparent  transparent transparent transparent; }
> -&:after {
> -              z-index: 1;
> -              display: block;
> -              position: absolute;
> -              top: .5em;
> -              left: -1em;
> -              content: "";
> -              height: 0;
> -              width: 0;
> -              opacity: 1;
> -              z-index: 2;
> -              border-width: .5em 0em  .5em .5em;
> -              border-style: solid none solid solid;
> -              border-color: transparent  transparent transparent #ccc; } }
> -          a:hover ~ ul:before,&:hover ul:before {
> -            top: 0em;
> -            border: solid 1em #4a4e50;
> -            left: -1.98em; }
> -          a:hover ~ ul:after,&:hover ul:after {
> -            top: 0em;
> -            border-color: transparent  transparent transparent #4a4e50;
> -            left: 0em;
> -            content: "";
> -            height: 0;
> -            width: 0;
> -            border-width: 1em 0em  1em 1em;
> -            border-style: solid  none solid solid; } }
> -        position: absolute;
> -        left: 0;
> -        display: none;
> -        line-height: 2em !important;
> -        min-width: 16em;
> -        max-width: 22em; }
> -      a.active {
> -        position: relative;
> -&:after {
> -          z-index: 9;
> -          position: absolute;
> -          top: 3.1em;
> -          left: 50%;
> -          margin-left: -0.55em;
> -          display: block;
> -          content: "";
> -          width: 0;
> -          height: 0;
> -          border-width: 0em .55em .55em  .55em;
> -          border-style: none solid solid  solid;
> -          border-color: transparent transparent #fff transparent; } } }
> -    position: relative; }
> -&.shell-design>  article section:last-child {
> -    text-align: right;
> -    position: absolute;
> -    top: -1.75em;
> -    right: 0em;
> -    margin: 0 auto;
> -    display: block;
> -    a {
> -      border: 0.1em solid rgba(255, 255, 255, 0.12);
> -      color: #ccc !important;
> -      border-radius: 0em 0em .5em .5em;
> -      color: #fff;
> -      text-decoration: none;
> -      background-color: #181c1e;
> -      box-shadow: inset 0px 1.5em 1em -1em rgba(222, 222, 255, 0.1);
> -      display: inline-block;
> -      padding: .1em 1em;
> -      position: relative;
> -      margin: 1.25em .1em;
> -&:last-child {
> -        padding-right: 2em;
> -&:after {
> -          content: "";
> -          display: block;
> -          height: 0px;
> -          width: 0px;
> -          position: absolute;
> -          top: .75em;
> -          right: .5em;
> -          border-style: solid solid none solid;
> -          border-width: .5em .5em 0em .5em;
> -          border-color: #666 transparent transparent; } }
> -&:first-child {
> -        padding-left: 3em;
> -&:after {
> -          /*content: "!";*/
> -          color: #2e4e66;
> -          text-align: center;
> -          background-color: #ccc !important;
> -          width: 1em;
> -          height: 1em;
> -          border-radius: 50%;
> -          position: absolute;
> -          top: .25em;
> -          left: .5em;
> -          line-height: 1em;
> -          font-size: 1.5em;
> -          display: block;
> -          background-color: transparent;
> -          z-index: 2; } } } } }
> -
> -/*
> - header nav#appnav>  ul>  li>  ul>  li
> -*/
> -
> -/* The below is good */
> -
> -/* Some new stuff */
> -
> -/* Is this legit? */
> -
> -.shell-design {
> -  * {
> -    /*
> -      this is life saving but locks us into>  ie8 will consider this polyfil for lt-ie8
> -      https://github.com/Schepp/box-sizing-polyfill
> -    */
> -    -moz-box-sizing: border-box !important;
> -    -webkit-box-sizing: border-box !important;
> -    box-sizing: border-box !important;
> -    background-repeat: no-repeat;
> -    vertical-align: middle;
> -    font-family: overpass; }
> -  a {
> -&:hover,&:focus,&:active {
> -      color: #fa0; }
> -&:focus {
> -      outline: none !important; }
> -&:link {
> -      color: #36c; } }
> -  article {
> -&:before {
> -      content: "";
> -      display: table; }
> -&:after {
> -      content: "";
> -      display: table;
> -      clear: both; } } }
> -
> -/* Wait, do we actually want this? */
> -
> -/* User dropdown menu definition  */
> -
> -section#usermenu {
> -  position: absolute;
> -  left: 80%;
> -  width: 20%;
> -  padding: 5px 2px 5px 2px;
> -  cursor: pointer;
> -  z-index: 9999;
> ->  a {
> -    width: 100%; }
> ->  ul {
> -    list-style-type: none;
> -    display: none;
> -    border: none;
> -    padding: 0em;
> -    margin: 0em;
> -    top: 4em;
> -    float: left;
> -    position: absolute;
> -    z-index: 9999;
> -    width: 100%;
> -&:before {
> -      display: none;
> -      content: none; } }
> -&:hover>  ul {
> -    display: block;
> -  }
> ->  ul {
> ->  li {
> -      padding: 0em;
> -      margin: 0em;
> -      border-color: transparent !important;
> -      background-image: none !important;
> -      box-shadow: none !important; }
> -    li {
> -      a {
> -        margin: 0em;
> -        padding: .5em 2em;
> -        border-radius: 0;
> -        border-color: transparent !important;
> -        box-shadow: none !important;
> -&:hover {
> -          color: #FFF !important;
> -          text-decoration: underline; } }
> -&:last-child a {
> -        border-radius: 0em 0em .51em .51em; }
> -      a:after {
> -        content: none; } } } }
> diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss
> index 430ee1b..f469b9b 100644
> --- a/src/app/stylesheets/layout.scss
> +++ b/src/app/stylesheets/layout.scss
> @@ -1,266 +1,20 @@
> + at import "reset";
> + at import "mixins";
> + at import "helpers";
> + at import "fonts";
> + at import "buttons";
> + at import "header";
> + at import "custom";
> +
>   /* ###########################################################################
> -Generated SCSS for Aeolus UI [aeolus_ui]
> -Compiled on Wed Jul 13 12:26:53 -0700 2011
> +SCSS for Aeolus UI
>   ########################################################################### */
>
> -/*VARIABLES AND MIXINS*/
> - at mixin display_inline_block {
> -  display: -moz-inline-stack;
> -  display: inline-block;
> -  vertical-align: top;
> -  zoom: 1;
> -  *display: inline;
> -}
> -
> - at mixin clearfix {
> -  *zoom: 1;
> -&:before,&:after {
> -    display: table;
> -    content: "";
> -  }
> -&:after {
> -    clear: both;
> -  }
> -}
> -
> -.clearfix {
> -  @include clearfix;
> -}
> -
> -/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> -Page Layout -- v.0.0.2 [layout] (reset.css)
> -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
> -
> -/* `XHTML, HTML4, HTML5 Reset
> -----------------------------------------------------------------------------------------------------*/
> -
> -a,
> -abbr,
> -acronym,
> -address,
> -applet,
> -article,
> -aside,
> -audio,
> -b,
> -big,
> -blockquote,
> -body,
> -canvas,
> -caption,
> -center,
> -cite,
> -code,
> -dd,
> -del,
> -details,
> -dfn,
> -dialog,
> -div,
> -dl,
> -dt,
> -em,
> -embed,
> -fieldset,
> -figcaption,
> -figure,
> -font,
> -footer,
> -form,
> -h1,
> -h2,
> -h3,
> -h4,
> -h5,
> -h6,
> -header,
> -hgroup,
> -hr,
> -html,
> -i,
> -iframe,
> -img,
> -ins,
> -kbd,
> -label,
> -legend,
> -li,
> -mark,
> -menu,
> -meter,
> -nav,
> -object,
> -ol,
> -output,
> -p,
> -pre,
> -progress,
> -q,
> -rp,
> -rt,
> -ruby,
> -s,
> -samp,
> -section,
> -small,
> -span,
> -strike,
> -strong,
> -sub,
> -summary,
> -sup,
> -table,
> -tbody,
> -td,
> -tfoot,
> -th,
> -thead,
> -time,
> -tr,
> -tt,
> -u,
> -ul,
> -var,
> -video,
> -xmp {
> -  border: 0;
> -  margin: 0;
> -  padding: 0;
> -  font-size: 100%;
> -  outline: none;
> -}
> -
> -h1,h2,h3,h4,h5,h6{ word-wrap: break-word; }
> -
> -article,
> -aside,
> -details,
> -figcaption,
> -figure,
> -footer,
> -header,
> -hgroup,
> -menu,
> -nav,
> -section {
> -/*
> -  Override the default (display: inline) for
> -  browsers that do not recognize HTML5 tags.
> -
> -  IE8 (and lower) requires a shiv:
> -  http://ejohn.org/blog/html5-shiv
> -*/
> -  display: block;
> -}
> -
> -b,
> -strong {
> -/*
> -  Makes browsers agree.
> -  IE + Opera = font-weight: bold.
> -  Gecko + WebKit = font-weight: bolder.
> -*/
> -  font-weight: bold;
> -}
> -
> -img {
> -  color: transparent;
> -  font-size: 0;
> -  vertical-align: middle;
> -/*
> -  For IE.
> -  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
> -*/
> -  -ms-interpolation-mode: bicubic;
> -}
> -
> -li {
> -/*
> -  For IE6 + IE7.
> -*/
> -  display: list-item;
> -}
> -
> -table {
> -  border-collapse: collapse;
> -  border-spacing: 0;
> -}
> -
> -th,
> -td,
> -caption {
> -  font-weight: normal;
> -  vertical-align: top;
> -  text-align: left;
> -}
> -
> -svg {
> -/*
> -  For IE9.
> -*/
> -  overflow: hidden;
> -}
> -
> -form{
> -  display: inline;
> -}
> -form.button_to>  div {display: inline;}
> -
> -button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
> -  padding: 0 !important;
> -  border: 0 none !important;
> -}
> -button, input[type="button"], input[type="submit"], input[type="reset"] {
> -  cursor: pointer;
> -}
> -
> -/* `Clear Floated Elements
> -----------------------------------------------------------------------------------------------------*/
> -
> -/* http://sonspring.com/journal/clearing-floats */
> -
> -.clear {
> -  clear: both;
> -  display: block;
> -  overflow: hidden;
> -  visibility: hidden;
> -  width: 0;
> -  height: 0;
> -}
> -
> -/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
> -
> -.clearfix:before,
> -.clearfix:after {
> -  content: '\0020';
> -  display: block;
> -  overflow: hidden;
> -  visibility: hidden;
> -  width: 0;
> -  height: 0;
> -}
> -
> -.clearfix:after {
> -  clear: both;
> -}
> -
> -/*
> -  The following zoom: 1 rule is specifically for IE6 + IE7.
> -  Move to separate stylesheet if invalid CSS is a problem.
> -*/
> -
> -.clearfix {
> -  zoom: 1;
> -}
> -
>   /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> -Page Layout -- v.0.0.2 [layout] (layout.scss)
> +Page Layout
>   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
>
>   $width: 960px;
> -$font-family-base: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -$font-family-em: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -$font-family-primary: Helvetica, Arial, "Lucida Grande", sans-serif;
>
>   /* body */
>
> @@ -275,11 +29,10 @@ body{
>
>   strong, em, b, i{ font-family: $font-family-em; }
>
> -.align-center{text-align: center;}
> -
>   /* Content */
>
>   div#content{
> +  @include clearfix;
>     width: $width;
>     margin: 0 auto;
>     margin-bottom: 58px;
> @@ -299,518 +52,15 @@ div#content{
>     box-shadow: inset 0px .25em .25em #aaa, 0px .5em 2em #000 !important;
>   }
>
> -/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> -Page Layout -- v.0.0.2 [layout] (layout_ie.css)
> -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
> -
> -
> -
> -/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> -Application Button Set -- v.0.0.1 [button] (button.scss)
> -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
> -
> -/* ------------------------------------------
> -CSS3 GITHUB BUTTONS (Nicolas Gallagher)
> -Licensed under Unlicense
> -http://github.com/necolas/css3-github-buttons
> ------------------------------------------- */
> -
> -
> -/* ----------------------------------------------------------------- BUTTON */
> -
> -.button {
> -    position: relative;
> -    overflow: visible;
> -    @include display_inline_block;
> -    padding: 0.5em 1em;
> -    border: 1px solid #d4d4d4;
> -    margin: 0;
> -    text-decoration: none;
> -    text-shadow: 1px 1px 0 #fff;
> -    font:11px/normal sans-serif;
> -    color: #333;
> -    white-space: nowrap;
> -    cursor: pointer;
> -    outline: none;
> -    background-color: #ececec;
> -    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
> -    background-image: -moz-linear-gradient(#f4f4f4, #ececec);
> -    background-image: -o-linear-gradient(#f4f4f4, #ececec);
> -    background-image: linear-gradient(#f4f4f4, #ececec);
> -    -webkit-background-clip: padding;
> -    -moz-background-clip: padding;
> -    -o-background-clip: padding-box;
> -    /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
> -    -webkit-border-radius: 0.2em;
> -    -moz-border-radius: 0.2em;
> -    border-radius: 0.2em;
> -}
> -
> -.button:hover,
> -.button:focus,
> -.button:active,
> -.button.active {
> -    border-color: #3072b3;
> -    border-bottom-color: #2a65a0;
> -    text-decoration: none;
> -    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
> -    color: #fff;
> -    background-color: #3C8DDE;
> -    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
> -    background-image: -moz-linear-gradient(#599bdc, #3072b3);
> -    background-image: -o-linear-gradient(#599bdc, #3072b3);
> -    background-image: linear-gradient(#599bdc, #3072b3);
> -}
> -
> -.button:active,
> -.button.active {
> -    border-color: #2a65a0;
> -    border-bottom-color: #3884CF;
> -    background-color: #3072b3;
> -    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
> -    background-image: -moz-linear-gradient(#3072b3, #599bdc);
> -    background-image: -o-linear-gradient(#3072b3, #599bdc);
> -    background-image: linear-gradient(#3072b3, #599bdc);
> -}
> -
> -/* overrides extra padding on button elements in Firefox */
> -.button::-moz-focus-inner {
> -    padding: 0;
> -    border: 0;
> -}
> -.button.disabled, .button[disabled] {
> -  cursor: default;
> -  background: transparent;
> -  opacity: 0.6;
> -  /* @include no-box-shadow; */
> -&:hover {
> -    background: transparent;
> -    text-decoration: none;
> -    color: inherit;
> -    text-shadow: inherit;
> -  }
> -}
> -
> -/* ------------------------------------------------------------------ Icons */
> -
> -.button.icon:before {
> -    content: "";
> -    position: relative;
> -    top: 1px;
> -    float:left;
> -    width: 12px;
> -    height: 12px;
> -    margin: 0 0.75em 0 -0.25em;
> -    background: url(../../images/button-icons.png) 0 99px no-repeat;
> -}
> -
> -.button.arrowup.icon:before { background-position: 0 0; }
> -.button.arrowup.icon:hover:before,
> -.button.arrowup.icon:focus:before,
> -.button.arrowup.icon:active:before { background-position: -12px 0; }
> -
> -.button.arrowdown.icon:before { background-position: 0 -12px; }
> -.button.arrowdown.icon:hover:before,
> -.button.arrowdown.icon:focus:before,
> -.button.arrowdown.icon:active:before { background-position: -12px -12px; }
> -
> -.button.arrowleft.icon:before { background-position: 0 -24px; }
> -.button.arrowleft.icon:hover:before,
> -.button.arrowleft.icon:focus:before,
> -.button.arrowleft.icon:active:before { background-position: -12px -24px; }
> -
> -.button.arrowright.icon:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: 0 -36px; }
> -.button.arrowright.icon:hover:before,
> -.button.arrowright.icon:focus:before,
> -.button.arrowright.icon:active:before { background-position: -12px -36px; }
> -
> -.button.approve.icon:before { background-position: 0 -48px; }
> -.button.approve.icon:hover:before,
> -.button.approve.icon:focus:before,
> -.button.approve.icon:active:before { background-position: -12px -48px; }
> -
> -.button.add.icon:before { background-position: 0 -288px; }
> -.button.add.icon:hover:before,
> -.button.add.icon:focus:before,
> -.button.add.icon:active:before { background-position: -12px -288px; }
> -
> -.button.remove.icon:before { background-position: 0 -60px; }
> -.button.remove.icon:hover:before,
> -.button.remove.icon:focus:before,
> -.button.remove.icon:active:before { background-position: -12px -60px; }
> -
> -.button.log.icon:before { background-position: 0 -72px; }
> -.button.log.icon:hover:before,
> -.button.log.icon:focus:before,
> -.button.log.icon:active:before { background-position: -12px -72px; }
> -
> -.button.calendar.icon:before { background-position: 0 -84px; }
> -.button.calendar.icon:hover:before,
> -.button.calendar.icon:focus:before,
> -.button.calendar.icon:active:before { background-position: -12px -84px; }
> -
> -.button.chat.icon:before { background-position: 0 -96px; }
> -.button.chat.icon:hover:before,
> -.button.chat.icon:focus:before,
> -.button.chat.icon:active:before { background-position: -12px -96px; }
> -
> -.button.clock.icon:before { background-position: 0 -108px; }
> -.button.clock.icon:hover:before,
> -.button.clock.icon:focus:before,
> -.button.clock.icon:active:before { background-position: -12px -108px; }
> -
> -.button.settings.icon:before { background-position: 0 -120px; }
> -.button.settings.icon:hover:before,
> -.button.settings.icon:focus:before,
> -.button.settings.icon:active:before { background-position: -12px -120px; }
> -
> -.button.comment.icon:before { background-position: 0 -132px; }
> -.button.comment.icon:hover:before,
> -.button.comment.icon:focus:before,
> -.button.comment.icon:active:before { background-position: -12px -132px; }
> -
> -.button.fork.icon:before { background-position: 0 -144px; }
> -.button.fork.icon:hover:before,
> -.button.fork.icon:focus:before,
> -.button.fork.icon:active:before { background-position: -12px -144px; }
> -
> -.button.like.icon:before { background-position: 0 -156px; }
> -.button.like.icon:hover:before,
> -.button.like.icon:focus:before,
> -.button.like.icon:active:before { background-position: -12px -156px; }
> -
> -.button.favorite.icon:before { background-position: 0 -348px; }
> -.button.favorite.icon:hover:before,
> -.button.favorite.icon:focus:before,
> -.button.favorite.icon:active:before { background-position: -12px -348px; }
> -
> -.button.home.icon:before { background-position: 0 -168px; }
> -.button.home.icon:hover:before,
> -.button.home.icon:focus:before,
> -.button.home.icon:active:before { background-position: -12px -168px; }
> -
> -.button.key.icon:before { background-position: 0 -180px; }
> -.button.key.icon:hover:before,
> -.button.key.icon:focus:before,
> -.button.key.icon:active:before { background-position: -12px -180px; }
> -
> -.button.lock.icon:before { background-position: 0 -192px; }
> -.button.lock.icon:hover:before,
> -.button.lock.icon:focus:before,
> -.button.lock.icon:active:before { background-position: -12px -192px; }
> -
> -.button.unlock.icon:before { background-position: 0 -204px; }
> -.button.unlock.icon:hover:before,
> -.button.unlock.icon:focus:before,
> -.button.unlock.icon:active:before { background-position: -12px -204px; }
> -
> -.button.loop.icon:before { background-position: 0 -216px; }
> -.button.loop.icon:hover:before,
> -.button.loop.icon:focus:before,
> -.button.loop.icon:active:before { background-position: -12px -216px; }
> -
> -.button.search.icon:before { background-position: 0 -228px; }
> -.button.search.icon:hover:before,
> -.button.search.icon:focus:before,
> -.button.search.icon:active:before { background-position: -12px -228px; }
> -
> -.button.mail.icon:before { background-position: 0 -240px; }
> -.button.mail.icon:hover:before,
> -.button.mail.icon:focus:before,
> -.button.mail.icon:active:before { background-position: -12px -240px; }
> -
> -.button.move.icon:before { background-position: 0 -252px; }
> -.button.move.icon:hover:before,
> -.button.move.icon:focus:before,
> -.button.move.icon:active:before { background-position: -12px -252px; }
> -
> -.button.edit.icon:before { background-position: 0 -264px; }
> -.button.edit.icon:hover:before,
> -.button.edit.icon:focus:before,
> -.button.edit.icon:active:before { background-position: -12px -264px; }
> -
> -.button.pin.icon:before { background-position: 0 -276px; }
> -.button.pin.icon:hover:before,
> -.button.pin.icon:focus:before,
> -.button.pin.icon:active:before { background-position: -12px -276px; }
> -
> -.button.reload.icon:before { background-position: 0 -300px; }
> -.button.reload.icon:hover:before,
> -.button.reload.icon:focus:before,
> -.button.reload.icon:active:before { background-position: -12px -300px; }
> -
> -.button.rss.icon:before { background-position: 0 -312px; }
> -.button.rss.icon:hover:before,
> -.button.rss.icon:focus:before,
> -.button.rss.icon:active:before { background-position: -12px -312px; }
> -
> -.button.tag.icon:before { background-position: 0 -324px; }
> -.button.tag.icon:hover:before,
> -.button.tag.icon:focus:before,
> -.button.tag.icon:active:before { background-position: -12px -324px; }
> -
> -.button.trash.icon:before { background-position: 0 -336px; }
> -.button.trash.icon:hover:before,
> -.button.trash.icon:focus:before,
> -.button.trash.icon:active:before { background-position: -12px -336px; }
> -
> -.button.user.icon:before { background-position: 0 -360px; }
> -.button.user.icon:hover:before,
> -.button.user.icon:focus:before,
> -.button.user.icon:active:before { background-position: -12px -360px; }
> -
> -
> -/* ------------------------------------------------------ BUTTON EXTENSIONS */
> -
> -/* ---------------------------------------------------------------- Primary */
> -
> -.button.primary {
> -    font-weight: bold;
> -}
> -
> -/* ----------------------------------------------------------------- Danger */
> -
> -.button.danger {
> -    color: #900;
> -}
> -
> -.button.danger:hover,
> -.button.danger:focus,
> -.button.danger:active {
> -    border-color: #b53f3a;
> -    border-bottom-color: #a0302a;
> -    color: #fff;
> -    background-color: #dc5f59;
> -    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));
> -    background-image: -moz-linear-gradient(#dc5f59, #b33630);
> -    background-image: -o-linear-gradient(#dc5f59, #b33630);
> -    background-image: linear-gradient(#dc5f59, #b33630);
> -}
> -
> -.button.danger:active,
> -.button.danger.active {
> -    border-color: #a0302a;
> -    border-bottom-color: #bf4843;
> -    background-color: #b33630;
> -    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));
> -    background-image: -moz-linear-gradient(#b33630, #dc5f59);
> -    background-image: -o-linear-gradient(#b33630, #dc5f59);
> -    background-image: linear-gradient(#b33630, #dc5f59);
> -}
> -
> -/* ------------------------------------------------------------------- Pill */
> -
> -.button.pill {
> -    -webkit-border-radius: 50em;
> -    -moz-border-radius: 50em;
> -    border-radius: 50em;
> -}
> -
> -/* ---------------------------------------------------------------- Disable */
> -
> -.button.disable {
> -    opacity: 0.5;
> -}
> -
> -/* -------------------------------------------------------------------- Big */
> -
> -.button.big {
> -    font-size: 14px;
> -}
> -
> -.button.big.icon:before { top: 0; }
> -
> -
> -/* ---------------------------------------------------------- BUTTON GROUPS */
> -
> -/* --------------------------------------------------------------- Standard */
> -
> -.button-group {
> -    @include display_inline_block;
> -    list-style: none;
> -    padding: 0;
> -    margin: 0;
> -}
> -
> -.button + .button,
> -.button + .button-group,
> -.button-group + .button,
> -.return_to + .button-group,
> -.button-group + .button-group {
> -    margin-left: 15px;
> -}
> -
> -.button-group li {
> -    float: left;
> -    padding: 0;
> -    margin: 0;
> -}
> -
> -.button-group .button {
> -    float: left;
> -    margin-left: -1px;
> -}
> -
> -.button-group>  .button:not(:first-child):not(:last-child),
> -.button-group li:not(:first-child):not(:last-child) .button {
> -    -webkit-border-radius: 0;
> -    -moz-border-radius: 0;
> -    border-radius: 0;
> -}
> -
> -.button-group>  .button:first-child,
> -.button-group li:first-child .button {
> -    margin-left: 0;
> -    -webkit-border-top-right-radius: 0;
> -    -webkit-border-bottom-right-radius: 0;
> -    -moz-border-radius-topright: 0;
> -    -moz-border-radius-bottomright: 0;
> -    border-top-right-radius: 0;
> -    border-bottom-right-radius: 0;
> -}
> -
> -.button-group>  .button:last-child,
> -.button-group li:last-child>  .button {
> -    -webkit-border-top-left-radius: 0;
> -    -webkit-border-bottom-left-radius: 0;
> -    -moz-border-radius-topleft: 0;
> -    -moz-border-radius-bottomleft: 0;
> -    border-top-left-radius: 0;
> -    border-bottom-left-radius: 0;
> -}
> -
> -/* ------------------------------------------------------------------ Minor */
> -
> -.button-group.minor-group .button {
> -    border: 1px solid #d4d4d4;
> -    text-shadow: none;
> -    background-image: none;
> -    background-color: #fff;
> -}
> -
> -.button-group.minor-group .button:hover,
> -.button-group.minor-group .button:focus,
> -.button-group.minor-group .button:active {
> -    background-color: #599bdc;
> -}
> -
> -.button-group.minor-group .button:active,
> -.button-group.minor-group .button.active {
> -    background-color: #3072b3;
> -}
> -
> -.button-group.minor-group .button.icon:before {
> -    opacity: 0.8;
> -}
> -
> -/* ------------------------------------------------------- BUTTON CONTAINER */
> -/* For mixing buttons and button groups, e.g., in a navigation bar */
> -
> -.button-container .button,
> -.button-container .button-group {
> -    vertical-align: top;
> -}
> -/* --------------------------------------------------------- CUSTOM BUTTONS */
> -
> -span.view-toggle{
> -  @include display_inline_block;
> -}
> -
> -a.view-toggle{
> -  background: url('../../images/button-viewtoggle.png') no-repeat top left;
> -  display: block;
> -  float:left;
> -  width: 38px;
> -  height: 27px;
> -}
> -
> -a.view-toggle span{
> -  position: absolute;
> -  top: -999em;
> -}
> -
> -a.view-toggle.pretty{
> -&:active{
> -    background-position: -75px 0px;
> -  }
> -}
> -
> -a.view-toggle.filter{
> -  width: 36px;
> -  background-position: -39px 0px;
> -&:active{
> -    background-position: -114px 0px;
> -  }
> -}
> -
> -a.view-toggle.pretty.active{
> -  background-position: -75px 0px;
> -}
> -
> -a.view-toggle.filter.active{
> -  background-position: -114px 0px;
> -}
> -
> -a.add-group-button{
> -  background: transparent url('../../images/button-add-user-group.png') no-repeat top left;
> -  display: block;
> -  width: 50px;
> -  height: 25px;
> -}
> -a.add-user-button{
> -  background: transparent url('../../images/button-add-user-group.png') no-repeat bottom left;
> -  display: block;
> -  width: 50px;
> -  height: 25px;
> -}
>
>   /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
>   Application Input Controls -- v.0.0.1 [input] (input.scss)
>   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
>
> -/* Query Inputs */
> -
> -div.query-input{
> -  @include display_inline_block;
> -  background-image: -moz-linear-gradient(top, rgba(209,209,209,1), rgba(230,230,230, 0));
> -  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(209,209,209,1)), to(rgba(230,230,230, 0)));
> -  -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
> -  padding: 3px;
> -}
> -
> -div.query-input input[type="text"]{
> -  display: inline;
> -  -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
> -  border: 1px solid #ccc;
> -  height: 23px;
> -  width: 180px;
> -  outline: none;
> -  padding: 0px 26px 0px 10px;
> -  margin:0px;
> -  font-size: 12px;
> -}
> -
> -div.query-input input[type="submit"]{
> -  display:inline;
> -  background: transparent url('../../images/button-search.png') no-repeat left center;
> -  color: transparent;
> -  border: 0px;
> -  width: 25px; height: 25px;
> -  margin-left: -25px;
> -  outline: none;
> -  cursor: pointer;
> -&:hover{ background: transparent url('../../images/button-search-over.png') no-repeat left center; }
> -&:active{ background: transparent url('../../images/button-search-down.png') no-repeat left center; }
> -}
> -
>   /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
>   Textual Labels -- v.0.0.1 [label] (label.scss)
>   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
>
> -$font-family-base: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -$font-family-em: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -$font-family-primary: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
> -
>   .label{
>     font-family: $font-family-base;
>     font-size: 12px;
> @@ -839,11 +89,10 @@ $font-family-primary: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-
>
>   .label.badge{
>     @include display_inline_block;
> -  vertical-align: baseline;
>     -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
>     background-color: #efefef;
>     border: 1px solid transparent;
> -  padding: 1px 4px 0px 4px;
> +  padding: 0px 4px 0px 4px;
>     min-width: 10px;
>     font-size: 10px;
>     color: #000;
> @@ -995,8 +244,6 @@ nav#administer_nav {
>   Page Header -- v.0.0.1 [header] (header.scss)
>   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
>
> -$font-family-primary: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
> -
>   div#content .page-header{
>
>     display: block;
> @@ -1017,7 +264,7 @@ div#content .page-header{
>     border-radius: 0em;
>
>     h1{
> -    font-family: overpass;
> +    font-family: $font-family-primary;
>       font-size: 25px;
>       line-height: 38px;
>       font-weight: normal;
> @@ -1085,34 +332,21 @@ div#content .page-header{
>       background: transparent url('../../images/header_icon_settings.png') no-repeat 8px center;
>     }
>
> -  #obj_actions{
> +  .obj_actions{
> +&  >  *{ vertical-align: middle; }
>       float: right;
>       margin: 13px 7px 12px 24px;
>     }
>
> -  div.return_to{
> -    @include display_inline_block;
> -    padding: 0.5em 0em;
> -
> -    a{
> -      background: #cccccc;
> -      color: black;
> -      text-decoration: none;
> -      font-weight: bold;
> -      padding: 3px 6px;
> -      -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
> -      border: none;
> -    }
> -  }
> -
>     ul#provider_select{
>       @include display_inline_block;
> +    vertical-align: middle;
>       list-style-type: none;
>       position: relative;
>       &  >  li{
> -      padding: 0px 15px 15px 0px;
> +      padding: 7px 15px 7px 0px;
>         margin: 0px 15px 0px 10px;
> -      background: transparent url('../../images/admin_header_provider_select.png') right 1px no-repeat;
> +      background: transparent url('../../images/admin_header_provider_select.png') right center no-repeat;
>         &  >  a{
>           color: black;
>           text-decoration: none;
> @@ -1157,10 +391,10 @@ div#content .page-header{
>
>     input[type="submit"].provider_toggle{
>       @include display_inline_block;
> +    vertical-align: middle;
>       border: none;
>       width: 45px;
>       height: 21px;
> -    margin-top: -4px;
>
>       &.on{
>         background: transparent url('../../images/provider_on_off.png') left center;
> @@ -1210,7 +444,6 @@ nav#nav_history{
>   Statistics Scoreboard -- v.0.0.1 [scoreboard] (scoreboard.scss)
>   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
>
> -$font-family-primary: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
>   $dd_padding: 10px;
>   $dd_icon_padding_right: 4px;
>
> @@ -1334,10 +567,6 @@ $dd_icon_padding_right: 4px;
>   Content Section Container -- v.0.0.1 [section] (section.scss)
>   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
>
> -$font-family-base: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -$font-family-em: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -$font-family-primary: Helvetica, Arial, "Lucida Grande", sans-serif;
> -
>   section.content-section{
>     padding: 4px 15px 15px 15px;
>     border-bottom: 1px solid #C4C4C4;
> @@ -1361,8 +590,9 @@ section.content-section{
>         font-size: 21px;
>         font-weight: 200;
>         @include display_inline_block;
> +      vertical-align: middle;
> +      padding: 2px 40px 2px 0px;
>         margin-bottom: 4px;
> -      padding: 2px 40px 0px 0px;
>
>         &.activity{ background: transparent url('../../images/admin_h2_icons.png') right 0px no-repeat; }
>         &.roles{ background: transparent url('../../images/admin_h2_icons.png') right -29px no-repeat; }
> @@ -1387,11 +617,9 @@ section.content-section{
>       }
>
>       .section-controls{
> -      position: absolute;
> -      right: 0px;
> -      bottom: 4px;
> +      float: right;
>         @include display_inline_block;
> -      font-size: 11px;
> +&  >  * { vertical-align: middle; }
>
>         a.collapse{
>           text-decoration: none;
> @@ -1402,6 +630,7 @@ section.content-section{
>
>     /* nav */
>     nav.faceted{
> +    @include clearfix;
>       border-bottom: 1px solid #ccc;
>       ul{ list-style: none; font-family: $font-family-primary; }
>       li{
> @@ -1412,7 +641,8 @@ section.content-section{
>         @include display_inline_block;
>         font-family: overpass;
>         font-size: 1.3em;
> -      padding-bottom: 6px;
> +      line-height: 1.5em;
> +      padding: 3px 0px;
>         text-decoration: none;
>         color: #aaa;
>       }
> @@ -1425,6 +655,11 @@ section.content-section{
>       }
>     }
>
> +  div.loading_tabs{
> +    height: 60px;
> +    background: transparent url("../../images/loading.gif") no-repeat center center;
> +  }
> +
>     /* Content */
>
>     .content{
> @@ -1457,6 +692,7 @@ section.content-section{
>   }
>
>   header.page-header + section.content-section{margin-top: 26px;}
> +nav#administer_nav + section.content-section{margin-top: 26px;}
>   #scoreboard + section.content-section{ margin-top: 26px; }
>
>   /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> @@ -1507,6 +743,7 @@ div#user_card{
>     }
>
>     div.user-card-content{
> +    @include clearfix;
>       padding: 15px 15px 15px 60px;
>       background: #efefef;
>       -webkit-border-radius: 0px 0px 7px 7px; -moz-border-radius: 0px 0px 7px 7px; border-radius: 0px 0px 7px 7px;
> @@ -1523,10 +760,6 @@ div#user_card{
>           margin-top: 10px;
>         }
>       }
> -
> -    #obj_actions{
> -      float: right;
> -    }
>     }
>   }
>
> @@ -1554,10 +787,6 @@ dl.user_stats{
>   Alert Components -- v.0.0.1 [alert] (alert.scss)
>   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
>
> -$font-family-base: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -$font-family-em: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -$font-family-primary: Helvetica, Arial, "Lucida Grande", sans-serif;
> -
>   .content.closed{
>     border-bottom: 1px solid #efefef;
>   }
> @@ -1635,7 +864,6 @@ dl.alerts{
>   Pool Components -- v.0.0.1 [pool] (pool.scss)
>   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
>
> -$font-family-primary: Helvetica, Arial, "Lucida Grande", sans-serif;
>   $dd_padding: 10px;
>   $dd_icon_padding_right: 4px;
>   $bar_height: 37px;
> @@ -1874,16 +1102,10 @@ header + div.pool.overview{
>   Deployment Components -- v.0.0.1 [deployment] (deployment.scss)
>   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
>
> -$font-family-base: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -$font-family-em: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -$font-family-primary: Helvetica, Arial, "Lucida Grande", sans-serif;
> -
>   /************************************************************************** */
>   /********************************************* Large Deployable Card Arrays */
>   /****************************************************************************/
>
> -/* todo: move this elsewhere */
> -
>   $deployment-large-height: 154px;
>   $deployment-large-width: 166px;
>   $deployment-large-padding: 8px;
> @@ -2017,9 +1239,6 @@ ul.deployment-array.large + ul.deployment-array.large{
>     margin-top: 10px;
>   }
>
> -
> -
> -
>   /************************************************************************** */
>   /********************************************* Small Deployable Card Arrays */
>   /************************************************************************** */
> @@ -2237,47 +1456,6 @@ ul.instances-array{
>   /********************************************* Deployable Detail page */
>   /************************************************************************** */
>
> -#launch_deployment_button{
> -  @include display_inline_block;
> -  margin: -7px 0px 0px 10px;
> -  padding: 13px 12px 9px 46px;
> -  font-weight: bold;
> -  font-size: 14px;
> -  color: white;
> -  text-decoration: none;
> -  border: 1px solid #669933;
> -  -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em;
> -
> -  background: #5AB45C url(../../images/deployment_large_icon_provider_white.png) no-repeat 12px center; /* Old browsers */
> -  background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -moz-linear-gradient(top, #ace3ac 0%, #5ab45c 100%); /* FF3.6+ */
> -  background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ace3ac), color-stop(100%,#5ab45c)); /* Chrome,Safari4+ */
> -  background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -webkit-linear-gradient(top, #ace3ac 0%,#5ab45c 100%); /* Chrome10+,Safari5.1+ */
> -  background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -o-linear-gradient(top, #ace3ac 0%,#5ab45c 100%); /* Opera 11.10+ */
> -  background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -ms-linear-gradient(top, #ace3ac 0%,#5ab45c 100%); /* IE10+ */
> -  background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, linear-gradient(top, #ace3ac 0%,#5ab45c 100%); /* W3C */
> -  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ace3ac', endColorstr='#5ab45c',GradientType=0 ); /* IE6-9 */
> -&:active{
> -    background: #458944; /* Old browsers */
> -    background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -moz-linear-gradient(top, #9ecc9b 0%, #458944 100%); /* FF3.6+ */
> -    background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ecc9b), color-stop(100%,#458944)); /* Chrome,Safari4+ */
> -    background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -webkit-linear-gradient(top, #9ecc9b 0%, #458944 100%); /* Chrome10+,Safari5.1+ */
> -    background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -o-linear-gradient(top, #9ecc9b 0%, #458944 100%); /* Opera 11.10+ */
> -    background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, -ms-linear-gradient(top, #9ecc9b 0%, #458944 100%); /* IE10+ */
> -    background: url(../../images/deployment_large_icon_provider_white.png) 12px center no-repeat, linear-gradient(top, #9ecc9b 0%, #458944 100%); /* W3C */
> -    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ecc9b', endColorstr='#458944',GradientType=0 ); /* IE6-9 */
> -    -webkit-box-shadow: inset 1px 1px 2px 0px #333; -moz-box-shadow: inset 1px 1px 2px 0px #333; box-shadow: inset 1px 1px 2px 0px #333;
> -  }
> -&[type=submit][disabled=disabled],
> -&[disabled=disabled],
> -&.disabled{
> -    cursor: default;
> -    zoom: 1;
> -    filter: alpha(opacity=50);
> -    -moz-opacity:0.5;
> -    opacity: 0.5;
> -  }
> -}
> -
>   table.light_table{
>     margin: 10px;
>     td,th{ padding: 5px 10px; vertical-align: middle;}
> @@ -2458,6 +1636,7 @@ div.build_status{
>             text-decoration: none;
>           }
>           div.catalog_with_checkbox{
> +          @include clearfix;
>             padding: 7px 10px;
>             input[type="checkbox"]{margin: 0px; padding: 0px; float: right;}
>           }
> @@ -2489,14 +1668,6 @@ div.build_status{
>     margin-left: 2px;
>   }
>
> -#obj_actions .catalog_link {
> -  border-color: white;
> -
> -&:hover {
> -    border-color: #999;
> -  }
> -}
> -
>   ul.catalog_pretty {
>     border: 1px solid #ccc;
>     -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px;
> @@ -2623,8 +1794,6 @@ ul.image_builds{
>   Flat Table Component -- v.0.0.1 [flat_table] (flat_table.scss)
>   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
>
> -$font-family-primary: Helvetica, Arial, "Lucida Grande", sans-serif;
> -
>   /* padding configuration */
>   $th_padding: 8px 10px 4px 10px;
>   $td_padding: 5px 10px 3px 10px;
> @@ -2640,27 +1809,11 @@ $cell_header_text_color: #666666;
>
>   $cell_anchor_text_color: #3286B8;
>
> -/* useful mixins */
> - at mixin gradient-bg($from, $to){
> -  background-color: $cell_color_base;
> -  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));
> -  background-image: -moz-linear-gradient($from, $to);
> -  background-image: -o-linear-gradient($from, $to);
> -  background-image: linear-gradient($from, $to);
> -}
> -
>   /* Filterable Form */
>   form.filterable-data{
>
> -  ul.obj_actions{
> -    padding: 6px 0px 6px 0px;
> -
> -    list-style: none;
> -    li{ @include display_inline_block; }
> -    li + li{ padding-left: 6px; }
> -  }
> -
>     div.controls{
> +    @include clearfix;
>       display: block;
>       font-family: $font-family-primary;
>       font-size: 12px;
> @@ -2992,10 +2145,14 @@ table.pool_families{
>   Form Components -- v.0.0.1 [form] (form.scss)
>   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
>
> -$font-family-base: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -$label-font: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -$font-family-primary: Helvetica, Arial, "Lucida Grande", sans-serif;
> +/* Global form settings
> +   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
> +fieldset{
> +  margin-top: 20px;
> +}
>
> +/* Generic form
> +   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
>   form.generic{
>
>     div.field{
> @@ -3016,20 +2173,20 @@ form.generic{
>       margin-top: 10px;
>     }
>
> -  fieldset{
> -    margin-top: 20px;
> -  }
> -
>     fieldset legend{
>       font-family: $font-family-primary;
>       font-size: 16px;
>       font-weight: light;
>     }
>
> +  fieldset.options{
> +&  >  *{ vertical-align: middle; }
> +  }
> +
>     label{
>       display: block;
>       padding-bottom: 2px;
> -    font-family: $label-font;
> +    font-family: $font-family-em;
>       font-size: 12px;
>       text-shadow: 0px 1px 0px #ffffff;
>       font-weight: normal;
> diff --git a/src/app/stylesheets/login.scss b/src/app/stylesheets/login.scss
> index b50d2fd..da4fc4b 100644
> --- a/src/app/stylesheets/login.scss
> +++ b/src/app/stylesheets/login.scss
> @@ -1,3 +1,5 @@
> + at import "reset";
> +
>   $font-family-base: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
>   $font-family-em: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
>   $font-family-primary: Helvetica, Arial, "Lucida Grande", sans-serif;
> diff --git a/src/app/views/catalogs/_section_header.html.haml b/src/app/views/catalogs/_section_header.html.haml
> index 0789f03..1460606 100644
> --- a/src/app/views/catalogs/_section_header.html.haml
> +++ b/src/app/views/catalogs/_section_header.html.haml
> @@ -1,4 +1,4 @@
>   %header.page-header
> -  #obj_actions.button-group
> +  .obj_actions
>       = link_to t('catalogs.new_catalog'), new_catalog_url, :class =>  'button primary', :id =>  'new_catalog_button'
>     %h1.no-icon=t('catalogs.catalogs')
> diff --git a/src/app/views/catalogs/edit.html.haml b/src/app/views/catalogs/edit.html.haml
> index 0188837..a490f70 100644
> --- a/src/app/views/catalogs/edit.html.haml
> +++ b/src/app/views/catalogs/edit.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       = link_to t('catalogs.new_catalog'), new_catalog_url, :class =>  'button primary', :id =>  'new_catalog_button'
>     %h1.no-icon= @catalog.name
>
> diff --git a/src/app/views/catalogs/new.html.haml b/src/app/views/catalogs/new.html.haml
> index 22b716f..b6417ac 100644
> --- a/src/app/views/catalogs/new.html.haml
> +++ b/src/app/views/catalogs/new.html.haml
> @@ -1,7 +1,7 @@
>   = render :partial =>  'layouts/admin_nav'
>
>   %header.page-header
> -  #obj_actions
> +  .obj_actions
>       .return_to
>         = t'return_to'
>         = link_to t("catalogs.catalogs"), catalogs_path
> diff --git a/src/app/views/catalogs/show.html.haml b/src/app/views/catalogs/show.html.haml
> index d373b0f..b0d37e6 100644
> --- a/src/app/views/catalogs/show.html.haml
> +++ b/src/app/views/catalogs/show.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       - if check_privilege(Privilege::CREATE, Catalog)
>         = link_to t('catalogs.new_catalog'), new_catalog_url, :class =>  'button primary', :id =>  'new_catalog_button'
>       .button-group
> diff --git a/src/app/views/deployables/_new_from_image.html.haml b/src/app/views/deployables/_new_from_image.html.haml
> index 9291f1e..beb4d42 100644
> --- a/src/app/views/deployables/_new_from_image.html.haml
> +++ b/src/app/views/deployables/_new_from_image.html.haml
> @@ -35,7 +35,6 @@
>                             .catalog_with_checkbox
>                               = check_box_tag 'catalog_id[]', catalog.id, @selected_catalogs.any?{|c| c.id == catalog.id}
>                               = catalog.name
> -                            .clear
>
>         %fieldset.options.align-center
>           = link_to t('deployables.form.cancel'), catalogs_path, :class =>  'button danger'
> diff --git a/src/app/views/deployables/_section_header.html.haml b/src/app/views/deployables/_section_header.html.haml
> index 861a12d..35cc064 100644
> --- a/src/app/views/deployables/_section_header.html.haml
> +++ b/src/app/views/deployables/_section_header.html.haml
> @@ -1,5 +1,5 @@
>   %header.page-header
> -  #obj_actions.button-group
> +  .obj_actions
>       - if check_privilege(Privilege::CREATE, Deployable)
>         = link_to "#{t'catalog_entries.new_catalog_entry'}", new_polymorphic_path([@catalog, Deployable]), :class =>  'button primary', :id =>  'new_catalog_entry_button'
>     %h1.catalog_entries=t'catalog_entries.index.catalog_entries'
> diff --git a/src/app/views/deployables/show.html.haml b/src/app/views/deployables/show.html.haml
> index b8666e6..7ddb800 100644
> --- a/src/app/views/deployables/show.html.haml
> +++ b/src/app/views/deployables/show.html.haml
> @@ -1,11 +1,11 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       .button-group
>         - if check_privilege(Privilege::MODIFY, @deployable)
> -        = button_to t('.delete'), polymorphic_path([@catalog, @deployable]), :method =>  'delete', :confirm =>  "#{t'catalog_entries.show.confirm_delete'}", :class =>  'button danger', :id =>  'delete'
>           = link_to t('.edit'), edit_polymorphic_path([@catalog, @deployable]), :class =>  'button', :id =>  'edit_button'
>           = link_to t('.edit_xml'), edit_polymorphic_path([@catalog, @deployable], :edit_xml =>  true), :class =>  'button', :id =>  'edit_xml_button'
> +        = button_to t('.delete'), polymorphic_path([@catalog, @deployable]), :method =>  'delete', :confirm =>  "#{t'catalog_entries.show.confirm_delete'}", :class =>  'button danger', :id =>  'delete'
>
>       - launch_deployment_button_path = launch_time_params_deployments_path(:deployable_id =>  @deployable.id, :deployment =>  { :name =>  @deployable.name, :pool_id =>  @catalog.pool })
>       - if @catalog.present?&&  @deployable_errors.empty?&&  @pushed_count>  0
> @@ -87,13 +87,13 @@
>
>   %section.content-section
>     %header
> -    %h2.catalogs= t('.catalogs')
>       .section-controls
>         = form_for(:catalog_entry, :url =>  catalog_entries_path) do |f|
>           = f.label :catalog_id, t('.choose_catalog')
>           = f.select :catalog_id, options_for_select(@catalogs_options.map {|c| [c.name, c.id]})
>           = f.hidden_field(:deployable_id, :value =>  @deployable.id)
>           = f.submit t('.add_catalog'), :id =>  :add_catalog, :class =>  'button pill', :disabled =>  @catalogs_options.empty?
> +    %h2.catalogs= t('.catalogs')
>     .content
>       .centered
>         %table.light_table
> diff --git a/src/app/views/deployments/_alerts_show.html.haml b/src/app/views/deployments/_alerts_show.html.haml
> index f850c6c..e208287 100644
> --- a/src/app/views/deployments/_alerts_show.html.haml
> +++ b/src/app/views/deployments/_alerts_show.html.haml
> @@ -1,10 +1,11 @@
>   - if @failed_instances.count>  0
>     %section.content-section.alerts.collapse_entity
>       %header
> -      %h2=t 'alerts_label'
> -      %span.label.badge.alert.count= @failed_instances.count
>         .section-controls
>           = link_to t("providers.edit.toggle_alerts"), "#", :class =>  'collapse alerts' unless @statistics[:instances_failed].blank?
> +      %h2.alerts
> +        =t 'alerts_label'
> +        %span.label.badge.alert.count= @failed_instances.count
>       .content.collapsible
>         %dl.alerts
>           %ul
> diff --git a/src/app/views/deployments/_header_show.html.haml b/src/app/views/deployments/_header_show.html.haml
> index eb4ff67..46dc99f 100644
> --- a/src/app/views/deployments/_header_show.html.haml
> +++ b/src/app/views/deployments/_header_show.html.haml
> @@ -1,6 +1,5 @@
>   %header.page-header
> -  #obj_actions.button-container
> -    .button-group
> -      - if check_privilege(Privilege::MODIFY, @deployment)
> -        = button_to t('delete'), deployment_path(@deployment), :method =>  :delete, :confirm =>  t("deployments.confirm_delete"), :class =>  "button danger", :id =>  'delete'
> +  .obj_actions
> +    - if check_privilege(Privilege::MODIFY, @deployment)
> +      = button_to t('delete'), deployment_path(@deployment), :method =>  :delete, :confirm =>  t("deployments.confirm_delete"), :class =>  "button danger", :id =>  'delete'
>     %h1.deployments= @title
> diff --git a/src/app/views/deployments/_launch_new.html.haml b/src/app/views/deployments/_launch_new.html.haml
> index bac7945..6cfce80 100644
> --- a/src/app/views/deployments/_launch_new.html.haml
> +++ b/src/app/views/deployments/_launch_new.html.haml
> @@ -1,7 +1,7 @@
>   = if request.xhr?
>     = render :partial =>  '/layouts/new_notification'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       = link_to t('cancel'), pool_path(@pool), :class =>  'button danger', :id =>  'cancel_deployment_button'
>     %h1.deployments
>       = @title
> diff --git a/src/app/views/deployments/launch_from_catalog.html.haml b/src/app/views/deployments/launch_from_catalog.html.haml
> index f38a600..cc2cf12 100644
> --- a/src/app/views/deployments/launch_from_catalog.html.haml
> +++ b/src/app/views/deployments/launch_from_catalog.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/nav_history'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       = link_to t('edit'), edit_catalog_path(@catalog), :class =>  'button', :id =>  'edit_button'
>     %h1.pools= @catalog.name
>
> diff --git a/src/app/views/deployments/show.html.haml b/src/app/views/deployments/show.html.haml
> index cbd0983..6006a55 100644
> --- a/src/app/views/deployments/show.html.haml
> +++ b/src/app/views/deployments/show.html.haml
> @@ -4,6 +4,8 @@
>   = render :partial =>  'alerts_show'
>   %section.content-section
>     %header#tab-container-1
> +    .section-controls
> +      = pretty_filter_toggle(deployment_path(@deployment, :view =>  'pretty', :page =>  params[:page]), deployment_path(@deployment, :view =>  'filter', :page =>  params[:page]))
>       %nav.faceted
>         %ul#tab-container-1-nav
>           - @tabs.each do |tab|
> @@ -13,10 +15,5 @@
>                 = tab[:name]
>               -if tab[:count]
>                 %span.label.badge.count.dark=tab[:count]
> -    .section-controls
> -      #obj_actions.button-container
> -        .button-group
> -          = pretty_filter_toggle(deployment_path(@deployment, :view =>  'pretty', :page =>  params[:page]),
> -                                 deployment_path(@deployment, :view =>  'filter', :page =>  params[:page]))
>     .content.collapsible.toggle-view.deployments#tab
>       = render :partial =>  @view
> diff --git a/src/app/views/hardware_profiles/_form.html.haml b/src/app/views/hardware_profiles/_form.html.haml
> index 5b130b5..972cb69 100644
> --- a/src/app/views/hardware_profiles/_form.html.haml
> +++ b/src/app/views/hardware_profiles/_form.html.haml
> @@ -1,23 +1,26 @@
>   - if @hardware_profile.errors.any?
>     = render 'layouts/error_messages', :object =>  @hardware_profile
> -= hwp_form.label :name
> -= hwp_form.text_field :name
> -%table
> -  %thead
> -    %tr
> -      - @header.each do |header|
> -        %th
> -          = header[:name]
> -  - [:memory, :cpu, :storage, :architecture].each do |type|
> -    = hwp_form.fields_for type do |hwpp_form|
> +%fieldset
> +  = hwp_form.label :name, :class =>  'em'
> +  = hwp_form.text_field :name, :class =>  'em'
> +%fieldset
> +  %table
> +    %thead
>         %tr
> -        %td= hwpp_form.text_field(:name, :readonly =>  "readonly")
> -        %td= hwpp_form.text_field(:unit, :size =>  5, :readonly =>  "readonly")
> -        %td
> -          -if type == :architecture
> -            = hwpp_form.select("value", ["i386", "x86_64"], {})
> -          -else
> -            = hwpp_form.text_field(:value)
> +        - @header.each do |header|
> +          %th
> +            = header[:name]
> +    - [:memory, :cpu, :storage, :architecture].each do |type|
> +      = hwp_form.fields_for type do |hwpp_form|
> +        %tr
> +          %td= hwpp_form.text_field(:name, :readonly =>  "readonly")
> +          %td= hwpp_form.text_field(:unit, :size =>  5, :readonly =>  "readonly")
> +          %td
> +            -if type == :architecture
> +              = hwpp_form.select("value", ["i386", "x86_64"], {})
> +            -else
> +              = hwpp_form.text_field(:value)
>
> -= hwp_form.submit t('hardware_profiles.form.check_matches'), :class =>  'danger button', :id =>  'check_matches'
> -= hwp_form.submit t('save'), :class =>  'submit button', :id =>  'save_button'
> +%fieldset.options
> +  = hwp_form.submit t('hardware_profiles.form.check_matches'), :class =>  'danger button', :id =>  'check_matches'
> +  = hwp_form.submit t('save'), :class =>  'submit button', :id =>  'save_button'
> diff --git a/src/app/views/hardware_profiles/_section_header.html.haml b/src/app/views/hardware_profiles/_section_header.html.haml
> index 2ef093f..e5f40b5 100644
> --- a/src/app/views/hardware_profiles/_section_header.html.haml
> +++ b/src/app/views/hardware_profiles/_section_header.html.haml
> @@ -1,4 +1,4 @@
>   %header.page-header
> -  #obj_actions.button-group
> +  .obj_actions
>       = link_to t('hardware_profiles.list.new_hardware'), new_hardware_profile_url, :class =>  'button primary', :id =>  'new_hardware_profile_button'
>     %h1.hardware_profiles=t'hardware_profiles.hardware_profiles'
> diff --git a/src/app/views/hardware_profiles/edit.html.haml b/src/app/views/hardware_profiles/edit.html.haml
> index 66219ad..306654f 100644
> --- a/src/app/views/hardware_profiles/edit.html.haml
> +++ b/src/app/views/hardware_profiles/edit.html.haml
> @@ -1,18 +1,17 @@
>   = render :partial =>  'layouts/admin_nav'
>
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       = link_to t('hardware_profiles.list.new_hardware'), hardware_profile_url, :class =>  'button primary', :id =>  'new_user_button'
> -    %div.button-group
> -      = link_to t('hardware_profiles.edit.cancel_editing'), hardware_profile_path(@hardware_profile), :class =>  'button pill danger', :id =>  'new_user_button'
> +    = link_to t('hardware_profiles.edit.cancel_editing'), hardware_profile_path(@hardware_profile), :class =>  'button pill danger', :id =>  'new_user_button'
>     %h1.hardware_profiles= @title
>
> -%section.content-section.hardware_profile
> +%section.content-section
>     %header
>       %h2=t('hardware_profiles.edit.edit_hwp')
>
>     .content
> -    = form_for @hardware_profile, :url =>  hardware_profile_path(@hardware_profile), :html =>  { :multipart =>  true } do |hwp_form|
> +    = form_for @hardware_profile, :url =>  hardware_profile_path(@hardware_profile), :html =>  { :multipart =>  true, :class =>  'generic' } do |hwp_form|
>         = render :partial =>  "form", :locals =>  { :hwp_form =>  hwp_form }
>
>       = render :partial =>  'matching_provider_hardware_profiles' if params[:commit] == 'Check Matches'
> diff --git a/src/app/views/hardware_profiles/new.html.haml b/src/app/views/hardware_profiles/new.html.haml
> index bedcda7..90d40f5 100644
> --- a/src/app/views/hardware_profiles/new.html.haml
> +++ b/src/app/views/hardware_profiles/new.html.haml
> @@ -1,7 +1,7 @@
>   = render :partial =>  'layouts/admin_nav'
>
>   %header.page-header
> -  #obj_actions
> +  .obj_actions
>       .return_to
>         = t'return_to'
>         = link_to t('hardware_profiles.hardware_profiles'), hardware_profiles_path
> diff --git a/src/app/views/hardware_profiles/show.html.haml b/src/app/views/hardware_profiles/show.html.haml
> index d89fe39..b2bbb83 100644
> --- a/src/app/views/hardware_profiles/show.html.haml
> +++ b/src/app/views/hardware_profiles/show.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       - if check_privilege(Privilege::CREATE, HardwareProfile)
>         = link_to t('hardware_profiles.list.new_hardware'), new_hardware_profile_url, :class =>  'button primary', :id =>  'new_role_button'
>       .button-group
> diff --git a/src/app/views/images/edit_xml.html.haml b/src/app/views/images/edit_xml.html.haml
> index 4af44ec..a2b7ac7 100644
> --- a/src/app/views/images/edit_xml.html.haml
> +++ b/src/app/views/images/edit_xml.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       .return_to
>         = t :return_to
>         = link_to t('images.environment', :environment =>  @environment.name), pool_family_path(@environment)
> diff --git a/src/app/views/images/import.html.haml b/src/app/views/images/import.html.haml
> index 9fdb103..ec5b3ac 100644
> --- a/src/app/views/images/import.html.haml
> +++ b/src/app/views/images/import.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions.button-container
>       .return_to
>         = t :return_to
>         = link_to t('images.environment', :environment =>  @environment.name), pool_family_path(@environment)
> diff --git a/src/app/views/images/new.html.haml b/src/app/views/images/new.html.haml
> index 59761e5..daf34bf 100644
> --- a/src/app/views/images/new.html.haml
> +++ b/src/app/views/images/new.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       .return_to
>         = t(:return_to)
>         = link_to t('images.environment', :environment =>  @environment.name), pool_family_path(@environment)
> @@ -18,7 +18,6 @@
>               %a{ :href =>  '#image-file-form', :class =>  'active'}= t('.upload')
>             %li
>               %a{ :href =>  '#image-url-form'}= t('.from_url')
> -      .clear
>
>         %section#image-file-form
>           = form_tag(edit_xml_images_path, { :multipart =>  true, :class =>  'generic horizontal' }) do
> diff --git a/src/app/views/images/overview.html.haml b/src/app/views/images/overview.html.haml
> index 0e0f70c..4d606b9 100644
> --- a/src/app/views/images/overview.html.haml
> +++ b/src/app/views/images/overview.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       .return_to
>         = t :return_to
>         = link_to t('images.environment', :environment =>  @environment.name), pool_family_path(@environment)
> diff --git a/src/app/views/images/show.html.haml b/src/app/views/images/show.html.haml
> index 4ef868d..57385e4 100644
> --- a/src/app/views/images/show.html.haml
> +++ b/src/app/views/images/show.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container.images
> +  .obj_actions
>       .return_to
>         =t'return_to'
>         = link_to t('images.index.images'), images_path
> @@ -24,17 +24,16 @@
>
>   %section.content-section
>     %header
> -    %h2= t('.provider_images')
>       .section-controls
>         - if @builds.any?
> -        = t'.view_build'
> +        %span= t'.view_build'
>           - if user_can_build
>             = form_tag image_path(@image.id), :method =>  :get do
>               = select_tag :build, options_for_build_select(@builds, @build, @latest_build)
>               = submit_tag t('.select_build'), :id =>  'select_build_button'
>         - if user_can_build
>           - if @image.imported?
> -          = t('.can_not_build_imported_image')
> +          %span= t('.can_not_build_imported_image')
>           -else
>             - if @builds.any?
>               - build_text = '.rebuild'
> @@ -46,13 +45,14 @@
>             #push-all-btn
>               - if @build&&  @build.id == @latest_build&&  @target_image_exists
>                 = button_to t('.push_all'), push_all_image_path(@image.id, :build_id =>  @build.id), :class =>  'button pill'
> +    %h2= t('.provider_images')
>
>     .content
>       - if @account_groups_listing.present?
>         %ul.image_builds
>           - @account_groups_listing.each do |driver, group|
>             - timg = @target_images_by_target[driver]
> -          %li
> +          %li.clearfix
>               %dl
>                 %dt
>                   .build-actions
> @@ -120,7 +120,6 @@
>                                   = button_to "", image_provider_image_path(@image.id, pimg.id), :method =>  :delete, :class =>  'delete_image'
>                               - else
>                                 &nbsp;
> -            .clear
>       - else
>         .centered.align-center
>           %strong= t("images.flash.error.no_provider_accounts")
> diff --git a/src/app/views/layouts/_admin_content_tabs.html.haml b/src/app/views/layouts/_admin_content_tabs.html.haml
> index 6f55e04..5e89f29 100644
> --- a/src/app/views/layouts/_admin_content_tabs.html.haml
> +++ b/src/app/views/layouts/_admin_content_tabs.html.haml
> @@ -8,6 +8,5 @@
>                 = tab[:name]
>               -if tab[:count]
>                 %span.label.badge.count.dark=tab[:count]
> -    .clear
>     .content#tab
>       = render :partial =>  'list'
> diff --git a/src/app/views/layouts/_admin_users_tabs.html.haml b/src/app/views/layouts/_admin_users_tabs.html.haml
> index 6f55e04..5e89f29 100644
> --- a/src/app/views/layouts/_admin_users_tabs.html.haml
> +++ b/src/app/views/layouts/_admin_users_tabs.html.haml
> @@ -8,6 +8,5 @@
>                 = tab[:name]
>               -if tab[:count]
>                 %span.label.badge.count.dark=tab[:count]
> -    .clear
>     .content#tab
>       = render :partial =>  'list'
> diff --git a/src/app/views/layouts/_filter_table.html.haml b/src/app/views/layouts/_filter_table.html.haml
> index 7fbaf75..83ef88b 100644
> --- a/src/app/views/layouts/_filter_table.html.haml
> +++ b/src/app/views/layouts/_filter_table.html.haml
> @@ -8,7 +8,6 @@
>         - if content_for? form_header
>           %ul.actions
>             = yield form_header
> -      .clear
>
>     %table.flat.checkbox_table{ 'data-none_selected' =>  t("default_none_selected_message"), 'data-confirm' =>  t("default_confirm_message") }
>       %thead
> @@ -24,7 +23,7 @@
>       = rows.collect {|row| capture_haml(row,&block)}.to_s.html_safe
>
>     - if content_for? form_footer
> -    %ul.obj_actions
> +    %fieldset.options
>         = yield form_footer
>
>   - if rows.is_a?(WillPaginate::Collection)
> diff --git a/src/app/views/layouts/_pretty_filter_toggle.html.haml b/src/app/views/layouts/_pretty_filter_toggle.html.haml
> index 3ccb45b..73a2719 100644
> --- a/src/app/views/layouts/_pretty_filter_toggle.html.haml
> +++ b/src/app/views/layouts/_pretty_filter_toggle.html.haml
> @@ -1,5 +1,3 @@
>   %span.view-toggle
> -  %a.view-toggle.pretty#pretty_view{:href =>  pretty_link, :class =>  (filter_view? ? '' : 'active')}
> -    %span Graphic View
> -  %a.view-toggle.filter#filter_view{:href =>  filter_link, :class =>  (filter_view? ? 'active' : '')}
> -    %span Filter View
> +  %a.view-toggle.pretty#pretty_view{:href =>  pretty_link, :class =>  (filter_view? ? '' : 'active'), :title =>  "Pretty view"}
> +  %a.view-toggle.filter#filter_view{:href =>  filter_link, :class =>  (filter_view? ? 'active' : ''), :title =>  "Filter view"}
> diff --git a/src/app/views/layouts/_tabpanel.html.haml b/src/app/views/layouts/_tabpanel.html.haml
> index 657c5bc..b603893 100644
> --- a/src/app/views/layouts/_tabpanel.html.haml
> +++ b/src/app/views/layouts/_tabpanel.html.haml
> @@ -1,17 +1,16 @@
> -%section.content-section
> -  %header#tab-container-1
> -    %nav.faceted
> -      %ul#tab-container-1-nav
> -        - @tabs.each do |tab|
> -          %li
> -            %a{ :href =>  url_for(:details_tab =>  tab[:id], :view =>  "filter", :only_tab =>  true),
> -                :id =>  "details_#{tab[:id]}", :class =>  "#{'active' if @details_tab[:id] == tab[:id]}",
> -                'data-pretty_view_toggle' =>  tab[:pretty_view_toggle] }
> -              = tab[:name]
> -    .section-controls
> -      -#%a.collapse{'href'=>'#'} Collapse
> -  .content.collapsible#tab
> -    = render :partial =>  @details_tab[:view]
> +%header#tab-container-1
> +  .section-controls
> +    -#%a.collapse{'href'=>'#'} Collapse
> +  %nav.faceted
> +    %ul#tab-container-1-nav
> +      - @tabs.each do |tab|
> +        %li
> +          %a{ :href =>  url_for(:details_tab =>  tab[:id], :view =>  "filter", :only_tab =>  true),
> +              :id =>  "details_#{tab[:id]}", :class =>  "#{'active' if @details_tab[:id] == tab[:id]}",
> +              'data-pretty_view_toggle' =>  tab[:pretty_view_toggle] }
> +            = tab[:name]
> +.content.collapsible#tab
> +  = render :partial =>  @details_tab[:view]
>
>   :javascript
>     $(document).ready(function() {
> diff --git a/src/app/views/layouts/application.html.haml b/src/app/views/layouts/application.html.haml
> index 93d3198..5450a6a 100644
> --- a/src/app/views/layouts/application.html.haml
> +++ b/src/app/views/layouts/application.html.haml
> @@ -6,12 +6,8 @@
>         = t("layout.appname")
>         = "| #{@title}" unless @title.blank?
>       %link{:rel =>   'shortcut icon', :href =>  '/favicon.ico'}
> -    = stylesheet_link_tag '/stylesheets/reset.css'
> -    = stylesheet_link_tag '/stylesheets/960.css'
> -    = stylesheet_link_tag '/stylesheets/buttons.css'
>       = stylesheet_link_tag '/stylesheets/compiled/layout.css'
>       = stylesheet_link_tag 'jquery.ui-1.8.1/jquery-ui-1.8.1.custom.css'
> -    = stylesheet_link_tag '/stylesheets/compiled/header.css'
>       /[if lt IE 9]
>         = javascript_include_tag 'http://html5shiv.googlecode.com/svn/trunk/html5.js'
>       /[if lt IE 8]
> @@ -60,7 +56,6 @@
>       #content
>         = render :partial =>  '/layouts/new_notification' if flash.present? or content_for?(:error_messages)
>         = yield
> -      .clear
>       %footer.standard
>         .container
>           %span.copyright!= t('layout.copyright')
> diff --git a/src/app/views/permissions/_form.html.haml b/src/app/views/permissions/_form.html.haml
> index 187cdfa..7b401aa 100644
> --- a/src/app/views/permissions/_form.html.haml
> +++ b/src/app/views/permissions/_form.html.haml
> @@ -2,8 +2,8 @@
>     = hidden_field_tag :permission_object_type, @permission_object.class.name
>     = hidden_field_tag :permission_object_id, @permission_object.id
>     = hidden_field_tag :path_prefix, @path_prefix
> -  %li= restful_submit_tag t('permissions.form.grant_access'), "create", permissions_path, 'POST', :id =>  'save_button', :class =>  'button'
> -  %li= link_to t('cancel'), @return_path, :class =>  'button danger'
> +  = link_to t('cancel'), @return_path, :class =>  'button danger'
> +  = restful_submit_tag t('permissions.form.grant_access'), "create", permissions_path, 'POST', :id =>  'save_button', :class =>  'button'
>   = filter_table(@header, @users) do |user|
>     %tr{:class =>  cycle('nostripe','stripe')}
>       %td
> diff --git a/src/app/views/permissions/_new.html.haml b/src/app/views/permissions/_new.html.haml
> index e508363..0547e1e 100644
> --- a/src/app/views/permissions/_new.html.haml
> +++ b/src/app/views/permissions/_new.html.haml
> @@ -1,5 +1,5 @@
>   %header.page-header
> -  #obj_actions.button-group
> +  .obj_actions
>       .return_to
>         = t'return_to'
>         = link_to @return_text, @return_path, :id =>  'new_pool_button'
> diff --git a/src/app/views/pool_families/_list.html.haml b/src/app/views/pool_families/_list.html.haml
> index 55006a1..cb590f3 100644
> --- a/src/app/views/pool_families/_list.html.haml
> +++ b/src/app/views/pool_families/_list.html.haml
> @@ -1,9 +1,8 @@
>   %header
> -  %h2.pools= @title
>     .section-controls
> -    #obj_actions
> -      - if check_privilege(Privilege::CREATE, PoolFamily)
> -        = link_to t("pool_families.index.new_pool_family"), new_pool_family_path, :class =>  'button pill', :id =>  'new_pool_family_button'
> +    - if check_privilege(Privilege::CREATE, PoolFamily)
> +      = link_to t("pool_families.index.new_pool_family"), new_pool_family_path, :class =>  'button pill', :id =>  'new_pool_family_button'
> +  %h2.pools= @title
>
>   .content
>     - @pool_families.each do |pool_family|
> @@ -15,11 +14,10 @@
>               %h2
>                 = link_to pool_family.name, pool_family
>               .section-controls
> -              #obj_actions
> -                = link_to t("pools.new_pool"), new_pool_path(:pool_family_id =>  pool_family.id), :class =>  'pool_family_button'
> -                - if pool_family.pools.any?
> -                  = link_to t("images.import.import_image"), new_image_path(:environment =>  pool_family.id, :tab =>  'import'), :class =>  'new_image_button'
> -                  = link_to t("images.new.new_image"), new_image_path( :environment =>  pool_family.id), :class =>  'new_image_button'
> +              = link_to t("pools.new_pool"), new_pool_path(:pool_family_id =>  pool_family.id), :class =>  'pool_family_button'
> +              - if pool_family.pools.any?
> +                = link_to t("images.import.import_image"), new_image_path(:environment =>  pool_family.id, :tab =>  'import'), :class =>  'new_image_button'
> +                = link_to t("images.new.new_image"), new_image_path( :environment =>  pool_family.id), :class =>  'new_image_button'
>         - unless pool_family.pools.blank?
>           %tr
>             %th= t("pool_families.index.pool_name")
> diff --git a/src/app/views/pool_families/_section_header.html.haml b/src/app/views/pool_families/_section_header.html.haml
> index eab1a6c..a36c83e 100644
> --- a/src/app/views/pool_families/_section_header.html.haml
> +++ b/src/app/views/pool_families/_section_header.html.haml
> @@ -1,4 +1,4 @@
>   %header.page-header
> -  #obj_actions.button-group
> +  .obj_actions
>       = link_to 'New Pool Family', new_pool_family_url, :class =>  'button primary', :id =>  'new_pool_family_button'
>     %h1.pool_families Pool Families
> diff --git a/src/app/views/pool_families/add_provider_accounts.html.haml b/src/app/views/pool_families/add_provider_accounts.html.haml
> index 2ca766e..95e5174 100644
> --- a/src/app/views/pool_families/add_provider_accounts.html.haml
> +++ b/src/app/views/pool_families/add_provider_accounts.html.haml
> @@ -1,15 +1,14 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       .return_to
>         = t'return_to'
>         = link_to @pool_family.name, pool_family_path(@pool_family, :details_tab =>  'provider_accounts'), :id =>  'new_pool_button'
>     %h1.pool_families= @pool_family.name
>
>   %section.content-section.pool_families
> -  %h3= t("pool_families.choose_provider_accounts")
> -  %header#tab-container-1
> -    %h2.settings= #t("settings.settings")
> -    %nav.faceted
> -  .content#tab
> +  %header
> +    .align-center
> +      %strong= t("pool_families.choose_provider_accounts")
> +  .content
>       = render :partial =>  'add_provider_accounts_form'
> diff --git a/src/app/views/pool_families/edit.html.haml b/src/app/views/pool_families/edit.html.haml
> index e69cda6..244660a 100644
> --- a/src/app/views/pool_families/edit.html.haml
> +++ b/src/app/views/pool_families/edit.html.haml
> @@ -1,7 +1,7 @@
>   = render :partial =>  'layouts/admin_nav'
>
>   %header.page-header
> -  #obj_actions
> +  .obj_actions
>       .return_to
>         = t("return_to")
>         = link_to t("pool_families.new.environments"), pool_families_path
> diff --git a/src/app/views/pool_families/new.html.haml b/src/app/views/pool_families/new.html.haml
> index 9cf6bbf..8a219d1 100644
> --- a/src/app/views/pool_families/new.html.haml
> +++ b/src/app/views/pool_families/new.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions
> +  .obj_actions
>       .return_to
>         = t("return_to")
>         = link_to t("pool_families.new.environments"), pool_families_path
> diff --git a/src/app/views/pool_families/show.html.haml b/src/app/views/pool_families/show.html.haml
> index 03318a5..a95af93 100644
> --- a/src/app/views/pool_families/show.html.haml
> +++ b/src/app/views/pool_families/show.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       .button-group
>         = link_to t('edit'), edit_pool_family_path(@pool_family), :class =>  'button pill'
>         = button_to t('delete'), pool_family_path(@pool_family), :method =>  :delete, :confirm =>  t("pool_families.confirm_delete"), :class =>  "button pill danger", :id =>  'delete_pool_family_button'
> @@ -17,6 +17,5 @@
>                 = tab[:name]
>               -if tab[:count]
>                 %span.label.badge.count.dark=tab[:count]
> -    .clear
>     .content#tab
>       = render :partial =>  @view
> diff --git a/src/app/views/pools/_alerts_index.html.haml b/src/app/views/pools/_alerts_index.html.haml
> index 2831e81..29cbbd9 100644
> --- a/src/app/views/pools/_alerts_index.html.haml
> +++ b/src/app/views/pools/_alerts_index.html.haml
> @@ -1,10 +1,11 @@
>   - if @statistics[:instances_failed_count]>  0
>     %section.content-section.alerts.collapse_entity
>       %header
> -      %h2=t "alerts_label"
> -      %span.label.badge.alert.count= @statistics[:instances_failed_count]
>         .section-controls
>           = link_to t("providers.edit.toggle_alerts"), "#", :class =>  'collapse alerts' unless @statistics[:instances_failed].blank?
> +      %h2.alerts
> +        =t "alerts_label"
> +        %span.label.badge.alert.count= @statistics[:instances_failed_count]
>       .content.collapsible
>         %dl.alerts
>           %ul
> diff --git a/src/app/views/pools/_alerts_show.html.haml b/src/app/views/pools/_alerts_show.html.haml
> index 1f9865e..4807e8f 100644
> --- a/src/app/views/pools/_alerts_show.html.haml
> +++ b/src/app/views/pools/_alerts_show.html.haml
> @@ -1,10 +1,11 @@
>   - if @statistics[:instances_failed_visible_count]>  0
>     %section.content-section.alerts.collapse_entity
>       %header
> -      %h2=t 'alerts_label'
> -      %span.label.badge.alert.count= @statistics[:instances_failed_visible_count]
>         .section-controls
>           = link_to t("providers.edit.toggle_alerts"), "#", :class =>  'collapse alerts' unless @statistics[:instances_failed].blank?
> +      %h2.alerts
> +        =t 'alerts_label'
> +        %span.label.badge.alert.count= @statistics[:instances_failed_visible_count]
>       .content.collapsible
>         %dl.alerts
>           %ul
> diff --git a/src/app/views/pools/_edit.html.haml b/src/app/views/pools/_edit.html.haml
> index 8849e42..17b33fe 100644
> --- a/src/app/views/pools/_edit.html.haml
> +++ b/src/app/views/pools/_edit.html.haml
> @@ -1,5 +1,5 @@
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       - if check_privilege(Privilege::CREATE, Pool)
>         = link_to t('pools.new_pool'), new_pool_url, :class =>  'button primary', :id =>  'new_pool_button'
>     %h1.pools= @pool.name
> @@ -9,4 +9,4 @@
>       %h2= @title
>
>     .content
> -    = render :partial =>  'form'
> +    = render :partial =>  'form'
> \ No newline at end of file
> diff --git a/src/app/views/pools/_form.html.haml b/src/app/views/pools/_form.html.haml
> index b93298b..94fa0cd 100644
> --- a/src/app/views/pools/_form.html.haml
> +++ b/src/app/views/pools/_form.html.haml
> @@ -11,7 +11,7 @@
>         - if @pool_families
>           = form.collection_select :pool_family_id, @pool_families, :id, :name
>         - else
> -        = form.label :pool_family_id, @pool.pool_family.name
> +        %span.text_instead_input= @pool.pool_family.name
>           = hidden_field_tag 'pool[pool_family_id]', @pool.pool_family_id
>       .field
>         = label_tag :quota, t('quota')
> diff --git a/src/app/views/pools/_header_index.html.haml b/src/app/views/pools/_header_index.html.haml
> index 702562a..5735208 100644
> --- a/src/app/views/pools/_header_index.html.haml
> +++ b/src/app/views/pools/_header_index.html.haml
> @@ -1,5 +1,5 @@
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       .button-group
>         = pretty_filter_toggle(pools_path(:view =>  'pretty', :page =>  params[:page]), pools_path(:view =>  'filter', :page =>  params[:page]))
>       .button-group
> @@ -7,4 +7,4 @@
>           = link_to t('pools.new_pool'), new_pool_path, { :class =>  'button primary', :id =>  'new_pool_button' }
>     %h1.section-index= t 'pools.index.overview'
>
> -= render :partial =>  'scoreboard_index'
> += render :partial =>  'scoreboard_index'
> \ No newline at end of file
> diff --git a/src/app/views/pools/_header_show.html.haml b/src/app/views/pools/_header_show.html.haml
> index b20fc18..cd0d54a 100644
> --- a/src/app/views/pools/_header_show.html.haml
> +++ b/src/app/views/pools/_header_show.html.haml
> @@ -1,11 +1,11 @@
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       - if check_privilege(Privilege::CREATE, Deployment, @pool)
>         = link_to t('deployments.new_deployment'), launch_new_deployments_path(:pool_id =>  @pool.id), :class =>  'button primary', :id =>  'new_deployment_button'
>       %div.catalog_link
>         = render :partial =>  'layouts/catalog_dropdown', :locals =>  {:catalogs =>  @pool.catalogs}
>       .button-group
>         - if check_privilege(Privilege::MODIFY, @pool)
> -        = link_to t('edit'), edit_pool_path(@pool), :class =>  'button', :id =>  'edit_pool_button'
> -        = button_to t('delete'), pool_path(@pool), :method =>  :delete, :confirm =>  t('pools.index.confirm_delete'), :class =>  "button danger", :id =>  'delete_pool_button'
> +        = link_to t('edit'), edit_pool_path(@pool), :class =>  'button pill', :id =>  'edit_pool_button'
> +        = button_to t('delete'), pool_path(@pool), :method =>  :delete, :confirm =>  t('pools.index.confirm_delete'), :class =>  "button pill danger", :id =>  'delete_pool_button'
>     %h1.pools= @title
> diff --git a/src/app/views/pools/show.html.haml b/src/app/views/pools/show.html.haml
> index b593c7d..882089b 100644
> --- a/src/app/views/pools/show.html.haml
> +++ b/src/app/views/pools/show.html.haml
> @@ -5,6 +5,8 @@
>
>   %section.content-section
>     %header#tab-container-1
> +    .section-controls
> +      = pretty_filter_toggle(pool_path(@pool, :view =>  'pretty', :details_tab =>  @details_tab[:id], :page =>  params[:page]), pool_path(@pool, :view =>  'filter', :details_tab =>  @details_tab[:id], :page =>  params[:page]))
>       %nav.faceted
>         %ul#tab-container-1-nav
>           - @tabs.each do |tab|
> @@ -13,10 +15,5 @@
>                 = tab[:name]
>               -if tab[:count]
>                 %span.label.badge.count.dark=tab[:count]
> -    .section-controls
> -      #obj_actions.button-container
> -        .button-group
> -          = pretty_filter_toggle(pool_path(@pool, :view =>  'pretty', :details_tab =>  @details_tab[:id], :page =>  params[:page]),
> -                                 pool_path(@pool, :view =>  'filter', :details_tab =>  @details_tab[:id], :page =>  params[:page]))
>     .content.collapsible.toggle-view.pools#tab
>       = render :partial =>  @view
> diff --git a/src/app/views/provider_accounts/_section_header.html.haml b/src/app/views/provider_accounts/_section_header.html.haml
> index 1fe8cad..ca4d25d 100644
> --- a/src/app/views/provider_accounts/_section_header.html.haml
> +++ b/src/app/views/provider_accounts/_section_header.html.haml
> @@ -1,4 +1,4 @@
>   %header.page-header
> -  #obj_actions.button-group
> +  .obj_actions
>       = link_to t('provider_accounts.new.new_provider_account'), new_provider_account_url, :class =>  'button primary', :id =>  'new_provider_account_button'
>     %h1.provider_accounts= t'provider_accounts.index.provider_accounts'
> diff --git a/src/app/views/provider_accounts/edit.html.haml b/src/app/views/provider_accounts/edit.html.haml
> index b3b0849..f2ce8a2 100644
> --- a/src/app/views/provider_accounts/edit.html.haml
> +++ b/src/app/views/provider_accounts/edit.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions
> +  .obj_actions
>       .return_to
>         =t'return_to'
>         = link_to t('provider_accounts.new.cloud_providers'), edit_provider_path(@provider, :details_tab =>  'accounts')
> diff --git a/src/app/views/provider_accounts/new.html.haml b/src/app/views/provider_accounts/new.html.haml
> index b7c05be..b350d52 100644
> --- a/src/app/views/provider_accounts/new.html.haml
> +++ b/src/app/views/provider_accounts/new.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions
> +  .obj_actions
>       .return_to
>         = t'return_to'
>         = link_to t('provider_accounts.new.cloud_providers'), edit_provider_path(@provider, :details_tab =>  'accounts')
> diff --git a/src/app/views/provider_accounts/show.html.haml b/src/app/views/provider_accounts/show.html.haml
> index 72b753b..a46ec37 100644
> --- a/src/app/views/provider_accounts/show.html.haml
> +++ b/src/app/views/provider_accounts/show.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions
> +  .obj_actions
>       .return_to
>         =t'return_to'
>         = link_to t('provider_accounts.new.cloud_providers'), edit_provider_path(@provider, :details_tab =>  'accounts')
> diff --git a/src/app/views/provider_realms/_section_header.html.haml b/src/app/views/provider_realms/_section_header.html.haml
> index 8aea23e..c4b6121 100644
> --- a/src/app/views/provider_realms/_section_header.html.haml
> +++ b/src/app/views/provider_realms/_section_header.html.haml
> @@ -1,4 +1,4 @@
>   %header.page-header
> -  #obj_actions.button-group
> +  .obj_actions
>       = link_to t('realms.new_realm'), new_realm_url, :class =>  'button primary', :id =>  'new_realm_button'
>     %h1.realms Realms
> diff --git a/src/app/views/provider_realms/show.html.haml b/src/app/views/provider_realms/show.html.haml
> index a6fa471..d9c414b 100644
> --- a/src/app/views/provider_realms/show.html.haml
> +++ b/src/app/views/provider_realms/show.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button_container
> +  .obj_actions
>       .return_to
>         = t('return_to')
>         = link_to t('provider_realms.provider_realms'), edit_provider_path(@realm.provider, :details_tab =>   'realms', :only_tab =>   true), :id =>   'back_to_provider_realms_button'
> diff --git a/src/app/views/providers/_section_header.html.haml b/src/app/views/providers/_section_header.html.haml
> index 039e3cf..c7d6ce9 100644
> --- a/src/app/views/providers/_section_header.html.haml
> +++ b/src/app/views/providers/_section_header.html.haml
> @@ -1,5 +1,5 @@
>   %header.page-header
> -  #obj_actions
> +  .obj_actions
>       %span.label.light= t("providers.choose_a_provider")
>       %ul#provider_select
>         %li
> diff --git a/src/app/views/providers/edit.html.haml b/src/app/views/providers/edit.html.haml
> index 241ef55..90277c2 100644
> --- a/src/app/views/providers/edit.html.haml
> +++ b/src/app/views/providers/edit.html.haml
> @@ -11,14 +11,14 @@
>         = t("providers.edit.enable_configure_providers")
>         = image_tag "provider_enable_hint.png"
>
> -%section.content-section.alerts.collapse_entity
> -  %header
> -    %h2.alerts
> -      = t("alerts_label")
> -      %span.label.badge.count.alert= @alerts.count
> -    .section-controls
> -      = link_to t("providers.edit.toggle_alerts"), "#", :class =>  'collapse alerts' unless @alerts.blank?
> -  - unless @alerts.blank?
> +- unless @alerts.blank?
> +  %section.content-section.alerts.collapse_entity
> +    %header
> +      .section-controls
> +        = link_to t("providers.edit.toggle_alerts"), "#", :class =>  'collapse alerts' unless @alerts.blank?
> +      %h2.alerts
> +        = t("alerts_label")
> +        %span.label.badge.count.alert= @alerts.count
>       .content.collapsible
>         %dl.alerts
>           %ul
> diff --git a/src/app/views/providers/new.html.haml b/src/app/views/providers/new.html.haml
> index e98e58e..bcac552 100644
> --- a/src/app/views/providers/new.html.haml
> +++ b/src/app/views/providers/new.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions
> +  .obj_actions
>       %span.label.light Choose a provider:
>       %ul#provider_select
>         %li
> diff --git a/src/app/views/realms/_section_header.html.haml b/src/app/views/realms/_section_header.html.haml
> index 8aea23e..c4b6121 100644
> --- a/src/app/views/realms/_section_header.html.haml
> +++ b/src/app/views/realms/_section_header.html.haml
> @@ -1,4 +1,4 @@
>   %header.page-header
> -  #obj_actions.button-group
> +  .obj_actions
>       = link_to t('realms.new_realm'), new_realm_url, :class =>  'button primary', :id =>  'new_realm_button'
>     %h1.realms Realms
> diff --git a/src/app/views/realms/edit.html.haml b/src/app/views/realms/edit.html.haml
> index b051543..d1564a3 100644
> --- a/src/app/views/realms/edit.html.haml
> +++ b/src/app/views/realms/edit.html.haml
> @@ -1,10 +1,9 @@
>   = render :partial =>  'layouts/admin_nav'
>
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       = link_to t('realms.new_realm'), new_realm_url, :class =>  'button primary', :id =>  'new_user_button'
> -    %div.button-group
> -      = link_to t('realms.edit.cancel_editing'), realm_path(@realm), :class =>  'button pill danger', :id =>  'new_user_button'
> +    = link_to t('realms.edit.cancel_editing'), realm_path(@realm), :class =>  'button pill danger', :id =>  'new_user_button'
>     %h1.realms= @title
>
>   %section.content-section.realm
> diff --git a/src/app/views/realms/new.html.haml b/src/app/views/realms/new.html.haml
> index 990b07c..539d7c3 100644
> --- a/src/app/views/realms/new.html.haml
> +++ b/src/app/views/realms/new.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions
> +  .obj_actions
>       .return_to
>         =t'return_to'
>         = link_to t('realms.realms'), realms_path
> diff --git a/src/app/views/realms/show.html.haml b/src/app/views/realms/show.html.haml
> index b0f8b44..5823a0b 100644
> --- a/src/app/views/realms/show.html.haml
> +++ b/src/app/views/realms/show.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       .return_to
>         =t'return_to'
>         = link_to t('realms.realms'), realms_path
> diff --git a/src/app/views/roles/_form.html.haml b/src/app/views/roles/_form.html.haml
> index ff8475f..8edae18 100644
> --- a/src/app/views/roles/_form.html.haml
> +++ b/src/app/views/roles/_form.html.haml
> @@ -1,8 +1,10 @@
>   - if @role.errors.any?
>     = render 'layouts/error_messages', :object =>  @role
>   %fieldset
> -  = form.label :name
> -  = form.text_field :name, :class =>  "em long"
> +  .field
> +    = form.label :name, :class =>  'em'
> +    .input
> +      = form.text_field :name, :class =>  "em long"
>   %fieldset.options
> -  = form.submit t('save'),  :class =>  "submit button"
> -  = link_to t(:cancel), roles_path, :class =>  'button button'
> +  = form.submit t('save'), :class =>  "button"
> +  = link_to t(:cancel), roles_path, :class =>  'button danger'
> diff --git a/src/app/views/roles/_section_header.html.haml b/src/app/views/roles/_section_header.html.haml
> index c1b2ae5..9cbfe88 100644
> --- a/src/app/views/roles/_section_header.html.haml
> +++ b/src/app/views/roles/_section_header.html.haml
> @@ -1,4 +1,4 @@
>   %header.page-header
> -  #obj_actions.button-group
> +  .obj_actions
>       = link_to t('roles.new_role'), new_role_url, :class =>  'button primary', :id =>  'new_role_button'
>     %h1.no-icon Roles
> diff --git a/src/app/views/roles/edit.html.haml b/src/app/views/roles/edit.html.haml
> index d3c175d..04cff39 100644
> --- a/src/app/views/roles/edit.html.haml
> +++ b/src/app/views/roles/edit.html.haml
> @@ -1,20 +1,16 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       = link_to t('roles.new_role'), new_role_url, :class =>  'button primary', :id =>  'new_role_button'
> -    %div.button-group
> -      = link_to t('roles.edit.cancel_editing'), role_path(@role), :class =>  'button pill danger', :id =>  'new_role_button'
> +    = link_to t('roles.edit.cancel_editing'), role_path(@role), :class =>  'button pill danger', :id =>  'new_role_button'
>     %h1.no-icon= @role.name.titlecase
>
>   %section.content-section.role
>     %header
> -    %h2=t'roles.edit.properties'
> -
> -  .content
>       - if check_privilege(Privilege::MODIFY, Role)
>         %h2=t('roles.edit.editing_role') + "#{@role.name}"
>       - else
>         %h2=t('roles.edit.editing_role')
> -
> +  .content
>       = form_for @role, :url =>  role_path(@role), :html =>  { :method =>  :put, :class =>  'generic horizontal' } do |f|
>         = render :partial =>  "form", :locals =>  { :form =>  f }
> diff --git a/src/app/views/roles/show.html.haml b/src/app/views/roles/show.html.haml
> index 98b61b5..a58c4b1 100644
> --- a/src/app/views/roles/show.html.haml
> +++ b/src/app/views/roles/show.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-container
> +  .obj_actions
>       = link_to t('roles.new_role'), new_role_url, :class =>  'button primary', :id =>  'new_role_button'
>       .button-group
>         = link_to t('edit'), edit_role_path(@role), :class =>  'button pill'
> diff --git a/src/app/views/settings/index.html.haml b/src/app/views/settings/index.html.haml
> index 2e7761f..d0484ca 100644
> --- a/src/app/views/settings/index.html.haml
> +++ b/src/app/views/settings/index.html.haml
> @@ -2,14 +2,10 @@
>   = render :partial =>  'section_header'
>
>   %section.content-section.settings
> +  %header
> +    %h2= t('.permissions')
>     .content
> -    %ul.tiles{:class =>  'container_16'}
> -      - if check_privilege(Privilege::MODIFY)
> -        %li#permissions.grid_8
> -          = image_tag "blnk.png", :class =>  "icon", :alt =>  ""
> -          %h2
> -            = t('.permissions')
> -          %p
> -            = t('.permissions_desc')
> -          = link_to t(:continue), self_service_settings_path, :class =>  'button'
> -      .clear
> +    - if check_privilege(Privilege::MODIFY)
> +      %p
> +        = t('.permissions_desc')
> +        = link_to t(:continue), self_service_settings_path, :class =>  'button pill'
> diff --git a/src/app/views/settings/self_service.html.haml b/src/app/views/settings/self_service.html.haml
> index c623896..7194c58 100644
> --- a/src/app/views/settings/self_service.html.haml
> +++ b/src/app/views/settings/self_service.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions.button-group
> +  .obj_actions
>       .return_to
>         = t 'return_to'
>         = link_to "Settings", settings_path
> @@ -20,6 +20,6 @@
>             %label= t('.instances_quota')
>             = text_field :self_service_default_quota, :maximum_running_instances, :class =>  'grid_5'
>         %fieldset.options
> -        #obj_actions.button-group
> +        .obj_actions.button-group
>             = link_to t('reset'), self_service_settings_path, :class =>  'button pill'
>             = submit_tag t(:save), :class =>  "button pill"
> diff --git a/src/app/views/users/_list.html.haml b/src/app/views/users/_list.html.haml
> index 5978181..6d6cc51 100644
> --- a/src/app/views/users/_list.html.haml
> +++ b/src/app/views/users/_list.html.haml
> @@ -1,11 +1,9 @@
>   %header
>     %h2#users.users= @title
> -  .section-controls
> -    #obj_actions
> -      = link_to "", new_user_path, :class =>  'add-user-button', :id =>  'add_user_button'
>
>   - content_for :form_header do
>     %li= restful_submit_tag "#{t'users.list.delete_selected'}", "destroy", multi_destroy_users_path, 'DELETE', :id =>  'delete_button', :class =>  'button danger'
> +  %li= link_to t("users.list.add_user"), new_user_path, :class =>  'button', :id =>  'add_user_button'
>
>   - content_for :filter_controls do
>     %li
> diff --git a/src/app/views/users/_section_header.html.haml b/src/app/views/users/_section_header.html.haml
> index 73a64a1..c798674 100644
> --- a/src/app/views/users/_section_header.html.haml
> +++ b/src/app/views/users/_section_header.html.haml
> @@ -1,5 +1,5 @@
>   %header.page-header
> -  #obj_actions
> +  .obj_actions
>       .return_to
>         =t'users.quick_jump'
>         = link_to 'Groups', "#groups"
> diff --git a/src/app/views/users/edit.html.haml b/src/app/views/users/edit.html.haml
> index 619bf93..f19fb48 100644
> --- a/src/app/views/users/edit.html.haml
> +++ b/src/app/views/users/edit.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions
> +  .obj_actions
>       .return_to
>         =t'users.return_to'
>         = link_to "#{t'users.users'}", users_path
> diff --git a/src/app/views/users/new.html.haml b/src/app/views/users/new.html.haml
> index f6e1ce7..b1b4b5f 100644
> --- a/src/app/views/users/new.html.haml
> +++ b/src/app/views/users/new.html.haml
> @@ -1,6 +1,6 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
> -  #obj_actions
> +  .obj_actions
>       .return_to
>         =t'return_to'
>         = link_to "#{t'users.users'}", users_path
> diff --git a/src/app/views/users/show.html.haml b/src/app/views/users/show.html.haml
> index 16a7118..aa9ca5b 100644
> --- a/src/app/views/users/show.html.haml
> +++ b/src/app/views/users/show.html.haml
> @@ -1,7 +1,7 @@
>   = render :partial =>  'layouts/admin_nav'
>   %header.page-header
>     - if check_privilege(Privilege::VIEW, User)
> -    #obj_actions
> +    .obj_actions
>         .return_to
>           =t'return_to'
>           = link_to t('users.users'), users_path
> @@ -17,11 +17,10 @@
>             %dd= @user.email
>             %dt=t'users.show.username'
>             %dd= @user.login
> -        #obj_actions.button-group
> +        .button-group
>             = link_to "#{t('users.show.edit')}", edit_user_path(@user), :class =>  'button'
>             - unless @user.id == current_user.id
>               = button_to "#{t('users.show.delete')}", user_path(@user), :method =>  :delete, :confirm =>  t('users.confirm_delete'), :class =>  "button danger"
> -        .clear
>       %dl.user_stats
>         %ul
>           %div
> @@ -44,7 +43,6 @@
>             %li
>               %dt=t'users.show.last_login_ip'
>               %dd= @user.last_login_ip
> -  .clear
>
>   /%section.content-section.user
>   /  %header
> diff --git a/src/config/locales/en.yml b/src/config/locales/en.yml
> index f6d3623..6bee3f4 100644
> --- a/src/config/locales/en.yml
> +++ b/src/config/locales/en.yml
> @@ -45,6 +45,7 @@ en:
>         neccessary_information: "Enter necessary information about your new user and click 'Save User' when you are finished."
>       list:
>         delete_selected: Delete Selected
> +      add_user: Add User
>         unlimited: Unlimited
>       edit:
>         edit_user: Edit User
> diff --git a/src/features/step_definitions/hardware_profile_steps.rb b/src/features/step_definitions/hardware_profile_steps.rb
> index be3c4a8..b2c3f35 100644
> --- a/src/features/step_definitions/hardware_profile_steps.rb
> +++ b/src/features/step_definitions/hardware_profile_steps.rb
> @@ -89,7 +89,7 @@ Then /^I should not see the edit button$/ do
>   end
>
>   Then /^I should not see the delete button$/ do
> -  within('#obj_actions') do
> +  within('.obj_actions') do
>       page.should have_no_selector('input[value=delete]')
>     end
>   end
> diff --git a/src/public/javascripts/application.js b/src/public/javascripts/application.js
> index f4054fb..52bb712 100644
> --- a/src/public/javascripts/application.js
> +++ b/src/public/javascripts/application.js
> @@ -20,7 +20,7 @@ $.extend(Conductor, {
>
>         e.preventDefault();
>         var url = $(this).attr('href');
> -      $('#tab').html('<span class="loading_tabs"></span>');
> +      $('#tab').html('<div class="loading_tabs"></div>');
>         $.get(url, function(data) {
>           $('#tab').html(data).show();
>         })
> @@ -85,7 +85,7 @@ $.extend(Conductor, {
>     bind_pretty_toggle: function() {
>       Conductor.nicelyHookAjaxClick($("#pretty_view"), function() {
>         var link_element = this;
> -      $('#content .toggle-view').html('<span class="loading_tabs"></span>');
> +      $('#content .toggle-view').html('<div class="loading_tabs"></div>');
>         $.get($(this).attr("href"), $(this).serialize(), function(result) {
>           $('#content .toggle-view').html(result);
>           $(link_element).addClass('active');
> @@ -94,7 +94,7 @@ $.extend(Conductor, {
>       });
>       Conductor.nicelyHookAjaxClick($("#filter_view"), function() {
>         var link_element = this;
> -      $('#content .toggle-view').html('<span class="loading_tabs"></span>');
> +      $('#content .toggle-view').html('<div class="loading_tabs"></div>');
>         $.get($(this).attr("href"), $(this).serialize(), function(result) {
>           $('#content .toggle-view').html(result);
>           $('#details-selected').hide();
> diff --git a/src/public/stylesheets/960.css b/src/public/stylesheets/960.css
> deleted file mode 100644
> index 1272675..0000000
> --- a/src/public/stylesheets/960.css
> +++ /dev/null
> @@ -1,440 +0,0 @@
> -/*
> -  960 Grid System ~ Core CSS.
> -  Learn more ~ http://960.gs/
> -
> -  Licensed under GPL and MIT.
> -*/
> -
> -/*
> -  Forces backgrounds to span full width,
> -  even if there is horizontal scrolling.
> -  Increase this if your layout is wider.
> -
> -  Note: IE6 works fine without this fix.
> -*/
> -
> -body {
> -  min-width: 960px;
> -}
> -
> -/* Containers
> -----------------------------------------------------------------------------------------------------*/
> -.container_16 {
> -  margin-left: auto;
> -  margin-right: auto;
> -  width: 960px;
> -}
> -
> -/* Grid>>  Global
> -----------------------------------------------------------------------------------------------------*/
> -
> -.grid_1,
> -.grid_2,
> -.grid_3,
> -.grid_4,
> -.grid_5,
> -.grid_6,
> -.grid_7,
> -.grid_8,
> -.grid_9,
> -.grid_10,
> -.grid_11,
> -.grid_12,
> -.grid_13,
> -.grid_14,
> -.grid_15,
> -.grid_16 {
> -  display: inline;
> -  float: left;
> -  position: relative;
> -  margin-left: 10px;
> -  margin-right: 10px;
> -}
> -
> -.push_1, .pull_1,
> -.push_2, .pull_2,
> -.push_3, .pull_3,
> -.push_4, .pull_4,
> -.push_5, .pull_5,
> -.push_6, .pull_6,
> -.push_7, .pull_7,
> -.push_8, .pull_8,
> -.push_9, .pull_9,
> -.push_10, .pull_10,
> -.push_11, .pull_11,
> -.push_12, .pull_12,
> -.push_13, .pull_13,
> -.push_14, .pull_14,
> -.push_15, .pull_15,
> -.push_16, .pull_16 {
> -  position: relative;
> -}
> -
> -/* Grid>>  Children (Alpha ~ First, Omega ~ Last)
> -----------------------------------------------------------------------------------------------------*/
> -
> -.alpha {
> -  margin-left: 0;
> -}
> -
> -.omega {
> -  margin-right: 0;
> -}
> -
> -/* Grid>>  16 Columns
> -----------------------------------------------------------------------------------------------------*/
> -
> -.container_16 .grid_1 {
> -  width: 40px;
> -}
> -
> -.container_16 .grid_2 {
> -  width: 100px;
> -}
> -
> -.container_16 .grid_3 {
> -  width: 160px;
> -}
> -
> -.container_16 .grid_4 {
> -  width: 220px;
> -}
> -
> -.container_16 .grid_5 {
> -  width: 280px;
> -}
> -
> -.container_16 .grid_6 {
> -  width: 340px;
> -}
> -
> -.container_16 .grid_7 {
> -  width: 400px;
> -}
> -
> -.container_16 .grid_8 {
> -  width: 460px;
> -}
> -
> -.container_16 .grid_9 {
> -  width: 520px;
> -}
> -
> -.container_16 .grid_10 {
> -  width: 580px;
> -}
> -
> -.container_16 .grid_11 {
> -  width: 640px;
> -}
> -
> -.container_16 .grid_12 {
> -  width: 700px;
> -}
> -
> -.container_16 .grid_13 {
> -  width: 760px;
> -}
> -
> -.container_16 .grid_14 {
> -  width: 820px;
> -}
> -
> -.container_16 .grid_15 {
> -  width: 880px;
> -}
> -
> -.container_16 .grid_16 {
> -  width: 940px;
> -}
> -
> -/* Prefix Extra Space>>  16 Columns
> -----------------------------------------------------------------------------------------------------*/
> -
> -.container_16 .prefix_1 {
> -  padding-left: 60px;
> -}
> -
> -.container_16 .prefix_2 {
> -  padding-left: 120px;
> -}
> -
> -.container_16 .prefix_3 {
> -  padding-left: 180px;
> -}
> -
> -.container_16 .prefix_4 {
> -  padding-left: 240px;
> -}
> -
> -.container_16 .prefix_5 {
> -  padding-left: 300px;
> -}
> -
> -.container_16 .prefix_6 {
> -  padding-left: 360px;
> -}
> -
> -.container_16 .prefix_7 {
> -  padding-left: 420px;
> -}
> -
> -.container_16 .prefix_8 {
> -  padding-left: 480px;
> -}
> -
> -.container_16 .prefix_9 {
> -  padding-left: 540px;
> -}
> -
> -.container_16 .prefix_10 {
> -  padding-left: 600px;
> -}
> -
> -.container_16 .prefix_11 {
> -  padding-left: 660px;
> -}
> -
> -.container_16 .prefix_12 {
> -  padding-left: 720px;
> -}
> -
> -.container_16 .prefix_13 {
> -  padding-left: 780px;
> -}
> -
> -.container_16 .prefix_14 {
> -  padding-left: 840px;
> -}
> -
> -.container_16 .prefix_15 {
> -  padding-left: 900px;
> -}
> -
> -/* Suffix Extra Space>>  16 Columns
> -----------------------------------------------------------------------------------------------------*/
> -
> -.container_16 .suffix_1 {
> -  padding-right: 60px;
> -}
> -
> -.container_16 .suffix_2 {
> -  padding-right: 120px;
> -}
> -
> -.container_16 .suffix_3 {
> -  padding-right: 180px;
> -}
> -
> -.container_16 .suffix_4 {
> -  padding-right: 240px;
> -}
> -
> -.container_16 .suffix_5 {
> -  padding-right: 300px;
> -}
> -
> -.container_16 .suffix_6 {
> -  padding-right: 360px;
> -}
> -
> -.container_16 .suffix_7 {
> -  padding-right: 420px;
> -}
> -
> -.container_16 .suffix_8 {
> -  padding-right: 480px;
> -}
> -
> -.container_16 .suffix_9 {
> -  padding-right: 540px;
> -}
> -
> -.container_16 .suffix_10 {
> -  padding-right: 600px;
> -}
> -
> -.container_16 .suffix_11 {
> -  padding-right: 660px;
> -}
> -
> -.container_16 .suffix_12 {
> -  padding-right: 720px;
> -}
> -
> -.container_16 .suffix_13 {
> -  padding-right: 780px;
> -}
> -
> -.container_16 .suffix_14 {
> -  padding-right: 840px;
> -}
> -
> -.container_16 .suffix_15 {
> -  padding-right: 900px;
> -}
> -
> -/* Push Space>>  16 Columns
> -----------------------------------------------------------------------------------------------------*/
> -
> -.container_16 .push_1 {
> -  left: 60px;
> -}
> -
> -.container_16 .push_2 {
> -  left: 120px;
> -}
> -
> -.container_16 .push_3 {
> -  left: 180px;
> -}
> -
> -.container_16 .push_4 {
> -  left: 240px;
> -}
> -
> -.container_16 .push_5 {
> -  left: 300px;
> -}
> -
> -.container_16 .push_6 {
> -  left: 360px;
> -}
> -
> -.container_16 .push_7 {
> -  left: 420px;
> -}
> -
> -.container_16 .push_8 {
> -  left: 480px;
> -}
> -
> -.container_16 .push_9 {
> -  left: 540px;
> -}
> -
> -.container_16 .push_10 {
> -  left: 600px;
> -}
> -
> -.container_16 .push_11 {
> -  left: 660px;
> -}
> -
> -.container_16 .push_12 {
> -  left: 720px;
> -}
> -
> -.container_16 .push_13 {
> -  left: 780px;
> -}
> -
> -.container_16 .push_14 {
> -  left: 840px;
> -}
> -
> -.container_16 .push_15 {
> -  left: 900px;
> -}
> -
> -/* Pull Space>>  16 Columns
> -----------------------------------------------------------------------------------------------------*/
> -
> -.container_16 .pull_1 {
> -  left: -60px;
> -}
> -
> -.container_16 .pull_2 {
> -  left: -120px;
> -}
> -
> -.container_16 .pull_3 {
> -  left: -180px;
> -}
> -
> -.container_16 .pull_4 {
> -  left: -240px;
> -}
> -
> -.container_16 .pull_5 {
> -  left: -300px;
> -}
> -
> -.container_16 .pull_6 {
> -  left: -360px;
> -}
> -
> -.container_16 .pull_7 {
> -  left: -420px;
> -}
> -
> -.container_16 .pull_8 {
> -  left: -480px;
> -}
> -
> -.container_16 .pull_9 {
> -  left: -540px;
> -}
> -
> -.container_16 .pull_10 {
> -  left: -600px;
> -}
> -
> -.container_16 .pull_11 {
> -  left: -660px;
> -}
> -
> -.container_16 .pull_12 {
> -  left: -720px;
> -}
> -
> -.container_16 .pull_13 {
> -  left: -780px;
> -}
> -
> -.container_16 .pull_14 {
> -  left: -840px;
> -}
> -
> -.container_16 .pull_15 {
> -  left: -900px;
> -}
> -
> -/* `Clear Floated Elements
> -----------------------------------------------------------------------------------------------------*/
> -
> -/* http://sonspring.com/journal/clearing-floats */
> -
> -.clear {
> -  clear: both;
> -  display: block;
> -  overflow: hidden;
> -  visibility: hidden;
> -  width: 0;
> -  height: 0;
> -}
> -
> -/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
> -
> -.clearfix:before,
> -.clearfix:after {
> -  content: '\0020';
> -  display: block;
> -  overflow: hidden;
> -  visibility: hidden;
> -  width: 0;
> -  height: 0;
> -}
> -
> -.clearfix:after {
> -  clear: both;
> -}
> -
> -/*
> -  The following zoom: 1 rule is specifically for IE6 + IE7.
> -  Move to separate stylesheet if invalid CSS is a problem.
> -*/
> -
> -.clearfix {
> -  zoom: 1;
> -}
> \ No newline at end of file
> diff --git a/src/public/stylesheets/buttons.css b/src/public/stylesheets/buttons.css
> deleted file mode 100644
> index 10876b1..0000000
> --- a/src/public/stylesheets/buttons.css
> +++ /dev/null
> @@ -1,394 +0,0 @@
> -/* ------------------------------------------
> -CSS3 GITHUB BUTTONS (Nicolas Gallagher)
> -Licensed under Unlicense
> -http://github.com/necolas/css3-github-buttons
> ------------------------------------------- */
> -
> -
> -/* ------------------------------------------------------------------------------------------------------------- BUTTON */
> -
> -.button {
> -    position: relative;
> -    overflow: visible;
> -    display: inline-block;
> -    padding: 0.5em 1em;
> -    border: 1px solid #d4d4d4;
> -    margin: 0;
> -    text-decoration: none;
> -    text-shadow: 1px 1px 0 #fff;
> -    font:11px/normal sans-serif;
> -    color: #333;
> -    white-space: nowrap;
> -    cursor: pointer;
> -    outline: none;
> -    background-color: #ececec;
> -    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
> -    background-image: -moz-linear-gradient(#f4f4f4, #ececec);
> -    background-image: -o-linear-gradient(#f4f4f4, #ececec);
> -    background-image: linear-gradient(#f4f4f4, #ececec);
> -    -webkit-background-clip: padding;
> -    -moz-background-clip: padding;
> -    -o-background-clip: padding-box;
> -    /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
> -    -webkit-border-radius: 0.2em;
> -    -moz-border-radius: 0.2em;
> -    border-radius: 0.2em;
> -    /* IE hacks */
> -    zoom: 1;
> -    *display: inline;
> -}
> -
> -.button:hover,
> -.button:focus,
> -.button:active,
> -.button.active {
> -    border-color: #3072b3;
> -    border-bottom-color: #2a65a0;
> -    text-decoration: none;
> -    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
> -    color: #fff;
> -    background-color: #3C8DDE;
> -    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
> -    background-image: -moz-linear-gradient(#599bdc, #3072b3);
> -    background-image: -o-linear-gradient(#599bdc, #3072b3);
> -    background-image: linear-gradient(#599bdc, #3072b3);
> -}
> -
> -.button:active,
> -.button.active {
> -    border-color: #2a65a0;
> -    border-bottom-color: #3884CF;
> -    background-color: #3072b3;
> -    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
> -    background-image: -moz-linear-gradient(#3072b3, #599bdc);
> -    background-image: -o-linear-gradient(#3072b3, #599bdc);
> -    background-image: linear-gradient(#3072b3, #599bdc);
> -}
> -
> -/* overrides extra padding on button elements in Firefox */
> -.button::-moz-focus-inner {
> -    padding: 0;
> -    border: 0;
> -}
> -
> -/* ............................................................................................................. Icons */
> -
> -.button.icon:before {
> -    content: "";
> -    position: relative;
> -    top: 1px;
> -    float:left;
> -    width: 12px;
> -    height: 12px;
> -    margin: 0 0.75em 0 -0.25em;
> -    background: url(images/button-icons.png) 0 99px no-repeat;
> -}
> -
> -.button.arrowup.icon:before { background-position: 0 0; }
> -.button.arrowup.icon:hover:before,
> -.button.arrowup.icon:focus:before,
> -.button.arrowup.icon:active:before { background-position: -12px 0; }
> -
> -.button.arrowdown.icon:before { background-position: 0 -12px; }
> -.button.arrowdown.icon:hover:before,
> -.button.arrowdown.icon:focus:before,
> -.button.arrowdown.icon:active:before { background-position: -12px -12px; }
> -
> -.button.arrowleft.icon:before { background-position: 0 -24px; }
> -.button.arrowleft.icon:hover:before,
> -.button.arrowleft.icon:focus:before,
> -.button.arrowleft.icon:active:before { background-position: -12px -24px; }
> -
> -.button.arrowright.icon:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: 0 -36px; }
> -.button.arrowright.icon:hover:before,
> -.button.arrowright.icon:focus:before,
> -.button.arrowright.icon:active:before { background-position: -12px -36px; }
> -
> -.button.approve.icon:before { background-position: 0 -48px; }
> -.button.approve.icon:hover:before,
> -.button.approve.icon:focus:before,
> -.button.approve.icon:active:before { background-position: -12px -48px; }
> -
> -.button.add.icon:before { background-position: 0 -288px; }
> -.button.add.icon:hover:before,
> -.button.add.icon:focus:before,
> -.button.add.icon:active:before { background-position: -12px -288px; }
> -
> -.button.remove.icon:before { background-position: 0 -60px; }
> -.button.remove.icon:hover:before,
> -.button.remove.icon:focus:before,
> -.button.remove.icon:active:before { background-position: -12px -60px; }
> -
> -.button.log.icon:before { background-position: 0 -72px; }
> -.button.log.icon:hover:before,
> -.button.log.icon:focus:before,
> -.button.log.icon:active:before { background-position: -12px -72px; }
> -
> -.button.calendar.icon:before { background-position: 0 -84px; }
> -.button.calendar.icon:hover:before,
> -.button.calendar.icon:focus:before,
> -.button.calendar.icon:active:before { background-position: -12px -84px; }
> -
> -.button.chat.icon:before { background-position: 0 -96px; }
> -.button.chat.icon:hover:before,
> -.button.chat.icon:focus:before,
> -.button.chat.icon:active:before { background-position: -12px -96px; }
> -
> -.button.clock.icon:before { background-position: 0 -108px; }
> -.button.clock.icon:hover:before,
> -.button.clock.icon:focus:before,
> -.button.clock.icon:active:before { background-position: -12px -108px; }
> -
> -.button.settings.icon:before { background-position: 0 -120px; }
> -.button.settings.icon:hover:before,
> -.button.settings.icon:focus:before,
> -.button.settings.icon:active:before { background-position: -12px -120px; }
> -
> -.button.comment.icon:before { background-position: 0 -132px; }
> -.button.comment.icon:hover:before,
> -.button.comment.icon:focus:before,
> -.button.comment.icon:active:before { background-position: -12px -132px; }
> -
> -.button.fork.icon:before { background-position: 0 -144px; }
> -.button.fork.icon:hover:before,
> -.button.fork.icon:focus:before,
> -.button.fork.icon:active:before { background-position: -12px -144px; }
> -
> -.button.like.icon:before { background-position: 0 -156px; }
> -.button.like.icon:hover:before,
> -.button.like.icon:focus:before,
> -.button.like.icon:active:before { background-position: -12px -156px; }
> -
> -.button.favorite.icon:before { background-position: 0 -348px; }
> -.button.favorite.icon:hover:before,
> -.button.favorite.icon:focus:before,
> -.button.favorite.icon:active:before { background-position: -12px -348px; }
> -
> -.button.home.icon:before { background-position: 0 -168px; }
> -.button.home.icon:hover:before,
> -.button.home.icon:focus:before,
> -.button.home.icon:active:before { background-position: -12px -168px; }
> -
> -.button.key.icon:before { background-position: 0 -180px; }
> -.button.key.icon:hover:before,
> -.button.key.icon:focus:before,
> -.button.key.icon:active:before { background-position: -12px -180px; }
> -
> -.button.lock.icon:before { background-position: 0 -192px; }
> -.button.lock.icon:hover:before,
> -.button.lock.icon:focus:before,
> -.button.lock.icon:active:before { background-position: -12px -192px; }
> -
> -.button.unlock.icon:before { background-position: 0 -204px; }
> -.button.unlock.icon:hover:before,
> -.button.unlock.icon:focus:before,
> -.button.unlock.icon:active:before { background-position: -12px -204px; }
> -
> -.button.loop.icon:before { background-position: 0 -216px; }
> -.button.loop.icon:hover:before,
> -.button.loop.icon:focus:before,
> -.button.loop.icon:active:before { background-position: -12px -216px; }
> -
> -.button.search.icon:before { background-position: 0 -228px; }
> -.button.search.icon:hover:before,
> -.button.search.icon:focus:before,
> -.button.search.icon:active:before { background-position: -12px -228px; }
> -
> -.button.mail.icon:before { background-position: 0 -240px; }
> -.button.mail.icon:hover:before,
> -.button.mail.icon:focus:before,
> -.button.mail.icon:active:before { background-position: -12px -240px; }
> -
> -.button.move.icon:before { background-position: 0 -252px; }
> -.button.move.icon:hover:before,
> -.button.move.icon:focus:before,
> -.button.move.icon:active:before { background-position: -12px -252px; }
> -
> -.button.edit.icon:before { background-position: 0 -264px; }
> -.button.edit.icon:hover:before,
> -.button.edit.icon:focus:before,
> -.button.edit.icon:active:before { background-position: -12px -264px; }
> -
> -.button.pin.icon:before { background-position: 0 -276px; }
> -.button.pin.icon:hover:before,
> -.button.pin.icon:focus:before,
> -.button.pin.icon:active:before { background-position: -12px -276px; }
> -
> -.button.reload.icon:before { background-position: 0 -300px; }
> -.button.reload.icon:hover:before,
> -.button.reload.icon:focus:before,
> -.button.reload.icon:active:before { background-position: -12px -300px; }
> -
> -.button.rss.icon:before { background-position: 0 -312px; }
> -.button.rss.icon:hover:before,
> -.button.rss.icon:focus:before,
> -.button.rss.icon:active:before { background-position: -12px -312px; }
> -
> -.button.tag.icon:before { background-position: 0 -324px; }
> -.button.tag.icon:hover:before,
> -.button.tag.icon:focus:before,
> -.button.tag.icon:active:before { background-position: -12px -324px; }
> -
> -.button.trash.icon:before { background-position: 0 -336px; }
> -.button.trash.icon:hover:before,
> -.button.trash.icon:focus:before,
> -.button.trash.icon:active:before { background-position: -12px -336px; }
> -
> -.button.user.icon:before { background-position: 0 -360px; }
> -.button.user.icon:hover:before,
> -.button.user.icon:focus:before,
> -.button.user.icon:active:before { background-position: -12px -360px; }
> -
> -
> -/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */
> -
> -/* ............................................................................................................. Primary */
> -
> -.button.primary {
> -    font-weight: bold;
> -}
> -
> -/* ............................................................................................................. Danger */
> -
> -.button.danger {
> -    color: #900;
> -}
> -
> -.button.danger:hover,
> -.button.danger:focus,
> -.button.danger:active {
> -    border-color: #b53f3a;
> -    border-bottom-color: #a0302a;
> -    color: #fff;
> -    background-color: #dc5f59;
> -    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));
> -    background-image: -moz-linear-gradient(#dc5f59, #b33630);
> -    background-image: -o-linear-gradient(#dc5f59, #b33630);
> -    background-image: linear-gradient(#dc5f59, #b33630);
> -}
> -
> -.button.danger:active,
> -.button.danger.active {
> -    border-color: #a0302a;
> -    border-bottom-color: #bf4843;
> -    background-color: #b33630;
> -    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));
> -    background-image: -moz-linear-gradient(#b33630, #dc5f59);
> -    background-image: -o-linear-gradient(#b33630, #dc5f59);
> -    background-image: linear-gradient(#b33630, #dc5f59);
> -}
> -
> -/* ............................................................................................................. Pill */
> -
> -.button.pill {
> -    -webkit-border-radius: 50em;
> -    -moz-border-radius: 50em;
> -    border-radius: 50em;
> -}
> -
> -/* ............................................................................................................. Disable */
> -
> -.button.disable {
> -    opacity: 0.5;
> -}
> -
> -/* ............................................................................................................. Big */
> -
> -.button.big {
> -    font-size: 14px;
> -}
> -
> -.button.big.icon:before { top: 0; }
> -
> -
> -/* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */
> -
> -/* ............................................................................................................. Standard */
> -
> -.button-group {
> -    display: inline-block;
> -    list-style: none;
> -    padding: 0;
> -    margin: 0;
> -    /* IE hacks */
> -    zoom: 1;
> -    *display: inline;
> -}
> -
> -.button + .button,
> -.button + .button-group,
> -.button-group + .button,
> -.button-group + .button-group {
> -    margin-left: 15px;
> -}
> -
> -.button-group li {
> -    float: left;
> -    padding: 0;
> -    margin: 0;
> -}
> -
> -.button-group .button {
> -    float: left;
> -    margin-left: -1px;
> -}
> -
> -.button-group>  .button:not(:first-child):not(:last-child),
> -.button-group li:not(:first-child):not(:last-child) .button {
> -    -webkit-border-radius: 0;
> -    -moz-border-radius: 0;
> -    border-radius: 0;
> -}
> -
> -.button-group>  .button:first-child,
> -.button-group li:first-child .button {
> -    margin-left: 0;
> -    -webkit-border-top-right-radius: 0;
> -    -webkit-border-bottom-right-radius: 0;
> -    -moz-border-radius-topright: 0;
> -    -moz-border-radius-bottomright: 0;
> -    border-top-right-radius: 0;
> -    border-bottom-right-radius: 0;
> -}
> -
> -.button-group>  .button:last-child,
> -.button-group li:last-child>  .button {
> -    -webkit-border-top-left-radius: 0;
> -    -webkit-border-bottom-left-radius: 0;
> -    -moz-border-radius-topleft: 0;
> -    -moz-border-radius-bottomleft: 0;
> -    border-top-left-radius: 0;
> -    border-bottom-left-radius: 0;
> -}
> -
> -/* ............................................................................................................. Minor */
> -
> -.button-group.minor-group .button {
> -    border: 1px solid #d4d4d4;
> -    text-shadow: none;
> -    background-image: none;
> -    background-color: #fff;
> -}
> -
> -.button-group.minor-group .button:hover,
> -.button-group.minor-group .button:focus,
> -.button-group.minor-group .button:active {
> -    background-color: #599bdc;
> -}
> -
> -.button-group.minor-group .button:active,
> -.button-group.minor-group .button.active {
> -    background-color: #3072b3;
> -}
> -
> -.button-group.minor-group .button.icon:before {
> -    opacity: 0.8;
> -}
> -
> -/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */
> -/* For mixing buttons and button groups, e.g., in a navigation bar */
> -
> -.button-container .button,
> -.button-container .button-group {
> -    vertical-align: top;
> -}
> diff --git a/src/public/stylesheets/facebox.css b/src/public/stylesheets/facebox.css
> deleted file mode 100644
> index 1825bea..0000000
> --- a/src/public/stylesheets/facebox.css
> +++ /dev/null
> @@ -1,101 +0,0 @@
> -#facebox .b {
> -  background:url(../images/b.png);
> -}
> -
> -#facebox .tl {
> -  background:url(../images/tl.png);
> -}
> -
> -#facebox .tr {
> -  background:url(../images/tr.png);
> -}
> -
> -#facebox .bl {
> -  background:url(../images/bl.png);
> -}
> -
> -#facebox .br {
> -  background:url(../images/br.png);
> -}
> -
> -#facebox {
> -  position: absolute;
> -  top: 0;
> -  left: 0;
> -  z-index: 100;
> -  text-align: left;
> -}
> -
> -#facebox .popup {
> -  position: relative;
> -}
> -
> -#facebox table {
> -  border-collapse: collapse;
> -}
> -
> -#facebox td {
> -  border-bottom: 0;
> -  padding: 0;
> -}
> -
> -#facebox .body {
> -  background: #fff;
> -  width: 370px;
> -}
> -
> -#facebox .loading {
> -  text-align: center;
> -}
> -
> -#facebox .image {
> -  text-align: center;
> -}
> -
> -#facebox img {
> -  border: 0;
> -  margin: 0;
> -}
> -
> -#facebox .footer {
> -  padding-top: 0px;
> -  margin-top: 0px;
> -  text-align: right;
> -  display:none;
> -}
> -
> -#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
> -  height: 10px;
> -  width: 10px;
> -  overflow: auto;
> -  padding: 0;
> -}
> -
> -#facebox_overlay {
> -  position: fixed;
> -  top: 0px;
> -  left: 0px;
> -  height:100%;
> -  width:100%;
> -}
> -
> -.facebox_hide {
> -  z-index:-100;
> -}
> -
> -.facebox_overlayBG {
> -  background-color: #000;
> -  z-index: 99;
> -}
> -
> -* html #facebox_overlay { /* ie6 hack */
> -  position: absolute;
> -  height: expression(document.body.scrollHeight>  document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
> -}
> -
> -
> -.facebox_timfooter {
> -  background: url(../images/fb_footer.jpg) repeat-x;
> -  height: 37px;
> -  padding: 9px 9px 0 9px;
> -}
> diff --git a/src/public/stylesheets/layout.css b/src/public/stylesheets/layout.css
> deleted file mode 100644
> index c530bc6..0000000
> --- a/src/public/stylesheets/layout.css
> +++ /dev/null
> @@ -1,270 +0,0 @@
> -/* body */
> -/* line 9, ../../app/stylesheets/layout.scss */
> -html, body {
> -  height: 100%;
> -}
> -
> -/* line 11, ../../app/stylesheets/layout.scss */
> -body {
> -  background: url("../images/body-bg.png");
> -  font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -  font-size: 0.750em;
> -  /* 12px base */
> -  color: #333;
> -}
> -
> -/* line 18, ../../app/stylesheets/layout.scss */
> -strong, em, b, i {
> -  font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -}
> -
> -/* line 20, ../../app/stylesheets/layout.scss */
> -#primary-container {
> -  position: relative;
> -  min-height: 100%;
> -  margin-bottom: -60px;
> -}
> -
> -/* typography */
> -/* line 28, ../../app/stylesheets/layout.scss */
> -.label {
> -  font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
> -}
> -
> -/* line 32, ../../app/stylesheets/layout.scss */
> -.label.strong {
> -  font-weight: bold;
> -  color: #333;
> -}
> -
> -/* line 37, ../../app/stylesheets/layout.scss */
> -.label.small-caps {
> -  text-transform: uppercase;
> -  font-size: 0.917em;
> -}
> -
> -/* Query Inputs */
> -/* line 44, ../../app/stylesheets/layout.scss */
> -div.query-input {
> -  display: inline-block;
> -  background-image: -moz-linear-gradient(top, #d1d1d1, rgba(230, 230, 230, 0));
> -  background-image: -webkit-gradient(linear, left top, left bottom, from(#d1d1d1), to(rgba(230, 230, 230, 0)));
> -  -webkit-border-radius: 16px;
> -  -moz-border-radius: 16px;
> -  border-radius: 16px;
> -  padding: 3px;
> -}
> -
> -/* line 52, ../../app/stylesheets/layout.scss */
> -div.query-input input[type="text"] {
> -  display: inline;
> -  -webkit-border-radius: 16px;
> -  -moz-border-radius: 16px;
> -  border-radius: 16px;
> -  border: 1px solid #ccc;
> -  height: 23px;
> -  width: 180px;
> -  outline: none;
> -  padding: 0px 26px 0px 10px;
> -  margin: 0px;
> -  font-size: 12px;
> -}
> -
> -/* line 64, ../../app/stylesheets/layout.scss */
> -div.query-input input[type="submit"] {
> -  display: inline;
> -  background: transparent url("../images/button-search.png") no-repeat left center;
> -  color: transparent;
> -  border: 0px;
> -  width: 25px;
> -  height: 25px;
> -  margin-left: -25px;
> -  outline: none;
> -  cursor: pointer;
> -}
> -/* line 73, ../../app/stylesheets/layout.scss */
> -div.query-input input[type="submit"]:hover {
> -  background: transparent url("../images/button-search-over.png") no-repeat left center;
> -}
> -/* line 74, ../../app/stylesheets/layout.scss */
> -div.query-input input[type="submit"]:active {
> -  background: transparent url("../images/button-search-down.png") no-repeat left center;
> -}
> -
> -/* Content */
> -/* line 79, ../../app/stylesheets/layout.scss */
> -header#masthead {
> -  height: 49px;
> -  background-color: #E7E7E7;
> -  background: url("../images/masthead-bg.png") repeat-x;
> -  position: relative;
> -  margin-bottom: 22px;
> -}
> -/* line 86, ../../app/stylesheets/layout.scss */
> -header#masthead img#logo {
> -  position: absolute;
> -  top: 8px;
> -}
> -/* line 91, ../../app/stylesheets/layout.scss */
> -header#masthead div.container {
> -  margin: 0 auto;
> -  width: 960px;
> -  overflow: hidden;
> -  position: relative;
> -}
> -/* line 98, ../../app/stylesheets/layout.scss */
> -header#masthead a.user-dropdown {
> -  border: 1px solid #ccc;
> -  background: url("../images/button-userdrop.png") no-repeat center center;
> -  background: url("../images/button-userdrop.png") no-repeat center center, -moz-linear-gradient(top, rgba(239, 239, 239, 0), rgba(204, 204, 204, 0));
> -  background: url("../images/button-userdrop.png") no-repeat center center, -webkit-gradient(linear, left top, left bottom, color-stop(0, #efefef), color-stop(1, #cccccc));
> -  width: 46px;
> -  margin-left: 4px;
> -  padding: 5px 2px 5px 2px;
> -  color: transparent;
> -  font-size: 12px;
> -  /* match the font-size of the query box, for proper valign */
> -}
> -/* line 109, ../../app/stylesheets/layout.scss */
> -header#masthead a.user-dropdown:active {
> -  background: url("../images/button-userdrop.png") no-repeat center center;
> -  background: url("../images/button-userdrop.png") no-repeat center center, -moz-linear-gradient(top, rgba(232, 232, 232, 0), rgba(210, 210, 210, 0));
> -  background: url("../images/button-userdrop.png") no-repeat center center, -webkit-gradient(linear, left top, left bottom, color-stop(0, #e8e8e8), color-stop(1, #d2d2d2));
> -}
> -/* line 117, ../../app/stylesheets/layout.scss */
> -header#masthead nav#system {
> -  float: right;
> -  margin-top: 6px;
> -}
> -/* line 120, ../../app/stylesheets/layout.scss */
> -header#masthead nav#system ul {
> -  list-style: none;
> -}
> -/* line 122, ../../app/stylesheets/layout.scss */
> -header#masthead nav#system ul li {
> -  display: inline;
> -}
> -/* line 123, ../../app/stylesheets/layout.scss */
> -header#masthead nav#system ul li + li {
> -  margin-left: 10px;
> -}
> -/* line 124, ../../app/stylesheets/layout.scss */
> -header#masthead nav#system ul li.separator {
> -  background: url("../images/masthead-nav-separator.gif") no-repeat left top;
> -  padding: 8px 1px 8px 1px;
> -}
> -
> -/* Primary Nav */
> -/* line 136, ../../app/stylesheets/layout.scss */
> -nav#primary ul.container {
> -  width: 950px;
> -  margin: 0 auto;
> -  list-style: none;
> -  padding-left: 24px;
> -  height: 34px;
> -}
> -/* line 142, ../../app/stylesheets/layout.scss */
> -nav#primary ul.container li {
> -  float: left;
> -  position: relative;
> -  display: inline-block;
> -  background: url("../images/tab-inactive-right.png") no-repeat right top;
> -  height: 34px;
> -  margin-right: 6px;
> -  z-index: 1;
> -}
> -/* line 150, ../../app/stylesheets/layout.scss */
> -nav#primary ul.container li a {
> -  display: block;
> -  background: url("../images/tab-inactive-left.png") no-repeat left top;
> -  padding: 10px 16px 14px 16px;
> -  margin-left: -11px;
> -  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
> -  font-size: 12px;
> -  letter-spacing: 1px;
> -  font-weight: normal;
> -  text-transform: uppercase;
> -  text-decoration: none;
> -  font-weight: bold;
> -  color: #fff;
> -}
> -/* line 165, ../../app/stylesheets/layout.scss */
> -nav#primary ul.container li.active {
> -  margin-top: -5px;
> -  background: url("../images/tab-active-right.png") no-repeat right top;
> -  z-index: 1000;
> -  height: 43px;
> -}
> -/* line 170, ../../app/stylesheets/layout.scss */
> -nav#primary ul.container li.active a {
> -  background: url("../images/tab-active-left.png") no-repeat left top;
> -  padding: 12px 20px 12px 20px;
> -  font-size: 16px;
> -  color: #666;
> -}
> -/* line 177, ../../app/stylesheets/layout.scss */
> -nav#primary ul.container li + li {
> -  margin-right: 6px;
> -}
> -
> -/* Content */
> -/* line 187, ../../app/stylesheets/layout.scss */
> -div#content {
> -  width: 946px;
> -  margin: 0 auto;
> -  margin-bottom: 98px;
> -  height: 200px;
> -  -webkit-border-radius: 7px;
> -  -moz-border-radius: 7px;
> -  border-radius: 7px;
> -  background-color: #FAFAFA;
> -  padding: 7px;
> -  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
> -  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
> -  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
> -  border: 1px solid #999;
> -}
> -/* line 200, ../../app/stylesheets/layout.scss */
> -div#content div.header {
> -  background-color: #ccc;
> -  height: 60px;
> -}
> -
> -/* Footer */
> -/* line 209, ../../app/stylesheets/layout.scss */
> -footer.standard {
> -  background: rgba(0, 0, 0, 0.12);
> -  position: relative;
> -  height: 40px;
> -  width: 100%;
> -  clear: both;
> -}
> -/* line 217, ../../app/stylesheets/layout.scss */
> -footer.standard div.container {
> -  margin: 0 auto;
> -  width: 946px;
> -  background: rgba(0, 0, 0, 0.12);
> -  height: 36px;
> -  position: relative;
> -  padding: 26px 8px 0px 8px;
> -  top: -20px;
> -}
> -/* line 227, ../../app/stylesheets/layout.scss */
> -footer.standard img.logo {
> -  float: right;
> -}
> -/* line 231, ../../app/stylesheets/layout.scss */
> -footer.standard span.copyright {
> -  font-size: 10px;
> -  display: inline-block;
> -  color: #666;
> -}
> -/* line 237, ../../app/stylesheets/layout.scss */
> -footer.standard nav.footer {
> -  display: inline-block;
> -}
> -/* line 239, ../../app/stylesheets/layout.scss */
> -footer.standard nav.footer a {
> -  color: #fff;
> -  padding-right: 6px;
> -}
> diff --git a/src/public/stylesheets/layout_ie7.css b/src/public/stylesheets/layout_ie7.css
> index b8290e1..db85095 100644
> --- a/src/public/stylesheets/layout_ie7.css
> +++ b/src/public/stylesheets/layout_ie7.css
> @@ -3,7 +3,7 @@ dl.alerts li.alert{ margin-bottom: 5px; }
>   dl.alerts li.alert dt, dl.alerts li.alert dd{ display: inline; }
>
>   /* add proper spacing to the catalog dropdown button on pools#show */
> -#obj_actions .catalog_link {
> +.obj_actions .catalog_link {
>     margin-right: 5px;
>   }
>
> diff --git a/src/public/stylesheets/reset.css b/src/public/stylesheets/reset.css
> deleted file mode 100644
> index 885707c..0000000
> --- a/src/public/stylesheets/reset.css
> +++ /dev/null
> @@ -1,171 +0,0 @@
> -/* `XHTML, HTML4, HTML5 Reset
> -----------------------------------------------------------------------------------------------------*/
> -
> -a,
> -abbr,
> -acronym,
> -address,
> -applet,
> -article,
> -aside,
> -audio,
> -b,
> -big,
> -blockquote,
> -body,
> -canvas,
> -caption,
> -center,
> -cite,
> -code,
> -dd,
> -del,
> -details,
> -dfn,
> -dialog,
> -div,
> -dl,
> -dt,
> -em,
> -embed,
> -fieldset,
> -figcaption,
> -figure,
> -font,
> -footer,
> -form,
> -h1,
> -h2,
> -h3,
> -h4,
> -h5,
> -h6,
> -header,
> -hgroup,
> -hr,
> -html,
> -i,
> -iframe,
> -img,
> -ins,
> -kbd,
> -label,
> -legend,
> -li,
> -mark,
> -menu,
> -meter,
> -nav,
> -object,
> -ol,
> -output,
> -p,
> -pre,
> -progress,
> -q,
> -rp,
> -rt,
> -ruby,
> -s,
> -samp,
> -section,
> -small,
> -span,
> -strike,
> -strong,
> -sub,
> -summary,
> -sup,
> -table,
> -tbody,
> -td,
> -tfoot,
> -th,
> -thead,
> -time,
> -tr,
> -tt,
> -u,
> -ul,
> -var,
> -video,
> -xmp {
> -  border: 0;
> -  margin: 0;
> -  padding: 0;
> -  font-size: 100%;
> -}
> -
> -html,
> -body {
> -  height: 100%;
> -}
> -
> -article,
> -aside,
> -details,
> -figcaption,
> -figure,
> -footer,
> -header,
> -hgroup,
> -menu,
> -nav,
> -section {
> -/*
> -  Override the default (display: inline) for
> -  browsers that do not recognize HTML5 tags.
> -
> -  IE8 (and lower) requires a shiv:
> -  http://ejohn.org/blog/html5-shiv
> -*/
> -  display: block;
> -}
> -
> -b,
> -strong {
> -/*
> -  Makes browsers agree.
> -  IE + Opera = font-weight: bold.
> -  Gecko + WebKit = font-weight: bolder.
> -*/
> -  font-weight: bold;
> -}
> -
> -img {
> -  color: transparent;
> -  font-size: 0;
> -  vertical-align: middle;
> -/*
> -  For IE.
> -  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
> -*/
> -  -ms-interpolation-mode: bicubic;
> -}
> -
> -li {
> -/*
> -  For IE6 + IE7.
> -*/
> -  display: list-item;
> -}
> -
> -table {
> -  border-collapse: collapse;
> -  border-spacing: 0;
> -}
> -
> -th,
> -td,
> -caption {
> -  font-weight: normal;
> -  vertical-align: top;
> -  text-align: left;
> -}
> -
> -svg {
> -/*
> -  For IE9.
> -*/
> -  overflow: hidden;
> -}
> \ No newline at end of file
ACK, everything looks good and everything appears to be running as expected.


Brian



More information about the aeolus-devel mailing list