<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*

 All css files under the Live folder are included on all public site pages.  
 They are bundled together in a single "virtual css" file which is requested from the browser.

 This makes it easy to reuse style overrides across the site.
 
 If however you are trying to target only specific pages, then there are classes added to 
 the body element which allows you to do this. 
 
 You should "view source" of the page you are trying to style to find the styles you need.
 
 There is a "template-" class name which correponds to the page template 
    
    e.g. &lt;body class="template-gridwithcarousel"&gt;

There is a "page-" class name which corresponds to the url of the current page

    e.g.  /wellbeing/ will have this html: &lt;body class="page-wellbeing"

The "page-" class is recursive down the url structure so you can apply classes to whole sections of the site:

    e.g. /wellbeing/resources will have these classes: &lt;body class="page-wellbeing page-resources"

 
To use this, use a css selector on the body element

  e.g.

        .page-wellbeing .site-content p {
            color:darkred;
        }
        
*/
</pre></body></html>