From c6a579a0bf4ade52d017d88d7060c2bfc3fc7ff3 Mon Sep 17 00:00:00 2001
From: Ashley Blewer <ashley.blewer@gmail.com>
Date: Tue, 17 Oct 2017 21:03:04 -0400
Subject: [PATCH] changes buttons into div-rows

---
 css/css.css |  93 +++++++++-----------
 index.html  | 245 ++++++++++++++++++++++++++--------------------------
 2 files changed, 161 insertions(+), 177 deletions(-)

diff --git a/css/css.css b/css/css.css
index 33fcdfe..f4c8afb 100644
--- a/css/css.css
+++ b/css/css.css
@@ -132,90 +132,77 @@ img {
   margin-bottom: 18px;
 }
 
-
 div {
   font-family: 'Merriweather', serif;
   color: white;
 }
 
-button {
-  font: inherit;
-  font-family: inherit;
-  color: inherit;
-}
-
-.btn {
-  border: 1px solid transparent;
-  background-color: #424242;
-  font-size: 1em;
-  line-height: 1.5em;
-  white-space: normal;
-  cursor: pointer;
-  padding: 8px 12px;
-  border-radius: 4px;
-  padding-left: 2.5em;
-  margin: 8px;
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  -moz-osx-font-smoothing: grayscale;
+.recipe {
+  color: white;
+  background-color: #383838;
+  padding: 14px;
+  padding-left: 2.8em;
+  font-family: "Montserrat";
+  font-weight: bold;
+  font-size: 1.2em;
+  border: 1px solid black;
+  transition: all .5s ease-out;
   position: relative;
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
+  width: 100%;
 }
 
-.btn:before {
+.recipe:hover {
+  color: black;
+  background-color: #449d44;
+  border: 1px solid black;
+}
+
+.recipe:before {
   content: "💫";
   position: absolute;
   left: 1em;
   padding: 0 1px;
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-  -webkit-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
+  padding-right: 1em;
 }
 
-.btn:hover:before, .btn:focus:before, .btn:active:before {
-  -webkit-transform: scale(1.3) translateZ(0);
-  transform: scale(1.3) translateZ(0);
-}
-
-.contents-list {
-  color: white;
-  border: 1px solid black;
-  background-color: #383838;
-  padding: 14px;
-  font-family: "Montserrat";
-  font-weight: bold;
-  font-size: 1em;
-  border:1px solid rgba(255, 255, 255, 0);
-  transition:all .5s ease-in-out;
+.recipe:hover:before, .recipe:focus:before, .recipe:active:before {
+  transform: scale(1.3);
 }
 
 .sidebar a {
   text-decoration: none;
 }
 
+.contents-list {
+  color: white;
+  background-color: #383838;
+  padding: 14px;
+  padding-left: 2.8em;
+  font-family: "Montserrat";
+  font-weight: bold;
+  font-size: 1em;
+  border: 1px solid black;
+  transition: all .5s ease-out;
+}
+
 .contents-list:hover {
   color: black;
-  font-size: 1.05em;
   background-color: #449d44;
   border:1px solid black;
 }
 
 .contents-list:before {
   content: "📼";
+  position: absolute;
+  left: 1em;
+  padding: 0 1px;
   padding-right: 1em;
 }
 
+.contents-list:hover:before, .contents-list:focus:before, .contents-list:active:before {
+  transform: scale(1.8) translateX(0.3em);
+}
+
 .codeblock {
   font-family: monospace
   padding: 2px 4px;
diff --git a/index.html b/index.html
index 32d77f1..c981c49 100644
--- a/index.html
+++ b/index.html
@@ -68,9 +68,7 @@
   <h2 id="basics">Learn about FFmpeg basics</h2>
 
     <!-- Basic structure of an FFmpeg command -->
-    <span data-toggle="collapse" data-target="#basic-structure">
-      <button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Basic structure of an FFmpeg command">Basic structure of an FFmpeg command</button>
-    </span>
+    <div class="recipe" data-toggle="collapse" data-target="#basic-structure">Basic structure of an FFmpeg command</div>
     <div id="basic-structure" class="collapse">
       <h3>Basic structure of an FFmpeg command</h3>
       <p class="link"></p>
@@ -95,7 +93,7 @@
   <h2 id="concepts">Learn about more advanced FFmpeg concepts</h2>
 
   <!-- Filtergraph explanation -->
-  <span data-toggle="collapse" data-target="#filtergraphs"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Filtergraphs">Filtergraphs</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#filtergraphs">Filtergraphs</div>
   <div id="filtergraphs" class="collapse">
     <h3>Filtergraphs</h3>
     <p class="link"></p>
@@ -128,7 +126,7 @@
   <h2 id="rewrap">Change container (rewrap)</h2>
 
   <!-- Basic rewrap command -->
-  <span data-toggle="collapse" data-target="#basic-rewrap"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Basic rewrap command">Basic rewrap command</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#basic-rewrap">Basic rewrap command</div>
   <div id="basic-rewrap" class="collapse">
     <h3>Rewrap a file</h3>
     <p class="link"></p>
@@ -151,7 +149,7 @@
   <!-- End Basic rewrap command -->
 
   <!-- MKV to MP4 -->
-  <span data-toggle="collapse" data-target="#mkv_to_mp4"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Convert Matroska (MKV) to MP4">MKV to MP4</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#mkv_to_mp4">Convert Matroska (MKV) to MP4</div>
   <div id="mkv_to_mp4" class="collapse">
     <h3>MKV to MP4</h3>
     <p class="link"></p>
@@ -176,7 +174,7 @@
   <h2 id="transcode">Change codec (transcode)</h2>
 
   <!-- Transcode to ProRes -->
-  <span data-toggle="collapse" data-target="#to_prores"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transcode to deinterlaced Apple ProRes LT">Transcode to ProRes</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#to_prores">Transcode to deinterlaced Apple ProRes LT</div>
   <div id="to_prores" class="collapse">
     <h3>Transcode into a deinterlaced Apple ProRes LT</h3>
     <p class="link"></p>
@@ -207,7 +205,7 @@
   <!-- ends Transcode to ProRes -->
 
   <!-- Transcode to H.264 -->
-  <span data-toggle="collapse" data-target="#transcode_h264"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transcode to an H.264 access file">Transcode to H.264</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#transcode_h264">Transcode to an H.264 access file</div>
   <div id="transcode_h264" class="collapse">
     <h3>Transcode to H.264</h3>
     <p class="link"></p>
@@ -234,7 +232,7 @@
   <!-- ends Transcode to H.264 -->
 
   <!-- H.264 from DCP -->
-  <span data-toggle="collapse" data-target="#dcp_to_h264"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transcode from DCP to an H.264 access file">H.264 from DCP</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#dcp_to_h264">Transcode from DCP to an H.264 access file</div>
   <div id="dcp_to_h264" class="collapse">
     <h3>H.264 from DCP</h3>
     <p class="link"></p>
@@ -260,7 +258,7 @@
   <!-- ends H.264 from DCP -->
 
   <!-- Transcode to FFV1.mkv -->
-  <span data-toggle="collapse" data-target="#create_FFV1_mkv"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transcode your file with the FFV1 Version 3 Codec in a Matroska container">Create FFV1.mkv</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#create_FFV1_mkv">Transcode your file with the FFV1 Version 3 Codec in a Matroska container</div>
   <div id="create_FFV1_mkv" class="collapse">
     <h3>Create FFV1 Version 3 video in a Matroska container with framemd5 of input</h3>
     <p class="link"></p>
@@ -286,7 +284,7 @@
   <!-- ends Transcode to FFV1.mkv-->
 
   <!-- Rip DVD -->
-  <span data-toggle="collapse" data-target="#dvd_to_file"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Basic DVD to file conversion">Convert DVD to H.264</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#dvd_to_file">Convert DVD to H.264</div>
   <div id="dvd_to_file" class="collapse">
     <h3>Convert DVD to H.264</h3>
     <p class="link"></p>
@@ -318,7 +316,7 @@
   <!-- ends rip DVD -->
 
   <!-- Transcode to H.265 -->
-  <span data-toggle="collapse" data-target="#transcode_h265"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transcode to an H.265/HEVC MP4">Transcode to H.265/HEVC</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#transcode_h265">Transcode to an H.265/HEVC MP4</div>
   <div id="transcode_h265" class="collapse">
     <h3>Transcode to H.265/HEVC</h3>
     <p class="link"></p>
@@ -348,7 +346,7 @@
   <!-- Here comes audio-only transcoding -->
 
   <!-- WAV to MP3 -->
-  <span data-toggle="collapse" data-target="#wav_to_mp3"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Convert WAV to MP3">WAV to MP3</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#wav_to_mp3">Convert WAV to MP3</div>
   <div id="wav_to_mp3" class="collapse">
     <h3>WAV to MP3</h3>
     <p class="link"></p>
@@ -373,7 +371,7 @@
   <!-- ends WAV to MP3 -->
 
   <!-- append notice to access mp3 -->
-  <span data-toggle="collapse" data-target="#append_mp3"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Generate two access MP3s from input. One with added audio (such as a copyright notice) and one unmodified.">Create access MP3</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#append_mp3">Generate two access MP3s (with and without copyright).</div>
   <div id="append_mp3" class="collapse">
     <h3>Generate two access MP3s from input. One with appended audio (such as a copyright notice) and one unmodified.</h3>
     <p class="link"></p>
@@ -398,7 +396,7 @@
   <!-- ends append notice to access mp3 -->
 
   <!-- WAV to AAC/MP4 -->
-  <span data-toggle="collapse" data-target="#wav_to_mp4"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Convert WAV to AAC/MP4">WAV to AAC/MP4</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#wav_to_mp4">Convert WAV to AAC/MP4</div>
   <div id="wav_to_mp4" class="collapse">
     <h3>WAV to AAC/MP4</h3>
     <p class="link"></p>
@@ -422,7 +420,7 @@
   <h2 id="video-properties">Change video properties</h2>
 
   <!-- 4:3 to 16:9 -->
-  <span data-toggle="collapse" data-target="#SD_HD"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transform 4:3 aspect ratio into 16:9 with pillarbox">4:3 to 16:9</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#SD_HD">Transform 4:3 aspect ratio into 16:9 with pillarbox</div>
   <div id="SD_HD" class="collapse">
     <h3>Transform 4:3 aspect ratio into 16:9 with pillarbox</h3>
     <p class="link"></p>
@@ -440,7 +438,7 @@
   <!-- ends 4:3 to 16:9 -->
 
   <!-- 16:9 to 4:3 -->
-  <span data-toggle="collapse" data-target="#HD_SD"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transform 16:9 aspect ratio video into 4:3 with letterbox">16:9 to 4:3</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#HD_SD">Transform 16:9 aspect ratio video into 4:3 with letterbox</div>
   <div id="HD_SD" class="collapse">
     <h3>Transform 16:9 aspect ratio video into 4:3 with letterbox</h3>
     <p class="link"></p>
@@ -459,7 +457,7 @@
   <!-- ends 16:9 to 4:3 -->
 
   <!-- SD to HD -->
-  <span data-toggle="collapse" data-target="#SD_HD_2"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transform SD to HD with pillarbox">SD to HD</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#SD_HD_2">Transform SD to HD with pillarbox</div>
   <div id="SD_HD_2" class="collapse">
     <h3>Transform SD into HD with pillarbox</h3>
     <p class="link"></p>
@@ -482,7 +480,7 @@
   <!-- ends SD to HD -->
 
   <!-- Change display aspect ratio without re-encoding video-->
-  <span data-toggle="collapse" data-target="#change_DAR"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Change display aspect ratio without re-encoding">Change Display Aspect Ratio</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#change_DAR">Change display aspect ratio without re-encoding</div>
   <div id="change_DAR" class="collapse">
     <h3>Change Display Aspect Ratio without reencoding video</h3>
     <p class="link"></p>
@@ -498,7 +496,7 @@
   <!-- ends Change display aspect ratio without re-encoding video -->
 
   <!-- Convert colourspace -->
-  <span data-toggle="collapse" data-target="#convert-colourspace"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Convert colourspace of video">Convert colourspace</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#convert-colourspace">Convert colourspace of video</div>
   <div id="convert-colourspace" class="collapse">
     <h3>Transcode video to a different colourspace</h3>
     <p class="link"></p>
@@ -549,9 +547,8 @@
   </div>
   <!-- ends Convert colourspace -->
 
-
   <!-- Modify speed -->
-  <span data-toggle="collapse" data-target="#modify_speed"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Modify image and sound speed">Modify speed</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#modify_speed">Modify image and sound speed</div>
   <div id="modify_speed" class="collapse">
     <h3>Modify image and sound speed</h3>
     <p class="link"></p>
@@ -574,7 +571,7 @@
   <!-- ends Modify speed -->
 
   <!-- Make stream properties explicate -->
-  <span data-toggle="collapse" data-target="#clarify_stream"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Clarify stream properties">Set stream properties</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#clarify_stream">Clarify stream properties</div>
   <div id="clarify_stream" class="collapse">
     <h3>Set stream properties</h3>
     <p class="link"></p>
@@ -614,7 +611,7 @@
   <h2 id="audio-files">Change or view audio properties</h2>
 
   <!-- Extract audio from an AV file -->
-  <span data-toggle="collapse" data-target="#extract_audio"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Extract audio without loss from an AV file">Extract audio</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#extract_audio">Extract audio without loss from an AV file</div>
   <div id="extract_audio" class="collapse">
     <h3>Extract audio from an AV file</h3>
     <p class="link"></p>
@@ -631,7 +628,7 @@
   <!-- ends Extract audio from am AV file -->
 
   <!-- Combine audio tracks  -->
-  <span data-toggle="collapse" data-target="#combine_audio"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Combine audio tracks">Combine audio tracks</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#combine_audio">Combine audio tracks</div>
   <div id="combine_audio" class="collapse">
     <h3>Combine audio tracks into one in a video file</h3>
     <p class="link"></p>
@@ -654,7 +651,7 @@
   <!-- ends Combine audio tracks  -->
 
   <!-- phase shift -->
-  <span data-toggle="collapse" data-target="#phase_shift"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Inverses the audio phase of the second channel">Flip phase shift</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#phase_shift">Inverses the audio phase of the second channel</div>
   <div id="phase_shift" class="collapse">
     <h3>Flip audio phase shift</h3>
     <p class="link"></p>
@@ -672,7 +669,7 @@
   <!-- ends phase shift -->
 
   <!-- loudnorm metadata -->
-  <span data-toggle="collapse" data-target="#loudnorm_metadata"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Calculate Loudness Levels">Calculate Loudness Levels</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#loudnorm_metadata">Calculate Loudness Levels</div>
   <div id="loudnorm_metadata" class="collapse">
     <h3>Calculate Loudness Levels</h3>
     <p class="link"></p>
@@ -691,7 +688,7 @@
   <!-- ends loudnorm metadata -->
 
   <!-- RIAA equalization -->
-  <span data-toggle="collapse" data-target="#riaa_eq"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="RIAA Equalization">RIAA Equalization</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#riaa_eq">RIAA Equalization</div>
   <div id="riaa_eq" class="collapse">
     <h3>RIAA Equalization</h3>
     <p class="link"></p>
@@ -707,7 +704,7 @@
   <!-- ends RIAA equalization -->
 
   <!-- one pass loudnorm -->
-  <span data-toggle="collapse" data-target="#loudnorm_one_pass"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="One Pass Loudness Normalization">One Pass Loudness Normalization</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#loudnorm_one_pass">One Pass Loudness Normalization</div>
   <div id="loudnorm_one_pass" class="collapse">
     <h3>One Pass Loudness Normalization</h3>
     <p class="link"></p>
@@ -726,7 +723,7 @@
   <!-- ends one pass loudnorm -->
 
   <!-- two pass loudnorm -->
-  <span data-toggle="collapse" data-target="#loudnorm_two_pass"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Two Pass Loudness Normalization">Two Pass Loudness Normalization</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#loudnorm_two_pass">Two Pass Loudness Normalization</div>
   <div id="loudnorm_two_pass" class="collapse">
     <h3>Two Pass Loudness Normalization</h3>
     <p class="link"></p>
@@ -751,7 +748,7 @@
   <!-- ends two pass loudnorm -->
 
   <!-- Fix A/V async 1 -->
-  <span data-toggle="collapse" data-target="#avsync_aresample"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Fix A/V sync issues by resampling audio">Fix AV Sync: Resample audio</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#avsync_aresample">Fix A/V sync issues by resampling audio</div>
   <div id="avsync_aresample" class="collapse">
     <h3>Fix AV Sync: Resample audio</h3>
     <p class="link"></p>
@@ -772,7 +769,7 @@
   <h2 id="join-trim">Join, trim, or excerpt a video</h2>
 
   <!-- Join files together -->
-  <span data-toggle="collapse" data-target="#join_files"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Join (concatenate) two or more files into a single file">Join files together</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#join_files">Join (concatenate) two or more files into a single file</div>
   <div id="join_files" class="collapse">
     <h3>Join files together</h3>
     <p class="link"></p>
@@ -798,7 +795,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Join files together -->
 
   <!-- Split file into segments -->
-  <span data-toggle="collapse" data-target="#segment_file"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Split one file into several smaller segments">Split file into segments</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#segment_file">Split one file into several smaller segments</div>
   <div id="segment_file" class="collapse">
     <h3>Split file into segments</h3>
     <p class="link"></p>
@@ -828,7 +825,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Split file into segments -->
 
   <!-- Trim -->
-  <span data-toggle="collapse" data-target="#trim"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Trim video">Trim video</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#trim">Trim video</div>
   <div id="trim" class="collapse">
     <h3>Trim a video without re-encoding</h3>
     <p class="link"></p>
@@ -854,7 +851,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Trim -->
 
   <!-- Excerpt from beginning -->
-  <span data-toggle="collapse" data-target="#excerpt_from_start"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create an excerpt, starting from the beginning of the file">Excerpt from beginning</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#excerpt_from_start">Create an excerpt, starting from the beginning of the file</div>
   <div id="excerpt_from_start" class="collapse">
     <h3>Excerpt from beginning</h3>
     <p class="link"></p>
@@ -872,7 +869,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Excerpt from beginning -->
 
   <!-- Excerpt to end -->
-  <span data-toggle="collapse" data-target="#excerpt_to_end"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create a new video file with the first five seconds trimmed off the original">Excerpt to end</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#excerpt_to_end">Create a new video file with the first five seconds trimmed off the original</div>
   <div id="excerpt_to_end" class="collapse">
     <h3>Excerpt to end</h3>
     <p class="link"></p>
@@ -890,7 +887,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Excerpt to end -->
 
   <!-- Excerpt from end -->
-  <span data-toggle="collapse" data-target="#excerpt_from_end"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create a new video file with the final five seconds of the original">Excerpt from end</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#excerpt_from_end">Create a new video file with the final five seconds of the original</div>
   <div id="excerpt_from_end" class="collapse">
     <h3>Excerpt from end</h3>
     <p class="link"></p>
@@ -912,7 +909,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <h2 id="interlacing">Work with interlaced video</h2>
 
   <!-- NTSC to H.264 -->
-  <span data-toggle="collapse" data-target="#ntsc_to_h264"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Upscaled, pillar-boxed HD H.264 access files from SD NTSC source">NTSC to H.264</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#ntsc_to_h264">Upscaled, pillar-boxed HD H.264 access files from SD NTSC source</div>
   <div id="ntsc_to_h264" class="collapse">
     <h3>Upscaled, Pillar-boxed HD H.264 Access Files from SD NTSC source</h3>
     <p class="link"></p>
@@ -935,7 +932,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends NTSC to H.264 -->
 
   <!-- Deinterlace video -->
-  <span data-toggle="collapse" data-target="#deinterlace"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Deinterlace video">Deinterlace video</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#deinterlace">Deinterlace video</div>
   <div id="deinterlace" class="collapse">
     <h3>Deinterlace a video</h3>
     <p class="link"></p>
@@ -969,7 +966,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Deinterlace video -->
 
   <!-- Inverse telecine -->
-  <span data-toggle="collapse" data-target="#inverse-telecine"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Inverse telecine video">Inverse telecine</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#inverse-telecine">Inverse telecine</div>
   <div id="inverse-telecine" class="collapse">
     <h3>Inverse telecine a video file</h3>
     <p class="link"></p>
@@ -999,7 +996,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Inverse telecine -->
 
   <!-- Set field order -->
-  <span data-toggle="collapse" data-target="#set_field_order"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Set field order for interlaced video">Set field order</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#set_field_order">Set field order for interlaced video</div>
   <div id="set_field_order" class="collapse">
     <h3>Change field order of an interlaced video</h3>
     <p class="link"></p>
@@ -1015,7 +1012,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Set field order -->
 
   <!-- Check interlacement  -->
-  <span data-toggle="collapse" data-target="#check_interlacement"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Identify interlacement patterns in a video file">Check interlacement </button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#check_interlacement">Identify interlacement patterns in a video file</div>
   <div id="check_interlacement" class="collapse">
     <h3>Check video file interlacement patterns</h3>
     <p class="link"></p>
@@ -1035,7 +1032,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <h2 id="overlay">Overlay timecode or text</h2>
 
   <!-- Text Watermark -->
-  <span data-toggle="collapse" data-target="#text_watermark"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create opaque centered text watermark ">Text Watermark</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#text_watermark">Create opaque centered text watermark</div>
   <div id="text_watermark" class="collapse">
     <h3>Create centered, transparent text watermark</h3>
     <p class="link"></p>
@@ -1060,7 +1057,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Text watermark -->
 
   <!-- Transparent Image Watermark -->
-  <span data-toggle="collapse" data-target="#image_watermark"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Overlay image watermark">Overlay image watermark on video</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#image_watermark">Overlay image watermark on video</div>
   <div id="image_watermark" class="collapse">
     <h3>Overlay image watermark on video</h3>
     <p class="link"></p>
@@ -1076,7 +1073,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Image Watermark -->
 
   <!-- Burn in timecode-->
-  <span data-toggle="collapse" data-target="#burn_in_timecode"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Burn in timecode ">Burn in timecode</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#burn_in_timecode">Burn in timecode</div>
   <div id="burn_in_timecode" class="collapse">
     <h3>Create a burnt in timecode on your image</h3>
     <p class="link"></p>
@@ -1106,7 +1103,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <h2 id="create-images">Create thumbnails or GIFs</h2>
 
   <!-- One thumbnail -->
-  <span data-toggle="collapse" data-target="#one_thumbnail"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Export one thumbnail per video file">One thumbnail</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#one_thumbnail">Export one thumbnail per video file</div>
   <div id="one_thumbnail" class="collapse">
     <h3>One thumbnail</h3>
     <p class="link"></p>
@@ -1123,7 +1120,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends One thumbnail -->
 
   <!-- Multi thumbnail -->
-  <span data-toggle="collapse" data-target="#multi_thumbnail"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Export many thumbnails per video file">Many thumbnails</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#multi_thumbnail">Export many thumbnails per video file</div>
   <div id="multi_thumbnail" class="collapse">
     <h3>Many thumbnails</h3>
     <p class="link"></p>
@@ -1140,7 +1137,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Multi thumbnail -->
 
   <!-- Images to GIF -->
-  <span data-toggle="collapse" data-target="#img_to_gif"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Converts images to GIF">Create GIF from still images</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#img_to_gif">Create GIF from still images</div>
   <div id="img_to_gif" class="collapse">
     <h3>Images to GIF</h3>
     <p class="link"></p>
@@ -1160,7 +1157,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Images to GIF -->
 
   <!-- Create GIF -->
-  <span data-toggle="collapse" data-target="#create_gif"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create a GIF from a video">Create GIF from a video</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#create_gif">Create GIF from a video</div>
   <div id="create_gif" class="collapse">
     <h3>Create GIF</h3>
     <p class="link"></p>
@@ -1196,7 +1193,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <h2 id="create-video">Create a video from images</h2>
 
   <!-- Images to video -->
-  <span data-toggle="collapse" data-target="#images_2_video"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transcode an image sequence into uncompressed 10-bit video">Image sequence into video</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#images_2_video">Transcode an image sequence into uncompressed 10-bit video</div>
   <div id="images_2_video" class="collapse">
     <h3>Transcode an image sequence into uncompressed 10-bit video</h3>
     <p class="link"></p>
@@ -1214,7 +1211,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Images to video -->
 
   <!-- Create video from image and audio  -->
-  <span data-toggle="collapse" data-target="#image-audio"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create video from image and audio">Create video from image and audio</button></span>
+  <div class="recipe" data-toggle="tooltip" data-toggle="collapse" data-target="#image-audio">Create video from image and audio</div>
   <div id="image-audio" class="collapse">
     <h3>Create a video from an image and audio file.</h3>
     <p class="link"></p>
@@ -1239,7 +1236,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <h2 id="filters-scopes">Use filters or scopes</h2>
 
   <!-- abitscope -->
-  <span data-toggle="collapse" data-target="#abitscope"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Audio Bitscope">Audio Bitscope</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#abitscope">Audio Bitscope</div>
   <div id="abitscope" class="collapse">
     <h3>Creates a visualization of the bits in an audio stream</h3>
     <p class="link"></p>
@@ -1261,7 +1258,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends abitscope -->
 
   <!-- astats -->
-  <span data-toggle="collapse" data-target="#astats"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Play a graphical output showing decibel levels of an input file">Graphic for audio</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#astats">Play a graphical output showing decibel levels of an input file</div>
   <div id="astats" class="collapse">
     <h3>Plays a graphical output showing decibel levels of an input file</h3>
     <p class="link"></p>
@@ -1289,7 +1286,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends astats -->
 
   <!-- BRNG -->
-  <span data-toggle="collapse" data-target="#brng"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Identify pixels out of broadcast range">Broadcast Range</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#brng">Identify pixels out of broadcast range</div>
   <div id="brng" class="collapse">
     <h3>Shows all pixels outside of broadcast range</h3>
     <p class="link"></p>
@@ -1313,7 +1310,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends BRNG -->
 
   <!-- Vectorscope -->
-  <span data-toggle="collapse" data-target="#vectorscope"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Vectorscope from video to screen">Vectorscope</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#vectorscope">Vectorscope from video to screen</div>
   <div id="vectorscope" class="collapse">
     <h3>Plays vectorscope of video</h3>
     <p class="link"></p>
@@ -1334,7 +1331,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends Vectorscope -->
 
   <!--Side by Side Videos/Temporal Difference Filter-->
-  <span data-toggle="collapse" data-target="#tempdif"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Play two videos side by side while applying the temporal difference filter to both">Side by Side Videos/Temporal Difference Filter</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#tempdif">Side by Side Videos/Temporal Difference Filter</div>
   <div id="tempdif" class="collapse">
     <h3>This will play two input videos side by side while also applying the temporal difference filter to them</h3>
     <p class="link"></p>
@@ -1367,7 +1364,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <h2 id="metadata">View or strip metadata</h2>
 
   <!-- Pull specs -->
-  <span data-toggle="collapse" data-target="#pull_specs"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Pull specs from video file">Pull specs</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#pull_specs">Pull specs from video file</div>
   <div id="pull_specs" class="collapse">
     <h3>Pull specs from video file</h3>
     <p class="link"></p>
@@ -1385,8 +1382,8 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   </div>
   <!-- ends Pull specs -->
 
-    <!-- Strip metadata -->
-  <span data-toggle="collapse" data-target="#strip_metadata"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Strip metadata">Strip metadata</button></span>
+  <!-- Strip metadata -->
+  <div class="recipe" data-toggle="collapse" data-target="#strip_metadata">Strip metadata</div>
   <div id="strip_metadata" class="collapse">
     <h3>Strips metadata from video file</h3>
     <p class="link"></p>
@@ -1407,7 +1404,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <h2 id="preservation">Preservation tasks</h2>
 
   <!-- batch processing (Mac/Linux) -->
-  <span data-toggle="collapse" data-target="#batch_processing_bash"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="FFmpeg batch processing on Mac/Linux">Batch processing (Mac/Linux)</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#batch_processing_bash">Batch processing (Mac/Linux)</div>
   <div id="batch_processing_bash" class="collapse">
     <h3>Create Bash script to batch process with FFmpeg</h3>
     <p class="link"></p>
@@ -1436,7 +1433,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
   <!-- ends batch processing (Mac/Linux) -->
 
   <!-- batch processing (Windows) -->
-  <span data-toggle="collapse" data-target="#batch_processing_win"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="FFmpeg batch processing on Windows">Batch processing (Windows)</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#batch_processing_win">Batch processing (Windows)</div>
   <div id="batch_processing_win" class="collapse">
     <h3>Create PowerShell script to batch process with FFmpeg</h3>
     <p class="link"></p>
@@ -1469,7 +1466,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends batch processing (Windows) -->
 
   <!-- Create frame md5s -->
-  <span data-toggle="collapse" data-target="#create_frame_md5s_v"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create an MD5 checksum per video frame">Create MD5 checksums (video frames)</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#create_frame_md5s_v">Create MD5 checksums (video frames)</div>
   <div id="create_frame_md5s_v" class="collapse">
     <h3>Create MD5 checksums (video frames)</h3>
     <p class="link"></p>
@@ -1487,7 +1484,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Create frame md5s -->
 
   <!-- Create frame md5s (audio) -->
-  <span data-toggle="collapse" data-target="#create_frame_md5s_a"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create MD5 checksums for audio samples">Create MD5 checksums (audio samples)</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#create_frame_md5s_a">Create MD5 checksums (audio samples)</div>
   <div id="create_frame_md5s_a" class="collapse">
     <h3>Create MD5 checksums (audio samples)</h3>
     <p class="link"></p>
@@ -1512,7 +1509,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Create frame md5s (audio) -->
 
   <!-- QCTools Report -->
-  <span data-toggle="collapse" data-target="#qctools"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create a QCTools report for a video file with audio track">QCTools report (with audio)</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#qctools">QCTools report (with audio)</div>
   <div id="qctools" class="collapse">
     <h3>Creates a QCTools report</h3>
     <p class="link"></p>
@@ -1536,7 +1533,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends QCTools Report -->
 
   <!-- QCTools Report (no audio) -->
-  <span data-toggle="collapse" data-target="#qctools_no_audio"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create a QCTools report for a video file with no audio track">QCTools report (no audio)</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#qctools_no_audio">QCTools report (no audio)</div>
   <div id="qctools_no_audio" class="collapse">
     <h3>Creates a QCTools report</h3>
     <p class="link"></p>
@@ -1560,7 +1557,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends QCTools Report (no audio) -->
 
   <!-- Check FFV1 fixity -->
-  <span data-toggle="collapse" data-target="#check_FFV1_fixity"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Decode your video and verify the internal CRC checksums">Check FFV1 fixity</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#check_FFV1_fixity">Check FFV1 fixity</div>
   <div id="check_FFV1_fixity" class="collapse">
     <h3>Check FFV1 Version 3 fixity</h3>
     <p class="link"></p>
@@ -1578,7 +1575,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Check FFV1 Fixity  -->
 
   <!-- Read/Extract EIA-608 Closed Captions -->
-  <span data-toggle="collapse" data-target="#readeia608"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Read or extract EIA-608 (Line 21) closed captioning">Read/Extract EIA-608 Closed Captioning</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#readeia608">Read/Extract EIA-608 Closed Captioning</div>
   <div id="readeia608" class="collapse">
     <h3>Read/Extract EIA-608 (Line 21) closed captioning</h3>
     <p class="link"></p>
@@ -1606,7 +1603,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <h2 id="test-files">Generate test files</h2>
 
   <!-- Mandelbrot -->
-  <span data-toggle="collapse" data-target="#mandelbrot"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Make a mandelbrot test pattern video">Mandelbrot</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#mandelbrot">Make a mandelbrot test pattern video</div>
   <div id="mandelbrot" class="collapse">
     <h3>Makes a mandelbrot test pattern video</h3>
     <p class="link"></p>
@@ -1623,7 +1620,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Mandelbrot -->
 
   <!-- SMPTE bars -->
-  <span data-toggle="collapse" data-target="#smpte_bars"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Make a SMPTE bars test pattern video">SMPTE bars</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#smpte_bars">Make a SMPTE bars test pattern video</div>
   <div id="smpte_bars" class="collapse">
     <h3>Makes a SMPTE bars test pattern video</h3>
     <p class="link"></p>
@@ -1640,7 +1637,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends SMPTE bars -->
 
   <!-- Test pattern video -->
-  <span data-toggle="collapse" data-target="#test"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Make a test pattern video">Test pattern</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#test">Make a test pattern video</div>
   <div id="test" class="collapse">
     <h3>Make a test pattern video</h3>
     <p class="link"></p>
@@ -1658,7 +1655,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Test pattern video -->
 
   <!-- Play HD SMPTE bars -->
-  <span data-toggle="collapse" data-target="#play_hd_smpte"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Test an HD video projector by playing the SMPTE colour bars pattern">Play HD SMPTE bars</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#play_hd_smpte">Play HD SMPTE bars</div>
   <div id="play_hd_smpte" class="collapse">
     <h3>Play HD SMPTE bars</h3>
     <p class="link"></p>
@@ -1673,7 +1670,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Play HD SMPTE bars -->
 
   <!-- Play VGA SMPTE bars -->
-  <span data-toggle="collapse" data-target="#play_vga_smpte"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Test a VGA video projector by playing the SMPTE colour bars pattern">Play VGA SMPTE bars</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#play_vga_smpte">Play VGA SMPTE bars</div>
   <div id="play_vga_smpte" class="collapse">
     <h3>Play VGA SMPTE bars</h3>
     <p class="link"></p>
@@ -1688,7 +1685,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Play VGA SMPTE bars -->
 
   <!-- Sine wave -->
-  <span data-toggle="collapse" data-target="#sine_wave"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Generate a test audio file playing a sine wave">Sine wave</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#sine_wave">Generate a sine wave test audio file</div>
   <div id="sine_wave" class="collapse">
     <h3>Sine wave</h3>
     <p class="link"></p>
@@ -1705,7 +1702,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Sine wave -->
 
   <!-- SMPTE bars + Sine wave -->
-  <span data-toggle="collapse" data-target="#smpte_bars_and_sine_wave"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Generate a SMPTE bars test video + audio playing a sine wave">SMPTE bars + Sine wave audio</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#smpte_bars_and_sine_wave">SMPTE bars + Sine wave audio</div>
   <div id="smpte_bars_and_sine_wave" class="collapse">
     <h3>SMPTE bars + Sine wave audio</h3>
     <p class="link"></p>
@@ -1726,7 +1723,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends SMPTE bars + Sine wave -->
 
   <!-- Broken File -->
-  <span data-toggle="collapse" data-target="#broken_file"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Make a broken file out of a perfectly good one">Broken file</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#broken_file">Make a broken file</div>
   <div id="broken_file" class="collapse">
     <h3>Makes a broken test file</h3>
     <p class="link"></p>
@@ -1747,7 +1744,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <h2 id="ocr">Use OCR</h2>
 
   <!-- Show OCR -->
-  <span data-toggle="collapse" data-target="#ocr_on_top"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Play video with OCR on top">Show OCR</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#ocr_on_top">Play video with OCR</div>
   <div id="ocr_on_top" class="collapse">
     <h3>Plays video with OCR on top</h3>
     <p class="link"></p>
@@ -1770,7 +1767,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Show OCR -->
 
   <!-- Export OCR -->
-  <span data-toggle="collapse" data-target="#ffprobe_ocr"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Export OCR from video to screen">Export OCR</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#ffprobe_ocr">Export OCR from video to screen</div>
   <div id="ffprobe_ocr" class="collapse">
     <h3>Exports OCR data to screen</h3>
     <p class="link"></p>
@@ -1791,7 +1788,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <h2 id="perceptual-similarity">Compare perceptual similarity of videos</h2>
 
   <!-- Compare Video Fingerprints -->
-  <span data-toggle="collapse" data-target="#compare_video_fingerprints"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Compare Video Fingerprints">Compare Video Fingerprints</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#compare_video_fingerprints">Compare Video Fingerprints</div>
   <div id="compare_video_fingerprints" class="collapse">
     <h3>Compare two video files for content similarity using perceptual hashing</h3>
     <p class="link"></p>
@@ -1808,7 +1805,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Compare Video Fingerprints -->
 
   <!-- Generate Video Fingerprint -->
-  <span data-toggle="collapse" data-target="#generate_video_fingerprint"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Generate Video Fingerprint">Generate Video Fingerprint</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#generate_video_fingerprint">Generate Video Fingerprint</div>
   <div id="generate_video_fingerprint" class="collapse">
     <h3>Generate a perceptual hash for an input video file</h3>
     <p class="link"></p>
@@ -1828,7 +1825,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <h2 id="other">Other</h2>
 
   <!-- Play image sequence -->
-  <span data-toggle="collapse" data-target="#play_im_seq"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Play an image sequence directly as moving images">Play an image sequence</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#play_im_seq">Play an image sequence</div>
   <div id="play_im_seq" class="collapse">
     <h3>Play an image sequence</h3>
     <p class="link"></p>
@@ -1849,7 +1846,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Play image sequence -->
 
   <!-- Split audio and video tracks -->
-  <span data-toggle="collapse" data-target="#split_audio_video"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create separate audio and video tracks from an audiovisual file">Split audio and video tracks</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#split_audio_video">Split audio and video tracks</div>
   <div id="split_audio_video" class="collapse">
     <h3>Split audio and video tracks</h3>
     <p class="link"></p>
@@ -1867,7 +1864,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Split audio and video tracks -->
 
   <!-- Flip image -->
-  <span data-toggle="collapse" data-target="#flip_image"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Flip the image">Flip video image</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#flip_image">Flip video image</div>
   <div id="flip_image" class="collapse">
     <h3>Flip the video image horizontally and/or vertically</h3>
     <p class="link"></p>
@@ -1884,7 +1881,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Flip image -->
 
   <!-- Create ISO -->
-  <span data-toggle="collapse" data-target="#create_iso"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create ISO files for DVD access">Create ISO</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#create_iso">Create ISO files for DVD access</div>
   <div id="create_iso" class="collapse">
     <h3>Create ISO files for DVD access</h3>
     <p class="link"></p>
@@ -1902,7 +1899,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Create ISO -->
 
   <!-- Scene Detection using YDIF -->
-  <span data-toggle="collapse" data-target="#csv-ydif"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Exports CSV for scene detection using YDIF">CSV with timecodes and YDIF</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#csv-ydif">CSV with timecodes and YDIF</div>
   <div id="csv-ydif" class="collapse">
     <h3>Exports CSV for scene detection using YDIF</h3>
     <p class="link"></p>
@@ -1922,7 +1919,7 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends sample Scene Detection using YDIF -->
 
   <!-- Cover head switching noise -->
-  <span data-toggle="collapse" data-target="#cover_head"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Cover head switching noise">Cover head switching noise</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#cover_head">Cover head switching noise</div>
   <div id="cover_head" class="collapse">
     <h3>Cover head switching noise</h3>
     <p class="link"></p>
@@ -1946,47 +1943,47 @@ ffmpeg -i $file -map 0 -c copy $output
   <!-- ends Cover head switching noise -->
 
   <!-- Record and live-stream simultaneously -->
-    <span data-toggle="collapse" data-target="#record-and-stream"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Record and live-stream simultaneously">Record and live-stream simultaneously</button></span>
-    <div id="record-and-stream" class="collapse">
-      <h3>Record and live-stream simultaneously</h3>
-      <p class="link"></p>
-      <p><code>ffmpeg -re -i <i>${INPUTFILE}</i> -map 0 -flags +global_header -vf scale="1280:-1,format=yuv420p" -pix_fmt yuv420p -level 3.1 -vsync passthrough -crf 26 -g 50 -bufsize 3500k -maxrate 1800k -c:v libx264 -c:a aac -b:a 128000 -r:a 44100 -ac 2 -t ${STREAMDURATION} -f tee <i>"[movflags=+faststart]${TARGETFILE}|[f=flv]${STREAMTARGET}"</i></code></p>
-      <p>I use this script to stream to a RTMP target and record the stream locally as .mp4 with only one ffmpeg-instance.</p>
-      <p>As input, I use <code>bmdcapture</code> which is piped to ffmpeg. But it can also be used with a static videofile as input.</p>
-      <p>The input will be scaled to 1280px width, maintaining height. Also the stream will stop after a given time (see <code>-t</code> option.)</p>
-      <h4>Notes</h4>
-      <ol>
-        <li>I recommend to use this inside a shell script - then you can define the variables <code>${INPUTFILE}</code>, <code>${STREAMDURATION}</code>, <code>${TARGETFILE}</code>, and <code>${STREAMTARGET}</code>.</li>
-        <li>This is in daily use to live-stream a real-world TV show. No errors for nearly 4 years. Some parameters were found by trial-and-error or empiric testing. So suggestions/questions are welcome.</li>
-      </ol>
-      <dl>
-         <dt>ffmpeg </dt><dd>starts the command</dd>
-         <dt>-re </dt><dd>Read input at native framerate</dd>
-         <dt>-i input.mov </dt><dd>The input file. Can also be a <code>-</code> to use STDIN if you pipe in from webcam or SDI.</dd>
-         <dt>-map 0 </dt><dd>map ALL streams from input file to output</dd>
-         <dt>-flags +global_header </dt><dd>Don't place extra data in every keyframe</dd>
-         <dt>-vf scale="1280:-1" </dt><dd>Scale to 1280 width, maintain aspect ratio.</dd>
-         <dt>-pix_fmt yuv420p </dt><dd>convert to 4:2:0 chroma subsampling scheme</dd>
-         <dt>-level 3.1 </dt><dd>H264 Level (defines some thresholds for bitrate)</dd>
-         <dt>-vsync passthrough </dt><dd>Each frame is passed with its timestamp from the demuxer to the muxer.</dd>
-         <dt>-crf 26 </dt><dd>Constant rate factor - basically the quality</dd>
-         <dt>-g 50 </dt><dd>GOP size.</dd>
-         <dt>-bufsize 3500k </dt><dd>Ratecontrol buffer size (~ maxrate x2)</dd>
-         <dt>-maxrate 1800k </dt><dd>Maximum bit rate</dd>
-         <dt>-c:v libx264 </dt><dd>encode output video stream as H.264</dd>
-         <dt>-c:a aac </dt><dd>encode output audio stream as AAC</dd>
-         <dt>-b:a 128000 </dt><dd>The audio bitrate</dd>
-         <dt>-r:a 44100 </dt><dd>The audio samplerate</dd>
-         <dt>-ac 2 </dt><dd>Two audio channels</dd>
-         <dt>-t ${STREAMDURATION} </dt><dd>Time (in seconds) after which the stream should automatically end.</dd>
-         <dt>-f tee </dt><dd>Use multiple outputs. Outputs defined below.</dd>
-         <dt>"[movflags=+faststart]target-file.mp4|[f=flv]rtmp://stream-url/stream-id"</dt><dd>The outputs, separated by a pipe (|). The first is the local file, the second is the live stream. Options for each target are given in square brackets before the target.</dd>
-      </dl>
-    </div>
+  <div class="recipe" data-toggle="collapse" data-target="#record-and-stream">Record and live-stream simultaneously</div>
+  <div id="record-and-stream" class="collapse">
+    <h3>Record and live-stream simultaneously</h3>
+    <p class="link"></p>
+    <p><code>ffmpeg -re -i <i>${INPUTFILE}</i> -map 0 -flags +global_header -vf scale="1280:-1,format=yuv420p" -pix_fmt yuv420p -level 3.1 -vsync passthrough -crf 26 -g 50 -bufsize 3500k -maxrate 1800k -c:v libx264 -c:a aac -b:a 128000 -r:a 44100 -ac 2 -t ${STREAMDURATION} -f tee <i>"[movflags=+faststart]${TARGETFILE}|[f=flv]${STREAMTARGET}"</i></code></p>
+    <p>I use this script to stream to a RTMP target and record the stream locally as .mp4 with only one ffmpeg-instance.</p>
+    <p>As input, I use <code>bmdcapture</code> which is piped to ffmpeg. But it can also be used with a static videofile as input.</p>
+    <p>The input will be scaled to 1280px width, maintaining height. Also the stream will stop after a given time (see <code>-t</code> option.)</p>
+    <h4>Notes</h4>
+    <ol>
+      <li>I recommend to use this inside a shell script - then you can define the variables <code>${INPUTFILE}</code>, <code>${STREAMDURATION}</code>, <code>${TARGETFILE}</code>, and <code>${STREAMTARGET}</code>.</li>
+      <li>This is in daily use to live-stream a real-world TV show. No errors for nearly 4 years. Some parameters were found by trial-and-error or empiric testing. So suggestions/questions are welcome.</li>
+    </ol>
+    <dl>
+       <dt>ffmpeg </dt><dd>starts the command</dd>
+       <dt>-re </dt><dd>Read input at native framerate</dd>
+       <dt>-i input.mov </dt><dd>The input file. Can also be a <code>-</code> to use STDIN if you pipe in from webcam or SDI.</dd>
+       <dt>-map 0 </dt><dd>map ALL streams from input file to output</dd>
+       <dt>-flags +global_header </dt><dd>Don't place extra data in every keyframe</dd>
+       <dt>-vf scale="1280:-1" </dt><dd>Scale to 1280 width, maintain aspect ratio.</dd>
+       <dt>-pix_fmt yuv420p </dt><dd>convert to 4:2:0 chroma subsampling scheme</dd>
+       <dt>-level 3.1 </dt><dd>H264 Level (defines some thresholds for bitrate)</dd>
+       <dt>-vsync passthrough </dt><dd>Each frame is passed with its timestamp from the demuxer to the muxer.</dd>
+       <dt>-crf 26 </dt><dd>Constant rate factor - basically the quality</dd>
+       <dt>-g 50 </dt><dd>GOP size.</dd>
+       <dt>-bufsize 3500k </dt><dd>Ratecontrol buffer size (~ maxrate x2)</dd>
+       <dt>-maxrate 1800k </dt><dd>Maximum bit rate</dd>
+       <dt>-c:v libx264 </dt><dd>encode output video stream as H.264</dd>
+       <dt>-c:a aac </dt><dd>encode output audio stream as AAC</dd>
+       <dt>-b:a 128000 </dt><dd>The audio bitrate</dd>
+       <dt>-r:a 44100 </dt><dd>The audio samplerate</dd>
+       <dt>-ac 2 </dt><dd>Two audio channels</dd>
+       <dt>-t ${STREAMDURATION} </dt><dd>Time (in seconds) after which the stream should automatically end.</dd>
+       <dt>-f tee </dt><dd>Use multiple outputs. Outputs defined below.</dd>
+       <dt>"[movflags=+faststart]target-file.mp4|[f=flv]rtmp://stream-url/stream-id"</dt><dd>The outputs, separated by a pipe (|). The first is the local file, the second is the live stream. Options for each target are given in square brackets before the target.</dd>
+    </dl>
+  </div>
   <!-- END Record and live-stream at the same time -->
 
   <!-- View Subprogram Info -->
-  <span data-toggle="collapse" data-target="#view_subprogram_info"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="View FFmpeg subprogram information">View FFmpeg subprogram information</button></span>
+  <div class="recipe" data-toggle="collapse" data-target="#view_subprogram_info">View FFmpeg subprogram information</div>
   <div id="view_subprogram_info" class="collapse">
     <h3>View information about a specific decoder, encoder, demuxer, muxer, or filter</h3>
     <p class="link"></p>
@@ -2012,7 +2009,7 @@ ffmpeg -i $file -map 0 -c copy $output
   </div>
 
   <!-- sample example -->
-  <!-- <span data-toggle="collapse" data-target="#*****unique name*****"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="*****Hover-over description*****">*****Small title****</button></span>
+  <!-- <div class="recipe" data-toggle="collapse" data-target="#*****unique name*****">*****Title****</div>
   Change the above data-target field, the hover-over description, the button text, and the below div ID
   <div id="*****unique name*****" class="collapse">
     <h3>*****Longer title*****</h3>