:root {

    /* Basic style */
    --mainBackground:#ccc;
    --mainTextColor:#222;
    --mainLinkColor:#444;
    --mainLinkColorActive:#600;

    /* Info/warn/error/completed styles */
    /* Info. Should be blue */
    --infoBackgroundColor:#ccf;
    --infoTextColor:#336;
    /* Warn. Should be yellow */
    --warningBackgroundColor:#ffc;
    --warningTextColor:#000;
    /* Error. Should be red */
    --errorBackgroundColor: #fcc;
    --errorTextColor: #f00;
    /* Completed. Should be green */
    --completedBackgroundColor:#cfc;
    --completedTextColor:#030;
    /* Disabled. Should be grey. */
    --disabledBackgroundColor: #eee;
    --disabledTextColor: #666;

    --dragDropDroppableBackgroundColor:var(--completedBackgroundColor);
    --dragDropDroppableTextColor:var(--completedTextColor);
    --dragDropActiveDroppableBackgroundColor:var(--warningBackgroundColor);
    --dragDropActiveDroppableTextColor:var(--warningTextColor);

    /* Page header */
    --headerOpacity:1;
    --headerBackground: #333;
    --headerTextColor: #ccc;
    --headerBottomBorder: 2px solid #0f0;
    --searchBoxColor: #333;
    --searchBoxBackground: #fff;
    --searchBoxOpacity: 1;
    --searchResultColor:#333;
    --searchResultBackground: #eee;
    --searchResultBackgroundCurrent: yellow;
    --searchResultBackgroundHover: orange;
    --breadcrumbBackgroundImageFirst: url(../../skins/default/images/buttons/bc_first.png);
    --breadcrumbBackgroundImage: url(../../skins/default/images/buttons/bc_crumb.png);
    --headerControlBackgroundImage:url(../../skins/default/images/buttons/control.png);

    /* Boxes and tabs */
    --boxAndTabBorder: 2px solid #333;
    --boxAndTabOpacity: 1;
    --boxAndCurrentTabHeaderBackgroundColor: #333;
    --boxAndCurrentTabHeaderTextColor: #fff;
    --boxBodyBackground: #eee;
    --tabHeaderTextColor: #333;
    --tabHeaderBackgroundColor: #ccc;
    --tabBodyBackground: #eee;
    --errorTabHeaderBackground: var(--errorBackgroundColor);
    --errorTabHeaderTextColor: var(--errorTextColor);
    --warningTabHeaderBackground: var(--warningBackgroundColor);
    --warningTabHeaderTextColor: var(--warningTextColor);
    --completedTabHeaderBackground: var(--completedBackgroundColor);
    --completedTabHeaderTextColor: var(--completedTextColor);
    --disabledTabHeaderBackground: var(--disabledBackgroundColor);
    --disabledTabHeaderTextColor: var(--disabledTextColor);

    /* Forms */
    --labelBackground:#ccc;
    --labelTextColor:#333;
    --labelHelpTextColor:#060;
    --labelErrorTextColor:#600;
    --labelOpacity:0.9;
    --textBoxColor:#333;
    --textBoxBackground:#fff;
    --placeHolderTextColor:#666;
    --buttonBackground:#333;
    --buttonTextColor:#ccc;
    --datePickerSelectedButtonBackgroundColor:#000;
    --datePickerUnselectedButtonBackgroundColor:#666;
    --datePickerWeekdayButtonTextColor:#ccc;
    --datePickerWeekendButtonTextColor:#f66;

    /* "Updating" animation. The !important declaration here is, well, important. */
    --updatingBackgroundImage: url(../../skins/default/images/stripes.png) !important;
    --updatingBackgroundEndPosition: 500% 500% !important;
    --updatingTransition: background-position 40s linear !important;

    /* Tables */
    --tableHeaderColor:#000;
    --tableHeaderBackgroundColor:#eee;
    --tableCellBottomBorder:1px solid #999;
    --tableRowHoverColor:#ffc;

}