Issue #23607: Merged in changes from 4_5_x
authorLinda Nichols <lynnaloo@gmail.com>
Tue, 3 Jun 2014 15:51:22 +0000 (15:51 +0000)
committerLinda Nichols <lynnaloo@gmail.com>
Tue, 3 Jun 2014 15:51:22 +0000 (15:51 +0000)
1  2 
lib/enyo-x/source/stylesheets/screen.css

@@@ -1993,483 -1993,437 +1993,515 @@@ body 
    border: none;
  }
  /**
 -  Styles relating to Lists
 -*/
 -.xv-list-header {
 -  background-color: #d8d8d8;
 -  color: #fdfdfd;
 -  font-size: .6em;
 -  font-weight: bold;
 -  text-transform: uppercase;
 -  padding-top: 4px;
 -  padding-bottom: 4px;
 -  border-bottom: 1px solid #aaaaaa;
 + * Default ListItem styles when using a ModelDecorator.
 + */
 +.xv-list .xv-model-decorator > .xv-list-item .xv-table {
 +  display: table;
 +  width: 100%;
 +  table-layout: fixed;
  }
 -.xv-list-header .xv-list-column.last {
 -  border-right: none;
 +.xv-list .xv-model-decorator > .xv-list-item .xv-table .xv-cell {
 +  display: table-cell;
  }
 -.xv-list-header .xv-list-column.name-column,
 -.xv-list-header .xv-list-column.first,
 -.xv-list-header .xv-list-column.second,
 -.xv-list-header .xv-list-column.third,
 -.xv-list-header .xv-list-column.short,
 -.xv-list-header .xv-list-column.small,
 -.xv-list-header .xv-list-column.medium,
 -.xv-list-header .xv-list-column.descr {
 -  padding-left: 7px;
 +.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr {
 +  /**
 +        * Default styling for a model's id (as designated by 'idAttribute')
 +        */
  }
 -/* List */
 -.xv-list-column.line-number {
 -  width: 30px;
 -  text-align: right;
 +.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attribute-id {
 +  color: blue;
 +  font-weight: bold;
 +  cursor: pointer;
  }
 -.xv-list-column.name-column {
 -  width: 200px;
 +.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attribute-name {
 +  font-weight: bold;
  }
 -.xv-list-column.right-column {
 -  width: 100px;
 +.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-number {
    text-align: right;
  }
 -.xv-list-column.short {
 -  width: 100px;
 +.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-money {
 +  text-align: right;
  }
 -.xv-list-column.small {
 -  width: 125px;
 +.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-date {
 +  text-align: right;
  }
 -.xv-list-column.medium {
 -  width: 150px;
 +.xv-list .xv-model-decorator > .xv-list-item.item-selected .xv-list-attr {
 +  color: white;
  }
 -.xv-list-column.first {
 -  width: 300px;
 +.xv-list .xv-model-decorator > .xv-list-item.item-selected .xv-list-attr.xm-attribute-id {
 +  color: #ff6529;
  }
 -.xv-list-column.second {
 -  width: 200px;
 +/**
 +  Styles related to pickers, combo boxes, and relation widgets
 +*/
 +.onyx-picker-decorator .onyx-button {
 +  padding: 12px 8px 12px 8px;
 +  width: 150px;
  }
 -.xv-list-column.third {
 -  width: 100px;
 +.onyx-picker .onyx-menu-item {
 +  text-align: left;
 +  text-overflow: ellipsis;
  }
 -.xv-list-column.money,
 -.xv-list-column.quantity {
 -  width: 75px;
 -  text-align: right;
 +.picker-icon {
 +  position: absolute;
 +  right: 0;
 +  margin: 0 10px 0 2px;
 +  color: #070707;
  }
 -.xv-list-column.descr {
 -  width: 200px;
 +.xv-picker-button {
 +  text-align: left;
  }
 -.xv-list-column.icon {
 -  width: 10px;
 +.xv-picker-button .picker-content {
 +  max-width: 100px;
 +  overflow: hidden;
  }
 -.xv-list {
 -  background: #f8f8f8;
 +.xv-picker-button.disabled {
 +  color: #777777;
  }
 -.xv-list .xv-list-item > * {
 -  display: inline-block;
 -  vertical-align: middle;
 +.xv-picker-label {
 +  color: #070707;
 +  padding: 20px 8px 8px 8px;
 +  text-align: right;
 +  width: 130px;
  }
 -.xv-list .xv-list-item {
 -  background-color: #fdfdfd;
 -  border-bottom: 1px solid #d7d7d7;
 -  min-height: 32px;
 +.xv-picker-label.disabled {
 +  color: #777777;
  }
 -.xv-list .xv-list-item.header {
 -  padding-top: 0;
 +.xv-combobox .onyx-input-decorator input {
 +  width: 145px;
  }
 -.xv-list .xv-list-item.inactive {
 -  background-color: #d8d8d8;
 -  color: #070707;
 +.xv-combobox .icon-sort {
 +  color: #357ec7;
 +  vertical-align: middle;
  }
 -.xv-list .xv-list-item.inactive .xv-list-column .xv-list-attr {
 -  background: transparent;
 +.xv-combobox-note {
 +  padding: 14px 3px 8px 3px;
 +  text-align: left;
  }
 -.xv-list .xv-list-item.inactive .xv-list-column .xv-list-attr.placeholder {
 -  color: #d8d8d8;
 +/*
 +  Styles relating to the grid box
 +*/
 +/* Entire box including the grid and the summary panel */
 +.xv-grid-box {
 +  /**
 +    This is the most general grid row that
 +    is not specific to read-only or selected
 +  */
  }
 -.xv-list .xv-list-item .xv-list-column .list-icon {
 -  padding: 2px;
 -  color: #666666;
 -  vertical-align: sub;
 -  border: 1px solid #efefef;
 -  -webkit-border-radius: 2px;
 -  -moz-border-radius: 2px;
 -  border-radius: 2px;
 +.xv-grid-box.small-panel {
 +  width: 600px;
  }
 -.xv-list .xv-list-item.item-selected {
 -  background: #226b9a;
 -  background-color: #1f608c;
 -  background-image: -moz-linear-gradient(top, #226b9a, #1a4f77);
 -  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#226b9a), to(#1a4f77));
 -  background-image: -webkit-linear-gradient(top, #226b9a, #1a4f77);
 -  background-image: -o-linear-gradient(top, #226b9a, #1a4f77);
 -  background-image: linear-gradient(to bottom, #226b9a, #1a4f77);
 -  background-repeat: repeat-x;
 -  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff226b9a', endColorstr='#ff1a4f77', GradientType=0);
 +.xv-grid-box.medium-panel {
 +  width: 700px;
  }
 -.xv-list .xv-list-item.item-selected .xv-list-attr {
 -  color: #fdfdfd;
 +.xv-grid-box.large-panel {
 +  width: 800px;
  }
 -.xv-list .xv-list-item.item-selected .xv-list-attr.placeholder {
 -  font-style: italic;
 -  color: #99ccff;
 +.xv-grid-box .enyo-list-page > *:first-child .xv-grid-row {
 +  border-top: 0;
  }
 -.xv-list .xv-list-item.item-selected .xv-list-attr.hyperlink {
 -  color: #ff6529;
 +.xv-grid-box .xv-above-grid-list {
 +  border: 0;
  }
 -.xv-list .xv-list-item.item-selected .xv-list-attr.header {
 -  background: #99ccff;
 +.xv-grid-box .xv-scroller {
 +  background: #f8f8f8;
  }
 -.xv-list .xv-list-item .xv-list-item-gear {
 -  position: absolute;
 -  right: 0px;
 -  z-index: 999;
 +.xv-grid-box .xv-grid-attr {
 +  overflow: hidden;
 +  display: -webkit-box;
 +  -webkit-line-clamp: 3;
 +  -webkit-box-orient: vertical;
  }
 -.xv-list.xv-grid-list {
 -  background: #f8f8f8;
 +.xv-grid-box .xv-grid-attr.bold {
 +  font-weight: bold;
  }
 -.xv-list.xv-grid-list .xv-list-item > * {
 -  vertical-align: top;
 +.xv-grid-box .xv-grid-attr.error {
 +  color: #ff0000;
  }
 -.xv-list.xv-grid-list .xv-list-item {
 -  padding-top: 7px !important;
 -  padding-bottom: 9px !important;
 -  border-bottom: 1px solid #aaaaaa !important;
 -  background: #f8f8f8;
 +.xv-grid-box .xv-grid-attr.emphasis {
 +  color: #009000;
  }
 -.xv-list.xv-grid-list .xv-list-item.item-selected {
 -  background: #226b9a;
 -  background-color: #1f608c;
 -  background-image: -moz-linear-gradient(top, #226b9a, #1a4f77);
 -  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#226b9a), to(#1a4f77));
 -  background-image: -webkit-linear-gradient(top, #226b9a, #1a4f77);
 -  background-image: -o-linear-gradient(top, #226b9a, #1a4f77);
 -  background-image: linear-gradient(to bottom, #226b9a, #1a4f77);
 -  background-repeat: repeat-x;
 -  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff226b9a', endColorstr='#ff1a4f77', GradientType=0);
 +.xv-grid-box .xv-grid-attr.warn {
 +  color: #ff9c00;
  }
 -.xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr {
 -  color: #fdfdfd;
 +.xv-grid-box .xv-grid-attr.italic {
 +  font-style: italic;
  }
 -.xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr.placeholder {
 +.xv-grid-box .xv-grid-attr.placeholder {
    font-style: italic;
 -  color: #99ccff;
 +  color: #93a1a1;
  }
 -.xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr.hyperlink {
 -  color: #ff6529;
 +.xv-grid-box .xv-grid-attr.hyperlink {
 +  color: blue;
  }
 -.xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr.header {
 -  background: #99ccff;
 +.xv-grid-box .xv-gridbox-button {
 +  color: #357ec7;
 +  font-size: 18px;
 +  border: none;
 +  background: transparent;
  }
 -.xv-list.xv-grid-list .xv-list-item .xv-list-column {
 +.xv-grid-box .xv-grid-row {
 +  font-size: 12px;
 +  background-color: #d8d8d8;
 +  border-bottom: 1px solid #aaaaaa;
    vertical-align: top;
 +  /**
 +      This is the grid header row
 +    */
  }
 -.xv-list.xv-grid-list .xv-list-item .xv-list-column .xv-list-attr {
 -  font-size: 12px;
 +.xv-grid-box .xv-grid-row > * {
 +  display: inline-block;
  }
 -.xv-list.xv-grid-list .xv-list-item .xv-list-column.last {
 -  border-right: none;
 +.xv-grid-box .xv-grid-row .xv-grid-header {
 +  background-color: #d7d7d7;
 +  color: #0e0e0e;
 +  font-size: .8em;
 +  font-weight: bold;
 +  text-transform: uppercase;
 +  padding-top: 4px;
  }
 -.xv-list.xv-grid-list .xv-list-item .xv-list-column.name-column {
 -  padding-left: 7px;
 +.xv-grid-box .xv-grid-row .xv-grid-header.last {
 +  border-right: none;
  }
 -.xv-list.xv-grid-list .xv-list-item .xv-list-column.first {
 -  padding-left: 7px;
 +.xv-grid-box .xv-grid-row > * {
 +  padding: 6px 4px;
 +  border: none;
  }
 -.xv-list.xv-grid-list .xv-list-item .xv-list-column.second {
 -  padding-left: 7px;
 +.xv-grid-box .xv-grid-row .line-number {
 +  vertical-align: top;
 +  width: 30px;
 +  text-align: right;
  }
 -.xv-list.xv-grid-list .xv-list-item .xv-list-column.third {
 -  padding-left: 7px;
 +.xv-grid-box .xv-grid-row .grid-actions {
 +  display: block;
 +  padding-left: 30px;
 +  border-radius: 4px;
 +  border-width: 0;
 +  background: #f3f3f3;
 +  margin: 6px;
  }
 -.xv-list.xv-grid-list .xv-list-item .xv-list-column.short {
 -  padding-left: 7px;
 +.xv-grid-box .xv-grid-row .grid-actions > * {
 +  display: inline-block;
 +  width: 100%;
  }
 -.xv-list.xv-grid-list .xv-list-item .xv-list-column.small {
 -  padding-left: 7px;
 +.xv-grid-box .xv-grid-row .grid-item {
 +  vertical-align: top;
 +  width: 175px;
  }
 -.xv-list.xv-grid-list .xv-list-item .xv-list-column.medium {
 -  padding-left: 7px;
 +.xv-grid-box .xv-grid-row .quantity {
 +  vertical-align: top;
 +  text-align: right;
 +  width: 100px;
  }
 -.xv-list.xv-grid-list .xv-list-item .xv-list-column.descr {
 -  padding-left: 7px;
 +.xv-grid-box .xv-grid-row .percent {
 +  vertical-align: top;
 +  text-align: right;
 +  width: 90px;
  }
 -.xv-list.xv-grid-list .xv-list-item .xv-list-column .xv-list-attr {
 -  padding: 0px;
 +.xv-grid-box .xv-grid-row .price {
 +  vertical-align: top;
 +  text-align: right;
 +  width: 90px;
  }
 -.xv-list-attr {
 -  padding: 5px;
 -  font-size: .8em;
 -  white-space: nowrap;
 -  overflow: hidden;
 -  text-overflow: ellipsis;
 -  color: #070707;
 +.xv-grid-box .xv-grid-row .date {
 +  vertical-align: top;
 +  width: 105px;
  }
 -.xv-list-attr.header {
 -  padding: 4px;
 -  background: #d8d8d8;
 -  font-size: .7em;
 -  font-weight: bold;
 -  text-transform: uppercase;
 -  color: #fdfdfd;
 +.xv-grid-box .xv-grid-row .user {
 +  vertical-align: top;
 +  width: 100px;
  }
 -.xv-list-attr.footer {
 -  padding: 4px;
 -  background: #d8d8d8;
 -  font-size: .7em;
 -  font-weight: bold;
 -  text-transform: uppercase;
 -  color: #070707;
 +.xv-grid-box .xv-grid-row.readonly {
 +  background: #f8f8f8;
 +  min-height: 56px;
  }
 -.xv-list-attr.right {
 -  position: absolute;
 -  right: 10px;
 +.xv-grid-box .xv-grid-row.selected {
 +  background-color: #fdfdfd;
 +  border: 1px solid #ff6529;
  }
 -.xv-list-attr.text-align-right {
 -  text-align: right;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .onyx-input-decorator {
 +  padding: 0;
 +  width: 100%;
 +  margin: 0;
  }
 -.xv-list-attr.bold {
 -  font-weight: bold;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .onyx-input-decorator input {
 +  width: 100%;
 +  font-size: 13px;
  }
 -.xv-list-attr.error {
 -  color: #ff0000;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .onyx-picker-decorator {
 +  padding-top: 6px;
 +  width: 100%;
  }
 -.xv-list-attr.emphasis {
 -  color: #009000;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .onyx-picker-decorator .onyx-button {
 +  height: 26px;
 +  padding-top: 3px;
 +  width: 100%;
 +  font-size: 13px;
  }
 -.xv-list-attr.warn {
 -  color: #ff9c00;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-input {
 +  border: none;
  }
 -.xv-list-attr.italic {
 -  font-style: italic;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-picker-label {
 +  display: none;
  }
 -.xv-list-attr.placeholder {
 -  font-style: italic;
 -  color: #777777;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-datewidget {
 +  margin-right: 10px;
 +  padding-top: 0;
  }
 -.xv-list-attr.hyperlink {
 -  color: blue;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-datewidget .onyx-input-decorator {
 +  padding: 0;
 +  width: 100%;
  }
 -.xv-list-attr.disabled {
 -  color: #777777;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-datewidget .onyx-input-decorator input {
 +  width: 85%;
 +  font-size: 13px;
  }
 -/* Navigator */
 -.xv-navigator-header {
 -  font-size: small;
 -  font-weight: bold;
 -  text-transform: uppercase;
 -  color: #ff6600;
 -  padding-left: 20px;
 -  border-bottom: 1px solid #0e0e0e;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-numberwidget {
 +  padding-top: 6px;
  }
 -.xv-workspace-header {
 -  color: #fdfdfd;
 -  white-space: nowrap;
 -  overflow: hidden;
 -  text-overflow: ellipsis;
 -  padding: 8px 0 0 8px;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-numberwidget .onyx-input-decorator {
 +  padding: 0;
 +  width: 100%;
 +  margin: 0;
  }
 -/**
 - * Default ListItem styles when using a ModelDecorator.
 - */
 -.xv-list .xv-model-decorator > .xv-list-item .xv-table {
 -  display: table;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-numberwidget .onyx-input-decorator input {
    width: 100%;
 -  table-layout: fixed;
 +  font-size: 13px;
  }
 -.xv-list .xv-model-decorator > .xv-list-item .xv-table .xv-cell {
 -  display: table-cell;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-combobox {
 +  padding-left: 0;
  }
 -.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr {
 -  /**
 -        * Default styling for a model's id (as designated by 'idAttribute')
 -        */
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-combobox input {
 +  padding-top: 3px;
 +  width: 80px;
 +  font-size: 13px;
  }
 -.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attribute-id {
 -  color: blue;
 -  font-weight: bold;
 -  cursor: pointer;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-moneywidget {
 +  padding-bottom: 0;
  }
 -.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attribute-name {
 -  font-weight: bold;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-moneywidget .onyx-input-decorator {
 +  padding: 0;
 +  width: 100%;
 +  margin: 0;
  }
 -.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-number {
 -  text-align: right;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-moneywidget .onyx-input-decorator input {
 +  width: 100%;
 +  font-size: 13px;
  }
 -.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-money {
 -  text-align: right;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget .onyx-input-decorator {
 +  width: 100%;
 +  padding-top: 6px;
  }
 -.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-date {
 -  text-align: right;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget .onyx-input {
 +  width: 85%;
 +  padding-right: 4px;
  }
 -.xv-list .xv-model-decorator > .xv-list-item.item-selected .xv-list-attr {
 -  color: white;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-useraccount-widget .xv-subinput {
 +  width: 80px;
 +  height: 16px;
  }
 -.xv-list .xv-model-decorator > .xv-list-item.item-selected .xv-list-attr.xm-attribute-id {
 -  color: #ff6529;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-subinput {
 +  width: 100%;
  }
 -/**
 -  Styles related to pickers, combo boxes, and relation widgets
 -*/
 -.onyx-picker-decorator .onyx-button {
 -  padding: 12px 8px 12px 8px;
 -  width: 150px;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-input {
 +  padding-top: 6px;
 +  width: 100%;
 +  border: none;
  }
 -.onyx-picker .onyx-menu-item {
 -  text-align: left;
 -  text-overflow: ellipsis;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-label,
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-flexible-label,
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget-secondarydescription {
 +  display: none;
  }
 -.picker-icon {
 -  position: absolute;
 -  right: 0;
 -  margin: 0 10px 0 2px;
 -  color: #070707;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget-description {
 +  margin: 0;
 +  margin-top: 5px;
  }
 -.xv-picker-button {
 -  text-align: left;
 +.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-private-item-site-widget {
 +  border-bottom: 0;
  }
 -.xv-picker-button .picker-content {
 -  max-width: 100px;
 -  overflow: hidden;
 +.xv-grid-box.xv-groupbox .xv-sales-summary-panel {
 +  border: none;
 +  margin-top: 0;
 +  padding-left: 0;
 +  padding-right: 0;
  }
 -.xv-picker-button.disabled {
 -  color: #777777;
 +.xv-grid-box.xv-groupbox .xv-sales-summary-panel .xv-sales-summary-total-group {
 +  padding: 0;
 +  border: none;
  }
 -.xv-picker-label {
 -  color: #070707;
 -  padding: 20px 8px 8px 8px;
 -  text-align: right;
 -  width: 130px;
 +.xv-grid-box.xv-groupbox .xv-sales-summary-panel .xv-sales-summary-total-group .xv-moneywidget {
 +  padding-bottom: 0;
 +  padding-top: 0;
  }
 -.xv-picker-label.disabled {
 -  color: #777777;
 +.xv-grid-box.xv-groupbox .xv-sales-summary-panel .xv-sales-summary-total-group .xv-moneywidget .xv-input-decorator {
 +  padding-bottom: 0;
 +  padding-top: 0;
  }
 -.xv-combobox .onyx-input-decorator input {
 -  width: 145px;
 +.xv-grid-box.xv-groupbox .xv-sales-summary-panel .xv-sales-summary-total-group .xv-numberwidget {
 +  padding-bottom: 0;
 +  padding-top: 0;
  }
 -.xv-combobox .icon-sort {
 -  color: #357ec7;
 -  vertical-align: middle;
 +.xv-grid-box.xv-groupbox .xv-sales-summary-panel .xv-sales-summary-total-group .xv-numberwidget .xv-input-decorator {
 +  width: 163px;
 +  padding-bottom: 0;
 +  padding-top: 0;
  }
 -.xv-combobox-note {
 -  padding: 14px 3px 8px 3px;
 -  text-align: left;
 +.xv-grid-list .xv-list-column {
 +  vertical-align: top !important;
  }
  /*
 -  Styles relating to the grid box
 +  Styles relating to the dashboard
  */
 -/* Entire box including the grid and the summary panel */
 -.xv-grid-box {
 -  /**
 -    This is the most general grid row that
 -    is not specific to read-only or selected
 +/*
 +  Variables for widths/colors
 +*/
 +.dashboard {
 +  background-color: #d8d8d8;
 +  /*
 +    These styles will only be used
 +    if the chart is in a dashboard
    */
  }
 -.xv-grid-box.small-panel {
 -  width: 600px;
 +.dashboard .charts-panels {
 +  overflow-y: auto;
  }
 -.xv-grid-box.medium-panel {
 -  width: 700px;
 +.dashboard .selectable-chart {
 +  width: 500px;
 +  height: 230px;
  }
 -.xv-grid-box.large-panel {
 -  width: 800px;
 +.dashboard .selectable-chart .chart-title-bar {
 +  width: 500px;
  }
 -.xv-grid-box .enyo-list-page > *:first-child .xv-grid-row {
 -  border-top: 0;
 +.dashboard .nvtooltip {
 +  color: black;
  }
 -.xv-grid-box .xv-above-grid-list {
 -  border: 0;
 +.selectable-chart {
 +  margin: 10px;
 +  color: #357ec7;
 +  overflow: hidden;
++  /*  The chart-filters may not be need as we are using the class xv-pullout
++      for styles.  Delete when finished hacking the filter styles.
++
++  .chart-filters {
++        background-color: @white;
++        
++        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
++        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
++        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
++  }
++  
++  .chart-filters .xv-parameter-panel {
++        background-color: @ghost;
++        border: 1px solid @smoke;
++        margin: 0 4px 6px 0;
++        width: 100%;
++  }
++  
++  .chart-filters.xv-parameter-panel .onyx-groupbox-header {
++        padding: 6px 10px;
++        border-bottom: 1px solid @smoke;
++        background: @lightest-gray;
++        color: @near-black;
++  }
++
++  .chart-filters.xv-parameter-panel .enyo-fittable-columns-layout {
++        border-bottom: 1px solid @smoke;
++        background: @white;
++    color: @near-black;
++    position: relative;
++    text-align: left;
++    white-space: nowrap;
++  }
++
++  .chart-filters.xv-parameter-panel .enyo-fittable-columns-layout > * {
++    vertical-align: middle;
++  }
++
++  .chart-filters.xv-parameter-panel .xv-label {
++    text-align: right;
++  }
++  
++  */
  }
 -.xv-grid-box .xv-scroller {
 -  background: #f8f8f8;
 +.selectable-chart .xv-list-item {
 +  border-bottom: 1px solid grey;
 +  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  }
 -.xv-grid-box .xv-grid-attr.bold {
 -  font-weight: bold;
 +.selectable-chart .xv-list-item .long {
 +  padding-left: 7px;
 +  width: 250px;
  }
 -.xv-grid-box .xv-grid-attr.error {
 -  color: #ff0000;
 +.selectable-chart .onyx-popup {
 +  margin-top: 40px;
 +  margin-left: 200px;
  }
 -.xv-grid-box .xv-grid-attr.emphasis {
 -  color: #009000;
 +.selectable-chart .chart-title-bar {
-   height: 32px;
++  height: 48px;
 +  background-color: #efefef;
++  text-transform: none;
 +  -webkit-border-top-right-radius: 10px;
 +  -moz-border-radius-topright: 10px;
 +  border-top-right-radius: 10px;
 +  -webkit-border-top-left-radius: 10px;
 +  -moz-border-radius-topleft: 10px;
 +  border-top-left-radius: 10px;
  }
 -.xv-grid-box .xv-grid-attr.warn {
 -  color: #ff9c00;
 +.selectable-chart .chart-title-bar .chart-title {
 +  padding-top: 8px;
 +  color: #070707;
 +  text-align: center;
 +  /*font-size: 2em;*/
 +  font-weight: normal;
++  font-family: Helvetica;
+ }
 -.xv-grid-box .xv-grid-attr.italic {
 -  font-style: italic;
++.selectable-chart .chart-title-bar .chart-sub-title {
++  /*padding-top: 8px;*/
++  color: #0000ff;
++  text-align: center;
++  font-size: small;
++  font-weight: normal;
++  font-family: Helvetica;
 +}
 +.selectable-chart .chart-title-bar .remove-icon {
 +  position: absolute;
 +  top: 0;
 +  right: 0;
 +}
 +.selectable-chart .chart-title-bar .icon-filter {
 +  color: #070707;
 +  position: absolute;
 +  right: 35px;
 +}
 +.selectable-chart .chart-bottom {
 +  background-color: #fdfdfd;
 +  border: 1px solid #444444;
 +  border-top: none;
 +  -webkit-border-bottom-right-radius: 10px;
 +  -moz-border-radius-bottomright: 10px;
 +  border-bottom-right-radius: 10px;
 +  -webkit-border-bottom-left-radius: 10px;
 +  -moz-border-radius-bottomleft: 10px;
 +  border-bottom-left-radius: 10px;
  }
 -.xv-grid-box .xv-grid-attr.placeholder {
 -  font-style: italic;
 -  color: #93a1a1;
 +.selectable-chart .chart-bottom .xv-picker-label {
 +  width: 100px;
 +  color: #070707;
  }
 -.xv-grid-box .xv-grid-attr.hyperlink {
 -  color: blue;
 +.selectable-chart .chart-bottom .onyx-button {
 +  width: 130px;
 +  padding: 10px 10px;
  }
- .selectable-chart .chart-filters {
-   background-color: #fdfdfd;
-   -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
-   -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
-   box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
- }
- .selectable-chart .chart-filters .xv-parameter-panel {
-   background-color: #f8f8f8;
-   border: 1px solid #d7d7d7;
-   margin: 0 4px 6px 0;
-   width: 100%;
- }
- .selectable-chart .chart-filters.xv-parameter-panel .onyx-groupbox-header {
-   padding: 6px 10px;
-   border-bottom: 1px solid #d7d7d7;
-   background: #efefef;
-   color: #0e0e0e;
- }
- .selectable-chart .chart-filters.xv-parameter-panel .enyo-fittable-columns-layout {
-   padding: 6px 10px;
-   border-bottom: 1px solid #d7d7d7;
-   background: #fdfdfd;
-   color: #0e0e0e;
 -.xv-grid-box .xv-gridbox-button {
 -  color: #357ec7;
 -  font-size: 18px;
 -  border: none;
 -  background: transparent;
++.selectable-chart .chart-filterDrawer {
++  top: 0px;
  }
 -.xv-grid-box .xv-grid-row {
 -  font-size: 12px;
 +/**
 +  Styles relating to Lists
 +*/
 +.xv-list-header {
    background-color: #d8d8d8;
 -  border-bottom: 1px solid #aaaaaa;
 -  vertical-align: top;
 -  /**
 -      This is the grid header row
 -    */
 -}
 -.xv-grid-box .xv-grid-row > * {
 -  display: inline-block;
 -}
 -.xv-grid-box .xv-grid-row .xv-grid-header {
 -  background-color: #d7d7d7;
 -  color: #0e0e0e;
 -  font-size: .8em;
 +  color: #fdfdfd;
 +  font-size: .6em;
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 4px;