<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>IBM Bluefizz</title>

    <meta charset="utf-8" />

    <link rel="icon" href="//www.ibm.com/favicon.ico">
    <link rel="canonical" href="https://bluefizz.com">
    <meta name="description" content="Explore IBM Bluefizz, the next evolution of IBM Greenhouse, to discover the latest integrated email and social collaboration products available in IBM Connections Cloud.">
    <meta name="keywords" content="Bluefizz, Greenhouse, IBM Connections Cloud, collaboration tools, collaboration software, cloud email, business email, email hosting">
    <meta name="robots" content="index,follow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        
    <link href="static/styles/bluefizz.css" rel="stylesheet" />

    <!-- IBM v18 Files and Configuration-->
    
    <script>    	    	
		digitalData = {
				page:{
					category:{
						primaryCategory:'IBM_Social_CollaborationSolutions'
					},
					pageInfo:{
						effectiveDate:'2017-04-10',
						language:'en-US',
						publishDate:'2017-04-10',
						publisher:'IBM Corporation',
						version:'1.0',
						pageID:'IBM_Social_CollaborationSolutions_Bluefizz_Home',
						ibm:{
							contentDelivery:'HTML',
							contentProducer:'Bluefizz Owners',
							country:'US',
							owner:'Bluefizz Manager/Boston/Contr/IBM',
							siteID:'IBM_Social'
						}				      
					}
				}
			};			
	 </script>
	 
    <script src="//1.www.s81c.com/common/stats/ida_stats.js"></script>
    <link href="//1.www.s81c.com/common/v18/css/www.css" rel="stylesheet" />
    <script src="//1.www.s81c.com/common/v18/js/www.js"></script>
    <script src="//1.www.s81c.com/common/v18/js/masonry.js"></script>

	<script type="text/javascript">
	    IBMCore.common.util.config.set({
	        "backtotop": {
	            "enabled": true
	        },
	        "coremodules": {
	            "enabled": true
	        },
	        // A flag to disable *all* content space widgets (tooltips, overlay, etc.)
	        "contentwidgets": {
	            "enabled": true
	        },
	        "masthead": {
	            "type": "alternate",
	            "logoanimation": {
	                "enabled": false
	            },
	            "marketplaceLink": {
	                "enabled": true
	            },
	            "megamenu": {
	                "enabled": true
	            },
	            "mobilemenu": {
	                "enabled": false
	            },
	            "notifications": {
	                "enabled": true
	            },
	            "profile": {
	                "enabled": true
	            },
	            "search": {
	                "enabled": true,
	                "typeahead": {
	                    "enabled": true
	                }
	            }
	        },
	        "footer": {
	            "enabled": true,
	            "socialLinks": {
	                "enabled": true
	
	            },
	            "type": "default"
	        },
	        "scrolltracker":{
	            "enabled": false
	        }
	    });
	 </script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

	<script type="text/javascript">

        // Init to 0 so first page requested is 1 and the default
        // results per page is 10, but it can be envisioned that
        // the number of results per page could change based on
        // the type of device or browser or display resolution.

        var init_page = 0;

        sendJSON = function (async) {
            // If async is not set then make it true.
            if (async == undefined) {
               async = true;
            }

            if (!window.localStorage.getItem('page')) {
                page = init_page;
            } else {
                page = Number(window.localStorage.getItem('page'));
            }
            window.localStorage.setItem('page', page + 1);

            var JsonLocalStorage = new Object();
            var filters = JSON.parse(window.localStorage.getItem("filters"));
            filters.forEach(function(filter) {
                JsonLocalStorage[filter] = window.localStorage.getItem(filter);
            });
            JsonLocalStorage['page'] = window.localStorage.getItem('page');
            JsonLocalStorage['results_pp'] = window.localStorage.getItem('results_pp');

            //Add the results template
            JsonLocalStorage['results_template'] = "results.json";

            var resultsArray = [];
            jQuery.ajax({
            	cache: false,
            	async: async,
                url: "/srv/showme",
                type: "GET",
                dataType: 'json',
                data: JsonLocalStorage,
                contentType: "application/json; charset=utf-8",
                beforeSend: function () { debug('sending request...');
                    //notify_no_results('hide');
                    //notify_sending('show');
                    if (page == init_page) {
                        removeResults();
                    }},
                success: function (data) { debug('receiving response...');
                    debug(data.result);
                    resultsArray = json2array(data);
                    print(resultsArray);
                    if (resultsArray.length > 0) {
                        displayResults(resultsArray, true);
                    }
                    else
                    {
                        if (page == init_page) {
                            notify_no_results('show');
                        }
                        window.localStorage.setItem('page', page);
                        JsonLocalStorage['page'] = window.localStorage.getItem('page');
                    }
                 }
            });

            // Set the values from localStorage into the cookie.
            debug('writing cookie...');
            debug(JsonLocalStorage);
            jQuery.cookie("selected-values", JSON.stringify(JsonLocalStorage), { expires: 30, path: '/' });
        };

        timeJSON = function () {
            var init_results_pp = 100;
            var val = null;
            window.localStorage.setItem('page', init_page);
            window.localStorage.setItem('results_pp', init_results_pp);

            var resultsSent = false;
            var allSelected = false;
            var storageFilters = JSON.parse(window.localStorage.getItem("filters")); //i.e., {"who", "what", "how"}
            storageFilters.forEach(function(filter) {
                var filter = window.localStorage.getItem(filter);
                allSelected = (filter && (filter != "undefined") && (filter != "null")  && (filter != null)) ? true : false;
            });
            if (allSelected) {
                //All filters have a selection, show results now
                resultsSent = true;
                clearTimeout(val);
                sendJSON();
            }
            else {
                for (var i = 0; i < storageFilters.length; i++) {
                  var storageFilter =  window.localStorage.getItem(storageFilters[i]);
                  if (storageFilter && (storageFilter != "undefined") && (storageFilter != "null")  && (storageFilter != null)) {
                    //At least one filter has been selected. User may be in the process of clicking more filters. Wait a bit before showing the results.
                    resultsSent = true;
                    clearTimeout(val);
                    val = setTimeout(sendJSON, 1000);
                    return;
                  }
                }
            }

            if (!resultsSent) {
                //Nothing selected, show results now
                clearTimeout(val);
                sendJSON();
            };
        };

        function json2array(json){
          var result = [];
          var keys = Object.keys(json);
          keys.sort().reverse().forEach(function(key){
              // Skip these keys.
              if (key != "result" && key != "page" && key != "results_pp") {
                result.push(json[key]);
              }
          });
          return result;
        };

        function addSocialNode(parentNode, resultObj) {

            /*
            //Set the social share URLs
            href="https://www.facebook.com/sharer.php?u=<href>&t=<title>"
            href="https://twitter.com/intent/tweet?url=<href>&text=<title>"
            href="https://plus.google.com/share?url=<href>&t=<title>"
            href="mailto:?subject=<title>&body=<href>"
            */

            //Clone the Social template nodes
            var socialShare = jQuery(".social-template.social-share").clone().removeClass("social-template");
            jQuery(socialShare).find(".ibm-share-mono-link").attr("data-contentid", resultObj.id + "_social");
            var socialIcons = jQuery(".social-template.social-icons").clone().attr("id", resultObj.id + "_social").removeClass("social-template");
            var hostServer = location.protocol + '//' + location.host;

            jQuery(socialIcons).find(".ibm-facebook-mono-link").attr("href", 'https://www.facebook.com/sharer.php?u=' + hostServer + encodeURI(resultObj.href) + '&t=' + encodeURI(resultObj.title));
            jQuery(socialIcons).find(".ibm-twitter-mono-link").attr("href", 'https://twitter.com/intent/tweet?url=' + hostServer +  encodeURI(resultObj.href) + '&text=' + encodeURI(resultObj.title));
            jQuery(socialIcons).find(".ibm-googleplus-mono-link").attr("href", 'https://plus.google.com/share?url=' + hostServer +  encodeURI(resultObj.href) + '&t=' + encodeURI(resultObj.title));
            jQuery(socialIcons).find(".ibm-email-encircled-link").attr("href", 'mailto:?subject=' + encodeURI(resultObj.title) + '&body=' + hostServer +  encodeURI(resultObj.href));

            jQuery(parentNode).find(".ibm-card__content").append(socialShare);
            jQuery(parentNode).find(".ibm-card__content").append(socialIcons);

        };

        function createResultNode(resultObj, addSocial) {
            //Clone the result template html fragment
            console.log(resultObj.desc);
            var resultNode = jQuery(".result-template").clone().removeClass("result-template").addClass("result-item");
            //Set the id and attributes of the new result node
            resultNode.attr("id", resultObj.id);
            resultNode.find(".result-title").text(resultObj.title);
            resultNode.find(".result-desc").text(resultObj.desc);
            resultNode.find("a").attr("href", resultObj.href)
            resultNode.find(".result-link").text("Learn more about " + resultObj.title);
            if (addSocial) {
                addSocialNode(resultNode, resultObj)
            }
            return resultNode;
        };

        function displayResults(results, addSocial) {
            var resultNode;
            results.forEach(function(result){
                resultNode = createResultNode(result, addSocial);
                jQuery("#results-container").masonry().append(resultNode).masonry('appended', resultNode).masonry();
                if (addSocial) {
                    //IBMCore.common.widget.tooltip
                    jQuery("#results-container").find("[data-widget='tooltip']").tooltip();
                }
            });
        };

        function initMasonry() {
            jQuery("#results-container").masonry({
              itemSelector: '.result-item'
            });
        };
        
        function removeResults() {
            jQuery("#results-container").masonry('remove', jQuery("#results-container").children());
        };        

        function notify_no_results(p) {
          if (p == 'show') {
             jQuery("#results-container").after('<div class="ibm-h3 ibm-bold ibm-center ibm-textcolor-white-100" id="notify_no_results"> No Results</divS>');
          }
          else {
              jQuery("#notify_no_results").remove();
          }
        };

        function print(array){
          var arrayLength = array.length;
          for (var i = 0; i < arrayLength; i++) {
              debug(array[i], "none");
          }
        };

        function debug(s, o){
            debug_style = "console"; // use: "alert", "console", or "none"
            // If s is not set make it blank.
            if (s == undefined) {
                s = "";
            }
            // If o is set override the debug_style.
            if (o != undefined) {
                debug_style = o;
            }
            if (debug_style == "alert") {
                alert(s);
            } else if (debug_style == "console") {
                console.debug(s);
            } else {
            }
        };

        //Creates a Map from an Object
        function objToMap(obj) {
            var strMap = new Map();
            var tmpMap = new Map();
            for (var prop in obj) {
              if (obj.hasOwnProperty(prop)) {
                console.log('obj.' + prop + ' = ' + obj[prop]);
                strMap.set(prop, obj[prop]);
              }
            }
            return strMap;
        };

        //Creates a Map from a Json string
        function jsonToMap(jsonStr) {
            return objToMap(JSON.parse(jsonStr));
        };

        function addFilterToDOM(filterKey, filter, color) {

            //Clone the filter template html fragment
            var filterNode = jQuery(".filter-template").clone().appendTo(".filter-container").removeClass("filter-template");
            //Set the id and attributes of the new filter node
            filterNode.attr("id", filterKey + "Container");
            filterNode.find(".filter-title").text(filter.displayTitle); //Set the title (i.e., 'Tell us who you are')
            filterNode.find(".filter").attr("id", filterKey + "Category"); //"whoCategory"
            filterNode.find(".filter").attr("filter", filterKey); //"who", "what" or "how"
            filterNode.find(".filter-image").attr("id", filterKey + "Image");
            filterNode.find(".filter-image").attr("src", filter.defaultImage);
            filterNode.find(".ibm-border-COLOR-core").addClass("ibm-border-" + color + "-core", true);
            filterNode.find(".ibm-border-COLOR-core").removeClass("ibm-border-COLOR-core", false);
            return filterNode;
        };

        function addFilterCategoryToDOM(filter, filterCategory, color) {
            //Example filterCategory
            //{"value" : "100", "image" : "static/images/111.jpg", "category" : "Cust", "title" : "Customer"}
            /* Example generated node
                <p id="whoCust" filtertype="who">
                    <button type="button" class="category-selector ibm-btn-pri ibm-fullwidth ibm-btn-blue-50">Customer</button>
                </p>
            */

            //Clone the filter category template html fragment
            var containerNode = jQuery("#" +filter + "Category") //whoCategory
            var categoryNode = containerNode.find(".filter-category-template").clone().appendTo(containerNode).removeClass("filter-category-template");
            //Set the new node's id and attributes
            categoryNode.attr("id", filter +  filterCategory.category); //whoCust
            categoryNode.attr("filterType", filter); //who
            categoryNode.find(".category-selector").text(filterCategory.title); //Customer
            categoryNode.find(".ibm-btn-COLOR-50").addClass("ibm-btn-" + color + "-50", true);
            categoryNode.find(".ibm-btn-COLOR-50").removeClass("ibm-btn-COLOR-50", false);
            return categoryNode;
        };

        function displayFilters(filters){
            console.log("******************************************************************************************************************");

            //IBM colors
            var ibm_colors = ["gray", "blue", "teal", "green", "magenta", "purple"]; //NOTE: This assumes there will never be more than 6 filters.
            var color = 0;

            var filterMap = objToMap(filters);
            filterMap.forEach(function(filter, filterKey) {
                console.log("-------------------------------------");
                console.log("filterKey: " + filterKey);  //Who, What, How
                console.log(filterKey + " displayTitle: " + filter.displayTitle);
                console.log(filterKey + " defaultImage: " + filter.defaultImage);

                var filterNode = addFilterToDOM(filterKey, filter, ibm_colors[color]);

                //Get the previously selected filter value
                var hasSelected = false;
                var storedFilter  = window.localStorage.getItem(filterKey);
                if (storedFilter && (storedFilter != "undefined") && (storedFilter != "null")  && (storedFilter != null)) {
                    hasSelected = true;
                }
                else {
                    debug("Nothing selected for + '" + filterKey + "'");
                };

                filter.categories.forEach(function(filterCategory) { //iterate through the categories array

                    var categoryMap = objToMap(filterCategory);
                    var categoryNode = addFilterCategoryToDOM(filterKey, filterCategory, ibm_colors[color]);

                    if (hasSelected) {//If a category was previously selected by the user
                        if (storedFilter != filterCategory.value) { //If the selected category is not this category, hide this category
                            categoryNode.hide();
                        }
                        else {
                            //The selected category is this category
                            var categoryImage = filterCategory.image; //Update the displayed image to the one associated with this category
                            jQuery("#" + filterKey + "Image").attr("src", categoryImage);
                            categoryNode.attr("filterSelected", true);
                            console.log(filterCategory.value + " (" + filterCategory.title + ") previously selected for '" + filterKey  + "'");
                        }
                    }

                    var categoryId = filterKey +  filterCategory.category //i.e., whoCust

                    //Set the click event for each filter category
                    jQuery( "#" + categoryId).click(filterCategory, function() {
                        var hasSelected;
                        var selectedFilter = jQuery(this).attr("filterType"); //"who", "what" or "how"
                        var isSelected = (jQuery(this).attr("filterSelected") == "true");

                        //If the category is already selected, deselect it - remove the filterSelected attribute and show all cagegories
                        if (isSelected) {
                            //Deselect the category
                            //Remove the filter, show all results for this filter type
                            window.localStorage.removeItem(selectedFilter);
                            hasSelected = false;
                        }
                        else {
                            //Set the category as selected
                            //Update localStorage
                            window.localStorage.setItem(selectedFilter, filterCategory.value);
                            //Update the image
                            jQuery("#" + selectedFilter + "Image").attr("src", filterCategory.image);
                            //Clear previous filterSelected
                            jQuery(this).parent().children().removeAttr("filterSelected");
                            //Set filterSelected=true
                            jQuery(this).attr("filterSelected", true);
                            hasSelected = true;
                        }

                        //Update the results
                        timeJSON();

                        //Update category display
                        var categoryNodes = jQuery("[filterType='" + selectedFilter + "']");
                        categoryNodes.each(function() {
                            if((jQuery(this).attr("filterSelected") != "true")) {
                                jQuery(this).fadeToggle(1000, "linear");
                            }
                        });

                        //If nothing selected, clear any filterSelected=true node attributes
                        if (!hasSelected) {
                            jQuery(this).parent().children().removeAttr("filterSelected");
                        }
                    });
                });
                color++
            });

            //Unhide the filter container
            jQuery(".filter-container.filter-hide").removeClass("filter-hide");

            console.log("******************************************************************************************************************");
        };

    jQuery(document).ready(function() {


        //We will likely need to externalize this as a configuration Json file, usable by all components of the app
        var filtersObj = {
            "who": {
                    "displayTitle"  :   "Tell us who you are",
                    "defaultImage"  :   "static/images/110.jpg",
                    "categories"    :   [{"value" : "100", "image" : "static/images/111.jpg", "category" : "Cust", "title" : "Customer"},
                                         {"value" : "200", "image" : "static/images/104.jpg", "category" : "BP", "title" : "Business Partner"},
                                         {"value" : "300", "image" : "static/images/103.jpg", "category" : "IBMer", "title" : "IBMer"}]
            },
            "what": {
                    "displayTitle"  :   ". . . what you do",
                    "defaultImage"  :   "static/images/107.jpg",
                    "categories"    :   [{"value" : "10", "image" : "static/images/105.jpg", "category" : "Exec", "title" : "Executive"},
                                         {"value" : "20", "image" : "static/images/106.jpg", "category" : "Admin", "title" : "Administrator"},
                                         {"value" : "30", "image" : "static/images/108.jpg", "category" : "Dev", "title" : "Developer"},
                                         {"value" : "40", "image" : "static/images/107.jpg", "category" : "User", "title" : "User"}]
            },
            "how": {
                    "displayTitle"  :   ". . . how we can help",
                    "defaultImage"  :   "static/images/112.jpg",
                    "categories"    :   [{"value" : "1", "image" : "static/images/109.jpg", "category" : "Try", "title" : "Try"},
                                         {"value" : "2", "image" : "static/images/110.jpg", "category" : "Buy", "title" : "Buy"},
                                         {"value" : "3", "image" : "static/images/112.jpg", "category" : "Support", "title" : "Support"}]

            }
        };

        initMasonry();
        var filterKeys = Object.keys(filtersObj);
        window.localStorage.setItem("filters", JSON.stringify(filterKeys));

        // Read the cookie and place the values in localStorage.
        debug('reading cookie...');
        var filterCookies = jQuery.cookie("selected-values");
        var cookiesFound = false;
        if (filterCookies != undefined && filterCookies != null && filterCookies != "null") {
            var JsonLocalStorage = JSON.parse(filterCookies);
            console.log(JsonLocalStorage);
            filterKeys.forEach(function(key) {
                if (JsonLocalStorage == null || JsonLocalStorage[key] == null || JsonLocalStorage[key] == "null") {
                    window.localStorage.setItem(key, "");
                } else {
                    window.localStorage.setItem(key, JsonLocalStorage[key]);
                    cookiesFound = true;
                }
            });
        };

        if (cookiesFound) {
            // Get back to the previous page location in one request.
            var temp_page = JsonLocalStorage.page;
            var temp_results_pp = JsonLocalStorage.results_pp;
            window.localStorage.setItem('page', init_page);
            window.localStorage.setItem('results_pp', temp_page * temp_results_pp);
            displayFilters(filtersObj);
            sendJSON();

            // Replace values in localStorage and the cookie to keep going.
            window.localStorage.setItem('page', temp_page);
            window.localStorage.setItem('results_pp', temp_results_pp);
            debug('writing cookie...');
            debug(JsonLocalStorage);
            jQuery.cookie("selected-values", JSON.stringify(JsonLocalStorage), { expires: 30, path: '/' });
        } else {
            console.log("No Cookies Found.");
            jQuery.cookie("selected-values", null); //Clear all selected-values in case of any bad values i.e., "null" as a string
            displayFilters(filtersObj);
            timeJSON();
        }

        /* DISABLING scroll event - leaving for future use */
        /*
        jQuery(window).scroll(function() {
            if(jQuery(window).scrollTop() + jQuery(window).height() >= jQuery(document).height() - jQuery("#ibm-footer-module").height() * 1.1) {
                sendJSON(false);
            }
        });
        */
    });

    </script>

    <!--
    <script src="//www.ibm.com/software/info/js/tactic.js" type="text/javascript"></script>
    <script src="//www.ibm.com/software/fr/js/carryout.js" type="text/javascript"></script>
    -->

</head>

<body id="ibm-com" class="ibm-type">
    <div id="ibm-top" class="ibm-landing-page">
        <!-- MASTHEAD_BEGIN -->
        <div id="ibm-masthead" role="banner" aria-label="IBM">
          <div id="ibm-mast-options">
            <ul role="toolbar" aria-labelledby="ibm-masthead">
              <li id="ibm-geo" role="presentation">
                <a href="//www.ibm.com/planetwide/select/selector.html">United States</a>
              </li>
            </ul>
          </div>

          <div id="ibm-universal-nav">
            <div id="ibm-home">
              <a href="//www.ibm.com/us-en/">IBM®</a>
            </div>
            <ul id="ibm-menu-links" role="toolbar" aria-label="Site map">
              <li>
                <a href="//www.ibm.com/sitemap/us/en/">Site map</a>
              </li>
            </ul>
            <div id="ibm-search-module" role="search" aria-labelledby="ibm-masthead">
                <form id="ibm-search-form" action="//www.ibm.com/Search/" method="get">
                    <p>
                    <label for="q"><span class="ibm-access">Search</span></label>
                    <input type="text" maxlength="100" value="" placeholder="Search" name="q" id="q" aria-label="Search" />
                    <input type="hidden" value="17" name="v"/>
                    <input type="hidden" value="utf" name="en"/>
                    <input type="hidden" value="en" name="lang"/>
                    <input type="hidden" value="us" name="cc"/>
                    <input type="submit" id="ibm-search" class="ibm-btn-search" value="Submit"/>
                    </p>
                </form>
            </div>           
          </div>
        </div>
        <!-- MASTHEAD_END -->

        <!-- CONTENT BEGIN -->
        <div id="ibm-content-wrapper">

            <!-- LEADSPACE_BEGIN -->
            <header role="banner" aria-labelledby="ibm-pagetitle">
                <div class="ibm-sitenav-menu-container" data-widgetprocessed="true">
                    <div id="ibm-pagetitle" class="ibm-sitenav-menu-name">IBM Bluefizz</div>
                </div>
            </header>
            <!-- LEADSPACE_END -->

            <main role="main" aria-labelledby="ibm-pagetitle">
                <div id="ibm-pcon">
                    <div id="ibm-content">
                        <div id="ibm-content-body" class="bluefizz-content-body">
                            <div id="ibm-content-main" style="padding-top: 0">

                                <!-- CONTENT FILTERS BEGIN -->
                                <section class="ibm-band ibm-resize" style="border-bottom: 1px solid #e5e5e5; margin-bottom: 20px; padding-bottom: 0px; background: url(/static/images/TinyBubbles2.jpg); background-position: top;">
                                  <div class="filter-container filter-hide ibm-columns">

                                    <!-- FILTER TEMPLATE: HTML fragment for filter -->
                                    <article class="filter-template ibm-col-6-2 ibm-center ibm-col-small-1-1">
                                      <div class="ibm-card ibm-background-transparent ibm-border-hover-black-core ibm-border-COLOR-core">
                                        <div class="bluefizz-card__content">
                                          <!-- <h4 class="filter-title ibm-h4 ibm-bold"></h4> -->
                                          <h4 class="filter-title ibm-h4"></h4>
                                        </div>
                                        <div class="filter ibm-card__top">
                                          <p class="filter-image-padding">
                                            <img class="filter-image ibm-resize" alt="" />
                                          </p>
                                          <p class="filter-category-template filter-padding">
                                            <button type="button" class="category-selector ibm-btn-pri ibm-fullwidth ibm-btn-COLOR-50"></button>
                                          </p>
                                        </div>
                                      </div>
                                    </article>
                                    <!-- FILTER TEMPLATE END -->
                                  </div>
                                </section>
                                <!-- CONTENT FILTERS END -->

                                <!-- RESTULT TEMPLATE: HTML fragment for result -->
                                <div class="result-template ibm-col-5-1 ibm-col-medium-6-2">
                                    <div class="ibm-card ibm-border-gray-50">
                                        <div class="ibm-card__content">
                                            <h4 class="result-title ibm-h4 ibm-light"></h4>
                                            <p class="result-desc"></p>
                                            <p class="ibm-ind-link">
                                                <a class="result-link ibm-forward-link" href="" target="_blank"></a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <!-- RESULTS TEMPLATE END -->

                                <!-- SOCIAL TEMPLATE -->
                                    <p class="ibm-icononly social-share social-template"><a class="ibm-inlinelink ibm-share-mono-link" href="javascript:;" target="" data-widget="tooltip" data-contentid="" title="" style="margin-bottom:0px; !important"  >Share this content</a></p>
                                    <div id="" class="ibm-tooltip-content social-icons social-template">
                                        <p class="ibm-icononly">
                                            <a class="ibm-facebook-mono-link" target="_blank">Share this on Facebook</a>
                                            <a class="ibm-twitter-mono-link" target="_blank">Share this on Twitter</a>
                                            <a class="ibm-googleplus-mono-link" target="_blank">Share this on Google Plus</a>
                                            <a class="ibm-email-encircled-link" target="_blank">E-mail this page</a>
                                        </p>
                                    </div>
                                <!-- SOCIAL TEMPLATE END -->

                                <!-- RESULTS BEGIN -->
                                    <!-- <div id="results-container" class="ibm-columns ibm-cards results-hide" data-widget="masonry" data-items=".ibm-col-5-1"> -->
                                    <div id="results-container"  class="ibm-columns ibm-cards" data-items=".ibm-col-5-1"  >
                                        <!-- RESULTS INJECTED HERE -->

                                    </div>
                                <!-- RESULTS END -->

                                <!--
                                <p class="ibm-ind-link ibm-right">
                                    <a class="ibm-anchor-down-link ibm-btn-pri ibm-btn-blue-50" onclick="sendJSON(false)">More Results</a>
                                    <a class="ibm-anchor-up-link ibm-btn-pri ibm-btn-blue-50" href="#ibm-top">Back to top</a>
                                </p>
                                -->
                                <div class="ibm-sharethispage ibm-columns"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
        <!-- CONTENT END -->

        <!-- FOOTER_BEGIN -->
        <div id="ibm-footer-module">
        </div>
        <footer role="contentinfo" aria-label="IBM">
            <div id="ibm-footer">
                <h2 class="ibm-access">Footer links</h2>
                <ul>
                    <li><a href="//www.ibm.com/contact/us/en/">Contact</a></li>
                    <li><a href="//www.ibm.com/privacy/us/en/">Privacy</a></li>
                    <li><a href="//www.ibm.com/legal/us/en/">Terms of use</a></li>
                    <li><a href="//www.ibm.com/accessibility/us/en/">Accessibility</a></li>
                </ul>
            </div>
        </footer>
        <!-- FOOTER_END -->

    </div>
  </body>
</html>