@(projectName: Option[String], isCrossword: Boolean = false, isInteractive: Boolean = false)(implicit request: RequestHeader, context: model.ApplicationContext)

@import conf.switches.Switches._
@import play.api.Mode.Dev
@import conf.Static
@import html.HtmlPageHelpers.{ContentCSSFile}
@import views.support.Commercial.isAdFree
@import experiments.{ActiveExperiments}

@if(FontSwitch.isSwitchedOn) {
    @fragments.fontFaces()
}

@* any images in head need to go here (or they'll be relative to the page)} *@
<style class="js-loggable">
    .svg .i,
    .svg .caption:before,
    .svg figcaption:before,
    .svg blockquote.quoted:before {
        background-image: none;
    }
    .is-updating {
        background-image: url(@Static("images/auto-update-activity.gif"));
    }
    .is-updating--dark {
        background-image: url(@Static("images/auto-update-activity-dark.gif"));
    }
    .tweet__user-name:before {
        background-image: url(@Static("images/twitter/bird.svg"));
    }

    .no-svg .inline-guardian-logo-160 { background-image: url(@Static("images/logo/guardian-logo-160.png")); }
    .no-svg .inline-guardian-logo-320 { background-image: url(@Static("images/logo/guardian-logo-320.png")); }
    .no-svg .inline-observer-logo-160 { background-image: url(@Static("images/logo/observer-logo-160.png")); }
    .no-svg .inline-observer-logo-320 { background-image: url(@Static("images/logo/observer-logo-320.png")); }
</style>

@*
  - Include IE < 9 [(lt IE 9)]
  - Exclude IE Mobile [&(!IEMobile)]
*@
<!--[if (lt IE 9)&(!IEMobile)]>
    @fragments.stylesheetLink(common.Assets.css.headOldIE(projectName), isCrossword)
    @fragments.stylesheetLink(s"stylesheets/old-ie.$ContentCSSFile.css", isCrossword)
<![endif]-->

@*
  - Include IE 9 [(IE 9)]
  - Exclude IE Mobile [&(!IEMobile)]
*@
<!--[if (IE 9)&(!IEMobile)]>
    @fragments.stylesheetLink(common.Assets.css.headIE9(projectName), isCrossword)
    @fragments.stylesheetLink(s"stylesheets/ie9.$ContentCSSFile.css", isCrossword)
<![endif]-->

@*
  - Include all browsers [<!-->]
  - Exclude IE < 10 [(gt IE 9)]
  - Include IE Mobile [|(IEMobile)]
*@
<!--[if (gt IE 9)|(IEMobile)]><!-->
@if(context.environment.mode == Dev || !InlineCriticalCss.isSwitchedOn) {

    <link rel="stylesheet" id="head-css" data-reload="head@projectName.map("." + _).getOrElse(s".$ContentCSSFile")" type="text/css" href="@Static("stylesheets/head" + projectName.map("." + _).getOrElse(s".$ContentCSSFile") + ".css")" />

    @if(isInteractive) {
        <link rel="stylesheet" id="head-interactive" data-reload="head.interactive" type="text/css" href="@Static("stylesheets/head.interactive.css")" />
    }
} else {
    <style class="js-loggable">
        @Html(common.Assets.css.head(projectName))
        @if(isInteractive) {
            @Html(common.Assets.css.interactive)
        }
    </style>
}
@fragments.stylesheetLink(common.Assets.css.projectCss(projectName), isCrossword)

<!--<![endif]-->
<link rel="stylesheet" media="print" type="text/css" href="@Static("stylesheets/print.css")" />