Template source: base_root.html

{% load cache %}
{% load compress %}
{% load featured_collections %}
{% load flatpages %}
{% load footer %}
{% load format_message %}
{% load get_setting %}
{% load i18n %}
{% load nav_bar_basket %}
{% load secure_url %}
{% load socoloco_account %}
{% load static_absolute %}
{% load staticfiles %}
{% load user_in_group %}


{% get_current_language as LANGUAGE_CODE %}
{% cache 600 page_header microsite.id %}
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-title" content="{{ microsite.title }}">
{% get_setting "SOCIAL_AUTH_FACEBOOK_KEY" as facebook_app_id %}<meta property="fb:app_id" content="{{ facebook_app_id }}" />

{# IE 8 seems to not be able to handle large css files with many selectors, keeping these isolated helps #}
{% compress css %}
   <link href="{% static 'css/stylesheets/bootstrap.css' %}" rel="stylesheet" type="text/css" />
   <link href="{% static 'css/generated-css/screen.css' %}" rel="stylesheet" type="text/css" />
{% endcompress %}

{# Compress is behaving strangely around inheritance again, splitting it off #}
{% compress css %}
   <link href="{% static 'css/stylesheets/bootstrap-modal.css' %}" rel="stylesheet" type="text/css" />
   <link href="{% static 'css/stylesheets/bootstrap-multiselect.css' %}" rel="stylesheet" type="text/css" />
   <link href="{% static 'css/stylesheets/chosen.css' %}" rel="stylesheet" type="text/css" />
   <link href="{% static 'css/stylesheets/jquery.pageslide.css' %}" rel="stylesheet" type="text/css" />
{% endcompress %}
{% block css %}{% endblock %}

{% block no-compress-css %}
    {# ss-pika contains some utf-8 characters, that, once they go through compress, mess up on IE for some reason...so we don't compress them #}
    <link href="{% static 'css/stylesheets/ss-pika.css' %}" rel="stylesheet" type="text/css" />
{% endblock %}
{% block google_font %}
    <link href="//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,300,700" rel="stylesheet" type="text/css">
{% endblock %}
<script type="text/javascript">
var cacheBuster = '{{ current_version }}';
</script>

{% block unsupported-detection %}
{% comment %}
Detect unsupported browsers as soon as possible in case the browser can't load the entire page (see IE8).
The site is completely non-functional in IE8 so redirect to a static page.  Other unsupported browsers continue to
see the unsupported browser message but are still allowed to use the site (see footer scripts section below.)
{% endcomment %}
<script type="text/javascript" src="{% static 'js/browser-detect.js' %}"></script>
<script type="text/javascript">
if (typeof BrowserDetect !== 'undefined') {
  if (BrowserDetect.browser == 'Explorer' && BrowserDetect.version < 9) {
    location.href = "{% url 'unsupported_browser' %}";
  }
}
</script>
{% endblock %}

{% compress js %}
    <script type="text/javascript" src="{% static 'js/modernizr.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/underscore.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/polyfills/selectivizr-min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery-1.9.1.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.cookie.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/follow.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/deferred-globals.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.caret.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.flexslider.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/chosen.jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap.js' %}"></script>
    {# Twitter Bootstrap doesn't put a semicolon at the end of the file, and JSMin won't add it either, causing pain. #}
    <script type="text/javascript">;</script>
    <script type="text/javascript" src="{% static 'js/override.bootstrap-tooltip.js' %}"></script>
    <script type="text/javascript">;</script>
    <script type="text/javascript" src="{% static 'js/bootstrap-modalmanager.js' %}"></script>
    <script type="text/javascript">;</script>
    <script type="text/javascript" src="{% static 'js/bootstrap-modal.js' %}"></script>
    <script type="text/javascript">;</script>
    {# Include jQuery UI after Bootstrap and use a custom build that doesn't include the tooltip module to avoid conflicts with Bootstrap. #}
    <script type="text/javascript" src="{% static 'js/jquery-ui-1.9.2.custom.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery-ui-timepicker-addon-1.4.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.scrollTo-1.4.3.1.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/google_analytics.js' %}"></script>
    <script type="text/javascript">; </script>
{% endcompress %}

{% block brand_js %}
    {% compress js %}
    <script type="text/javascript" src="{% static 'js/fontdetect.2.1.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.isotope.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.imagesloaded.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap-multiselect.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/notifications.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/form.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/scroll_to_error.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/account_bar.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/modal_form.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/prevent_double_submit.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/interact_bar.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/grid-view.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/search_filters.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/buy_item.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/basket.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/basket_analytics.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/basket_nav_summary.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/charCount.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/buttons.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/search_form.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/back-to-top.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/check-ajax.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/credit-card-focus.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/dropdown.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/footer.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/goto.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/popover.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/popup.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/radio-btn.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/responsive.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/onload-visible.js' %}"></script>
    <script type="text/javascript" src="{% static 'generated-js/async_panel.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/ribbit.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/maps.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/popover-override.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/renew-ad.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/markerclusterer.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/diggit.markerclusterer.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/moment.js' %}"></script>
    {% endcompress %}
{% endblock %}

{% block analytics %}
  {% get_setting "GOOGLE_ANALYTICS_ENABLED" as google_analytics_enabled %}
  {% if google_analytics_enabled %}
    {% get_setting "GOOGLE_ANALYTICS_ID" as analytics_id %}
    <script type="text/javascript">window.GoogleAnalytics.enable_analytics('{{ analytics_id }}');</script>
  {% endif %}
{% endblock %}

{% block icons %}
    <link rel="shortcut icon" type="image/icon" href="{% static 'favicon.ico' %}">
    <link rel="shortcut icon" href="{% static 'favicon.png' %}">
    <link rel="apple-touch-icon" href="{% static 'apple-touch-icon.png' %}">
    <link rel="apple-touch-icon-precomposed" href="{% static 'apple-touch-icon-precomposed.png' %}">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="{% static 'apple-touch-icon-72x72-precomposed.png' %}">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{% static 'apple-touch-icon-114x114-precomposed.png' %}">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{% static 'apple-touch-icon-144x144-precomposed.png' %}">
{% endblock %} 
{% block preloading %}
{# Image Preloading... #}
<script type="text/javascript">
    $(function() {
      imagep = new Array();
      imagep.push(new Image());
      imagep[imagep.length - 1].src = "{% static 'images/global/6c4a6c-loader.gif' %}";
      imagep.push(new Image());
      imagep[imagep.length - 1].src = "{% static 'images/global/4bb000-loader.gif' %}";
      imagep.push(new Image());
      imagep[imagep.length - 1].src = "{% static 'images/global/fb5e3d-loader.gif' %}";
      imagep.push(new Image());
      imagep[imagep.length - 1].src = "{% static 'images/global/249bc9-loader.gif' %}";
    });
</script>
{% endblock %}
{% endcache %}

    {% if messages %}
    <script type="text/javascript">
        $(function() {
            {% for message in messages %}
                FlashNotifications.notify({
                    "message": "{{ message }}",
                    "extra_tags": "{{ message.extra_tags }}",
                    "level": "{{ message.level }}"
                });
                {% endfor %}
            });
    </script>
    {% endif %}
    <title>{% block super_title %}{% block title %}{% endblock %} - {{ microsite.title }}{% endblock %}</title>
    <meta name="description" content="{% block meta_description %}{% get_setting 'BRAND_NAME' as brand_name %}{% format_message brand_messages.SEO_DESCRIPTION_DEFAULT microsite=microsite.title|default_if_none:brand_name %}{% endblock %}">
{% block extrahead %}
<meta property="og:title" content="{{ microsite.title }}">
<meta property="og:description" content="{% format_message brand_messages.SEO_DESCRIPTION_DEFAULT microsite=microsite.title %}">
<meta property="og:type" content="website">
<meta property="og:site_name" content="{{ microsite.title }}">
<meta property="og:url" content="{{ request.build_absolute_uri }}">
<meta property="og:image" content="{% static_absolute 'images/global/logo200x200.png' %}">
{% endblock %}
    <!--[if lt IE 9]> 
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 	
{% block websiteoptimizer %}
<!-- Start Visual Website Optimizer Asynchronous Code -->
<script type='text/javascript'>
    var _vwo_code=(function(){
    var account_id=39819,
    settings_tolerance=2000,
    library_tolerance=2500,
    use_existing_jquery=false,
    // DO NOT EDIT BELOW THIS LINE
    f=false,d=document;return{use_existing_jquery:function(){return use_existing_jquery;},library_tolerance:function(){return library_tolerance;},finish:function(){if(!f){f=true;var a=d.getElementById('_vis_opt_path_hides');if(a)a.parentNode.removeChild(a);}},finished:function(){return f;},load:function(a){var b=d.createElement('script');b.src=a;b.type='text/javascript';b.innerText;b.onerror=function(){_vwo_code.finish();};d.getElementsByTagName('head')[0].appendChild(b);},init:function(){settings_timer=setTimeout('_vwo_code.finish()',settings_tolerance);this.load('//dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(d.URL)+'&r='+Math.random());var a=d.createElement('style'),b='body{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}',h=d.getElementsByTagName('head')[0];a.setAttribute('id','_vis_opt_path_hides');a.setAttribute('type','text/css');if(a.styleSheet)a.styleSheet.cssText=b;else a.appendChild(d.createTextNode(b));h.appendChild(a);return settings_timer;}};}());_vwo_settings_timer=_vwo_code.init();
</script>
<!-- End Visual Website Optimizer Asynchronous Code -->
{% endblock %}
</head>
<body class="{% block bodyclass %}default{% endblock %}" >
<noscript id="unsupported-browser-message">
  <section class="preview-confirm" style="position: relative;">
    <section class="preview-container one-column">
      <header class="banner clearfix">
        <hgroup>
          <h4><strong>{% trans "Unsupported Browser" %}</strong> {% trans "No JavaScript?! Your browser doesn't support JavaScript or it has been turned off. JavaScript is required to use our site." %}</h4>
        </hgroup>
      </header>
    </section>
  </section>
</noscript>
{% block messaging %}
{% endblock %}
<div id="container" class="page-container">
<script type="text/javascript">
var height = $(".preview-confirm:visible").height();
if (typeof height !== 'undefined') {
  $('#container').css("margin-top", height);
}
</script>
  <ul id="flash-notifications" style="display: none;"></ul>
  {% block masthead %}
  <section class="masthead">
    <div class="affixed-nav navbar-fixed-top">
      <div class="nav-wrapper">
      {% include 'account_unactivated_notice.html' %}
      <div class="ribbon">
        <div class="cyan"></div>
        <div class="green"></div>
        <div class="cyan"></div>
        <div class="green"></div>
        <div class="cyan"></div>
      </div>
      <div class="container relative">
        <header role="banner" class="pull-left">
            {% block brandheader %}
              <h1><a href="{% url 'home' %}" title="Home"> <img src="{% static_absolute 'images/global/logo.png' %}?v=0" alt="{{ microsite.title }}"/></a> </h1>
            {% include '_nav_bar_basket_phone.html' %}
            <a class="visible-phone open" href="#main-nav"><i class="ss-rows ss-xxlarge"></i></a>
            {% include 'account_navigation_phone_visible.html' %}
            {% endblock %}
        </header>
        <script type="text/javascript" src="{% static 'js/jquery.pageslide.js' %}"></script>
        {% block navbar %}
        <nav role="navigation" class="pull-left" id="main-nav">
            <ul class="no-margin">
                <li class="visible-phone"><a href="javascript:$.pageslide.close()"><i class="ss-delete"></i>  {% trans 'Close' %}</a></li>
                {% get_setting "DEFAULT_BROWSE_PAGE" as browse_page %}
                <li class="latest-ads inline-block"><a href="{% url browse_page %}"><i class="ss-sync ss-grey"></i> {% trans 'New' %}</a></li>
                <li class="shops"><a href="{% url 'browse_shops' %}"><i class="ss-pricetag ss-grey"></i> {% trans 'Shops' %}</a></li>
                {% if user.is_authenticated %}
                <li class="post-an-ad"><a href="{% url 'post_new_listing' %}"><i class="ss-compose ss-grey"></i> {% trans 'Post' %}</a></li>
                {% endif %}
                {% account_navigation user %}
                {% nav_bar_basket %}
            </ul>
        </nav>
        <section role="search" class="pull-right">
            {% block top_search_bar %}
              {% load search_bar %}
              {% search_bar search_form current_category %}
            {% endblock %}
        </section>
        {% endblock %}
      </div>
      {% block categories %}
          <section class="curated-categories">
            <div class="container">
              <div class="row-fluid">
                <ul class="menu span10">
                  {% cache 600 'collection_menu' microsite.id %}
                  {% menu_featured_collections %}
                  {% endcache %}
                </ul>
                <ul class="span2 menu text-right featured-menu">
                  <li class="community inline-block no-margin"><a href="{% url 'browse.views.community.show_community' %}" ><i class="ss-users ss-white"></i> {% trans 'Community' %}</a></li>
                </ul>
              </div>
            </div>
          </section>
      {% endblock %}
    </div>
    </div>
  </section>
  {% endblock %}
  
{% block join %}
{% if not user.is_authenticated %}
  {% block cta %}
  <div class="join-cta visible-desktop relative">
    <a class="close"><i class="ss-delete ss-large"></i></a>
    <div class="container">
      <h4 class="no-margin">
          {% get_flatpages '/feature/cta/' as cta %}
          {%autoescape off%}{{ cta.0.content }}{%endautoescape%}
      </h4>
    </div>
  </div>
  {% endblock %}
{% endif %}
{% endblock %}

{% block container %}
  <section role="main" class="main">
  {% block context-bar-content %}
    <section class="row-fluid context-bar">
      <div class="container">
          <section class="span3 text-left">{% block context-bar-left %}{% endblock %}</section>
          <header class="span6 text-center">
            {% block context-bar-content-middle %}{% endblock %}
          </header>
          <section class="span3 text-right">{% block context-bar-content-right %}{% endblock %}</section>
        </div>
    </section>
    {% endblock %}
    {% block fullwidth %}{% endblock %}
    <section class="row-fluid content">
      <div class="{% block content_container_class %}container{% endblock %}">
      {% block content %}{% endblock %}
      </div>
    </section>
  </section>
  {% endblock %}
  {% block sub-content %}
  {% endblock %}

  {% block footer %}
  {% footer microsite LANGUAGE_CODE %}
  {% endblock %}

  <a href="#container" class="backtotop"><i class="ss-up ss-xlarge"></i></a>
</div>
{% block account-modals %}
<section class="account-modals">
  {% account_modals user %}
</section>
{% endblock %}
{% cache 3600 footer_unsupported_browser LANGUAGE_CODE %}
<section class="preview-confirm affix unsupported-browser" style="display: none;">
  <section class="preview-container one-column">

    <header class="banner clearfix">
      <hgroup>
        <h4><strong>{% trans "Unsupported Browser" %}:</strong> {% trans "The browser you are using is not supported, please visit <a href=\"http://browsehappy.com/\">browsehappy.com</a>." %}</h4>
      </hgroup>
    </header>
  </section>
</section>
{% endcache %}

{% block raw_js %}
{% endblock %}

{% block js_bottom %}{% endblock %}

{% cache 3600 footer_scripts LANGUAGE_CODE %}
<script type="text/javascript">
if (typeof BrowserDetect !== 'undefined') {
  if ((BrowserDetect.browser == 'Chrome' && BrowserDetect.version < 18) ||
          (BrowserDetect.browser == 'Safari' && BrowserDetect.version < 5) ||
          (BrowserDetect.browser == 'Explorer' && BrowserDetect.version < 9) ||
          (BrowserDetect.browser == 'Opera' && BrowserDetect.version < 12) ||
          (BrowserDetect.browser == 'Firefox' && BrowserDetect.version < 15) ||
          !BrowserDetect.browser.match(/^(Mozilla|Chrome|Safari|Explorer|Firefox|Opera)$/g)) {
    $('.unsupported-browser').show()
  }
}
</script>

{# Olark was removed from right here - to re-instate it include olark.html #}

{% endcache %}

<script type="text/javascript">
  {# when extending this block, remember that _gaq will only exist when debug is False. #}
  {% block google_analytics_extra_js %}
  {% endblock %}
  {% block google_analytics_track_page_view %}
    {% get_setting "GOOGLE_ANALYTICS_ENABLED" as google_analytics_enabled %}
    {% if google_analytics_enabled %}
      window.GoogleAnalytics.track_page_view();
    {% endif %}
  {% endblock %}
</script>

</body>
</html>