:root {

    /* Basic style */
    --mainBackground:#333;
    --mainTextColor:#eee;
    --mainLinkColor:#fff;
    --mainLinkColorActive:#ff0;

    /* Should be blue */
    --infoBackgroundColor:#006;
    --infoTextColor:#ccf;
    /* Should be yellow */
    --warningBackgroundColor:#660;
    --warningTextColor:#fff;
    /* Should be red */
    --errorBackgroundColor: #600;
    --errorTextColor: #fff;
    /* Should be green */
    --completedBackgroundColor:#cfc;
    --completedTextColor:#090;
    /* Disabled. Should be grey. */
    --disabledBackgroundColor: #333;
    --disabledTextColor: #666;

    /* Drag-drop droppable area colours */
    --dragDropDroppableBackgroundColor:var(--completedBackgroundColor);
    --dragDropDroppableTextColor:var(--completedTextColor);
    --dragDropActiveDroppableBackgroundColor:var(--warningBackgroundColor);
    --dragDropActiveDroppableTextColor:var(--warningTextColor);

    /* Page header */
    --headerOpacity:1;
    --headerBackground: #000;
    --headerTextColor: #fff;
    --headerBottomBorder: 2px solid #ff0;
    --searchBoxColor: #fff;
    --searchBoxBackground: #333;
    --searchBoxOpacity: 1;
    --searchResultColor:#eee;
    --searchResultBackground:#333;
    --searchResultBackgroundCurrent:#990;
    --searchResultBackgroundHover:#900;
    --breadcrumbBackgroundImageFirst: none;
    --breadcrumbBackgroundImage: none;
    --headerControlBackgroundImage:none;

    /* Boxes and tabs */
    --boxAndTabBorder: 2px solid #ccc;
    --boxAndTabOpacity: 1;
    --boxAndCurrentTabHeaderBackgroundColor: #ccc;
    --boxAndCurrentTabHeaderTextColor: #000;
    --boxBodyBackground: #000;
    --tabHeaderTextColor: #fff;
    --tabHeaderBackgroundColor: #333;
    --tabBodyBackground: #000;
    --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:#333;
    --labelTextColor:#ccc;
    --labelHelpTextColor:yellow;
    --labelErrorTextColor:#f99;
    --labelOpacity:1;
    --textBoxColor:#fff;
    --textBoxBackground:#666;
    --placeHolderTextColor:#999;
    --buttonBackground:#fff;
    --buttonTextColor:#000;
    --datePickerSelectedButtonBackgroundColor:#fff;
    --datePickerUnselectedButtonBackgroundColor:#999;
    --datePickerWeekdayButtonTextColor:#000;
    --datePickerWeekendButtonTextColor:#600;

    /* "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:#ff0;
    --tableCellBottomBorder:1px solid #999;
    --tableRowHoverColor:#660;

}
