diff --git a/hmml_to_html/mock_keys.html b/hmml_to_html/mock_keys.html index 75d3afb..4b9cc4a 100644 --- a/hmml_to_html/mock_keys.html +++ b/hmml_to_html/mock_keys.html @@ -134,6 +134,70 @@ +
+ ? +
+ ?

Keyboard Navigation

+ +

Global Keys

+ W, A, P / S, D, N Jump to previous / next marker
+ V Reset filter z Toggle filter mode between "inclusive" and "exclusive" + +

Menu toggling

+ q Quotes + r References + f Filter + c Credits + +

Movement

+
+
+
+ a +
+
+ w
+ s +
+
+ d +
+
+ / +
+
+ ← +
+
+ ↑
+ ↓ +
+
+ → +
+
+ / +
+ h + j + k + l +
+
+
+

Quotes and References Menus

+ EnterJump to timecode
+

References and Credits Menus

+ oOpen URL (in new tab) + +

Filter Menu

+ x, SpaceToggle category and focus next
+ X, ShiftSpaceToggle category and focus previous
+ vInvert topics / media as per focus +

Credits Menu

+ Enter, oOpen URL (in new tab)
+
+
@@ -203,498 +267,109 @@
-
-

Temporary Keybinding Documentation:

- -

Menu toggling:
- q = quotes
- r = references
- f = filter
- c = credits
- -

Global Keys:
- W,A,P / S,D,N = jump to previous / next marker
- V = Reset filter
- z = Toggle filter mode between "inclusive" and "exclusive"
-

- -

Quote menu:
- w,↑ / s,↓ = focus previous / next quote
- Enter = jump to marker
-

- -

Reference menu:
- w,↑ / s,↓ = focus previous / next reference
- a,← / d,→ = focus previous / next identifier of current reference
- Enter = jump to marker
- o = follow link to current reference
-

- -

Filter menu:
- w,↑ / s,↓ = focus previous / next category
- a,← / d,→ = move left / right between topics and media
- v = invert topics / media, as per focus
- x,Space = toggle currently focused category and focus next category
- X,Shift-Space = toggle currently focused category and focus previous category
-

- -

Credits menu:
- w,↑ / s,↓ = focus previous / next credit
- a,← / d,→ = move left / right between homepage / support urls
- Enter / o = follow currently focused link
-

-
diff --git a/hmml_to_html/player.js b/hmml_to_html/player.js index 6b353c3..8e4d65f 100644 --- a/hmml_to_html/player.js +++ b/hmml_to_html/player.js @@ -311,3 +311,795 @@ Player.prototype.onYoutubeReady = function() { }; Player.youtubePlayerCount = 0; + +// NOTE(matt): Hereafter is my stuff. Beware! + +function toggleMenuVisibility(element) { + if(element.classList.contains("visible")) + { + element.classList.remove("visible"); + element.parentNode.classList.remove("visible"); + focusedElement.classList.remove("focused"); + focusedElement = null; + if(focusedIdentifier) + { + focusedIdentifier.classList.remove("focused"); + focusedIdentifier = null; + } + } + else + { + for(menuIndex in menuState) + { + menuState[menuIndex].classList.remove("visible"); + menuState[menuIndex].parentNode.classList.remove("visible"); + if(focusedElement) + { + focusedElement.classList.remove("focused"); + } + if(focusedIdentifier) + { + focusedIdentifier.classList.remove("focused"); + } + } + element.classList.add("visible"); + element.parentNode.classList.add("visible"); + + if(element.classList.contains("quotes_container")) + { + if(!lastFocusedQuote) + { + lastFocusedQuote = element.querySelectorAll(".ref")[0]; + } + focusedElement = lastFocusedQuote; + focusedElement.classList.add("focused"); + } + else if(element.classList.contains("references_container")) + { + if(!lastFocusedReference || !lastFocusedIdentifier) + { + lastFocusedReference = element.querySelectorAll(".ref")[0]; + lastFocusedIdentifier = lastFocusedReference.querySelector(".ref_indices").firstElementChild; + } + focusedElement = lastFocusedReference; + focusedElement.classList.add("focused"); + focusedIdentifier = lastFocusedIdentifier; + focusedIdentifier.classList.add("focused"); + } + else if(element.classList.contains("filter_container")) + { + if(!lastFocusedCategory) + { + lastFocusedCategory = element.querySelectorAll(".filter_content")[0]; + } + focusedElement = lastFocusedCategory; + focusedElement.classList.add("focused"); + } + else if(element.classList.contains("credits_container")) + { + if(!lastFocusedCreditItem) + { + if(element.querySelectorAll(".credit .support")[0]) + { + lastFocusedCreditItem = element.querySelectorAll(".credit .support")[0]; + } + else + { + lastFocusedCreditItem = element.querySelectorAll(".credit .person")[0]; + } + } + focusedElement = lastFocusedCreditItem; + focusedElement.classList.add("focused"); + } + } +} + +function handleKey(key) { + var gotKey = true; + switch (key) { + case "q": { + if(quotesMenu) + { + toggleMenuVisibility(quotesMenu) + } + } break; + case "r": { + if(referencesMenu) + { + toggleMenuVisibility(referencesMenu) + } + } break; + case "f": { + if(filterMenu) + { + toggleMenuVisibility(filterMenu) + } + } break; + case "c": { + if(creditsMenu) + { + toggleMenuVisibility(creditsMenu) + } + } break; + + case "Enter": { + if(focusedElement) + { + if(focusedElement.parentNode.classList.contains("quotes_container")) + { + var time = focusedElement.querySelector(".timecode").getAttribute("data-timestamp"); + player.setTime(parseInt(time, 10)); + player.play(); + } + else if(focusedElement.parentNode.classList.contains("references_container")) + { + var time = focusedIdentifier.getAttribute("data-timestamp"); + player.setTime(parseInt(time, 10)); + player.play(); + } + else if(focusedElement.parentNode.classList.contains("credit")) + { + if(focusedElement.hasAttribute) + { + var url = focusedElement.getAttribute("href"); + window.open(url, "_blank"); + } + } + } + else + { + console.log("TODO(matt): Implement me, perhaps?\n"); + } + } break; + + case "o": { + if(focusedElement) + { + if(focusedElement.parentNode.classList.contains("references_container")) + { + var url = focusedElement.getAttribute("href"); + window.open(url, "_blank"); + } + else if(focusedElement.parentNode.classList.contains("credit")) + { + if(focusedElement.hasAttribute("href")) + { + var url = focusedElement.getAttribute("href"); + window.open(url, "_blank"); + } + } + } + } break; + + case "w": case "k": case "ArrowUp": { + if(focusedElement) + { + if(focusedElement.parentNode.classList.contains("quotes_container")) + { + if(focusedElement.previousElementSibling) + { + focusedElement.classList.remove("focused"); + + lastFocusedQuote = focusedElement.previousElementSibling; + focusedElement = lastFocusedQuote; + focusedElement.classList.add("focused"); + } + } + else if(focusedElement.parentNode.classList.contains("references_container")) + { + if(focusedElement.previousElementSibling) + { + focusedElement.classList.remove("focused"); + focusedIdentifier.classList.remove("focused"); + + lastFocusedReference = focusedElement.previousElementSibling; + focusedElement = lastFocusedReference; + focusedElement.classList.add("focused"); + + lastFocusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild; + focusedIdentifier = lastFocusedIdentifier; + focusedIdentifier.classList.add("focused"); + } + } + else if(focusedElement.parentNode.parentNode.classList.contains("filters")) + { + if(focusedElement.previousElementSibling && + focusedElement.previousElementSibling.classList.contains("filter_content")) + { + focusedElement.classList.remove("focused"); + + lastFocusedCategory = focusedElement.previousElementSibling; + focusedElement = lastFocusedCategory; + focusedElement.classList.add("focused"); + } + } + else if(focusedElement.parentNode.classList.contains("credit")) + { + if(focusedElement.parentNode.previousElementSibling) + { + focusedElement.classList.remove("focused"); + if(focusedElement.parentNode.previousElementSibling.querySelector(".support") && + focusedElement.classList.contains("support")) + { + lastFocusedCreditItem = focusedElement.parentNode.previousElementSibling.querySelector(".support"); + focusedElement = lastFocusedCreditItem; + } + else + { + lastFocusedCreditItem = focusedElement.parentNode.previousElementSibling.querySelector(".person"); + focusedElement = lastFocusedCreditItem; + } + focusedElement.classList.add("focused"); + } + } + } + } break; + + case "s": case "j": case "ArrowDown": { + if(focusedElement) + { + if(focusedElement.parentNode.classList.contains("quotes_container")) + { + if(focusedElement.nextElementSibling) + { + focusedElement.classList.remove("focused"); + + lastFocusedQuote = focusedElement.nextElementSibling; + focusedElement = lastFocusedQuote; + focusedElement.classList.add("focused"); + } + } + else if(focusedElement.parentNode.classList.contains("references_container")) + { + if(focusedElement.nextElementSibling) + { + focusedElement.classList.remove("focused"); + focusedIdentifier.classList.remove("focused"); + + lastFocusedReference = focusedElement.nextElementSibling; + focusedElement = lastFocusedReference; + focusedElement.classList.add("focused"); + + lastFocusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild; + focusedIdentifier = lastFocusedIdentifier; + focusedIdentifier.classList.add("focused"); + } + } + else if(focusedElement.parentNode.parentNode.classList.contains("filters")) + { + if(focusedElement.nextElementSibling && + focusedElement.nextElementSibling.classList.contains("filter_content")) + { + focusedElement.classList.remove("focused"); + + lastFocusedCategory = focusedElement.nextElementSibling; + focusedElement = lastFocusedCategory; + focusedElement.classList.add("focused"); + } + } + else if(focusedElement.parentNode.classList.contains("credit")) + { + if(focusedElement.parentNode.nextElementSibling) + { + focusedElement.classList.remove("focused"); + if(focusedElement.parentNode.nextElementSibling.querySelector(".support") && + focusedElement.classList.contains("support")) + { + lastFocusedCreditItem = focusedElement.parentNode.nextElementSibling.querySelector(".support"); + focusedElement = lastFocusedCreditItem; + } + else + { + lastFocusedCreditItem = focusedElement.parentNode.nextElementSibling.querySelector(".person"); + focusedElement = lastFocusedCreditItem; + } + focusedElement.classList.add("focused"); + } + } + } + } break; + + case "a": case "h": case "ArrowLeft": { + if(focusedElement) + { + if(focusedElement.parentNode.classList.contains("references_container")) + { + if(focusedIdentifier.previousElementSibling) + { + focusedIdentifier.classList.remove("focused"); + + lastFocusedIdentifier = focusedIdentifier.previousElementSibling; + focusedIdentifier = lastFocusedIdentifier; + focusedIdentifier.classList.add("focused"); + } + } + else if(focusedElement.classList.contains("filter_content")) + { + if(focusedElement.parentNode.classList.contains("filter_media") && + focusedElement.parentNode.previousElementSibling) + { + focusedElement.classList.remove("focused"); + lastFocusedMedium = focusedElement; + + if(!lastFocusedTopic) + { + lastFocusedTopic = focusedElement.parentNode.previousElementSibling.children[1]; + } + lastFocusedCategory = lastFocusedTopic; + focusedElement = lastFocusedCategory; + focusedElement.classList.add("focused"); + } + } + else if(focusedElement.parentNode.classList.contains("credit")) + { + if(focusedElement.classList.contains("support")) + { + focusedElement.classList.remove("focused"); + + lastFocusedCreditItem = focusedElement.previousElementSibling; + focusedElement = lastFocusedCreditItem; + focusedElement.classList.add("focused"); + } + } + } + } break; + + case "d": case "l": case "ArrowRight": { + if(focusedElement) + { + if(focusedElement.parentNode.classList.contains("references_container")) + { + if(focusedIdentifier.nextElementSibling) + { + focusedIdentifier.classList.remove("focused"); + + lastFocusedIdentifier = focusedIdentifier.nextElementSibling; + focusedIdentifier = lastFocusedIdentifier; + focusedIdentifier.classList.add("focused"); + } + } + else if(focusedElement.classList.contains("filter_content")) + { + if(focusedElement.parentNode.classList.contains("filter_topics") && + focusedElement.parentNode.nextElementSibling) + { + focusedElement.classList.remove("focused"); + lastFocusedTopic = focusedElement; + + if(!lastFocusedMedium) + { + lastFocusedMedium = focusedElement.parentNode.nextElementSibling.children[1]; + } + lastFocusedCategory = lastFocusedMedium; + focusedElement = lastFocusedCategory; + focusedElement.classList.add("focused"); + } + } + else if(focusedElement.parentNode.classList.contains("credit")) + { + if(focusedElement.classList.contains("person") && + focusedElement.nextElementSibling) + { + focusedElement.classList.remove("focused"); + + lastFocusedCreditItem = focusedElement.nextElementSibling; + focusedElement = lastFocusedCreditItem; + focusedElement.classList.add("focused"); + } + } + } + } break; + + case "x": case " ": { + if(focusedElement && focusedElement.classList.contains("filter_content")) + { + filterItemToggle(focusedElement); + if(focusedElement.nextElementSibling && + focusedElement.nextElementSibling.classList.contains("filter_content")) + { + focusedElement.classList.remove("focused"); + focusedElement = focusedElement.nextElementSibling; + focusedElement.classList.add("focused"); + } + } + } break; + + case "X": case "capitalSpace": { + if(focusedElement && focusedElement.classList.contains("filter_content")) + { + filterItemToggle(focusedElement); + if(focusedElement.previousElementSibling && + focusedElement.previousElementSibling.classList.contains("filter_content")) + { + focusedElement.classList.remove("focused"); + focusedElement = focusedElement.previousElementSibling; + focusedElement.classList.add("focused"); + } + } + } break; + + case "z": { + toggleFilterMode(); + } break; + + case "v": { + if(focusedElement && focusedElement.classList.contains("filter_content")) + { + invertFilter(focusedElement) + } + } break; + + case "V": { + resetFilter(); + } break; + + case "?": { + helpDocumentation.classList.toggle("visible"); + } + + case 'N': + case 'D': + case 'S': { + player.jumpToNextMarker(); + } break; + + case 'P': + case 'A': + case 'W': { + player.jumpToPrevMarker(); + } break; + default: { + gotKey = false; + } break; + } + return gotKey; +} + +function applyFilter() { + if(filterMode == "exclusive") + { + for(var i = 0; i < testMarkers.length; ++i) + { + var testCategories = testMarkers[i].classList; + for(var j = 0; j < testCategories.length; ++j) + { + if((testCategories[j].startsWith("off_")) && !testMarkers[i].classList.contains("skip")) + { + testMarkers[i].classList.add("skip"); + } + } + } + } + else + { + for(var i = 0; i < testMarkers.length; ++i) + { + var testCategories = testMarkers[i].classList; + for(var j = 0; j < testCategories.length; ++j) + { + if((testCategories[j] in filterState || testCategories[j].startsWith("cat_")) && testMarkers[i].classList.contains("skip")) + { + testMarkers[i].classList.remove("skip"); + } + } + } + } +} + +function toggleFilterMode() { + if(filterMode == "inclusive") + { + filterModeElement.classList.remove("inclusive"); + filterModeElement.classList.add("exclusive"); + filterMode = "exclusive"; + } + else + { + filterModeElement.classList.remove("exclusive"); + filterModeElement.classList.add("inclusive"); + filterMode = "inclusive"; + } + applyFilter(); +} + +function filterItemToggle(filterItem) { + var selectedCategory = filterItem.classList[1]; + filterState[selectedCategory].off = !filterState[selectedCategory].off; + + if(filterState[selectedCategory].off) + { + filterItem.classList.add("off"); + var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory); + for(var j = 0; j < testMarkers.length; ++j) + { + if(filterState[selectedCategory].type == "topic") + { + testMarkers[j].classList.remove("cat_" + selectedCategory); + testMarkers[j].classList.add("off_" + selectedCategory); + var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory); + for(var k = 0; k < markerCategories.length; ++k) + { + if(markerCategories[k].classList.contains(selectedCategory)) + { + markerCategories[k].classList.add("off"); + } + } + } + else + { + testMarkers[j].classList.remove(selectedCategory); + testMarkers[j].classList.add("off_" + selectedCategory); + } + + Skipping = 1; + if(filterMode == "exclusive") + { + testMarkers[j].classList.add("skip"); + } + else + { + var markerClasses = testMarkers[j].classList; + for(var k = 0; k < markerClasses.length; ++k) + { + if(markerClasses[k] in filterState || markerClasses[k].replace(/^cat_/, "") in filterState) + { + Skipping = 0; + } + } + if(Skipping) + { + testMarkers[j].classList.add("skip"); + } + } + + } + } + else + { + filterItem.classList.remove("off"); + var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory); + for(var j = 0; j < testMarkers.length; ++j) + { + if(filterState[selectedCategory].type == "topic") + { + testMarkers[j].classList.remove("off_" + selectedCategory); + testMarkers[j].classList.add("cat_" + selectedCategory); + var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory); + for(var k = 0; k < markerCategories.length; ++k) + { + if(markerCategories[k].classList.contains(selectedCategory)) + { + markerCategories[k].classList.remove("off"); + } + } + } + else + { + testMarkers[j].classList.remove("off_" + selectedCategory); + testMarkers[j].classList.add(selectedCategory); + } + + Skipping = 0; + if(filterMode == "inclusive") + { + testMarkers[j].classList.remove("skip"); + } + else + { + var markerClasses = testMarkers[j].classList; + for(var k = 0; k < markerClasses.length; ++k) + { + if(markerClasses[k].startsWith("off_")) + { + Skipping = 1; + } + } + if(!Skipping) + { + testMarkers[j].classList.remove("skip"); + } + } + } + } +} + +function resetFilter() { + for(i in filterItems) + { + if(filterItems[i].classList && filterItems[i].classList.contains("off")) + { + filterItemToggle(filterItems[i]); + } + } + if(filterMode == "exclusive") + { + toggleFilterMode(); + } +} + +function invertFilter(focusedElement) { + var siblings = focusedElement.parentNode.querySelectorAll(".filter_content"); + for(i in siblings) + { + if(siblings[i].classList) + { + filterItemToggle(siblings[i]); + } + } +} + +function resetFade() { + filter.classList.remove("responsible"); + filter.querySelector(".filter_mode").classList.remove("responsible"); + var responsibleCategories = filter.querySelectorAll(".filter_content.responsible"); + for(var i = 0; i < responsibleCategories.length; ++i) + { + responsibleCategories[i].classList.remove("responsible"); + } +} + +function onRefChanged(ref, element) { + if(element.classList.contains("skip")) + { + if(!filter.classList.contains("responsible")) + { + filter.classList.add("responsible"); + } + + for(var selector = 0; selector < element.classList.length; ++selector) + { + if(element.classList[selector].startsWith("off_")) + { + if(!filter.querySelector(".filter_content." + element.classList[selector].replace(/^off_/, "")).classList.contains("responsible")) + { + filter.querySelector(".filter_content." + element.classList[selector].replace(/^off_/, "")).classList.add("responsible"); + } + } + if((element.classList[selector].startsWith("cat_") || element.classList[selector] in filterState)) + { + if(!filter.querySelector(".filter_mode").classList.add("responsible")) + { + filter.querySelector(".filter_mode").classList.add("responsible"); + } + } + setTimeout(resetFade, 8000); + } + player.jumpToNextMarker(); + return; + } + + for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex) + { + var SetMenu = 0; + if (ref !== undefined && ref !== null) { + var refElements = sourceMenus[MenuIndex].querySelectorAll(".refs .ref"); + var refs = ref.split(","); + + for (var i = 0; i < refElements.length; ++i) { + if (refs.includes(refElements[i].getAttribute("data-id"))) { + refElements[i].classList.add("current"); + SetMenu = 1; + } else { + refElements[i].classList.remove("current"); + } + } + if(SetMenu) { + sourceMenus[MenuIndex].classList.add("current"); + } else { + sourceMenus[MenuIndex].classList.remove("current"); + } + + } else { + sourceMenus[MenuIndex].classList.remove("current"); + var refs = sourceMenus[MenuIndex].querySelectorAll(".refs .ref"); + for (var i = 0; i < refs.length; ++i) { + refs[i].classList.remove("current"); + } + } + } +} + +function navigateFilter(filterItem) { + if(filterItem != lastFocusedCategory) + { + lastFocusedCategory.classList.remove("focused"); + if(filterItem.parentNode.classList.contains("filter_topics")) + { + lastFocusedTopic = filterItem; + lastFocusedCategory = lastFocusedTopic; + } + else + { + lastFocusedMedium = filterItem; + lastFocusedCategory = lastFocusedMedium; + } + focusedElement = lastFocusedCategory; + focusedElement.classList.add("focused"); + } +} + +function mouseOverQuotes(quote) { + if(focusedElement && quote != lastFocusedQuote) + { + focusedElement.classList.remove("focused"); + lastFocusedQuote = quote; + focusedElement = lastFocusedQuote; + focusedElement.classList.add("focused"); + } +} + +function mouseOverReferences(reference) { + if(focusedElement && reference != lastFocusedReference) + { + focusedElement.classList.remove("focused") + lastFocusedReference = reference; + } + focusedElement = lastFocusedReference; + focusedElement.classList.add("focused"); + + var ourIdentifiers = reference.querySelector(".ref_indices").children; + weWereLastFocused = false; + for(var k = 0; k < ourIdentifiers.length; ++k) + { + if(ourIdentifiers[k] == lastFocusedIdentifier) + { + weWereLastFocused = true; + } + } + if(!weWereLastFocused) + { + lastFocusedIdentifier.classList.remove("focused"); + lastFocusedIdentifier = reference.querySelector(".ref_indices").firstElementChild; + } + focusedIdentifer = lastFocusedIdentifier; + focusedIdentifer.classList.add("focused"); + + for(var l = 0; l < ourIdentifiers.length; ++l) + { + ourIdentifiers[l].addEventListener("mouseenter", function(ev) { + if(this != lastFocusedIdentifier) + { + lastFocusedIdentifier.classList.remove("focused"); + lastFocusedIdentifier = this; + lastFocusedIdentifier.classList.add("focused"); + } + }) + } +} + +function mouseSkipToTimecode(player, time, ev) +{ + player.setTime(parseInt(time, 10)); + player.play(); + ev.preventDefault(); + ev.stopPropagation(); + return false; +} + +function handleMouseOverMenu(menu, eventType) +{ + if(!menu.classList.contains("visible" && eventType == "mouseenter") || + menu.classList.contains("visible" && eventType == "mouseleave")) + { + if(menu.classList.contains("quotes")) + { + toggleMenuVisibility(quotesMenu); + } + else if(menu.classList.contains("references")) + { + toggleMenuVisibility(referencesMenu); + } + else if(menu.classList.contains("filter")) + { + toggleMenuVisibility(filterMenu); + } + else if(menu.classList.contains("credits")) + { + toggleMenuVisibility(creditsMenu); + } + else if(menu.classList.contains("help")) + { + helpDocumentation.classList.toggle("visible"); + } + } +} diff --git a/hmml_to_html/style.css b/hmml_to_html/style.css index 8f3b19d..926e2d4 100644 --- a/hmml_to_html/style.css +++ b/hmml_to_html/style.css @@ -39,9 +39,90 @@ animation-iteration-count: 1; } +.help_key { + font-family: Inconsolata; + font-size: 16px; + border: 1px solid; + display: inline-block; + background-color: #111; /* Per project */ + border-radius: 4px; + height: 16px; + width: 16px; + padding: 4px; + line-height: 16px; + margin: 2px; +} + +.key_block { + display: inline-flex; + align-items: flex-end; + flex-direction: row; + margin-right: 4px; +} + +.help_text { + margin: 0 8px 0 2px; +} + +.help_container h1 { + display: inline; + margin-left: 4px; +} + +.help_container h1:after { + content: "\a"; +} + + +.help_container h2 { + font-size: 16px; + margin-bottom: 8px; +} + +.help_paragraph { + display: inline-flex; + align-items: center; +} + +.title > .help { + cursor: default; + border: 1px solid; + border-radius: 4px; + height: 6px; + padding: 4px; + width: 6px; + margin: 2px; + font-size: 12px; + font-weight: bold; + line-height: 6px; + text-align: center; +} + +.help_grid { + display: inline-flex; + flex-direction: column; +} + +.help_container { + background-color: black; /* Per project */ + color: #EEE; /* Per project */ + display: none; + font-weight: normal; + line-height: 12px; + opacity: 0.9; + padding: 8px; + position: fixed; + right: 612px; + top: 42px; +} + +.help_container.visible { + display: block; +} + .title > .menu .refs, .title > .menu .filter_container, -.title > .menu .credits_container { +.title > .menu .credits_container{ border: 1px solid; border-top: none; display: none;