/**********************************************************************
 **********************************************************************
 CHARCOAL

 This is the non-structure stylesheet for the charcoal theme. It sets
 the style values of the current theme. The values in this file are for
 the same elements as the default stylesheets, but are specific to the
 this theme. As a result, you are free to modify any of the values in
 this file, but be sure to make a backup of  the file in case you must
 revert to it.

 **********************************************************************
 **********************************************************************/




/**************************************************
     Variables
 **************************************************/
:root {

    /****************************************
    * Common
    ****************************************/
    --default-blue-dark: #20558a;
    --default-blue-light: #dbe8f5;

    --background-color: #ffffff;
    /*--background-color-alt: #f1f1f1;*/
    --background-color-alert: #3fdea4;
    --background-color-error: #ff0000;
    /*--background-color-hover: #dbe8f5;*/

    --border-color: #20558a;

    --font-color: #20558a;
    --font-color-alert: #000000;
    --font-color-error: #ffffff;
    --link-color: #22558a;


    /****************************************
    * Window
    ****************************************/

    /*scroll bar*/
    /*--scrollbar__track--color: #555555;*/
    /*--scrollbar__thumb--color: #777777;*/


    /****************************************
    * Structure
    ****************************************/

    /*body*/
    --body--background-color: #f9f9f9;
    --body--background-image: url('/common/css/themes/1001/clouds-01.jpg');

    /*container*/
    --container-outer--background-image: url('/images/formatting/transparent_20.png');
    --container-inner--background-color: #f9f9f9;


    /*header outer*/
    --header-outer--background-color: #20558a;
    --header-outer-1--background-color: var(--header-outer--background-color);
    --header-outer-2--background-color: var(--header-outer--background-color);
    --header-outer-3--background-color: var(--header-outer--background-color);

    --header-outer--font-color: #FFFFFF;
    --header-outer-1--font-color: var(--header-outer--font-color);
    --header-outer-2--font-color: var(--header-outer--font-color);
    --header-outer-3--font-color: var(--header-outer--font-color);


    /*header inner*/
    --header-inner--font-color: #000000;


    /*content*/
    --content--background-color: #ffffff;


    /*footer inner*/
    --footer-inner--background-color: #dbe8f5;
    --footer-inner-1--background-color: var(--footer-inner--background-color);
    --footer-inner-2--background-color: var(--footer-inner--background-color);
    --footer-inner-3--background-color: var(--footer-inner--background-color);

    --footer-inner--font-color: #AAAAAA;
    --footer-inner-1--font-color: var(--footer-inner--font-color);
    --footer-inner-2--font-color: var(--footer-inner--font-color);
    --footer-inner-3--font-color: var(--footer-inner--font-color);


    /*footer outer*/
    --footer-outer--background-color: #dbe8f5;
    --footer-outer-1--background-color: var(--footer-outer--background-color);
    --footer-outer-2--background-color: var(--footer-outer--background-color);
    --footer-outer-3--background-color: var(--footer-outer--background-color);

    --footer-outer--font-color: #22558a;
    --footer-outer-1--font-color: var(--footer-outer--font-color);
    --footer-outer-2--font-color: var(--footer-outer--font-color);
    --footer-outer-3--font-color: var(--footer-outer--font-color);


    /****************************************
    * Elements
    ****************************************/

    /*panels*/
    --panel--background-color: #f5fcfe;
    --panel--background-color-hover: var(--default-blue-light);
    --panel--background-color-disabled: #eeeeee;

    /*write icon*/
    /*--content-write--background-color: #1CF57F;*/
    /*--content-write--background-color-hover: #1CE673;*/



    /****************************************
    * Forms
    ****************************************/

    /*input boxes*/
    --input--background-color: #ffffff;
    --input--border-color: #d9d9d9;
    --input--font-color: #4a6994;
    --placeholder--background-color: var(--input--background-color);
    --placeholder--font-color: #89959f;

    --frm-input--background-color: #ffffff;
    --frm-input--border-color: #d9d9d9;
    --frm-input--font-color: #4a6994;
    --frm-input-placeholder--background-color: var(--input--background-color);
    --frm-input-placeholder--font-color: #89959f;


    /*input borders*/
    --input-border-color: #3C3F41;
    --input-border-color-focus: #1CF57F;

    --frm-input-border-color: #3C3F41;
    --frm-input-border-color-focus: #1CF57F;


    /*buttons*/
    --button--background-color: var(--default-blue-light);
    --button--background-color-disabled: #eeeeee;
    --button--background-color-hover: var(--default-blue-dark);

    --button-font-color: var(--default-blue-dark);
    --button-font-color-disabled: #cccccc;
    --button-font-color-hover: var(--default-blue-light);

    --frm-button--background-color: var(--default-blue-light);
    --frm-button--background-color-disabled: #eeeeee;
    --frm-button--background-color-hover: var(--default-blue-dark);

    --frm-button-font-color: var(--default-blue-dark);
    --frm-button-font-color-disabled: #cccccc;
    --frm-button-font-color-hover: var(--default-blue-light);



    /****************************************
    * Images
    ****************************************/

    /*logo*/
    --header_container_logo: url('/images/general/affinety_bluegray_440x80.png');

}