{"id":"7DdbMzk6FG","url":"https://pastebin.ca/7DdbMzk6FG","raw_url":"https://raw.anybin.ca/7DdbMzk6FG","visibility":"public","access":"public","created_at":1791242821067,"expires_at":null,"fetch_limit":null,"fetches_used":0,"reads_remaining":null,"size_bytes":19142,"syntax_hint":"html","title":"LA Noire Toyhouse Folder Theme","filename":"LA-Noire-Toyhouse-Folder-Theme","change_note":null,"cipher":null,"cipher_meta":null,"parent_id":null,"root_id":"7DdbMzk6FG","version":1,"owner_id":"06GGWKRYT0VRAVBBVE382ERB15","recipient_id":null,"body":"<!-- L.A. NOIRE THEME -->\n\n<!-- FOLDER TAB STYLING -->\n<style>\n  #noirTabs.nav-tabs {\n    border-bottom: 2px solid #8b0000;\n  }\n  /* Default styling for all inactive tabs */\n  #noirTabs .nav-link {\n    background-color: #1a0f0f !important;\n    color: #b87979 !important;\n    border: 1px solid #4a1515 !important;\n    border-bottom: none !important;\n    border-top-left-radius: 6px;\n    border-top-right-radius: 6px;\n    letter-spacing: 1px;\n    font-size: 0.85rem;\n    font-family: 'Courier New', Courier, monospace;\n    margin-right: 4px;\n    transition: all 0.2s ease-in-out;\n  }\n  #noirTabs .nav-link:hover {\n    color: #fff !important;\n    background-color: #2b1212 !important;\n    border-color: #6b1d1d !important;\n  }\n  /* Active tab styling matching your preferred dark grey & gold */\n  #noirTabs .nav-link.active {\n    background-color: #0b0b0b !important;\n    color: #ffc107 !important;\n    border-top: 3px solid #8b0000 !important;\n    border-left: 1px solid #8b0000 !important;\n    border-right: 1px solid #8b0000 !important;\n    border-bottom: 1px solid #0b0b0b !important;\n    position: relative;\n    z-index: 10;\n  }\n</style>\n\n<div class=\"container py-4\">\n  <div class=\"row align-items-start\">\n\n    <!-- HOVERING BUICK THAT FOLLOWS YOUR SCROLLING -->\n    <div class=\"col-lg-3 mb-4 d-none d-lg-block\" style=\"position: sticky; top: 20px;\">\n      <div class=\"p-2 text-center\" style=\"background-color: #141414; border: 2px solid #8b0000; box-shadow: 0 0 10px rgba(139, 0, 0, 0.3);\">\n        <img src=\"https://file.garden/aFl0qsYp6mJxII37/CSS_Mystery/1941-buick-super-coupe.png\" class=\"img-fluid rounded mb-2\" alt=\"Surveillance Vehicle\" style=\"width: 100%; object-fit: cover; filter: sepia(30%) contrast(110%);\">\n        <p class=\"small text-danger mb-0 font-weight-bold\" style=\"letter-spacing: 1px; font-size: 0.7rem; font-family: 'Courier New', Courier, monospace;\">[UNIT NUMBER // DEPT]<br>SURVEILLANCE</p>\n      </div>\n    </div>\n\n    <!-- MAIN CASE FILE CONTAINER -->\n    <div class=\"col-lg-9\">\n      \n      <!-- CASE FILE HEADER & TABS CONTAINER -->\n      <div style=\"background-color: #141414; border: 2px solid #8b0000; border-bottom: none; border-top-left-radius: 6px; border-top-right-radius: 6px;\">\n        \n        <!-- TITLE -->\n        <div class=\"p-4 text-center pb-3\">\n          <p class=\"text-danger mb-1 font-weight-bold\" style=\"letter-spacing: 4px; font-size: 0.8rem;\">[DEPARTMENT NAME] // CASE FILE</p>\n          <h1 class=\"display-5 font-weight-bold text-light mb-0\" style=\"letter-spacing: 3px; font-family: 'Times New Roman', serif;\">[ INSERT CASE TITLE HERE ]</h1>\n        </div>\n\n        <!-- FOLDER TABS -->\n        <ul class=\"nav nav-tabs px-3 pt-2 mb-0\" id=\"noirTabs\" role=\"tablist\">\n          <li class=\"nav-item\">\n            <a class=\"nav-link active px-4 py-2 font-weight-bold\" id=\"overview-tab\" data-toggle=\"pill\" data-target=\"#overview\" href=\"#overview\" role=\"tab\">THE BRIEF</a>\n          </li>\n          <li class=\"nav-item\">\n            <a class=\"nav-link px-4 py-2 font-weight-bold\" id=\"suspects-tab\" data-toggle=\"pill\" data-target=\"#suspects\" href=\"#suspects\" role=\"tab\">SUSPECTS & ROSTER</a>\n          </li>\n          <li class=\"nav-item\">\n            <a class=\"nav-link px-4 py-2 font-weight-bold\" id=\"evidence-tab\" data-toggle=\"pill\" data-target=\"#evidence\" href=\"#evidence\" role=\"tab\">EVIDENCE</a>\n          </li>\n        </ul>\n\n      </div>\n\n      <!-- MAIN CONTENT BODY -->\n      <div class=\"p-4\" style=\"background-color: #0b0b0b; color: #dcdcdc; font-family: 'Courier New', Courier, monospace; border: 2px solid #8b0000; border-top: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; box-shadow: 0 5px 15px rgba(139, 0, 0, 0.2);\">\n\n        <!-- TAB CONTENT -->\n        <div class=\"tab-content\" id=\"noirTabsContent\">\n\n          <!-- OVERVIEW / BRIEF TAB -->\n          <div class=\"tab-pane fade show active\" id=\"overview\" role=\"tabpanel\">\n            \n            <!-- THE DETECTIVE IS FOLLOWING YOU PRESS F TO DOUBT -->\n            <div class=\"d-block d-lg-none mb-4 text-center\">\n              <div class=\"p-2\" style=\"background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;\">\n                <img src=\"https://file.garden/aFl0qsYp6mJxII37/CSS_Mystery/1941-buick-super-coupe.png\" class=\"img-fluid rounded mb-2\" alt=\"Surveillance Vehicle\" style=\"max-height: 200px; width: 100%; object-fit: cover; filter: sepia(30%) contrast(110%);\">\n                <p class=\"small text-danger mb-0 font-weight-bold\" style=\"letter-spacing: 2px; font-size: 0.75rem;\">[INSERT MOBILE IMAGE CAPTION / UNIT INFO]</p>\n              </div>\n            </div>\n\n            <div class=\"row\">\n              <!-- Left Column: Case Stats -->\n              <div class=\"col-lg-5 mb-4\">\n                <div class=\"p-3 h-100\" style=\"background-color: #141414; border-left: 4px solid #8b0000; border-top: 1px solid #222; border-right: 1px solid #222; border-bottom: 1px solid #222;\">\n                  <h4 class=\"border-bottom pb-2 mb-3 text-danger font-weight-bold\" style=\"font-size: 1rem; letter-spacing: 2px; font-family: 'Times New Roman', serif;\">// REPORT DETAILS</h4>\n                  <p class=\"mb-2\"><strong>Division:</strong> [Insert Division]</p>\n                  <p class=\"mb-2\"><strong>Lead Detective:</strong> [Insert Name/Character]</p>\n                  <p class=\"mb-2\"><strong>Date Active:</strong> [Insert Year/Date]</p>\n                  <p class=\"mb-0\"><strong>Status:</strong> [Insert Case Status]</p>\n                  <hr style=\"border-color: #333;\">\n                  <p class=\"small text-muted mb-0\" style=\"font-size: 0.75rem;\">NOTE: [Insert brief instructional note or warning here.]</p>\n                </div>\n              </div>\n\n              <!-- Right Column: Case Notes -->\n              <div class=\"col-lg-7 mb-4\">\n                <div class=\"p-4 h-100\" style=\"background-color: #141414; border: 1px solid #222;\">\n                  <h3 class=\"h5 text-danger font-weight-bold mb-3\" style=\"letter-spacing: 1px; font-family: 'Times New Roman', serif;\">PRELIMINARY SYNOPSIS</h3>\n                  <p style=\"line-height: 1.6;\">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non]</p>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- SUSPECTS & ROSTER TAB -->\n          <div class=\"tab-pane fade\" id=\"suspects\" role=\"tabpanel\">\n            \n            <!-- SECTION HEADER: PRECINCT PERSONNEL / OFFICERS -->\n            <h3 class=\"h5 text-danger font-weight-bold mb-3\" style=\"letter-spacing: 1px; font-family: 'Times New Roman', serif;\">// PRECINCT PERSONNEL & OFFICERS</h3>\n            <p class=\"small text-muted mb-3\">Add pictures and information for the officers or characters working on this case.</p>\n            \n            <div class=\"row mb-4\">\n              <!-- Officer 1 -->\n              <div class=\"col-md-6 mb-3\">\n                <div class=\"p-3 d-flex align-items-center h-100\" style=\"background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;\">\n                  <div class=\"mr-3 text-center\" style=\"width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;\">\n                    <span>[OFFICER PHOTO]</span>\n                  </div>\n                  <div>\n                    <h5 class=\"mb-1 text-light font-weight-bold\" style=\"font-family: 'Times New Roman', serif;\">[Officer Name]</h5>\n                    <p class=\"small text-danger mb-1\" style=\"letter-spacing: 1px;\">[RANK / ASSIGNMENT]</p>\n                    <p class=\"small text-muted mb-0\">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Officer 2 -->\n              <div class=\"col-md-6 mb-3\">\n                <div class=\"p-3 d-flex align-items-center h-100\" style=\"background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;\">\n                  <div class=\"mr-3 text-center\" style=\"width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;\">\n                    <span>[OFFICER PHOTO]</span>\n                  </div>\n                  <div>\n                    <h5 class=\"mb-1 text-light font-weight-bold\" style=\"font-family: 'Times New Roman', serif;\">[Officer Name 2]</h5>\n                    <p class=\"small text-danger mb-1\" style=\"letter-spacing: 1px;\">[RANK / ASSIGNMENT]</p>\n                    <p class=\"small text-muted mb-0\">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>\n                  </div>\n                </div>\n              </div>\n            \n              <!-- Officer 3 -->\n              <div class=\"col-md-6 mb-3\">\n                <div class=\"p-3 d-flex align-items-center h-100\" style=\"background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;\">\n                  <div class=\"mr-3 text-center\" style=\"width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;\">\n                    <span>[OFFICER PHOTO]</span>\n                  </div>\n                  <div>\n                    <h5 class=\"mb-1 text-light font-weight-bold\" style=\"font-family: 'Times New Roman', serif;\">[Officer Name 3]</h5>\n                    <p class=\"small text-danger mb-1\" style=\"letter-spacing: 1px;\">[RANK / ASSIGNMENT]</p>\n                    <p class=\"small text-muted mb-0\">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>\n                  </div>\n                </div>\n              </div>\n            \n              <!-- Officer 4 -->\n              <div class=\"col-md-6 mb-3\">\n                <div class=\"p-3 d-flex align-items-center h-100\" style=\"background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;\">\n                  <div class=\"mr-3 text-center\" style=\"width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;\">\n                    <span>[OFFICER PHOTO]</span>\n                  </div>\n                  <div>\n                    <h5 class=\"mb-1 text-light font-weight-bold\" style=\"font-family: 'Times New Roman', serif;\">[Officer Name 4]</h5>\n                    <p class=\"small text-danger mb-1\" style=\"letter-spacing: 1px;\">[RANK / ASSIGNMENT]</p>\n                    <p class=\"small text-muted mb-0\">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <hr style=\"border-color: #333;\" class=\"my-4\">\n\n            <!-- SECTION HEADER: SUSPECTS -->\n            <h3 class=\"h5 text-danger font-weight-bold mb-3\" style=\"letter-spacing: 1px; font-family: 'Times New Roman', serif;\">// CASE SUSPECTS & PERSONS OF INTEREST</h3>\n            <p class=\"small text-muted mb-3\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>\n\n            <div class=\"row\">\n              <!-- Suspect 1 -->\n              <div class=\"col-md-12 mb-3\">\n                <div class=\"p-3 d-flex align-items-center\" style=\"background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;\">\n                  <div class=\"mr-3 text-center\" style=\"width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;\">\n                    <span>[MUGSHOT]</span>\n                  </div>\n                  <div>\n                    <h5 class=\"mb-1 text-light font-weight-bold\" style=\"font-family: 'Times New Roman', serif;\">[Insert Suspect Name]</h5>\n                    <p class=\"small text-danger mb-1\" style=\"letter-spacing: 1px;\">[ALIAS / OCCUPATION]</p>\n                    <p class=\"small text-muted mb-0\">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>\n                  </div>\n                </div>\n              </div>\n              \n              <!-- Suspect 2 -->\n              <div class=\"col-md-12 mb-3\">\n                <div class=\"p-3 d-flex align-items-center\" style=\"background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;\">\n                  <div class=\"mr-3 text-center\" style=\"width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;\">\n                    <span>[MUGSHOT]</span>\n                  </div>\n                  <div>\n                    <h5 class=\"mb-1 text-light font-weight-bold\" style=\"font-family: 'Times New Roman', serif;\">[Insert Suspect Name]</h5>\n                    <p class=\"small text-danger mb-1\" style=\"letter-spacing: 1px;\">[ALIAS / OCCUPATION]</p>\n                    <p class=\"small text-muted mb-0\">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>\n                  </div>\n                </div>\n              </div>\n              \n              <!-- Suspect 3 -->\n              <div class=\"col-md-12 mb-3\">\n                <div class=\"p-3 d-flex align-items-center\" style=\"background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;\">\n                  <div class=\"mr-3 text-center\" style=\"width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;\">\n                    <span>[MUGSHOT]</span>\n                  </div>\n                  <div>\n                    <h5 class=\"mb-1 text-light font-weight-bold\" style=\"font-family: 'Times New Roman', serif;\">[Insert Suspect Name]</h5>\n                    <p class=\"small text-danger mb-1\" style=\"letter-spacing: 1px;\">[ALIAS / OCCUPATION]</p>\n                    <p class=\"small text-muted mb-0\">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- EVIDENCE TAB -->\n          <div class=\"tab-pane fade\" id=\"evidence\" role=\"tabpanel\">\n            <div class=\"p-4\" style=\"background-color: #141414; border: 1px solid #222;\">\n              <h3 class=\"h5 text-danger font-weight-bold mb-3\" style=\"letter-spacing: 1px; font-family: 'Times New Roman', serif;\">EVIDENCE LOCKER</h3>\n              <p class=\"small text-muted mb-3\">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>\n              \n              <div id=\"noirAccordion\">\n                <div class=\"card mb-2\" style=\"background-color: #0b0b0b; border: 1px solid #333;\">\n                  <div class=\"card-header p-2\" id=\"evidenceHeading1\">\n                    <h5 class=\"mb-0\">\n                      <button class=\"btn btn-link btn-block text-left text-light text-decoration-none font-weight-bold\" data-toggle=\"collapse\" data-target=\"#evidenceCollapse1\" aria-expanded=\"true\" aria-controls=\"evidenceCollapse1\" style=\"font-family: 'Courier New', Courier, monospace; font-size: 0.9rem;\">\n                        <span class=\"text-danger\">[EXHIBIT A]:</span> [Insert Evidence Title / Item Name]\n                      </button>\n                    </h5>\n                  </div>\n                  </div>\n                <div id=\"noirAccordion\">\n                <div class=\"card mb-2\" style=\"background-color: #0b0b0b; border: 1px solid #333;\">\n                  <div class=\"card-header p-2\" id=\"evidenceHeading1\">\n                    <h5 class=\"mb-0\">\n                      <button class=\"btn btn-link btn-block text-left text-light text-decoration-none font-weight-bold\" data-toggle=\"collapse\" data-target=\"#evidenceCollapse1\" aria-expanded=\"true\" aria-controls=\"evidenceCollapse1\" style=\"font-family: 'Courier New', Courier, monospace; font-size: 0.9rem;\">\n                        <span class=\"text-danger\">[EXHIBIT B]:</span> [Insert Evidence Title / Item Name]\n                      </button>\n                    </h5>\n                  </div>\n                  </div>\n                <div id=\"noirAccordion\">\n                <div class=\"card mb-2\" style=\"background-color: #0b0b0b; border: 1px solid #333;\">\n                  <div class=\"card-header p-2\" id=\"evidenceHeading1\">\n                    <h5 class=\"mb-0\">\n                      <button class=\"btn btn-link btn-block text-left text-light text-decoration-none font-weight-bold\" data-toggle=\"collapse\" data-target=\"#evidenceCollapse1\" aria-expanded=\"true\" aria-controls=\"evidenceCollapse1\" style=\"font-family: 'Courier New', Courier, monospace; font-size: 0.9rem;\">\n                        <span class=\"text-danger\">[EXHIBIT C]:</span> [Insert Evidence Title / Item Name]\n                      </button>\n                    </h5>\n                  </div>\n                  </div>\n                <div id=\"noirAccordion\">\n                <div class=\"card mb-2\" style=\"background-color: #0b0b0b; border: 1px solid #333;\">\n                  <div class=\"card-header p-2\" id=\"evidenceHeading1\">\n                    <h5 class=\"mb-0\">\n                      <button class=\"btn btn-link btn-block text-left text-light text-decoration-none font-weight-bold\" data-toggle=\"collapse\" data-target=\"#evidenceCollapse1\" aria-expanded=\"true\" aria-controls=\"evidenceCollapse1\" style=\"font-family: 'Courier New', Courier, monospace; font-size: 0.9rem;\">\n                        <span class=\"text-danger\">[EXHIBIT D]:</span> [Insert Evidence Title / Item Name]\n                      </button>\n                    </h5>\n                  </div>\n                  </div>\n                  <div id=\"evidenceCollapse1\" class=\"collapse\" aria-labelledby=\"evidenceHeading1\" data-parent=\"#noirAccordion\">\n                    <div class=\"card-body small text-muted\" style=\"border-top: 1px dashed #333;\">\n                      [Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]\n                    </div>"}