--- /dev/null
+@import "../../base/styles.css";
+
+/*******************************************************************************
+ * App background & tooltip
+ ******************************************************************************/
+
+.v-app {
+ background: transparent;
+ overflow: hidden;
+ }
+
+.v-view {
+ margin-top: 0;
+ border-top: none;
+ }
+
+.v-tooltip {
+ background: #fdfdee;
+ border: 1px solid #c0c0b9;
+ padding: 1px 5px;
+ color: #222;
+ font-size: 0.9em;
+ line-height: normal;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ }
+
+.v-sa .v-tooltip,
+.v-ff3 .v-tooltip {
+ outline: 1px solid rgba(0,0,0,.2);
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border: none;
+ }
+
+
+/*******************************************************************************
+ * Global fonts
+ ******************************************************************************/
+
+/* First all the containers that have other components inside them, and are
+ * possibly overlay elements (which reside inside the BODY element, not the .v-app element)
+ */
+/* Then come all other overlay elements, that do not have other arbitrary
+ * components inside them (from v-filterselect-suggestpopup onwards) */
+.v-app,
+.v-window,
+.v-popupview-popup,
+.v-tooltip,
+.v-app input,
+.v-app select,
+.v-app button,
+.v-app textarea,
+.v-window input,
+.v-window select,
+.v-window button,
+.v-window textarea,
+.v-popupview-popup input,
+.v-popupview-popup select,
+.v-popupview-popup button,
+.v-popupview-popup textarea,
+.v-filterselect-suggestpopup,
+.v-datefield-popup,
+.v-contextmenu,
+.v-Notification,
+.v-menubar-submenu,
+.v-table-header-drag,
+.v-menubar-submenu,
+.v-drag-element {
+ font-family: Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
+ font-size: 13px;
+ line-height: 1.4;
+ color: #222;
+ }
+
+
+
+/*******************************************************************************
+ * Generic overlay elements
+ ******************************************************************************/
+.v-window,
+.v-popupview-popup,
+.v-filterselect-suggestpopup,
+.v-datefield-popup,
+.v-contextmenu,
+.v-Notification,
+.v-menubar-submenu {
+ background: #fff url(img/grad-light-top.png) repeat-x;
+ background-color: rgba(255,255,255,.85);
+ border: 1px solid #adadad;
+ border-color: rgba(0,0,0,.4);
+ border-radius: 4px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ overflow: hidden;
+ }
+
+.v-ie6 .v-window,
+.v-ie6 .v-popupview-popup,
+.v-ie6 .v-filterselect-suggestpopup,
+.v-ie6 .v-datefield-popup,
+.v-ie6 .v-contextmenu,
+.v-ie6 .v-Notification,
+.v-ie6 .v-menubar-submenu {
+ background-image: none;
+ }
+
+.v-filterselect-suggestpopup,
+.v-contextmenu,
+.v-menubar-submenu {
+ padding: 3px 0;
+ }
+
+.v-contextmenu .gwt-MenuItem,
+.v-filterselect-suggestpopup .gwt-MenuItem,
+.v-menubar-submenu .v-menubar-menuitem {
+ padding: .05em .7em;
+ user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ cursor: default;
+ }
+
+.v-contextmenu td.gwt-MenuItem-selected div,
+.v-filterselect-suggestpopup td.gwt-MenuItem-selected,
+.v-table .v-table-body .v-selected,
+.v-menubar-submenu span.v-menubar-menuitem-selected {
+ text-shadow: none;
+ }
+
+.v-contextmenu .gwt-MenuItem-selected,
+.v-filterselect-suggestpopup .gwt-MenuItem-selected,
+.v-table .v-selected,
+.v-menubar-submenu .v-menubar-menuitem-selected {
+ background-color: #333;
+ }
+
+.v-contextmenu .gwt-MenuItem-selected div {
+ background: transparent;
+ }
+
+
+/*******************************************************************************
+ * Misc. generics
+ ******************************************************************************/
+.v-errorindicator {
+ width: 13px;
+ height: 1.4em;
+ background: transparent url(img/error-indicator.png) no-repeat right 50%;
+ }
+
+.v-caption-small .v-errorindicator {
+ height: 1.2em;
+ }
+
+.v-caption-big .v-errorindicator {
+ height: 1.8em;
+ }
+
+.v-tooltip .v-errormessage {
+ color: #b2320b;
+ padding-left: 14px;
+ background: transparent url(img/error-indicator.png) no-repeat 0 50%;
+ }
\ No newline at end of file
--- /dev/null
+.v-accordion {
+ border: 1px solid #b3b3b3;
+ }
+
+.v-accordion-item-open {
+ border-bottom: 1px solid #b3b3be;
+ }
+
+.v-accordion-item-caption,
+.v-accordion-item-open .v-accordion-item-caption:active {
+ padding: 0;
+ background: transparent url(../../img/grad-light-top.png) repeat-x;
+ border-width: 0 0 1px 0;
+ border-style: solid none;
+ }
+
+.v-ie6 .v-accordion-item-caption {
+ background-image: none;
+ }
+
+div.v-accordion-item-caption,
+div.v-accordion-item-open .v-accordion-item-caption:active {
+ background-color: transparent;
+ }
+
+.v-accordion-item-caption .v-caption {
+ padding: .2em .9em;
+ }
+
+.v-accordion-item-caption:active {
+ background-image: url(../../img/grad-dark-bottom.png);
+ background-position: left bottom;
+ }
+
+/*******************************************************************************
+ * Opaque
+ ******************************************************************************/
+.v-accordion-opaque {
+ border-radius: 4px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ }
+
+.v-accordion-opaque .v-accordion-item-caption,
+.v-accordion-opaque .v-accordion-item-open {
+ border-none;
+ }
+
+.v-accordion-opaque .v-accordion-item-caption,
+.v-accordion-opaque .v-accordion-item-open .v-accordion-item-caption:active {
+ background-color: #b8b8b8;
+ }
+
+.v-accordion-opaque .v-accordion-item-open {
+ background-color: #fff;
+ }
+
+.v-accordion-opaque .v-accordion-item-first,
+.v-accordion-opaque .v-accordion-item-first .v-accordion-item-caption {
+ -webkit-border-top-left-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ -moz-border-radius-topleft: 3px;
+ -moz-border-radius-topright: 3px;
+ overflow: hidden;
+ }
+
+
+/*******************************************************************************
+ * Borderless
+ ******************************************************************************/
+.v-accordion-borderless {
+ border: none;
+ }
+
+.v-accordion-opaque.borderless,
+.v-accordion-opaque.borderless .v-accordion-item-first .v-accordion-item-caption {
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ }
\ No newline at end of file
--- /dev/null
+.v-button:active,
+.v-ie7 .v-pressed.v-button,
+.v-ie8 .v-pressed.v-button,
+div.v-button-down {
+ background-image: url(../../img/grad-dark-bottom2.png);
+ background-color: #afafaf;
+ }
+
+.v-button:active .v-button-wrap,
+.v-ie7 .v-pressed.v-button .v-button-wrap,
+.v-ie8 .v-pressed.v-button .v-button-wrap,
+.v-button-down .v-button-wrap {
+ background-image: url(../../img/grad-dark-top2.png);
+ border: 1px solid #888;
+ padding: 3px 12px;
+ border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ }
+
+div.v-button-down .v-button-wrap {
+ background-image: url(../../img/grad-dark-top2.png);
+ }
+
+.v-ie6 div.v-button-down .v-button-wrap {
+ background-image: none;
+ }
+
+.v-button,
+.v-disabled.v-button:focus,
+.v-disabled.v-button:active {
+ border: 1px solid #8b8b8b;
+ background: #c9c9c9;
+ border-radius: 3px;
+ background: #c9c9c9 url(../../img/grad-dark-bottom.png) repeat-x left bottom;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2);
+ -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2);
+ text-shadow: 0 1px 0 #fff;
+ padding: 0;
+ }
+
+.v-button-wrap,
+.v-disabled:active .v-button-wrap {
+ display: block;
+ padding: 4px 13px;
+ border: none;
+ border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ background: transparent url(../../img/grad-light-top.png) repeat-x;
+ height: 100%;
+ text-overflow: ellipsis;
+ -ms-text-overflow: ellipsis;
+ }
+
+.v-sa .v-button,
+.v-sa .v-button-wrap,
+.v-ff .v-button,
+.v-ff .v-button-wrap {
+ overflow: hidden;
+ }
+
+body.v-ie6 .v-button {
+ background-image: none;
+ }
+
+body.v-ie6 .v-button .v-button-wrap {
+ background-image: none;
+ display: inline;
+ zoom: 1;
+ }
+
+.v-button:focus {
+ outline: none;
+ }
+
+.v-button .v-icon {
+ margin-left: -0.5em;
+ }
+
+.v-button .v-button-caption {
+ line-height: 1.26;
+ }
+
+
+/*******************************************************************************
+ * Big
+ ******************************************************************************/
+.v-button-big {
+ font-size: 1.2em;
+ }
+
+
+/*******************************************************************************
+ * Small
+ ******************************************************************************/
+.v-button-small {
+ font-size: 0.85em;
+ font-weight: normal;
+ }
+
+.v-button-small .v-button-wrap {
+ padding: 3px 11px;
+ }
+
+.v-button-small:active .v-button-wrap,
+.v-ie7 .v-button-small.v-pressed .v-button-wrap,
+.v-ie8 .v-button-small.v-pressed .v-button-wrap,
+.v-button-down.small .v-button-wrap {
+ padding: 2px 10px;
+ }
+
+.v-button-small .v-icon {
+ margin-top: -4px;
+ margin-bottom: -4px;
+ }
+
+
+/*******************************************************************************
+ * Wide
+ ******************************************************************************/
+.v-button-wide .v-button-wrap {
+ padding-left: 26px;
+ padding-right: 26px;
+ }
+
+.v-button-wide:active .v-button-wrap,
+.v-ie7 .v-button-wide.v-pressed .v-button-wrap,
+.v-ie8 .v-button-wide.v-pressed .v-button-wrap {
+ padding-left: 25px;
+ padding-right: 25px;
+ }
+
+
+/*******************************************************************************
+ * Tall
+ ******************************************************************************/
+.v-button-tall .v-button-wrap {
+ padding-top: 13px;
+ padding-bottom: 13px;
+ }
+
+.v-button-tall:active .v-button-wrap,
+.v-ie7 .v-button-tall.v-pressed .v-button-wrap,
+.v-ie8 .v-button-tall.v-pressed .v-button-wrap {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ }
+
+
+/*******************************************************************************
+ * Default
+ ******************************************************************************/
+.v-button-default,
+.v-disabled.v-button-default:focus {
+ font-weight: bold;
+ }
+
+
+/*******************************************************************************
+ * Link & borderless
+ ******************************************************************************/
+div.v-button-link,
+div.v-button-link:focus,
+.v-button-link:active,
+div.v-disabled.v-button-link,
+div.v-disabled.v-button-link:focus,
+body.v-ie .v-pressed.v-button-link,
+div.v-button-borderless,
+div.v-button-borderless:focus,
+.v-button-borderless:active,
+div.v-disabled.v-button-borderless,
+div.v-disabled.v-button-borderless:focus,
+body.v-ie .v-pressed.v-button-borderless {
+ background: transparent;
+ font-weight: normal;
+ text-shadow: none;
+ border: none;
+ padding: 1px;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ }
+
+.v-button-link .v-button-wrap,
+.v-button-borderless .v-button-wrap {
+ display: inline;
+ }
+
+div.v-button-link .v-button-wrap,
+div.v-button-link:focus .v-button-wrap,
+.v-button-link:active .v-button-wrap,
+div.v-disabled.v-button-link .v-button-wrap,
+div.v-disabled.v-button-link:focus .v-button-wrap,
+body.v-ie .v-pressed.v-button-link .v-button-wrap,
+div.v-button-borderless .v-button-wrap,
+div.v-button-borderless:focus .v-button-wrap,
+.v-button-borderless:active .v-button-wrap,
+div.v-disabled.v-button-borderless .v-button-wrap,
+div.v-disabled.v-button-borderless:focus .v-button-wrap,
+body.v-ie .v-pressed.v-button-borderless .v-button-wrap {
+ background: transparent;
+ font-weight: normal;
+ text-shadow: none;
+ border: none;
+ padding: 1px;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ }
+
+.v-button-link:focus .v-button-caption,
+.v-button-borderless:focus .v-button-caption {
+ border: 1px dotted gray;
+ margin: -1px;
+ }
+
+.v-button-link:active .v-button-caption,
+.v-button-borderless:active .v-button-caption {
+ border: none;
+ margin: 0;
+ }
+
+.v-button-borderless:active .v-icon {
+ opacity: .6;
+ }
+
+.v-button-link .v-icon,
+.v-button-borderless .v-icon {
+ margin-left: 0;
+ }
+
+
+/*******************************************************************************
+ * Icon-on-top
+ ******************************************************************************/
+.v-button-icon-on-top.v-button-borderless:focus .v-button-caption {
+ margin-top: 1px;
+ }
+
+.v-button-icon-on-top .v-button-caption,
+.v-button-icon-on-top:focus .v-button-caption,
+.v-button-icon-on-top.v-button-borderless:active .v-button-caption {
+ display: block;
+ margin-top: 2px;
+ }
+
+.v-button-icon-on-top .v-icon {
+ margin: 0;
+ }
+
+
+/*******************************************************************************
+ * Icon-on-right
+ ******************************************************************************/
+.v-button-icon-on-right .v-icon {
+ float: right;
+ margin-left: 3px;
+ margin-right: -0.5em;
+ }
+
+.v-ie6 .v-button-icon-on-right,
+.v-ie7 .v-button-icon-on-right {
+ position: relative;
+ }
+
+.v-ie6 .v-button-icon-on-right .v-button-caption,
+.v-ie7 .v-button-icon-on-right .v-button-caption {
+ padding-right: 14px;
+ }
+
+.v-ie6 .v-button-icon-on-right .v-icon,
+.v-ie7 .v-button-icon-on-right .v-icon {
+ position: absolute;
+ right: 0;
+ margin: 0;
+ }
+
+/*******************************************************************************
+ * Icon-only
+ ******************************************************************************/
+.v-button-icon-only .v-button-caption {
+ display: none;
+ }
+
+.v-button-icon-only .v-icon {
+ margin-right: -.5em;
+ }
\ No newline at end of file
--- /dev/null
+@import "accordion/accordion.css";
+@import "button/button.css";
+@import "label/label.css";
+@import "menubar/menubar.css";
+@import "notification/notification.css";
+@import "panel/panel.css";
+@import "popupview/popupview.css";
+@import "progressindicator/progressindicator.css";
+@import "slider/slider.css";
+@import "splitpanel/splitpanel.css";
+@import "table/table.css";
+@import "textfield/textfield.css";
+@import "datefield/datefield.css"; /* datefield and selects must be after textfield */
+@import "selects/selects.css";
+@import "tabsheet/tabsheet.css";
+@import "tree/tree.css";
+@import "window/window.css";
\ No newline at end of file
--- /dev/null
+.v-datefield-button {
+ background: #dadada url(../../img/date-btn.png) repeat-x 50% 0;
+ border: 1px solid gray;
+ -webkit-border-top-right-radius: 3px;
+ -webkit-border-bottom-right-radius: 3px;
+ -moz-border-radius-topright: 3px;
+ -moz-border-radius-bottomright: 3px;
+ height: 1.614999em;
+ padding: 0;
+ width: 25px;
+ }
+
+input.v-datefield-textfield {
+ border-right: none;
+ -webkit-border-top-right-radius: 0;
+ -webkit-border-bottom-right-radius: 0;
+ -moz-border-radius-topright: 0;
+ -moz-border-radius-bottomright: 0;
+ }
+
+
+/*******************************************************************************
+ * Big
+ ******************************************************************************/
+.v-datefield-big .v-datefield-button {
+ height: 1.85em;
+ width: 32px;
+ background-image: url(../../img/date-btn-big.png);
+ }
+
+
+/*******************************************************************************
+ * Small
+ ******************************************************************************/
+.v-datefield-small .v-datefield-button {
+ height: 1.62em;
+ width: 19px;
+ background-position: 50% -2px;
+ }
+
+
+/*******************************************************************************
+ * Calendar panel
+ ******************************************************************************/
+.v-datefield-calendarpanel {
+ border-collapse: collapse;
+ margin: 0;
+ padding: 0;
+ height: auto !important;
+ font-size: 0.9em;
+ }
+
+.v-datefield-month .v-datefield-textfield {
+ width: 6em;
+ }
+
+.v-datefield-year .v-datefield-textfield {
+ width: 4em;
+ }
+
+.v-datefield-year .v-datefield-calendarpanel-prevmonth,
+.v-datefield-year .v-datefield-calendarpanel-nextmonth {
+ display: none;
+ }
+
+.v-datefield-calendarpanel-header td {
+ border-bottom: 1px solid #666;
+ }
+
+.v-datefield-year .v-datefield-calendarpanel-header td,
+.v-datefield-month .v-datefield-calendarpanel-header td {
+ border-bottom: none;
+ }
+
+td.v-datefield-calendarpanel-month {
+ background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x 0 -1px;
+ text-shadow: 0 1px 0 rgba(255,255,255,.7);
+ }
+
+.v-ie6 td.v-datefield-calendarpanel-month {
+ background-image: none;
+ }
+
+span.v-datefield-calendarpanel-month {
+ display: block;
+ text-align: center;
+ overflow: hidden;
+ line-height: 2em;
+ height: 1.8em;
+ }
+
+.v-datefield-year .v-datefield-calendarpanel-month {
+ width: 5em;
+ }
+
+.v-datefield-month .v-datefield-calendarpanel-month,
+.v-datefield-day .v-datefield-calendarpanel-month,
+.v-datefield-full .v-datefield-calendarpanel-month {
+ width: 9em;
+ }
+
+.v-datefield-popupcalendar {
+ min-width: 0;
+ }
+
+.v-datefield-year .v-datefield-calendarpanel {
+ width: 8em;
+ }
+
+td.v-datefield-calendarpanel-prevyear {
+ text-align: right;
+ }
+
+td.v-datefield-calendarpanel-nextyear {
+ text-align: left;
+ }
+
+.v-datefield-calendarpanel-header button {
+ font-size: 1em;
+ line-height: normal;
+ width: 100%;
+ padding: 0 .8em;
+ height: 1.8em;
+ border: none;
+ background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x 0 -1px;
+ overflow: hidden;
+ outline: none;
+ cursor: pointer;
+ }
+
+.v-datefield-popup .v-datefield-calendarpanel-month,
+.v-datefield-popup .v-datefield-calendarpanel-header button {
+ background-position: 0 0;
+ }
+
+.v-ie6 .v-datefield-calendarpanel-header button {
+ background-image: none;
+ }
+
+.v-datefield-calendarpanel-header button:active {
+ background-image: url(../../img/grad-dark-top2.png);
+ }
+
+.v-datefield-calendarpanel-prevyear button {
+ -webkit-border-top-left-radius: 4px;
+ -moz-border-radius-topleft: 4px;
+ }
+
+.v-datefield-calendarpanel-nextyear button {
+ -webkit-border-top-right-radius: 4px;
+ -moz-border-radius-topright: 4px;
+ }
+
+.v-datefield-year .v-datefield-calendarpanel-prevyear button,
+.v-datefield-month .v-datefield-calendarpanel-prevyear button {
+ -webkit-border-bottom-left-radius: 3px;
+ -moz-border-radius-bottomleft: 3px;
+ }
+
+.v-datefield-year .v-datefield-calendarpanel-nextyear button,
+.v-datefield-month .v-datefield-calendarpanel-nextyear button {
+ -webkit-border-bottom-right-radius: 3px;
+ -moz-border-radius-bottomright: 3px;
+ }
+
+.v-datefield-calendarpanel-body,
+.v-datefield-calendarpanel-time {
+ text-align: center;
+ vertical-align: top;
+ }
+
+.v-datefield-calendarpanel-body table {
+ border-collapse: collapse;
+ margin: 0;
+ padding: 0;
+ margin: 0 auto;
+ }
+
+.v-datefield-calendarpanel-weekdays td {
+ width: 14.2%;
+ overflow: hidden;
+ line-height: normal;
+ text-transform: uppercase;
+ vertical-align: top;
+ }
+
+.v-datefield-calendarpanel-weeknumbers td {
+ width: 12.5%;
+ }
+
+.v-datefield-calendarpanel-weekdays strong {
+ display: block;
+ text-align: right;
+ font-size: 0.8em;
+ padding: .3em .5em .35em 0;
+ height: 1.1em;
+ color: #fff;
+ text-shadow: 0 1px 0 rgba(0,0,0,.5);
+ background: #c9c9c9 url(../../img/grad-dark-top2.png) repeat-x;
+ margin-bottom: 2px;
+ }
+
+.v-ie6 .v-datefield-calendarpanel-weekdays strong {
+ background-image: none;
+ }
+
+.v-datefield-calendarpanel .v-first strong {
+ -webkit-border-bottom-left-radius: 3px;
+ -moz-border-radius-bottomleft: 3px;
+ }
+
+.v-datefield-calendarpanel .v-last strong {
+ -webkit-border-bottom-right-radius: 3px;
+ -moz-border-radius-bottomright: 3px;
+ }
+
+.v-datefield-popup .v-datefield-calendarpanel .v-first strong,
+.v-datefield-popup .v-datefield-calendarpanel .v-last strong {
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ }
+
+.v-datefield-calendarpanel-body td {
+ text-align: right;
+ height: 1.6em;
+ }
+
+.v-datefield-calendarpanel-weeknumber {
+ padding: .5em .5em .35em 0;
+ }
+
+.v-datefield-calendarpanel-day,
+.v-datefield-calendarpanel-day-today {
+ padding: .15em .5em .15em 0;
+ display: block;
+ margin: 1px 1px 1px .3em;
+ border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ }
+
+.v-datefield-calendarpanel-day:hover {
+ margin: 0 0 0 .2em;
+ border: 1px solid #b3b3b3;
+ }
+
+.v-datefield-calendarpanel-day-today {
+ border: none;
+ background: transparent url(../../img/grad-dark-top2.png) repeat-x;
+ margin: 0 0 0 .2em;
+ font-weight: bold;
+ border: 1px solid #c9c9c9;
+ }
+
+.v-ie6 .v-datefield-calendarpanel-day-today {
+ background-image: none;
+ }
+
+.v-datefield-calendarpanel-day-selected,
+.v-datefield-calendarpanel-day-selected:hover {
+ margin: 0 0 0 .3em;
+ border: none;
+ }
+
+.v-datefield-calendarpanel-time select {
+ padding: 0;
+ font-size: 0.9em;
+ margin: 0;
+ }
\ No newline at end of file
--- /dev/null
+/*******************************************************************************
+ * Different headers
+ ******************************************************************************/
+.v-label-h1,
+.v-label h1,
+.v-label-h2,
+.v-label h2,
+.v-label-h3,
+.v-label h3,
+.v-label-h4,
+.v-label h4 {
+ margin: 0;
+ font-weight: bold;
+ }
+
+.v-label-h1,
+.v-label h1 {
+ padding: .75em 0 .5em 0;
+ font-size: 1.85em;
+ }
+
+.v-label-h2,
+.v-label h2 {
+ padding: .67em 0 .33em 0;
+ font-size: 1.4em;
+ }
+
+.v-label-h3,
+.v-label h3 {
+ margin: .71em 0 .29em 0;
+ font-size: 1.1em;
+ }
+
+.v-label-h4,
+.v-label h4 {
+ padding: .23em 0;
+ font-size: 1em;
+ }
+
+
+/*******************************************************************************
+ * Big
+ ******************************************************************************/
+.v-label-big {
+ font-size: 1.2em;
+ }
+
+
+/*******************************************************************************
+ * Small
+ ******************************************************************************/
+.v-label-small {
+ font-size: 0.9em;
+ line-height: 1.3;
+ opacity: .8;
+ filter: alpha(opacity=80);
+ }
+
+
+/*******************************************************************************
+ * Tiny
+ ******************************************************************************/
+.v-label-tiny {
+ font-size: 0.85em;
+ line-height: 1.2;
+ opacity: .7;
+ filter: alpha(opacity=70);
+ }
+
+
+/*******************************************************************************
+ * Warning & error
+ ******************************************************************************/
+body .v-label-warning,
+body .v-label-error {
+ color: #574734;
+ background: #fffec8 url(../../img/label-warning-icon.png) no-repeat .2em 50%;
+ white-space: nowrap;
+ padding: .3em 1em .3em 2.4em;
+ overflow: hidden;
+ width: auto !important;
+ border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ text-shadow: none;
+ }
+
+body .v-label-error {
+ color: #fff;
+ font-weight: bold;
+ background: #c22f24 url(../../img/label-error-icon.png) no-repeat .2em 50%;
+ text-shadow: 0 1px 0 #8f2e27;
+ }
+
+
+/*******************************************************************************
+ * Big warning & big error
+ ******************************************************************************/
+.v-label-big.v-label-warning,
+.v-label-big.v-label-error {
+ background-image: url(../../img/label-warning-icon-big.png);
+ background-position: 0 50%;
+ padding: .5em 1em .5em 3em;
+ }
+
+.v-label-big.v-label-error {
+ background-image: url(../../img/label-error-icon-big.png);
+ }
+
+
+/*******************************************************************************
+ * Loading
+ ******************************************************************************/
+body .v-label-loading {
+ height: 32px;
+ line-height: 32px;
+ background-image: url(../../../base/common/img/loading-indicator.gif);
+ background-repeat: no-repeat;
+ background-position: 0 50%;
+ white-space: nowrap;
+ padding: .3em 1em .3em 36px;
+ overflow: hidden;
+ width: auto !important;
+ border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ }
\ No newline at end of file
--- /dev/null
+.v-menubar {
+ padding: 0 .4em;
+ background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
+ border: 1px solid #b3b3b3;
+ border-width: 1px 0;
+ }
+
+.v-ie6 .v-menubar {
+ background-image: none;
+ }
+
+.v-menubar .v-menubar-menuitem {
+ padding: .2em .5em;
+ line-height: normal;
+ }
+
+.v-menubar-submenu .v-menubar-menuitem {
+ padding-right:1.5em;
+ }
+
+.v-menubar-submenu .v-menubar-submenu-indicator {
+ margin-top: .1em;
+ }
\ No newline at end of file
--- /dev/null
+div.v-Notification {
+ border-radius: 0;
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ font-size: 100%;
+ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.7);
+ -moz-box-shadow: 0 2px 5px rgba(0,0,0,.7);
+ }
+
+.v-Notification p {
+ line-height: 1.3;
+ }
+
+div.v-Notification-warning {
+ background-color: #fffec8;
+ color: #574734;
+ border: 2px solid #fee3af;
+ }
+
+div.v-Notification-warning h1 {
+ padding-left: 44px;
+ background: transparent url(../../img/label-warning-icon-big.png) no-repeat 0 50%;
+ }
+
+div.v-Notification-error {
+ color: #fff;
+ text-shadow: 0 1px 2px rgba(0,0,0,.3);
+ background: #c22f24 url(../../img/error-close.png) no-repeat right top;
+ border: 2px solid #ca3030;
+ }
+
+div.v-Notification-error h1 {
+ padding-left: 44px;
+ background: transparent url(../../img/label-error-icon-big.png) no-repeat 0 50%;
+ }
+
+div.v-Notification-tray {
+ color: #fff;
+ margin: 0 5px 5px 0;
+ background: #3b3b3b url(../../img/grad-light-top2.png) repeat-x;
+ border: 1px solid #5b5b5b;
+ padding: 0.8em 0.9em;
+ border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ text-shadow: 0 1px 1px rgba(0,0,0,.5);
+ }
+
+.v-Notification-tray h1 {
+ font-size: 14px;
+ line-height: 18px;
+ }
+
+.v-Notification-tray p {
+ font-size: 12px;
+ font-weight: normal;
+ }
+
+div.v-Notification-system {
+ color: #fff;
+ border: none;
+ background-color: #b40000;
+ }
\ No newline at end of file
--- /dev/null
+.v-panel-caption {
+ background: #b9dcff;
+ font-size: 1.2em;
+ border: 1px solid #b3b3b3;
+ border-bottom: none;
+ padding: .2em .6em;
+ }
+
+.v-panel-nocaption {
+ padding: 0;
+ height: 0;
+ overflow: hidden;
+ border-top: 1px solid #b3b3b3;
+ }
+
+.v-panel-content {
+ background: #fff;
+ border: 1px solid #b3b3b3;
+ border-top: none;
+ border-bottom: none;
+ }
+
+.v-panel-deco {
+ height: 0;
+ overflow: hidden;
+ border-top: 1px solid #b3b3b3;
+ }
+
+
+/*******************************************************************************
+ * Borderless
+ ******************************************************************************/
+div.v-panel-caption-borderless {
+ border: none;
+ }
+
+div.v-panel-nocaption-borderless,
+div.v-panel-content-borderless,
+div.v-panel-deco-borderless {
+ border: none;
+ background: transparent;
+ }
+
+
+/*******************************************************************************
+ * Light
+ ******************************************************************************/
+.v-panel-light .v-panel-caption-light {
+ background: transparent;
+ font-weight: normal;
+ border-bottom: 1px solid #b3b3b3;
+ }
+
+div.v-panel-content-light {
+ background: transparent;
+ }
+
+
+/*******************************************************************************
+ * Bubble
+ ******************************************************************************/
+.v-panel-bubble .v-panel-captionwrap {
+ border: 1px solid #b3b3b3;
+ border-bottom: none;
+ background: #fff;
+ -webkit-border-top-left-radius: 4px;
+ -webkit-border-top-right-radius: 4px;
+ -moz-border-radius-topleft: 4px;
+ -moz-border-radius-topright: 4px;
+ padding: 1px 2px;
+ overflow: hidden;
+ }
+
+.v-panel-bubble .v-panel-caption-bubble {
+ border: none;
+ background-image: url(../../img/grad-light-top.png);
+ background-repeat: repeat-x;
+ background-position: 0 -1px;
+ color: #fff;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.4);
+ border-radius: 3px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ margin: 1px 0;
+ font-size: 1em;
+ line-height: 1.2;
+ padding: .3em .6em;
+ }
+
+.v-ie6 .v-panel-bubble .v-panel-caption-bubble {
+ background-image: none;
+ }
+
+.v-panel-nocaption-bubble {
+ padding: 0;
+ margin: 0;
+ border: none;
+ }
+
+.v-panel-deco-bubble {
+ height: 2px;
+ border: 1px solid #b3b3b3;
+ border-top: none;
+ background: #fff;
+ -webkit-border-bottom-left-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ -moz-border-radius-bottomright: 4px;
+ }
+
+
+/*******************************************************************************
+ * Borderless Bubble
+ ******************************************************************************/
+div.v-panel-borderless .v-panel-captionwrap,
+div.v-panel-borderless .v-panel-deco-bubble {
+ border: none;
+ padding: 0;
+ background: transparent;
+ }
+
+div.v-panel-borderless .v-panel-content-bubble {
+ background: transparent;
+ }
\ No newline at end of file
--- /dev/null
+.v-popupview-popup {
+ padding: .3em .4em;
+ }
\ No newline at end of file
--- /dev/null
+.v-progressindicator-wrapper {
+ border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ background: #eee url(../../img/grad-dark-bottom.png) repeat-x left bottom;
+ overflow: visible;
+ font-size: 1px;
+ line-height: 1px;
+ }
+
+.v-progressindicator-indicator {
+ border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x 0 -10px;
+ margin: -1px;
+ height: 7px;
+ border: 1px solid #b3b3b3;
+ }
+
+.v-ie6 .v-progressindicator-wrapper,
+.v-ie6 .v-progressindicator-indicator {
+ background-image: none;
+ }
+
+
+/*******************************************************************************
+ * Small
+ ******************************************************************************/
+.v-progressindicator-small {
+ width: 110px;
+ }
+
+.v-progressindicator-small .v-progressindicator-wrapper,
+.v-progressindicator-small .v-progressindicator-indicator {
+ height: 2px;
+ border-radius: 1px;
+ -webkit-border-radius: 1px;
+ -moz-border-radius: 1px;
+ }
+
+
+/*******************************************************************************
+ * Big
+ ******************************************************************************/
+.v-progressindicator-big {
+ width: 250px;
+ }
+
+.v-progressindicator-big .v-progressindicator-wrapper,
+.v-progressindicator-big .v-progressindicator-indicator {
+ height: 14px;
+ border-radius: 4px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ }
+
+
+/*******************************************************************************
+ * Indeterminates
+ ******************************************************************************/
+.v-progressindicator-indeterminate.v-progressindicator-big {
+ width: 42px;
+ height: 42px;
+ background: #fff url(../../../base/common/img/ajax-loader-big.gif) no-repeat 50%;
+ }
+
+.v-progressindicator-indeterminate.v-disabled {
+ display: none;
+ }
+
+.v-progressindicator-indeterminate.v-progressindicator-bar {
+ display: block;
+ width: 150px;
+ height: 9px;
+ border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ }
+
+.v-progressindicator-indeterminate.bar.v-progressindicator-small {
+ width: 110px;
+ height: 4px;
+ }
+
+.v-progressindicator-indeterminate.bar.v-progressindicator-big {
+ width: 200px;
+ height: 16px;
+ }
+
+.v-progressindicator-indeterminate.bar .v-progressindicator-wrapper {
+ display: block;
+ background: #fff url(../../img/indeterminate-progress.gif);
+ border-radius: 3px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ overflow: hidden;
+ }
+
+.v-progressindicator-indeterminate.bar .v-progressindicator-indicator {
+ display: block;
+ background: transparent url(../../img/grad-light-top.png) repeat-x;
+ border: none;
+ margin: 0;
+ border-radius: 3px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ overflow: hidden;
+ }
+
+.v-progressindicator-indeterminate.bar.v-progressindicator-small .v-progressindicator-indicator {
+ background: transparent;
+ }
+
+.v-progressindicator-indeterminate.bar.v-disabled .v-progressindicator-indicator {
+ background: #fff;
+ }
\ No newline at end of file
--- /dev/null
+.v-filterselect {
+ overflow: hidden;
+ }
+
+body input.v-filterselect-input {
+ margin: 0;
+ padding: 0;
+ border: none;
+ background: transparent;
+ line-height: normal;
+ }
+
+body input.v-filterselect-input[type=text] {
+ padding: 0;
+ }
+
+.v-filterselect-focus .v-filterselect-input,
+.v-filterselect .v-filterselect-input:focus {
+ outline: none;
+ }
+
+.v-filterselect-big.v-filterselect-search {
+ padding-left: 22px;
+ }
+
+.v-filterselect-button {
+ width: 16px;
+ height: 1.2em;
+ background-position: -5px -11px;
+ opacity: .4;
+ }
+
+.v-filterselect-button:hover {
+ opacity: .7;
+ }
+
+.v-filterselect-button:active {
+ opacity: 1;
+ }
+
+.v-filterselect-small .v-filterselect-button {
+ height: 0.95em;
+ background-position: -5px -12px;
+ }
+
+.v-filterselect-suggestpopup {
+ margin-top: .4em;
+ }
+
+body .v-filterselect-suggestpopup-small td {
+ font-size: .85em;
+ }
+
+body .v-filterselect-suggestpopup-big td {
+ font-size: 1.1em;
+ }
+
+.v-filterselect-big .v-filterselect-button {
+ height: 1.4em;
+ background-position: -5px -9px;
+ }
+
+.v-filterselect-search .v-filterselect-button {
+ width: 0;
+ overflow: hidden;
+ }
+
+.v-filterselect-prompt .v-filterselect-input {
+ font-style: normal;
+ }
+
+.v-filterselect-prevpage-off,
+.v-filterselect-nextpage-off,
+.v-filterselect-prevpage,
+.v-filterselect-nextpage {
+ border-style: solid;
+ border-width: 1px 0;
+ border-color: #b3b3b3;
+ background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
+ height: 12px;
+ user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ }
+
+.v-ie6 .v-filterselect-prevpage-off,
+.v-ie6 .v-filterselect-nextpage-off,
+.v-ie6 .v-filterselect-prevpage,
+.v-ie6 .v-filterselect-nextpage {
+ background-image: none;
+ }
+
+.v-filterselect-prevpage:active,
+.v-filterselect-nextpage:active {
+ background-image: (../../img/grad-dark-bottom2.png);
+ background-position: left bottom;
+ }
+
+.v-filterselect-prevpage-off span,
+.v-filterselect-nextpage-off span,
+.v-filterselect-prevpage span,
+.v-filterselect-nextpage span {
+ display: block;
+ text-indent: -9999px;
+ height: 12px;
+ background: transparent url(../../../base/common/img/sprites.png) no-repeat 50% 3px;
+ }
+
+.v-filterselect-nextpage-off span,
+.v-filterselect-nextpage span {
+ background-position: 50% -12px;
+ }
+
+.v-filterselect-status {
+ font-size: .85em;
+ margin: 1px 0 -3px;
+ user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ }
+
+.v-filterselect-suggestpopup-small .v-filterselect-status {
+ font-size: .8em;
+ }
+
+.v-filterselect-suggestpopup-big .v-filterselect-status {
+ font-size: .9em;
+ }
+
+.v-select-small .v-select-select {
+ font-size: 0.8em;
+ }
+
+.v-select-big .v-select-select {
+ font-size: 1.2em;
+ }
+
+
+/*******************************************************************************
+ * Non-editable combobox (i.e. themable select)
+ ******************************************************************************/
+.v-filterselect-select-button {
+ background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
+ position: relative;
+ padding: .3em .5em;
+ }
+
+.v-ie6 .v-filterselect-select-button {
+ background-image: none;
+ }
+
+.v-filterselect-select-button .v-filterselect-input {
+ display: block;
+ width: 100% !important;
+ user-select: none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+ }
+
+.v-filterselect-select-button .v-filterselect-button {
+ position: absolute;
+ width: 100%;
+ top: 0;
+ left: 0;
+ height: 100%;
+ background-position: 100% -8px;
+ }
+
+.v-ie6 .v-filterselect-select-button .v-filterselect-button {
+ float: none;
+ position: relative;
+ margin: -1.8em -.5em -.3em -.5em;
+ padding: .3em .5em;
+ }
\ No newline at end of file
--- /dev/null
+.v-slider {
+ border-top: 1px solid #9a9c9e;
+ border-bottom: 1px solid #bdbfc1;
+ margin: 3px 0;
+ border-radius: 3px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ }
+
+.v-slider-base {
+ height: 4px;
+ background: #e0e2e2 url(../../img/grad-dark-top2.png) repeat-x;
+ border-top: 1px solid #adb0b1;
+ border-left: 1px solid #a0a3a6;
+ border-right: 1px solid #a0a3a6;
+ border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ }
+
+.v-slider-handle {
+ background: #c9c9c9 url(../../img/grad-dark-bottom2.png) repeat-x left bottom;
+ border: 1px solid #b3b3b3;
+ width: 10px;
+ height: 10px;
+ margin-top: -5px;
+ border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.5);
+ -moz-box-shadow: 0 1px 1px rgba(0,0,0,.5);
+ cursor: pointer;
+ }
+
+.v-slider-handle-active {
+ background-color: #afafaf;
+ }
+
+.v-slider-vertical {
+ width: auto;
+ margin: 0 4px;
+ border-width: 0 1px;
+ }
+
+.v-ie6 .v-slider-vertical {
+ width: 6px;
+ }
+
+.v-slider-vertical .v-slider-base {
+ background-image: none;
+ width: 4px;
+ border-width: 1px 1px 0;
+ }
+
+.v-slider-vertical .v-slider-handle {
+ width: 10px;
+ height: 10px;
+ margin: 0;
+ margin-left: -5px;
+ }
+
+.v-ie6 .v-slider-base,
+.v-ie6 .v-slider-handle {
+ background-image: none;
+ }
\ No newline at end of file
--- /dev/null
+.v-splitpanel-hsplitter div,
+.v-splitpanel-vsplitter div {
+ background: transparent url(../../img/split-handle.png) no-repeat 2px 50%;
+ margin: 0 -1px;
+ width: 9px;
+ }
+
+.v-ie6 .v-splitpanel-hsplitter div,
+.v-ie6 .v-splitpanel-vsplitter div {
+ background-image: url(../../img/split-handle-ie6.png);
+ }
+
+.v-splitpanel-vsplitter div {
+ background-position: 50% 2px;
+ margin: -1px 0;
+ width: auto;
+ height: 9px;
+ }
+
+.v-splitpanel-hsplitter,
+.v-splitpanel-hsplitter-locked {
+ border-style: solid;
+ border-width: 0 1px;
+ border-color: #b0b0b0;
+ width: 7px;
+ background: #b3b3b3 url(../../img/grad-light-left.png) repeat-y;
+ }
+
+.v-splitpanel-vsplitter,
+.v-splitpanel-vsplitter-locked {
+ border-style: solid;
+ border-width: 1px 0;
+ border-color: #b0b0b0;
+ height: 7px;
+ background: #b3b3b3 url(../../img/grad-light-top.png) repeat-x;
+ }
+
+.v-ie6 .v-splitpanel-hsplitter,
+.v-ie6 .v-splitpanel-hsplitter-locked,
+.v-ie6 .v-splitpanel-vsplitter,
+.v-ie6 .v-splitpanel-vsplitter-locked {
+ background-image: none;
+ }
+
+/*******************************************************************************
+ * Small
+ ******************************************************************************/
+body .v-splitpanel-hsplitter-small,
+body .v-splitpanel-hsplitter-small-locked {
+ width: 1px;
+ border: none;
+ background-image: none;
+ }
+
+body .v-splitpanel-vsplitter-small,
+body .v-splitpanel-vsplitter-small-locked {
+ height: 1px;
+ border: none;
+ background-image: none;
+ font-size: 1px;
+ line-height: 1px;
+ }
+
+body.v-ie6 .v-splitpanel-vsplitter-small,
+body.v-ie6 .v-splitpanel-vsplitter-small-locked {
+ overflow: hidden;
+ }
+
+.v-splitpanel-hsplitter-small div {
+ width: 7px;
+ margin-left: -2px;
+ background: transparent;
+ }
+
+.v-splitpanel-vsplitter-small div {
+ height: 7px;
+ margin-top: -2px;
+ background: transparent;
+ overflow: hidden;
+ }
+
+.v-ie6 .v-splitpanel-hsplitter-small div,
+.v-ie6 .v-splitpanel-vsplitter-small div {
+ background-image: none;
+ }
\ No newline at end of file
--- /dev/null
+.v-table-header-wrap,
+.v-table-header-drag {
+ background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
+ height: 1.4em;
+ line-height: normal;
+ }
+
+.v-ie6 .v-table-header-wrap,
+.v-ie6 .v-table-header-drag {
+ background-image: none;
+ }
+
+.v-table-caption-container,
+.v-table-header-drag {
+ padding-top: .2em;
+ padding-right: 4px;
+ }
+
+.v-table-header-drag {
+ padding-left: .3em;
+ }
+
+.v-table-resizer {
+ background: transparent;
+ border-right: 1px solid #b3b3b3;
+ padding-left: 1px;
+ height: 1.4em;
+ }
+
+/* Targets the same element as .v-table-resizer */
+div.v-table-focus-slot-left {
+ background: transparent;
+ border-left: 2px solid #b3b3b3;
+ border-right: none;
+ padding-left: 0;
+ padding-right: 1px;
+ float: left;
+ margin: 0;
+ }
+
+div.v-table-focus-slot-right {
+ background: transparent;
+ border-right: 2px solid #b3b3b3;
+ padding-left: 0;
+ margin: 0;
+ }
+
+.v-table-column-selector {
+ margin-top: -1.35em;
+ }
+
+.v-table-cell-content {
+ border-right: none;
+ padding-right: 7px;
+ }
+
+.v-table-caption-container .v-icon {
+ vertical-align: middle;
+ margin: -0.37em 2px 0 0;
+ }
+
+.v-table-header-drag .v-icon {
+ vertical-align: middle;
+ }
+
+/* column selector */
+.v-contextmenu .v-on,
+.v-contextmenu .v-off {
+ display: block;
+ background: transparent url(../../../reindeer/common/icons/bullet.png) no-repeat 0 4px;
+ padding-left: 12px;
+ }
+
+.v-contextmenu .v-off {
+ background-image: none;
+ color: #666;
+ }
+
+.v-contextmenu .gwt-MenuItem-selected .v-on {
+ background-image: url(../../../reindeer/common/icons/bullet-white.png);
+ }
+
+.v-table-scrollposition {
+ font-size: 0.9em;
+ opacity: .85;
+ filter: alpha(opacity=85);
+ }
+
+/*******************************************************************************
+ * Small
+ ******************************************************************************/
+.v-table-small .v-table-caption-container,
+.v-table-small .v-table-body {
+ font-size: 0.85em;
+ }
+
+.v-table-small .v-table-resizer,
+.v-table-small .v-table-header-wrap {
+ height: 1.2em;
+ }
+
+.v-table-small .v-table-column-selector {
+ margin-top: -1.2em;
+ }
+
+
+/*******************************************************************************
+ * Big
+ ******************************************************************************/
+.v-table-big .v-table-caption-container,
+.v-table-big .v-table-body {
+ font-size: 1.2em;
+ }
+
+.v-table-big .v-table-caption-container {
+ padding-top: .3em;
+ }
+
+.v-table-big .v-table-resizer,
+.v-table-big .v-table-header-wrap {
+ height: 1.8em;
+ }
+
+.v-table-big .v-table-column-selector {
+ margin-top: -1.5em;
+ }
+
+/*******************************************************************************
+ * Striped
+ ******************************************************************************/
+.v-table-striped .v-table-row-odd {
+ background-color: #e6e6e6;
+ }
+
+
+/*******************************************************************************
+ * Strong
+ ******************************************************************************/
+.v-table-strong .v-table-caption-container {
+ font-weight: bold;
+ }
+
+
+/*******************************************************************************
+ * Borderless
+ ******************************************************************************/
+.v-table-borderless .v-table-header-wrap,
+.v-table-borderless .v-table-body {
+ border: none;
+ }
+
+div.v-table-borderless .v-table-body {
+ background: transparent;
+ }
\ No newline at end of file
--- /dev/null
+.v-tabsheet-spacertd div {
+ border-color: #b3b3b3;
+ border-left: none;
+ }
+
+.v-tabsheet-tabitem {
+ border: none;
+ border-bottom: 1px solid #b3b3b3;
+ padding: 0;
+ }
+
+.v-tabsheet-tabitem .v-caption {
+ padding: .2em .8em;
+ margin: 1px;
+ margin-bottom: 0;
+ }
+
+.v-tabsheet-tabitem-selected {
+ background-color: #c9c9c9;
+ border: 1px solid #b3b3b3;
+ border-bottom: none;
+ -webkit-border-top-left-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ -moz-border-radius-topleft: 3px;
+ -moz-border-radius-topright: 3px;
+ overflow: hidden;
+ }
+
+.v-tabsheet-tabitem-selected .v-caption {
+ background: transparent url(../../img/grad-light-top.png) repeat-x;
+ margin: 0;
+ padding-bottom: .25em;
+ -webkit-border-top-left-radius: 2px;
+ -webkit-border-top-right-radius: 2px;
+ -moz-border-radius-topleft: 2px;
+ -moz-border-radius-topright: 2px;
+ }
+
+.v-ie6 .v-tabsheet-tabitem-selected .v-caption {
+ background-image: none;
+ }
+
+.v-tabsheet-content {
+ background: #fff;
+ border-color: #b3b3b3;
+ }
+
+.v-tabsheet-deco {
+ height: 0;
+ background: transparent;
+ border-top: 1px solid #b3b3b3;
+ }
+
+.v-tabsheet-caption-close {
+ width: 14px;
+ height: 15px;
+ overflow: hidden;
+ text-indent: -50px;
+ background: transparent url(../../img/close-btn.png) no-repeat .5em 0;
+ vertical-align: middle;
+ padding: 0 0 0 .5em;
+ margin: .2em 0 0 0;
+ }
+
+.v-ie6 .v-tabsheet-caption-close {
+ background-image: url(../../img/close-btn-ie6.png);
+ }
+
+.v-tabsheet-caption-close:hover {
+ background-position: .5em -25px;
+ }
+
+.v-tabsheet-caption-close:active {
+ background-position: .5em -50px;
+ }
+
+/*******************************************************************************
+ * Scroller
+ ******************************************************************************/
+.v-tabsheet-scroller {
+ height: 14px;
+ margin-top: -1.6em;
+ position: relative;
+ float: right;
+ background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
+ border: 1px solid #b3b3b3;
+ border-radius: 6px;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ }
+
+.v-ie6 .v-tabsheet-scroller {
+ background-image: none;
+ }
+
+.v-tabsheet-scrollerPrev,
+.v-tabsheet-scrollerNext,
+.v-tabsheet-scrollerPrev-disabled,
+.v-tabsheet-scrollerNext-disabled,
+.v-tabsheet-scrollerPrev-disabled:active,
+.v-tabsheet-scrollerNext-disabled:active {
+ border: 1px solid #b3b3b3;
+ border-width: 0;
+ background: transparent url(../../img/tab-arrows.png) no-repeat 6px 50%;
+ width: 16px;
+ height: 14px;
+ overflow: hidden;
+ cursor: default;
+ opacity: .5;
+ filter: alpha(opacity=50);
+ }
+
+.v-ie6 .v-tabsheet-scrollerPrev,
+.v-ie6 .v-tabsheet-scrollerNext,
+.v-ie6 .v-tabsheet-scrollerPrev-disabled,
+.v-ie6 .v-tabsheet-scrollerNext-disabled{
+ background-image: url(../../img/tab-arrows-ie6.png);
+ }
+
+.v-tabsheet-scroller button::-moz-focus-inner {
+ border: none;
+ padding: 0;
+ }
+
+.v-tabsheet-scrollerNext,
+.v-tabsheet-scrollerNext-disabled,
+.v-tabsheet-scrollerNext-disabled:active {
+ background-position: -10px 50%;
+ border-left-width: 1px;
+ }
+
+.v-tabsheet-scrollerPrev:hover,
+.v-tabsheet-scrollerNext:hover {
+ opacity: .75;
+ filter: alpha(opacity=75);
+ }
+
+.v-tabsheet-scrollerPrev:active,
+.v-tabsheet-scrollerNext:active {
+ opacity: 1;
+ filter: none;
+ }
+
+.v-tabsheet-scrollerPrev-disabled,
+.v-tabsheet-scrollerNext-disabled,
+.v-tabsheet-scrollerPrev-disabled:active,
+.v-tabsheet-scrollerNext-disabled:active {
+ opacity: .1;
+ filter: alpha(opacity=10);
+ }
+
+
+
+/*******************************************************************************
+ * open-only-closable
+ ******************************************************************************/
+.v-tabsheet-open-only-closable .v-tabsheet-caption-close {
+ visibility: hidden;
+ }
+
+.v-tabsheet-open-only-closable .v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+ visibility: visible;
+ }
+
+
+/*******************************************************************************
+ * Borderless
+ ******************************************************************************/
+.v-tabsheet-borderless .v-tabsheet-content-borderless,
+.v-tabsheet-deco-borderless {
+ border: none;
+ background: transparent;
+ }
+
+.v-tabsheet-tabs-borderless .v-tabsheet-tabitem-selected,
+.v-tabsheet-tabs-borderless .v-tabsheet-tabitem-selected .v-caption {
+ background-color: transparent;
+ }
\ No newline at end of file
--- /dev/null
+input.v-textfield,
+textarea.v-textarea,
+.v-filterselect {
+ line-height: normal;
+ border: 1px solid #b3b3b3;
+ border-top-color: #808080;
+ border-color: rgba(0,0,0,.3);
+ border-top-color: rgba(0,0,0,.5);
+ background: #fff url(../../img/input-bg.png) repeat-x;
+ border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2);
+ -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2);
+ padding: .1em .2em;
+ margin: 0;
+ }
+
+body input.v-textfield,
+body textarea.v-textarea,
+body input.v-filterselect-input {
+ color: #222;
+ }
+
+.v-ie input.v-textfield,
+.v-ie textarea.v-textarea,
+.v-ie .v-filterselect {
+ border-top-color: #808080;
+ }
+
+body input.v-textfield-prompt,
+body textarea.v-textarea-prompt {
+ font-style: normal;
+ color: #999;
+ }
+
+input.v-textfield-focus,
+textarea.v-textarea-focus {
+ background-color: #fffce1;
+ }
+
+
+/*******************************************************************************
+ * Readonly
+ ******************************************************************************/
+input.v-textfield-readonly,
+textarea.v-textarea-readonly {
+ border: none;
+ background: transparent;
+ }
+
+
+/*******************************************************************************
+ * Small
+ ******************************************************************************/
+body input.v-textfield-small,
+body textarea.v-textarea-small,
+.v-datefield-small .v-datefield-textfield,
+.v-datefield-small .v-datefield-button,
+.v-filterselect-small .v-filterselect-input {
+ font-size: 0.85em;
+ }
+
+
+/*******************************************************************************
+ * Big (and big search)
+ ******************************************************************************/
+body input.v-textfield-big,
+body textarea.v-textarea-big,
+.v-datefield-big .v-datefield-textfield,
+.v-datefield-big .v-datefield-button,
+.v-filterselect-big .v-filterselect-input {
+ font-size: 1.2em;
+ }
+
+input.v-textfield-big[type=text],
+.v-datefield-big input.v-datefield-textfield[type=text] {
+ padding: .3em;
+ }
+
+textarea.v-textarea,
+.v-filterselect-big {
+ padding: .3em;
+ }
+
+input.v-textfield-big.v-textfield-search,
+.v-filterselect-search.v-filterselect-big {
+ background-image: url(../../img/magnifier-big.png);
+ background-repeat: no-repeat;
+ background-position: 4px 50%;
+ }
+
+input.v-textfield-big.v-textfield-search[type=text] {
+ padding-left: 26px;
+ }
+
+.v-filterselect-search.v-filterselect-big {
+ padding-left: 26px;
+ }
+
+
+/*******************************************************************************
+ * Search
+ ******************************************************************************/
+input.v-textfield-search,
+.v-filterselect-search {
+ background-image: url(../../img/magnifier.png);
+ background-repeat: no-repeat;
+ background-position: 3px 50%;
+ }
+
+input.v-textfield-search[type=text],
+.v-filterselect-search {
+ padding-left: 17px;
+ }
+
+.v-ie6 input.v-textfield-search {
+ /* Compensate for big style as well, since IE6 doesn't handle the selector */
+ padding-left: 21px;
+ }
\ No newline at end of file
--- /dev/null
+.v-tree-node-caption {
+ margin-left: 16px;
+ }
+
+.v-tree-node span {
+ padding: .1em .3em;
+ border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ }
+
+.v-tree-node-children {
+ padding-left: 16px;
+ }
+
+.v-tree-node-selected span {
+ background-color: #333;
+ }
\ No newline at end of file
--- /dev/null
+.v-window-closebox {
+ width: 14px;
+ height: 15px;
+ overflow: hidden;
+ text-indent: -50px;
+ background: transparent url(../../img/close-btn.png) no-repeat;
+ vertical-align: middle;
+ margin: 0;
+ top: .3em;
+ right: .4em;
+ z-index: 2;
+ }
+
+.v-ie6 .v-window-closebox {
+ background-image: url(../../img/close-btn-ie6.png);
+ }
+
+.v-window-closebox:hover {
+ background-position: 0 -25px;
+ }
+
+.v-window-closebox:active {
+ background-position: 0 -50px;
+ }
+
+.v-window {
+ background-image: none;
+ }
+
+.v-window-wrap {
+ border-radius: 3px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ background-image: url(../../img/grad-light-top.png);
+ background-repeat: repeat-x;
+ }
+
+.v-ie6 .v-window-wrap {
+ background: transparent !important;
+ }
+
+.v-window-outerheader {
+ padding: .2em 1.7em .5em 1.2em;
+ height: auto;
+ text-align: center;
+ }
+
+.v-window-header {
+ font-weight: normal;
+ }
+
+.v-window-footer {
+ height: 0;
+ position: static;
+ }
+
+.v-window-resizebox {
+ background: transparent url(../../img/resize.png) no-repeat;
+ width: 14px;
+ height: 14px;
+ bottom: 0;
+ }
\ No newline at end of file
--- /dev/null
+@import "sidebar-menu/sidebar-menu.css";
+@import "segment/segment.css";
+@import "toolbar/toolbar.css";
\ No newline at end of file
--- /dev/null
+.v-horizontallayout-segment .v-button {
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-left-width: 0;
+ zoom: 1;
+ }
+
+.v-horizontallayout-segment .v-button .v-button-wrap {
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ zoom: 1;
+ }
+
+.v-horizontallayout-segment .first {
+ -webkit-border-top-left-radius: 3px;
+ -webkit-border-bottom-left-radius: 3px;
+ -moz-border-radius-topleft: 3px;
+ -moz-border-radius-bottomleft: 3px;
+ border-left-width: 1px;
+ }
+
+.v-horizontallayout-segment .first .v-button-wrap {
+ -webkit-border-top-left-radius: 2px;
+ -webkit-border-bottom-left-radius: 2px;
+ -moz-border-radius-topleft: 2px;
+ -moz-border-radius-bottomleft: 2px;
+ }
+
+.v-horizontallayout-segment .last {
+ -webkit-border-top-right-radius: 3px;
+ -webkit-border-bottom-right-radius: 3px;
+ -moz-border-radius-topright: 3px;
+ -moz-border-radius-bottomright: 3px;
+ }
+
+.v-horizontallayout-segment .last .v-button-wrap {
+ -webkit-border-top-right-radius: 2px;
+ -webkit-border-bottom-right-radius: 2px;
+ -moz-border-radius-topright: 2px;
+ -moz-border-radius-bottomright: 2px;
+ }
\ No newline at end of file
--- /dev/null
+.sidebar-menu * {
+ white-space: normal;
+ }
+
+.sidebar-menu .v-label {
+ font-size: 0.85em;
+ text-transform: uppercase;
+ font-weight: bold;
+ letter-spacing: 0.03em;
+ padding: 1em .9em .3em;
+ text-shadow: 0 1px 0 rgba(255,255,255,1);
+ }
+
+.sidebar-menu .v-nativebutton {
+ width: 100%;
+ padding: .1em 1.1em;
+ border: none;
+ background: transparent;
+ text-align: left;
+ }
+
+.sidebar-menu .v-nativebutton:focus {
+ outline: none;
+ font-weight: bold;
+ }
+
+.sidebar-menu .tab-selected,
+.sidebar-menu .selected {
+ font-weight: bold;
+ background-color: #333;
+ color: #fff;
+ }
+
+.sidebar-menu .tab-selected:focus,
+.sidebar-menu .selected:focus {
+ outline: none;
+ }
\ No newline at end of file
--- /dev/null
+.v-csslayout-toolbar {
+ background: transparent url(../../img/grad-light-top.png) repeat-x;
+ border: 1px solid #b3b3b3;
+ border-width: 1px 0;
+ }
+
+.v-ie6 .v-csslayout-toolbar {
+ background-image: none;
+ }
+
+.v-csslayout-toolbar .v-csslayout-margin {
+ margin: 3px .3em 2px;
+ padding-bottom: 1px;
+ overflow: hidden;
+ }
+
+.v-csslayout-toolbar .v-button,
+.v-csslayout-toolbar .segment {
+ margin-right: 2px;
+ float: left;
+ }
+
+.v-csslayout-toolbar .segment .v-button {
+ margin-right: 0;
+ }
\ No newline at end of file
<zipfileset prefix="VAADIN/themes" dir="${output-dir}/WebContent/VAADIN/themes">
<patternset>
<include name="base/**/*" />
+ <include name="chameleon/**/*" />
<include name="liferay/**/*" />
<include name="runo/**/*" />
<include name="reindeer/**/*" />
- <include name="default/**/*" />
</patternset>
</zipfileset>
<patternset>
<include name="VAADIN/widgetsets/com.vaadin.terminal.gwt.DefaultWidgetSet/**/*" />
<include name="VAADIN/themes/base/**/*" />
- <include name="VAADIN/themes/default/**/*" />
+ <include name="VAADIN/themes/chameleon/**/*" />
<include name="VAADIN/themes/liferay/**/*" />
<include name="VAADIN/themes/runo/**/*" />
<include name="VAADIN/themes/reindeer/**/*" />
private static final String RUNO = "runo";
private static final String REINDEER = "reindeer";
private static final String LIFERAY = "liferay";
+ private static final String CHAMELEON = "chameleon";
/**
* @param args
combineTheme(new String[] { BASE, RUNO }, false, ver);
combineTheme(new String[] { BASE, REINDEER }, true, ver);
combineTheme(new String[] { BASE, LIFERAY }, false, ver);
+ // Chameleon uses some images from reindeer but does not require
+ // compilation together with it
+ combineTheme(new String[] { BASE, CHAMELEON }, false, ver);
}
/**
--- /dev/null
+/*
+@ITMillApache2LicenseForJavaFiles@
+ */
+package com.vaadin.ui.themes;
+
+
+public class ChameleonTheme extends BaseTheme {
+
+ public static final String THEME_NAME = "Chameleon";
+
+ /***************************************************************************
+ * Label styles
+ **************************************************************************/
+
+ /**
+ * Large font for main application headings
+ */
+ public static final String LABEL_H1 = "h1";
+
+ /**
+ * Large font for different sections in the application
+ */
+ public static final String LABEL_H2 = "h2";
+
+ /**
+ * Font for sub-section headers
+ */
+ public static final String LABEL_H3 = "h3";
+
+ /**
+ * Font for paragraphs headers
+ */
+ public static final String LABEL_H4 = "h4";
+
+ /**
+ * Big font for important or emphasized texts
+ */
+ public static final String LABEL_BIG = "big";
+
+ /**
+ * Small and a little lighter font
+ */
+ public static final String LABEL_SMALL = "small";
+
+ /**
+ * Very small and lighter font for things such as footnotes and component
+ * specific informations. Use carefully, since this style will usually
+ * reduce legibility.
+ */
+ public static final String LABEL_TINY = "tiny";
+
+ /**
+ * Adds color to the text (usually the alternate color of the theme)
+ */
+ public static final String LABEL_COLOR = "color";
+
+ /**
+ * Adds a warning icon on the left side and a yellow background to the label
+ */
+ public static final String LABEL_WARNING = "warning";
+
+ /**
+ * Adds an error icon on the left side and a red background to the label
+ */
+ public static final String LABEL_ERROR = "error";
+
+ /**
+ * Adds a spinner icon on the left side of the label
+ */
+ public static final String LABEL_LOADING = "loading";
+
+ /***************************************************************************
+ * Button styles
+ **************************************************************************/
+
+ /**
+ * Default action style for buttons (the button that gets activated when
+ * user presses 'enter' in a form). Use sparingly, only one default button
+ * per screen should be visible.
+ */
+ public static final String BUTTON_DEFAULT = "default";
+
+ /**
+ * Small sized button, use for context specific actions for example
+ */
+ public static final String BUTTON_SMALL = "small";
+
+ /**
+ * Big button, use to get more attention for the button action
+ */
+ public static final String BUTTON_BIG = "big";
+
+ /**
+ * Adds more padding on the sides of the button. Makes it easier for the
+ * user to hit the button.
+ */
+ public static final String BUTTON_WIDE = "wide";
+
+ /**
+ * Adds more padding on the top and on the bottom of the button. Makes it
+ * easier for the user to hit the button.
+ */
+ public static final String BUTTON_TALL = "tall";
+
+ /**
+ * Removes all graphics from the button, leaving only the caption and the
+ * icon visible. Useful for making icon-only buttons and toolbar buttons.
+ */
+ public static final String BUTTON_BORDERLESS = "borderless";
+
+ /**
+ * Places the button icon on top of the caption. By default the icon is on
+ * the left side of the button caption.
+ */
+ public static final String BUTTON_ICON_ON_TOP = "icon-on-top";
+
+ /**
+ * Places the button icon on the right side of the caption. By default the
+ * icon is on the left side of the button caption.
+ */
+ public static final String BUTTON_ICON_ON_RIGHT = "icon-on-right";
+
+ /**
+ * Removes the button caption and only shows its icon
+ */
+ public static final String BUTTON_ICON_ONLY = "icon-only";
+
+ /**
+ * Makes the button look like it is pressed down. Useful for creating a
+ * toggle button.
+ */
+ public static final String BUTTON_DOWN = "down";
+
+ /***************************************************************************
+ * TextField styles
+ **************************************************************************/
+
+ /**
+ * Small sized text field with small font
+ */
+ public static final String TEXTFIELD_SMALL = "small";
+
+ /**
+ * Large sized text field with big font
+ */
+ public static final String TEXTFIELD_BIG = "big";
+
+ /**
+ * Adds a magnifier icon on the left side of the fields text
+ */
+ public static final String TEXTFIELD_SEARCH = "search";
+
+ /***************************************************************************
+ * Select styles
+ **************************************************************************/
+
+ /**
+ * Small sized select with small font
+ */
+ public static final String SELECT_SMALL = "small";
+
+ /**
+ * Large sized select with big font
+ */
+ public static final String SELECT_BIG = "big";
+
+ /**
+ * Adds a magnifier icon on the left side of the fields text
+ */
+ public static final String COMBOBOX_SEARCH = "search";
+
+ /**
+ * Adds a magnifier icon on the left side of the fields text
+ */
+ public static final String COMBOBOX_SELECT_BUTTON = "select-button";
+
+ /***************************************************************************
+ * DateField styles
+ **************************************************************************/
+
+ /**
+ * Small sized date field with small font
+ */
+ public static final String DATEFIELD_SMALL = "small";
+
+ /**
+ * Large sized date field with big font
+ */
+ public static final String DATEFIELD_BIG = "big";
+
+ /***************************************************************************
+ * Panel styles
+ **************************************************************************/
+
+ /**
+ * Removes borders and background color from the panel
+ */
+ public static final String PANEL_BORDERLESS = "borderless";
+
+ /**
+ * Adds a more vibrant header for the panel, using the alternate color of
+ * the theme, and adds slight rounded corners (not supported in all
+ * browsers)
+ */
+ public static final String PANEL_BUBBLE = "bubble";
+
+ /***************************************************************************
+ * SplitPanel styles
+ **************************************************************************/
+
+ /**
+ * Reduces the split handle to a minimal size (1 pixel)
+ */
+ public static final String SPLITPANEL_SMALL = "small";
+
+ /***************************************************************************
+ * TabSheet styles
+ **************************************************************************/
+
+ /**
+ * Removes borders and background color from the tab sheet
+ */
+ public static final String TABSHEET_BORDERLESS = "borderless";
+
+ /***************************************************************************
+ * Accordion styles
+ **************************************************************************/
+
+ /**
+ * Makes the accordion background opaque (non-transparent)
+ */
+ public static final String ACCORDION_OPAQUE = "opaque";
+
+ /***************************************************************************
+ * Table styles
+ **************************************************************************/
+
+ /**
+ * Removes borders and background color from the table
+ */
+ public static final String TABLE_BORDERLESS = "borderless";
+
+ /**
+ * Makes the column header and content font size smaller inside the table
+ */
+ public static final String TABLE_SMALL = "small";
+
+ /**
+ * Makes the column header and content font size bigger inside the table
+ */
+ public static final String TABLE_BIG = "big";
+
+ /**
+ * Adds a light alternate background color to even rows in the table.
+ */
+ public static final String TABLE_STRIPED = "striped";
+
+ /***************************************************************************
+ * ProgressIndicator styles
+ **************************************************************************/
+
+ /**
+ * Reduces the height of the progress bar
+ */
+ public static final String PROGRESS_INDICATOR_SMALL = "small";
+
+ /**
+ * Increases the height of the progress bar. If the indicator is in
+ * indeterminate mode, shows a bigger spinner than the regular indeterminate
+ * indicator.
+ */
+ public static final String PROGRESS_INDICATOR_BIG = "big";
+
+ /**
+ * Displays an indeterminate progress indicator as a bar with animated
+ * background stripes. This style can be used in combination with the
+ * "small" and "big" styles.
+ */
+ public static final String PROGRESS_INDICATOR_INDETERMINATE_BAR = "bar";
+
+ /***************************************************************************
+ * Window styles
+ **************************************************************************/
+
+ /**
+ * Sub-window style that makes the window background opaque (i.e. not
+ * semi-transparent).
+ */
+ public static final String WINDOW_OPAQUE = "opaque";
+
+ /***************************************************************************
+ * Compound styles
+ **************************************************************************/
+
+ /**
+ * Creates a context for a segment button control. Place buttons inside the
+ * segment, and add "<code>first</code>" and "<code>last</code>" style names
+ * for the first and last button in the segment. Then use the
+ * {@link #BUTTON_DOWN} style to indicate button states.
+ *
+ * E.g.
+ *
+ * <pre>
+ * HorizontalLayout ("segment")
+ * + Button ("first down")
+ * + Button ("down")
+ * + Button
+ * ...
+ * + Button ("last")
+ * </pre>
+ *
+ * You can also use most of the different button styles for the contained
+ * buttons (e.g. {@link #BUTTON_BIG}, {@link #BUTTON_ICON_ONLY} etc.).
+ */
+ public static final String COMPOUND_HORIZONTAL_LAYOUT_SEGMENT = "segment";
+
+ /**
+ * Use this mixin-style in combination with the
+ * {@link #COMPOUND_HORIZONTAL_LAYOUT_SEGMENT} style to make buttons with
+ * the "down" style use the themes alternate color (e.g. blue instead of
+ * gray).
+ *
+ * E.g.
+ *
+ * <pre>
+ * HorizontalLayout ("segment segment-alternate")
+ * + Button ("first down")
+ * + Button ("down")
+ * + Button
+ * ...
+ * + Button ("last")
+ * </pre>
+ */
+ public static final String COMPOUND_HORIZONTAL_LAYOUT_SEGMENT_ALTERNATE = "segment-alternate";
+
+ /**
+ * Creates an iTunes-like menu from a CssLayout or a VerticalLayout. Place
+ * plain Labels and NativeButtons inside the layout, and you're all set.
+ *
+ * E.g.
+ *
+ * <pre>
+ * CssLayout ("sidebar-menu")
+ * + Label
+ * + NativeButton
+ * + NativeButton
+ * ...
+ * + Label
+ * + NativeButton
+ * </pre>
+ */
+ public static final String COMPOUND_LAYOUT_SIDEBAR_MENU = "sidebar-menu";
+
+ /**
+ * Adds a toolbar-like background for the layout, and aligns Buttons and
+ * Segments horizontally. Feel free to use different buttons styles inside
+ * the toolbar, like {@link #BUTTON_ICON_ON_TOP} and
+ * {@link #BUTTON_BORDERLESS}
+ */
+ public static final String COMPOUND_CSSLAYOUT_TOOLBAR = "toolbar";
+}