/* 
THIS PAGE IS USED BY BOTH THE INTERNAL AND EXTERNAL SITES
}
*/
 
 :root {
    /* live Site */
   /* --site-background: rgba(247, 3, 3, 0.333); */
    /* Development Site */
    --site-background: rgba(0,0,0,0.10);
    --header-height: 60px;
    --nav-height: 30px;
    --footer-height: 40px;
    --section-h2-height: 26px;
    --table-page-navagation-height: 50px;
    --nav-padding: 4px;                       /* accounts for 4px line at the bottom od the navigation */

    --default-font: Aerial, Helvetica, sans-serif;
       
    --first-letter: #FFCC00;
    --font-colour-0: hsl(0, 0%, 0%);
    --font-colour-100: hsl(0, 0%, 100%);

    /*Shadow around body*/
    --page-shadow:  rgba(0,0,0,0.75);

    --background-100: hsl(213, 45%, 100%);
    --background-95: hsl(213, 45%, 95%);
    --background-92: hsl(213, 45%, 92%);
    --background-90: hsl(213, 45%, 90%);
    --background-80: hsl(213, 45%, 80%);
    --background-70: hsl(213, 45%, 70%);
    --background-65: hsl(213, 45%, 65%);
    --background-60: hsl(213, 45%, 60%);
    --background-50: hsl(213, 45%, 50%);
    --background-36: hsl(213, 45%, 40%);    /*Header */
    --background-30: hsl(213, 45%, 32%);
    --background-25: hsl(213, 45%, 28%);        
    --background-20: hsl(213, 45%, 20%);

    --background-warning-60: hsl(0, 36%, 60%);
    --background-warning-30: hsl(0, 36%, 30%);
    --background-warning-20: hsl(0, 96%, 20%);

    /*Button box colour*/
    --button-90: hsl(0, 0%, 90%);
    --button-75: hsl(0, 0%, 75%);
    --button-20: hsl(0, 0%, 20%);

    /*Input box colour*/
    --input-focus: hsl(60, 100%, 90%);
    --input-edit: hsl(60, 100%, 90%);
    --input-readonly: hsl(0, 0%, 100%);

    /*Height of the heading in the section element*/
    --heading-height: 25px;

    --table-light: hsl(0, 0%, 100%);
    --table-dark: hsl(213, 45%, 90%);
    --table-header: #c0c0c0;
    --table-footer: #c0c0c0;

    --button-default: hsl(213, 45%, 40%);  
    --button-hover: hsl(213, 45%, 50%);  
    --button-disabled: hsl(213, 45%, 40%);  
}