<!-- <meta http-equiv="X-UA-Compatible" content="chrome=1"> -->
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <!-- <script src="http://jsconsole.com/remote.js?C2501302-08C3-4DA2-BC07-BB580676DDA4"></script> -->
    <!-- <script src="//console.re/connector.js" data-channel="C2501302-08C3-4DA2-BC07-BB580676DDA4" id="consolerescript"></script> -->
    <script type="text/javascript" src="js/jquery.min.js?c=125"></script>
    <script type="text/javascript" src="js/kendo.mobile.min.js?c=125"></script>
    <link href="styles/kendo.mobile.all.min.css?c=125" rel="stylesheet" />    
    <script type="text/javascript" src="js/jquery.barcode.0.3.js?c=125"></script>
    <link href="styles/fa.css?c=125" rel="stylesheet" />
    <script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
    <script type="text/javascript">
        var addToHomeConfig = {
            autostart:false
        };
    </script>
    
    
    <link href="styles/add2home.css?c=125" rel="stylesheet" />
    <script type="text/javascript" src="js/fa.js?c=125"></script>
    <script type="text/javascript" src="js/util.js?c=125"></script>
    <script type="text/javascript" src="js/maps.js?c=125"></script>
    <script type="text/javascript" src="js/store.js?c=125"></script>
    <script type="text/javascript" src="js/add2home.js?c=125"></script>
    <script type="text/javascript" src="js/jquery.cookie.js?c=125"></script>

    <script type="text/javascript"> 
        var localStorageEnabled = true;
        var cookiesEnabled = true;
        var baseURL = "";
        if (window.location.href.indexOf("t5m.co/") != -1) {
            baseURL = "t5m.co/";
        }
        
        if (window.location.href.indexOf("t5m.com/") != -1) {
            baseURL = "t5m.com/";
        }
        
        if (baseURL == "") {
            baseURL = "t5m.com/";
        }
        
        //router_success = 1 if router was succesfull and 0 if it was not
        //redirect to sorry.html if it was not succesfull
        var router_success="0";
        var haveBootstrap = false;
        var bootstrapVersion="0";
        
        var app_id = getQueryVariable("app_id");
        if (app_id == "") {
            app_id="0";            
        }
        var initialTabName = getQueryVariable("go");
        var couponCode = getQueryVariable("coupon");
        
        var friendlyname="www";
        var forcePlatform="";
        var appMode="D";

        var appPrefix;
        var iconPrefix; 
        
        if (router_success != 1 || router_success.indexOf("$router_success") != -1) {
            window.location.replace('sorry.html');
        }
                
        var desktop_website=""; 
        if (desktop_website.indexOf("$desktop_website") != -1) {
            desktop_website = "";
        }

        var bootstrapData = "";

        if (bootstrapData.indexOf("$bootstrapData") != -1 || typeof bootstrapData == 'undefined' || bootstrapData == '') {
            haveBootstrap = false;
        }
        else {
            haveBootstrap = true;
        }
        
        // Only fetch this locally if localstorage is enabled.  
        //if (!haveBootstrap) {            
        //    if (localStorage.getItem(app_id + "bootstrapVersion")) {
        //        if (localStorage.getItem(app_id + "bootstrapVersion") == bootstrapVersion) {
        //            if (localStorage.getItem(app_id + "bootstrapData")) {
        //                bootstrapData = localStorage.getItem(app_id + "bootstrapData");
        //                haveBootstrap = true;
        //            }
        //        
        //        }
        //    }
        //}

        //Check to see if vanity domain is set AND we are in the correct site
        
        var thirdPartyDomainWeb = "";
        if (thirdPartyDomainWeb.indexOf("$third_party_domain_web") != -1 || typeof thirdPartyDomainWeb == 'undefined' || thirdPartyDomainWeb == '') {
            thirdPartyDomainWeb = "";
        }

        var thirdPartyDomainMobile = "";
        if (thirdPartyDomainMobile.indexOf("$third_party_domain_mobile") != -1 || typeof thirdPartyDomainMobile == 'undefined' || thirdPartyDomainMobile == '') {
            thirdPartyDomainMobile = "";
        }
        
        var thirdPartyDomainType = "";
        if (thirdPartyDomainType.indexOf("$third_party_domain_type") != -1 || typeof thirdPartyDomainType == 'undefined' || thirdPartyDomainType == '') {
            thirdPartyDomainType = "";
        }
        
        if (thirdPartyDomainMobile != "" && window.location.href.indexOf(thirdPartyDomainMobile) == -1 
            && window.location.href.indexOf('top5mobile') == -1 
            && window.location.href.indexOf('www.transactiontest.com') == -1 
            && window.location.href.indexOf('192.168.2.') == -1 )  {  
            window.location.replace("http://" + thirdPartyDomainMobile + "/mobile/index.html");
        }
        
        var webURL;
        if (thirdPartyDomainWeb != "") {
            webURL = "http://" + thirdPartyDomainWeb + "/web/index.html";
        }
        else {
            webURL = window.location.href;
            webURL = webURL.replace('/mobile/', '/web/');
        }

        //if (!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|AppleWebKit|BlackBerry|Firefox|Opera|Silk|IEMobile\/10.0)/i) && window.location.href.indexOf('top5mobile') == -1) {
        //if (!browserMobile() && window.location.href.indexOf('top5mobile') == -1) {
        //    window.location.replace(webURL);
        //}
        
        //Check for cookies...
        
        if (!cookieStorageEnabled()) {
            cookiesEnabled = false;
        }
        
        if (!isLocalStorageNameSupported()) {
            localStorageEnabled = false;  
        }
        
        appPrefix = "https://t5m.s3.amazonaws.com/";
        iconPrefix = "https://t5mtabs.s3.amazonaws.com/";
        
        if (appMode == 'D' || appMode.indexOf("$mode") != -1) {
            if (document.location.protocol == "http:") {
                appPrefix = "http://t5mdesign.s3.amazonaws.com/";
                iconPrefix = "http://cache.t5m.com/tab/";
            }
            else {
                appPrefix = "https://t5mdesign.s3.amazonaws.com/";
                iconPrefix = "https://dqmr1ldepdjeh.cloudfront.net/tab/";
            }
        }
        else {
            if (document.location.protocol == "http:") {
                appPrefix = "http://t5m.s3.amazonaws.com/";
                iconPrefix = "http://cache.t5m.com/tab/";
                }
            else {
                appPrefix = "https://t5m.s3.amazonaws.com/";
                iconPrefix = "https://dqmr1ldepdjeh.cloudfront.net/tab/";
            }
        }           
        
        function __debug() {
            var __i = 0;
        }
                
    </script>




</head>
<body>
<script type="text/javascript" >
    //Hide the document body so we don't see any FOUC
    $(document.body).css("visibility", "hidden");
</script>



<!--    <div style="width: 100%; height: 100%; font-size: 24px;" id="loading">Loading...</div> -->

    <div data-role="layout" id="maintabstrip" data-id="mobile-tabstrip">
        <header id="mainheader" data-role="header">
            <div id="mainnavbar" data-role="navbar">
                <span id="mainnavbartext" data-role="view-title"></span>
            </div>
        </header>

        <div data-role="footer">
            <div data-role="tabstrip" data-select="onSelectTabStrip" id="navfooter">
            
            </div>
            <div id="poweredby"></div> 
        </div>

    </div>
    
    
    
    <script id="twitter-pull-to-refresh-template" type="text/x-kendo-template">
        # /* logit("Twitter Template Start"); */ #
        <div class="tweet">
            <img class="pullImage" src="#= profile_image_url #" alt="#= from_user #" />#= text #
            <div class="metadata">
                <a class="sublink" target="_blank" href="https://twitter.com/\\#!/#= from_user #/status/#= id_str #" rel="nofollow">#= kendo.toString(new Date(Date.parse(created_at)), "dd MMM HH:mm") #</a>
                |
                <a class="sublink" href="https://twitter.com/#= from_user #" rel="nofollow">#= from_user #</a>
            </div>
        </div>
        # var now = new Date(); /*logit("Twitter: " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + "." + now.getMilliseconds(), "index.html"); */#

    </script>

    <script id="youtube-pull-to-refresh-templatex" type="text/x-kendo-template">
        # youTubeURL.push(id.$t); #
        # youTubeURLIndex = youTubeURL.length - 1; #
        <div class="tweet">
            <img class="pullImage" src="#= media$group.media$thumbnail[0].url #" /> <div class="list-title">#= title.$t #</div>
            <div class="list-title">
                <a href="\#youtubedetails?id=#= youTubeURLIndex #">#= content.$t #</a>
            </div>
            <a class="sublink2" href="\#youtubedetails?id=#= youTubeURLIndex #">By #=author[0].name.$t#</a><br>
            <a class="sublink2" href="\#youtubedetails?id=#= youTubeURLIndex #">#= new Date(published.$t).toLocaleDateString() #</a>
        </div>
    </script>

    <script id="youtube-pull-to-refresh-template" type="text/x-kendo-template">
        # youTubeURL.push(id.videoId); #
        # youTubeURLIndex = youTubeURL.length - 1; #
        <div class="tweet">
            <img class="pullImage" src="#= snippet.thumbnails.default.url #" /> <div class="list-title">#= snippet.title #</div>
            <div class="list-title">
                <a href="\#youtubedetails?id=#= youTubeURLIndex #">#= snippet.description #</a>
            </div>
            <a class="sublink2" href="\#youtubedetails?id=#= youTubeURLIndex #">By #=snippet.channelTitle#</a><br>
            <a class="sublink2" href="\#youtubedetails?id=#= youTubeURLIndex #">#= new Date(snippet.publishedAt).toLocaleDateString() #</a>
        </div>
    </script>




    <script id="rss-pull-to-refresh-template1" type="text/x-kendo-template">
        # rssURL.push(link); #
        # rssURLIndex = rssURL.length - 1; #
        <div class="tweet" style="max-width: 90%;">
            <a data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">
            # if (mediaGroups[0].contents[0].thumbnails[0].url) #
                <img class="pullImage" src="#= mediaGroups[0].contents[0].thumbnails[0].url #" onError="this.src='images/NoImage.png';"/>
            </a> 
            <div class="list-title" style="max-width: 90%;"><a data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">#= title #</a></div>
            <div class="list-title" style="max-width: 90%;"><a data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">#= content #</a></div>
            <div class = "sublink2" style="max-width: 90%;"><a data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">#= publishedDate #</a></div>
        </div>
        </a>
        # var now = new Date();logit("rssx-pull-to-refresh-template complete: " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + "." + now.getMilliseconds(), "index.html");#

    </script>

    <script id="rss-pull-to-refresh-template" type="text/x-kendo-template">
        # rssURL.push(link); #
        # rssURLIndex = rssURL.length - 1; #
        <div class="tweet" style="max-width: 90%;">
            # if (typeof mediaGroups != 'undefined' && typeof mediaGroups[0].contents != 'undefined' && typeof mediaGroups[0].contents[0].thumbnails != 'undefined') { #
                <a onclick="showRSSViewTitle('Details')" data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">
                    <img class="pullImage" src="#= mediaGroups[0].contents[0].thumbnails[0].url #" onError="this.src='images/NoImage.png';"/>
                </a> 
                <div class="list-title" style="width: 90%;"><a onclick="showRSSViewTitle('Details')" data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">#= title #</a></div>
                <div class="sublink2" style="width: 90%;"><a onclick="showRSSViewTitle('Details')" data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">#= content #</a></div>
                <div class="sublink2" style="width: 90%; "><a onclick="showRSSViewTitle('Details')" data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">#= publishedDate #</a></div>
            # } else { #
                <div class="list-titlefb" style="max-width: 90%;"><a onclick="showRSSViewTitle('Details')" data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">#= title #</a></div>
                <div class="sublink2fb" style="max-width: 90%;"><a onclick="showRSSViewTitle('Details')" data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">#= content #</a></div>
                <div class="sublink2fb" style="max-width: 90%;"><a onclick="showRSSViewTitle('Details')" data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">#= publishedDate #</a></div>
            # } #
        </div>

    </script>

    <script id="fb-pull-to-refresh-template" type="text/x-kendo-template">
        # rssURL.push(link); #
        # rssURLIndex = rssURL.length - 1; #
        # /* content = content.replace("\/l.php\?u=", ""); */ #
        # /* content = content.replace("\%3A\%2F\%2F", "\:\/\/");  */ #
        # /* content = content.replace("\%2F", "\/"); */ #
        # /* content = urldecode(content); */ #
        # /* logit(content, 'index.html'); */ #
        
    
        <div class="tweet">
        <div class="list-titlefb" style="width: 100%;"><a onclick="showRSSViewTitle('Details')" data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">#= title #</a></div>
        <div class="sublink2fb" style="width: 100%;"><a onclick="showRSSViewTitle('Details')" data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">#= content #</a></div>
        # if (app.os != 'android') { #
            <div class = "sublink2fb" style="width: 100%; border-style: none none solid; border-width:thin; border-color:grey;"><a onclick="showRSSViewTitle('Details')" data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">#= publishedDate #</a></div>    
        # } else { #
            <div class = "sublink2fb" style="width: 100%;"><a onclick="showRSSViewTitle('Details')" data-role="listview-link" class="details-link" href="\#rssdetails?id=#= rssURLIndex #">#= publishedDate #</a></div> 
        # } #
        </div>

    </script>


    <script id="groupon-pull-to-refresh-template" type="text/x-kendo-template">
        <div class="tweet">
            <a href='#= dealUrl#'><img class="pullImage" src="#= grid6ImageUrl #" alt="#= redemptionLocation #" />#= title #</a>        
        </div>

    </script>

    <script id="groupondealx-pull-to-refresh-template" type="text/x-kendo-template">
        <div class="tweet">
            <a href='#= dealUrl#'><img class="pullImage" src="#= mediumImageUrl.replace #" alt="#= redemptionLocation #" />#= announcementTitle #</a>        
        </div>

    </script>

    <script id="groupondeal-pull-to-refresh-template" type="text/x-kendo-template">
        <div class="groupon">
            <p>#= grouponTitle #</p>
        </div>
        <div class="groupon">
            <img class="grouponImage" src="#= grouponImage #"/>    
        </div>
        <div class="groupon">
            <a href=#= grouponUrl #>Click here to see the full details</a>
        </div>
        <div class="groupon">
            <p>#= grouponLocationNote # </p>
        </div>
        <div class="grouponLeft">
            <p>#= grouponPitchHtml #</p>
        </div>
        <div class="grouponFinePrint">
            <p>#= grouponFinePrint #</p>
        </div>
    </script>

    <script id="livingSocialdeal-pull-to-refresh-template" type="text/x-kendo-template">
        <div class="groupon">
            <p>#= livingSocialTitle #</p>
        </div>
        <div class="groupon">
            <img class="grouponImage" src="#= livingSocialImage #"/>    
        </div>
        <div class="groupon">
            <a href=#= livingSocialUrl #>Click here to see the full details</a>
        </div>
        <div class="groupon">
            <p>#= livingSocialLocationNote # </p>
        </div>
        <div class="grouponLeft">
            <p>#= livingSocialPitchHtml #</p>
        </div>
        <div class="grouponFinePrint">
            <p>#= livingSocialFinePrint #</p>
        </div>
    </script>



    <script id="detailTemplateRSS" type="text/x-kendo-template">
        <iframe width="100%" height="100%" frameborder="0" src="#:targetURL#"/>
    </script>
    
    
    
    <script type="text/javascript"> 
        //loadSpinner();
        
        
        
    //$(document).ready(function() {
        //if (isLocalStorageNameSupported()) {
            //call initPage to load the app.  This needs to be done after
            //the kendo templates have loaded above so the app can be 
            //rendered properly.
            //initPage();
        //}
        
    //});


    if (!haveBootstrap) {
        jQuery.ajax({
           async:false,
           url:appPrefix + app_id + "/bootstrap.txt",
           dataType:'script',
           error: function(xhr, textStatus, errorThrown) {
               // Look at the textStatus and/or errorThrown properties.
           },
           success: function() {
               bootstrapData = JSON.stringify(data);
               haveBootstrap = true;
               initPage();
           }
        });        
    }
    else {
        initPage();
    }


        
    </script>
    
<!--**********STORE***********-->

    <!-- data-role layout is used by mobile views by setting data-layout=data-id -->
    <div data-role="layout" data-id="storeLayout">
        
        <header data-role="header">
            <div id="storenavbar" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>
        
        <footer data-role="footer" data-id="default1">
            <div data-role="tabstrip" id="storenav" data-select="onSelect"> 
                <a id='categorylink' href="#category" data-icon="menu_icon">Products</a>
                <a id='cartlink' href="#cart" data-icon="cart_icon">Cart</a>
                <a id='accountlink' href="#account" data-icon="settings_icon">Account</a>
                <a href="#HomeTab" data-icon="home_icon">Home</a>
            </div>
            <div data-role="tabstrip" id="storenav2" data-select="onSelect" style="display:none;">  
                <a id='categorylink2' href="#category" data-icon="menu_icon">Products</a>
                <a href="#HomeTab" data-icon="home_icon">Home</a>
            </div>
            <div data-role="tabstrip" id="storenav3" data-select="onSelect" style="display:none;"> 
                <a id='categorylink3' href="#category" data-icon="menu_icon">Products</a>
                <a id='cartlink3' href="#cart" data-icon="cart_icon">Cart</a>
                <a id='accountlink3' href="#account" data-icon="settings_icon">Account</a>
            </div>
            <div id="poweredby_store1" class="poweredByNone"><a href="http://top5mobile.com"><img style="max-width: 90%; max-height: 90%;" src="images/top5mobilelogowide_small.png" /></a></div>
        </footer>   
       
    </div>

    <div data-role="layout" data-id="receiptLayout">
        
        <header data-role="header">
            <div id="receiptnavbar" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>
        
        <!--<footer data-role="footer" data-id="receiptFooter">
            <div data-role="tabstrip" id="storenav" data-select="onSelect"> 
                <a id='receiptcategorylink' href="#category" data-icon="menu_icon">Continue</a>
                <a href="#HomeTab" data-icon="home_icon">Home</a>
            </div>
            <div id="poweredby_store1" class="poweredByNone"><a href="http://top5mobile.com"><img style="max-width: 90%; max-height: 90%;" src="images/top5mobilelogowide_small.png" /></a></div>
        </footer>-->   
       
    </div>


    <div data-role="view" id="receipt" data-layout="receiptLayout">
        <header data-role="header">
            <div id="receiptnavbar" data-role="navbar">
                <span data-role="view-title">Receipt</span>
            </div>
        </header>
        <div id="receiptContent" style="padding: 10px;"></div>
        <footer data-role="footer" data-id="receiptFooter">
            <div data-role="tabstrip" id="storenav_receipt" data-select="onSelect"> 
                <a id='receiptcategorylink' href="#category" data-icon="menu_icon">Continue</a>
                <a href="#HomeTab" data-icon="home_icon">Home</a>
            </div>
            <div id="poweredby_store1" class="poweredByNone"><a href="http://top5mobile.com"><img style="max-width: 90%; max-height: 90%;" src="images/top5mobilelogowide_small.png" /></a></div>
        </footer>   
    </div>


     <div data-role="view" id="category" data-layout="storeLayout" data-show="showCategoryView" data-init="initCategoryView">
        <header data-role="header">
            <div id="categorynavbar" data-role="navbar">
                <span data-role="view-title"></span>
                <a data-role="button" id="cartNavButton3" data-align="right" href="#cart">Cart</a>
            </div>
        </header>
        <div class="search-container">
            <input type="text" class="search-text" id="searchText" placeholder="Search" />
            <a class="search-button" data-role="button" data-icon="search" data-click="submitSearch"></a>
            <a class="search-button" data-role="button" data-icon="deletex" data-click="clearSearch"></a>
        </div>            
        
        <ul
            id="categoryList"
            class="item-list"
            data-role="listview"
            data-template="categoryTemplate"
            data-source="dsCategories"
            style="display:none;"
        ></ul>
        <ul
            id="menuListCategory"
            class="item-list"
            data-role="listview"
            data-template="menuTemplate"
            data-source="ds"
            style="display:none;"
            data-header-template="menuHeader"
        ></ul>

    </div>

    <script type="text/x-kendo-template" id="menuHeader">
        #: data.items[0].category #
    </script>

    <script type="text/x-kendo-template" id="menuNoItems">
        #: data #
    </script>


    <div data-role="view" id="menu" data-layout="storeLayout" data-show="showMenuView" data-after-show="afterShowMenuView">
        <header data-role="header">
            <div id="menunavbar" data-role="navbar">
                <span data-role="view-title"></span>
                    <a data-role="backbutton" id="categoryBackButtoniOS7" data-align="left" >Back</a>
                    <!-- <a data-role="button" id="categoryBackButton" data-align="left" data-click="gotoCategory">Back</a> -->
                <a data-role="button" id="cartNavButton" data-align="right" href="#cart">Cart</a>
            </div>
            
        </header>
        
        <div class="search-container" id="menuSearch">
            <input type="text" class="search-text" id="searchText2" placeholder="Search" />
            <a class="search-button" data-role="button" data-icon="search" data-click="submitSearch"></a>
            <a class="search-button" data-role="button" data-icon="deletex" data-click="clearSearch"></a>
        </div>            
        
        <ul
            id="menuList"
            class="item-list"
            data-role="listview"
            data-template="menuTemplate"
            data-header-template="menuHeader"
            data-source="ds"
        ></ul>
        
        <ul 
            id="noItemsFound" 
            class="item-list"
            style="display:none;" 
            data-role="listview" 
            data-source="dsNoItems" 
            data-template="menuNoItems">
        </ul>
        
    </div>
 

 
    
    <div data-role="view" id="index" data-layout="storeLayout" data-title="Featured Items" data-url="/" data-show="showIndexView">
        <ul
            id="featured"
            class="item-list"
            data-role="listview"
            data-template="menuTemplate"
            data-source="featured"
        ></ul>
        
    </div>
    
<!-- Page 1 Cart View -->    
    
    <div data-role="view" id="cart" data-layout="storeLayout" data-show="showCartView">
        <header data-role="header">
            <div id="cartnavbar" data-role="navbar">
                <span data-role="view-title"></span>
                <a data-role="button" id="clearCartButton" data-align="left" data-click="clearCart">Clear Cart</a>
                <!--<a data-role="button" id="checkoutButton" data-align="right" data-click="shippingDetails">Checkout</a>-->
                <!-- <a data-role="button" id="checkoutButton" data-align="right" data-init="initShippingDetails" href="#shippingDetails">Checkout</a> -->
                <!-- <a data-role="button" id="checkoutButton" data-align="right" data-click="initShippingDetails">Checkout</a> -->
                <a data-role="button" id="checkoutButton" data-align="right" href="#shippingDetails">Checkout</a>
            </div>
        </header>
                
        <ul id="cartList" class="item-list"
            data-template="cartItemTemplate"
            data-source="cartDataSource2"
            data-role="listview"
            data-style="inset"
        ></ul>
        
        <div id="cartSummary">
        <ul data-role="listview" data-style="inset">
            <li>
                <span id="total2"></span>
            </li>
        </ul>
        </div>
    </div>

<!-- Page 2 Shipping View -->    
<style scoped>
    #shippingDetails input:not([type=checkbox]):not([type=radio]),
    #shippingDetails select,
    #shippingDetails .k-dropdown
    {
        -webkit-box-sizing: border-box; 
        box-sizing: border-box; 
        width: 50%; 
    }
</style>

    <div data-role="view" id="shippingDetails" data-use-native-scrolling="true" data-init="initShippingForm" 
                        data-layout="storeLayout" data-show="showShippingDetails">
        <header data-role="header">
            <div id="shippingnavbar" data-role="navbar">
                <span data-role="view-title"></span>
                <!-- <a data-role="button" id="shippingBackButton" data-align="left" data-click="gotoCart">Back</a> -->
                <a data-role="button" id="shippingBackButton" data-align="left" href="#cart">Back</a>
                <!-- <a data-role="button" id="shippingBackButton" data-align="left" data-click="gotoCart">Back</a> -->
                <!-- <a data-role="button" id="shippingNextButton" data-align="right" data-click="billingDetails">Next</a> -->
                
                <!--iOS7-->
                <a data-role="button" id="shippingNextButton" data-align="right" href="#billingDetails">Next</a>
                
                
                <!--<a data-role="button" id="shippingNextButton" data-align="right" data-click="showBillingDetails">Next</a>-->
                
            </div>
        </header>
        <form action="index.html">
        <ul data-role="listview" data-type="group" data-style="inset">
            <!--<li>
                Shipping Options
                <ul>
                    <li>
                        <select id="shippingMethod">
                        </select>
                        <span id='lblShippingMethod'>Shipping Method</span>
                    </li>               
                </ul>
            </li>-->
             <li>
                Shipping/Delivery Address
                <ul>
                    <li>
                        <input type="email" id="txtShippingEmail2" value="" />
                        <span id='lblShippingEmail2' onClick="$('#txtShippingEmail2').focus();">Email</span>
                    </li>
                    <li>
                        <input type="tel" id="txtShippingPhone2" value="" />
                        <span id='lblShippingPhone2' onClick="$('#txtShippingPhone2').focus();">Phone</span>
                    </li>
                    
                    <li>
                        <input type="text" id="txtShippingFirstName2" value="" />
                        <span id='lblShippingFirstName2' onClick="$('#txtShippingFirstName2').focus();">First Name</span>
                    </li>
                    <li>
                        <input type="text" id="txtShippingLastName2" value="" />
                        <span id='lblShippingLastName2' onClick="$('#txtShippingLastName2').focus();">Last Name</span>
                    </li>
                    <li>
                        <input type="text" id="txtShippingAddress2" value="" />
                        <span id='lblShippingAddress2' onClick="$('#txtShippingAddress2').focus();">Street</span>
                    </li>

                    <li>
                        <input type="text" id="txtShippingCity2" value="" />
                        <span id='lblShippingCity2' onClick="$('#txtShippingCity2').focus();">City</span>
                    </li>
                    
                    <li id="dropdown1">
                    <select id="txtShippingState2">
                        <option value="">  </option>
                        <option value="AL">AL</option>
                        <option value="AK">AK</option>
                        <option value="AZ">AZ</option>
                        <option value="AR">AR</option>    
                        <option value="CA">CA</option>    
                        <option value="CO">CO</option>    
                        <option value="CT">CT</option>    
                        <option value="DE">DE</option>    
                        <option value="DC">DC</option>    
                        <option value="FL">FL</option>    
                        <option value="GA">GE</option>    
                        <option value="HI">HI</option>    
                        <option value="ID">ID</option>    
                        <option value="IL">IL</option>    
                        <option value="IN">IN</option>    
                        <option value="IA">IA</option>    
                        <option value="KS">KS</option>    
                        <option value="KY">KY</option>    
                        <option value="LA">LA</option>    
                        <option value="ME">ME</option>
                        <option value="MD">MD</option>
                        <option value="MA">MA</option>
                        <option value="MI">MI</option>
                        <option value="MN">MN</option>
                        <option value="MS">MS</option>
                        <option value="MO">MO</option>
                        <option value="MT">MT</option>
                        <option value="NE">NE</option>    
                        <option value="NV">NV</option>    
                        <option value="NH">NH</option>    
                        <option value="NJ">NJ</option>    
                        <option value="NM">NM</option>
                        <option value="NY">NY</option>    
                        <option value="NC">NC</option>
                        <option value="ND">ND</option>
                        <option value="OH">OH</option>    
                        <option value="OK">OK</option>
                        <option value="OR">OR</option>
                        <option value="PA">PA</option>
                        <option value="RI">RI</option>
                        <option value="SC">SC</option>
                        <option value="SD">SD</option>
                        <option value="TN">TN</option>
                        <option value="TX">TX</option>
                        <option value="UT">UT</option>
                        <option value="VT">VT</option>    
                        <option value="VA">VA</option>
                        <option value="WA">WA</option>    
                        <option value="WV">WV</option>    
                        <option value="WI">WI</option>
                        <option value="WY">WY</option>
                    </select>                    
                    <span id='lblShippingState2' onClick="$('#txtShippingState2').focus();">State</span>
                    </li>
                    <li>
                        <input type="text" id = "txtShippingZip2" value="" />
                        <span id='lblShippingZip2' onClick="$('#txtShippingZip2').focus();">Zip</span>
                    </li>
                    
                </ul>
            </li>            
                
        </ul>
        </form>
    </div>


<style scoped>
    #billingDetails input:not([type=checkbox]):not([type=radio]),
    #billingDetails select,
    #billingDetails .k-dropdown
    {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 50%;
    }
    
</style>



<!-- Page 2a Billing View -->
    <!-- iOS7 -->
    <!-- <div data-role="view" id="billingDetails" data-use-native-scrolling="true" data-init="initBillingDetailsForm" data-layout="storeLayout" data-before-show="showBillingDetails"> -->


    <div data-role="view" id="billingDetails" data-use-native-scrolling="true" data-init="initBillingDetailsForm" 
            data-layout="storeLayout" data-show="showBillingDetails" data-before-show="checkShippingDetails">
        <header data-role="header">
            <div id="billingnavbar" data-role="navbar">
                <span data-role="view-title"></span>
                <a data-role="button" id="billingBackButton" data-align="left" href="#shippingDetails">Back</a>
                <!-- <a data-role="button" id="billingBackButton" data-align="left" data-click="gotoShippingDetails">Back</a> -->
                <!-- <a data-role="backbutton" id="billingBackButtoniOS7" data-align="left" href="#shippingDetails">Back</a> -->
                <!-- <a data-role="button" id="billingNextButton" data-align="right" data-click="paymentDetails">Next</a> -->
                <!-- <a data-role="button" id="billingNextButton" data-align="right" data-click="initPaymentDetails">Next</a> -->
                
                <!-- iOS7 -->
                <a data-role="button" id="billingNextButton" data-align="right" href="#paymentDetails">Next</a>
            </div>
        </header>
         <form action="index.html">

        <!--
        <ul id="tipEntry" data-role="listview" data-type="group" data-style="inset">
            <li> 
                Tip
                <ul>
                    <li>
                        <input type="number" id="txtTip2" value="" step="0.01" />
                        <span id="lblTip2" onClick="$('#txtTip2').focus();">Tip Amount</span>
                    </li>
                </ul>
            </li>
        </ul>
        -->             
        <ul data-role="listview" data-type="group" data-style="inset">
            <li>
                Shipping Options
                <ul>
                    <li>
                        <select id="shippingMethod">
                        </select>
                        <span id='lblShippingMethod'>Shipping</span>
                    </li>               
                </ul>
            </li>
            
              <li>
                Billing Address
                <ul>
                    <li>Same As Shipping <input id="chkSameAsShipping" type="checkbox"></li>
                     <li>
                        <input type="email" id="txtBillingEmail2" value="" />
                        <span id="lblBillingEmail2" onClick="$('#txtBillingEmail2').focus();">Email</span>
                        
                    </li>
                    
                    <li>
                        <input type="tel" id="txtBillingPhone2" value="" />
                        <span id="lblBillingPhone2" onClick="$('txtBillingPhone2').focus();">Phone</span>
                    
                    <li>
                    
                    <li>
                        <input type="text" id="txtBillingFirstName2" value="" />
                        <span id="lblBillingFirstName2" onClick="$('#txtBillingFirstName2').focus();">First Name</span>
                    </li>
                    <li>
                        <input type="text" id="txtBillingLastName2" value="" />
                        <span id="lblBillingLastName2" onClick="$('#txtBillingLastName2').focus();">Last Name</span>
                    </li>
                    <li>
                        <input type="text" id="txtBillingAddress2" value="" />
                        <span id="lblBillingStreet2" onClick="$('#txtBillingAddress2').focus();">Street</span>
                    </li>

                    <li>
                        <input type="text" id="txtBillingCity2" value="" />
                        <span id="lblBillingCity2" onClick="$('#txtBillingCity2').focus();">City</span>
                    </li>
                    
                    <li id="dropdown1">
                    <select id="txtBillingState2">
                        <option value="">  </option>
                        <option value="AL">AL</option>
                        <option value="AK">AK</option>
                        <option value="AZ">AZ</option>
                        <option value="AR">AR</option>    
                        <option value="CA">CA</option>    
                        <option value="CO">CO</option>    
                        <option value="CT">CT</option>    
                        <option value="DE">DE</option>    
                        <option value="DC">DC</option>    
                        <option value="FL">FL</option>    
                        <option value="GA">GE</option>    
                        <option value="HI">HI</option>    
                        <option value="ID">ID</option>    
                        <option value="IL">IL</option>    
                        <option value="IN">IN</option>    
                        <option value="IA">IA</option>    
                        <option value="KS">KS</option>    
                        <option value="KY">KY</option>    
                        <option value="LA">LA</option>    
                        <option value="ME">ME</option>
                        <option value="MD">MD</option>
                        <option value="MA">MA</option>
                        <option value="MI">MI</option>
                        <option value="MN">MN</option>
                        <option value="MS">MS</option>
                        <option value="MO">MO</option>
                        <option value="MT">MT</option>
                        <option value="NE">NE</option>    
                        <option value="NV">NV</option>    
                        <option value="NH">NH</option>    
                        <option value="NJ">NJ</option>    
                        <option value="NM">NM</option>
                        <option value="NY">NY</option>    
                        <option value="NC">NC</option>
                        <option value="ND">ND</option>
                        <option value="OH">OH</option>    
                        <option value="OK">OK</option>
                        <option value="OR">OR</option>
                        <option value="PA">PA</option>
                        <option value="RI">RI</option>
                        <option value="SC">SC</option>
                        <option value="SD">SD</option>
                        <option value="TN">TN</option>
                        <option value="TX">TX</option>
                        <option value="UT">UT</option>
                        <option value="VT">VT</option>    
                        <option value="VA">VA</option>
                        <option value="WA">WA</option>    
                        <option value="WV">WV</option>    
                        <option value="WI">WI</option>
                        <option value="WY">WY</option>
                    </select>                    
                    <span id="lblBillingState2" onClick="$('#txtBillingState2').focus();">State</span>
                    </li>
                    <li>
                        <input type="text" id = "txtBillingZip2" value="" />
                        <span id="lblBillingZip2" onClick="$('#txtBillingZip2').focus();">Zip</span>
                    </li>
                    
                </ul>
            </li>            
                
        </ul>
        </form>
    </div>


    
<!-- Page 3 Payments View -->    
    
    <!-- <div data-role="view" id="paymentDetails" data-layout="storeLayout" data-before-show="showPaymentDetails">-->
    <div data-role="view" id="paymentDetails" data-layout="storeLayout" data-show="showPaymentDetails"
               data-before-show="checkBillingDetails">
        <header data-role="header">
            <div id="paymentnavbar" data-role="navbar">
                <span data-role="view-title"></span>
                <!-- <a data-role="button" id="paymentBackButton" data-align="left" data-click="billingDetails">Back</a>-->
                <!-- <a data-role="button" id="paymentBackButton" data-align="left" data-click="billingDetails">Back</a> -->
                <a data-role="button" id="paymentBackButton" data-align="left" href="#billingDetails">Back</a>
                <a data-role="button" id="paymentNextButton" data-align="right" data-click="checkout">Finish</a>
            </div>
        </header>
                
        <div id="checkoutOptions">
            <ul data-role="listview" data-style="inset">
                <li>
                    <div id="subTotal" style="margin-left: 2rem; margin-bottom: 5px;">Sub Total: x.xx</div>
                </li>
                <li>
                    <div id="discount" style="margin-left: 2rem; margin-bottom: 5px;">Discount: x.xx</div>
                </li>
                <li>
                    <div id="tax" style="margin-left: 2rem; margin-bottom: 5px;">Tax: x.xx</div>
                </li>
                <li>
                    <div id="shipping" style="margin-left: 2rem; margin-bottom: 5px;"></div>
                </li>
                <!--
                <li id="tip_li">
                    <div id="tip" style="margin-left: 2rem; margin-bottom: 5px;"></div>
                </li>
                -->
                <li>
                    <div id="total3" style="margin-left: 2rem; margin-bottom: 5px;"></div>
                </li>
            </ul>
            
            <div style="margin-left: 2rem; margin-bottom: 5px;">Choose a Payment Option</div>
            <div style="margin-bottom: 5px; min-height: 144px;">
            <div onclick='togglePaymentClass("paymentRadio_paypal")' style="margin-left: 2rem; margin-bottom: 5px; padding-bottom: 5px; display: none;" id="paymentOptionPayPal">
                <div id='paymentRadio_paypal' class='radio-off2' style="margin-left: 2rem; margin-right: 7px; float: left;"></div>
                <img src="https://www.paypal.com/en_US/i/logo/PayPal_mark_37x23.gif" align="left" style="margin-right:7px; float:none;">
                <span id='paypal_prod' style="font-size:11px; font-family: Arial, Verdana;">The safer, easier way to pay.</span>
                <span id='paypal_test' style="display: none; font-size:11px; font-family: Arial, Verdana;">The safer, easier way to pay. (Test)</span>
            </div>
            <div onclick='togglePaymentClass("paymentRadio_ocmp")' style="margin-left: 2rem; margin-bottom: 5px; display: none;" id="paymentOptionOCMP">
                <div id='paymentRadio_ocmp' class='radio-off2' style="margin-left: 2rem; margin-right: 7px; float: left;"></div>
                <img src="images/OCMP_Button2.jpg" align="left" style="margin-right:7px; float:none;">
                <span style="font-size:11px; font-family: Arial, Verdana;">Off Campus Meal Plan</span><br>
            </div>
            <div onclick='togglePaymentClass("paymentRadio_cc")' style="margin-left: 2rem; margin-bottom: 5px; display: none;" id="paymentOptionCC">
                <div id='paymentRadio_cc' class='radio-off2' style="margin-left: 2rem; margin-right: 7px; float: left;"></div>
                <img src="images/credit_card_logos_31.png" align="left" style="margin-right:7px; float:none;">
                <span id='cc_test' style="font-size:11px; font-family: Arial, Verdana;">(Test)</span><br>
            </div>
            <div onclick='togglePaymentClass("paymentRadio_cash")' style="margin-left: 2rem; margin-top: 5px; display: none;" id="paymentOptionCash">
                <div id='paymentRadio_cash' class='radio-off2' style="margin-left: 2rem; margin-right: 7px; float: left;"></div>
                <div style="margin-top: 10px; font-size:18px; font-family: Arial, Verdana;">Cash</div><br>
            </div>
            </div>
        </div>
    
    </div>
<!-- Page 4 Order Summary View -->    

    <div data-role="view" id="orderSummary" data-show="showOrderSummary">
        <header data-role="header">
            <div id="summarynavbar" data-role="navbar">
                <span data-role="view-title"></span>
                <a data-role="button" id="summaryBackButton" data-align="left" data-click="paymentDetails">Back</a>
                <a data-role="button" id="summaryNextButton" data-align="right" data-click="paymentDetails">Complete</a>
            </div>
        </header>
    </div>

    
    <div data-role="view" id="redirectPayPal" data-transition="zoom">
        <header data-role="header"> <div id="paypalredirectnavbar" data-role="navbar"> <span data-role="view-title">Payment</span> </div>
        </header>
        <div data-role="content" class="km-insetcontent">
            <h2>Redirecting To Payment Page...</h2>
        </div>
    </div>
    
    <div data-role="view" id="account" data-init="initAccountDetailsForm" data-layout="storeLayout" data-show="showAccountView">
        <header data-role="header">
            <div id="accountnavbar" data-role="navbar">
                <span data-role="view-title"></span>
                <a data-role="button" id="saveAccountButton" data-align="right" data-click="saveAccount">Save</a>
            </div>
        </header>
    
        <ul data-role="listview" data-type="group">
            <li>
                Billing Information
                <ul>
                    <li>
                        <input type="email" id="txtBillingEmail" value="" />
                        <span id="lblBillingEmail" onClick="$('#txtBillingEmail').focus();">Email</span>
                        
                    </li>
                    
                    <li>
                        <input type="tel" id="txtBillingPhone" value="" />
                        <span id="lblBillingPhone" onClick="$('txtBillingPhone').focus();">Phone</span>
                    
                    <li>
                        <input type="text" id="txtBillingFirstName" value="" />
                        <span onClick="$('#txtBillingFirstName').focus();">First Name</span>
                    </li>
                    <li>
                        <input type="text" id="txtBillingLastName" value="" />
                        <span onClick="$('#txtBillingLastName').focus();">Last Name</span>
                    </li>
                    <li>
                        <input type="text" id="txtBillingAddress" value="" />
                        <span onClick="$('#txtBillingAddress').focus();">Street</span>
                    </li>

                    <li>
                        <input type="text" id="txtBillingCity" value="" />
                        <span onClick="$('#txtBillingCity').focus();">City</span>
                    </li>
                    
                    <li id="dropdown2">
                    <select id="txtBillingState">
                        <option value="">  </option>
                        <option value="AL">AL</option>
                        <option value="AK">AK</option>
                        <option value="AZ">AZ</option>
                        <option value="AR">AR</option>    
                        <option value="CA">CA</option>    
                        <option value="CO">CO</option>    
                        <option value="CT">CT</option>    
                        <option value="DE">DE</option>    
                        <option value="DC">DC</option>    
                        <option value="FL">FL</option>    
                        <option value="GA">GE</option>    
                        <option value="HI">HI</option>    
                        <option value="ID">ID</option>    
                        <option value="IL">IL</option>    
                        <option value="IN">IN</option>    
                        <option value="IA">IA</option>    
                        <option value="KS">KS</option>    
                        <option value="KY">KY</option>    
                        <option value="LA">LA</option>    
                        <option value="ME">ME</option>
                        <option value="MD">MD</option>
                        <option value="MA">MA</option>
                        <option value="MI">MI</option>
                        <option value="MN">MN</option>
                        <option value="MS">MS</option>
                        <option value="MO">MO</option>
                        <option value="MT">MT</option>
                        <option value="NE">NE</option>    
                        <option value="NV">NV</option>    
                        <option value="NH">NH</option>    
                        <option value="NJ">NJ</option>    
                        <option value="NM">NM</option>
                        <option value="NY">NY</option>    
                        <option value="NC">NC</option>
                        <option value="ND">ND</option>
                        <option value="OH">OH</option>    
                        <option value="OK">OK</option>
                        <option value="OR">OR</option>
                        <option value="PA">PA</option>
                        <option value="RI">RI</option>
                        <option value="SC">SC</option>
                        <option value="SD">SD</option>
                        <option value="TN">TN</option>
                        <option value="TX">TX</option>
                        <option value="UT">UT</option>
                        <option value="VT">VT</option>    
                        <option value="VA">VA</option>
                        <option value="WA">WA</option>    
                        <option value="WV">WV</option>    
                        <option value="WI">WI</option>
                        <option value="WY">WY</option>
                    </select>                    
                    <span onClick="$('#txtBillingState').focus();">State</span>
                    </li>
                    <li>
                        <input type="text" id = "txtBillingZip" value="" />
                        <span onClick="$('#txtBillingZip').focus();">Zip</span>
                    </li>
                    
                </ul>
            </li>
            
            
            <li>
                Shipping/Delivery
                <ul>
                    <li>
                        <input type="email" id="txtShippingEmail" value="" />
                        <span onClick="$('#txtShippingEmail').focus();">Email</span>
                    </li>
                    
                    <li>
                        <input type="tel" id="txtShippingPhone" value="" />
                        <span onClick="$('#txtShippingPhone').focus();">Phone</span>
                    </li>

                    <li>
                        <input type="text" id="txtShippingFirstName" value="" />
                        <span onClick="$('#txtShippingFirstName').focus();">First Name</span>
                    </li>
                    <li>
                        <input type="text" id="txtShippingLastName" value="" />
                        <span onClick="$('#txtShippingLastName').focus();">Last Name</span>
                    </li>
                    <li>
                        <input type="text" id="txtShippingAddress" value="" />
                        <span onClick="$('#txtShippingAddress').focus();">Street</span>
                    </li>

                    <li>
                        <input type="text" id="txtShippingCity" value="" />
                        <span onClick="$('#txtShippingCity').focus();">City</span>
                    </li>
                    
                    <li id="dropdown3">
                    <select id="txtShippingState">
                        <option value="">  </option>
                        <option value="AL">AL</option>
                        <option value="AK">AK</option>
                        <option value="AZ">AZ</option>
                        <option value="AR">AR</option>    
                        <option value="CA">CA</option>    
                        <option value="CO">CO</option>    
                        <option value="CT">CT</option>    
                        <option value="DE">DE</option>    
                        <option value="DC">DC</option>    
                        <option value="FL">FL</option>    
                        <option value="GA">GE</option>    
                        <option value="HI">HI</option>    
                        <option value="ID">ID</option>    
                        <option value="IL">IL</option>    
                        <option value="IN">IN</option>    
                        <option value="IA">IA</option>    
                        <option value="KS">KS</option>    
                        <option value="KY">KY</option>    
                        <option value="LA">LA</option>    
                        <option value="ME">ME</option>
                        <option value="MD">MD</option>
                        <option value="MA">MA</option>
                        <option value="MI">MI</option>
                        <option value="MN">MN</option>
                        <option value="MS">MS</option>
                        <option value="MO">MO</option>
                        <option value="MT">MT</option>
                        <option value="NE">NE</option>    
                        <option value="NV">NV</option>    
                        <option value="NH">NH</option>    
                        <option value="NJ">NJ</option>    
                        <option value="NM">NM</option>
                        <option value="NY">NY</option>    
                        <option value="NC">NC</option>
                        <option value="ND">ND</option>
                        <option value="OH">OH</option>    
                        <option value="OK">OK</option>
                        <option value="OR">OR</option>
                        <option value="PA">PA</option>
                        <option value="RI">RI</option>
                        <option value="SC">SC</option>
                        <option value="SD">SD</option>
                        <option value="TN">TN</option>
                        <option value="TX">TX</option>
                        <option value="UT">UT</option>
                        <option value="VT">VT</option>    
                        <option value="VA">VA</option>
                        <option value="WA">WA</option>    
                        <option value="WV">WV</option>    
                        <option value="WI">WI</option>
                        <option value="WY">WY</option>
                    </select>                    
                    <span onClick="$('#txtShippingState').focus();">State</span>
                    </li>
                    <li>
                        <input type="text" id = "txtShippingZip" value="" />
                        <span onClick="$('#txtShippingZip').focus();">Zip</span>
                    </li>
                    
                </ul>
            </li>  
            
<!--             <li> -->
<!--                Order History -->
<!--             </li>           -->
            
        </ul>
    </div>

    <div data-role="view" id="donex" data-transition="zoom">
        <header data-role="header"> <div id="donenavbarx" data-role="navbar"> <span data-role="view-title">Done!</span> </div>
        </header>
        <div data-role="content" class="km-insetcontent">
            <div id='donemessagex'></div>
            <div id='doneordernumberx'></div>
            <a id="done-button" href="#category" data-role="button" style="width: 100px; margin-left:auto; margin-right:auto;">Continue</a>
        </div>
    </div>

    <div data-role="view" id="details" data-layout="storeLayout" data-show="showDetailsView">
        <header data-role="header">
            <div id="detailsnavbar" data-role="navbar">
                <span data-role="view-title"></span>
                <!-- <a class="back-button" style="display:none;" id="detailsBackButton" data-align="left" href="#menu" data-role="button">Back</a> -->
                <!-- <a data-role="button" data-align="left" href="#menu">Back</a> -->
                
                    <a data-role="button" data-align="left" href="#:back">Back</a>
                
                <!--  <a class="back-button" style="display:none;" id="cartBackButton" data-align="left" href="#cart" data-role="button">Back</a> -->
                <a data-role="button" id="cartNavButton2" data-align="right" href="#cart">Cart</a>
            </div>
        </header>
        
        <div data-role="content">
        </div>
    </div>

    <script id="menuTemplateOriginal" type="text/x-kendo-template">
        <a
            class="details-link"
            data-role="listview-link"
            href="\#details?id=#:id#">
            <img src="#:appPrefix##:app_id#/catalog/#:image#" onError="this.src='#:currentURL#images/NoImage.png';" />
            <h2>#:name# - #:kendo.toString(price, "c")#</h2>
        </a>        
    </script>
    

    <script id="menuTemplate2" type="text/x-kendo-template">
        <a
            class="details-link"
            data-role="listview-link"
            href="\#details?id=#:id#">
            <img src="#:appPrefix##:app_id#/catalog/#:image#" onError="this.src='#:currentURL#images/NoImage.png';" />
            <div style="width:90%; vertical-align:middle; height:100%;">#:name# - #:kendo.toString(price, "c")#</div>
        </a>        
    </script>

    <script id="menuTemplateRemoveImage" type="text/x-kendo-template">
        <a
            class="details-link"
            data-role="listview-link"
            href="\#details?id=#:id#">
            <img src="#:appPrefix##:app_id#/catalog/#:image#" onError="this.parentNode.removeChild(this);" />
            # if (price != 0) {# 
                <div style="width:90%; vertical-align:middle;">#:name# #:kendo.toString(price, "c")#</div>
            # }else{ #
                <div style="width:90%; vertical-align:middle;">#:name#</div>
            # } #
        </a>        
    </script>

    <!-- Added && false to prevent price from being displayed in catalog list.  Need to remove from template -->
    <script id="menuTemplate" type="text/x-kendo-template">
        <a
            class="details-link"
            data-role="listview-link"
            href="\#details?id=#:id#">
            

            # if (image!='') {#
                <img style="display:inline !important;" src="#:appPrefix##:app_id#/catalog/#:image#" onError="this.src='#:currentURL#images/NoImage.png';" />
            # }else{ #
                <img class='item-listnone' style="display:inline !important; width: 1px !important;" src="#:currentURL#images/placeholder.png" />
            #}#
            # if (price != 0 && false) {# 
                <div><div style="width:60%; position: absolute !important; top: 40% !important; display: inline !important; vertical-align:middle; margin-top: auto !important; margin-bottom: auto !important;">#:name# #:kendo.toString(price, "c")#</div></div>
            # }else{ #
                <div style="height: 80%; width: 60%; position: absolute !important; display: inline !important; vertical-align: middle !important;"><table style="height: 100%;" cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle">#:name#</td></tr></table></div>
            # } #
        </a>        
    </script>



    <script id="categoryTemplate" type="text/x-kendo-template">
        <a
            class="details-link"
            data-role="listview-link"
            href="\#menu?filter=#:uid#">
            
            <div style="padding-top:5px; padding-bottom:5px;">#:category_name#<br></div>
        </a>
    </script>


    
    <!-- Most of the vertical-align and height styles appear to have no affect. -->
    <script id="menuTemplateNew" type="text/x-kendo-template">
        <div class="tweet" style="vertical-align:middle;height:100%;display:inline;">
        <a class="details-link"  style="display:inline; vertical-align:middle; height:100%;" data-role="listview-link" href="\#details?id=#:id#">
            <img style="vertical-align: middle;display:inline;height:100%;" class="pullImage" src="#:appPrefix##:app_id#/catalog/#:image#" onError="this.src='#:currentURL#images/NoImage.png';" />
        </a>        
        <div class="list-title" style="vertical-align: middle;height:100%;"><a data-role="listview-link" class="details-link" style="vertical-align: middle;height:100%;" href="\#details?id=#:id#">#:name# - #:kendo.toString(price, "c")#</a></div>
        </div>
    </script>

    <!-- SDH This should be handled in JS now...need to test -->
    <script id="cartItemTemplate" type="text/x-kendo-template">

        <a
            class="red-button km-button"
            data-click="removeItemFromList"
            data-item-id="#:cartID#"
            data-role="button"
            >&nbsp;&\\#x2716;&nbsp;</a>
        <a
            class="details-link"
            data-role="listview-link"
            href="\#details?id=#:productID#&cartID=#:cartID#">
            

            # if (image!='') {#
                <img style="display:inline !important;" src="#:appPrefix##:app_id#/catalog/#:image#" onError="this.src='#:currentURL#images/NoImage.png';" />
            # }else{ #
                <img class='item-listnone' style="display:inline !important;" src='#:currentURL#images/placeholder.png' />
            #}#


            <h2>#:name#</h2>
            <span class="price">#:kendo.toString(price, "c")#</span>
            <span class="options">#:typeof options != 'undefined' ? options : ''#</span>

        </a>
    </script>
    
    
    <script id="cartItemTemplatey" type="text/x-kendo-template">

        <a
            class="red-button"
            data-click="removeItemFromList"
            data-item-id="#:cartID#"
            data-role="button"
            >&nbsp;&\\#x2716;&nbsp;</a>
        <a
            class="details-link"
            data-role="listview-link"
            href="\#details?id=#:productID#&cartID=#:cartID#">

            <img src="#:appPrefix##:app_id#/catalog/#:image#"  onError="this.src='#:currentURL#images/NoImage.png';"/>

            <h2>#:name#</h2>
            <span class="price">#:kendo.toString(price, "c")#</span>
            <span class="options">#:typeof options != 'undefined' ? options : ''#</span>

        </a>
    </script>
    
    
    <script id="cartItemTemplatex" type="text/x-kendo-template">

        <a
            class="red-button"
            data-click="removeItemFromList"
            data-item-id="#:cartID#"
            data-role="button"
            >&nbsp;&\\#x2716;&nbsp;</a>
        <a
            class="details-link"
            data-role="listview-link"
            href="\#details?id=#:productID#&cartID=#:cartID#">
            <img src="#:appPrefix##:app_id#/catalog/#:image#"  onError="this.src='#:currentURL#images/NoImage.png';"/>
            <h2>#:cartID# - #:name#</h2>
            <h2>#:details#</h2>
            <span class="price">#:kendo.toString(price, "c")#</span>
        </a>
    </script>


    <script id="cartItemTemplateOriginal" type="text/x-kendo-template">

        <a
            class="red-button"
            data-click="removeItemFromList"
            data-item-id="#:cartID#"
            data-role="button"
            href="\\#">&nbsp;&\\#x2716;&nbsp;</a>
        <a
            class="details-link"
            data-role="listview-link"
            href="\#details?id=#:productID#&cartID=#:cartID#">
            <img src="#:appPrefix##:app_id#/catalog/#:image#"  onError="this.src='#:currentURL#images/NoImage.png';"/>
            <h2>#:cartID# - #:name#</h2>
            <h2>#:details#</h2>
            <span class="price">#:kendo.toString(price, "c")#</span>
        </a>
    </script>


    <script id="singleSelectPriceTemplate" type="text/x-kendo-template">
        <div onclick="changePrice('#:priceIndex#', '#:optionClassName#', '#:optionClassCategory#', '#:optionLabel.replace('"', '^0x22^').replace('\'', '^0x47^')#', '#:category#', #:optionPrice#, #:price#);return false;">
        <aside>
        <div style='float:left;'><a id='xoptionx-#:optionClassName#'>#:optionLabel# #:formatOptionCurrency(optionPrice)#</a></div>
        # if (havePrice && !excludePrice) { #                       
        <div style='float:right;' id='optionRadio-#:optionClassCategory##:optionClassName#' class='#:optionSetting#'></div>
        # } #
        </aside>
        </div>
        # if (isIOS7() || forcePlatform == "ios7") { #
        <div style="height:20px;"></div>
        # } #
    </script>


    <script id="singleSelectOptionTemplate" type="text/x-kendo-template">
        <div onclick="showOption('#:optionClassName#', '#:optionClassCategory#', '#:optionLabel.replace('"', '^0x22^').replace('\'', '^0x47^')#', '#:category#', #:optionPrice#, #:price#, #:order#, #:optionGroup#);return false;">
        <aside>
        <div style='float:left;'><a id='xoptionx-#:optionClassName#'>#:optionLabel# #:formatOptionCurrency(optionPrice)#</a></div>
        # if (havePrice && !excludePrice) { #    
        <div style='float:right;' id='optionRadio-#:optionClassCategory##:optionClassName#' class='#:optionSetting#'></div>
        # } #
        </aside>
        </div>
        # if (isIOS7() || forcePlatform == "ios7") { #
        <div style="height:20px;"></div>
        # } #
    </script>

    <script id="multiSelectOptionTemplate" type="text/x-kendo-template">
        <div onclick="toggleChecked('#:optionClassName#', '#:optionClassCategory#', '#:optionLabel.replace('"', '^0x22^').replace('\'', '^0x47^')#', '#:category#', #:optionPrice#, #:price#, #:order#, #:optionGroup#);return false;">
        <aside>
        <div style='float:left;'><a id='xoptionx-#:optionClassName#'>#:optionLabel# #:formatOptionCurrency(optionPrice)#</a></div>
        # if (havePrice && !excludePrice) { #    
        <div style='float:right;' id='optionCheck-#:optionClassCategory##:optionClassName#' class='#:optionSetting#'></div>
        # } #
        </aside>
        </div>
        # if (isIOS7() || forcePlatform == "ios7") { #
        <div style="height:20px;"></div>
        # } #
    </script>
    
    <script type="text/javascript">
        //initStore();                    
    </script>
    
    <script type="text/javascript">
    function onSelect(e){
        logit(this.currentItem().text(), "store.html"); //previous selected
        logit(e.item.text(), "store.html"); //newly selected
        newTab = e.item.text();
        return false;
    }
    </script>
    


</body>

</html>

