PicketLink protection stops JSF 2.2 resource contr

I have a JSF 2.2 webapp with a contract and several pages, located directly in the WebContent folder. The contract consists of an image, a template file template.xhtml and a css file global.css. So far everything is working as expected.

Now I want to use PicketLink for user authentication and authorization and have followed a tutorial (http://www.ocpsoft.org/security/simple-java-ee-jsf-login-page-with-jboss-picketlink-security/), but when accessing my pages the image and css files are unable to be loaded, only the template applies, so my page has no CSS styles applied at all and in the Firefox Inspector there is a line that reads (translated from German): "Stylesheet http://localhost:8080/MyTestProject/login.xhtml wasn't loaded because its MIME type is "text/html" and not "text/css"".

After replacing

builder.http().allPaths().authenticateWith().form()... and so on

in the HttpSecurityConfiguration class with

builder.http().allPaths().unprotected()

the image and css can be loaded again.

I have tried the following (and some other paths) but it did not solve the problem:

.forPath("/contracts/*").unprotected();

How can I exclude the contracts folder from the PicketLink protection?

Here is my complete HttpSecurityConfiguration class:

@ApplicationScoped
public class HttpSecurityConfiguration {

    public void onInit(@Observes SecurityConfigurationEvent event) {

    SecurityConfigurationBuilder builder = event.getBuilder();

    builder
    .http()
    .allPaths()
    .authenticateWith()
    .form()
    .loginPage("/login.xhtml")
    .errorPage("/loginError.xhtml")
    .restoreOriginalRequest()
    .forPath("/logout")
    .logout()
    .redirectTo("/index.xhtml")
    .forPath("/index.xhtml")
    .unprotected()
    //      .forPath("/contracts/*")
    //      .unprotected()
    ;
  }
}

EDIT In reply to the comment from Kukeltje, I include the CSS in the template with

<h:head>
   <title><ui:insert name="title">MyTestProject</ui:insert></title>
   <h:outputStylesheet name="global.css" />
</h:head>

and the image with

<h:graphicImage class="feature" name="logo-main.png" width="900" height="270" />

I also tried to include javax.faces.resource as unprotected, still not working though.

EDIT #2 The following is also not working, I got the idea from the documentation (PicketLink Reference Chapter 12.2):

.forPath("/*.png").unprotected()
.forPath("/*.css").unprotected()

I was able to solve my problem with the following security configuration:

.forPath("/javax.faces.resource/*.png.xhtml").unprotected()

I've seen in my Firefox Inspector that the browser tried to load the image from /MyTestProject/javax.faces.resource/logo-main.png.xhtml?con=TemplateBlue, so trying the above seemed logical and it works!