<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
        <meta content="text/html; charset=utf-8" http-equiv="content-type" />

        <title>Weight loss, nutrition, and healthy diet advice | Fooducate</title>
    <meta name="keywords" content="Weight loss, Lose weight, diet, nutrition, health, motivation, fitness, workout, exercise, cardio, low carb, paleo, gluten free, grocery, supermarket, iphone, android, UPC, barcode, nutrients, ingredients, calories, calorie counter, app, mobile app, healthy food" />
<meta name="description" content="Staff diet tips. Join the Fooducate community to eat better, lose weight, and improve your health." />
            <meta property="og:title" content="Weight loss, nutrition, and healthy diet advice | Fooducate" />
            <meta property="og:type" content="website" />
            <meta property="og:image" content="https://media.fooducate.com/assets/share/v4/fooducate.png" />
            <meta property="og:description" content="Staff diet tips. Join the Fooducate community to eat better, lose weight, and improve your health." />
                <meta property="twitter:card" content="app" />
            <meta property="twitter:site" content="@Fooducate" />
            <meta property="twitter:title" content="Weight loss, nutrition, and healthy diet advice | Fooducate" />
            <meta property="twitter:image" content="https://media.fooducate.com/assets/share/v4/fooducate.png" />
            <meta property="twitter:description" content="Staff diet tips. Join the Fooducate community to eat better, lose weight, and improve your health." />
            <meta property="twitter:app:id:iphone" content="398436747" />
            <meta property="twitter:app:id:ipad" content="398436747" />
            <meta property="twitter:app:id:googleplay" content="com.fooducate.nutritionapp" />
            <meta property="twitter:app:name:iphone" content="Lose Weight with Fooducate" />
            <meta property="twitter:app:name:ipad" content="Lose Weight with Fooducate" />
            <meta property="twitter:app:name:googleplay" content="Lose Weight with Fooducate" />
    
    <meta name="apple-itunes-app" content="app-id=398436747, affiliate-data=at%3D10l9MY%26ct%3Dwww-smart-banner, app-argument=">

        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

    <!-- Mastodon for ads -->
    <script async src="//d9cept41duxjf.cloudfront.net/mastodon_2.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.Mastodon = window.Mastodon || [];
        Mastodon.push(function() {
            Mastodon.useAdapters(['pbjs', 'amazon']);
            Mastodon.init("Site_Fooducate", "stage");
        });
    </script>

    <!-- fonts preloading -->
    <link rel="preload" href="/resources/css/webfonts/2BC3B2_0_0.woff" as="font" type="font/woff" crossorigin="anonymous">
    <link rel="preload" href="/resources/css/webfonts/2BC3B2_1_0.woff" as="font" type="font/woff" crossorigin="anonymous">
    <link rel="preload" href="/resources/css/webfonts/2BC3B2_2_0.woff" as="font" type="font/woff" crossorigin="anonymous">

    <link rel="preload" href="/resources/css/iconfonts/Fooducate.woff?-iw5js9" as="font" type="font/woff" crossorigin="anonymous">
    <link rel="preload" href="/resources/css/iconfonts/Fooducate.ttf?-iw5js9" as="font" type="font/ttf" crossorigin="anonymous">

    <link rel="preload" href="/resources/lib/bootstrap/fonts/glyphicons-halflings-regular.woff" as="font" type="font/woff" crossorigin="anonymous">
    <!-- fonts preloading end -->

    <!-- styles -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

        <link type="text/css" rel="stylesheet" href="/cache/css/3.46.css" />


    <!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="/resources/css/all/all-ie8.css"/>
<![endif]-->

        <link rel="apple-touch-icon" sizes="57x57" href="/resources/images/app-icons/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/resources/images/app-icons/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/resources/images/app-icons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/resources/images/app-icons/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/resources/images/app-icons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/resources/images/app-icons/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/resources/images/app-icons/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/resources/images/app-icons/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/resources/images/app-icons/apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" href="/resources/images/app-icons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/resources/images/app-icons/android-chrome-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="/resources/images/app-icons/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/resources/images/app-icons/favicon-16x16.png" sizes="16x16">
    <link rel="mask-icon" href="/resources/images/app-icons/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="/resources/images/app-icons/favicon.ico">
    <meta name="msapplication-TileColor" content="#ede9dc">
    <meta name="msapplication-TileImage" content="/resources/images/app-icons/mstile-144x144.png">
    <meta name="msapplication-config" content="/resources/images/app-icons/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
    <link rel="icon" href="/resources/images/app-icons/favicon.svg" sizes="any" type="image/svg+xml">
        <link rel="manifest" href="/cache/etc/manifest.3.46.json">



    <!-- project scripts -->
    <script>
        // Setting js values that already calculated by the server and are used by client side
        var FDCT = {
            serverData: {
                version: '3.46' /*For client requesting resources in ajax style (such as ui template files)*/ ,
                email: 'support@fooducate.com',
                mediaCdn: 'https://media.fooducate.com/',
                isHomePage: false,
                isRobot: false,
                isIos: false,
                generalTitle: 'Weight loss, nutrition, and healthy diet advice | Fooducate',
                externalSignInDetails: {
                    facebook: {
                        appId: '115868801782608',
                        scope: 'email'
                    },
                    googlePlus: {}, // Google Plus sign in doesn't need login details at client side
                    apple: {
                        clientId: 'com.fooducate.nutrition.main',
                        scope: 'name email',
                    }
                },
                dfpIsTest: false,
                constants: {
                    objectType: {
                        PRODUCT: 'product',
                        POST: 'post',
                        LIST: 'list',
                        USER: 'user'
                    },
                    relationType: {
                        VOTE: 'vote',
                        FOLLOW: 'follow',
                        FLAG: 'flag'
                    },
                    relationValue: {
                        POSITIVE: 'positive',
                        NEGATIVE: 'negative',
                        DELETE: 'delete'
                    },
                    query: {
                        POPULAR: 'popular',
                        RECENT: 'recent',
                        FOLLOW: 'follow',
                        USER: 'user'
                    },
                    listType: {
                        RECIPE: 'recipe',
                        HISTORY: 'history'
                    },
                    listItemType: {
                        PRODUCT_VIEW: 'product-view',
                        NOTE: 'note',
                        PRODUCT: 'product',
                        FOOD: 'food',
                        RECIPE: 'recipe'
                    },
                    shareType: {
                        FOODUCATE: 'fooducate',
                        PRODUCT: 'product',
                        POST: 'post',
                        RECIPE: 'recipe'
                    }
                }
            }
        };
    </script>


    <!-- google optimize minimize flicker -->
    <style>
        .async-hide {
            opacity: 0 !important
        }
    </style>
    <script>
        (function(a, s, y, n, c, h, i, d, e) {
            s.className += ' ' + y;
            h.start = 1 * new Date;
            h.end = i = function() {
                s.className = s.className.replace(RegExp(' ?' + y), '')
            };
            (a[n] = a[n] || []).hide = h;
            setTimeout(function() {
                i();
                h.end = null
            }, c);
            h.timeout = c;
        })(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
            'GTM-P3P5TQC': true
        });
    </script>

    <!-- Google Analytics -->
    <script>
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-5968154-1', 'auto'); // Replace with your property ID.
                    ga('send', 'pageview', '/daily-tip');
        
        ga('require', 'GTM-P3P5TQC');
    </script>
    <!-- End Google Analytics -->

    
    <!-- Google Plus Sign-In meta tags -->
    <meta name="google-signin-clientid" content="736305418986-aqoqiuh4ced74j5hthcnm54s65pd8tj2.apps.googleusercontent.com">
    <meta name="google-signin-scope" content="profile email" />
    <meta name="google-signin-cookiepolicy" content="single_host_origin" />


    <!-- apple sign in meta tags -->
    <meta name="appleid-signin-client-id" content="com.fooducate.nutrition.main">
    <meta name="appleid-signin-scope" content="name email">
    <meta name="appleid-signin-redirect-uri" content="https://www.fooducate.com/externalauth/redirect/apple">

        <meta name="p:domain_verify" content="7612c0648d803634e2a9ac1088c05053" />



                <link href="http://www.fooducate.com/community/staff" rel="canonical" type="" />    
</head>
<body id="app">
	<div id="page">
  <!-- To be closed at the footer, for sticky footer -->

  <header id="header" class="fdct-2 sticky-top">
    <nav class="navbar navbar-fixed-top navbar-expand-lg " role="navigation">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">
          <img class="logo" src="/resources/images/nav-logo.svg" />
        </a>

        <div class="nav navbar-nav nav-right-section">
          <ul class="user-menu uncollapsed"></ul>
          <div class="try-premium d-none">
            <span><img src="/resources/images/crown.svg" />Try Fooducate PRO Free</span>
          </div>
        </div>


        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar_items" aria-controls="navbar_items" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar_items">
          <ul class="navbar-nav">
                          <li class="nav-item">
                <a class="nav-link" href="/browse">Browse</a>
              </li>

                          <li class="nav-item">
                <a class="nav-link" href="/community">Community</a>
              </li>

                          <li class="nav-item">
                <a class="nav-link" href="/recipes">Recipes</a>
              </li>

                          <li class="nav-item">
                <a class="nav-link" href="/daily-tip">Blog</a>
              </li>

                          <li class="nav-item">
                <a class="nav-link" href="/podcasts">Podcasts</a>
              </li>

            
            <form class="search navbar-form" role="search" onsubmit="return false;">
              <div class="form-group hstack">
                <input type="search" class="form-control">
                <button type="submit" class="btn">
                  <span class="glyphicon glyphicon-search"></span>
                </button>
              </div>
            </form>

          </ul>
        </div>
      </div>
    </nav>
  </header>

      <div class="ad-container ad-container-leader">
      <div data-mastodon-adunit="leader"></div>
    </div>
    <div class="ad-container ad-container-footer">
    <div data-mastodon-adunit="footer"></div>
  </div>
            <div class="fdct-2">
    
    <!-- hook for any page content - JS Navigation object expects that -->
    <div id="page-content" >
    </div>

            </div>
    
	<div id="push-footer"></div>
</div><!-- closes the #page div that starts at the header-->

<footer class="fdct-2">
    <div class="container-fluid">
        <img class="logo" src="/resources/images/nav-logo.svg" />
        <div class="footer-grid row row-cols-1 row-cols-sm-2 row-cols-md-4">
            <div class="col">
                <h2>Get the App</h2>
                <div class="download-app">
    <a class="app-store" href="http://api.fooducate.com/fdct/promotional/getfooducateapp/?platform=iphone&app=Fdct-Web&resource=footer-button" target="_blank">Download on the App Store</a>
    <a class="google-play" href="http://api.fooducate.com/fdct/promotional/getfooducateapp/?platform=android&app=Fdct-Web&resource=footer-button" target="_blank">Get it on Google Play</a>
</div>
            </div>
            <div class="col">
                <h2>Connect</h2>
                <ul>
                    <li>
                        <a class="nav-link" target="_blank" href="https://www.instagram.com/fooducate/">Instagram</a>
                    </li>
                    <li>
                        <a class="nav-link" target="_blank" href="https://www.facebook.com/fooducate/">Facebook</a>
                    </li>
                    <li>
                        <a class="nav-link" target="_blank" href="https://twitter.com/Fooducate">Twitter</a>
                    </li>
                    <li>
                        <a class="nav-link" target="_blank" href="https://www.pinterest.com/FooducateMe/">Pinterest</a>
                    </li>
                </ul>
            </div>
            <div class="col">
                <h2>Community</h2>
                <ul>
                    <li>
                        <a class="nav-link" href="/daily-tip">Diet Tips</a>
                    </li>

                </ul>
                <h2>Help</h2>
                <ul>
                    <li>
                        <a class="nav-link" href="/contact">Contact</a>
                    </li>
                    <li>
                        <a class="nav-link" href="https://fooducate.zendesk.com/hc/en-us">FAQ</a>
                    </li>
                </ul>
            </div>
            <div class="col">
                <h2>Legal</h2>
                <ul>
                    <li>
                        <a class="nav-link" href="/terms">Terms of Service</a>
                    </li>
                    <li>
                        <a class="nav-link" href="/privacy">Privacy Policy</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="copyright container">
            <span>© Maple Media LLC, 2022 All rights reserved by Maple Media. All marks, brands and names belong to the respective companies and manufacturers and are used solely to identify the companies and products.</span>
        </div>
    </div>
</footer>


<!-- Quantcast Tag -->
<script type="text/javascript">
  var _qevents = _qevents || [];

  (function() {
    var elem = document.createElement('script');
    elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ".quantserve.com/quant.js";
    elem.async = true;
    elem.type = "text/javascript";
    var scpt = document.getElementsByTagName('script')[0];
    scpt.parentNode.insertBefore(elem, scpt);
  })();

  _qevents.push({
    qacct: "p-32ZpecpmHav_Y"
  });
</script>

<noscript>
  <div style="display:none;">
    <img src="//pixel.quantserve.com/pixel/p-32ZpecpmHav_Y" border="0" height="1" width="1" alt="Quantcast" />
  </div>
</noscript>
<!-- End Quantcast tag -->	
<script type="text/template" id="tmpl-common" >
<!-- Templates for simple and very common UI components -->
<div>

	<!-- Confirmation popup TODO make it Bootstrap based -->
	<div id="confirmation-popup-tmpl">
		<div id="confirmation-popup" type="${type}">
			<h2>${heading}</h2>
			<p>{{html text}}</p>
			<div class="actions">
				<button type="button" class="dark ok">${okText}</button>
				<a class="cancel">Cancel</a>
			</div>
		</div>
	</div>

	<!-- Bootstrap modal -->
	<div id="modal-tmpl">
		<div class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header clearfix">
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="visually-hidden">Close</span></button>
					</div>
					<div class="modal-body">
						{{html body}}
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Page alert - based on Bootstrap alert -->
	<div id="page-alert-tmpl">
		<div class="fdct-2">
			<div class="page-alert alert">
				<div class="container">
					<div class="row">
						<div class="vcenter">
							<i class="type ${iconClass}"></i>
						</div>
						<div class="text col-sm-11 col-10 vcenter">
							{{if isSevere}}
								Oh No, something has gone wrong. Try again or <a class="contact">contact us</a> if the problem persists. (${text})
							{{else}}
								{{html text}}
							{{/if}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Community post form -->
	<div id="community-post-form-tmpl">
		<form class="community-post-form">
			<div class="row">
				<div class="post-textarea-col col-sm-10 vcenter-sm">
					<textarea class="post-textarea form-control" rows="2" placeholder="${placeholder}"></textarea>
				</div>
				<div class="btn-post-col col-sm-2 vcenter-sm">
					<button type="button" class="btn-post btn btn-success">Post</button>
				</div>
			</div>
		</form>
	</div>

    <!-- Share panel buttons -->
	<div id="share-panel-tmpl">
		<div class="share-panel">
            <ul>
                {{each methods}}
                    <li class="${method}">
                        <button class="btn" data-key="${methodKey}">
                            <i class="${iconFontClass}"></i>
                        </button>
                    </li>
                {{/each}}
            </ul>
            <span class="count"></span>{{! just a hook}}
		</div>
	</div>

    <!-- download app panel skeleton, the actual value is generated at the server side (we already have a CI view - download_app_view) -->
    <div id="download-app-tmpl">
        <div class="download-app-panel card card-default">
            <div class="card-body">
                <h2>3 Reasons to get the Fooducate app:</h2>
				<ol>
					<li>Personalized weight-loss plans</li>
					<li>Ingredient-level product analysis</li>
					<li>Huge food, restaurant, and recipe database</li>
				</ol>
				<span>PS - it’s Free!</span>                
				{{html buttons}}
            </div>
        </div>
    </div>

    <!-- ad panel wrapper template -->
    <div id="ad-panel-tmpl">
        <div class="ad-panel card card-default" style="display: none;">
            <div class="card-body" id="${slotElementId}">
                <!-- Ad is inserted here -->
            </div>
        </div>
    </div>
	
	<!-- Matched Content wrapper template 
    <div id="matched-content-tmpl">
        <div class="matched-content card card-default">
            <div class="card-body" id="${slotElementId}">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
				<ins class="${class}"
					 style="display:block"
					 data-ad-format="autorelaxed"
					 data-ad-client="${clientId}"
					 data-ad-slot="${slotId}"
					 data-matched-content-ui-type="image_stacked,image_stacked"
					 data-matched-content-rows-num="4,2"
					 data-matched-content-columns-num="1,2"
					 ></ins>
            </div>
        </div>
    </div>
	-->
	
	<div id="matched-content-tmpl">
        <div class="matched-content card card-default">
			<div class="card-body" id="${slotElementId}">
				<ins class="adsbygoogle"
					 style="display:block"
					 data-ad-format="autorelaxed"
					 data-ad-client="${clientId}"
					 data-ad-slot="${slotId}"
					 data-matched-content-ui-type="image_stacked,image_stacked"
					 data-matched-content-rows-num="4,2"
					 data-matched-content-columns-num="1,2"
					 ></ins>
            </div>
		</div>
	</div>

</div></script>

<script type="text/template" id="tmpl-item_list" >
<ul {{if isFirstChunk}}class="item-list"{{/if}}>
	{{each items}}
		<li class="item ${itemClass} {{if isEmpty}}empty{{/if}} {{if isBreak}}break{{/if}}">
			{{html itemHtml}}
		</li>
	{{/each}}
	{{if isMore}}
		<li class="more-list" style="display: none;"/>
		<li class="more-link item">
			<a>View More</a>
		</li>
	{{/if}}
</ul>

</script>

<script type="text/template" id="tmpl-nutrients" >
<div>
	{{if nutrients && nutrients.length > 0}}
		<div class="nutrients card card-default">
			<div class="card-heading">
				<h2 class="card-title">Nutrition</h2>
			</div>
			<div class="card-body">
				<ul class="item-list">
					{{if servingSize}}
						<li class="item"><em>Serving Size:</em> ${servingSize}</li>
					{{/if}}
					<li class="item">
						<div class="row">
							<span class="col-2 col-offset-7 text-center">Amount per Serving</span>
							<span class="col-2 text-center">My Daily Value</span>
						</div>
					</li>
					{{each nutrients}}
						<li class="item">
							<div class="row">
								<span class="col-7">
									<span class="nutrient-level-${$value.getIndent()}">${$value.getDisplayName()}</span>
								</span>
								<span class="col-2 text-center">${$value.getValue()}${$value.getUom()}</span>
								<span class="col-2 text-center">${$value.getDailyValue()}</span>
								<span class="col-1 daily-value-indication">
									<i class="type ${FDCT.presenter.Product.getTypeIconClass($value.getDailyValueIndication())}"></i>
								</span>
							</div>
						</li>
					{{/each}}
					{{if !FDCT.model.AuthDao.isSignedIn()}}
						<li class="item">
							<a class="login btn btn-success">Login / signup to see personalized values</a>
						</li>
					{{/if}}
				</ul>
			</div>
		</div>
	{{/if}}
</div>
</script>

<script type="text/template" id="tmpl-product_short" >
<div>
	<div class="product-short-inner" data-id="${productId}">
		<div class="picture-col float-start">
			{{html pictureHtml}}
		</div>
		<div class="details-col">
			<h2 class="name">${name}</h2>
			{{html caloriesDetailedHtml}}
			<div class="bottom-row row">
				<div class="col-sm-2 col-3">
					{{html gradeIconHtml}}
				</div>
				<div class="likes-col col-sm-2 col-3">
					{{html likesHtml}}
				</div>
				<div class="comments-col col-sm-2 col-3">
					<i class="f-comments"></i><span class="value">${totalComments}</span>
				</div>
				<div class="labels-col col-sm-6 col-3">
					{{! use a common template for labels (that will be used both for product page and product short - see #2366}}
					<div class="labels stacked">
						<ul>
							{{each labels}}
							<li class="label" style="color: ${$value.getColor()}; background-color: ${$value.getBgColor()}">
								${$value.getText()}
							</li>
							{{/each}}
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div></script>

<script type="text/template" id="tmpl-admin-biz_client_page" >
<div class="admin">
	<div class="main-column">
		<div class="admin-item">
			<div class="section-header top">
				<div class="navigate-back-link"><a>&lt;&lt;</a></div>
				CLIENT INFORMATION
			</div>
			<div class="admin-item-details with-image active-${active} section group">
				{{html pictureHtml}}
				<div class="section">
						<div class="align-right">{{html activeHtml}}</div>
					<div class="extra-details group">
						<div class="name medium-width large-text">${name}</div>
					</div>		
					<div class="extra-details group">
						<div class="long-width">Description:<br />${description}</div>
					</div>		
					<div class="extra-details group">
						<div class="long-width">Contact details:<br />${contact_details}</div>
					</div>		

				</div>
			</div>
		</div>
		<div class="admin-list">
			<div class="section-header">
				SITES
			</div>
			<div class="section group section-bottom-border">
				<div>
					<div class="align-right action-add action-button fixed-width">Add site</div>
					<div>
						<form id="search-sites" onsubmit="return false;" class="admin-search-box"> 
							<input type="text" autocomplete="off" title="Narrow it down ..." class="">
							<button type="submit"></button>
						</form>                    
					</div>
				</div>
				<div id="top-pager" class="pager"></div>

			</div>
			<div id="site-list"></div>
			<div class="section-footer curls">
				<div id="bottom-pager" class="pager"></div>
			</div>


		</div>

	</div>
	<div class="side-column ">
	</div>
</div>
</script>

<script type="text/template" id="tmpl-admin-biz_client_search_page" >
<div>
	<form id="search-clients" onsubmit="return false;" class="admin-search-box"> 
		<input type="text" autocomplete="off" title="Narrow it down ..." class="">
		<button type="submit"></button>
	</form>                    
</div>
<div class="admin-list main-column">
	<div class="section-header top">
		FOODUCATE CLIENT NAME
		<div id="top-pager" class="pager"></div>
	</div>
		<div id="client-list"></div>
	<div class="section-footer curls">
		<div id="bottom-pager" class="pager"></div>
	</div>
</div></script>

<script type="text/template" id="tmpl-admin-biz_site_page" >
<div class="admin">
	<div class="main-column">
		<div class="admin-item">
			<div class="section-header top">
				<div class="navigate-back-link"><a>&lt;&lt;</a></div>
				SITE INFORMATION
			</div>
			<div class="admin-item-details active-${active} section group">
				<!--{{html pictureHtml}}-->
				<div class="section">
					<!--
					<div class="extra-details group">
						<div class="name medium-width">${clientName}</div>
					</div>		
					-->
					<div class="align-right">{{html activeHtml}}</div>
					<div class="extra-details group">
						<div class="element-heading">Site name:</div>
						<div class="name medium-width large-text">${name}</div>
					</div>		
					<div class="extra-details group">
						<div class="element-heading">Description:</div>
						<div class="long-width">${description}</div>
					</div>		
					<div class="extra-details group">
						<div class="element-heading">Contact details:</div>
						<div class="long-width">${contact_details}</div>
					</div>		
					<div class="extra-details group">
						<div>App Menu:&nbsp;</div>{{html menuHtml}}
					</div>		
				</div>
				<div class="align-right action-edit action-button fixed-width">Edit</div>
			</div>
		</div>
		<div class="admin-list">
			<div class="section-header">
				ACTIVATION CODES
			</div>
			<div class="section group section-bottom-border">
				<div>
					<div class="align-right action-add action-button fixed-width">Add code</div>
					<div style="display: inline-block;">&nbsp;<br/>&nbsp;</div>
					<!--
					<div>
						<form id="search-codes" onsubmit="return false;" class="admin-search-box"> 
							<input type="text" autocomplete="off" title="Narrow it down ..." class="">
							<button type="submit"></button>
						</form>                    
					</div>
					-->
				</div>
				<div id="top-pager" class="pager"></div>
			</div>
			<div id="code-list"></div>
			<div class="section-footer curls">
				<div id="bottom-pager" class="pager"></div>
			</div>


		</div>

	</div>
	<div class="side-column ">
		
	</div>
	
</div>
</script>

<script type="text/template" id="tmpl-admin-client_list_panel" >
{{each clientsData}}
	<div class="admin-item-details with-image client-item admin-list-item group section active-${active}">
		{{html pictureHtml}}
		<div class="medium-width name large-text">${name}</div>
		<div class="align-right fixed-width">{{html activeHtml}}</div>
		<span class="client-id" style="display:none">${clientId}</span>
	</div>
{{/each}}
</script>

<script type="text/template" id="tmpl-admin-code_list_panel" >
{{each codesData}}
	<div class="admin-item-details code-item admin-list-item group section active-${active}">
		<div class="medium-width name large-text">code: ${token}</div>
		<div class="medium-width">description: ${description}</div>
		<div class="align-right fixed-width">{{html activeHtml}}</div>
		<div class="extra-details group">
			<div class="medium-width">Issued licenses: ${licenseCount}</div>
			<div class="medium-width">Redeemed licenses: ${redeemedCount}</div>
			<div class="action-button action-edit align-right fixed-width">Edit</div>
		</div>		
		
		<span class="client-id" style="display:none">${clientId}</span>
		<span class="site-id" style="display:none">${siteId}</span>
		<span class="code-id" style="display:none">${codeId}</span>
		<span class="description-value" style="display:none">${description}</span>
		<span class="license-count-value" style="display:none">${licenseCount}</span>
		<span class="active-value" style="display:none">${active}</span>
	</div>
{{/each}}
</script>

<script type="text/template" id="tmpl-admin-dialog" >
<!-- Contains all needed panels for user management - it's a one template file with a bundle of several diferent panels - to have
 just one ajax call to load the template file -->
<div id="admin-dialog" style="display: none">
	<!-- The user menu at the page header -->
	<div id="add-site-tmpl">
		<div id="add-site-dialog" class="admin-dialog">
			<form>
				<fieldset>
					<div class="main top bottom">
						<div class="heading group">
							<h2>Add Site</h2>
						</div>
						<div class="fields"></div>
						<div class="extra"></div>
						<button type="submit" class="dark">Add</button>
					</div>
				</fieldset>
			</form>
		</div>
	</div>
	
	<div id="add-code-tmpl">
		<div id="add-code-dialog" class="admin-dialog">
			<form>
				<fieldset>
					<div class="main top bottom">
						<div class="heading group">
							<h2>Add Code</h2>
						</div>
						<div class="fields"></div>
						<div class="extra"></div>
						<button type="submit" class="dark">Add</button>
					</div>
				</fieldset>
			</form>
		</div>
	</div>
	
	<div id="update-code-tmpl">
		<div id="update-code-dialog" class="admin-dialog">
			<form>
				<fieldset>
					<div class="main top bottom">
						<div class="heading group">
							<h2>Update Code</h2>
						</div>
						<div class="fields"></div>
						<div class="extra"></div>
						<button type="submit" class="dark">Save</button>
					</div>
				</fieldset>
			</form>
		</div>
	</div>	
	
	<div id="update-site-tmpl">
		<div id="update-site-dialog" class="admin-dialog">
			<form>
				<fieldset>
					<div class="main top bottom">
						<div class="heading group">
							<h2>Update Site</h2>
						</div>
						<div class="fields"></div>
						<div class="extra"></div>
						<button type="submit" class="dark">Save</button>
					</div>
				</fieldset>
			</form>
		</div>
	</div>		
	
</div>
</script>

<script type="text/template" id="tmpl-admin-menu_page" >
<h1>What would you like to do today?</h1>
<div id="admin-menu-items" class="admin-list main-column">
	<div class="section-header top"></div>
    {{each adminAreas}}
        <div class="admin-list-item section group">
            <h2>${title}</h2>
			<span class="page-type" style="display:none">${pageType}</span>
        </div>
	{{/each}}
	<div class="section-footer curls"></div>
</div></script>

<script type="text/template" id="tmpl-admin-site_list_panel" >
{{each sitesData}}
	<div class="admin-item-details site-item admin-list-item group section active-${active}">
		<div class="medium-width name large-text">${name}</div>
		<div class="align-right fixed-width">{{html activeHtml}}</div>
		<span class="site-id" style="display:none">${siteId}</span>
		<span class="client-id" style="display:none">${clientId}</span>
	</div>
{{/each}}
</script>

<script type="text/template" id="tmpl-categorybrowse-category_browse_page" >
<div id="breadcrumbs"></div>
<div id="category-browse">
    <div id="add-this"></div>
    <div class="left-side-column">
        
        <h2><a href="#" id="browse-page-link">Products Categories</a></h2>
        <div class="group section">
        <div id="category-browse-tree" ></div>
        </div>
        <div class="section-footer curls"></div>
    </div>
    
    
    <div class="category-browse-content product-list" id="browse-main-content">
        <h2 id="page-info-title">Popular Categories</h2>
        <div id="tabs_div">
            <ul id="tabs"></ul>
            <div id="top-pager" class="pager"></div>
       </div>

        <div id="product-list" class="group section"></div>

        <div class="section-footer curls">
            <div class="pager" id="bottom-pager"></div>
        </div>
    </div>
</div></script>

<script type="text/template" id="tmpl-categorybrowse-category_browse_page_2" >
{{each CategoryBrowseData}}
		<!--<span>${nav_title}</span>-->
        {{html title}}
        {{html branch}}
{{/each}}</script>

<script type="text/template" id="tmpl-categorybrowse-category_browse_page_content" >
{{each categoryContentData}}
    <div class="category-block">
        <div class="image-warper">
            {{html image}}
        </div>
        {{html title}}
    </div>
{{/each}}</script>

<script type="text/template" id="tmpl-community-community_page" >
<div id="community-page" class="fdct-2">
	<div class="container">
		<div class="card card-default">
			<div class="card-heading">
				<h1 class="card-title">Community</h1>
			</div>
			<div class="card-body">
				<div id="community-post-form-region"></div>
				<div role="tabpanel">
					<ul class="nav nav-tabs" role="tablist">
						{{each tabs}}
						<li class="nav-item" role="presentation">
							<a class="nav-link" role="tab" data-bs-toggle="tab" data-query="${query}" data-view="${view}">${title}</a>
						</li>
						{{/each}}
					</ul>
					<div class="tab-content"></div>
				</div>
			</div>
		</div>
	</div>
</div></script>

<script type="text/template" id="tmpl-community-community_post" >
<li class="post {{if isStaff}}staff{{/if}}">
	<div class="row">
		{{if isWide}}
			<div class="col-sm-2">
				<img class="user-avatar" src="${userAvatar}"/>
			</div>
		{{/if}}
		<div class="col-sm-{{if isWide}}10{{else}}12{{/if}}">
			<div>
				{{if !isWide}}
					<div class="vcenter">
						<img class="user-avatar" src="${userAvatar}"/>
					</div>
				{{/if}}
				<div class="vcenter">
					<div class="user-nick">${userNick}</div>
					{{if showTime}}
						<div class="date">${FDCT.DateFormatter.formatRelative(time)}</div>
					{{/if}}
				</div>
			</div>
			<div class="clearfix">
				<p class="text {{if !isBodyMimeTypeHtml}}user-text{{/if}}">{{if isBodyMimeTypeHtml}}{{html text}}{{else}}${text}{{/if}}</p>
				{{if thumbnail}}
					<a class="thumbnail float-start" data-image="${image}">
						<img src="${thumbnail}"/>
					</a>
				{{/if}}
			</div>
			<ul class="actions row">
				<li class="col-2">
					<a class="reply">Reply</a>
				</li>
				<li class="col-2">
					{{if !isSameUser}}
						<a class="vote {{if isMeLiked}}unlike{{else}}like{{/if}}">
							{{if isMeLiked}}
								Unlike
							{{else}}
								Like
							{{/if}}
						</a>
					{{/if}}
				</li>
				<li class="likes col-6">
					<i class="f-liked {{if isMeLiked}}my-user-liked{{/if}}"></i>
					${positiveVotes}
				</li>
				<li class="col-2">
					<div class="dropdown pull-right">
						<a class="dropdown-toggle" {{if isMeFlagged}}disabled{{else}}data-toggle="dropdown"{{/if}}>
						<i class="f-action-more-actions"></i>
						</a>
						<ul class="dropdown-menu" role="menu">
							<li>
								{{if isSameUser}}
									<a class="delete">Delete</a>
								{{else}}
									<a class="report">Report</a>
								{{/if}}
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
	</div>
</li>
</script>

<script type="text/template" id="tmpl-community-community_post_page" >
<div id="community-post-page" class="fdct-2">
	<div class="container">
		<div class="card card-default">
			<div class="card-heading">
				<h1 class="card-title">
					{{if post}}
					{{if isStaff}}Diet Tip{{else}}Community{{/if}}
					{{else}}
					Discussion not found
					{{/if}}
				</h1>
			</div>
			{{if post}}
			<div class="card-body">
				<div class="feed-item single root-post">
					<div class="row">
						{{if isWide}}
						<div class="col-sm-2">
							<img class="user-avatar" src="${userAvatar}" />
						</div>
						{{/if}}
						<div class="col-sm-{{if isWide}}10{{else}}12{{/if}}">
							<div>
								{{if !isWide}}
								<div class="vcenter">
									<img class="user-avatar" src="${userAvatar}" />
								</div>
								{{/if}}
								<div class="vcenter">
									<div class="user-nick">${userNick}</div>
									{{if isUpdated}}
									<div class="date">Updated: ${FDCT.DateFormatter.formatRelative(lastUpdate)}</div>
									<div class="date">Published: ${FDCT.DateFormatter.formatRelative(time)}</div>
									{{else}}
									<div class="date">${FDCT.DateFormatter.formatRelative(lastUpdate)}</div>
									{{/if}}
								</div>
							</div>
							<div class="content clearfix">
								{{if title}}
								<h2 class="title">${title}</h2>
								{{/if}}
								{{if thumbnail}}
								<a class="thumbnail" data-image="${image}">
									<img class="original" src="${image}" />
									<img src="${thumbnail}" />
								</a>
								{{/if}}
								<div class="paragraph text {{if !isBodyMimeTypeHtml}}user-text{{/if}}">{{if isBodyMimeTypeHtml}}{{html
									text}}{{else}}${text}{{/if}}</div>
							</div>
							<div id="community-stats-region"></div>
						</div>
					</div>
				</div>
			</div>
			<div id="share-panel-region" class="card-footer"></div>
			{{/if}}
		</div>

		<div id="download-app-region"></div>
		
		<div class="ad-container ad-incontent">
			<div data-mastodon-adunit="incontent_1"></div>
		</div>

		<div id="matched-content-region"></div>

		<div id="ad-panel-region"></div>

		<div id="community-posts-region"></div>

		<div class="ad-container ad-incontent">
			<div data-mastodon-adunit="incontent_2"></div>
		</div>
	</div>
	
</div></script>

<script type="text/template" id="tmpl-community-community_posts_panel" >
<div class="community-posts card card-default">
	<div class="card-heading">
		{{if total != undefined}}
			<h2 class="card-title"><span class="total">${total}</span> Comments</h2>
		{{/if}}
		<div class="more-link-wrapper" style="display: none;">
			<a class="more-link">View More</a>
		</div>
	</div>
	<div class="card-body">
		<ul class="post-list {{if isSingleColumn}}single-column{{/if}}"></ul>
		<div id="community-post-form-region"></div>
	</div>
</div>

</script>

<script type="text/template" id="tmpl-community-community_root_post" >
<div>
	<div class="root-post-inner" data-id="${id}" >
		{{if webUrl}}
			<a href="${webUrl}"  itemscope itemtype="http://schema.org/Article"></a>{{! Just for bots - invisible. it doesn't wrap the whole content, since the html text might be a staff post that may contain any markup, and a elements can't contain any HTML element}}
		{{/if}}
		<div class="row">
			{{if isWide}}
				<div class="col-sm-2">
					<img class="user-avatar" src="${userAvatar}"/>
				</div>
			{{/if}}
			<div class="col-sm-{{if isWide}}10{{else}}12{{/if}}">
				<div>
					{{if !isWide}}
						<div class="vcenter">
							<img class="user-avatar" src="${userAvatar}"/>
						</div>
					{{/if}}
					<div class="user-nick vcenter" itemprop="author">${userNick}</div>
				</div>
				<div class="content clearfix">
					{{if title}}
						<h2 class="title" itemprop="headline">${title}</h2>
					{{/if}}
                    {{if thumbnail}}
                        {{if isStaff}}
                            <div class="thumbnail">
                                <img class="original" src="${image}"/>
                                <img src="${thumbnail}"/>
                            </div>
                        {{else}}
    						<img class="thumbnail" src="${thumbnail}"/>
                        {{/if}}
                    {{/if}}
					<div class="paragraph text {{if !isBodyMimeTypeHtml}}user-text{{/if}}" itemprop="text">{{if isBodyMimeTypeHtml}}{{html text}}{{else}}${text}{{/if}}</div>
				</div>
				<div>{{html stats}}</div>
			</div>
		</div>
	</div>
</div>
</script>

<script type="text/template" id="tmpl-community-community_stats_panel" >
<div>
	<div class="stats clearfix">
		<div class="comments float-start">
			<i class="f-comments"></i>
			<span class="value">${totalCommentsText}</span>
		</div>
		<div class="likes float-start">
			{{html likesHtml}}
		</div>
		<div class="followers float-start">
			{{html followersHtml}}
		</div>
	</div>
</div>
</script>

<script type="text/template" id="tmpl-community-daily_tip_page" >
<div id="daily-tip-page" class="fdct-2">
	<div class="container">
		<div class="card card-default">
			<div class="card-heading">
				<h1 class="card-title">Diet Tip</h1>
			</div>
			<div class="card-body">
			</div>
		</div>
	</div>
</div></script>

<script type="text/template" id="tmpl-home-featured_product_panel" >
<div id="featured-products" class="carousel slide" data-ride="carousel" data-interval="5000">

	<ul class="carousel-inner">
		{{each productsData}}
			{{if $index % 3 == 0 && (FDCT.clientViewPort.isMd() || FDCT.clientViewPort.isLg()) || $index % 2 == 0 && FDCT.clientViewPort.isSm() || FDCT.clientViewPort.isXs()}}
				<li class="item {{if $index == 0}}active{{/if}}">
			{{/if}}
			<a class="product-short inner-item" href="${webUrl}" itemscope itemtype="http://schema.org/Product">
				{{html pictureHtml}}
				{{html gradeIconHtml}}
				<h3 class="name" itemprop="name">${name}</h3>
				<span class="product-id" style="display:none">${productId}</span>
			</a>
			{{if $index % 3 == 2 && (FDCT.clientViewPort.isMd() || FDCT.clientViewPort.isLg()) || $index % 2 == 1 && FDCT.clientViewPort.isSm() || FDCT.clientViewPort.isXs()}}
				</li>
			{{/if}}
		{{/each}}
	</ul>

	<a class="left carousel-control" href="#featured-products" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left"></span>
	</a>
	<a class="right carousel-control" href="#featured-products" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right"></span>
	</a>
</div>

</script>

<script type="text/template" id="tmpl-preferences-getting_start" >
<div id="preference-main-content">
    <h1>Hello</h1>
    <div id="preferencesFormWarper">
        <div id="preferencesFormWarper-inner">
                <div class="in-step" id="welcome-to-fooducate">
                    Today is the day you start eating a bit better. 
                    <br />
                    Congrats!
                    <br /><br />
                    Enter your details to get personalized product analysis and recommendations.
                    <br /><br />
                    
                    <button class="orange" id="start_personalize">Let's get started! </button>
                    
                    <br /><br />
                    <a href="" id="later-btn"> Later </a>
                    
                </div>
            </div>
    </div>
    
    <div id="preference-side">
        
        <h3>Benefits of registering</h3>
        <ul>
            <li>View <strong>personalized</strong> nutrition facts for products you view</li>
            <li>See a history of all the products you have previously viewed</li>
            <li>Comment on products </li>
            <li>Sync info with your mobile Fooducate app</li>
        </ul>
        
    </div>
    
    <div class="clearance"/> </div>
</div></script>

<script type="text/template" id="tmpl-preferences-profile_page" >
<div id="preference-main-content">
    <h1>Profile </h1>
    <div id="profile-warper">
        
        <ul id="profile-menu"></ul>
        
        <div id="preferencesFormWarper">
            <div id="preferencesFormWarper-inner">
                <div class="in-step">
                    <form id="preferencesForm" class="fromFactory"></form>
                </div>
            </div>
        </div>
        
    </div>
    
    <div class="clearance"></div>
</div></script>

<script type="text/template" id="tmpl-preferences-signin_page" >
<div id="preference-main-content">
    <h1>Log in</h1>
    <div id="preferencesFormWarper" class="signin">
        <div id="preferencesFormWarper-inner">
            <div class="in-step" id="signin-warper">
                <form id="registerForm" class="fromFactory"></form>
                
                <div>
                    <div style="float:left; padding-bottom: 10px; margin-left:20px;">
                        <button class="read-more" id="register-submit">Log in</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="register-or-signin">
        OR
    </div>

    <div id="register-external-wrapper-signin">
        <div id="register-fb-block">
            <button id="fb-connect-signin"><div><em>f</em><span>connect with facebook</span></div></button>
        </div>
		<button id="google-plus-sign-in">
			<span class="logo">
				<em>g</em>+
			</span>
			Sign in
		</button>
		<button id="appleid-signin-fdct" data-color="black" data-border="true" data-type="sign in">
			Sign in with Apple
		</button>
    </div>
    
    <div id="preference-side">
        <h3>Haven't Signed up yet?</h3>
        <p style="margin-bottom: 15px;">please sign up to enjoy the following benefits: </p>
        <ul>
            <li>See <strong>personalized</strong> nutrition facts for products you view</li>
            <li>See a history of all the products you have previously viewed</li>
            <li>Comment on products </li>
            <li>Sync info with your mobile Fooducate app</li>
        </ul>
        <button id="register-now-btn" class="dark read-more">Sign up now</button>
    </div>
        
    <div class="clearance"> </div>
</div></script>

<script type="text/template" id="tmpl-preferences-signup_page" >
<div id="preference-main-content">
    <h1>Let's get personal...</h1>
    <div id="preferencesFormWarper">
        <div id="preferencesFormWarper-inner">
            <div class="in-step">
                <form id="preferencesForm" class="fromFactory signup"></form>
            </div>
            
            <div class="in-step" id="register-step">
                <form id="registerForm" class="fromFactory"></form>
                <div style="clear:both; padding:0 10px;">
                    <div style="float:left; padding-bottom: 10px; margin-left:10px;">
                        <button class="read-more" id="register-submit" style="margin-top:0;">Sign me up</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="register-or">
        OR
    </div>

    <div id="register-external-wrapper">
        <div id="register-fb-block">
            <button id="fb-connect-signin"><div><em>f</em><span>connect with facebook</span></div></button>
        </div>
		<button id="google-plus-sign-in">
			<span class="logo">
				<em>g</em>+
			</span>
			Sign in
		</button>
		<button id="appleid-signin-fdct" data-color="black" data-border="true" data-type="sign in">
			Sign in with Apple
		</button>
    </div>
    
    
    <div id="preference-side">
        <h3>Benefits of registering</h3>
        <ul>
            <li>See <strong>personalized</strong> nutrition facts for products you view</li>
            <li>See a history of all the products you have previously viewed</li>
            <li>Comment on products </li>
            <li>Sync info with your mobile Fooducate app</li>
        </ul>
    </div>
    
    <div class="clearance"> </div>
    
    <div id="preferencesFormWarper-bottom-actions">
        <div id="preferencesFormWarper-signin">
            I already have an account <a id="login-link">Login &gt;</a>
        </div>
    
        <div id="preferencesFormWarper-buttons">
            <a href="#" class="read-more" id="prev-btn">&lt;  Back</a>
            <a href="#" class="read-more" id="next-btn">Next  &gt;</a>
        </div>
    </div>

</div></script>

<script type="text/template" id="tmpl-preferences-welcome_page" >
<div id="preference-main-content">
    <h1>Welcome to Fooducate!</h1>
    <div id="preferencesFormWarper">
        <div id="preferencesFormWarper-inner">
                <div class="in-step" id="welcome-to-fooducate">
                    We have just sent you a confirmation email. 
                    <br />
                    Click the activation link in the email to activate your account. 
                    <br />
                    <br />
                    <div id="back-to-where-i-come-from" style="display:none;">
                        Go Back to the <a href="" id="goback-link">page you were viewing</a>
                        <br />
                        <br />
                    </div>
                    
                    you can change your personal settings at any time by visiting your <a href="" id="profile-link">profile page</a>
                    <br />
                    
                    <br style="clear:both;"/>
                    <hr style="width:90%; margin-left:0;"/>
                    <h3>Got a smart phone?</h3>
                    Try our mobile app for Android or iPhone
                    <br />
                    <br />
                    <a target="_blank" href="http://api.fooducate.com/fdct/promotional/getfooducateapp/?platform=iphone&app=Fdct-Web&resource=siteWelcome" id="download-iphone" class="getapp"></a>
                    <a target="_blank" href="http://api.fooducate.com/fdct/promotional/getfooducateapp/?platform=android&app=Fdct-Web&resource=siteWelcome" id="download-andriod" class="getapp"></a>
                    
                    <br style="clear:both;"/>
                    <br />
                    <br />
                    <hr style="width:90%; margin-left:0;"/>
                    <h3>Getting start using the site</h3>
                    <br />
                    <div id="search_warper" class="welcome-search">
                        <form id="search-product" onsubmit="return false;" class="search-box"> 
                            <input type="text" autocomplete="off" title="Search Food" class="prompt">
                            <button type="submit"></button>
                        </form>                    
                        <span>or</span>
                        <span><a href="/browse" id="browse-btn" class="browse-btn-welcome">Browse Food</a></span>
                    </div>
                    
                </div>
            </div>
    </div>
    
    <div id="preference-side">
    </div>
    
    <div class="clearance"/> </div>
</div></script>

<script type="text/template" id="tmpl-product-alternate" >
<div>
	<div class="d-none d-md-block">
		<div class="row">
			<div class="col-sm-5 col-4 vcenter">
				{{html pictureHtml}}
			</div>
			<div class="col-2 vcenter">
				{{html gradeIconHtml}}
			</div>
			<div class="col-5 vcenter">
				{{html caloriesHtml}}
			</div>
		</div>
		{{html nameHtml}}
	</div>
	<div class="d-block d-md-none">
		<div class="row">
			<div class="picture-col col-4">
				{{html pictureHtml}}
			</div>
			<div class="col-8">
				{{html nameHtml}}
				<div class="float-start">
					{{html gradeIconHtml}}
				</div>
				<div class="pull-right">
					{{html caloriesDetailedHtml}}
				</div>
			</div>
		</div>
	</div>
	<span class="product-id" style="display:none">${productId}</span>
</div></script>

<script type="text/template" id="tmpl-product-headline" >
{{each headline}}
	<div>
		<dt {{if $value.isExpandable()}}class="expandable"{{/if}}>
			{{if $value.getIconUrl()}}
				<img class="type" src="${$value.getIconUrl()}"/>
			{{else}}
				<i class="type ${FDCT.presenter.Product.getTypeIconClass($value.getType())}"></i>
			{{/if}}
			{{if $value.getHeadlineHtml()}}
				{{html $value.getHeadlineHtml()}}
			{{else}}
				${$value.getHeadline()}
			{{/if}}
			{{if $value.isExpandable()}}
				<i class="glyphicon glyphicon-chevron-right"></i>
			{{/if}}
		</dt>
		<dd style="display: none;">
			{{html FDCT.view.html.textToHtml($value.getText())}}

			{{if $value.getLink()}}
				<div>
					<a class="link fdct" href="${$value.getLink()}" target="_blank">
						{{if $value.getLinkTitle()}}
							${$value.getLinkTitle()}
						{{else}}
							More info from Fooducate
						{{/if}}
					</a>
				</div>
			{{/if}}
			{{if $value.getExternalLink()}}
				<div>
					<a class="link web" href="${$value.getExternalLink()}" target="_blank">
						{{if $value.getExternalLinkTitle()}}
							${$value.getExternalLinkTitle()}
						{{else}}
							More info from web
						{{/if}}
					</a>
				</div>
			{{/if}}
		</dd>
	</div>
{{/each}}
</script>

<script type="text/template" id="tmpl-product-history_page" >
<div id="history-page" class="fdct-2">
	<div class="container">
		<div class="card card-default">
			<div class="card-heading clearfix">
				<h1 class="card-title float-start">My History</h1>
				<button type="button" class="clear-history btn btn-warning pull-right" {{if isEmpty}}disabled{{/if}}>Clear History</button>
			</div>
			<div class="card-body">
			</div>
		</div>
	</div>
</div>
</script>

<script type="text/template" id="tmpl-product-product_list_panel" >
{{each productsData}}
	<div class="product-details group section">
		{{html pictureHtml}}
		{{html nameHtml}}
		{{html caloriesHtml}}
		{{html likesHtml}}
		<span class="product-id" style="display:none">${productId}</span>
	</div>
{{/each}}
</script>

<script type="text/template" id="tmpl-product-product_page" >
<div id="product-page" class="fdct-2">
	<div class="container">
		<div class="product-header card card-default">
			<div class="card-heading clearfix">
				<h2 class="card-title">
					{{if product}}
					Product
					{{else}}
					Product not found
					{{/if}}
				</h2>
				{{if product}}
				<span class="category">${category}</span>
				{{/if}}
			</div>
			{{if product}}
			<div class="card-body">
				<div class="row">
					<div class="col-4">
						{{html pictureHtml}}
						{{html contributedByHtml}}
					</div>
					<div class="col-8">
						<h1 class="name">${name}</h1>
						<div class="row">
							<div class="grade-col col-md-3 col-5 vbottom">
								<div>{{html gradeIconHtml}}</div>
								<div class="grade-why"><a href="#">Why?</a></div>
							</div>
							<div class="calories-col col-sm-6 pull-right-xs vbottom">
								{{html caloriesHtml}}
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-offset-4 col-sm-8">
						{{if labels.length > 0}}
						<div class="labels row">
							<div class="col-12">
								<ul>
									{{each labels}}
									<li class="label" style="color: ${$value.getColor()}; background-color: ${$value.getBgColor()}">
										${$value.getText()}
									</li>
									{{/each}}
								</ul>
							</div>
						</div>
						{{/if}}
						<div id="community-stats-region"></div>
					</div>
				</div>
			</div>
			<div id="share-panel-region" class="card-footer"></div>
			{{/if}}
		</div>

		<div class="ad-container  ad-incontent">
			<div data-mastodon-adunit="incontent_1"></div>
		</div>

		<div id="download-app-region"></div>

		{{if product}}
		<div class="row">
			<div class="col-md-8">

				<div class="headlines card card-default">
					<div class="card-heading">
						<h2 class="card-title">Explanations</h2>
					</div>
					<div class="card-body">
						<div class="item-list">
							<div class="grade-details item">
								<div class="row">
									<div class="grade-info col-sm-4">
										{{if FDCT.model.AuthDao.isSignedIn()}}
										<h3>Personalized Grade</h3>
										{{/if}}
										{{html gradeIconHtml}}
										<div class="relative-text">${scales.gradeRelativeText}</div>
									</div>
									<div class="col-sm-6 col-sm-offset-2">
										{{html scales.gradeScaleHtml}}
										<div class="range-text">Grade range for this category between<br /> ${scales.minGradeText} and
											${scales.maxGradeText}</div>
									</div>
								</div>
							</div>
						</div>
						<div class="headline-list"></div>
					</div>
				</div>

				<div id="ad-panel-mid-region"></div>

				<div class="ad-container  ad-incontent">
					<div data-mastodon-adunit="incontent_2"></div>
				</div>

				<div id="matched-content-region"></div>
				
				<div id="nutrients-region"></div>

				<div class="ad-container  ad-incontent">
					<div data-mastodon-adunit="incontent_x"></div>
				</div>

				{{if ingredients && ingredients.length > 0}}
				<div class="ingredients card card-default">
					<div class="card-heading">
						<h2 class="card-title">Ingredients</h2>
					</div>
					<div class="card-body">
						<p>${ingredients}</p>
					</div>
				</div>				
				{{/if}}

				<div id="community-posts-region"></div>
			</div>
			<div class="col-md-4">
				<div id="ad-panel-side-region" class="ad-panel-side"></div>

				<div class="alternates card card-default">
					<div class="card-heading">
						<h2 class="card-title">Alternatives</h2>
						<p class="secondary-title"></p>
					</div>
					<div class="card-body">
					</div>
				</div>
			</div>
		</div>
		{{/if}}
	</div>
</div></script>

<script type="text/template" id="tmpl-recipes-recipe_main" >
<div>
	<div class="recipe-main-inner" data-id="${id}">
		{{if webUrl}}
			<a href="${webUrl}" itemscope itemtype="http://schema.org/Recipe"></a>
		{{/if}}
		<div class="row">
			{{if isWide}}
				<div class="col-sm-2">
					<img class="user-avatar" src="${userAvatar}"/>
				</div>
			{{/if}}
			<div class="col-sm-{{if isWide}}10{{else}}12{{/if}}">
				<div>
					{{if !isWide}}
						<div class="vcenter">
							<img class="user-avatar" src="${userAvatar}"/>
						</div>
					{{/if}}
					<div class="user-nick vcenter" itemprop="author">${userNick}</div>
				</div>
				<div class="content clearfix">
					{{if name}}
						<h2 class="title" itemprop="name">${name}</h2>
					{{/if}}
					<div class="thumbnail-and-info">
						{{if thumbnail}}
							<img class="thumbnail" src="${thumbnail}"/>
						{{/if}}
						<div class="recipe-info">
							<div class="row">
								<div class="col-4">
									<i class="f-timer"></i>
                                    <time class="value" datetime="PT${prepTime}M" itemprop="prepTime">${prepTimeText}</time>
								</div>
								<div class="col-4">
									<i class="f-no-photo-bowl"></i>
									<span class="value" itemprop="recipeYield">Serves ${servings}</span>
								</div>
								<div class="col-4">
									<span class="value" itemprop="calories">${calories} cal / srv</span>
								</div>
							</div>
						</div>
					</div>
					<p class="text user-text" itemprop="description">{{html notes}}</p>
				</div>
				<div>{{html stats}}</div>
			</div>
		</div>
	</div>
</div>
</script>

<script type="text/template" id="tmpl-recipes-recipe_page" >
<div>
	<div id="recipe-page-tmpl">
		<div id="recipe-page" class="fdct-2">
			<div class="container">
				<div class="card card-default">
					<div class="card-heading">
						<h1 class="card-title">
							{{if recipe}}
							Recipe
							{{else}}
							Recipe not found
							{{/if}}
						</h1>
					</div>
					{{if recipe}}
					<div class="card-body">
						<div class="feed-item single recipe-main">
							<div class="row">
								{{if isWide}}
								<div class="col-sm-2">
									<img class="user-avatar" src="${userAvatar}" />
								</div>
								{{/if}}
								<div class="col-sm-{{if isWide}}10{{else}}12{{/if}}">
									<div>
										{{if !isWide}}
										<div class="vcenter">
											<img class="user-avatar" src="${userAvatar}" />
										</div>
										{{/if}}
										<div class="vcenter">
											<div class="user-nick">${userNick}</div>
											<div class="date">${FDCT.DateFormatter.formatRelative(time)}</div>
										</div>
									</div>
									<div class="content clearfix">
										{{if name}}
										<h2 class="title">${name}</h2>
										{{/if}}
										<div class="thumbnail-and-info">
											{{if thumbnail}}
											<a class="thumbnail" data-image="${image}">
												<img class="original" src="${image}" />
												<img src="${thumbnail}" />
											</a>
											{{/if}}
											<div class="recipe-info">
												<div class="row">
													<div class="col-4">
														<i class="f-timer"></i>
														<time class="value" datetime="PT${prepTime}M" itemprop="prepTime">${prepTimeText}</time>
													</div>
													<div class="col-4">
														<i class="f-no-photo-bowl"></i>
														<span class="value">Serves ${servings}</span>
													</div>
													<div class="col-4">
														<span class="value">${calories} cal / srv</span>
													</div>
												</div>
											</div>
										</div>
										<p class="text user-text">{{html notes}}</p>
									</div>
									<div id="community-stats-region"></div>
								</div>
							</div>
						</div>
					</div>
					<div id="share-panel-region" class="card-footer"></div>
					{{/if}}
				</div>

				<div id="download-app-region"></div>

				<div class="ad-container ad-incontent">
					<div data-mastodon-adunit="incontent_1"></div>
				</div>

				<div id="matched-content-region"></div>

				{{if recipe}}
				<div class="ingredients card card-default">
					<div class="card-heading">
						<h2 class="card-title">Ingredients</h2>
					</div>
					<div class="card-body">
					</div>
				</div>

				<div class="ad-container ad-incontent">
					<div data-mastodon-adunit="incontent_2"></div>
				</div>

				<div class="directions card card-default">
					<div class="card-heading">
						<h2 class="card-title">Directions</h2>
					</div>
					<div class="card-body">
					</div>
				</div>

				<div id="nutrients-region"></div>

				<div class="ad-container ad-incontent">
					<div data-mastodon-adunit="incontent_x"></div>
				</div>

				<div id="community-posts-region"></div>
				{{/if}}
			</div>
		</div>
	</div>

	<div id="ingredient-tmpl">
		<div>
			<div class="ingredient-inner" data-id="${id}" data-type="${type}">
				<div class="row">
					<div class="col-3 vcenter">
						{{html pictureHtml}}
					</div>
					<div class="col-9 vcenter">
						<div class="serving-text">${servingText}</div>
						<h3 class="name">${name}</h3>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="direction-tmpl">
		<div>
			<div class="direction-inner">
				<div class="row">
					<div class="col-1 serial-no">
						${serialNo}
					</div>
					<div class="col-11">
						${instruction}
					</div>
				</div>
			</div>
		</div>
	</div>

</div></script>

<script type="text/template" id="tmpl-recipes-recipes_page" >
<div id="recipes-page" class="fdct-2">
	<div class="container">
		<div class="card card-default">
			<div class="card-heading">
				<h1 class="card-title">Recipes</h1>
			</div>
			<div class="card-body">
				<div role="tabpanel">
					<ul class="nav nav-tabs" role="tablist">
						{{each tabs}}
						<li class="nav-item" role="presentation">
							<a class="nav-link" role="tab" data-bs-toggle="tab" data-query="${query}" data-view="${view}">${title}</a>
						</li>
						{{/each}}
					</ul>
					<div class="tab-content"></div>
				</div>
			</div>
		</div>
	</div>
</div></script>

<script type="text/template" id="tmpl-search-search_page" >
<div>
	<div id="search-page-tmpl">
		<div id="search-page" class="fdct-2">
			<div class="container">
				<div class="card card-default">
					<div class="card-heading">

						<h1 class="card-title"></h1>
					</div>
					<div class="card-body">
						<div role="tabpanel">
							<ul class="nav nav-tabs" role="tablist">
								{{each tabs}}
								<li class="nav-item" role="presentation">
									<a class="nav-link" role="tab" data-bs-toggle="tab" data-type="${type}">${title}</a>
								</li>
								{{/each}}
							</ul>
							<div class="tab-content"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="search-results-heading-tmpl">
		Search results for: <span class="results-for">${resultsFor}</span>
		{{if !correct}}. Did you mean <a class="original-search-link">${search}</a>?{{/if}}
	</div>

	<div id="community-search-result-item-tmpl">
		<div>
			{{if isShowRootPost}}
			<div class="feed-item root-post"></div>
			{{else}}
			{{if isShowProduct}}
			<div class="product-short"></div>
			{{/if}}
			{{/if}}
			{{if isShowPost}}
			<div class="post">
				<div class="row">
					<div class="col-2 vcenter">
						<img class="user-avatar" src="${post.userAvatar}" />
					</div>
					<div class="col-10 vcenter">
						<p>
							<span class="user-nick">${post.userNick}: </span>
							<span class="text user-text">{{html post.text}}</span>
						</p>
					</div>
				</div>
			</div>
			{{/if}}
		</div>
	</div>
</div></script>

<script type="text/template" id="tmpl-ugc-ugc_page" >
<div id="ugc-main-content">
    <div id="ugc-left"></div>
    <div id="ugc-right">
        <h2>${brand} ${name}</h2>
        <div id="working-panel">
            <div id="working-header">
                <h3>Calories Information </h3>
                <a class="tooltip serving_size_examples inline cboxElement" id="example_upper_triger" href="/resources/images/ugc/serving/servingsize_1.jpg" title="click to see examples"><img src="/resources/images/question_mark_icon.png" alt="?" id="title-helper" data-content="click here for help" /></a>
                
                <h4>Type the product’s data exactly as it appears in the image on the left.</h4>
            </div>
            
            
            <div id="working-body">
                <div id="working-body-outer">
                    <input type="hidden" name="productid" value="${productID}" />
                    <div class="working-body-inner" id="welcome">
                        <div class="err"></div>
                        <div style="width: 350px; margin: 30px 30px;">
                        
                            Thanks for helping us out!
                            <br /><br />
                            Product data entry usually takes 5 minutes to complete.
                            <br /><br />
                            You should do this on a computer or tablet, not a small screen mobile phone. 
                            <br /><br />
                            Let's get started!
						</div>
                        <form>
                        </form>
                    </div>
                    
                    
                    <div class="working-body-inner" id="serving-size">
                        <div class="err"></div>
                        <form>
							<div class="step-instructions">
								Type the serving size <strong>exactly</strong> as it appears on the left. Type EVERYTHING including parentheses, grams, etc. Example: "1 piece 3oz (29g)"							
							</div>
                            <div class="input-line">
                                <label>Serving Size</label>
                                <input type="text" class="required longer" id="serving-size-text" name="serving_size_text" placeholder="example: 1 piece (219g)" >
                            </div>
							<div class="step-instructions">
	                            Type the <strong>number</strong> of servings per container. Type only a number, omit all text ("about","approximately, etc…)
							</div>
                            <div class="input-line">
                                <label>Serving Per Container</label>
                                <input type="text" class="required longer" id="serving-per-pkg" name="serving_per_pkg"  placeholder="example: 8">
                            </div>
                            <br style="clear:both;"/>
                            <div id="example-warper">
                                <h4 style="padding: 0;">Example</h4>
                                <img src="/resources/images/ugc/serving_size.jpg" />    
                            </div>
                        </form>
                    </div>
                    
                    <div class="working-body-inner" id="calories-info">
						<div class="step-instructions">
                            In the first box, type the <strong>Calories</strong> exactly as they appear on the left.
                            <br/>
                            In the second box, type the <strong>Calories from Fat</strong> exactly as they appear on the left.
						</div>
                        <div class="err"></div>
                        <form>
                            <div class="input-line">
                                <label>Calories</label>
                                <input type="text" class="number" name="nut_calories" id="nut_calories">
                            </div>

                            <div class="input-line">
                                <label>Calories from fat<br/><i>if exists</i></label>
                                <input type="text" class="number" name="nut_calories_from_fat" id="nut_calories_from_fat">
                            </div>

                            <br style="clear:both;"/>
                            <div id="example-warper">
                                <h4 style="padding: 0;">Example</h4>
                                <img src="/resources/images/ugc/calories.jpg" />
                            </div>

                        </form>
                    </div>
                    
                    <div class="working-body-inner" id="nutrients-info">
                        <div class="err"></div>
                        <form>
                            <div class="input-line nutrient-info-guideline">
                                <label></label>
                                <span class="insert">Enter Value</span>
                                <span>Calculated % Daily Value</span>
                            </div>

                            <div class="input-line">
                                <label class="main">Total Fat</label>
                                <input class="nutrient-input number" type="text" name="nut_total_fat"><span class="uom">g</span>
                                <span class="nutrient-calc no-margin">&nbsp;&nbsp;&nbsp;<-- Enter gram value (not %)</span>
                            </div>

                            <div class="input-line">
                                <label class="sub">Saturated Fat</label>
                                <input class="nutrient-input number" type="text" name="nut_saturated_fat"><span class="uom">g</span>
                                <span class="nutrient-calc"></span>
                            </div>

                            <div class="input-line">
                                <label class="sub">Trans Fat</label>
                                <input class="nutrient-input number" type="text" name="nut_trans_fat"><span class="uom">g</span>
                                <span class="nutrient-calc"></span>
                            </div>

                            <div class="input-line">
                                <label class="main">Cholesterol<i> - if exists</i></label>
                                <input class="nutrient-input number" type="text" name="nut_cholesterol"><span class="uom">mg</span>
                                <span class="nutrient-calc"></span>
                            </div>

                            <div class="input-line">
                                <label class="main">Sodium</label>
                                <input class="nutrient-input number" type="text" name="nut_sodium"><span class="uom">mg</span>
                                <span class="nutrient-calc"></span>
                            </div>

                            <div class="input-line">
                                <label class="main">Potassium<i> - if exists</i></label>
                                <input class="nutrient-input number copy-to-nut-2" type="text" name="nut_potassium"><span class="uom">mg</span>
                                <span class="nutrient-calc"></span>
                            </div>

                            <div class="input-line">
                                <label class="main">Total Carbohydrate</label>
                                <input class="nutrient-input number" type="text" name="nut_total_carbohydrate"><span class="uom">g</span>
                                <span class="nutrient-calc"></span>
                            </div>

                            <div class="input-line">
                                <label class="sub">Dietary Fiber</label>
                                <input class="nutrient-input number" type="text" name="nut_dietary_fiber"><span class="uom">g</span>
                                <span class="nutrient-calc"></span>
                            </div>

                            <div class="input-line">
                                <label class="sub">Sugars</label>
                                <input class="nutrient-input number" type="text" name="nut_sugars"><span class="uom">g</span>
                                <span class="nutrient-calc"></span>
                            </div>
							
                            <div class="input-line">
                                <label class="sub deep">Added<i> - if exists</i></label>
                                <input class="nutrient-input number" type="text" name="nut_added_sugars"><span class="uom">g</span>
                                <span class="nutrient-calc"></span>
                            </div>
							

                            <div class="input-line">
                                <label class="main">Protein</label>
                                <input class="nutrient-input number" type="text" name="nut_protein"><span class="uom">g</span>
                                <span class="nutrient-calc"></span>
                            </div>
                        </form>
                    </div><!-- end of nutrients 1-->
                    
                     <div class="working-body-inner" id="nutrients-info-2">
                        <div class="err"></div>
                        <form>
                            <div class="input-line">
                                <label class="main">Vitamin A<i> - if exists</i></label>
                                <input class="nutrient-input number" type="text" name="nut_vitamin_a"><span class="uom">%</span>
                            </div>
							
							<div class="input-line">
                                <label class="main">Vitamin C<i> - if exists</i></label>
                                <input class="nutrient-input number" type="text" name="nut_vitamin_c"><span class="uom">%</span>
                            </div>
							
							<div class="input-line">
                                <label class="main">Vitamin D<i> - if exists</i></label>
                                <input class="nutrient-input number" type="text" name="nut_vitamin_d"><span class="uom">%</span>
                            </div>
							
                            
                            <div class="input-line">
                                <label class="main">Calcium</label>
                                <input class="nutrient-input number" type="text" name="nut_calcium"><span class="uom">%</span>
                            </div>
                            
                            <div class="input-line">
                                <label class="main">Iron</label>
                                <input class="nutrient-input number" type="text" name="nut_iron"><span class="uom">%</span>
                            </div>
							
                            <div class="input-line">
                                <label class="main">Potassium<i> - if exists</i></label>
                                <input class="nutrient-input number ignore-value copy-to-nut" type="text" name="nut_potassium"><span class="uom">%</span>
                            </div>
							
                        </form>
                    </div><!-- end of nutrients 2-->
                    
                    <div class="working-body-inner" id="ingredients">
						<div class="step-instructions">
                            Type the ingredient list, including vitamins and minerals, exactly as it appears on the package. Include all commas, periods and parentheses. No need for capital letters.
                            <br/><br/>
                            <strong>Don't type allergy info (that’s the next step).</strong>
						</div>
                        
                        <div class="err" style="margin-left: 30px;"></div>
                        <form>
                            <label style="text-align:left; display:block; margin: 5px 20px;">Ingredients</label>        
                            <textarea name="ingredients-text" id="ingredients-textarea" required></textarea>
                        </form>
                    </div><!-- ingredients-->
                    
                    
                    <div class="working-body-inner" id="allergy-statement">
						<div class="step-instructions">
                            <strong style="font-size:120%;">Enter the allergy statement EXACTLY as it appears.</strong>
                            <br/><br/>
                            <span style="font-size: 90%;">Make sure to include all words including “Contains”, “Allergens” “Manufactured in a facility…"</span>
						</div>
                        <div class="err" style="margin-left:25px;"></div>
                        <form>
                            <!--<label style="text-align:left; display:block; margin: 5px 20px; float:left;">ALLERGENS:</label>  -->
                            <textarea name="allergies-text" style="margin-left:30px; width:300px" required></textarea>
                            <br />
                            <input type="checkbox" id="no-allergy" name="no-allergy" style="margin-left:30px; margin-top:20px; float:left;">
                            <label for="no-allergy" style="margin-left:5px; float:left; display: block; width: 310px; margin-top:20px;">No Allergy statement visible.</label>
                        </form>
                        
                    </div><!-- product-weight -->
                    
                    
                    <div class="working-body-inner" id="product-weight">
                        <div class="err"></div>
						<div class="step-instructions">
							Type the product’s NET WEIGHT exactly as it appears on the left. Include all text, commas, periods, and parentheses.
						</div>
                        <form>
                            <div class="input-line">
                                <label class="main">NET WT</label>
                                <input class="longer" type="text" name="weight-text" placeholder="example: 6 oz (70g)">
                                <label style="clear: both; width: 350px;" class="main">
                                    If you can't see the product weight, click done to continue
                                </label>
                            </div>
                        </form>
                    </div><!-- product-weight -->
                    
					
                    <br style="clear:both;"/>
                </div>
            </div>
           
            <div id="working-footer">
                <a class="tooltip inline" href="#" id="botton_tooltip" title="click to see examples"><img src="/resources/images/question_mark_icon.png" alt="?" id="title-helper" stlye="float:left;" data-content="click here for help" /></a>
                <a class="tooltip inline" id="need-help-text" title="click to see examples">need help?</a>
                
                
                <div id="actions-btn">
                    <a id="prev-btn" class="read-more" href="#">&lt;  Back</a>
                    <a id="next-btn" class="read-more" href="#">Next  &gt;</a>
                </div>
            </div>
            </form>
        </div>
        
        <div id="problems-reporting">
            <h4 id="problems-reporting-toggle">Problems with images?</h3>
            <div id="problems-list" style="display: none">
                <ul>
                    <!--
                    <li><input type="checkbox" class="image-problems" data-reason="1">NET WEIGHT not present in the image to the left</li>
                    -->
                </ul>
                
                <a class="read-more" id="report-problem-button">Report problem</a>
            </div>
        </div>
        
        <div id="progress-warper">
            PROGRESS <div id="progressbar"></div>
        </div>
        
    </div>
    
    <div class="clearance"></div>
    

</div>


<!-- This contains examples -->
<div style='display:none'>
    
    <a href="/resources/images/ugc/serving/servingsize_2.jpg" class="serving_size_examples cboxElement"></a>
    <a href="/resources/images/ugc/serving/servingsize_3.jpg" class="serving_size_examples cboxElement"></a>
    <a href="/resources/images/ugc/serving/servingsize_4.jpg" class="serving_size_examples cboxElement"></a>
    <a href="/resources/images/ugc/serving/servingsize_5.jpg" class="serving_size_examples cboxElement"></a>
    <a href="/resources/images/ugc/serving/servingsize_6.jpg" class="serving_size_examples cboxElement"></a>
    
    <a class="nutrition_examples cboxElement"  href="/resources/images/ugc/nutrition/nutrition_2.jpg"></a>
    <a class="nutrition_examples cboxElement"  href="/resources/images/ugc/nutrition/nutrition_3.jpg"></a>
    <a class="nutrition_examples cboxElement"  href="/resources/images/ugc/nutrition/nutrition_4.jpg"></a>
    <a class="nutrition_examples cboxElement"  href="/resources/images/ugc/nutrition/nutrition_5.jpg"></a>
    <a class="nutrition_examples cboxElement"  href="/resources/images/ugc/nutrition/nutrition_6.jpg"></a>
    <a class="nutrition_examples cboxElement"  href="/resources/images/ugc/nutrition/nutrition_7.jpg"></a>
    <a class="nutrition_examples cboxElement"  href="/resources/images/ugc/nutrition/nutrition_8.jpg"></a>
    <a class="nutrition_examples cboxElement"  href="/resources/images/ugc/nutrition/nutrition_9.jpg"></a>


    <a class="calories_examples cboxElement"  href="/resources/images/ugc/calories/calories_2.jpg"></a>
    <a class="calories_examples cboxElement"  href="/resources/images/ugc/calories/calories_3.jpg"></a>
    <a class="calories_examples cboxElement"  href="/resources/images/ugc/calories/calories_4.jpg"></a>
    <a class="calories_examples cboxElement"  href="/resources/images/ugc/calories/calories_5.jpg"></a>


    <a class="vitamins_examples cboxElement"  href="/resources/images/ugc/vitamins/vitamins_2.jpg"></a>
    <a class="vitamins_examples cboxElement"  href="/resources/images/ugc/vitamins/vitamins_3.jpg"></a>
    <a class="vitamins_examples cboxElement"  href="/resources/images/ugc/vitamins/vitamins_4.jpg"></a>
    <a class="vitamins_examples cboxElement"  href="/resources/images/ugc/vitamins/vitamins_5.jpg"></a>
    <a class="vitamins_examples cboxElement"  href="/resources/images/ugc/vitamins/vitamins_6.jpg"></a>

    
    <a class="ingredients_examples cboxElement"  href="/resources/images/ugc/ingredients/ingredients_2.jpg"></a>
    <a class="ingredients_examples cboxElement"  href="/resources/images/ugc/ingredients/ingredients_3.jpg"></a>
    <a class="ingredients_examples cboxElement"  href="/resources/images/ugc/ingredients/ingredients_4.jpg"></a>
    <a class="ingredients_examples cboxElement"  href="/resources/images/ugc/ingredients/ingredients_5.jpg"></a>
    <a class="ingredients_examples cboxElement"  href="/resources/images/ugc/ingredients/ingredients_6.jpg"></a>

    <a class="allergies_examples cboxElement"  href="/resources/images/ugc/allergies/allergies_2.jpg"></a>
    <a class="allergies_examples cboxElement"  href="/resources/images/ugc/allergies/allergies_3.jpg"></a>
    
    <a class="productweight_examples cboxElement"  href="/resources/images/ugc/productweight/productweight_2.jpg"></a>
    <a class="productweight_examples cboxElement"  href="/resources/images/ugc/productweight/productweight_3.jpg"></a>
    <a class="productweight_examples cboxElement"  href="/resources/images/ugc/productweight/productweight_4.jpg"></a>

</div>


<div style="display:none" id="ugc-complete">
    <div style="padding:20px;">
        <h3>Thanks for Completing Product Data Entry!</h3>
        <br /><br /><br /><br />
        Thanks for entering data for ${name}
        <br />
        <br />
        Calculating product grade, things to know, and healthy alternatives
        <br />
        <br />
        <div id="save-response" style="text-align: center;">
            <img src="/resources/images/ugc/ugc_save_preload.gif" />
        </div>
        
        <a class="read-more" style="visibility: hidden;" id="go-to-product-btn">Click here to see the product NOW</a>
   </div>
</div>
</script>

<script type="text/template" id="tmpl-ugc-ugc_page_error" >
<div id="ugc-main-content">
    <div id="error_warper">
        <h1>
            {{if title}}
                ${title}
            {{else}}
                Thank you for helping us to provide a bit better food.
            {{/if}}
        </h1>
        <div id="error-content">
            {{if error_message}}
                {{html error_message}}
            {{else}}
                thank you, this is no longer available, we appreciate .....
            {{/if}}
        </div>
    </div>
</div></script>

<script type="text/template" id="tmpl-ugc-ugc_page_image" >
<div id="gallery" class="ad-gallery">
    <div class="ad-image-wrapper"></div>
    <div id="image-action">
        <button id="rotate-left" class="btn"></button>
        <button id="rotate-right" class="btn"></button>
        <button id="zoomin" class="btn"></button>
        <button id="zoomout" class="btn"></button>
    </div>
    <div class="ad-nav">
        <div class="ad-thumbs">
        <ul class="ad-thumb-list">
            {{each images}}
            <li>
                <a href="${$value}">
                    <img src="${$value}" class="thumb-img">
                </a>
            </li>
            {{/each}}
        </ul>
        </div>
        <div class="ad-controls"></div>
    </div>
</div>        
</script>

<script type="text/template" id="tmpl-ugc-ugc_page_thanks" >
<div id="ugc-main-content">
    <div id="error_warper">
        <h1>
            Thanks for Completing Product Data Entry!
        </h1>
        <div id="thanks-content">
            Thanks for entering data for <brand + product name>
            <br />
            Calculating product grade, things to know, and healthy alternatives  (Show something spin for 3.5 seconds)
            <br />
        </div>
        <br />
        <br />
        <a class="read-more" id="go-to-product-btn">Click here to see the product NOW</a>
    </div>
</div></script>

<script type="text/template" id="tmpl-user-user" >
<div>
	<div id="user-menu-tmpl">
		{{if signedIn}}
		<li class="dropdown">
			<a class="dropdown-toggle" data-bs-toggle="dropdown">
				{{if avatarImg}}
				{{html avatarImg}}
				{{/if}}
				<div class="nick">
					<!-- <span class="hidden-sm">hello </span> -->${nick}
				</div>
				<span class="caret"></span>
			</a>
			<ul class="dropdown-menu" role="menu">
				<li>
					<a id="update-profile" class="profile-btn">Update Profile</a>
				</li>
				<li>
					<a id="history" class="profile-btn">My History</a>
				</li>
				{{if isShowAdminAreas}}
				<li id="admin-area-menu-item">
					<a id="admin-area" class="admin-area-btn">Administration</a>
				</li>
				{{/if}}
				<li>
					<a id="sign-out">Log Out</a>
				</li>
			</ul>
		</li>
		{{else}}
		<li>
			<a class="login">Login</a>
		</li>
		{{/if}}
	</div>

	{{! Used ONLY for mobile when user is logged in - a shortcut link that always appears in the header - shows user
	avatar plus name, opens the collapsed user menu drop down }}
	<div id="user-link-tmpl">
		<li>
			<a class="user-link">
				{{if avatarImg}}
				{{html avatarImg}}
				{{/if}}
				<div class="nick">${nick}</div>
			</a>
		</li>
	</div>

	<div id="sign-in-tmpl">
		<div id="sign-in-dialog" class="user-dialog">
			<div class="main top">
				<div class="heading group">
					<h2>Log in</h2>
					<a id="or-sign-up">or sign up</a>
					{{if notes}}
					<p class="error">${notes}</p>
					{{/if}}
				</div>
				<form>
					<fieldset>
						<div class="fields"></div>
						<button type="button" id="singin-button-dailog" class="dark singin-button-dailog">Log in</button>
						<div class="extra"></div>

						<a id="forgot-password">forgot password</a>

					</fieldset>
				</form>
			</div>
			<div class="odd bottom social-login">
				<div id="or">or</div>
				<button id="fb-connect">
					<div>
						<img src="/resources/images/icon-fb.svg" />
						<span>Continue with Facebook</span>
					</div>
				</button>
				<button id="appleid-signin-fdct" data-color="black" data-border="true" data-type="sign in">
					<div>
						<img src="/resources/images/icon-apple.svg" />
						<span>Sign in with Apple</span>
					</div>
				</button>
				<button id="google-plus-sign-in">
					<div>
						<img src="/resources/images/icon-google.svg" />
						<span>Continue with Google</span>
					</div>
				</button>
			</div>
			<div class="odd bottom agreement">
				By continuing, you agree to our <a href="/terms" target="_blank">terms of service</a> and <a href="/privacy"
					target="_blank">privacy policy</a>
			</div>
		</div>
	</div>

	<div id="password-reset-tmpl">
		<div id="password-reset-dialog" class="user-dialog">
			<form>
				<fieldset>
					<div class="main top bottom">
						<div class="heading group">
							<h2>Password reset</h2>
						</div>
						<div class="fields"></div>
						<label>You will shortly receive an email with further instructions.</label>
						<button type="submit" class="dark">Reset my password</button>
					</div>
					<legend>password reset form</legend>
				</fieldset>
			</form>
			<div class="extra"></div>
		</div>
	</div>

	<div type="text/html" id="email-change-tmpl">
		<div id="email-change-dialog" class="user-dialog">
			<div class="main top bottom">
				<div class="heading group">
					<h2>Email Change</h2>
				</div>
				<form>
					<fieldset>
						<div class="fields"></div>
						<div class="actions">
							<button type="submit" class="dark submit">Change</button>
							<a class="cancel">Cancel</a>
						</div>
						<legend>email change form</legend>
					</fieldset>
				</form>
			</div>
		</div>
	</div>

	<div id="delete-account-confirmation-tmpl">
		<div id="delete-account-confirmation-dialog" class="user-dialog">
			<div class="main top bottom">
				<div class="heading group">
					<h2>Delete your Account?</h2>
					<p>This will permanently delete your account</p>
				</div>
				<form>
					<fieldset>
						<div class="fields"></div>
						<div class="actions">
							<button type="submit" class="dark submit">Delete Account</button>
							<a class="cancel">Cancel</a>
						</div>
						<legend>delete account confirmation form</legend>
					</fieldset>
				</form>
			</div>
		</div>
	</div>

	<div id="new-owner-tmpl">
		<div id="new-owner-dialog">
			<div class="main top bottom">
				<div class="heading group">
					<div class="images">
						<img src="/resources/images/app-icons/icon1024pt.png"
							srcset="/resources/images/app-icons/icon1024pt.png 1x,/resources/images/app-icons/icon1024pt@2x.png 2x,/resources/images/app-icons/icon1024pt@3x.png 3x," />
						&plus;
						<img src="/resources/images/app-icons/MM.png"
							srcset="/resources/images/app-icons/MM.png 1x,/resources/images/app-icons/MM@2x.png 2x,/resources/images/app-icons/MM@3x.png 3x," />
					</div>
					<h2>Fooducate<br />is now part of Maple Media</h2>
					<p>Tap Accept to confirm that you understand and agree to our <a href="/terms">Terms of Service</a> and <a
							href="/privacy">Privacy Policy</a>.</p>
				</div>
				<form>
					<fieldset>
						<div class="actions">
							<button type="submit" class="accept">Accept</button>
						</div>
						<legend>delete account confirmation form</legend>
					</fieldset>
				</form>
			</div>
		</div>
	</div>
</div></script>
	<!-- Detect and display Mastodon ads  -->
<script>
    Mastodon.push(function() {
        Mastodon.searchForNewAdContainers();
    });
</script>


    <!-- 3rd parties -->
    <script src="/resources/js/lib/jquery-2.1.1.min.js"></script>

    <script src="/resources/js/lib/jquery-migrate-1.2.1.js"></script>
    <script src="/resources/js/lib/owl.carousel.min.js"></script>

    <script src="/resources/js/lib/jquery-ui.min.js"></script>
    <script src="/resources/js/lib/jquery.tmpl.min.js"></script>
    <script src="/resources/js/lib/modernizr.js"></script>
    <!-- class style inheritence -->
    <script src="/resources/js/lib/jquery.inherit-1.0.9.js"></script>
    <!-- manage browser back button -->
    <script src="/resources/js/lib/jquery.ba-bbq.min.js"></script>
    <!-- Convinient cookie library -->
    <script src="/resources/js/lib/jquery.cookie.js"></script>
    <!-- lighbox -->
    <script src="/resources/js/lib/jquery.colorbox-min.js"></script>
    <!-- detect old browsers -->
    <script src="/resources/js/lib/jreject/jquery.reject.min.js"></script>
    <!-- Form Generator -->
    <script src="/resources/js/lib/jquery.validate.min.js"></script>
    <script src="/resources/js/lib/jquery.dform-1.0.0.min.js"></script>

    <script src="/resources/js/lib/jquery.tooltip.min.js"></script>
    <script src="/resources/js/lib/ad_gallery/jquery.ad-gallery.js"></script>
    <script src="/resources/js/lib/jquery.waitforimages.min.js"></script>
    <!--<script src="/resources/js/lib/jquery.guillotine.js"></script>-->


    <script src="/resources/js/infra.js?3.46"></script>
    <script src="/resources/js/Analytics.js?3.46"></script>
    <script src="/resources/js/model/data/ValueList.js?3.46"></script>
    <script src="/resources/js/model/data/User.js?3.46"></script>
    <script src="/resources/js/model/data/UserConfig.js?3.46"></script>
    <script src="/resources/js/model/data/Headline.js?3.46"></script>
    <script src="/resources/js/model/data/Label.js?3.46"></script>
    <script src="/resources/js/model/data/CommunityInfo.js?3.46"></script>
    <script src="/resources/js/model/data/CommunityPost.js?3.46"></script>
    <script src="/resources/js/model/data/ShareTemplate.js?3.46"></script>
    <script src="/resources/js/model/data/Nutrient.js?3.46"></script>
    <script src="/resources/js/model/data/Nutrients.js?3.46"></script>
    <script src="/resources/js/model/data/Product.js?3.46"></script>
    <script src="/resources/js/model/data/list/ListItem.js?3.46"></script>
    <script src="/resources/js/model/data/list/List.js?3.46"></script>
    <script src="/resources/js/model/data/list/Recipe.js?3.46"></script>
    <script src="/resources/js/model/data/list/ListItemRecipe.js?3.46"></script>
    <script src="/resources/js/model/data/list/ListItemProduct.js?3.46"></script>
    <script src="/resources/js/model/data/list/ListItemFood.js?3.46"></script>
    <script src="/resources/js/model/data/list/ListItemNote.js?3.46"></script>
    <script src="/resources/js/model/data/CategoryBrowse.js?3.46"></script>
    <script src="/resources/js/model/data/RegisterFields.js?3.46"></script>
    <script src="/resources/js/model/data/Preferences.js?3.46"></script>
    <script src="/resources/js/model/data/Ugc.js?3.46"></script>
    <script src="/resources/js/model/data/NutrientDailyConst.js?3.46"></script>
    <script src="/resources/js/model/data/IngredientsListConst.js?3.46"></script>
    <script src="/resources/js/model/data/BizClient.js?3.46"></script>
    <script src="/resources/js/model/data/BizSite.js?3.46"></script>
    <script src="/resources/js/model/data/BizSiteCode.js?3.46"></script>
    <script src="/resources/js/model/response/Response.js?3.46"></script>
    <script src="/resources/js/model/response/AuthResponse.js?3.46"></script>
    <script src="/resources/js/model/response/ProductResponse.js?3.46"></script>
    <script src="/resources/js/model/response/ListsResponse.js?3.46"></script>
    <script src="/resources/js/model/response/AlternateResponse.js?3.46"></script>
    <script src="/resources/js/model/response/CommunityPostsResponse.js?3.46"></script>
    <script src="/resources/js/model/response/CommunityPostResponse.js?3.46"></script>
    <script src="/resources/js/model/response/CategoryBrowseResponse.js?3.46"></script>
    <script src="/resources/js/model/response/PreferencesResponse.js?3.46"></script>
    <script src="/resources/js/model/response/UgcResponse.js?3.46"></script>
    <script src="/resources/js/model/response/BizClientResponse.js?3.46"></script>
    <script src="/resources/js/model/RememberedUser.js?3.46"></script>
    <script src="/resources/js/model/UserSession.js?3.46"></script>
    <script src="/resources/js/model/Dao.js?3.46"></script>
    <script src="/resources/js/model/DaoAggregator.js?3.46"></script>
    <script src="/resources/js/model/AuthDao.js?3.46"></script>
    <script src="/resources/js/model/ShareDao.js?3.46"></script>
    <script src="/resources/js/model/ExternalSignInDao.js?3.46"></script>
    <script src="/resources/js/model/ProductDao.js?3.46"></script>
    <script src="/resources/js/model/ProductSearchDao.js?3.46"></script>
    <script src="/resources/js/model/ListDao.js?3.46"></script>
    <script src="/resources/js/model/CommunityDao.js?3.46"></script>
    <script src="/resources/js/model/ListDao.js?3.46"></script>
    <script src="/resources/js/model/CategoryBrowseDao.js?3.46"></script>
    <script src="/resources/js/model/CategoryBrowseProductsDao.js?3.46"></script>
    <script src="/resources/js/model/PreferencesDao.js?3.46"></script>
    <script src="/resources/js/model/UgcDao.js?3.46"></script>
    <script src="/resources/js/model/BizClientSearchDao.js?3.46"></script>
    <script src="/resources/js/model/BizClientDao.js?3.46"></script>
    <script src="/resources/js/model/BizSiteSearchDao.js?3.46"></script>
    <script src="/resources/js/model/BizSiteDao.js?3.46"></script>
    <script src="/resources/js/model/BizCodeSearchDao.js?3.46"></script>
    <script src="/resources/js/presenter/CommunityInfo.js?3.46"></script>
    <script src="/resources/js/presenter/Product.js?3.46"></script>
    <script src="/resources/js/presenter/CategoryBrowse.js?3.46"></script>
    <script src="/resources/js/presenter/social/ExternalSignIn.js?3.46"></script>
    <script src="/resources/js/presenter/social/Facebook.js?3.46"></script>
    <script src="/resources/js/presenter/social/Twitter.js?3.46"></script>
    <script src="/resources/js/presenter/social/GooglePlus.js?3.46"></script>
    <script src="/resources/js/presenter/social/Pinterest.js?3.46"></script>
    <script src="/resources/js/presenter/social/Email.js?3.46"></script>
    <script src="/resources/js/view/auth/ExternalAuthPage.js?3.46"></script>
    <script src="/resources/js/presenter/social/Apple.js?3.46"></script>
    <script src="/resources/js/presenter/FormFactory.js?3.46"></script>
    <script src="/resources/js/presenter/BizClient.js?3.46"></script>
    <script src="/resources/js/presenter/BizSite.js?3.46"></script>
    <script src="/resources/js/presenter/BizSiteCode.js?3.46"></script>
    <script src="/resources/js/presenter/PageParams.js?3.46"></script>
    <script src="/resources/js/view/jquery.thumbnail.js?3.46"></script>
    <script src="/resources/js/view/jquery.collapsibleList.js?3.46"></script>
    <script src="/resources/js/view/view.js?3.46"></script>
    <script src="/resources/js/view/Page.js?3.46"></script>
    <script src="/resources/js/view/search_box.js?3.46"></script>
    <script src="/resources/js/view/ActionElement.js?3.46"></script>
    <script src="/resources/js/view/Template.js?3.46"></script>
    <script src="/resources/js/view/mastodon/Incontent.js?3.46"></script>
    <script src="/resources/js/view/ItemList.js?3.46"></script>
    <script src="/resources/js/view/Pager.js?3.46"></script>
    <script src="/resources/js/view/PromptTextBox.js?3.46"></script>
    <script src="/resources/js/view/CollapsibleText.js?3.46"></script>
    <script src="/resources/js/view/Modal.js?3.46"></script>
    <script src="/resources/js/view/ConfirmationPopup.js?3.46"></script>
    <script src="/resources/js/view/FormField.js?3.46"></script>
    <script src="/resources/js/view/PagerContinue.js?3.46"></script>
    <script src="/resources/js/view/DownloadApp.js?3.46"></script>
    <script src="/resources/js/view/MatchedContent.js?3.46"></script>
    <script src="/resources/js/view/BlogLinks.js?3.46"></script>
    <script src="/resources/js/view/user/jquery.captcha.js?3.46"></script>
    <script src="/resources/js/view/user/UserDialog.js?3.46"></script>
    <script src="/resources/js/view/user/user_menu.js?3.46"></script>
    <script src="/resources/js/view/social/SharePanel.js?3.46"></script>
    <script src="/resources/js/view/social/SharePage.js?3.46"></script>
    <script src="/resources/js/view/social/AfterSharePage.js?3.46"></script>
    <script src="/resources/js/view/community/CommunityStatsPanel.js?3.46"></script>
    <script src="/resources/js/view/community/CommunityPostsPanel.js?3.46"></script>
    <script src="/resources/js/view/community/CommunityRootPostsPanel.js?3.46"></script>
    <script src="/resources/js/view/community/CommunityPage.js?3.46"></script>
    <script src="/resources/js/view/community/CommunityPostPage.js?3.46"></script>
    <script src="/resources/js/view/community/DailyTipPage.js?3.46"></script>
    <script src="/resources/js/view/recipes/RecipesPage.js?3.46"></script>
    <script src="/resources/js/view/recipes/RecipePage.js?3.46"></script>
    <script src="/resources/js/view/product/ProductPage.js?3.46"></script>
    <script src="/resources/js/view/product/HistoryPage.js?3.46"></script>
    <script src="/resources/js/view/search/ProductSearch.js?3.46"></script>
    <script src="/resources/js/view/search/CommunitySearch.js?3.46"></script>
    <script src="/resources/js/view/search/RecipeSearch.js?3.46"></script>
    <script src="/resources/js/view/search/SearchPage.js?3.46"></script>
    <script src="/resources/js/view/categorybrowse/CategoryBrowsePage.js?3.46"></script>
    <script src="/resources/js/view/preferences/PreferencesPage.js?3.46"></script>
    <script src="/resources/js/view/preferences/AccountPage.js?3.46"></script>
    <script src="/resources/js/view/ugc/UgcPage.js?3.46"></script>
    <script src="/resources/js/view/home/HomePage.js?3.46"></script>
    <script src="/resources/js/view/admin/AdminDialog.js?3.46"></script>
    <script src="/resources/js/view/admin/MenuPage.js?3.46"></script>
    <script src="/resources/js/view/admin/BizClientSearchPage.js?3.46"></script>
    <script src="/resources/js/view/admin/BizClientPage.js?3.46"></script>
    <script src="/resources/js/view/admin/BizSitePage.js?3.46"></script>
    <script src="/resources/js/presenter/Navigation.js?3.46"></script>
    <script src="/resources/js/presenter/Preferences.js?3.46"></script>
    <script src="/resources/js/presenter/IssueReport.js?3.46"></script>
    <script src="/resources/js/presenter/dialogExtended.js?3.46"></script>


<script>
    $(function() {
        $("ul.dropdown li").hover(function() {

            $(this).addClass("hover");
            $('ul:first', this).css('visibility', 'visible');

        }, function() {
            $(this).removeClass("hover");
            $('ul:first', this).css('visibility', 'hidden');

        });

        $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");
    });
</script>

<script type="text/javascript">
    (function() {
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
    })();
</script>

<script type="text/javascript">
    (function() {
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/client:plusone.js?onload=googlePlusOnLoad';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
    })();

    function googlePlusOnLoad() {
        FDCT.presenter.social.GooglePlus.onLoad();
    }
</script>

<script type="text/javascript">
    (function() {
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
    })();
</script>


<div class="fdct-2">
    <div id="xs-indicator" class="visible-xs"></div>
    <div id="sm-indicator" class="visible-sm"></div>
    <div id="md-indicator" class="visible-md"></div>
    <div id="lg-indicator" class="visible-lg"></div>
</div>

<script type="text/template" id="download-app-content-page">
    <div class="download-app">
    <a class="app-store" href="http://api.fooducate.com/fdct/promotional/getfooducateapp/?platform=iphone&app=Fdct-Web&resource=mid-panel-button" target="_blank">Download on the App Store</a>
    <a class="google-play" href="http://api.fooducate.com/fdct/promotional/getfooducateapp/?platform=android&app=Fdct-Web&resource=mid-panel-button" target="_blank">Get it on Google Play</a>
</div></script></body>
</html>