Markup Inline Style. These styles are inlined into the head of the document from a span tag. These are the "above the fold" styles. This particular style can also support variables from the page
          <span OnPreRender="InlineHeaderStyle" runat="server">
            .inlinespan {
                background-color:purple;
                padding: 1em;
                color:white;
                font-size: <%#exampleCSSValue%>em;
            }
          </span>
        
Inline Style. These styles are inlined into the head of the document. These are the "above the fold" styles.
        @if $level == "inline"
        {
            .inline {
                background-color:red;
                padding: 1em;
            }
        }
        
Header Style. These styles will appear as a style link tag in the head. Optimally this file is not used in favor of all styles being "above the fold" or below it.
        @if $level == "head"
        {
            .header {
                background-color:yellow;
                padding: 1em;
            }
        }
        
Entire stylesheets can be moved to the head via
        <uc1:header_link_tag rel="stylesheet" type="text/css" href="/css/jquery.tag-editor.css" runat="server"/>
        
Index Inline Style. Any scss files in /css/auto-bundles get automatically bundled and are available under the corresponding name via the <uc1:header_inline_bundle_tag. These styles are also above the fold and are per template.
        /css/auto-bundles/index_head.scss
        <uc1:header_inline_bundle href="~/css/auto-bundles/index_inline.scss" runat="server"/>   		
        
Index Header Style. Per page styles that appear as a style link tag in the head. Optimally this file is not used in favor or above or below the fold styles.
        /css/auto-bundles/index_line.scss
        <uc1:header_link_tag href="~/css/auto-bundles/index_head.scss" rel="stylesheet" deferred="False" isBundle="True" runat="server"/>   		
        
After Style. Styles that are loaded after the </body> tag is processed. This is for everything that is not need seen on first render and will not cause a FOBUC (Flash of Butt Ugly Content). This is where CSS optimization really pays off. Something like CSS for a gallery could go here if the gallery could only be seen after a click on the page.
        @if $level == "after"
        {
            .after {
                background-color:green;
                padding: 1em;
            }
        }
        
Entire stylesheets can be moved to the head but loaded deferred via
        <uc1:header_link_tag rel="stylesheet" type="text/css" href="/css/jquery.tag-editor.css" deferred="True" runat="server"/>
        
A couple of pdf references eau-does-giving.pdf does-not-exist.pdf