switch to production Vue script

components/hours-widget.html

@@ -0,0 +1,61 @@
+<div id="hours-content-container">
+        <div id="hours-content"></div>
+        <p>See our <a href="https://library.kbcc.cuny.edu/calendar">hours</a> page for more info.</p>
+</div>
+
+<script>
+
+$(document).ready(function(){
+
+// a function to add the offset
+Date.prototype.addHours= function(h){
+    this.setHours(this.getHours()+h);
+    return this;
+}
+
+$.ajax({
+  url: "https://kbcc-cuny.libcal.com/widget/hours/grid?iid=5570&format=json&weeks=1&systemTime=0",
+  type: 'GET',
+  cache: false,
+  dataType: 'jsonp'
+})
+  .done( function (data) {
+    for (let i = 0; i < data.locations.length; i++) {
+      if (data.locations[i].lid === 16733) {
+        weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+        for (let j = 0; j < weekdays.length; j++) {
+          let x = weekdays[j];
+          hours = data.locations[i].weeks[0][x]["rendered"];
+          currently = data.locations[i].weeks[0][x]["times"]["currently_open"];
+          let start_and_end = hours.split(" - ");
+          let target_date = new Date(data.locations[i].weeks[0][x]["date"]);
+          offset = target_date.getTimezoneOffset() / 60;
+          target_date.addHours(offset);
+          let today = new Date()
+          let isToday = (today.toDateString() == target_date.toDateString());
+          if (isToday) {
+            if (start_and_end.length === 1) {
+              document.getElementById("hours-content").innerHTML += "The library is <strong>CLOSED</strong> today.<br />"
+            } else if (currently) {
+              document.getElementById("hours-content").innerHTML += "The library is currently <strong>OPEN</strong>.<br />Today's hours are <strong>" + hours + "</strong>.<br />";
+            } else {
+              document.getElementById("hours-content").innerHTML += "The library is currently <strong>CLOSED</strong>.<br />Today's hours are <strong>" + hours + "</strong>.<br />";
+            }
+          }
+        } 
+      }   
+    }
+  })
+});
+
+</script>
+
+<style>
+
+#hours-content-container {
+        margin-top: -10px;
+        text-align: center;
+        font-size: 1.7em;
+}
+
+</style>

configuration/main1.js

@@ -0,0 +1,245 @@
+const navComponent = {
+  template:
+    `<a>
+      <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+        <div class="caret-text">{{ navkey }}</div>
+        <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
+      </a>
+      <ul class="dropdown-menu fade dropdown-margin">
+        <li>
+          <a v-for="item in navmenu" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
+            <div class="bigger-fancy-text">
+              <i v-bind:class="item.icon" aria-hidden="true"></i>
+              <strong>{{ item.description }}</strong>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </a>`,
+  props: ['navmenu', 'navkey']
+}
+
+const menusComponent = {
+  template:
+  `<div class="bigger-fancy-text">
+    <i v-bind:class="item.icon" aria-hidden="true"></i>
+    <strong>{{ item.description }}</strong>
+  </div>`,
+   props: ['item'] 
+}
+
+
+new Vue({
+  el: '#app',
+  components: {
+    'nav-component': navComponent,
+    'menus-component': menusComponent
+  },
+  data() {
+    return {
+      hamburger: [
+        {
+          link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
+          icon: "fas fa-search fa-fw bigger-icon",
+          description: "OneSearch",
+          target_blank: "",
+          id: 1
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/az.php",
+          icon: "fas fa-database fa-fw bigger-icon",
+          description: "Databases A to Z",
+          target_blank: "",
+          id: 2
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/guides",
+          icon: "fas fa-telescope fa-fw bigger-icon",
+          description: "Research Guides",
+          target_blank: "",
+          id: 3
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/faq",
+          icon: "fas fa-question-circle fa-fw bigger-icon",
+          description: "FAQ",
+          target_blank: "",
+          id: 4
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/calendar",
+          icon: "fas fa-clock fa-fw bigger-icon",
+          description: "Library Hours",
+          target_blank: "",
+          id: 5
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/sitemap",
+          icon: "fas fa-location-arrow fa-fw bigger-icon",
+          description: "Site Map",
+          target_blank: "",
+          id: 6
+        }
+      ],
+      navListOfMenus: { 
+        "Find It": [
+          {
+            link: "https://library.kbcc.cuny.edu/az.php",
+            icon: "fas fa-database fa-fw bigger-icon",
+            description: "Databases A to Z",
+            target_blank: "",
+            id: 1
+          },
+          {
+            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
+            icon: "fas fa-newspaper fa-fw bigger-icon",
+            description: "Newspaper Search",
+            target_blank: "",
+            id: 2
+          },
+          {
+            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
+            icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
+            description: "Course Reserves",
+            target_blank: "",
+            id: 3
+          },
+          {
+            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
+            icon: "fas fa-book fa-fw bigger-icon",
+            description: "Search for Specific Journals",
+            target_blank: "",
+            id: 4
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/academicworks",
+            icon: "fas fa-archive fa-fw bigger-icon",
+            description: "CUNY Academic Works",
+            target_blank: "_blank",
+            id: 5
+          },
+          {
+            link: "https://www.bkstr.com/kingsboroughccstore/home",
+            icon: "fas fa-cash-register fa-fw bigger-icon",
+            description: "KBCC Bookstore",
+            target_blank: "_blank",
+            id: 6
+          }
+        ],
+        "Services": [
+          {
+            link: "http://kbcc.cuny.illiad.oclc.org/illiad/logon.html",
+            icon: "fas fa-books fa-fw bigger-icon",
+            description: "Interlibrary Loan",
+            target_blank: "_blank",
+            id: 1
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
+            icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
+            description: "Book a Library Instruction Session" ,
+            target_blank: "",
+            id: 2
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/mediaservices",
+            icon: "fas fa-photo-video fa-fw bigger-icon",
+            description: "Media Services",
+            target_blank: "",
+            id: 3
+          },
+          {
+            link: "https://kbcc-cuny.libwizard.com/f/bookrequest",
+            icon: "fas fa-shopping-basket fa-fw bigger-icon",
+            description: "Suggest a Book for Purchase",
+            target_blank: "",
+            id: 4
+          },
+          {
+            link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
+            icon: "fas fa-bookmark fa-fw bigger-icon",
+            description: "Suggest an Item to Add to Reserves",
+            target_blank: "",
+            id: 5
+          }
+        ],
+        "About Us": [
+          {
+            link: "https://library.kbcc.cuny.edu/about-us/directory",
+            icon: "fas fa-address-book fa-fw bigger-icon",
+            description: "Faculty & Staff Directory",
+            target_blank: "",
+            id: 1
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/newarrivals",
+            icon: "far fa-mail-bulk fa-fw bigger-icon",
+            description: "New Arrivals",
+            target_blank: "",
+            id: 2
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/about-us/liaisons",
+            icon: "fas fa-theater-masks fa-fw bigger-icon",
+            description: "Subject Liaisons",
+            target_blank: "",
+            id: 3
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/social",
+            icon: "far fa-hashtag fa-fw bigger-icon",
+            description: "Social Media",
+            target_blank: "",
+            id: 4
+          }
+        ],
+        "Location & Hours": [
+          {
+            link: "https://tour.kingsborough.edu/",
+            icon: "fas fa-map-marked-alt fa-fw bigger-icon",
+            description: "Campus Map",
+            target_blank: "",
+            id: 1
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/calendar",
+            icon: "fas fa-clock fa-fw bigger-icon",
+            description: "Library Hours",
+            target_blank: "",
+            id: 2
+          }
+        ],
+        "Help": [
+          {
+            link: "https://library.kbcc.cuny.edu/askalibrarian",
+            icon: "fas fa-book-reader fa-fw bigger-icon",
+            description: "Ask A Librarian",
+            target_blank: "",
+            id: 1
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/faq",
+            icon: "fas fa-question-circle fa-fw bigger-icon",
+            description: "FAQ",
+            target_blank: "",
+            id: 2
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/guides",
+            icon: "fas fa-telescope fa-fw bigger-icon",
+            description: "Research Guides and Tutorials",
+            target_blank: "",
+            id: 3
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/ENGLISH24",
+            icon: "fas fa-question fa-fw bigger-icon",
+            description: "How to Use the Library",
+            target_blank: "",
+            id: 4
+          }
+        ]
+  	  }
+    }
+  }
+});

configuration/main2.js

@@ -0,0 +1,245 @@
+const navComponent = {
+  template:
+    `<a>
+      <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+        <div class="caret-text">{{ navkey }}</div>
+        <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
+      </a>
+      <ul class="dropdown-menu fade dropdown-margin">
+        <li>
+          <a v-for="item in navmenu" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
+            <div class="bigger-fancy-text">
+              <i v-bind:class="item.icon" aria-hidden="true"></i>
+              <strong>{{ item.description }}</strong>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </a>`,
+  props: ['navmenu', 'navkey']
+}
+
+const menusComponent = {
+  template:
+  `<div class="bigger-fancy-text">
+    <i v-bind:class="item.icon" aria-hidden="true"></i>
+    <strong>{{ item.description }}</strong>
+  </div>`,
+   props: ['item'] 
+}
+
+const { createApp } = Vue
+
+createApp({
+  components: {
+    'nav-component': navComponent,
+    'menus-component': menusComponent
+  },
+  data() {
+    return {
+      hamburger: [
+        {
+          link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
+          icon: "fas fa-search fa-fw bigger-icon",
+          description: "OneSearch",
+          target_blank: "",
+          id: 1
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/az.php",
+          icon: "fas fa-database fa-fw bigger-icon",
+          description: "Databases A to Z",
+          target_blank: "",
+          id: 2
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/guides",
+          icon: "fas fa-telescope fa-fw bigger-icon",
+          description: "Research Guides",
+          target_blank: "",
+          id: 3
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/faq",
+          icon: "fas fa-question-circle fa-fw bigger-icon",
+          description: "FAQ",
+          target_blank: "",
+          id: 4
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/calendar",
+          icon: "fas fa-clock fa-fw bigger-icon",
+          description: "Library Hours",
+          target_blank: "",
+          id: 5
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/sitemap",
+          icon: "fas fa-location-arrow fa-fw bigger-icon",
+          description: "Site Map",
+          target_blank: "",
+          id: 6
+        }
+      ],
+      navListOfMenus: { 
+        "Find It": [
+          {
+            link: "https://library.kbcc.cuny.edu/az.php",
+            icon: "fas fa-database fa-fw bigger-icon",
+            description: "Databases A to Z",
+            target_blank: "",
+            id: 1
+          },
+          {
+            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
+            icon: "fas fa-newspaper fa-fw bigger-icon",
+            description: "Newspaper Search",
+            target_blank: "",
+            id: 2
+          },
+          {
+            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
+            icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
+            description: "Course Reserves",
+            target_blank: "",
+            id: 3
+          },
+          {
+            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
+            icon: "fas fa-book fa-fw bigger-icon",
+            description: "Search for Specific Journals",
+            target_blank: "",
+            id: 4
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/academicworks",
+            icon: "fas fa-archive fa-fw bigger-icon",
+            description: "CUNY Academic Works",
+            target_blank: "_blank",
+            id: 5
+          },
+          {
+            link: "https://www.bkstr.com/kingsboroughccstore/home",
+            icon: "fas fa-cash-register fa-fw bigger-icon",
+            description: "KBCC Bookstore",
+            target_blank: "_blank",
+            id: 6
+          }
+        ],
+        "Services": [
+          {
+            link: "http://kbcc.cuny.illiad.oclc.org/illiad/logon.html",
+            icon: "fas fa-books fa-fw bigger-icon",
+            description: "Interlibrary Loan",
+            target_blank: "_blank",
+            id: 1
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
+            icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
+            description: "Book a Library Instruction Session" ,
+            target_blank: "",
+            id: 2
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/mediaservices",
+            icon: "fas fa-photo-video fa-fw bigger-icon",
+            description: "Media Services",
+            target_blank: "",
+            id: 3
+          },
+          {
+            link: "https://kbcc-cuny.libwizard.com/f/bookrequest",
+            icon: "fas fa-shopping-basket fa-fw bigger-icon",
+            description: "Suggest a Book for Purchase",
+            target_blank: "",
+            id: 4
+          },
+          {
+            link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
+            icon: "fas fa-bookmark fa-fw bigger-icon",
+            description: "Suggest an Item to Add to Reserves",
+            target_blank: "",
+            id: 5
+          }
+        ],
+        "About Us": [
+          {
+            link: "https://library.kbcc.cuny.edu/about-us/directory",
+            icon: "fas fa-address-book fa-fw bigger-icon",
+            description: "Faculty & Staff Directory",
+            target_blank: "",
+            id: 1
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/newarrivals",
+            icon: "far fa-mail-bulk fa-fw bigger-icon",
+            description: "New Arrivals",
+            target_blank: "",
+            id: 2
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/about-us/liaisons",
+            icon: "fas fa-theater-masks fa-fw bigger-icon",
+            description: "Subject Liaisons",
+            target_blank: "",
+            id: 3
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/social",
+            icon: "far fa-hashtag fa-fw bigger-icon",
+            description: "Social Media",
+            target_blank: "",
+            id: 4
+          }
+        ],
+        "Location & Hours": [
+          {
+            link: "https://tour.kingsborough.edu/",
+            icon: "fas fa-map-marked-alt fa-fw bigger-icon",
+            description: "Campus Map",
+            target_blank: "",
+            id: 1
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/calendar",
+            icon: "fas fa-clock fa-fw bigger-icon",
+            description: "Library Hours",
+            target_blank: "",
+            id: 2
+          }
+        ],
+        "Help": [
+          {
+            link: "https://library.kbcc.cuny.edu/askalibrarian",
+            icon: "fas fa-book-reader fa-fw bigger-icon",
+            description: "Ask A Librarian",
+            target_blank: "",
+            id: 1
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/faq",
+            icon: "fas fa-question-circle fa-fw bigger-icon",
+            description: "FAQ",
+            target_blank: "",
+            id: 2
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/guides",
+            icon: "fas fa-telescope fa-fw bigger-icon",
+            description: "Research Guides and Tutorials",
+            target_blank: "",
+            id: 3
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/ENGLISH24",
+            icon: "fas fa-question fa-fw bigger-icon",
+            description: "How to Use the Library",
+            target_blank: "",
+            id: 4
+          }
+        ]
+  	  }
+    }
+  }
+}).mount('#app');

groups/guides/homepage-experiments-css.html

@@ -11,6 +11,9 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
         text-decoration:none;
 }
 
+/* style slide out chat */
+#lcs_slide_out_button-21944 { font-size: 1.5em; }
+
 /* Fix the color of the "Search" button on the subject pages */
 form .btn.btn-info {
     background-color:#003466;
@@ -105,62 +108,6 @@ ul.nav.nav-pills > .s-lg-index-nav-btn.active > button.btn:focus {
     outline: none;
 }
 
-/* New CSS for the Kingsborough banner that was developed by Kwatei */
-
-#bannerwrap {
-top:10px;
-width:100%;
-height:100px;
-position:relative;
-margin:0px auto;
-float:none;
-clear:none;	
-}
-
-#bannerleft {
-background:url(https://libapps.s3.amazonaws.com/accounts/16298/images/KCC_Offical_Logo.jpg);
-background-size:contain;
-width:367px;
-height:105px;
-margin:0px auto;
-position:relative;
-float:left;
-clear:none;
-}
-
-#bannerx {
-	height:105px;
-        background-image:url(https://libapps.s3.amazonaws.com/accounts/16298/images/logo_x_new.png);
-        background-size:contain;
-	background-repeat: repeat-x;
-}
-
-#innerbannercont {
-	width:660px;
-	float:right;
-	clear:left;
-	height:33px;	
-	position:relative;
-	z-index:12;
-	font-size:12px;
-        text-align:right;
-        color:#fff;
-        margin:3px;
-}
-
-#innerbannercont a {
-        color:#fff;
-	text-decoration:none;
-}
-
-#spacer {
-        height:30px;
-}
-
-#s-lib-bc {
-       clear:both;
-}
-
 /* alternate fonts included to accommodate computers that do not have the defaults */
 
 body {

groups/home/LibAnswers-7-js-css.html

@@ -11,6 +11,8 @@ body {
         overflow-x: hidden;
 }
 
+a, a:hover { text-decoration: none; }
+
 /* style slide out chat */
 #lcs_slide_out_button-21944 { font-size: 1.5em; }
 
@@ -65,7 +67,7 @@ body {
 #corona-alert {
         text-align: center;
         background-color: #faf870;
-        padding: 5px 15px;
+        padding: 5px 50px;
         cursor: pointer;
 }
 #corona-alert-text {
@@ -74,7 +76,7 @@ body {
 }
 
 /* style navbar */
-nav.navbar-default.yamm {
+nav.navbar-default.main-nav-container {
         background-color: white;
         border: none;
         font-size: 1.4em;
@@ -94,20 +96,18 @@ nav.navbar-default.yamm {
 .ga-main-navbar { 
         font-size: 1.3em;
 }
-.faux-card {
-        margin-left: 16px;
-}
 #dropdownMenu1 { border-radius: 0; }
-a.searchmenu { color: var(--text); }
+a.searchmenu {
-.highlight-menu-item { padding: 2px; }
+        color: var(--text);
+}
+.highlight-menu-item { padding: 5px; }
 .highlight-menu-item:hover {
-        background-color: #eee;
         cursor: pointer;
 }
 
 /* style background image */
 .kbcc-background-image {
-        background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.6) 100%), url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg");
+        background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.6) 100%), url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view_md.jpg");
         background-position: 50% 71%;
         padding: 20px 0;
         border-radius: 5px;
@@ -129,6 +129,27 @@ a.searchmenu { color: var(--text); }
         margin-right: -2px;
 }
 
+.zero-margin { margin: -2px; }
+
+/* add flex so that blue box-shadows line up */
+#flex-search-form {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+}
+.inherit-height-from-flex { height: inherit; }
+ 
+/* shadow for the search bar */
+#blue-border1 {
+        box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
+}
+#blue-border2 {
+        box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
+}
+#blue-border3 {
+        box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), 5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
+}
+
 /* style for nav by the jumbotron */
 .nav-divs-by-jumbotron {
         text-align: center;
@@ -143,7 +164,6 @@ a.searchmenu { color: var(--text); }
         margin-bottom: 4px;
         margin-top: 4px;
 }
-a.no-underline { text-decoration: none; }
 .nav-divs-by-jumbotron:hover { background-color: #444; }
 #eq_32886 { 
         background-color: var(--kbccblue);
@@ -185,38 +205,11 @@ a.no-underline { text-decoration: none; }
 .s-lib-public-side-header { display: none; }
 .slick-active { outline: 0; }
 
-/* style the hours */
+/* style to make all imported boxes floating */
-.hours { text-align:center; }
+.s-lib-box-title {display: none;}
-.hours-panel-body { padding: 10px 5px 0 5px; }
+ .s-lg-box {box-shadow: none !important;}
-.padding-0 {
+.s-lib-box .s-lib-box-title {display: none;}
-        padding-left: 4px;
+.s-lib-box {box-shadow: none !important; border: 0 !important;}
-        padding-right: 4px;
-        flex:1 1 auto;
-        display: flex;
-}
-.equal {
-        display: -webkit-box;
-        display: -moz-box;
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-}
-.panel { flex:1 0 100%; }
-.panel-outline-color {
-        border: solid #555 1px;
-        font-size: 1.2em;
-        line-height: 1.4em;
-}
-.vertical-align {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-}
-.more-link {
-        text-align: center;
-        width: 100%;
-}
 
 /* style the dropdown menus */
 .dropdown-margin { padding: 20px 0; }
@@ -227,10 +220,6 @@ a.no-underline { text-decoration: none; }
 .open > a > .fancy-caret { margin-bottom: -4px; vertical-align: -4px; display: inline-block; }
 .open > a > .caret-text { vertical-align: -1px; }
 
-/* additional styling for OneSearch dropdown */
-.yamm4 { max-width: 460px; }
-#yamm4-margins { margin: -15px 0; }
-
 /* style footer */
 #orange-line {
         height:10px; 
@@ -243,7 +232,6 @@ a.no-underline { text-decoration: none; }
 }
 .whiteahrefs a:link, .whiteahrefs a:hover, .whiteahrefs a:visited, .whiteahrefs a:active { 
         color: white;
-        text-decoration:none;
 }
 .whiteahrefs a i {
         margin: 4px 5px 0 0;
@@ -259,9 +247,8 @@ a.no-underline { text-decoration: none; }
                max-width: 100%;
                max-height: 150px;
         }
-        nav.navbar-default.yamm { margin-top: -20px; }
+        nav.navbar-default.main-nav-container { margin-top: -20px; }
-        .form-width { width: 210px; }
+        .form-width { width: 40%; }
-        .zero-margin { margin: 7px auto; }
         .nav-by-jumbotron { margin-top: 40px !important; }
         #main-blue-footer { min-height: 450px; }
         .library-address { float: left; }
@@ -278,31 +265,10 @@ a.no-underline { text-decoration: none; }
 
 @media only screen and (max-width: 768px) {
         #login-text { display: none; }
+        #defineYourSearch { display: none; }
 }
 
 @media only screen and (min-width: 768px) {
-        .zero-margin { margin: -2px; }
-
-        /* add flex so that blue box-shadows line up */
-        #flex-search-form {
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-        }
-        .inherit-height-from-flex {
-                height: inherit;
-        }
- 
-        /* shadow for the search bar */
-        #blue-border1 {
-                box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
-        }
-        #blue-border2 {
-                box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
-        }
-        #blue-border3 {
-                box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), 5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
-        }
 
         .nav-by-jumbotron { margin-top: 0 !important; }
         #lighthouse-logo {
@@ -328,7 +294,6 @@ a.no-underline { text-decoration: none; }
 
 @media only screen and (min-width: 1px) and (max-width: 992px) {
         #hamburger-alternative { display: none; }
-        #corona-alert { margin-top: 10px; }
 }
 
 @media only screen and (min-width: 992px) {
@@ -344,34 +309,6 @@ a.no-underline { text-decoration: none; }
 @media only screen and (min-width: 1200px)  {
          #library-logo { margin-top: -3px; }
 }
-
-/*!
- * Yamm!3 - Yet another megamenu for Bootstrap 3
- * http://geedmo.github.com/yamm3
- *
- * @geedmo - Licensed under the MIT license
- */
-.yamm .nav,
-.yamm .collapse,
-.yamm .dropup,
-.yamm .dropdown {
-  position: static;
-}
-.yamm .container {
-  position: relative;
-}
-.yamm .dropdown-menu {
-  left: auto;
-}
-.yamm .yamm-content {
-  padding: 20px 30px;
-}
-.yamm .dropdown.yamm-fw .dropdown-menu {
-  left: 0;
-  right: 0;
-}
-/* End of Yamm */
-
 </style>
 
 <!-- trigger menu open when you hover over dropdowns
@@ -403,42 +340,6 @@ jQuery(function(){
 });
 </script>
 
-<!-- the configuration file for the hours widget -->
-<script type="text/javascript" src="//libapps.s3.amazonaws.com/sites/2365/include/hours-babel.js"></script>
-
-<!-- the code for the hours widget -->
-<!-- please forgive the old-timey JS; it is there because we need to support IE10 & IE11 -->
-<script type="text/javascript">
-function hoursFunction() {
-        const h = JSON.parse(hours);
-        const options_weekday = { weekday: 'long' };
-        const options_weekday_short = { weekday: 'short' };
-        const options_date = { month: 'short', day: 'numeric' };
-        for (var i = 0; i < h.length; i++) {
-                let targetDate = new Date(h[i].Date + "T00:00:00.000-05:00");
-                let today = new Date();
-                if (window.innerWidth < 500) {
-                    weekday = targetDate.toLocaleDateString("en-US", options_weekday_short)
-                } else { 
-                    weekday = targetDate.toLocaleDateString("en-US", options_weekday)
-                }
-                if (targetDate.getFullYear() === today.getFullYear() &&
-                    targetDate.getMonth() === today.getMonth() &&
-                    targetDate.getDate() === today.getDate()) {
-                           document.getElementById('hours0').innerHTML = "<p><strong>Today</strong><br />" + targetDate.toLocaleDateString("en-US", options_date) + "<br />" + h[i].Hours + "</p>";
-                           var start = true;
-                           var count = 1;
-                } else if (start === true && count < 3 && h[i].Hours === "Closed" ) {
-                        document.getElementById('hours' + count).innerHTML = "<span style='color:#666;'><p>" + weekday + "<br />" + targetDate.toLocaleDateString("en-US", options_date) + "<br />" + h[i].Hours + "</p></span>";
-                        count++;
-               } else if (start === true && count < 3 && h[i].Hours != "Closed") {
-                        document.getElementById('hours' + count).innerHTML = "<p>" + weekday + "<br />" + targetDate.toLocaleDateString("en-US", options_date) + "<br />" + h[i].Hours + "</p>";
-                        count++;
-               }
-        }
-};
-</script>
-
 <!-- polyfills to make .forEach and .includes work in IE10 and IE11 -->
 <script type="text/javascript">
 if (window.NodeList && !NodeList.prototype.forEach) {
@@ -469,7 +370,7 @@ function customizeSearch(facet) {
         if (facet === "Books") {
                 document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="facet" value="rtype,include,books" type="hidden" class="deleteWithDropdownChange" />');
         } else if (facet === "Articles") {
-                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="mfacet" value="rtype,include,articles,1" type="hidden" class="deleteWithDropdownChange"/><input name="mfacet" value="rtype,include,newspaper_articles,1" type="hidden" class="deleteWithDropdownChange" />');
+                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="mfacet" value="rtype,include,articles,1" type="hidden" class="deleteWithDropdownChange"/><input name="facet" value="tlevel,include,peer_reviewed" type="hidden" class="deleteWithDropdownChange" />');
         } else if (facet === "Videos") {
                 document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="facet" value="rtype,include,videos" type="hidden" class="deleteWithDropdownChange" />');
         } else if (facet === "Journals") {
@@ -477,7 +378,7 @@ function customizeSearch(facet) {
                 document.getElementById("tabSetting").setAttribute("value", "jsearch_slot");
         } else if (facet === "Newspapers") {
                 document.getElementById("formToAppendInputsTo").setAttribute('action', 'https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch');
-        } else if (facet === "Course Reserves") {
+        } else if (facet === "Reserves") {
                 document.getElementById("tabSetting").setAttribute("value", "CourseReserves");
                 document.getElementById("SearchScopeSetting").setAttribute("value", "CourseReserves");
         } else {
@@ -525,18 +426,13 @@ function addPrimoQuery(e) {
 }
 </script>
 
-<!-- run the hours widget and the sessionStorage stuff on load -->
+<!-- run the sessionStorage stuff on load -->
 <script>
 window.onload = function () {
-        hoursFunction()
         sessionFunction()
 }
 </script>
 
-<!-- Load bootstrap accessibility libraries (https://github.com/paypal/bootstrap-accessibility-plugin) -->
-<!--<link rel="stylesheet" type="text/css" href="//libapps.s3.amazonaws.com/sites/2365/include/bootstrap-accessibility.min.css">-->
-<!--<script type="text/javascript" src="//libapps.s3.amazonaws.com/sites/2365/include/bootstrap-accessibility.min.js"></script>-->
-
 <!-- FontAwesome -->
 <script src="https://kit.fontawesome.com/4c28f38a07.js" crossorigin="anonymous"></script>
 

groups/home/LibAnswers-8-js-css.html

@@ -0,0 +1,422 @@
+<style>
+
+:root {
+        --kbccblue: #003466;
+        --kbccorange: #ff4e00;
+        --text: #111;
+}
+
+body {
+        color: var(--text);
+        overflow-x: hidden;
+}
+
+a, a:hover { text-decoration: none; }
+
+/* style slide out chat */
+#lcs_slide_out_button-21944 { font-size: 1.5em; }
+
+/* style header */
+#header-div {
+        padding: 30px;
+}
+
+/* style the hamburger menu */
+#hamburger-container { float: left; }
+#hamburger, #hamburger:active { 
+        border: none;
+        outline: none;
+        background-color: #fff;
+        color: var(--kbccblue)
+}
+#hamburger-ul > li > .searchmenu { background-color: #fff; }
+#hamburger-ul { padding: 25px 0; }
+
+/* have bootstrap dropdowns fade in and out */
+.dropdown-menu.fade {
+        display: block;
+        opacity: 0;
+        pointer-events: none;
+}
+.open > .dropdown-menu.fade {
+        pointer-events: auto;
+        opacity: 1;
+}
+.fade {
+        -webkit-transition-duration: 5s; /* Safari */
+        transition-duration: 0.5s;
+}
+.dropdown:hover .dropdown-menu {
+        display: block;
+}
+
+/* style the login at the top right */
+#login-div {
+        float: right;
+        padding: 8px 15px 0 0;
+        color:var(--kbccblue);
+        font-size:1.5em;
+}
+#login-text {
+        display: inline-block;
+        vertical-align: -2px;
+}
+#login-icon { display: inline-block; }
+
+/* style alert */
+#corona-alert {
+        text-align: center;
+        background-color: #faf870;
+        padding: 5px 50px;
+        cursor: pointer;
+}
+#corona-alert-text {
+        color: var(--text);
+        font-size: 1.5em;
+}
+
+/* style navbar */
+nav.navbar-default.main-nav-container {
+        background-color: white;
+        border: none;
+        font-size: 1.4em;
+        color: var(--text);
+        border-radius: 0;
+}
+.dropdown > .ga-main-navbar, .dropdown > .ga-main-navbar:hover, .dropdown > .ga-main-navbar:active {
+        outline: none;
+        border: none;
+}
+.navbar-default .navbar-nav > li > a { color: var(--text); }
+#navbar-center {
+        display: flex;
+        justify-content: left;
+        float: none;
+}
+.ga-main-navbar { 
+        font-size: 1.3em;
+}
+#dropdownMenu1 { border-radius: 0; }
+a.searchmenu {
+        color: var(--text);
+}
+.highlight-menu-item { padding: 5px; }
+.highlight-menu-item:hover {
+        cursor: pointer;
+}
+
+/* style background image */
+.kbcc-background-image {
+        background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.6) 100%), url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg");
+        background-position: 50% 71%;
+        padding: 20px 0;
+        border-radius: 5px;
+        background-size: cover;
+        margin: -30px 0 30px 0;
+}
+
+/* style jumbotron */
+.onesearch-jumbotron {
+        text-align: center;
+        margin-top: -40px;
+}
+#onesearch-header {
+        font-size: 10em;
+        margin-bottom: 0;
+}
+.zero-margin {
+        margin-left: -2px;
+        margin-right: -2px;
+}
+
+.zero-margin { margin: -2px; }
+
+/* add flex so that blue box-shadows line up */
+#flex-search-form {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+}
+.inherit-height-from-flex { height: inherit; }
+ 
+/* shadow for the search bar */
+#blue-border1 {
+        box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
+}
+#blue-border2 {
+        box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
+}
+#blue-border3 {
+        box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), 5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
+}
+
+/* style for nav by the jumbotron */
+.nav-divs-by-jumbotron {
+        text-align: center;
+        padding: 6px;
+        margin: 6px 0;
+        color: white;
+        background-color: var(--kbccblue);
+        border-radius: 3px;
+}
+.nav-divs-by-jumbotron > h2 {
+        font-size: 1.5em;
+        margin-bottom: 4px;
+        margin-top: 4px;
+}
+.nav-divs-by-jumbotron:hover { background-color: #444; }
+#eq_32886 { 
+        background-color: var(--kbccblue);
+        border: none;
+}
+.nav-divs-by-jumbotron:hover > h2 > #eq_32886, #eq_32886:hover { background-color: #444; }
+#bookastudyroom { cursor: pointer; }
+
+/* style link list */
+.link-list { font-size: 1.7em; }
+
+/* style the panels with the text content */
+.panel > .show-panel {
+        background-color: var(--kbccblue);
+        text-align: center;
+}
+.hide-body-border {
+       border: none;
+       box-shadow: none;
+}
+.glyphicon-panel-title { font-size: 2em; }
+.content-panel-title {
+        color: white;
+        font-size: 2em;
+}
+.content-panel-title > h2 {
+        margin: 7px 0;
+        font-size: 1em;
+}
+.panel-heading { padding: 2px; }
+
+/* style the gallery */
+.slick-slide img {
+        padding: 2px;
+        max-height: 350px !important;
+        object-fit: contain;
+        margin: 0;
+}
+.s-lib-public-side-header { display: none; }
+.slick-active { outline: 0; }
+
+/* style to make all imported boxes floating */
+.s-lib-box-title {display: none;}
+ .s-lg-box {box-shadow: none !important;}
+.s-lib-box .s-lib-box-title {display: none;}
+.s-lib-box {box-shadow: none !important; border: 0 !important;}
+
+/* style the dropdown menus */
+.dropdown-margin { padding: 20px 0; }
+.bigger-fancy-text { font-size: 1.2em; padding: 5px; }
+.bigger-icon { font-size: 1.5em; margin-right: 8px; }
+.caret-text { display: inline-block; color: var(--kbccblue); font-weight: bold; }
+.fancy-caret { display: inline-block; margin-left: 2px; color: var(--kbccblue); }
+.open > a > .fancy-caret { margin-bottom: -4px; vertical-align: -4px; display: inline-block; }
+.open > a > .caret-text { vertical-align: -1px; }
+
+/* style footer */
+#orange-line {
+        height:10px; 
+        background-color: var(--kbccorange);
+}
+#main-blue-footer {
+        background-color: var(--kbccblue);
+        color: white; 
+        padding: 30px;
+}
+.whiteahrefs a:link, .whiteahrefs a:hover, .whiteahrefs a:visited, .whiteahrefs a:active { 
+        color: white;
+}
+.whiteahrefs a i {
+        margin: 4px 5px 0 0;
+        font-size: 1.5em
+}
+.whiteahrefs { margin-top: 10px; }
+#lighthouse-logo > a > img { max-width: 150px; }
+
+/* media queries */
+
+@media only screen and (min-width: 1px)  {
+        #library-logo {
+               max-width: 100%;
+               max-height: 150px;
+        }
+        nav.navbar-default.main-nav-container { margin-top: -20px; }
+        .form-width { width: 40%; }
+        .nav-by-jumbotron { margin-top: 40px !important; }
+        #main-blue-footer { min-height: 450px; }
+        .library-address { float: left; }
+        #cuny-logo {
+                float: left;
+                clear: both;
+                margin-top: 10px;
+        }
+        .libapps {
+                float: left; 
+                clear: left;
+        }
+}
+
+@media only screen and (max-width: 768px) {
+        #login-text { display: none; }
+        #defineYourSearch { display: none; }
+}
+
+@media only screen and (min-width: 768px) {
+
+        .nav-by-jumbotron { margin-top: 0 !important; }
+        #lighthouse-logo {
+                display: inline-block;
+                float: left;
+        }
+        #main-blue-footer { min-height: 210px; }
+        .library-address {
+                display: inline-block;
+                margin: -10px 30px;
+                font-size: 1.1em;
+        }
+        #cuny-logo {
+                float: right;
+                clear: none;
+                margin: -10px 0;
+        }
+        .libapps {
+                float: right; 
+                clear: both;
+        }
+}
+
+@media only screen and (min-width: 1px) and (max-width: 992px) {
+        #hamburger-alternative { display: none; }
+}
+
+@media only screen and (min-width: 992px) {
+        #header-div { text-align: center; }
+        #hamburger, #hamburger-ul { display: none; }
+        #library-logo {
+               max-width: 100%;
+               max-height: 350px;
+        }
+       .form-width { width: 340px; }
+}
+
+@media only screen and (min-width: 1200px)  {
+         #library-logo { margin-top: -3px; }
+}
+</style>
+
+<!-- scripts to make the Book a Study Room widget run -->
+<script src="https://kbcc-cuny.libcal.com/js/equipment.min.js"></script>
+<script>
+jQuery(function(){
+   jQuery("#eq_32886, #bookastudyroom").LibCalEquipmentBooking({iid: 5570, gid: 32886, eid: 0, width: 560, height: 680});
+});
+</script>
+
+<!-- polyfills to make .forEach and .includes work in IE10 and IE11 -->
+<script type="text/javascript">
+if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+}
+
+String.prototype.includes = function(match) {
+    return this.indexOf(match) !== -1;
+}
+</script>
+
+
+<!-- script to make OneSearch dropdown work -->
+<!-- please forgive the old-timey JS; it is there because we need to support IE10 & IE11 -->
+<script type="text/javascript">
+function customizeSearch(facet) {
+        // re-render the dropdown menu with the current pick
+        document.getElementById('dropdownMenu1').innerHTML = facet + ' <span class="caret"></span>';
+        document.getElementById("primoQueryTemp").setAttribute("placeholder", "Enter search term here");      
+        
+        // reset any previously selected facets
+        document.querySelectorAll('.deleteWithDropdownChange').forEach( function(e) { e.remove(); });
+        document.getElementById("formToAppendInputsTo").setAttribute("action", "https://cuny-kb.primo.exlibrisgroup.com/discovery/search");
+        document.getElementById("tabSetting").setAttribute("value", "Everything");
+        document.getElementById("SearchScopeSetting").setAttribute("value", "IZ_CI_AW");
+
+        // add the facet that matches the user's dropdown selection
+        if (facet === "Books") {
+                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="facet" value="rtype,include,books" type="hidden" class="deleteWithDropdownChange" />');
+        } else if (facet === "Articles") {
+                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="mfacet" value="rtype,include,articles,1" type="hidden" class="deleteWithDropdownChange"/><input name="facet" value="tlevel,include,peer_reviewed" type="hidden" class="deleteWithDropdownChange" />');
+        } else if (facet === "Videos") {
+                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="facet" value="rtype,include,videos" type="hidden" class="deleteWithDropdownChange" />');
+        } else if (facet === "Journals") {
+                document.getElementById("formToAppendInputsTo").setAttribute('action', 'https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch');
+                document.getElementById("tabSetting").setAttribute("value", "jsearch_slot");
+        } else if (facet === "Newspapers") {
+                document.getElementById("formToAppendInputsTo").setAttribute('action', 'https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch');
+        } else if (facet === "Reserves") {
+                document.getElementById("tabSetting").setAttribute("value", "CourseReserves");
+                document.getElementById("SearchScopeSetting").setAttribute("value", "CourseReserves");
+        } else {
+                console.log("no match");
+        }
+
+        // store the facet, for use on page reload
+        sessionStorage.facet = facet;
+}
+
+// if the stored facet exists on page load, render the dropdown with that facet, then clear the stored facet
+function sessionFunction() {
+        if (sessionStorage.facet && sessionStorage.searchTerms) {
+               stored_terms = sessionStorage.searchTerms;
+               document.getElementById("primoQueryTemp").value = stored_terms;
+               stored_facet = sessionStorage.facet;
+               customizeSearch(stored_facet);
+        }
+        sessionStorage.clear();
+};
+</script>
+
+<!-- OneSearch widget script from OLS, modified -->
+<!-- please forgive the old-timey JS; it is there because we need to support IE10 & IE11 -->
+<script type="text/javascript">
+
+function addPrimoQuery(e) {
+        // prevent the user from submitting the form if no dropdown item has been selected. Added by ME.
+        e.preventDefault();
+        e.stopPropagation();
+        if (document.getElementById("dropdownMenu1").innerHTML.includes('Define') === true) {
+                $("#dropdownMenu1").trigger('click.bs.dropdown.data-api');
+                document.getElementById("primoQueryTemp").value = "";
+                document.getElementById("primoQueryTemp").setAttribute("placeholder", "Please make a selection");
+                return true;
+        };
+
+       // save the search terms, for use on page reload
+       sessionStorage.searchTerms = document.getElementById("primoQueryTemp").value;
+
+       // original OLS widget
+       document.getElementById("primoQuery").value = "any,contains," + document.getElementById("primoQueryTemp").value.replace(/[,]/g, " ");
+       // If you changed the form name at the top, change it below to match
+       document.forms.searchPrimoForm1.submit();
+}
+</script>
+
+<!-- run the sessionStorage stuff on load -->
+<!-- If browser is IE, show a warning-->
+<script type="text/javascript">
+window.onload = function () {
+
+        sessionFunction();
+
+        if (window.document.documentMode) {
+          document.getElementById('obsolete_browser_alert').innerHTML = '<div class="alert alert-danger" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using Internet Explorer 11 or older.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
+       }
+}
+</script>
+
+<!-- FontAwesome -->
+<script src="https://kit.fontawesome.com/4c28f38a07.js" crossorigin="anonymous"></script>

groups/home/LibAnswers-SlideOutChat-3.html

@@ -1,507 +0,0 @@
-<body class="s-lib-public-body">
-        <!-- Google Tag Manager (noscript) -->
-        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NXHWQX3"
-        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-        <!-- End Google Tag Manager (noscript) -->
-	<!-- BEGIN: content -->
-        <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
-		<div  id="s-lg-index-cols">
-                         <div class="row">
-                                <div class="col-xs-12" id="header-div">
-                                        <a href="https://www.kbcc.cuny.edu"><img id="kb-cuny-logo" class="image-fail" alt="CUNY and Kingsborough logos" src="https://libapps.s3.amazonaws.com/accounts/16298/images/kbcc-logo-CUNY.png" /></a>
-                                        <img id="library-logo" class="image-fail" alt="Kibbee Library logo" src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg" />
-                                </div>
-                         </div>
-                         <div class="row">
-                                 <div class="col-xs-12">
-                                         <div id="corona-alert" style="cursor: pointer; padding-left: 20px; padding-right: 20px;" type="button" data-toggle="modal" data-target=".bs-example-modal-sm">
-                                                 <span id="corona-alert-text">No fines on KBCC books checked out before the pandemic! Just return them to any CUNY Library.</span>
-                                         </div>
-                                 </div>
-
-                                 <!-- Modal -->
-                                 <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
-                                         <div class="modal-dialog modal-sm" role="document">
-                                                 <div class="modal-content" style="border-radius: 3px;">
-                                                         <div class="modal-body">
-                                                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="padding: 5px 5px 12px 12px;"><span aria-hidden="true">&times;</span></button>
-                                                                 <h4 class="modal-title" id="myModalLabel">Before returning books to another CUNY library, please make sure you have updated your vaccine information to Cleared4 or checked  rules for visiting that campus.</h4>
-                                                         </div>
-                                                 </div>
-                                         </div>
-                                 </div>
-                                 <!-- End modal -->
-
-                         </div>
-                         <div class="row">
-                                <div class="col-xs-12">
-                                        <nav class="navbar navbar-default yamm">
-                                                <div class="container-fluid">
-                                                        <div>
-                                                                <ul class="nav navbar-nav">
-                                                                        <li><a class="ga-main-navbar" href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB">Library Account</a></li>
-                                                                        <li class="dropdown">
-                                                                                <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Find It <span class="caret"></span></a>
-                                                                                <ul class="dropdown-menu dropdown-margin">
-                                                                                        <li>
-                                                                                                <div class="yamm-content yamm1">
-                                                                                                        <div class="row">
-                                                                                                                <a class="searchmenu" aria-label="Databases A to Z" href="https://library.kbcc.cuny.edu/az.php">
-                                                                                                                        <div class="col-xs-12 col-md-4 col-lg-3 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-database"></i> 
-                                                                                                                                <strong>Databases A-Z</strong> 
-                                                                                                                                <p class="faux-card">An alphabetical listing of the library's electronic collections</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <a class="searchmenu" aria-label="Course Reserves" href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves">
-                                                                                                                       <div class="col-xs-12 col-md-4 col-lg-3 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-cloud-download-alt"></i>
-                                                                                                                                <strong>Course Reserves</strong>
-                                                                                                                                <p class="faux-card">Find class materials through the library</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <a class="searchmenu" aria-label="Journal Search" href="https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB">
-                                                                                                                        <div class="col-xs-12 col-md-4 col-lg-3 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-journal-whills"></i>
-                                                                                                                                <strong>Journal Search</strong>
-                                                                                                                                <p class="faux-card">Find newspapers, magazines and scholarly journals</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <a class="searchmenu" aria-label="CUNY Academic Works" href="https://library.kbcc.cuny.edu/academicworks">
-                                                                                                                        <div class="col-xs-12 col-md-4 col-lg-3 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-archive"></i>
-                                                                                                                                <strong>CUNY Academic Works</strong>
-                                                                                                                                <p class="faux-card">Research and publications from scholars across CUNY</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <div class="clearfix visible-lg-block"></div>
-                                                                                                                <a class="searchmenu" aria-label="KBCC Bookstore" href="https://www.bkstr.com/kingsboroughccstore/home">
-                                                                                                                        <div class="col-xs-12 col-md-4 col-lg-3 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-cash-register"></i>
-                                                                                                                                <strong>KBCC Bookstore</strong>
-                                                                                                                                <p class="faux-card">Search for and purchase your textbook from KBCC</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <a class="searchmenu" aria-label="Newspaper Search" href="https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all">
-                                                                                                                        <div class="col-xs-12 col-md-4 col-lg-3 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-newspaper"></i>
-                                                                                                                                <strong>Newspaper Search</strong> 
-                                                                                                                                <p class="faux-card">Find newspaper articles using OneSearch</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <a class="searchmenu" aria-label="Research Guides" href="https://library.kbcc.cuny.edu/guides">
-                                                                                                                        <div class="col-xs-12 col-md-4 col-lg-3 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-search"></i>
-                                                                                                                                <strong>Research Guides</strong> 
-                                                                                                                                <p class="faux-card">Guides and tutorials from the KBCC librarians</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <a class="searchmenu" aria-label="Google Scholar" href="https://scholar.google.com/">
-                                                                                                                        <div class="col-xs-12 col-md-4 col-lg-3 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-graduation-cap"></i>
-                                                                                                                                <strong>Google Scholar</strong>
-                                                                                                                                <p class="faux-card">Search for scholarly articles at Kingsborough and beyond, using Google</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                        </div>
-                                                                                                </div>
-                                                                                        </li>
-                                                                              </ul>
-                                                                       </li>
-                                                                        <li class="dropdown">
-                                                                                <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
-                                                                                <ul class="dropdown-menu dropdown-margin">
-                                                                                        <li>
-                                                                                                <div class="yamm-content yamm2">
-                                                                                                        <div class="row">
-                                                                                                                <a class="searchmenu" aria-label="Library Instruction" href="https://library.kbcc.cuny.edu/libraryservices/informationliteracy">
-                                                                                                                        <div class="col-xs-12 col-md-4 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-chalkboard-teacher"></i>
-                                                                                                                                <strong>Library Instruction</strong> 
-                                                                                                                                <p class="faux-card">Book an instruction session with a librarian</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <a class="searchmenu" aria-label="Inter Library Loan" href="http://kbcc.cuny.illiad.oclc.org/illiad/logon.html">
-                                                                                                                        <div class="col-xs-12 col-md-4 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-swatchbook"></i>
-                                                                                                                                <strong>Interlibrary Loan</strong> 
-                                                                                                                                <p class="faux-card">Borrow books and articles from other libraries</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <a class="searchmenu" aria-label="Media Services" href="https://library.kbcc.cuny.edu/mediaservices">
-                                                                                                                        <div class="col-xs-12 col-md-4 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-photo-video"></i>
-                                                                                                                                <strong>Media Services</strong>
-                                                                                                                                <p class="faux-card">Equipment requests and DVD borrowing</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <div class="clearfix visible-md-block visible-lg-block"></div>
-                                                                                                                <a class="searchmenu" aria-label="Purchase a book" href="https://kbcc-cuny.libwizard.com/f/bookrequest">
-                                                                                                                        <div class="col-xs-12 col-md-4 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-shopping-basket"></i> 
-                                                                                                                                <strong>Purchase a book</strong>
-                                                                                                                                <p class="faux-card">Suggest a book to purchase</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <a class="searchmenu" aira-label="Add to reserves" href="https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406">
-                                                                                                                        <div class="col-xs-12 col-md-4 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-bookmark"></i>
-                                                                                                                                <strong>Add to reserves</strong>
-                                                                                                                                <p class="faux-card">Suggest a book to add to reserves</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <a class="searchmenu" aira-label="Virtual Study Hall" href="https://library.kbcc.cuny.edu/StudyHall">
-                                                                                                                        <div class="col-xs-12 col-md-4 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-paperclip"></i>
-                                                                                                                                <strong>Virtual Study Hall</strong>
-                                                                                                                                <p class="faux-card">Work together with other students and librarians online</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                        </div>
-                                                                                                </div>
-                                                                                        </li>
-                                                                                </ul>
-                                                                        </li>
-                                                                        <li class="dropdown">
-                                                                                <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a>
-                                                                                <ul class="dropdown-menu dropdown-margin">
-                                                                                        <li>
-                                                                                                <div class="yamm-content yamm3">
-                                                                                                        <div class="row">
-                                                                                                                <a class="searchmenu" aria-label="Faculty and Staff" href="https://library.kbcc.cuny.edu/about-us/directory">
-                                                                                                                        <div class="col-xs-12 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-address-book"></i>
-                                                                                                                                <strong>Faculty & Staff</strong> 
-                                                                                                                                <p class="faux-card">Meet the Kingsborough Library</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <a class="searchmenu" aria-label="Subject Liaisons" href="https://library.kbcc.cuny.edu/about-us/liaisons">
-                                                                                                                        <div class="col-xs-12 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-theater-masks"></i>
-                                                                                                                                <strong>Subject Liaisons</strong> 
-                                                                                                                                <p class="faux-card">Find your library liaison</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <!-- <a class="searchmenu" aria-label="Library Departments" href="https://library.kbcc.cuny.edu/libraryservices">
-                                                                                                                        <div class="col-xs-12 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-inbox"></i> 
-                                                                                                                                <strong>Library Departments</strong> 
-                                                                                                                                <p class="faux-card">Explore the library's functions</p>
-                                                                                                                        </div>
-                                                                                                                </a>-->
-                                                                                                                <a class="searchmenu" aria-label="Campus Map" href="https://tour.kingsborough.edu/">
-                                                                                                                        <div class="col-xs-12 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-map-marked-alt"></i>
-                                                                                                                                <strong>Campus Map</strong> 
-                                                                                                                                <p class="faux-card">How to find us</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <a class="searchmenu" aria-label="Hours" href="https://library.kbcc.cuny.edu/calendar">
-                                                                                                                        <div class="col-xs-12 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-clock"></i> 
-                                                                                                                                <strong>Hours</strong> 
-                                                                                                                                <p class="faux-card">See the library's opening hours</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                                <a class="searchmenu" aria-label="FAQ" href="https://library.kbcc.cuny.edu/faq">
-                                                                                                                        <div class="col-xs-12 highlight-menu-item bigger-fancy-text">
-                                                                                                                                <i class="fas fa-question-circle"></i> 
-                                                                                                                                <strong>FAQ</strong> 
-                                                                                                                                <p class="faux-card">Answers to frequently asked questions</p>
-                                                                                                                        </div>
-                                                                                                                </a>
-                                                                                                        </div>
-                                                                                                </div>
-                                                                                        </li>
-                                                                                </ul>
-                                                                        </li>
-                                                                        <!-- Hide chat with a librarian 
-                                                                        <li>
-                                                                                <a class="no-underline chat1" style="cursor: pointer;" onclick="(function() {if (window.document.documentMode || navigator.userAgent.indexOf('Edge/') > -1) { window.location.href = 'http://library.kbcc.cuny.edu/oldbrowser'; return false; } else {window.open('https://kbcc-cuny.libanswers.com/chat/widget/f7d1629a91e178fd0f799322e803b6e7', 'newwindow', 'width=500, height=400, top=100, left=100'); return false;};})()">
-                                                                                                Chat with a Librarian
-                                                                                </a>
-                                                                       </li>
-                                                                       -->
-                                                               </ul>
-                                                       </div>
-                                               </div>
-                                        </nav>
-                                </div>
-                        </div>
-                </div>
-                <div class="container" style="margin-top:14px;">
-			<div class="row kbcc-background-image">
-                                 <div class="col-sm-8">
-				         <form class="form-inline yamm onesearch-jumbotron" name="searchPrimoForm1" role="search" method="get" action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search" onsubmit="addPrimoQuery();" enctype="application/x-www-form-urlencoded; charset=utf-8" id="formToAppendInputsTo">
-                                                 <!-- default is "everything"  option suggested from OLS widget builder -->
-                                                 <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
-                                                 <input name="tab" value="Everything" type="hidden" id="tabSetting" />
-                                                 <input name="search_scope" value="IZ_CI_AW" type="hidden" id=SearchScopeSetting />
-                                                 <input name="mode" value="basic" type="hidden" />
-                                                 <input name="highlight" value="true" type="hidden" />
-                                                 <input name="displayMode" value="full" type="hidden" />
-                                                 <input name="bulkSize" value="10" type="hidden" />
-                                                 <input name="dum" value="true" type="hidden" />
-                                                 <input name="displayField" value="all" type="hidden" />
-                                                 <input name="pcAvailabiltyMode" value="false" type="hidden" />
-                                                 <input name="query" id="primoQuery" type="hidden" />
-                                                 <h1 id="onesearch-header">
-                                                         <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
-                                                                 <img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
-                                                         </a>
-                                                 </h1>
-                                                 <div class="form-group">
-                                                         <div class="dropdown input-group zero-margin">
-                                                                 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                                                                         Define Your Search <span class="caret"></span>
-                                                                 </button>
-                                                                 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-                                                                         <li>
-                                                                                 <div class="yamm-content yamm4">
-                                                                                         <div class="row" id="yamm4-margins">
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Books')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Books</strong>
-                                                                                                                 <p class="faux-card">Find print books and ebooks using OneSearch</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Articles')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item"> 
-                                                                                                                 <strong>Articles</strong>
-                                                                                                                  <p class="faux-card">Find articles in journals, newspapers and magazines using OneSearch</p>
-                                                                                                          </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Videos')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Videos</strong>
-                                                                                                                 <p class="faux-card">Find DVDs and streaming videos using OneSearch</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Books & more')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Books, articles and videos</strong>
-                                                                                                                 <p class="faux-card">Search for books, articles & videos using OneSearch</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced" class="searchmenu">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Advanced Search</strong>
-                                                                                                                 <p class="faux-card">Use OneSearch's advanced interface</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a href="https://library.kbcc.cuny.edu/az.php" class="searchmenu">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Databases</strong>
-                                                                                                                 <p class="faux-card">See our A to Z list and find databases by subject</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Journals')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                  <strong>Journals</strong>
-                                                                                                                  <p class="faux-card">Find specific scholarly journals (peer reviewed)</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Newspapers')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Newspapers and magazines</strong>
-                                                                                                                 <p class="faux-card">Find specific newspapers and magazines</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Course Reserves')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Course reserves</strong>
-                                                                                                                 <p class="faux-card">Find reserve materials for your classes</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <!-- Old course reserves menu item
-                                                                                                 <a href="https://library.kbcc.cuny.edu/er.php?b=c" class="searchmenu">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Course reserves</strong>
-                                                                                                                 <p class="faux-card">Find reserve materials for your classes</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 -->
-                                                                                         </div>
-                                                                                 </div>
-                                                                         <li>
-                                                                 </ul>
-                                                         </div>
-                                                         <label class="sr-only" for="primoQueryTemp">Search terms</label>
-                                                         <div class="input-group zero-margin form-width">
-                                                                 <input type="text" class="form-control form-width" name="queryTemp" id="primoQueryTemp" type="search" value="" placeholder="Enter search term here">
-                                                         </div>
-                                                         <div class="input-group zero-margin">
-                                                                 <input type="submit" class="btn btn-default form-control onesearchsubmit" value="Search" type="submit" onclick="return addPrimoQuery(event);" />
-                                                         </div>
-                                                 </div>
-                                         </form>
-
-                                 </div>
-                                 <div class="col-sm-4">
-                                         <div class="nav-by-jumbotron">
-                                                 <a class="ga-by-jumbotron">
-                                                         <div class="nav-divs-by-jumbotron no-underline" id="bookastudyroom">
-                                                                 <h2><button id="eq_32886">Book A Study Room</button></h2>
-                                                         </div>
-                                                 </a>
-                                                 <a href="https://library.kbcc.cuny.edu/az.php" class="no-underline ga-by-jumbotron">
-                                                         <div class="nav-divs-by-jumbotron">
-                                                                 <h2>Databases</h2>
-                                                         </div>
-                                                 </a>
-                                                 <a href="https://library.kbcc.cuny.edu/guides" class="no-underline ga-by-jumbotron">
-                                                         <div class="nav-divs-by-jumbotron">
-                                                                 <h2>Research Guides</h2>
-                                                         </div>
-                                                 </a>
-                                                 <a href="https://kbcc-cuny.libwizard.com/f/feedback" class="no-underline ga-by-jumbotron">
-                                                         <div class="nav-divs-by-jumbotron">
-                                                                 <h2>Send Us Feedback</h2>
-                                                         </div>
-                                                 </a>
-                                                 <!-- hide chat with a librarian 
-                                                 <a class="no-underline chat2" style="cursor: pointer;" onclick="(function() {if (window.document.documentMode || navigator.userAgent.indexOf('Edge/') > -1) { window.location.href = 'http://library.kbcc.cuny.edu/oldbrowser'; return false; } else {window.open('https://kbcc-cuny.libanswers.com/chat/widget/f7d1629a91e178fd0f799322e803b6e7', 'newwindow', 'width=500, height=400, top=100, left=100'); return false;};})()">
-                                                         <div class="nav-divs-by-jumbotron">
-                                                                 <h2>Chat with a Librarian!</h2>
-                                                         </div>
-                                                 </a>
-                                                 -->
-                                          </div>
-                                  </div>
-			</div>
-                        <div class="row">
-                                <div class="col-md-7 col-lg-6">
-                                       <div class="panel panel-default hide-body-border">
-                                               <div class="panel-heading show-panel">
-                                                       <span class="panel-title content-panel-title"><h2>Library Links</h2></span>
-                                               </div>
-                                               <div class="panel-body">
-                                                       <div class="row">
-                                                               <div class="col-sm-6">
-                                                                       <ul class="link-list">
-                                                                               <li><a href="https://library.kbcc.cuny.edu/ENGLISH24">How to Use the Library</a></li>
-                                                                               <li><a href="https://library.kbcc.cuny.edu/ebooks">Find eTextbooks and eBooks</a></li>
-                                                                               <li><a href="https://library.kbcc.cuny.edu/social">Social Media</a></li>
-                                                                               <li><a href="https://library.kbcc.cuny.edu/faq">FAQ</a></li>
-                                                                       </ul>
-                                                              </div>
-                                                              <div class="col-sm-6">
-                                                                       <ul class="link-list">
-                                                                               <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h">Academic Search Complete</a></li>
-                                                                               <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336">US Newspapers</a></li>
-                                                                               <li><a href="http://www.nytimes.com/passes">NY Times Free Pass</a></li>
-                                                                               <li><a href="https://library.kbcc.cuny.edu/video">Video</a></li>
-                                                                       </ul>
-                                                               </div>
-                                                       </div>
-                                               </div>
-                                        </div>
-                                       <div class="panel panel-default hide-body-border">
-                                               <div class="panel-heading show-panel">
-                                                       <span class="panel-title content-panel-title"><h2>Upcoming Library Hours</h2></span>
-                                               </div>
-                                               <div class="panel-body">
-                                                       <div class="row equal">
-                                                               <div class="col-xs-2 padding-0">
-                                                                        <div class="panel panel-default panel-outline-color">
-                                                                               <div class="panel-body hours-panel-body">
-                                                                                      <span id="hours0" class="hours"></span>
-                                                                               </div>
-                                                                       </div>
-                                                               </div>
-                                                               <div class="col-xs-2 padding-0">
-                                                                       <div class="panel panel-default panel-outline-color">
-                                                                               <div class="panel-body hours-panel-body">
-                                                                                      <span id="hours1" class="hours"></span>
-                                                                               </div>
-                                                                       </div>
-                                                               </div>
-                                                               <div class="col-xs-2 padding-0">
-                                                                       <div class="panel panel-default panel-outline-color">
-                                                                               <div class="panel-body hours-panel-body">
-                                                                                       <span id="hours2" class="hours"></span>
-                                                                               </div>
-                                                                       </div>
-                                                               </div>
-                                                               <div class="col-xs-2 padding-0">
-                                                                       <div class="panel panel-default panel-outline-color">
-                                                                               <div class="panel-body vertical-align">
-                                                                                       <div class="more-link"><a href="https://library.kbcc.cuny.edu/calendar">More Hours</a></div>
-                                                                               </div>
-                                                                       </div>
-                                                               </div>
-                                                        </div>
-                                               </div>
-                                        </div>
-                                </div>
-                                <div class="col-md-5 col-lg-6">
-                                       <div class="panel panel-default hide-body-border">
-                                               <div class="panel-heading show-panel">
-                                                       <span class="panel-title content-panel-title"><h2>Featured in the Library</h2></span>
-                                               </div>
-                                               <div class="panel-body">
-                                                       {{content_boxes}}                             
-                                               </div>
-                                        </div>
-                                </div>
-                        </div>
-                </div>
-                <div class="container">
-                        <div class="row">
-	                        <!-- BEGIN: Page Footer -->
-	                        <div id="orange-line"></div>
-		                <div id="main-blue-footer">
-		                        <div id="lighthouse-logo">
-                                                <img src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png" />
-                                        </div>
-                                        <div class="library-address">
-                                                <div>
-			                                <strong>Robert J. Kibbee Library</strong><br />
-                                                        2001 Oriental Blvd<br />
-                                                        Brooklyn, NY, 11209<br />
-			                                718-368-5632
-                                                </div>
-                                                <div class="whiteahrefs">
-                                                        <a href="mailto:reference.desk@kbcc.cuny.edu">reference.desk@kbcc.cuny.edu</a>
-                                                        <br />
-		                                        <a href="https://twitter.com/KBCCLibrary"><i class="fab fa-twitter"></i></a>
-		                                        <a href="https://www.instagram.com/kbcclibrary/"><i class="fab fa-instagram"></i></a>
-		                                        <a href="https://www.goodreads.com/user/show/51717966-kingsborough-library"><i class="fab fa-goodreads"></i></a>
-		                                        <a href="https://www.tiktok.com/@kbcclibrary?lang=en"><i class="fab fa-tiktok"></i></a>
-                                                </div>
-                                        </div>
-                                        <div id="cuny-logo">
-                                                <a href="https://www.cuny.edu"><img src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png" /></a>
-                                        </div>
-                                        <div class="whiteahrefs libapps">
-                                                <a href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365">Log in to LibApps</a>
-                                        </div>
-                                        <div style="height:10px;"></div>
-	                        </div>
-                                <!-- END: Page Footer -->
-                        </div>
-		 </div>
-	</div>
-
-	<div id="s-lib-alert" title="">
-		<div id="s-lib-alert-content"></div>
-	</div>        
-	<div id="s-lib-popover-title" class="hide">
-		<span class="text-info"><strong>title</strong></span> 
-		<button type="button" id="popclose" class="close" onclick="jQuery('.s-lib-popover').popover('hide')">&times;</button> 
-	</div>
-	<div id="s-lib-popover-content" class="hide"><i class="fa fa-refresh fa-spin"></i> Loading...
-		<button class="btn btn-default btn-sm popclose" type="button">Close</button>
-	</div>        
-	<div id="s-lib-scroll-top" title="Back to Top">
-	    <span class="fa-stack fa-lg">
-	        <i class="fa fa-square-o fa-stack-2x"></i>
-	        <i class="fa fa-angle-double-up fa-stack-1x" style="position:relative; bottom:2px;"></i>
-	    </span>
-	</div>
-	<!-- BEGIN: Custom Footer -->
-	{{public_footer}}
-	<!-- END: Custom Footer -->
-        <!-- LibChat widget script -->
-        <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
-</body>

groups/home/LibAnswers-SlideOutChat-4.html

@@ -1,531 +0,0 @@
-<body class="s-lib-public-body">
-        <!-- Google Tag Manager (noscript) -->
-        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NXHWQX3"
-        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-        <!-- End Google Tag Manager (noscript) -->
-	<!-- BEGIN: content -->
-        <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
-		<div id="s-lg-index-cols">
-                         <div class="row">
-                                <div class="col-xs-12" id="header-div">
-                                        <div class="dropdown" id="hamburger-container">
-                                                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" id="hamburger">
-                                                        <i class="fas fa-bars" style="font-size: 2em;"></i>
-                                                </button>
-                                                <ul class="dropdown-menu fade" aria-labelledby="hamburger" id="hamburger-ul">
-                                                        <li>
-                                                                <a class="searchmenu" aria-label="OneSearch" href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
-                                                                        <div class="highlight-menu-item bigger-fancy-text">
-                                                                                <i class="fas fa-search fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                <strong>OneSearch</strong>
-                                                                        </div>
-                                                                </a>
-                                                                <a class="searchmenu" aria-label="Databases A to Z" href="https://library.kbcc.cuny.edu/az.php">
-                                                                        <div class="highlight-menu-item bigger-fancy-text">
-                                                                                <i class="fas fa-database fa-fw bigger-icon" aria-hidden="true"></i> 
-                                                                                <strong>Databases A-Z</strong> 
-                                                                        </div>
-                                                                </a>
-                                                                <a class="searchmenu" aria-label="Research Guides" href="https://library.kbcc.cuny.edu/guides">
-                                                                        <div class="highlight-menu-item bigger-fancy-text">
-                                                                                <i class="fas fa-telescope fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                <strong>Research Guides</strong>
-                                                                        </div>
-                                                                </a>
-                                                                <a class="searchmenu" aria-label="FAQ" href="https://library.kbcc.cuny.edu/faq">
-                                                                        <div class="highlight-menu-item bigger-fancy-text">
-                                                                                <i class="fas fa-question-circle fa-fw bigger-icon" aria-hidden="true"></i> 
-                                                                                <strong>FAQ</strong>
-                                                                        </div>
-                                                               </a>
-                                                                <a class="searchmenu" aria-label="Hours" href="https://library.kbcc.cuny.edu/calendar">
-                                                                        <div class="highlight-menu-item bigger-fancy-text">
-                                                                                <i class="fas fa-clock fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                <strong>Library Hours</strong>
-                                                                        </div>
-                                                                </a>
-                                                                <a class="searchmenu" aria-label="Site Map" href="https://library.kbcc.cuny.edu/sitemap">
-                                                                        <div class="highlight-menu-item bigger-fancy-text">
-                                                                                <i class="fas fa-location-arrow fa-fw bigger-icon" aria-hidden="true"></i> 
-                                                                                <strong>Site Map</strong>
-                                                                        </div>
-                                                               </a>
-                                                       </li>
-                                               </ul>
-                                        </div>
-                                        <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB" id="login-div" class="no-underline">
-                                               <div id="login-text">Login</div>
-                                               <div id="login-icon"><i class="fas fa-user"></i></div>
-                                        </a>
-                                        <img id="library-logo" class="image-fail" alt="Kibbee Library logo" src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg" />
-                                         <div id="corona-alert" type="button" data-toggle="modal" data-target=".bs-example-modal-sm">
-                                                 <span id="corona-alert-text">No fines on KBCC books checked out before the pandemic! Just return them to any CUNY Library.</span>
-                                         </div>
-                                 </div>
-                                 <!-- Modal -->
-                                 <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-                                         <div class="modal-dialog modal-sm" role="document">
-                                                 <div class="modal-content" style="border-radius: 3px;">
-                                                         <div class="modal-body">
-                                                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="padding: 5px 5px 12px 12px;"><span aria-hidden="true">&times;</span></button>
-                                                                 <h4 class="modal-title" id="myModalLabel">Before returning books to another CUNY library, please make sure you have updated your vaccine information to Cleared4 or checked  rules for visiting that campus.</h4>
-                                                         </div>
-                                                 </div>
-                                         </div>
-                                 </div>
-                                 <!-- End modal -->
-
-                         </div>
-                         <div class="row" id="hamburger-alternative">
-                                <div class="col-xs-12">
-                                        <nav class="navbar navbar-default yamm">
-                                                <div class="container-fluid">
-                                                        <ul class="nav navbar-nav" id="navbar-center">
-                                                                <li class="dropdown main-nav-dropdown">
-                                                                        <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                                                                                <div class="caret-text">Find It</div>
-                                                                                <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
-                                                                        </a>
-                                                                        <ul class="dropdown-menu fade dropdown-margin">
-                                                                                <li>
-                                                                                        <a class="searchmenu" aria-label="Databases A to Z" href="https://library.kbcc.cuny.edu/az.php">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-database fa-fw bigger-icon" aria-hidden="true"></i> 
-                                                                                                        <strong>Databases A-Z</strong> 
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Newspaper Search" href="https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-newspaper fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Newspaper Search</strong> 
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Course Reserves" href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves">
-                                                                                               <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-cloud-download-alt fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Course Reserves</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Journal Search" href="https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-book fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Search for Specific Journals</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="CUNY Academic Works" href="https://library.kbcc.cuny.edu/academicworks" target="_blank">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-archive fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>CUNY Academic Works</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="KBCC Bookstore" href="https://www.bkstr.com/kingsboroughccstore/home" target="_blank">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-cash-register fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>KBCC Bookstore</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                </li>
-                                                                        </ul>
-                                                                </li>
-                                                                <li class="dropdown main-nav-dropdown">
-                                                                        <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                                                                                <div class="caret-text">Services </div>
-                                                                                <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div></a>
-                                                                        <ul class="dropdown-menu fade dropdown-margin">
-                                                                                <li>
-                                                                                        <a class="searchmenu" aria-label="Inter Library Loan" href="http://kbcc.cuny.illiad.oclc.org/illiad/logon.html" target="_blank">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-books fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Interlibrary Loan</strong> 
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Book a Library Instruction Session" href="https://library.kbcc.cuny.edu/libraryservices/informationliteracy">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-chalkboard-teacher fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Book a Library Instruction Session</strong> 
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Media Services" href="https://library.kbcc.cuny.edu/mediaservices">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-photo-video fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Media Services</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Suggest a Book for Purchase" href="https://kbcc-cuny.libwizard.com/f/bookrequest">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-shopping-basket fa-fw bigger-icon" aria-hidden="true"></i> 
-                                                                                                        <strong>Suggest a Book for Purchase</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Suggest an Item to Add to Reserves" href="https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-bookmark fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Suggest an Item to Add to Reserves</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                </li>
-                                                                        </ul>
-                                                                </li>
-                                                                <li class="dropdown main-nav-dropdown">
-                                                                        <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                                                                                <div class="caret-text">About Us </div>
-                                                                                <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div></a>
-                                                                        <ul class="dropdown-menu fade dropdown-margin">
-                                                                                <li>
-                                                                                        <a class="searchmenu" aria-label="Faculty and Staff Directory" href="https://library.kbcc.cuny.edu/about-us/directory">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-address-book fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Faculty & Staff Directory</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="New Arrivals" href="https://library.kbcc.cuny.edu/newarrivals">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="far fa-mail-bulk fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>New Arrivals</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Subject Liaisons" href="https://library.kbcc.cuny.edu/about-us/liaisons">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-theater-masks fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Subject Liaisons</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Social Media" href="https://library.kbcc.cuny.edu/social">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="far fa-hashtag fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Social Media</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                </li>
-                                                                        </ul>      
-                                                                </li>
-                                                                <li class="dropdown main-nav-dropdown">
-                                                                        <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                                                                                <div class="caret-text">Location & Hours </div>
-                                                                                <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div></a>
-                                                                        <ul class="dropdown-menu fade dropdown-margin">
-                                                                                <li>
-                                                                                        <a class="searchmenu" aria-label="Campus Map" href="https://tour.kingsborough.edu/">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                          <i class="fas fa-map-marked-alt fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                          <strong>Campus Map</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Hours" href="https://library.kbcc.cuny.edu/calendar">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-clock fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Library Hours</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                </li>
-                                                                        </ul>
-                                                                </li>
-                                                                <li class="dropdown main-nav-dropdown">
-                                                                        <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                                                                                <div class="caret-text">Help </div>
-                                                                                <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div></a>
-                                                                        <ul class="dropdown-menu fade dropdown-margin">
-                                                                                <li>
-                                                                                        <a class="searchmenu" aria-label="Ask A Librarian" href="https://library.kbcc.cuny.edu/askalibrarian">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                          <i class="fas fa-book-reader fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                          <strong>Ask A Librarian</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="FAQ" href="https://library.kbcc.cuny.edu/faq">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-question-circle fa-fw bigger-icon" aria-hidden="true"></i> 
-                                                                                                        <strong>FAQ</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Research Guides" href="https://library.kbcc.cuny.edu/guides">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-telescope fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Research Guides and Tutorials</strong> 
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="How to Use the Library" href="https://library.kbcc.cuny.edu/ENGLISH24">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-question fa-fw bigger-icon" aria-hidden="true"></i> 
-                                                                                                        <strong>How to Use the Library</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                 </li>
-                                                                        </ul>
-                                                                </li>
-                                                        </ul>
-                                                </div>
-                                        </nav>
-                                </div>
-                        </div>
-                </div>
-                <div class="container" style="margin-top:14px;">
-			<div class="row kbcc-background-image">
-                                 <div class="col-sm-8">
-				         <form class="form-inline yamm onesearch-jumbotron" name="searchPrimoForm1" role="search" method="get" action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search" onsubmit="addPrimoQuery();" enctype="application/x-www-form-urlencoded; charset=utf-8" id="formToAppendInputsTo">
-                                                 <!-- default is "everything"  option suggested from OLS widget builder -->
-                                                 <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
-                                                 <input name="tab" value="Everything" type="hidden" id="tabSetting" />
-                                                 <input name="search_scope" value="IZ_CI_AW" type="hidden" id=SearchScopeSetting />
-                                                 <input name="mode" value="basic" type="hidden" />
-                                                 <input name="highlight" value="true" type="hidden" />
-                                                 <input name="displayMode" value="full" type="hidden" />
-                                                 <input name="bulkSize" value="10" type="hidden" />
-                                                 <input name="dum" value="true" type="hidden" />
-                                                 <input name="displayField" value="all" type="hidden" />
-                                                 <input name="pcAvailabiltyMode" value="false" type="hidden" />
-                                                 <input name="query" id="primoQuery" type="hidden" />
-                                                 <h1 id="onesearch-header">
-                                                         <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
-                                                                 <img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
-                                                         </a>
-                                                 </h1>
-                                                 <div class="form-group" id="flex-search-form">
-                                                         <div class="dropdown input-group zero-margin" id="blue-border1">
-                                                                 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                                                                         Define Your Search <span class="caret"></span>
-                                                                 </button>
-                                                                 <ul class="dropdown-menu fade" aria-labelledby="dropdownMenu1">
-                                                                         <li>
-                                                                                 <div class="yamm-content yamm4">
-                                                                                         <div class="row" id="yamm4-margins">
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Books')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Books</strong>
-                                                                                                                 <p class="faux-card">Find print books and ebooks using OneSearch</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Articles')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item"> 
-                                                                                                                 <strong>Articles</strong>
-                                                                                                                  <p class="faux-card">Find articles in journals, newspapers and magazines using OneSearch</p>
-                                                                                                          </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Videos')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Videos</strong>
-                                                                                                                 <p class="faux-card">Find DVDs and streaming videos using OneSearch</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Books & more')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Books, articles and videos</strong>
-                                                                                                                 <p class="faux-card">Search for books, articles & videos using OneSearch</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced" class="searchmenu">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Advanced Search</strong>
-                                                                                                                 <p class="faux-card">Use OneSearch's advanced interface</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a href="https://library.kbcc.cuny.edu/az.php" class="searchmenu">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Databases</strong>
-                                                                                                                 <p class="faux-card">See our A to Z list and find databases by subject</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Journals')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                  <strong>Journals</strong>
-                                                                                                                  <p class="faux-card">Find specific scholarly journals (peer reviewed)</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Newspapers')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Newspapers and magazines</strong>
-                                                                                                                 <p class="faux-card">Find specific newspapers and magazines</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Course Reserves')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Course reserves</strong>
-                                                                                                                 <p class="faux-card">Find reserve materials for your classes</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                         </div>
-                                                                                 </div>
-                                                                         <li>
-                                                                 </ul>
-                                                         </div>
-                                                         <label class="sr-only" for="primoQueryTemp">Search terms</label>
-                                                         <div class="input-group zero-margin form-width" id="blue-border2">
-                                                                 <input class="form-control form-width inherit-height-from-flex" name="queryTemp" id="primoQueryTemp" type="search" value="" placeholder="Enter search term here">
-                                                         </div>
-                                                         <div class="input-group zero-margin" id="blue-border3">
-                                                                 <input type="submit" class="btn btn-default form-control onesearchsubmit inherit-height-from-flex" value="Search" onclick="return addPrimoQuery(event);" />
-                                                         </div>
-                                                 </div>
-                                         </form>
-
-                                 </div>
-                                 <div class="col-sm-4">
-                                         <div class="nav-by-jumbotron">
-                                                 <a class="ga-by-jumbotron">
-                                                         <div class="nav-divs-by-jumbotron no-underline" id="bookastudyroom">
-                                                                 <h2><button id="eq_32886">Book A Study Room</button></h2>
-                                                         </div>
-                                                 </a>
-                                                 <a href="https://library.kbcc.cuny.edu/az.php" class="no-underline ga-by-jumbotron">
-                                                         <div class="nav-divs-by-jumbotron">
-                                                                 <h2>Databases</h2>
-                                                         </div>
-                                                 </a>
-                                                 <a href="https://library.kbcc.cuny.edu/guides" class="no-underline ga-by-jumbotron">
-                                                         <div class="nav-divs-by-jumbotron">
-                                                                 <h2>Research Guides</h2>
-                                                         </div>
-                                                 </a>
-                                                 <a href="https://kbcc-cuny.libwizard.com/f/feedback" class="no-underline ga-by-jumbotron">
-                                                         <div class="nav-divs-by-jumbotron">
-                                                                 <h2>Send Us Feedback</h2>
-                                                         </div>
-                                                 </a>
-                                                 <!-- hide chat with a librarian 
-                                                 <a class="no-underline chat2" style="cursor: pointer;" onclick="(function() {if (window.document.documentMode || navigator.userAgent.indexOf('Edge/') > -1) { window.location.href = 'http://library.kbcc.cuny.edu/oldbrowser'; return false; } else {window.open('https://kbcc-cuny.libanswers.com/chat/widget/f7d1629a91e178fd0f799322e803b6e7', 'newwindow', 'width=500, height=400, top=100, left=100'); return false;};})()">
-                                                         <div class="nav-divs-by-jumbotron">
-                                                                 <h2>Chat with a Librarian!</h2>
-                                                         </div>
-                                                 </a>
-                                                 -->
-                                          </div>
-                                  </div>
-			</div>
-                        <div class="row">
-                                <div class="col-md-7 col-lg-6">
-                                       <div class="panel panel-default hide-body-border">
-                                               <div class="panel-heading show-panel">
-                                                       <span class="panel-title content-panel-title"><h2>Library Links</h2></span>
-                                               </div>
-                                               <div class="panel-body">
-                                                       <div class="row">
-                                                               <div class="col-sm-6">
-                                                                       <ul class="link-list">
-                                                                               <li><a href="https://library.kbcc.cuny.edu/ENGLISH24">How to Use the Library</a></li>
-                                                                               <li><a href="https://library.kbcc.cuny.edu/ebooks">Find eTextbooks and eBooks</a></li>
-                                                                               <li><a href="https://library.kbcc.cuny.edu/social">Social Media</a></li>
-                                                                               <li><a href="https://library.kbcc.cuny.edu/faq">FAQ</a></li>
-                                                                       </ul>
-                                                              </div>
-                                                              <div class="col-sm-6">
-                                                                       <ul class="link-list">
-                                                                               <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h" target="_blank">Academic Search Complete</a></li>
-                                                                               <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336" target="_blank">US Newspapers</a></li>
-                                                                               <li><a href="http://www.nytimes.com/passes" target="_blank">NY Times Free Pass</a></li>
-                                                                               <li><a href="https://library.kbcc.cuny.edu/video">Streaming Video</a></li>
-                                                                       </ul>
-                                                               </div>
-                                                       </div>
-                                               </div>
-                                        </div>
-                                       <div class="panel panel-default hide-body-border">
-                                               <div class="panel-heading show-panel">
-                                                       <span class="panel-title content-panel-title"><h2>Upcoming Library Hours</h2></span>
-                                               </div>
-                                               <div class="panel-body">
-                                                       <div class="row equal">
-                                                               <div class="col-xs-2 padding-0">
-                                                                        <div class="panel panel-default panel-outline-color">
-                                                                               <div class="panel-body hours-panel-body vertical-align">
-                                                                                      <span id="hours0" class="hours"></span>
-                                                                               </div>
-                                                                       </div>
-                                                               </div>
-                                                               <div class="col-xs-2 padding-0">
-                                                                       <div class="panel panel-default panel-outline-color">
-                                                                               <div class="panel-body hours-panel-body vertical-align">
-                                                                                      <span id="hours1" class="hours"></span>
-                                                                               </div>
-                                                                       </div>
-                                                               </div>
-                                                               <div class="col-xs-2 padding-0">
-                                                                       <div class="panel panel-default panel-outline-color">
-                                                                               <div class="panel-body hours-panel-body vertical-align">
-                                                                                       <span id="hours2" class="hours"></span>
-                                                                               </div>
-                                                                       </div>
-                                                               </div>
-                                                               <div class="col-xs-2 padding-0">
-                                                                       <div class="panel panel-default panel-outline-color">
-                                                                               <div class="panel-body vertical-align">
-                                                                                       <div class="more-link"><a href="https://library.kbcc.cuny.edu/calendar">More Hours</a></div>
-                                                                               </div>
-                                                                       </div>
-                                                               </div>
-                                                        </div>
-                                               </div>
-                                        </div>
-                                </div>
-                                <div class="col-md-5 col-lg-6">
-                                       <div class="panel panel-default hide-body-border">
-                                               <div class="panel-heading show-panel">
-                                                       <span class="panel-title content-panel-title"><h2>Featured in the Library</h2></span>
-                                               </div>
-                                               <div class="panel-body">
-                                                       {{content_boxes}}                             
-                                               </div>
-                                        </div>
-                                </div>
-                        </div>
-                </div>
-                <div class="container">
-                        <div class="row">
-	                        <!-- BEGIN: Page Footer -->
-	                        <div id="orange-line"></div>
-		                <div id="main-blue-footer">
-		                        <div id="lighthouse-logo">
-                                                <a href="https://www.kbcc.cuny.edu"><img src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png" alt="Kingsborough Lighthouse logo" /></a>
-                                        </div>
-                                        <div class="library-address">
-                                                <div>
-			                                <strong>Robert J. Kibbee Library</strong><br />
-                                                        2001 Oriental Blvd<br />
-                                                        Brooklyn, NY, 11209<br />
-			                                718-368-5632
-                                                </div>
-                                                <div class="whiteahrefs">
-                                                        <a href="mailto:reference.desk@kbcc.cuny.edu">reference.desk@kbcc.cuny.edu</a>
-                                                        <br />
-                                                        <a aria-label="Twitter" href="https://twitter.com/KBCCLibrary" target="_blank"><i aria-hidden="true" class="fab fa-twitter"></i></a>
-                                                        <a aria-label="Instagram" href="https://www.instagram.com/kbcclibrary/" target="_blank"><i aria-hidden="true" class="fab fa-instagram"></i></a>
-                                                        <a aria-label="Goodreads" href="https://www.goodreads.com/user/show/51717966-kingsborough-library" target="_blank"><i aria-hidden="true" class="fab fa-goodreads"></i></a>
-                                                        <a aria-label="TikTok" href="https://www.tiktok.com/@kbcclibrary?lang=en" target="_blank"><i aria-hidden="true" class="fab fa-tiktok"></i></a>
-                                                        <a aria-label= "YouTube" href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos" target="_blank"><i aria-hidden="true" class="fab fa-youtube"></i></a>
-                                                        <a aria-label="Spotify" href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a" target="_blank"><i aria-hidden="true" class="fab fa-spotify"></i></a>
-                                                </div>
-                                        </div>
-                                        <div id="cuny-logo">
-                                                <a href="https://www.cuny.edu" target="_blank"><img src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png" alt="CUNY logo" /></a>
-                                        </div>
-                                        <div class="whiteahrefs libapps">
-                                                <a href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365">Log in to LibApps</a>
-                                        </div>
-                                        <div style="height:10px;"></div>
-	                        </div>
-                                <!-- END: Page Footer -->
-                        </div>
-		 </div>
-	</div>
-
-	<div id="s-lib-alert" title="">
-		<div id="s-lib-alert-content"></div>
-	</div>        
-	<div id="s-lib-popover-title" class="hide">
-		<span class="text-info"><strong>title</strong></span> 
-		<button type="button" id="popclose" class="close" onclick="jQuery('.s-lib-popover').popover('hide')">&times;</button> 
-	</div>
-	<div id="s-lib-popover-content" class="hide"><i class="fa fa-refresh fa-spin"></i> Loading...
-		<button class="btn btn-default btn-sm popclose" type="button">Close</button>
-	</div>        
-	<div id="s-lib-scroll-top" title="Back to Top">
-	    <span class="fa-stack fa-lg">
-	        <i class="fa fa-square-o fa-stack-2x"></i>
-	        <i class="fa fa-angle-double-up fa-stack-1x" style="position:relative; bottom:2px;"></i>
-	    </span>
-	</div>
-	<!-- BEGIN: Custom Footer -->
-	{{public_footer}}
-	<!-- END: Custom Footer -->
-        <!-- LibChat widget script -->
-        <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
-</body>

groups/home/LibAnswers-SlideOutChat-7.html

@@ -0,0 +1,277 @@
+<body class="s-lib-public-body">
+        <!-- Google Tag Manager (noscript) -->
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NXHWQX3"
+        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+        <!-- End Google Tag Manager (noscript) -->
+	<!-- BEGIN: content -->
+        <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
+		<div id="s-lg-index-cols">
+                 <div id="app"><!-- vue app -->
+                         <div class="row">
+                         <!--<div id="obsolete_browser_alert" class="alert alert-danger obsolete_browser_alert">It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.</div>-->
+                                <div class="col-xs-12" id="header-div">
+                                        <div class="dropdown" id="hamburger-container">
+                                                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" aria-label="Hamburger Menu" id="hamburger">
+                                                        <i class="fas fa-bars" style="font-size: 2em;"></i>
+                                                </button>
+                                                <ul class="dropdown-menu fade" aria-labelledby="hamburger" id="hamburger-ul">
+                                                        <li>
+                                                                <a v-for="item in hamburger" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
+                                                                        <menus-component v-bind:item="item"></menus-component>
+                                                                </a>
+                                                       </li>
+                                               </ul>
+                                        </div><!-- end of hamburger container -->
+                                        <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB" id="login-div" aria-labelledby="login-text">
+                                               <div id="login-text">Login</div>
+                                               <div id="login-icon"><i class="fas fa-user"></i></div>
+                                        </a>
+                                        <img id="library-logo" class="image-fail" alt="Kibbee Library logo" src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg" />
+                                         <div id="corona-alert" type="button" data-toggle="modal" data-target=".bs-example-modal-sm">
+                                                 <span id="corona-alert-text">No fines on KBCC books checked out before the pandemic! Just return them to any CUNY Library.</span>
+                                         </div>
+                                 </div><!-- end of header div -->
+                                 <!-- Modal -->
+                                 <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+                                         <div class="modal-dialog modal-sm" role="document">
+                                                 <div class="modal-content" style="border-radius: 3px;">
+                                                         <div class="modal-body">
+                                                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="padding: 5px 5px 12px 12px;"><span aria-hidden="true">&times;</span></button>
+                                                                 <h4 class="modal-title" id="myModalLabel">Before returning books to another CUNY library, please make sure you have updated your vaccine information to Cleared4 or checked  rules for visiting that campus.</h4>
+                                                         </div>
+                                                 </div>
+                                         </div>
+                                 </div><!-- End of modal -->
+                         </div><!-- end of row -->
+                         <div class="row" id="hamburger-alternative">
+                                <div class="col-xs-12">
+                                        <nav class="navbar navbar-default main-nav-container">
+                                                <div class="container-fluid">
+                                                        <ul class="nav navbar-nav" id="navbar-center">
+                                                                <li v-for="(navmenu, navkey) in navListOfMenus" class="dropdown main-nav-dropdown">
+                                                                        <nav-component v-bind:navmenu="navmenu" v-bind:navkey="navkey"></nav-component>
+                                                                </li>
+                                                        </ul>
+                                                </div><!-- end of container-fluid -->
+                                        </nav><!-- end of main-nav-container -->
+                                </div><!-- end of col-xs-12 -->
+                        </div><!--end of row-->
+                </div><!--end of Vue app-->
+                </div>
+                <div class="container" style="margin-top:14px;">
+			<div class="row kbcc-background-image">
+                                 <div class="col-sm-8">
+				         <form class="form-inline onesearch-jumbotron" name="searchPrimoForm1" role="search" method="get" action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search" onsubmit="addPrimoQuery();" enctype="application/x-www-form-urlencoded; charset=utf-8" id="formToAppendInputsTo">
+                                                 <!-- default is "everything"  option suggested from OLS widget builder -->
+                                                 <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
+                                                 <input name="tab" value="Everything" type="hidden" id="tabSetting" />
+                                                 <input name="search_scope" value="IZ_CI_AW" type="hidden" id=SearchScopeSetting />
+                                                 <input name="mode" value="basic" type="hidden" />
+                                                 <input name="highlight" value="true" type="hidden" />
+                                                 <input name="displayMode" value="full" type="hidden" />
+                                                 <input name="bulkSize" value="10" type="hidden" />
+                                                 <input name="dum" value="true" type="hidden" />
+                                                 <input name="displayField" value="all" type="hidden" />
+                                                 <input name="pcAvailabiltyMode" value="false" type="hidden" />
+                                                 <input name="query" id="primoQuery" type="hidden" />
+                                                 <h1 id="onesearch-header">
+                                                         <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
+                                                                 <img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
+                                                         </a>
+                                                 </h1>
+                                                 <div class="form-group" id="flex-search-form">
+                                                         <div class="dropdown input-group zero-margin" id="blue-border1">
+                                                                 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" aria-label="Define Your Search">
+                                                                         <span id="defineYourSearch">Define Your Search </span><span class="caret"></span>
+                                                                 </button>
+                                                                 <ul class="dropdown-menu fade dropdown-margin" aria-labelledby="dropdownMenu1">
+                                                                         <li>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Books')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Books</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Articles')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text"> 
+                                                                                                 <strong>Articles (Peer reviewed)</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Reserves')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Course reserves</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Newspapers')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Newspapers and magazines</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Journals')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                  <strong>Journals</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced" class="searchmenu">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Advanced search</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                         <li>
+                                                                 </ul>
+                                                         </div>
+                                                         <label class="sr-only" for="primoQueryTemp">Search terms</label>
+                                                         <div class="input-group zero-margin form-width" id="blue-border2">
+                                                                 <input class="form-control form-width inherit-height-from-flex" name="queryTemp" id="primoQueryTemp" type="search" value="" placeholder="Enter search term here">
+                                                         </div>
+                                                         <div class="input-group zero-margin" id="blue-border3">
+                                                                 <input type="submit" class="btn btn-default form-control onesearchsubmit inherit-height-from-flex" value="Search" onclick="return addPrimoQuery(event);" />
+                                                         </div>
+                                                 </div>
+                                         </form>
+
+                                 </div>
+                                 <div class="col-sm-4">
+                                         <div class="nav-by-jumbotron">
+                                                 <a class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron" id="bookastudyroom">
+                                                                 <h2><button id="eq_32886">Book A Study Room</button></h2>
+                                                         </div>
+                                                 </a>
+                                                 <a href="https://library.kbcc.cuny.edu/az.php" class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Databases</h2>
+                                                         </div>
+                                                 </a>
+                                                 <a href="https://library.kbcc.cuny.edu/guides" class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Research Guides</h2>
+                                                         </div>
+                                                 </a>
+                                                 <a href="https://kbcc-cuny.libwizard.com/f/feedback" class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Send Us Feedback</h2>
+                                                         </div>
+                                                 </a>
+                                                 <!-- hide chat with a librarian 
+                                                 <a class="chat2" style="cursor: pointer;" onclick="(function() {if (window.document.documentMode || navigator.userAgent.indexOf('Edge/') > -1) { window.location.href = 'http://library.kbcc.cuny.edu/oldbrowser'; return false; } else {window.open('https://kbcc-cuny.libanswers.com/chat/widget/f7d1629a91e178fd0f799322e803b6e7', 'newwindow', 'width=500, height=400, top=100, left=100'); return false;};})()">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Chat with a Librarian!</h2>
+                                                         </div>
+                                                 </a>
+                                                 -->
+                                          </div>
+                                  </div>
+			</div>
+                        <div class="row">
+                                <div class="col-md-7 col-lg-6">
+                                       <div class="panel panel-default hide-body-border">
+                                               <div class="panel-heading show-panel">
+                                                       <span class="panel-title content-panel-title"><h2>Library Links</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                       <div class="row">
+                                                               <div class="col-sm-6">
+                                                                       <ul class="link-list">
+                                                                               <li><a href="https://library.kbcc.cuny.edu/ENGLISH24" class="ga-library-links">How to Use the Library</a></li>
+                                                                               <li><a href="https://library.kbcc.cuny.edu/ebooks" class="ga-library-links">Find eTextbooks and eBooks</a></li>
+                                                                               <li><a href="https://library.kbcc.cuny.edu/video" class="ga-library-links">Streaming Video</a></li>
+                                                                               <li><a href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150765860006129" class="ga-library-links">Comic Books & Graphic Novels</a></li>
+                                                                       </ul>
+                                                              </div>
+                                                              <div class="col-sm-6">
+                                                                       <ul class="link-list">
+                                                                               <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h" target="_blank" class="ga-library-links">Academic Search Complete</a></li>
+                                                                               <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336" target="_blank" class="ga-library-links">US Newspapers</a></li>
+                                                                               <li><a href="http://www.nytimes.com/passes" target="_blank" class="ga-library-links">NY Times Free Pass</a></li>
+                                                                               <li><a href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8147703140006129" class="ga-library-links">Leisure Reading Collection</a></li>
+                                                                       </ul>
+                                                               </div>
+                                                       </div>
+                                               </div>
+                                        </div>
+                                       <div class="panel panel-default hide-body-border">
+                                               <div class="panel-heading show-panel">
+                                                       <span class="panel-title content-panel-title"><h2>Today's Library Hours</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                      {{content_box_29248590}}
+                                               </div>
+                                        </div>
+                                </div>
+                                <div class="col-md-5 col-lg-6">
+                                       <div class="panel panel-default hide-body-border">
+                                               <div class="panel-heading show-panel">
+                                                       <span class="panel-title content-panel-title"><h2>Featured in the Library</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                       {{content_box_25912431}}                             
+                                               </div>
+                                        </div>
+                                </div>
+                        </div>
+                </div>
+                <div class="container">
+                        <div class="row">
+	                        <!-- BEGIN: Page Footer -->
+	                        <div id="orange-line"></div>
+		                <div id="main-blue-footer">
+		                        <div id="lighthouse-logo">
+                                                <a href="https://www.kbcc.cuny.edu"><img src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png" alt="Kingsborough Lighthouse logo" loading="lazy" /></a>
+                                        </div>
+                                        <div class="library-address">
+                                                <div class="whiteahrefs">
+			                                <strong>Robert J. Kibbee Library</strong><br />
+                                                        2001 Oriental Blvd<br />
+                                                        Brooklyn, NY, 11209<br />
+			                                <a href="tel:+1-718-368-5632">718-368-5632</a>
+                                                </div>
+                                                <div class="whiteahrefs">
+                                                        <a href="https://kbcc-cuny.libwizard.com/f/reference">reference.desk@kbcc.cuny.edu</a>
+                                                        <br />
+                                                        <a aria-label="Twitter" href="https://twitter.com/KBCCLibrary" target="_blank"><i aria-hidden="true" class="fab fa-twitter"></i></a>
+                                                        <a aria-label="Instagram" href="https://www.instagram.com/kbcclibrary/" target="_blank"><i aria-hidden="true" class="fab fa-instagram"></i></a>
+                                                        <a aria-label="Goodreads" href="https://www.goodreads.com/user/show/51717966-kingsborough-library" target="_blank"><i aria-hidden="true" class="fab fa-goodreads"></i></a>
+                                                        <a aria-label="TikTok" href="https://www.tiktok.com/@kbcclibrary?lang=en" target="_blank"><i aria-hidden="true" class="fab fa-tiktok"></i></a>
+                                                        <a aria-label= "YouTube" href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos" target="_blank"><i aria-hidden="true" class="fab fa-youtube"></i></a>
+                                                        <a aria-label="Spotify" href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a" target="_blank"><i aria-hidden="true" class="fab fa-spotify"></i></a>
+                                                </div>
+                                        </div>
+                                        <div id="cuny-logo">
+                                                <a href="https://www.cuny.edu" target="_blank"><img src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png" alt="CUNY logo" loading="lazy" /></a>
+                                        </div>
+                                        <div class="whiteahrefs libapps">
+                                                <a href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365">Log in to LibApps</a>
+                                        </div>
+                                        <div style="height:10px;"></div>
+	                        </div>
+                                <!-- END: Page Footer -->
+                        </div>
+		 </div>
+	</div>
+
+	<div id="s-lib-alert" title="">
+		<div id="s-lib-alert-content"></div>
+	</div>        
+	<div id="s-lib-popover-title" class="hide">
+		<span class="text-info"><strong>title</strong></span> 
+		<button type="button" id="popclose" class="close" onclick="jQuery('.s-lib-popover').popover('hide')">&times;</button> 
+	</div>
+	<div id="s-lib-popover-content" class="hide"><i class="fa fa-refresh fa-spin"></i> Loading...
+		<button class="btn btn-default btn-sm popclose" type="button">Close</button>
+	</div>        
+	<div id="s-lib-scroll-top" title="Back to Top">
+	    <span class="fa-stack fa-lg">
+	        <i class="fa fa-square-o fa-stack-2x"></i>
+	        <i class="fa fa-angle-double-up fa-stack-1x" style="position:relative; bottom:2px;"></i>
+	    </span>
+	</div>
+
+        <!-- LibChat widget script -->
+        <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
+
+        <!-- add Vue scripts -->
+        <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> --> <!-- development -->
+        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>  <!--production -->
+        <script type="text/javascript" src="https://libapps.s3.amazonaws.com/sites/2365/include/main.js"></script>
+
+</body>

groups/home/LibAnswers-SlideOutChat-8.html

@@ -0,0 +1,278 @@
+<body class="s-lib-public-body">
+        <!-- Google Tag Manager (noscript) -->
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NXHWQX3"
+        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+        <!-- End Google Tag Manager (noscript) -->
+	<!-- BEGIN: content -->
+        <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
+		<div id="s-lg-index-cols">
+                 <div id="app"><!-- vue app -->
+                         <div class="row">
+                                <div id="obsolete_browser_alert">
+                                </div>
+                                <div class="col-xs-12" id="header-div">
+                                        <div class="dropdown" id="hamburger-container">
+                                                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" aria-label="Hamburger Menu" id="hamburger">
+                                                        <i class="fas fa-bars" style="font-size: 2em;"></i>
+                                                </button>
+                                                <ul class="dropdown-menu fade" aria-labelledby="hamburger" id="hamburger-ul">
+                                                        <li>
+                                                                <a v-for="item in hamburger" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
+                                                                        <menus-component v-bind:item="item"></menus-component>
+                                                                </a>
+                                                       </li>
+                                               </ul>
+                                        </div><!-- end of hamburger container -->
+                                        <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB" id="login-div" aria-labelledby="login-text">
+                                               <div id="login-text">Login</div>
+                                               <div id="login-icon"><i class="fas fa-user"></i></div>
+                                        </a>
+                                        <img id="library-logo" class="image-fail" alt="Kibbee Library logo" src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg" />
+                                         <div id="corona-alert" type="button" data-toggle="modal" data-target=".bs-example-modal-sm">
+                                                 <span id="corona-alert-text">No fines on KBCC books checked out before the pandemic! Just return them to any CUNY Library.</span>
+                                         </div>
+                                 </div><!-- end of header div -->
+                                 <!-- Modal -->
+                                 <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+                                         <div class="modal-dialog modal-sm" role="document">
+                                                 <div class="modal-content" style="border-radius: 3px;">
+                                                         <div class="modal-body">
+                                                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="padding: 5px 5px 12px 12px;"><span aria-hidden="true">&times;</span></button>
+                                                                 <h4 class="modal-title" id="myModalLabel">Before returning books to another CUNY library, please make sure you have updated your vaccine information to Cleared4 or checked  rules for visiting that campus.</h4>
+                                                         </div>
+                                                 </div>
+                                         </div>
+                                 </div><!-- End of modal -->
+                         </div><!-- end of row -->
+                         <div class="row" id="hamburger-alternative">
+                                <div class="col-xs-12">
+                                        <nav class="navbar navbar-default main-nav-container">
+                                                <div class="container-fluid">
+                                                        <ul class="nav navbar-nav" id="navbar-center">
+                                                                <li v-for="(navmenu, navkey) in navListOfMenus" class="dropdown main-nav-dropdown">
+                                                                        <nav-component v-bind:navmenu="navmenu" v-bind:navkey="navkey"></nav-component>
+                                                                </li>
+                                                        </ul>
+                                                </div><!-- end of container-fluid -->
+                                        </nav><!-- end of main-nav-container -->
+                                </div><!-- end of col-xs-12 -->
+                        </div><!--end of row-->
+                </div><!--end of Vue app-->
+                </div>
+                <div class="container" style="margin-top:14px;">
+			<div class="row kbcc-background-image">
+                                 <div class="col-sm-8">
+				         <form class="form-inline onesearch-jumbotron" name="searchPrimoForm1" role="search" method="get" action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search" onsubmit="addPrimoQuery();" enctype="application/x-www-form-urlencoded; charset=utf-8" id="formToAppendInputsTo">
+                                                 <!-- default is "everything"  option suggested from OLS widget builder -->
+                                                 <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
+                                                 <input name="tab" value="Everything" type="hidden" id="tabSetting" />
+                                                 <input name="search_scope" value="IZ_CI_AW" type="hidden" id=SearchScopeSetting />
+                                                 <input name="mode" value="basic" type="hidden" />
+                                                 <input name="highlight" value="true" type="hidden" />
+                                                 <input name="displayMode" value="full" type="hidden" />
+                                                 <input name="bulkSize" value="10" type="hidden" />
+                                                 <input name="dum" value="true" type="hidden" />
+                                                 <input name="displayField" value="all" type="hidden" />
+                                                 <input name="pcAvailabiltyMode" value="false" type="hidden" />
+                                                 <input name="query" id="primoQuery" type="hidden" />
+                                                 <h1 id="onesearch-header">
+                                                         <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
+                                                                 <img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
+                                                         </a>
+                                                 </h1>
+                                                 <div class="form-group" id="flex-search-form">
+                                                         <div class="dropdown input-group zero-margin" id="blue-border1">
+                                                                 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" aria-label="Define Your Search">
+                                                                         <span id="defineYourSearch">Define Your Search </span><span class="caret"></span>
+                                                                 </button>
+                                                                 <ul class="dropdown-menu fade dropdown-margin" aria-labelledby="dropdownMenu1">
+                                                                         <li>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Books')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Books</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Articles')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text"> 
+                                                                                                 <strong>Articles (Peer reviewed)</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Reserves')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Course reserves</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Newspapers')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Newspapers and magazines</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Journals')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                  <strong>Journals</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced" class="searchmenu">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Advanced search</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                         <li>
+                                                                 </ul>
+                                                         </div>
+                                                         <label class="sr-only" for="primoQueryTemp">Search terms</label>
+                                                         <div class="input-group zero-margin form-width" id="blue-border2">
+                                                                 <input class="form-control form-width inherit-height-from-flex" name="queryTemp" id="primoQueryTemp" type="search" value="" placeholder="Enter search term here">
+                                                         </div>
+                                                         <div class="input-group zero-margin" id="blue-border3">
+                                                                 <input type="submit" class="btn btn-default form-control onesearchsubmit inherit-height-from-flex" value="Search" onclick="return addPrimoQuery(event);" />
+                                                         </div>
+                                                 </div>
+                                         </form>
+
+                                 </div>
+                                 <div class="col-sm-4">
+                                         <div class="nav-by-jumbotron">
+                                                 <a class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron" id="bookastudyroom">
+                                                                 <h2><button id="eq_32886">Book A Study Room</button></h2>
+                                                         </div>
+                                                 </a>
+                                                 <a href="https://library.kbcc.cuny.edu/az.php" class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Databases</h2>
+                                                         </div>
+                                                 </a>
+                                                 <a href="https://library.kbcc.cuny.edu/guides" class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Research Guides</h2>
+                                                         </div>
+                                                 </a>
+                                                 <a href="https://kbcc-cuny.libwizard.com/f/feedback" class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Send Us Feedback</h2>
+                                                         </div>
+                                                 </a>
+                                                 <!-- hide chat with a librarian 
+                                                 <a class="chat2" style="cursor: pointer;" onclick="(function() {if (window.document.documentMode || navigator.userAgent.indexOf('Edge/') > -1) { window.location.href = 'http://library.kbcc.cuny.edu/oldbrowser'; return false; } else {window.open('https://kbcc-cuny.libanswers.com/chat/widget/f7d1629a91e178fd0f799322e803b6e7', 'newwindow', 'width=500, height=400, top=100, left=100'); return false;};})()">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Chat with a Librarian!</h2>
+                                                         </div>
+                                                 </a>
+                                                 -->
+                                          </div>
+                                  </div>
+			</div>
+                        <div class="row">
+                                <div class="col-md-7 col-lg-6">
+                                       <div class="panel panel-default hide-body-border">
+                                               <div class="panel-heading show-panel">
+                                                       <span class="panel-title content-panel-title"><h2>Library Links</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                       <div class="row">
+                                                               <div class="col-sm-6">
+                                                                       <ul class="link-list">
+                                                                               <li><a href="https://library.kbcc.cuny.edu/ENGLISH24" class="ga-library-links">How to Use the Library</a></li>
+                                                                               <li><a href="https://library.kbcc.cuny.edu/ebooks" class="ga-library-links">Find eTextbooks and eBooks</a></li>
+                                                                               <li><a href="https://library.kbcc.cuny.edu/video" class="ga-library-links">Streaming Video</a></li>
+                                                                               <li><a href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150765860006129" class="ga-library-links">Comic Books & Graphic Novels</a></li>
+                                                                       </ul>
+                                                              </div>
+                                                              <div class="col-sm-6">
+                                                                       <ul class="link-list">
+                                                                               <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h" target="_blank" class="ga-library-links">Academic Search Complete</a></li>
+                                                                               <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336" target="_blank" class="ga-library-links">US Newspapers</a></li>
+                                                                               <li><a href="http://www.nytimes.com/passes" target="_blank" class="ga-library-links">NY Times Free Pass</a></li>
+                                                                               <li><a href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8147703140006129" class="ga-library-links">Leisure Reading Collection</a></li>
+                                                                       </ul>
+                                                               </div>
+                                                       </div>
+                                               </div>
+                                        </div>
+                                       <div class="panel panel-default hide-body-border">
+                                               <div class="panel-heading show-panel">
+                                                       <span class="panel-title content-panel-title"><h2>Today's Library Hours</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                      {{content_box_29248590}}
+                                               </div>
+                                        </div>
+                                </div>
+                                <div class="col-md-5 col-lg-6">
+                                       <div class="panel panel-default hide-body-border">
+                                               <div class="panel-heading show-panel">
+                                                       <span class="panel-title content-panel-title"><h2>Featured in the Library</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                       {{content_box_25912431}}                             
+                                               </div>
+                                        </div>
+                                </div>
+                        </div>
+                </div>
+                <div class="container">
+                        <div class="row">
+	                        <!-- BEGIN: Page Footer -->
+	                        <div id="orange-line"></div>
+		                <div id="main-blue-footer">
+		                        <div id="lighthouse-logo">
+                                                <a href="https://www.kbcc.cuny.edu"><img src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png" alt="Kingsborough Lighthouse logo" loading="lazy" /></a>
+                                        </div>
+                                        <div class="library-address">
+                                                <div class="whiteahrefs">
+			                                <strong>Robert J. Kibbee Library</strong><br />
+                                                        2001 Oriental Blvd<br />
+                                                        Brooklyn, NY, 11209<br />
+			                                <a href="tel:+1-718-368-5632">718-368-5632</a>
+                                                </div>
+                                                <div class="whiteahrefs">
+                                                        <a href="https://kbcc-cuny.libwizard.com/f/reference">reference.desk@kbcc.cuny.edu</a>
+                                                        <br />
+                                                        <a aria-label="Twitter" href="https://twitter.com/KBCCLibrary" target="_blank"><i aria-hidden="true" class="fab fa-twitter"></i></a>
+                                                        <a aria-label="Instagram" href="https://www.instagram.com/kbcclibrary/" target="_blank"><i aria-hidden="true" class="fab fa-instagram"></i></a>
+                                                        <a aria-label="Goodreads" href="https://www.goodreads.com/user/show/51717966-kingsborough-library" target="_blank"><i aria-hidden="true" class="fab fa-goodreads"></i></a>
+                                                        <a aria-label="TikTok" href="https://www.tiktok.com/@kbcclibrary?lang=en" target="_blank"><i aria-hidden="true" class="fab fa-tiktok"></i></a>
+                                                        <a aria-label= "YouTube" href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos" target="_blank"><i aria-hidden="true" class="fab fa-youtube"></i></a>
+                                                        <a aria-label="Spotify" href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a" target="_blank"><i aria-hidden="true" class="fab fa-spotify"></i></a>
+                                                </div>
+                                        </div>
+                                        <div id="cuny-logo">
+                                                <a href="https://www.cuny.edu" target="_blank"><img src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png" alt="CUNY logo" loading="lazy" /></a>
+                                        </div>
+                                        <div class="whiteahrefs libapps">
+                                                <a href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365">Log in to LibApps</a> | <a href="https://cuny-kb.alma.exlibrisgroup.com/mng/login?auth=SAML">Alma</a>
+                                        </div>
+                                        <div style="height:10px;"></div>
+	                        </div>
+                                <!-- END: Page Footer -->
+                        </div>
+		 </div>
+	</div>
+
+	<div id="s-lib-alert" title="">
+		<div id="s-lib-alert-content"></div>
+	</div>        
+	<div id="s-lib-popover-title" class="hide">
+		<span class="text-info"><strong>title</strong></span> 
+		<button type="button" id="popclose" class="close" onclick="jQuery('.s-lib-popover').popover('hide')">&times;</button> 
+	</div>
+	<div id="s-lib-popover-content" class="hide"><i class="fa fa-refresh fa-spin"></i> Loading...
+		<button class="btn btn-default btn-sm popclose" type="button">Close</button>
+	</div>        
+	<div id="s-lib-scroll-top" title="Back to Top">
+	    <span class="fa-stack fa-lg">
+	        <i class="fa fa-square-o fa-stack-2x"></i>
+	        <i class="fa fa-angle-double-up fa-stack-1x" style="position:relative; bottom:2px;"></i>
+	    </span>
+	</div>
+
+        <!-- LibChat widget script -->
+        <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
+
+        <!-- add Vue scripts -->
+        <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> --> <!-- development -->
+        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>  <!--production -->
+        <script type="text/javascript" src="https://libapps.s3.amazonaws.com/sites/2365/include/main.js"></script>
+
+</body>

groups/home/Vue3-v.1-css.html

@@ -1,372 +1,319 @@
 <style>
 
+:root {
+        --kbccblue: #003466;
+        --kbccorange: #ff4e00;
+        --text: #111;
+}
+
 body {
-        color: #111;
+        color: var(--text);
         overflow-x: hidden;
 }
 
-/* style slide out chat */
+a, a:hover { text-decoration: none; }
 
+/* style slide out chat */
 #lcs_slide_out_button-21944 { font-size: 1.5em; }
 
-/* style alert */
+/* style header */
+#header-div {
+        padding: 30px;
+}
 
+/* style the hamburger menu */
+#hamburger-container { float: left; }
+#hamburger, #hamburger:active { 
+        border: none;
+        outline: none;
+        background-color: #fff;
+        color: var(--kbccblue)
+}
+#hamburger-ul > li > .searchmenu { background-color: #fff; }
+#hamburger-ul { padding: 25px 0; }
+
+/* have bootstrap dropdowns fade in and out */
+.dropdown-menu.fade {
+        display: block;
+        opacity: 0;
+        pointer-events: none;
+}
+.open > .dropdown-menu.fade {
+        pointer-events: auto;
+        opacity: 1;
+}
+.fade {
+        -webkit-transition-duration: 5s; /* Safari */
+        transition-duration: 0.5s;
+}
+.dropdown:hover .dropdown-menu {
+        display: block;
+}
+
+/* style the login at the top right */
+#login-div {
+        float: right;
+        padding: 8px 15px 0 0;
+        color:var(--kbccblue);
+        font-size:1.5em;
+}
+#login-text {
+        display: inline-block;
+        vertical-align: -2px;
+}
+#login-icon {
+        display: inline-block;
+        margin-left: 5px;
+}
+
+/* style alert */
 #corona-alert {
         text-align: center;
         background-color: #faf870;
-        padding: 5px;
+        padding: 5px 50px;
+        cursor: pointer;
 }
-
 #corona-alert-text {
-        color: #111;
+        color: var(--text);
         font-size: 1.5em;
 }
 
-/* style header */
-
-#header-div {
-        padding: 30px;
-        text-align: center;
-}
-
 /* style navbar */
-
+nav.navbar-default.main-nav-container {
-nav.navbar-default.yamm {
         background-color: white;
         border: none;
         font-size: 1.4em;
-        color: #111;
+        color: var(--text);
-        margin-top: 20px;
+        border-radius: 0;
-        border-radius: 0px;
 }
-
+.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
-.navbar-default .navbar-nav >li >a { color: #111; }
+        background-color: #fff;
-
+}
-.faux-card {
+.nav > li > a:hover {
-        margin-left: 16px;
+        outline: none;
+}
+.navbar-default .navbar-nav > li > a { color: var(--text); }
+#navbar-center {
+        display: flex;
+        justify-content: left;
+        float: none;
+}
+.ga-main-navbar { 
+        font-size: 1.3em;
+}
+#dropdownMenu1 { border-radius: 0; }
+a.searchmenu {
+        color: var(--text);
+}
+.highlight-menu-item { padding: 5px; }
+.highlight-menu-item:hover {
+        cursor: pointer;
 }
 
 /* style background image */
 .kbcc-background-image {
         background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.6) 100%), url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg");
         background-position: 50% 71%;
-        padding: 20px 0px;
+        padding: 20px 0;
         border-radius: 5px;
         background-size: cover;
-        margin: -30px 0px 30px 0px;
+        margin: -30px 0 30px 0;
 }
 
 /* style jumbotron */
-
 .onesearch-jumbotron {
         text-align: center;
         margin-top: -40px;
 }
-
 #onesearch-header {
         font-size: 10em;
-        margin-bottom: 0px;
+        margin-bottom: 0;
 }
-
 .zero-margin {
         margin-left: -2px;
         margin-right: -2px;
 }
 
-#dropdownMenu1 { border-radius: 0px; }
+.zero-margin { margin: -2px; }
 
-a.searchmenu { color: #111; }
+/* add flex so that blue box-shadows line up */
-
+#flex-search-form {
-.highlight-menu-item { padding: 2px; }
+        display: flex;
-
+        flex-direction: row;
-.highlight-menu-item:hover {
+        justify-content: center;
-        background-color: #eee;
-        cursor: pointer;
 }
+.inherit-height-from-flex { height: inherit; }
  
-/* style link list */
+/* shadow for the search bar */
-.link-list { font-size: 1.5em; }
+#blue-border1 {
+        box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
+}
+#blue-border2 {
+        box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
+}
+#blue-border3 {
+        box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), 5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
+}
 
 /* style for nav by the jumbotron */
 .nav-divs-by-jumbotron {
         text-align: center;
         padding: 6px;
-        margin: 6px 0px;
+        margin: 6px 0;
         color: white;
-        background-color: #003466;
+        background-color: var(--kbccblue);
         border-radius: 3px;
 }
-
+.nav-divs-by-jumbotron > h2 {
-.nav-divs-by-jumbotron>h2 {
         font-size: 1.5em;
         margin-bottom: 4px;
         margin-top: 4px;
 }
-
-a.no-underline { text-decoration: none; }
-
 .nav-divs-by-jumbotron:hover { background-color: #444; }
-
 #eq_32886 { 
-        background-color: #003466;
+        background-color: var(--kbccblue);
         border: none;
 }
-
+.nav-divs-by-jumbotron:hover > h2 > #eq_32886, #eq_32886:hover { background-color: #444; }
-#eq_32886:hover  { background-color: #444; }
-
-.nav-divs-by-jumbotron:hover > h2 > #eq_32886 { background-color: #444; }
-
 #bookastudyroom { cursor: pointer; }
 
+/* style link list */
+.link-list { font-size: 1.7em; }
+
 /* style the panels with the text content */
-.panel>.show-panel {
+.panel > .show-panel {
-        background-color: #003466;
+        background-color: var(--kbccblue);
         text-align: center;
 }
-
 .hide-body-border {
        border: none;
        box-shadow: none;
 }
-
 .glyphicon-panel-title { font-size: 2em; }
-
 .content-panel-title {
         color: white;
         font-size: 2em;
 }
-
+.content-panel-title > h2 {
-.content-panel-title>h2 {
+        margin: 7px 0;
-        margin: 7px 0px;
         font-size: 1em;
 }
-
 .panel-heading { padding: 2px; }
-}
 
 /* style the gallery */
-
 .slick-slide img {
         padding: 2px;
         max-height: 350px !important;
         object-fit: contain;
-        margin: 0px;
+        margin: 0;
 }
-
 .s-lib-public-side-header { display: none; }
-
 .slick-active { outline: 0; }
 
-/* style the hours */
+/* style to make all imported boxes floating */
-.hours { text-align:center; }
+.s-lib-box-title {display: none;}
+ .s-lg-box {box-shadow: none !important;}
+.s-lib-box .s-lib-box-title {display: none;}
+.s-lib-box {box-shadow: none !important; border: 0 !important;}
 
-.hours-panel-body { padding: 10px 5px 0px 5px; }
+/* style the dropdown menus */
-
+.dropdown-margin { padding: 20px 0; }
-.padding-0 {
+.bigger-fancy-text { font-size: 1.2em; padding: 5px; }
-        padding-left: 4px;
+.bigger-icon { font-size: 1.5em; margin-right: 8px; }
-        padding-right: 4px;
+.caret-text { display: inline-block; color: var(--kbccblue); font-weight: bold; }
-        flex:1 1 auto;
+.fancy-caret { display: inline-block; margin-left: 8px; color: var(--kbccblue); }
-        display: flex;
+.open > a > .fancy-caret { margin-bottom: -4px; vertical-align: -4px; display: inline-block; }
-}
+.open > a > .caret-text { vertical-align: -1px; }
-
-.equal {
-        display: -webkit-box;
-        display: -moz-box;
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-}
-
-.panel { flex:1 0 100%; }
-
-.panel-outline-color {
-        border: solid #555 1px;
-        font-size: 1.2em;
-        line-height: 1.4em;
-}
-
-.vertical-align {
-        display: flex;
-        align-items: center;
-        height: 100%;
-}
-
-.more-link {
-        text-align: center;
-        width: 100%;
-}
-
-/* style the yamm menu */
-.dropdown-margin { margin-right: 50px; }
-
-.bigger-fancy-text { font-size: 1.2em; }
-
-.yamm1 { max-width: 900px; }
-
-.yamm2 { max-width: 675px; }
-
-.yamm3 { max-width: 300px; }
-
-.yamm4 { max-width: 460px; }
-
-#yamm4-margins { margin: -15px 0px; }
 
 /* style footer */
-
 #orange-line {
         height:10px; 
-        background-color: #ff4e00;
+        background-color: var(--kbccorange);
 }
-
 #main-blue-footer {
-        background-color: #003466; 
+        background-color: var(--kbccblue);
         color: white; 
         padding: 30px;
 }
-
 .whiteahrefs a:link, .whiteahrefs a:hover, .whiteahrefs a:visited, .whiteahrefs a:active { 
         color: white;
-        text-decoration:none;
 }
-
 .whiteahrefs a i {
-        margin: 4px 5px 0px 0px;
+        margin: 4px 5px 0 0;
         font-size: 1.5em
 }
-
 .whiteahrefs { margin-top: 10px; }
-
+#lighthouse-logo > a > img { max-width: 150px; }
-#lighthouse-logo > img { max-width: 150px; }
 
 /* media queries */
 
 @media only screen and (min-width: 1px)  {
-
         #library-logo {
                max-width: 100%;
                max-height: 150px;
         }
-
+        nav.navbar-default.main-nav-container { margin-top: -20px; }
-        #kb-cuny-logo {
+        .form-width { width: 40%; }
-               max-width: 100%;
-               max-height: 150px;
-        }
-
-        #corona-alert { margin: -25px 6px 0px 12px; }
-
-        .form-width { width: 220px; }
-
-        .zero-margin { margin: 7px auto; }
-
         .nav-by-jumbotron { margin-top: 40px !important; }
-
         #main-blue-footer { min-height: 450px; }
-
         .library-address { float: left; }
-
         #cuny-logo {
                 float: left;
                 clear: both;
                 margin-top: 10px;
         }
-
         .libapps {
                 float: left; 
                 clear: left;
         }
 }
 
-@media only screen and (min-width: 767px) {
+@media only screen and (max-width: 768px) {
+        #login-text { display: none; }
+        #defineYourSearch { display: none; }
+}
 
-        #corona-alert { margin: -20px 12px 0px 12px; }
+@media only screen and (min-width: 768px) {
-
-        .zero-margin { margin: -2px; }
-
-        .nav-by-jumbotron { margin-top: 0px !important; }
 
+        .nav-by-jumbotron { margin-top: 0 !important; }
         #lighthouse-logo {
                 display: inline-block;
                 float: left;
         }
-
         #main-blue-footer { min-height: 210px; }
-
         .library-address {
                 display: inline-block;
                 margin: -10px 30px;
                 font-size: 1.1em;
         }
-
         #cuny-logo {
                 float: right;
                 clear: none;
-                margin: -10px 0px;
+                margin: -10px 0;
         }
-
         .libapps {
                 float: right; 
                 clear: both;
         }
 }
 
+@media only screen and (min-width: 1px) and (max-width: 992px) {
+        #hamburger-alternative { display: none; }
+}
 
 @media only screen and (min-width: 992px) {
-        
+        #header-div { text-align: center; }
-        #header-div { text-align: left; }
+        #hamburger, #hamburger-ul { display: none; }
-
-        #kb-cuny-logo {
-               max-width: 38%;
-               max-height: 300px;
-               margin-top: -15px;
-        }
-
         #library-logo {
-               float: right;
+               max-width: 100%;
-               max-width: 62%;
+               max-height: 350px;
-               max-height: 300px;
-               margin-top: -15px;
-               margin-right: -32px;
         }
-
+       .form-width { width: 340px; }
-        #corona-alert { margin-top: -10px; }
-
-        nav.navbar-default.yamm { margin-top: 10px; }
-
-       .form-width { width: 350px; }
 }
 
 @media only screen and (min-width: 1200px)  {
-        #kb-cuny-logo { margin-top: 0px; }
+         #library-logo { margin-top: -3px; }
-
-        #library-logo { margin-top: -3px; }
 }
-
-/*!
- * Yamm!3 - Yet another megamenu for Bootstrap 3
- * http://geedmo.github.com/yamm3
- *
- * @geedmo - Licensed under the MIT license
- */
-.yamm .nav,
-.yamm .collapse,
-.yamm .dropup,
-.yamm .dropdown {
-  position: static;
-}
-.yamm .container {
-  position: relative;
-}
-.yamm .dropdown-menu {
-  left: auto;
-}
-.yamm .yamm-content {
-  padding: 20px 30px;
-}
-.yamm .dropdown.yamm-fw .dropdown-menu {
-  left: 0;
-  right: 0;
-}
-/* End of Yamm */
 </style>
 
 <!-- scripts to make the Book a Study Room widget run -->
@@ -377,42 +324,6 @@ jQuery(function(){
 });
 </script>
 
-<!-- the configuration file for the hours widget -->
-<script type="text/javascript" src="//libapps.s3.amazonaws.com/sites/2365/include/hours-babel.js"></script>
-
-<!-- the code for the hours widget -->
-<!-- please forgive the old-timey JS; it is there because we need to support IE10 & IE11 -->
-<script type="text/javascript">
-function hoursFunction() {
-        const h = JSON.parse(hours);
-        const options_weekday = { weekday: 'long' };
-        const options_weekday_short = { weekday: 'short' };
-        const options_date = { month: 'short', day: 'numeric' };
-        for (var i = 0; i < h.length; i++) {
-                let targetDate = new Date(h[i].Date + "T00:00:00.000-05:00");
-                let today = new Date();
-                if (window.innerWidth < 500) {
-                    weekday = targetDate.toLocaleDateString("en-US", options_weekday_short)
-                } else { 
-                    weekday = targetDate.toLocaleDateString("en-US", options_weekday)
-                }
-                if (targetDate.getFullYear() === today.getFullYear() &&
-                    targetDate.getMonth() === today.getMonth() &&
-                    targetDate.getDate() === today.getDate()) {
-                           document.getElementById('hours0').innerHTML = "<p><strong>Today</strong><br />" + targetDate.toLocaleDateString("en-US", options_date) + "<br />" + h[i].Hours + "</p>";
-                           var start = true;
-                           var count = 1;
-                } else if (start === true && count < 3 && h[i].Hours === "Closed" ) {
-                        document.getElementById('hours' + count).innerHTML = "<span style='color:#666;'><p>" + weekday + "<br />" + targetDate.toLocaleDateString("en-US", options_date) + "<br />" + h[i].Hours + "</p></span>";
-                        count++;
-               } else if (start === true && count < 3 && h[i].Hours != "Closed") {
-                        document.getElementById('hours' + count).innerHTML = "<p>" + weekday + "<br />" + targetDate.toLocaleDateString("en-US", options_date) + "<br />" + h[i].Hours + "</p>";
-                        count++;
-               }
-        }
-};
-</script>
-
 <!-- polyfills to make .forEach and .includes work in IE10 and IE11 -->
 <script type="text/javascript">
 if (window.NodeList && !NodeList.prototype.forEach) {
@@ -443,7 +354,7 @@ function customizeSearch(facet) {
         if (facet === "Books") {
                 document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="facet" value="rtype,include,books" type="hidden" class="deleteWithDropdownChange" />');
         } else if (facet === "Articles") {
-                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="mfacet" value="rtype,include,articles,1" type="hidden" class="deleteWithDropdownChange"/><input name="mfacet" value="rtype,include,newspaper_articles,1" type="hidden" class="deleteWithDropdownChange" />');
+                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="mfacet" value="rtype,include,articles,1" type="hidden" class="deleteWithDropdownChange"/><input name="facet" value="tlevel,include,peer_reviewed" type="hidden" class="deleteWithDropdownChange" />');
         } else if (facet === "Videos") {
                 document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="facet" value="rtype,include,videos" type="hidden" class="deleteWithDropdownChange" />');
         } else if (facet === "Journals") {
@@ -451,7 +362,7 @@ function customizeSearch(facet) {
                 document.getElementById("tabSetting").setAttribute("value", "jsearch_slot");
         } else if (facet === "Newspapers") {
                 document.getElementById("formToAppendInputsTo").setAttribute('action', 'https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch');
-        } else if (facet === "Course Reserves") {
+        } else if (facet === "Reserves") {
                 document.getElementById("tabSetting").setAttribute("value", "CourseReserves");
                 document.getElementById("SearchScopeSetting").setAttribute("value", "CourseReserves");
         } else {
@@ -499,24 +410,52 @@ function addPrimoQuery(e) {
 }
 </script>
 
-<!-- run the hours widget and the sessionStorage stuff on load -->
+<!-- If browser is pre-ES6, show a warning-->
 <script>
-window.onload = function () {
+      window.isES6 = false;
-        hoursFunction()
+</script>
-        sessionFunction()
+<script><!-- test ES6 functionality -->
-}
+      // Arrow functions support
+      () => { };
+  
+      // Class support
+      class __ES6FeatureDetectionTest { };
+  
+      // Object initializer property and method shorthands
+      let es6a = true;
+      let es6b = { 
+          es6a,
+          es6c() { return true; },
+          es6d: [1,2,3],
+      };
+  
+      // Object destructuring
+      let { es6c, es6d } = es6b;
+  
+      // Spread operator
+      let es6e = [...es6d, 4];
+
+      // ternary operator
+      let es6f = es6a ? "ternary" : "no ternary";
+
+      // nullish coalescing
+      es6a ??= 10;
+
+      window.isES6 = true;
 </script>
 
-<!-- Load bootstrap accessibility libraries (https://github.com/paypal/bootstrap-accessibility-plugin) -->
+<script type="text/javascript">
-<!--<link rel="stylesheet" type="text/css" href="//libapps.s3.amazonaws.com/sites/2365/include/bootstrap-accessibility.min.css">-->
+window.onload = function () {
-<!--<script type="text/javascript" src="//libapps.s3.amazonaws.com/sites/2365/include/bootstrap-accessibility.min.js"></script>-->
+
+        <!-- run the sessionStorage stuff on load -->
+        sessionFunction();
+
+        <!-- display the error message if feature detection flags old browser -->
+        if (window.isES6 == false) {
+          document.getElementById('obsolete_browser_alert').innerHTML = '<div class="alert alert-danger" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using an old browser.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
+       }
+}
+</script>
 
 <!-- FontAwesome -->
-<script type="text/javascript" src="//libapps.s3.amazonaws.com/sites/2365/include/fa.js"></script>
+<script src="https://kit.fontawesome.com/4c28f38a07.js" crossorigin="anonymous"></script>
-
-<!-- If browser is IE, run an alternate version of lg-public.min.js with no ECMAscript 6 -->
-<script type="text/javascript">
-if (window.document.documentMode) {
-  document.write('<script src="//libapps.s3.amazonaws.com/sites/2365/include/lg-public.min.js"><\/script>');
-}
-</script>

groups/home/Vue3-v.1.html

@@ -0,0 +1,278 @@
+<body class="s-lib-public-body">
+        <!-- Google Tag Manager (noscript) -->
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NXHWQX3"
+        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+        <!-- End Google Tag Manager (noscript) -->
+	<!-- BEGIN: content -->
+        <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
+		<div id="s-lg-index-cols">
+                 <div id="app"><!-- vue app -->
+                         <div class="row">
+                                <div id="obsolete_browser_alert">
+                                </div>
+                                <div class="col-xs-12" id="header-div">
+                                        <div class="dropdown" id="hamburger-container">
+                                                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" aria-label="Hamburger Menu" id="hamburger">
+                                                        <i class="fas fa-bars" style="font-size: 2em;"></i>
+                                                </button>
+                                                <ul class="dropdown-menu fade" aria-labelledby="hamburger" id="hamburger-ul">
+                                                        <li>
+                                                                <a v-for="item in hamburger" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
+                                                                        <menus-component v-bind:item="item"></menus-component>
+                                                                </a>
+                                                       </li>
+                                               </ul>
+                                        </div><!-- end of hamburger container -->
+                                        <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB" id="login-div" aria-labelledby="login-text">
+                                               <div id="login-text">Login</div>
+                                               <div id="login-icon"><i class="fas fa-user"></i></div>
+                                        </a>
+                                        <img id="library-logo" class="image-fail" alt="Kibbee Library logo" src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg" />
+                                         <div id="corona-alert" type="button" data-toggle="modal" data-target=".bs-example-modal-sm">
+                                                 <span id="corona-alert-text">No fines on KBCC books checked out before the pandemic! Just return them to any CUNY Library.</span>
+                                         </div>
+                                 </div><!-- end of header div -->
+                                 <!-- Modal -->
+                                 <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+                                         <div class="modal-dialog modal-sm" role="document">
+                                                 <div class="modal-content" style="border-radius: 3px;">
+                                                         <div class="modal-body">
+                                                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="padding: 5px 5px 12px 12px;"><span aria-hidden="true">&times;</span></button>
+                                                                 <h4 class="modal-title" id="myModalLabel">Before returning books to another CUNY library, please make sure you have updated your vaccine information to Cleared4 or checked  rules for visiting that campus.</h4>
+                                                         </div>
+                                                 </div>
+                                         </div>
+                                 </div><!-- End of modal -->
+                         </div><!-- end of row -->
+                         <div class="row" id="hamburger-alternative">
+                                <div class="col-xs-12">
+                                        <nav class="navbar navbar-default main-nav-container">
+                                                <div class="container-fluid">
+                                                        <ul class="nav navbar-nav" id="navbar-center">
+                                                                <li v-for="(navmenu, navkey) in navListOfMenus" class="dropdown main-nav-dropdown">
+                                                                        <nav-component v-bind:navmenu="navmenu" v-bind:navkey="navkey"></nav-component>
+                                                                </li>
+                                                        </ul>
+                                                </div><!-- end of container-fluid -->
+                                        </nav><!-- end of main-nav-container -->
+                                </div><!-- end of col-xs-12 -->
+                        </div><!--end of row-->
+                </div><!--end of Vue app-->
+                </div>
+                <div class="container" style="margin-top:14px;">
+			<div class="row kbcc-background-image">
+                                 <div class="col-sm-8">
+				         <form class="form-inline onesearch-jumbotron" name="searchPrimoForm1" role="search" method="get" action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search" onsubmit="addPrimoQuery();" enctype="application/x-www-form-urlencoded; charset=utf-8" id="formToAppendInputsTo">
+                                                 <!-- default is "everything"  option suggested from OLS widget builder -->
+                                                 <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
+                                                 <input name="tab" value="Everything" type="hidden" id="tabSetting" />
+                                                 <input name="search_scope" value="IZ_CI_AW" type="hidden" id=SearchScopeSetting />
+                                                 <input name="mode" value="basic" type="hidden" />
+                                                 <input name="highlight" value="true" type="hidden" />
+                                                 <input name="displayMode" value="full" type="hidden" />
+                                                 <input name="bulkSize" value="10" type="hidden" />
+                                                 <input name="dum" value="true" type="hidden" />
+                                                 <input name="displayField" value="all" type="hidden" />
+                                                 <input name="pcAvailabiltyMode" value="false" type="hidden" />
+                                                 <input name="query" id="primoQuery" type="hidden" />
+                                                 <h1 id="onesearch-header">
+                                                         <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
+                                                                 <img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
+                                                         </a>
+                                                 </h1>
+                                                 <div class="form-group" id="flex-search-form">
+                                                         <div class="dropdown input-group zero-margin" id="blue-border1">
+                                                                 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" aria-label="Define Your Search">
+                                                                         <span id="defineYourSearch">Define Your Search </span><span class="caret"></span>
+                                                                 </button>
+                                                                 <ul class="dropdown-menu fade dropdown-margin" aria-labelledby="dropdownMenu1">
+                                                                         <li>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Books')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Books</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Articles')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text"> 
+                                                                                                 <strong>Articles (Peer reviewed)</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Reserves')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Course reserves</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Newspapers')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Newspapers and magazines</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Journals')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                  <strong>Journals</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced" class="searchmenu">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Advanced search</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                         <li>
+                                                                 </ul>
+                                                         </div>
+                                                         <label class="sr-only" for="primoQueryTemp">Search terms</label>
+                                                         <div class="input-group zero-margin form-width" id="blue-border2">
+                                                                 <input class="form-control form-width inherit-height-from-flex" name="queryTemp" id="primoQueryTemp" type="search" value="" placeholder="Enter search term here">
+                                                         </div>
+                                                         <div class="input-group zero-margin" id="blue-border3">
+                                                                 <input type="submit" class="btn btn-default form-control onesearchsubmit inherit-height-from-flex" value="Search" onclick="return addPrimoQuery(event);" />
+                                                         </div>
+                                                 </div>
+                                         </form>
+
+                                 </div>
+                                 <div class="col-sm-4">
+                                         <div class="nav-by-jumbotron">
+                                                 <a class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron" id="bookastudyroom">
+                                                                 <h2><button id="eq_32886">Book A Study Room</button></h2>
+                                                         </div>
+                                                 </a>
+                                                 <a href="https://library.kbcc.cuny.edu/az.php" class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Databases</h2>
+                                                         </div>
+                                                 </a>
+                                                 <a href="https://library.kbcc.cuny.edu/guides" class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Research Guides</h2>
+                                                         </div>
+                                                 </a>
+                                                 <a href="https://kbcc-cuny.libwizard.com/f/feedback" class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Send Us Feedback</h2>
+                                                         </div>
+                                                 </a>
+                                                 <!-- hide chat with a librarian 
+                                                 <a class="chat2" style="cursor: pointer;" onclick="(function() {if (window.document.documentMode || navigator.userAgent.indexOf('Edge/') > -1) { window.location.href = 'http://library.kbcc.cuny.edu/oldbrowser'; return false; } else {window.open('https://kbcc-cuny.libanswers.com/chat/widget/f7d1629a91e178fd0f799322e803b6e7', 'newwindow', 'width=500, height=400, top=100, left=100'); return false;};})()">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Chat with a Librarian!</h2>
+                                                         </div>
+                                                 </a>
+                                                 -->
+                                          </div>
+                                  </div>
+			</div>
+                        <div class="row">
+                                <div class="col-md-7 col-lg-6">
+                                       <div class="panel panel-default hide-body-border">
+                                               <div class="panel-heading show-panel">
+                                                       <span class="panel-title content-panel-title"><h2>Library Links</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                       <div class="row">
+                                                               <div class="col-sm-6">
+                                                                       <ul class="link-list">
+                                                                               <li><a href="https://library.kbcc.cuny.edu/ENGLISH24" class="ga-library-links">How to Use the Library</a></li>
+                                                                               <li><a href="https://library.kbcc.cuny.edu/ebooks" class="ga-library-links">Find eTextbooks and eBooks</a></li>
+                                                                               <li><a href="https://library.kbcc.cuny.edu/video" class="ga-library-links">Streaming Video</a></li>
+                                                                               <li><a href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150765860006129" class="ga-library-links">Comic Books & Graphic Novels</a></li>
+                                                                       </ul>
+                                                              </div>
+                                                              <div class="col-sm-6">
+                                                                       <ul class="link-list">
+                                                                               <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h" target="_blank" class="ga-library-links">Academic Search Complete</a></li>
+                                                                               <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336" target="_blank" class="ga-library-links">US Newspapers</a></li>
+                                                                               <li><a href="http://www.nytimes.com/passes" target="_blank" class="ga-library-links">NY Times Free Pass</a></li>
+                                                                               <li><a href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8147703140006129" class="ga-library-links">Leisure Reading Collection</a></li>
+                                                                       </ul>
+                                                               </div>
+                                                       </div>
+                                               </div>
+                                        </div>
+                                       <div class="panel panel-default hide-body-border">
+                                               <div class="panel-heading show-panel">
+                                                       <span class="panel-title content-panel-title"><h2>Today's Library Hours</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                      {{content_box_29248590}}
+                                               </div>
+                                        </div>
+                                </div>
+                                <div class="col-md-5 col-lg-6">
+                                       <div class="panel panel-default hide-body-border">
+                                               <div class="panel-heading show-panel">
+                                                       <span class="panel-title content-panel-title"><h2>Featured in the Library</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                       {{content_box_25912431}}                             
+                                               </div>
+                                        </div>
+                                </div>
+                        </div>
+                </div>
+                <div class="container">
+                        <div class="row">
+	                        <!-- BEGIN: Page Footer -->
+	                        <div id="orange-line"></div>
+		                <div id="main-blue-footer">
+		                        <div id="lighthouse-logo">
+                                                <a href="https://www.kbcc.cuny.edu"><img src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png" alt="Kingsborough Lighthouse logo" loading="lazy" /></a>
+                                        </div>
+                                        <div class="library-address">
+                                                <div class="whiteahrefs">
+			                                <strong>Robert J. Kibbee Library</strong><br />
+                                                        2001 Oriental Blvd<br />
+                                                        Brooklyn, NY, 11209<br />
+			                                <a href="tel:+1-718-368-5632">718-368-5632</a>
+                                                </div>
+                                                <div class="whiteahrefs">
+                                                        <a href="https://kbcc-cuny.libwizard.com/f/reference">reference.desk@kbcc.cuny.edu</a>
+                                                        <br />
+                                                        <a aria-label="Twitter" href="https://twitter.com/KBCCLibrary" target="_blank"><i aria-hidden="true" class="fab fa-twitter"></i></a>
+                                                        <a aria-label="Instagram" href="https://www.instagram.com/kbcclibrary/" target="_blank"><i aria-hidden="true" class="fab fa-instagram"></i></a>
+                                                        <a aria-label="Goodreads" href="https://www.goodreads.com/user/show/51717966-kingsborough-library" target="_blank"><i aria-hidden="true" class="fab fa-goodreads"></i></a>
+                                                        <a aria-label="TikTok" href="https://www.tiktok.com/@kbcclibrary?lang=en" target="_blank"><i aria-hidden="true" class="fab fa-tiktok"></i></a>
+                                                        <a aria-label= "YouTube" href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos" target="_blank"><i aria-hidden="true" class="fab fa-youtube"></i></a>
+                                                        <a aria-label="Spotify" href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a" target="_blank"><i aria-hidden="true" class="fab fa-spotify"></i></a>
+                                                </div>
+                                        </div>
+                                        <div id="cuny-logo">
+                                                <a href="https://www.cuny.edu" target="_blank"><img src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png" alt="CUNY logo" loading="lazy" /></a>
+                                        </div>
+                                        <div class="whiteahrefs libapps">
+                                                <a href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365">Log in to LibApps</a> | <a href="https://cuny-kb.alma.exlibrisgroup.com/mng/login?auth=SAML">Alma</a>
+                                        </div>
+                                        <div style="height:10px;"></div>
+	                        </div>
+                                <!-- END: Page Footer -->
+                        </div>
+		 </div>
+	</div>
+
+	<div id="s-lib-alert" title="">
+		<div id="s-lib-alert-content"></div>
+	</div>        
+	<div id="s-lib-popover-title" class="hide">
+		<span class="text-info"><strong>title</strong></span> 
+		<button type="button" id="popclose" class="close" onclick="jQuery('.s-lib-popover').popover('hide')">&times;</button> 
+	</div>
+	<div id="s-lib-popover-content" class="hide"><i class="fa fa-refresh fa-spin"></i> Loading...
+		<button class="btn btn-default btn-sm popclose" type="button">Close</button>
+	</div>        
+	<div id="s-lib-scroll-top" title="Back to Top">
+	    <span class="fa-stack fa-lg">
+	        <i class="fa fa-square-o fa-stack-2x"></i>
+	        <i class="fa fa-angle-double-up fa-stack-1x" style="position:relative; bottom:2px;"></i>
+	    </span>
+	</div>
+
+        <!-- LibChat widget script -->
+        <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
+
+        <!-- add Vue scripts -->
+        <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> --><!-- development -->
+        <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script><!--production -->
+        <script type="text/javascript" src="https://libapps.s3.amazonaws.com/sites/2365/include/main2.js"></script>
+
+</body>