:root {

    /* Basic style */
    --mainBackground:#ccf url(/skins/fi_oulu_Lake/background.jpg) fixed no-repeat;
    --mainTextColor:#003;
    --mainLinkColor:#006;
    --mainLinkColorActive:#009;

    /* Should be blue */
    --infoBackgroundColor:#ccf;
    --infoTextColor:#003;
    /* Should be yellow */
    --warningBackgroundColor:#ffc;
    --warningTextColor:#330;
    /* Should be red */
    --errorBackgroundColor: #fcc;
    --errorTextColor: #300;
    /* Should be green */
    --completedBackgroundColor:#cfc;
    --completedTextColor:#030;
    /* Disabled. Should be grey. */
    --disabledBackgroundColor: #cce;
    --disabledTextColor: #336;

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

    /* Page header */
    --headerOpacity:0.5;
    --headerBackground: #006;
    --headerTextColor: #fff;
    --headerBottomBorder: 2px solid #003;
    --searchBoxColor: #ccf;
    --searchBoxBackground: #336;
    --searchBoxOpacity: 1;
    --searchResultColor:#336;
    --searchResultBackground:#ccf;
    --searchResultBackgroundCurrent:#ccc;
    --searchResultBackgroundHover:#999;
    --breadcrumbBackgroundImageFirst: none;
    --breadcrumbBackgroundImage: none;
    --headerControlBackgroundImage:none;

    /* Boxes and tabs */
    --boxAndTabBorder: 2px solid #006;
    --boxAndTabOpacity: 0.7;
    --boxAndCurrentTabHeaderBackgroundColor: #006;
    --boxAndCurrentTabHeaderTextColor: #ccf;
    --boxBodyBackground: #ddf;
    --tabHeaderTextColor: #336;
    --tabHeaderBackgroundColor: #fff;
    --tabBodyBackground: #ddf;
    --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:#99c;
    --labelTextColor:#006;
    --labelHelpTextColor:#006;
    --labelErrorTextColor:#600;
    --labelOpacity:1;
    --textBoxColor:#003;
    --textBoxBackground:#ccf;
    --placeHolderTextColor:#999;
    --buttonBackground:#006;
    --buttonTextColor:#fff;
    --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:#006;
    --tableCellBottomBorder:1px solid #669;
    --tableRowHoverColor:#99f;

}
