@pimaonline/pimaonline-themepack 2.1.5

package/dist/js/scripts.js

@@ -0,0 +1,209 @@
+/// @description Main JS file for PimaOnline Themepack
+/// @dependencies jQuery 3.3.1 or later
+
+window.addEventListener("DOMContentLoaded", function () {
+
+  // Grid 
+  if (document.getElementById("second-column") && document.getElementById("third-column")) {
+    document.getElementsByTagName("body")[0].id = "three-column";
+
+  } else if (document.getElementById("second-column") && !document.getElementById("column-widget")) {
+    document.getElementsByTagName("body")[0].id = "two-column";
+
+  } else if (document.getElementById("column-widget")) {
+    document.getElementsByTagName("body")[0].id = "two-col-widget";
+
+  } else if (document.getElementById("video-wrapper")) {
+    document.getElementsByTagName("body")[0].id = "video-grid";
+
+  } else {
+    document.getElementsByTagName("body")[0].id = "one-column";
+  }
+
+  // JS to add role and aria-label to content-wrapper, second-column, and third-column
+  let cwAttrib = document.querySelector("#content-wrapper");
+  cwAttrib.setAttribute("role", "main");
+
+  if (document.querySelector("#second-column")) {
+    let scAttrib = document.querySelector("#second-column");
+    scAttrib.setAttribute("role", "region");
+    scAttrib.setAttribute("aria-label", "second column");
+  }
+
+  if (document.querySelector("#third-column")) {
+    let tcAttrib = document.querySelector("#third-column");
+    tcAttrib.setAttribute("role", "region");
+    tcAttrib.setAttribute("aria-label", "third column");
+  }
+
+  // Remove role="presentation" attr
+  if (document.querySelectorAll('[role="presentation"]')) {
+    let rolePres = document.querySelectorAll('[role="presentation"]');
+    rolePres.forEach((roleElem) => roleElem.removeAttribute("role"));
+  }
+
+  // Helper JS for Responsive Tables
+  function initResponsiveTables() {
+    var tables = document.querySelectorAll(".display, .display-lg")
+
+    for (var t = 0; t < tables.length; t++) {
+
+      var headertext = [],
+        headers = tables[t].querySelectorAll(".display table th, table.display th, .display-lg table th, table.display-lg th"),
+        tablebody = tables[t].querySelector(".display table tbody, table.display tbody, .display-lg table tbody, table.display-lg tbody");
+
+      for (var i = 0; i < headers.length; i++) {
+        var current = headers[i];
+        headertext.push(current.textContent.replace(/\r?\n|\r/, ""));
+      }
+      for (var y = 0, row; row = tablebody.rows[y]; y++) {
+        for (var j = 0, col; col = row.cells[j]; j++) {
+          col.setAttribute("data-th", headertext[j]);
+        }
+      }
+    }
+  }
+  initResponsiveTables();
+
+  // Remove inline CSS from tables
+  const discardAttributes = (element, ...attributes) =>
+    attributes.forEach((attribute) => element.removeAttribute(attribute));
+
+  document.querySelectorAll("table, thead, tbody, tr, th, td").forEach((elem) => {
+    // Function parameters: discardAttributes(element, attribute1, attribute2, attribute3, ...)
+    discardAttributes(elem, "cellspacing", "cellpadding", "width", "style");
+  });
+
+  // Append scripts-async.js to DOM
+  const addScript = (script) => {
+    let newScript = document.createElement("script");
+    newScript.setAttribute("src", script);
+    
+    document.body.append(newScript);
+  }
+  
+  if(document.querySelector("[onclick]")) {
+    addScript("https://d2l.pima.edu/shared/webdev/course-files/js/jumpTo.js");
+  }
+
+  // Image gallery
+  if(document.querySelector(".image-gallery")) {
+    const modalBox = document.querySelector('.modal-box'),
+    overlay = document.querySelector('.gallery-overlay'),
+    imgBoxes = document.querySelectorAll('.image-box'),
+    modalImg = document.querySelector('.modal-box--image img'),
+    closeImg = document.querySelector('.close-img');
+
+
+    for (let imgBox = 0; imgBox < imgBoxes.length; imgBox++) {
+      imgBoxes[imgBox].onclick = function () {
+        modalBox.classList.remove('invisible');
+
+        let imgSrc = this.querySelector('img').src;
+
+        modalImg.src = imgSrc;
+      }
+    }
+
+    overlay.onclick = function () {
+      modalBox.classList.add('invisible');
+    }
+
+    window.onkeydown = function (esc) {
+      if (esc.keyCode === 27) {
+        modalBox.classList.add('invisible');
+      }
+    }
+
+    closeImg.onclick = function () {
+      modalBox.classList.add("invisible");
+    }
+    
+    const hideGallery = document.querySelector(".hide-gallery"),
+      galleryWrapper = document.querySelector(".gallery-wrapper");
+    
+    hideGallery.addEventListener("click", () => {
+      galleryWrapper.classList.toggle("invisible");
+    });
+  }
+
+  // Vocab list widget
+  const vocabListWidget = document.querySelector("dl.vocab-list");
+  const vocabTerms = document.querySelectorAll("dl.vocab-list dt");
+  const vocabDefs = document.querySelectorAll("dl.vocab-list dd");
+   
+  if (vocabListWidget) {
+    const vocabCloseBtn = document.querySelector("dl.vocab-list button");
+
+    vocabCloseBtn.addEventListener("click", function() {
+      for (let def = 0; def < vocabDefs.length; def++) {
+        vocabDefs[def].removeAttribute("style");
+      }
+      
+      for (let term = 0; term < vocabTerms.length; term++) {
+        vocabTerms[term].removeAttribute("class");
+      }
+    });
+    
+    for (let activeTerm = 0; activeTerm < vocabTerms.length; activeTerm++) {
+      vocabTerms[activeTerm].addEventListener("click", function() {
+        this.classList.toggle("active");
+  
+        let termPanel = this.nextElementSibling;
+        if (termPanel.style.display === "block") { termPanel.removeAttribute("style"); } 
+        else { termPanel.style.display = "block"; }
+      });
+    }
+  }
+
+  // Show/Hide Toggle Button for Accordion
+  $('.toggle-btn').on('click', function () {
+    $(this).next().slideToggle(200);
+  });
+
+  // Show/Hide for Footnotes and Footer
+  $('.toggle-footnotes').on('click', function () {
+    $(this).next().slideToggle(200);
+    $(this).text($(this).text() == '[Hide Footnotes]' ? '[Show Footnotes]' : '[Hide Footnotes]');
+  });
+
+  // Toggle Button's Arrow Right Points Down on Click
+  $('.arrow-right').on('click', function () {
+    $(this).toggleClass('arrow-down');
+  });
+
+  Fancybox
+  $("[data-fancybox]").fancybox({
+    idleTime: false,
+    topRatio: 0.1,
+    helpers: {
+      title: {
+        type: 'inside'
+      },
+    }
+  });
+
+  /*------WIDGET SCRIPTS------ */
+  /* TOOLTIP ------ */
+  // Allows Screen readers to toggle a tooltip on click and to say if the tooltip is collapsed or expanded.
+
+  $(".tooltip").click(function () {
+    $(this).children(".tip-hover").toggle();
+    if ($(this).children(".tip-hover").is(':visible')) {
+      $(this).attr('aria-expanded', 'true');
+      $(this).removeClass('hidden');
+    } else {
+      $(this).attr('aria-expanded', 'false');
+      $(this).addClass('hidden');
+    }
+  });
+
+  var start = 999;
+
+  $('.tooltip').each(function (i) {
+    $(this).css('z-index', start--);
+  });
+
+  $(".tooltip .video-container").parent().css("width", "450px");
+
+}); // end Document-ready

package/dist/js/scripts2.js

@@ -0,0 +1,205 @@
+/// @description Main JS file for PimaOnline Themepack
+/// @dependencies jQuery 3.3.1 or later
+
+// Grid 
+if (document.getElementById("second-column") && document.getElementById("third-column")) {
+  document.getElementsByTagName("body")[0].id = "three-column";
+
+} else if (document.getElementById("second-column") && !document.getElementById("column-widget")) {
+  document.getElementsByTagName("body")[0].id = "two-column";
+
+} else if (document.getElementById("column-widget")) {
+  document.getElementsByTagName("body")[0].id = "two-col-widget";
+
+} else if (document.getElementById("video-wrapper")) {
+  document.getElementsByTagName("body")[0].id = "video-grid";
+
+} else {
+  document.getElementsByTagName("body")[0].id = "one-column";
+}
+
+// JS to add role and aria-label to content-wrapper, second-column, and third-column
+let cwAttrib = document.querySelector("#content-wrapper");
+cwAttrib.setAttribute("role", "main");
+
+if (document.querySelector("#second-column")) {
+  let scAttrib = document.querySelector("#second-column");
+  scAttrib.setAttribute("role", "region");
+  scAttrib.setAttribute("aria-label", "second column");
+}
+
+if (document.querySelector("#third-column")) {
+  let tcAttrib = document.querySelector("#third-column");
+  tcAttrib.setAttribute("role", "region");
+  tcAttrib.setAttribute("aria-label", "third column");
+}
+
+// Remove role="presentation" attr
+if (document.querySelectorAll('[role="presentation"]')) {
+  let rolePres = document.querySelectorAll('[role="presentation"]');
+  rolePres.forEach((roleElem) => roleElem.removeAttribute("role"));
+}
+
+// Helper JS for Responsive Tables
+function initResponsiveTables() {
+  var tables = document.querySelectorAll(".display, .display-lg")
+
+  for (var t = 0; t < tables.length; t++) {
+
+    var headertext = [],
+      headers = tables[t].querySelectorAll(".display table th, table.display th, .display-lg table th, table.display-lg th"),
+      tablebody = tables[t].querySelector(".display table tbody, table.display tbody, .display-lg table tbody, table.display-lg tbody");
+
+    for (var i = 0; i < headers.length; i++) {
+      var current = headers[i];
+      headertext.push(current.textContent.replace(/\r?\n|\r/, ""));
+    }
+    for (var y = 0, row; row = tablebody.rows[y]; y++) {
+      for (var j = 0, col; col = row.cells[j]; j++) {
+        col.setAttribute("data-th", headertext[j]);
+      }
+    }
+  }
+}
+initResponsiveTables();
+
+// Remove inline CSS from tables
+const discardAttributes = (element, ...attributes) =>
+  attributes.forEach((attribute) => element.removeAttribute(attribute));
+
+document.querySelectorAll("table, thead, tbody, tr, th, td").forEach((elem) => {
+  // Function parameters: discardAttributes(element, attribute1, attribute2, attribute3, ...)
+  discardAttributes(elem, "cellspacing", "cellpadding", "width", "style");
+});
+
+// Append scripts-async.js to DOM
+const addScript = (script) => {
+  let newScript = document.createElement("script");
+  newScript.setAttribute("src", script);
+  
+  document.body.append(newScript);
+}
+
+if(document.querySelector("[onclick]")) {
+  addScript("https://d2l.pima.edu/shared/webdev/course-files/js/jumpTo.js");
+}
+
+// Image gallery
+if(document.querySelector(".image-gallery")) {
+  const modalBox = document.querySelector('.modal-box'),
+  overlay = document.querySelector('.gallery-overlay'),
+  imgBoxes = document.querySelectorAll('.image-box'),
+  modalImg = document.querySelector('.modal-box--image img'),
+  closeImg = document.querySelector('.close-img');
+
+
+  for (let imgBox = 0; imgBox < imgBoxes.length; imgBox++) {
+    imgBoxes[imgBox].onclick = function () {
+      modalBox.classList.remove('invisible');
+
+      let imgSrc = this.querySelector('img').src;
+
+      modalImg.src = imgSrc;
+    }
+  }
+
+  overlay.onclick = function () {
+    modalBox.classList.add('invisible');
+  }
+
+  window.onkeydown = function (esc) {
+    if (esc.keyCode === 27) {
+      modalBox.classList.add('invisible');
+    }
+  }
+
+  closeImg.onclick = function () {
+    modalBox.classList.add("invisible");
+  }
+  
+  const hideGallery = document.querySelector(".hide-gallery"),
+    galleryWrapper = document.querySelector(".gallery-wrapper");
+  
+  hideGallery.addEventListener("click", () => {
+    galleryWrapper.classList.toggle("invisible");
+  });
+}
+
+// Vocab list widget
+const vocabListWidget = document.querySelector("dl.vocab-list");
+const vocabTerms = document.querySelectorAll("dl.vocab-list dt");
+const vocabDefs = document.querySelectorAll("dl.vocab-list dd");
+  
+if (vocabListWidget) {
+  const vocabCloseBtn = document.querySelector("dl.vocab-list button");
+
+  vocabCloseBtn.addEventListener("click", function() {
+    for (let def = 0; def < vocabDefs.length; def++) {
+      vocabDefs[def].removeAttribute("style");
+    }
+    
+    for (let term = 0; term < vocabTerms.length; term++) {
+      vocabTerms[term].removeAttribute("class");
+    }
+  });
+  
+  for (let activeTerm = 0; activeTerm < vocabTerms.length; activeTerm++) {
+    vocabTerms[activeTerm].addEventListener("click", function() {
+      this.classList.toggle("active");
+
+      let termPanel = this.nextElementSibling;
+      if (termPanel.style.display === "block") { termPanel.removeAttribute("style"); } 
+      else { termPanel.style.display = "block"; }
+    });
+  }
+}
+
+// Show/Hide Toggle Button for Accordion
+$('.toggle-btn').on('click', function () {
+  $(this).next().slideToggle(200);
+});
+
+// Show/Hide for Footnotes and Footer
+$('.toggle-footnotes').on('click', function () {
+  $(this).next().slideToggle(200);
+  $(this).text($(this).text() == '[Hide Footnotes]' ? '[Show Footnotes]' : '[Hide Footnotes]');
+});
+
+// Toggle Button's Arrow Right Points Down on Click
+$('.arrow-right').on('click', function () {
+  $(this).toggleClass('arrow-down');
+});
+
+Fancybox
+$("[data-fancybox]").fancybox({
+  idleTime: false,
+  topRatio: 0.1,
+  helpers: {
+    title: {
+      type: 'inside'
+    },
+  }
+});
+
+/*------WIDGET SCRIPTS------ */
+/* TOOLTIP ------ */
+// Allows Screen readers to toggle a tooltip on click and to say if the tooltip is collapsed or expanded.
+
+$(".tooltip").click(function () {
+  $(this).children(".tip-hover").toggle();
+  if ($(this).children(".tip-hover").is(':visible')) {
+    $(this).attr('aria-expanded', 'true');
+    $(this).removeClass('hidden');
+  } else {
+    $(this).attr('aria-expanded', 'false');
+    $(this).addClass('hidden');
+  }
+});
+
+var start = 999;
+
+$('.tooltip').each(function (i) {
+  $(this).css('z-index', start--);
+});
+
+$(".tooltip .video-container").parent().css("width", "450px");

package/dist/plugins/fancybox/_notes/dwsync.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8" ?>

package/dist/plugins/fancybox/fancybox-example.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>Fancybox Example</title>
+<meta charset="UTF-8">
+<!--[if lt IE 9]>
+  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+<![endif]-->
+<meta name="viewport" content="initial-scale=1.0, width=device-width" />
+<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Lora:400,700&display=swap" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="https://d2l.pima.edu/shared/webdev/course-files/plugins/fancybox/jquery.fancybox.css" />
+<link rel="stylesheet" type="text/css" href="https://d2l.pima.edu/shared/webdev/course-files/plugins/fancybox/helpers/jquery.fancybox-buttons.css" />
+<link rel="stylesheet" type="text/css" href="https://d2l.pima.edu/shared/webdev/course-files/plugins/fancybox/helpers/jquery.fancybox-thumbs.css" />
+<link rel="stylesheet" type="text/css" href="https://d2l.pima.edu/shared/webdev/course-files/plugins/fancybox/fancybox.css" />
+<link rel="stylesheet" type="text/css" href="https://d2l.pima.edu/shared/webdev/course-files/css/themes/cards/styles.css">
+<link rel="stylesheet" type="text/css" href="css/custom.css">
+<!--Flashcards CSS-->
+<link rel="stylesheet" type="text/css" href="https://d2l.pima.edu/shared/webdev/course-files/plugins/flashcards/css/style.css">
+</head>
+<body>
+<div id="main">
+  <header class="header"> <img src="https://via.placeholder.com/1920x600" alt="decorative image of a woman's hand typing on a computer">
+    <div class="text-container">
+      <h1>Fancybox Example</h1>
+    </div>
+  </header>
+  <div class="content-body">
+    <h4 class="icon-image">Image Gallery</h4>
+    <p>Click image to view:</p>
+    <div class="fancybox"> <a data-fancybox="gallery" rel="gallery1" href="blank.gif" class="fancybox-img-lg" title="Place title here. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim."> <img src="https://via.placeholder.com/512x512" class="fancybox-img-sm" alt="Place alternative tag here."> </a> 
+      <!--===--> 
+      <a data-fancybox="gallery" rel="gallery1" href="blank.gif" class="fancybox-img-lg" title="Place title here."> <img src="https://via.placeholder.com/512x512" class="fancybox-img-sm" alt="Place alternative tag here."> </a> 
+      <!--===--> 
+      <a data-fancybox="gallery" rel="gallery1" href="blank.gif" class="fancybox-img-lg" title="Place title here."> <img src="https://via.placeholder.com/512x512" class="fancybox-img-sm" alt="Place alternative tag here."> </a> 
+      <!--===--> 
+      <a data-fancybox="gallery" rel="gallery1" href="blank.gif" class="fancybox-img-lg" title="Place title here."> <img src="https://via.placeholder.com/512x512" class="fancybox-img-sm" alt="Place alternative tag here."> </a> 
+      <!--===--> 
+      <a data-fancybox="gallery" rel="gallery1" href="blank.gif" class="fancybox-img-lg" title="Place title here."> <img src="https://via.placeholder.com/512x512" class="fancybox-img-sm" alt="Place alternative tag here."> </a> 
+      <!--===--> 
+      <a data-fancybox="gallery" rel="gallery1" href="blank.gif" class="fancybox-img-lg" title="Place title here."> <img src="https://via.placeholder.com/512x512" class="fancybox-img-sm" alt="Place alternative tag here."> </a> 
+      <!--===--> 
+    </div>
+  </div>
+</div>
+<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
+<script type="text/javascript" src="https://d2l.pima.edu/shared/webdev/course-files/js/scripts.js"></script> 
+<script type="text/javascript" src="https://d2l.pima.edu/shared/webdev/course-files/plugins/fancybox/jquery.fancybox.pack.js"></script> 
+<script type="text/javascript" src="https://d2l.pima.edu/shared/webdev/course-files/plugins/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> 
+<script type="text/javascript" src="https://d2l.pima.edu/shared/webdev/course-files/plugins/fancybox/helpers/jquery.fancybox-media.js"></script> 
+<script type="text/javascript" src="https://d2l.pima.edu/shared/webdev/course-files/plugins/fancybox/helpers/jquery.fancybox-thumbs.js"></script>
+</body>
+</html>

package/dist/plugins/fancybox/fancybox.css

@@ -0,0 +1,73 @@
+@charset "UTF-8";
+/* CSS Document */
+.fancybox {
+	margin: auto;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	align-content: stretch;
+	justify-content: space-between;
+}
+
+.fancybox img.fancybox-img-sm {
+	margin-bottom: 3px !important;
+	max-width: 100%;
+}
+
+@media screen and (min-width:730px) {
+	.fancybox img.fancybox-img-sm {
+		max-width: 100%;
+	}
+}
+
+@media screen and (min-width:995px) {
+	.fancybox img.fancybox-img-sm {
+		max-width: 85px;
+	}
+}
+
+@media screen and (min-width:1160px) {
+	.fancybox img.fancybox-img-sm {
+    max-width: 99px;
+	}
+}
+
+img.fancybox-img-sm:hover {
+	-webkit-filter: brightness(80%);
+	-webkit-transition: all .5s ease;
+	-moz-transition: all .5s ease;
+	-o-transition: all .5s ease;
+	-ms-transition: all .5s ease;
+	transition: all .5s ease;
+}
+
+.fancybox-skin {
+	background: #ffffff;
+	border-radius: 0;
+}
+
+.fancybox a {
+	text-decoration: none !important;
+}
+
+/* this sets styles for the text above thumbnails "image gallery:" */
+.fancybox p {
+	color: #232323;
+	font-size: .855em;
+	font-style: italic;
+	margin-bottom: 2px;
+}
+
+.fancybox-title-float-wrap .child {
+	border-radius: 0;
+}
+
+.fancybox-title {
+	color: #000000;
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 16px;	
+	line-height: 1.355;
+	pointer-events: all;
+	text-align: left;
+}

package/dist/plugins/fancybox/helpers/_notes/dwsync.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8" ?>

package/dist/plugins/fancybox/helpers/jquery.fancybox-buttons.css

@@ -0,0 +1,97 @@
+#fancybox-buttons {
+	position: fixed;
+	left: 0;
+	width: 100%;
+	z-index: 8050;
+}
+
+#fancybox-buttons.top {
+	top: 10px;
+}
+
+#fancybox-buttons.bottom {
+	bottom: 10px;
+}
+
+#fancybox-buttons ul {
+	display: block;
+	width: 166px;
+	height: 30px;
+	margin: 0 auto;
+	padding: 0;
+	list-style: none;
+	border: 1px solid #111;
+	border-radius: 3px;
+	-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
+	   -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
+	        box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
+	background: rgb(50,50,50);
+	background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));
+	background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
+	background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
+	background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
+	background: linear-gradient(to bottom, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
+}
+
+#fancybox-buttons ul li {
+	float: left;
+	margin: 0;
+	padding: 0;
+}
+
+#fancybox-buttons a {
+	display: block;
+	width: 30px;
+	height: 30px;
+	text-indent: -9999px;
+	background-color: transparent;
+	background-image: url('../../../cards/source/helpers/fancybox_buttons.png');
+	background-repeat: no-repeat;
+	outline: none;
+	opacity: 0.8;
+}
+
+#fancybox-buttons a:hover {
+	opacity: 1;
+}
+
+#fancybox-buttons a.btnPrev {
+	background-position: 5px 0;
+}
+
+#fancybox-buttons a.btnNext {
+	background-position: -33px 0;
+	border-right: 1px solid #3e3e3e;
+}
+
+#fancybox-buttons a.btnPlay {
+	background-position: 0 -30px;
+}
+
+#fancybox-buttons a.btnPlayOn {
+	background-position: -30px -30px;
+}
+
+#fancybox-buttons a.btnToggle {
+	background-position: 3px -60px;
+	border-left: 1px solid #111;
+	border-right: 1px solid #3e3e3e;
+	width: 35px
+}
+
+#fancybox-buttons a.btnToggleOn {
+	background-position: -27px -60px;
+}
+
+#fancybox-buttons a.btnClose {
+	border-left: 1px solid #111;
+	width: 35px;
+	background-position: -56px 0px;
+}
+
+#fancybox-buttons a.btnDisabled {
+	opacity : 0.4;
+	cursor: default;
+}