Mvc 4 Portable Areas css

Question

I have followed the following example(http://elegantcode.com/2012/04/06/mvc-portable-areas/) yet my css is not being found.

Here is my area registration:

public class AdminAreaRegistration : PortableAreaRegistration
{
    public override string AreaName
    {
        get
        {
            return "Admin";
        }
    }

    private void RegisterRoutes(AreaRegistrationContext context)
    {
        context.MapRoute(
            AreaName + "_scripts",
            base.AreaRoutePrefix + "/Scripts/{resourceName}",
            new { controller = "EmbeddedResource", action = "Index", resourcePath = "scripts" },
            new[] { "MvcContrib.PortableAreas" }
        );

        context.MapRoute(
            AreaName + "_content",
            base.AreaRoutePrefix + "/Content/{resourceName}",
            new { controller = "EmbeddedResource", action = "Index", resourcePath = "content" },
            new[] { "MvcContrib.PortableAreas" }
        );

        context.MapRoute(
            AreaName + "_images",
            base.AreaRoutePrefix + "/images/{resourceName}",
            new { controller = "EmbeddedResource", action = "Index", resourcePath = "images" },
            new[] { "MvcContrib.PortableAreas" }
        );

        context.MapRoute(
            AreaName + "_default",
            base.AreaRoutePrefix + "/{controller}/{action}/{id}",
            new { action = "Index", id = UrlParameter.Optional },
            new[] { "ScenicTours.SecurityAdmin.UI.www.Areas.SecurityAdmin.Controllers", "MvcContrib" }
        );
    }

    public override void RegisterArea(AreaRegistrationContext context, IApplicationBus bus)
    {
        RegisterRoutes(context);
        RegisterAreaEmbeddedResources();
    }
}

here is my area _Layout.cshtml: @model dynamic

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}


@section HeaderScript {
    <script src="@Url.Content("~/Admin/Scripts/Admin.js")"></script>
    @RenderSection("HeaderScript", required: false)
}

@section HeaderStyles {
    <link href="@Url.Content("~/Admin/Content/Admin.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Admin/Content/AdminStyle.css")" rel="stylesheet" type="text/css" />
}

@section SubMenuItems {
    <li>
        @Html.ActionLink("Users", "Users", "Main", new { area = "Admin" }, null)
    </li>
    <li>
        @Html.ActionLink("Roles", "Roles", "Main", new { area = "Admin" }, null)
    </li>
}


<h5>This is _Layout.cshtml in the Admin area</h5>
@RenderBody()

I can navigate to any controller action in the area ok, but every time there is an embeded resource that is a css or js I get a 404 error.

NOTE: I can confirm that: 1. each css and js is set to be an enbeded resource. 2. Both the area and main project are mvc 4 projects using .net 4.5

Can anyone help?